Add alerts to login

go.mod

@@ -3,7 +3,7 @@ module github.com/dustinpianalto/quartermaster
 go 1.17
 
 require (
-	github.com/dustinpianalto/errors v0.0.1
+	github.com/dustinpianalto/errors v0.0.2
 	github.com/golang-jwt/jwt v3.2.2+incompatible
 	github.com/golang-migrate/migrate/v4 v4.15.1
 	github.com/gorilla/mux v1.8.0

go.sum

@@ -317,6 +317,8 @@ github.com/dustinpianalto/errors v0.0.0-20211118085456-cf0fb5b111e2 h1:e7d1C9hgZ
 github.com/dustinpianalto/errors v0.0.0-20211118085456-cf0fb5b111e2/go.mod h1:Fo865gGhrM1eyVIp5H5U8kQkZtFc/daiU3QBpUCd+B4=
 github.com/dustinpianalto/errors v0.0.1 h1:Js+9tSiJI/VgOiz0PtRSA8XRpnr1YWHigacYuanufRg=
 github.com/dustinpianalto/errors v0.0.1/go.mod h1:Fo865gGhrM1eyVIp5H5U8kQkZtFc/daiU3QBpUCd+B4=
+github.com/dustinpianalto/errors v0.0.2 h1:uD6ZapWpOxuA0qLOPWCvYnIe8A0P0Y3IlCTBY5QfhvE=
+github.com/dustinpianalto/errors v0.0.2/go.mod h1:Fo865gGhrM1eyVIp5H5U8kQkZtFc/daiU3QBpUCd+B4=
 github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712/go.mod h1:YO35OhQPt3KJa3ryjFM5Bs14WD66h8eGKpfaBNrHW5M=
 github.com/elazarl/goproxy v0.0.0-20180725130230-947c36da3153/go.mod h1:/Zj4wYkgs4iZTTu3o/KG3Itv/qCCa8VVMlb3i9OVuzc=
 github.com/emicklei/go-restful v0.0.0-20170410110728-ff4f55a20633/go.mod h1:otzb+WCGbkyDHkqmQmT5YD2WR4BBwUdeQoFo8l/7tVs=

pkg/ui/frontend/src/views/Login.vue

@@ -1,8 +1,8 @@
 <template>
-  <section class="section-container">
-    <v-row class="signin">
+  <section class="section-container fill-height">
+    <v-row class="signin fill-height">
       <v-spacer />
-      <v-col cols="10" sm="8" md="6" lg="4" class="text-center">
+      <v-col cols="10" sm="8" md="6" lg="4" class="text-center fill-height pb-50">
         <h2 class="grey--text lighten-4">LOGIN</h2>
         <validation-observer ref="observer">
           <v-form @submit.prevent="submit">
@@ -48,6 +48,27 @@
             </div>
           </v-form>
         </validation-observer>
+        <v-spacer />
+        <v-container class="pt-50">
+        <v-alert
+          v-model="success"
+          prominent
+          dense
+          type="success"
+          transition="slide-y-transition"
+        >
+          {{ successMessage }}
+        </v-alert>
+        <v-alert
+          v-model="error"
+          prominent
+          dense
+          type="error"
+          transition="slide-y-transition"
+        >
+          {{ errorMessage }}
+        </v-alert>
+        </v-container>
       </v-col>
       <v-spacer />
     </v-row>
@@ -81,6 +102,10 @@ export default {
     password: null,
     showPass: false,
     response: null,
+    successMessage: null,
+    errorMessage: null,
+    success: false,
+    error: false,
   }),
   computed: {
     params() {
@@ -101,15 +126,22 @@ export default {
       axios
         .post("http://localhost:8000/api/users/login", payload)
         .then((response) => {
-            if (response.status == 200) {
-                this.$router.push({ name: "Dashboard" })
-            }
-        })
-        .catch((error) => {
-          if (error.response.status == 401) {
-              console.log("Bad login info")
+          if (response.status == 200) {
+            this.successMessage = "Successful Login";
+            this.success = true;
+            setTimeout(() => {
+              this.$router.push({ name: "Dashboard" });
+            }, 2000);
           }
         })
+        .catch((error) => {
+          this.errorMessage = error.response.data.error;
+          this.error = true;
+          setTimeout(() => {
+            this.errorMessage = null;
+            this.error = false;
+          }, 3000);
+        });
     },
     clear() {
       // you can use this method to clear login form

pkg/ui/frontend/src/views/Register.vue

@@ -0,0 +1,122 @@
+<template>
+  <section class="section-container">
+    <v-row class="signin">
+      <v-spacer />
+      <v-col cols="10" sm="8" md="6" lg="4" class="text-center">
+        <h2 class="grey--text lighten-4">LOGIN</h2>
+        <validation-observer ref="observer">
+          <v-form @submit.prevent="submit">
+            <validation-provider
+              v-slot="{ errors }"
+              name="Username"
+              rules="required"
+            >
+              <v-text-field
+                v-model="username"
+                :error-messages="errors"
+                label="Username"
+                required
+                outlined
+                dark
+                filled
+                dense
+              ></v-text-field>
+            </validation-provider>
+            <validation-provider
+              v-slot="{ errors }"
+              name="Password"
+              rules="required"
+            >
+              <v-text-field
+                v-model="password"
+                :error-messages="errors"
+                label="Password"
+                :append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
+                @click:append="showPass = !showPass"
+                required
+                outlined
+                dense
+                dark
+                filled
+                :type="showPass ? 'text' : 'password'"
+              ></v-text-field>
+            </validation-provider>
+            <div class="text-center">
+              <v-btn class="signin-btn" type="submit" rounded color="white">
+                Sign In
+              </v-btn>
+            </div>
+          </v-form>
+        </validation-observer>
+      </v-col>
+      <v-spacer />
+    </v-row>
+  </section>
+</template>
+
+<script>
+import { required } from "vee-validate/dist/rules";
+import {
+  extend,
+  ValidationProvider,
+  setInteractionMode,
+  ValidationObserver,
+} from "vee-validate";
+
+setInteractionMode("eager");
+
+extend("required", {
+  ...required,
+  message: "{_field_} can not be empty",
+});
+
+export default {
+  name: "Login",
+  components: {
+    ValidationProvider,
+    ValidationObserver,
+  },
+  data: () => ({
+    username: "",
+    password: null,
+    showPass: false,
+    response: null,
+  }),
+  computed: {
+    params() {
+      return {
+        username: this.username,
+        password: this.password,
+      };
+    },
+  },
+  methods: {
+    async submit() {
+      const valid = await this.$refs.observer.validate();
+      if (valid) {
+        this.login(this.params); // action to login
+      }
+    },
+    async login(payload) {
+      axios
+        .post("http://localhost:8000/api/users/login", payload)
+        .then((response) => {
+            if (response.status == 200) {
+                this.$router.push({ name: "Dashboard" })
+            }
+        })
+        .catch((error) => {
+          if (error.response.status == 401) {
+              console.log("Bad login info")
+          }
+        })
+    },
+    clear() {
+      // you can use this method to clear login form
+      this.username = "";
+      this.password = null;
+      this.$refs.observer.reset();
+    },
+  },
+};
+</script>