Merge branch 'LoginForm_Tailwinded' into 'main'

LoginForm Tailwinded and .env added

See merge request !11

.gitignore

@@ -4,6 +4,7 @@ node_modules
 
 
 # local env files
+.env
 .env.local
 .env.*.local
 

src/components/LoginForm.vue

-<!--suppress HtmlDeprecatedAttribute -->
 <template>
-  <div>
-    <v-col align="center" justify="space-around" class="mt-16">
-      <v-img
-        max-width="45%"
-        :src="require('../assets/logo3.svg')"
-        align="center"
-      ></v-img>
-    </v-col>
-
-    <v-form ref="form" v-model="valid" lazy-validation>
-      <v-col>
-        <v-text-field
-          v-model="user.email"
-          :rules="[rules.email]"
-          label="Epost"
+  <div class="App">
+    <div id="logoField" class="flex justify-center m-6">
+      <img src="../assets/logo3.svg" alt="BoCo logo" />
+    </div>
+
+    <div
+      id="emailField"
+      class="m-6"
+      :class="{ error: v$.user.email.$errors.length }"
+    >
+      <div class="mb-6">
+        <label
+          for="email"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >E-post</label
+        >
+        <input
+          type="email"
+          id="email"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          placeholder="eksempel@eksempel.no"
+          v-model="v$.user.email.$model"
           required
-        ></v-text-field>
-      </v-col>
-
-      <v-col align="right">
-        <v-text-field
-          v-model="user.password"
-          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-          :rules="[rules.required, rules.min]"
-          :type="showPassword ? 'text' : 'password'"
-          name="input-10-1"
-          label="Passord"
-          counter
-          @click:append="showPassword = !showPassword"
-        ></v-text-field>
-
-        <div class="text-decoration-underline mt-n4 mr-10">Glemt passord</div>
-      </v-col>
-
-      <v-col align="center" justify="space-around">
-        <v-btn
-          :disabled="!valid"
-          color="success"
-          class="mb-4 mt-4"
-          width="50%"
-          height="40px"
-          @click="loginClicked"
+        />
+        <!-- error message -->
+        <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+          <div
+            class="text-red-600 text-sm"
+            v-show="showError"
+            id="emailErrorId"
+          >
+            {{ error.$message }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      id="passwordField"
+      class="m-6"
+      :class="{ error: v$.user.password.$errors.length }"
+    >
+      <label
+        for="password"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >Passord</label
+      >
+      <input
+        type="password"
+        id="password"
+        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        v-model="v$.user.password.$model"
+        required
+      />
+      <!-- error message -->
+      <div
+        class="text-red"
+        v-for="(error, index) of v$.user.password.$errors"
+        :key="index"
+      >
+        <div
+          class="text-red-600 text-sm"
+          v-show="showError"
+          id="passwordErrorId"
         >
-          Logg inn
-        </v-btn>
+          {{ error.$message }}
+        </div>
+      </div>
+    </div>
 
-        <div>
-          <a href="/" class="text-decoration-none">Ny bruker</a>
+    <div id="buttonsField" class="m-6">
+      <div class="align-items: flex-end; mb-6">
+        <div class="ml-3 text-sm">
+          <router-link to="about" class="text-blue-600"
+            >Glemt passord</router-link
+          >
+        </div>
+      </div>
+      <button
+        @click="loginClicked"
+        class="flex justify-center align-items: flex-end; text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      >
+        Logg inn
+      </button>
+      <div class="flex justify-center align-items: flex-end; mb-6 mt-6">
+        <div class="ml-3 text-sm">
+          <router-link to="register" class="text-blue-600"
+            >Ny bruker</router-link
+          >
         </div>
-      </v-col>
-    </v-form>
-    <label>{{ message }}</label>
+      </div>
+      <div class="flex flex-row min-h-screen justify-center items-center">
+        <label>{{ message }}</label>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import useVuelidate from "@vuelidate/core";
+import { required, email, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
-import { mapState } from "vuex";
 
 export default {
   name: "LoginForm.vue",
 
-  computed: mapState({
-    token: (state) => state.user.token,
-  }),
+  setup() {
+    return { v$: useVuelidate() };
+  },
+
+  validations() {
+    return {
+      user: {
+        email: {
+          required,
+          email: helpers.withMessage(`E-posten er ugyldig`, email),
+        },
+        password: {
+          required,
+        },
+      },
+    };
+  },
 
   data() {
     return {
@@ -74,33 +131,34 @@ export default {
         password: "",
       },
 
-      showPassword: false,
-      valid: true,
-      rules: {
-        required: (value) => !!value || "Feltet er påkrevd",
-        min: (v) => v.length >= 8 || "Minimum 8 tegn",
-        email: (v) => /.+@.+\..+/.test(v) || "Epost adressen må være gyldig",
-      },
+      showError: false,
     };
   },
 
   methods: {
     async loginClicked() {
-      console.log(this.user.email + " " + this.user.password);
+      this.showError = true;
+
+      this.v$.user.email.$touch();
+
+      if (this.v$.user.email.$invalid) {
+        console.log("Ugyldig, avslutter...");
+        return;
+      }
+
       const loginRequest = {
         email: this.user.email,
         password: this.user.password,
       };
+
       const loginResponse = await doLogin(loginRequest);
 
-      if (loginResponse === "Failed login") {
-        this.message = "Feil brukernavn/passord";
+      if (loginResponse.data === "Login failed") {
+        this.message = "Feil e-post/passord";
         this.$store.commit("logout");
-        return;
+      } else {
+        this.$store.commit("saveToken", loginResponse);
       }
-
-      this.$store.commit("saveToken", loginResponse);
-      console.log(loginResponse);
     },
 
     validate() {

src/utils/apiutil.js

@@ -2,8 +2,12 @@ import axios from "axios";
 
 export function doLogin(loginRequest) {
   return axios
-    .post(`http://65.108.62.223:3000/api/login/authentication`, loginRequest)
+    .post(process.env.VUE_APP_BASEURL + "login/authentication", loginRequest)
     .then((response) => {
       return response.data;
+    })
+    .catch((error) => {
+      console.log(error.response);
+      return error.response;
     });
 }