diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue index 44d12c8accba3203d5ace551cf67685c856f6cf0..097195ade0b202a6c1262c774ece797971335331 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 0000000000000000000000000000000000000000..7dc43475b90a3ebb237b2fab3689de85c9daa43e --- /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 7f1bb992d6cf24691d12c6352568c75ea1215536..f0440ea917745c6c42faa2ae07a25ade6142f7a1 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 0000000000000000000000000000000000000000..eb2cd8d98a8ffa99dc1c546e02f2198f80e65e49 --- /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>