New password view created and Login view fixed

src/components/LoginForm.vue

+<!--suppress HtmlDeprecatedAttribute -->
 <template>
   <div>
-    <v-col
-        align="center"
-        justify="space-around"
-    >
+    <v-col align="center" justify="space-around" class="mt-16">
       <v-img
         max-width="45%"
         :src="require('../assets/logo3.svg')"
@@ -11,46 +9,32 @@
       ></v-img>
     </v-col>
 
-    <v-form
-        ref="form"
-        v-model="valid"
-        lazy-validation
-    >
+    <v-form ref="form" v-model="valid" lazy-validation>
       <v-col>
         <v-text-field
           v-model="user.email"
-            :rules="emailRules"
-            label="E-mail"
+          :rules="[rules.email]"
+          label="Epost"
           required
         ></v-text-field>
       </v-col>
 
-
-      <v-col
-        align="right"
-      >
+      <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="Password"
+          label="Passord"
           counter
           @click:append="showPassword = !showPassword"
         ></v-text-field>
 
-        <div class="text-decoration-underline mt-n4 mr-10">
-          Glemt passord
-        </div>
+        <div class="text-decoration-underline mt-n4 mr-10">Glemt passord</div>
       </v-col>
 
-
-
-      <v-col
-          align="center"
-          justify="space-around"
-      >
+      <v-col align="center" justify="space-around">
         <v-btn
           :disabled="!valid"
           color="success"
@@ -63,51 +47,20 @@
         </v-btn>
 
         <div>
-          <a
-              href="/"
-              class="text-decoration-none"
-          >Ny bruker</a>
+          <a href="/" class="text-decoration-none">Ny bruker</a>
         </div>
       </v-col>
-
-
-
     </v-form>
   </div>
-
 </template>
 
 <script>
-import useVuelidate from "@vuelidate/core";
-import { required, email, minLength, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
 import { mapState } from "vuex";
 
 export default {
   name: "LoginForm.vue",
 
-  setup() {
-    return { v$: useVuelidate() };
-  },
-
-  validations() {
-    return {
-      user: {
-        email: {
-          required,
-          email: helpers.withMessage(`E-posten er ugyldig`, email),
-        },
-        password: {
-          required,
-          min: helpers.withMessage(
-            ({ $params }) => `Passordet må inneholde minst ${$params.min} tegn`,
-            minLength(8)
-          ),
-        },
-      },
-    };
-  },
-
   computed: mapState({
     token: (state) => state.user.token,
   }),
@@ -122,13 +75,10 @@ export default {
 
       showPassword: false,
       valid: true,
-      emailRules: [
-        v => !!v || 'E-mail is required',
-        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
-      ],
       rules: {
-        required: value => !!value || 'Required.',
-        min: v => v.length >= 8 || 'Min 8 characters',
+        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",
       },
     };
   },
@@ -136,7 +86,6 @@ export default {
   methods: {
     async loginClicked() {
       console.log(this.user.email + " " + this.user.password);
-      this.showError = true;
       const loginRequest = {
         email: this.user.email,
         password: this.user.password,
@@ -144,8 +93,8 @@ export default {
       const loginResponse = await doLogin(loginRequest);
 
       if (loginResponse === "Failed login") {
-        this.message = "kunne ikke logge inn";
-        this.$store.commit('logout');
+        this.message = "Feil brukernavn/passord";
+        this.$store.commit("logout");
         return;
       }
 
@@ -153,9 +102,8 @@ export default {
       console.log(loginResponse);
     },
 
-
     validate() {
-      this.$refs.form.validate()
+      this.$refs.form.validate();
     },
   },
 };

src/components/NewPasswordForm.vue

+<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-col>
+
+    <v-form ref="form" v-model="valid" lazy-validation class="mt-8">
+      <v-text-field
+        v-model="user.password"
+        :rules="[rules.required, rules.min]"
+        :type="'password'"
+        name="input-10-1"
+        label="Passord"
+        counter
+      ></v-text-field>
+
+      <v-text-field
+        v-model="user.rePassword"
+        :rules="[rules.required, rules.min, rules.passwordConfirmation]"
+        :type="'password'"
+        name="input-10-1"
+        label="Confirm Password"
+        counter
+      ></v-text-field>
+
+      <v-col justify="space-around" align="center">
+        <v-btn
+          :disabled="!valid"
+          color="success"
+          class="mb-4 mt-4"
+          width="50%"
+          height="40px"
+          @click="setNewPassword"
+        >
+          Endre passord
+        </v-btn>
+      </v-col>
+    </v-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NewPasswordForm.vue",
+
+  data() {
+    return {
+      user: {
+        password: "",
+        rePassword: "",
+      },
+
+      valid: true,
+      rules: {
+        required: (value) => !!value || "Feltet er påkrevd",
+        min: (v) => v.length >= 8 || "Minimum 8 tegn",
+        passwordConfirmation: (v) => v === this.user.password || "Passordene må være like"
+      },
+    };
+  },
+
+  methods: {
+    async setNewPassword() {
+
+    },
+    validate() {
+      this.$refs.form.validate();
+    },
+  },
+};
+</script>

src/router/index.js

 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
+import NewPasswordView from "../views/NewPasswordView";
 
 const routes = [
   {
@@ -22,6 +23,11 @@ const routes = [
     name: "login",
     component: LoginView,
   },
+  {
+    path: "/newPassword",
+    name: "newPassword",
+    component: NewPasswordView,
+  },
 ];
 
 const router = createRouter({

src/views/NewPasswordView.vue

+<template>
+  <div class="newPasswordPage">
+    <NewPasswordForm></NewPasswordForm>
+  </div>
+</template>
+
+<script>
+import NewPasswordForm from "@/components/NewPasswordForm";
+export default {
+  name: "NewPasswordView.vue",
+  components: {
+    NewPasswordForm,
+  },
+};
+</script>
+
+<style scoped>
+.newPasswordPage {
+  background-color: white;
+  height: 100%;
+  overflow: auto;
+}
+</style>