Added ResetPasswordView.vue

src/components/LoginForm.vue

@@ -42,9 +42,13 @@
               {{ error.$message }}
             </div>
           </div>
-
           <!-- Link to forgot password page will be added here -->
-          <br /><a href="url" id="forgottenPasswordLink">Glemt passord</a>
+          <br /><a
+            href="#"
+            @click="forgotPasswordClicked"
+            id="forgottenPasswordLink"
+            >Glemt passord
+          </a>
         </div>
       </div>
 
@@ -77,7 +81,6 @@ export default {
   setup() {
     return { v$: useVuelidate() };
   },
-
   validations() {
     return {
       user: {
@@ -122,13 +125,16 @@ export default {
 
       if (loginResponse === "Failed login") {
         this.message = "kunne ikke logge inn";
-        this.$store.commit('logout');
+        this.$store.commit("logout");
         return;
       }
 
       this.$store.commit("saveToken", loginResponse);
       console.log(loginResponse);
     },
+    forgotPasswordClicked() {
+      this.$router.push("/resetPassword");
+    },
   },
 };
 </script>
@@ -194,7 +200,6 @@ export default {
   margin: auto;
   text-align: center;
 }
-
 .input-errors {
   color: red;
 }

src/components/ResetPassword.vue

+<template>
+  <div class="resetPassword">
+    <v-img :src="require('../assets/logo3.svg')" class="image" contain />
+    <form class="resetPasswordForm">
+      <label class="label" id="emailLabelId"> Skriv inn E-posten din </label>
+      <input type="email" name="email" v-model="email" class="input" />
+      <button class="resetPasswordButton" id="newPassword">Send inn</button>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ResetPassword.vue",
+  data() {
+    return {
+      email: "",
+    };
+  },
+};
+</script>
+
+<style scoped>
+.resetPasswordForm {
+  background-color: white;
+  border-radius: 10px;
+  margin: auto;
+  width: 80%;
+  justify-content: center;
+  padding: 10px;
+  font-size: 18px;
+}
+.label {
+  margin-top: 20%;
+  float: left;
+}
+.image {
+  width: 45%;
+  margin: auto;
+  margin-top: 20px;
+}
+.input {
+  background-color: #c4c4c4;
+  border-radius: 5px;
+  width: 90%;
+  height: 40px;
+  padding: 5px;
+}
+.resetPasswordButton {
+  display: block;
+  width: 55%;
+  height: 50px;
+  background-color: #1071b8;
+  color: white;
+  border-radius: 10px;
+  justify-content: center;
+  text-align: center;
+  margin: auto;
+  font-size: 25px;
+  margin-bottom: 20px;
+}
+
+#newPassword {
+  margin-top: 20px;
+  font-size: 16px;
+}
+</style>

src/router/index.js

@@ -21,6 +21,11 @@ const routes = [
     name: "loginView",
     component: () => import("../views/LoginView.vue"),
   },
+  {
+    path: "/resetPassword",
+    name: "resetPassword",
+    component: () => import("../views/ResetPasswordView.vue"),
+  },
 ];
 
 const router = createRouter({

src/views/ResetPasswordView.vue

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