Merge branch 'feature/user-login' into 'dev'

feature login

See merge request !10

layouts/empty.vue

 <template>
-  <div>
+  <v-app>
     <Nuxt />
-  </div>
+  </v-app>
 </template>
 
 <script>
-export default {};
+export default {}
 </script>
-
-<style>
-</style>
\ No newline at end of file

nuxt.config.js

@@ -46,7 +46,7 @@ export default {
     '@nuxtjs/axios',
     '@nuxtjs/auth-next',
     '@nuxtjs/toast',
-    '@pinia/nuxt',
+    '@pinia/nuxt'
   ],
 
   // Axios module configuration: https://go.nuxtjs.dev/config-axios
@@ -55,7 +55,7 @@ export default {
     baseURL: 'http://127.0.0.1:8000/api/',
     debug: false,
     proxyHeaders: true,
-    credentials: false,
+    credentials: false
   },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
@@ -91,6 +91,6 @@ export default {
         }
       }
     ]
-  },
+  }
 
 }

package.json

@@ -22,6 +22,7 @@
     "vue": "^2.7.10",
     "vue-server-renderer": "^2.7.10",
     "vue-template-compiler": "^2.7.10",
+    "vuelidate": "^0.7.7",
     "vuetify": "^2.6.10"
   },
   "devDependencies": {

pages/login.vue

 <template>
-  <div style="background-color: #8fc2ff">
-    <Notification :message="error" v-if="error" />
-    <div
-      class="container"
-      style="
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 100vh;
-        background-color: #8fc2ff;
-      "
-    >
-      <div id="form-login">
-        <form @submit.prevent="login">
+  <div class="body">
+    <form class="login-form">
       <NuxtLogo />
-          <input
-            id="email"
+      <v-text-field
         v-model="email"
-            type="email"
-            class="form-control mb-3"
-            placeholder="Email"
+        :error-messages="emailErrors"
+        label="E-mail"
         required
+        @input="$v.email.$touch()"
+        @blur="$v.email.$touch()"
       />
-          <input
-            id="password"
+      <v-text-field
         v-model="password"
-            type="password"
-            class="form-control mb-3"
-            placeholder="password"
-            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
-            maxlength="16"
-            min="6"
+        :error-messages="passwordErrors"
+        :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+        :type="showPassword ? 'text' : 'password'"
+        label="Password"
+        hint="At least 6 characters"
         required
+        @input="$v.password.$touch()"
+        @blur="$v.password.$touch()"
+        @click:append="showPassword = !showPassword"
       />
-          <b-form-checkbox
-            id="checkbox-1"
-            v-model="status"
-            name="checkbox-1"
-            value="accepted"
-            class="mb-2"
-            unchecked-value="not_accepted"
-          >
-            Remember me
-          </b-form-checkbox>
-          <div class="col text-center">
-            <button
-              class="w-30 btn btn-lg btn-primary text-center"
-              type="submit"
-            >
-              Sign in
-            </button>
-          </div>
+      <v-checkbox
+        v-model="checkbox"
+        :error-messages="checkboxErrors"
+        label="Remember me"
+        required
+        @change="$v.checkbox.$touch()"
+        @blur="$v.checkbox.$touch()"
+      />
+      <v-btn class="mr-4" @click="login">
+        Login
+      </v-btn>
+      <v-btn @click="clear">
+        clear
+      </v-btn>
     </form>
   </div>
-    </div>
-  </div>
 </template>
-
 <script>
-import notification from "@/components/notification"
-
 export default {
-  layout: "none",
-  components: { notification },
-  components: { NuxtLogo },
-};
+  // eslint-disable-next-line no-undef
+  components: { NuxtLogo }
+}
 </script>
 <script>
-import { reactive } from "vue";
-import axios from "axios";
+import { validationMixin } from 'vuelidate'
+import { required, minLength, email } from 'vuelidate/lib/validators'
+
 export default {
-  layout: "none",
-  data: () => {
-    return {
-      email: "",
-      password: "",
-      status: null,
-      error: null,
-    };
+  mixins: [validationMixin],
+  layout: 'empty',
+  validations: {
+    email: { required, email },
+    password: { required, minLength: minLength(6) },
+    checkbox: {
+      checked (val) {
+        return val
+      }
+    }
   },
+
+  data: () => ({
+    email: '',
+    password: '',
+    showPassword: false,
+    checkbox: false
+  }),
+
+  computed: {
+    emailErrors () {
+      const errors = []
+      if (!this.$v.email.$dirty) {
+        return errors
+      }
+      !this.$v.email.email && errors.push('Must be valid e-mail')
+      !this.$v.email.required && errors.push('E-mail is required')
+      return errors
+    },
+    passwordErrors () {
+      const errors = []
+      if (!this.$v.password.$dirty) {
+        return errors
+      }
+      !this.$v.password.minLength && errors.push('Password must be at least 6 charactors')
+      !this.$v.password.required && errors.push('Password is required')
+      return errors
+    }
+  },
+
   methods: {
-    async login() {
+    submit () {
+      this.$v.$touch()
+    },
+    clear () {
+      this.$v.$reset()
+      this.email = ''
+      this.password = ''
+      this.checkbox = false
+    },
+    async login () {
       try {
-        const resp = await fetch("http://127.0.0.1:8000/api/login", {
-          method: "POST",
+        const resp = await fetch('http://127.0.0.1:8000/api/login', {
+          method: 'POST',
           headers: {
-            "Content-Type": "application/json",
-            Accept: "application/json",
+            'Content-Type': 'application/json',
+            Accept: 'application/json'
           },
           body: JSON.stringify({
             email: this.email,
             password: this.password,
-            status: this.status,
-          }),
+            status: this.status
+          })
         }).then((response) => {
-          return response.json();
-        });
-        console.log(resp.status);
-        localStorage.setItem("token", resp.data.bearer_token);
-        this.$auth.$storage.setUniversal("token", resp.data.bearer_token);
-        this.$auth.$storage.setUniversal("userName", resp.data.name);
-        this.$auth.$storage.setUniversal("loggedIn", "true");
-        if (resp.status == "success") {
-          this.$toast.success("Successfully authenticated", {
-            duration: 2000,
-          });
-          this.$router.push("home");
+          return response.json()
+        })
+        console.log(resp.status)
+        localStorage.setItem('token', resp.data.bearer_token)
+        this.$auth.$storage.setUniversal('token', resp.data.bearer_token)
+        this.$auth.$storage.setUniversal('userName', resp.data.name)
+        this.$auth.$storage.setUniversal('loggedIn', 'true')
+        if (resp.status == 'success') {
+          this.$toast.success('Successfully authenticated', {
+            duration: 2000
+          })
+          this.$router.push('home')
         }
       } catch (e) {
-        // this.error = "Username or Password not valid";
-        this.$toast.error("Username or Password not valid", {
-          duration: 2000,
-        });
-        this.$router.push("/login");
+        this.$toast.error('Username or Password not valid', {
+          duration: 2000
+        })
+        this.$router.push('/login')
       }
-    },
-    checkForm: function (e) {
-      if (this.name && this.age) {
-        return true;
-      }
-      this.errors = [];
-      if (!this.name) {
-        this.errors.push("Name required.");
     }
-      if (!this.age) {
-        this.errors.push("Age required.");
   }
-      e.preventDefault();
-    },
-  },
-};
+}
 </script>
-<style scoped>
-#form-login {
-  height: 50%;
-  width: 25%;
-  padding: 12px;
-  padding-top: 60px;
+<style>
+.body {
   display: flex;
   justify-content: center;
-  background-color: white;
-  border-radius: 3%;
-  font-weight: 600;
+  text-align: center;
+  align-items: center;
+  background-color: #2c2c2c;
+  height: 100vh;
+}
+.login-form{
+  width: 27%;
+  border: #8fc2ff 1px solid;
+  background-color: #121212;
+  border-radius: 1rem;
+  padding: 2rem 1rem;
+  border-radius: 1rem;
 }
 </style>