From 8d22e66786cde99c1175892f06067ef4df3fe4b3 Mon Sep 17 00:00:00 2001
From: Haakon Tideman Kanter <haakotka@stud.ntnu.no>
Date: Fri, 22 Apr 2022 10:12:02 +0200
Subject: [PATCH] Added ResetPasswordView.vue
---
src/components/LoginForm.vue | 15 ++++---
src/components/ResetPassword.vue | 67 ++++++++++++++++++++++++++++++++
src/router/index.js | 5 +++
src/views/ResetPasswordView.vue | 23 +++++++++++
4 files changed, 105 insertions(+), 5 deletions(-)
create mode 100644 src/components/ResetPassword.vue
create mode 100644 src/views/ResetPasswordView.vue
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 44d12c8..097195a 100644
--- a/src/components/LoginForm.vue
+++ b/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;
}
diff --git a/src/components/ResetPassword.vue b/src/components/ResetPassword.vue
new file mode 100644
index 0000000..7dc4347
--- /dev/null
+++ b/src/components/ResetPassword.vue
@@ -0,0 +1,67 @@
+<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>
diff --git a/src/router/index.js b/src/router/index.js
index 7f1bb99..f0440ea 100644
--- a/src/router/index.js
+++ b/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({
diff --git a/src/views/ResetPasswordView.vue b/src/views/ResetPasswordView.vue
new file mode 100644
index 0000000..eb2cd8d
--- /dev/null
+++ b/src/views/ResetPasswordView.vue
@@ -0,0 +1,23 @@
+<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>
--
GitLab