diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 4f8b255939253b9470ee2170e24759f931c0d5fa..82d0ff7e2022f5779363ad85633f9844f63fd1aa 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -1,162 +1,110 @@
-<template>
- <div>
- <v-col
- align="center"
- justify="space-around"
- >
- <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="emailRules"
- label="E-mail"
- 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="Password"
- 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"
- >
- Logg inn
- </v-btn>
-
- <div>
- <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,
- }),
-
- data() {
- return {
- message: "",
- user: {
- email: "",
- password: "",
- },
-
- 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',
- },
- };
- },
-
- methods: {
- async loginClicked() {
- console.log(this.user.email + " " + this.user.password);
- this.showError = true;
- const loginRequest = {
- email: this.user.email,
- password: this.user.password,
- };
- const loginResponse = await doLogin(loginRequest);
-
- if (loginResponse === "Failed login") {
- this.message = "kunne ikke logge inn";
- this.$store.commit('logout');
- return;
- }
-
- this.$store.commit("saveToken", loginResponse);
- console.log(loginResponse);
- },
-
-
- validate () {
- this.$refs.form.validate()
- },
- },
-};
-</script>
+<!--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"
+ 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"
+ >
+ Logg inn
+ </v-btn>
+
+ <div>
+ <a href="/" class="text-decoration-none">Ny bruker</a>
+ </div>
+ </v-col>
+ </v-form>
+ </div>
+</template>
+
+<script>
+import { doLogin } from "@/utils/apiutil";
+import { mapState } from "vuex";
+
+export default {
+ name: "LoginForm.vue",
+
+ computed: mapState({
+ token: (state) => state.user.token,
+ }),
+
+ data() {
+ return {
+ message: "",
+ user: {
+ email: "",
+ 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",
+ },
+ };
+ },
+
+ methods: {
+ async loginClicked() {
+ console.log(this.user.email + " " + this.user.password);
+ const loginRequest = {
+ email: this.user.email,
+ password: this.user.password,
+ };
+ const loginResponse = await doLogin(loginRequest);
+
+ if (loginResponse === "Failed login") {
+ this.message = "Feil brukernavn/passord";
+ this.$store.commit("logout");
+ return;
+ }
+
+ this.$store.commit("saveToken", loginResponse);
+ console.log(loginResponse);
+ },
+
+ validate() {
+ this.$refs.form.validate();
+ },
+ },
+};
+</script>
diff --git a/src/components/NewPasswordForm.vue b/src/components/NewPasswordForm.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5800624d849148ac6043af8f6f908c002f55d61e
--- /dev/null
+++ b/src/components/NewPasswordForm.vue
@@ -0,0 +1,75 @@
+<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>
diff --git a/src/router/index.js b/src/router/index.js
index ab941a8dfdac0ac33b79511c17842390cdd6efa6..499849a932f5d5db6a9389fa270ee7bda4b03771 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
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({
diff --git a/src/views/NewPasswordView.vue b/src/views/NewPasswordView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bcccd80e96de1cf888b6cc0adb82baa0e48fc8fd
--- /dev/null
+++ b/src/views/NewPasswordView.vue
@@ -0,0 +1,23 @@
+<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>