diff --git a/src/components/UserAuthComponents/DeleteUserModal.vue b/src/components/UserAuthComponents/DeleteUserModal.vue
index df77c6e66c069e6315707f4c648f4386dc2abcab..9fc855e945f9938320d16e340651446fa2c7f3cc 100644
--- a/src/components/UserAuthComponents/DeleteUserModal.vue
+++ b/src/components/UserAuthComponents/DeleteUserModal.vue
@@ -1,5 +1,5 @@
<template>
- <!-- Main modal -->
+ <!-- Main modal for deleting a user -->
<div
v-if="visible"
class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
diff --git a/src/components/UserAuthComponents/LoginForm.vue b/src/components/UserAuthComponents/LoginForm.vue
index ac4ab429ff491b04f3671995e853f4a70c6d2372..05607b1554f62930d1d7b7aed3e05b1eacf4f9e7 100644
--- a/src/components/UserAuthComponents/LoginForm.vue
+++ b/src/components/UserAuthComponents/LoginForm.vue
@@ -1,7 +1,9 @@
<template>
+ <!-- Login form -->
<div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full"
>
+ <!-- Header -->
<div class="px-6 py-4 mt-4">
<div
class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
@@ -9,6 +11,7 @@
Logg på
</div>
+ <!-- Email -->
<div>
<div
class="w-full mt-6"
@@ -21,7 +24,7 @@
v-model="v$.user.email.$model"
required
/>
- <!-- error message -->
+ <!-- error message for email -->
<div v-for="(error, index) of v$.user.email.$errors" :key="index">
<div
class="text-error-medium text-sm"
@@ -33,6 +36,7 @@
</div>
</div>
+ <!-- Password -->
<div
class="w-full mt-6"
:class="{ error: v$.user.password.$errors.length }"
@@ -45,7 +49,7 @@
@keyup.enter="loginClicked"
required
/>
- <!-- error message -->
+ <!-- error message for password -->
<div
class="text-error-medium text-sm"
v-for="(error, index) of v$.user.password.$errors"
@@ -61,11 +65,13 @@
</div>
</div>
+ <!-- Router link for forgetting password. Redirects to reset password page. -->
<div class="flex items-center justify-between mt-8">
<router-link to="/resetPassword" class="text-primary-medium"
>Glemt passord?</router-link
>
+ <!-- Button for logging in -->
<Button
class="login"
@click="loginClicked"
@@ -78,6 +84,7 @@
<div
class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
>
+ <!-- Router link to redirect to registering a new user page -->
<router-link
to="/register"
class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
@@ -85,6 +92,7 @@
>
</div>
<div class="flex items-center justify-center text-center bg-gray-50">
+ <!-- Shows a message to user if login fails -->
<label
class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
>{{ message }}</label
@@ -122,7 +130,6 @@ export default {
},
};
},
-
data() {
return {
message: "",
@@ -136,6 +143,12 @@ export default {
},
methods: {
+ /**
+ * When login clicked, the inputs gets validated. If validation goes
+ * through loginRequest gets posted to api. If it returns false,
+ * user gets a message saying the email or password is wrong. If it
+ * returns true, the token returned gets saved to the state.
+ */
async loginClicked() {
this.showError = true;
diff --git a/src/components/UserAuthComponents/NewPasswordForm.vue b/src/components/UserAuthComponents/NewPasswordForm.vue
index 7dfd1958ee78aca0bd7e1720b939d4c340ba6e9c..4adb53500baaabb5030968f6e2d1cb0916d5c0ea 100644
--- a/src/components/UserAuthComponents/NewPasswordForm.vue
+++ b/src/components/UserAuthComponents/NewPasswordForm.vue
@@ -1,19 +1,21 @@
<template>
+ <!-- A form for changing password -->
<div
class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
+ <!-- Header -->
<h3
class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
>
Endre passord
</h3>
+ <!-- Input field for old password -->
<div
id="oldPasswordField"
:class="{ error: v$.user.oldPassword.$errors.length }"
>
<label
- for="oldPassword"
class="block text-sm text-gray-800 dark:text-gray-200"
>Gammelt passord</label
>
@@ -22,7 +24,7 @@
v-model="v$.user.oldPassword.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
/>
- <!-- error message -->
+ <!-- error message for password -->
<div v-for="(error, index) of v$.user.oldPassword.$errors" :key="index">
<div
class="text-error-medium text-sm"
@@ -34,13 +36,13 @@
</div>
</div>
+ <!-- New password -->
<div
id="firstPasswordField"
class="mt-4"
:class="{ error: v$.user.password.$errors.length }"
>
<label
- for="password"
class="block text-sm text-gray-800 dark:text-gray-200"
>Nytt passord</label
>
@@ -49,7 +51,7 @@
v-model="v$.user.password.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
/>
- <!-- error message -->
+ <!-- error message for password -->
<div v-for="(error, index) of v$.user.password.$errors" :key="index">
<div
class="text-error-medium text-sm"
@@ -61,6 +63,7 @@
</div>
</div>
+ <!-- Repeating new password -->
<div
id="secondPasswordField"
class="mt-4"
@@ -68,7 +71,6 @@
>
<div class="flex items-center justify-between">
<label
- for="rePassword"
class="block text-sm text-gray-800 dark:text-gray-200"
>Gjenta nytt passord</label
>
@@ -79,7 +81,7 @@
v-model="v$.user.rePassword.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
/>
- <!-- error message -->
+ <!-- error message for password -->
<div v-for="(error, index) of v$.user.rePassword.$errors" :key="index">
<div
class="text-error-medium text-sm"
@@ -91,6 +93,7 @@
</div>
</div>
+ <!-- Button -->
<div id="buttonsField" class="mt-6">
<Button
class="float-right"
@@ -98,6 +101,8 @@
:text="'Sett ny passord'"
/>
</div>
+
+ <!-- Message for user -->
<div class="flex items-center justify-center text-center bg-gray-50">
<label
class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
@@ -162,6 +167,11 @@ export default {
token: (state) => state.user.token,
}),
methods: {
+ /**
+ * Validates the form. If it goes through, sends a password change
+ * request to api and gives user a message if it does not get changed.
+ * If changed, saves new token to state.
+ */
async setNewPassword() {
this.showError = true;
diff --git a/src/components/UserAuthComponents/RegisterForm.vue b/src/components/UserAuthComponents/RegisterForm.vue
index d91f5bdfb3aa61ce6a2ea630c1bb24849c90fefd..b47d6ad769397bfda1e294f0b1cc697c2b584533 100644
--- a/src/components/UserAuthComponents/RegisterForm.vue
+++ b/src/components/UserAuthComponents/RegisterForm.vue
@@ -1,4 +1,5 @@
<template>
+ <!-- Register form for creating a new user account -->
<div
class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
@@ -12,6 +13,7 @@
<form @submit.prevent>
<div class="grid grid-cols-1 gap-6 mt-4">
<div>
+ <!-- Email -->
<input
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="email"
@@ -19,7 +21,7 @@
type="email"
placeholder="E-post adresse"
/>
- <!-- error message -->
+ <!-- error message for email -->
<div
class="text-error-medium text-sm"
v-for="(error, index) of v$.email.$errors"
@@ -35,6 +37,7 @@
</div>
<div>
+ <!-- Password -->
<input
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="password"
@@ -83,6 +86,7 @@
</div>
<div>
+ <!-- First name -->
<input
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
data-test="firstNameTest"
@@ -91,7 +95,7 @@
type="text"
placeholder="Fornavn"
/>
- <!-- error message -->
+ <!-- error message for first name-->
<div
class="text-error-medium text-sm"
v-for="(error, index) of v$.firstName.$errors"
@@ -108,6 +112,7 @@
</div>
<div>
+ <!-- Last name -->
<input
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="lastName"
@@ -115,7 +120,7 @@
type="text"
placeholder="Etternavn"
/>
- <!-- error message -->
+ <!-- error message for last name -->
<div
class="text-error-medium text-sm"
v-for="(error, index) of v$.lastName.$errors"
@@ -132,6 +137,7 @@
</div>
<div>
+ <!-- Address -->
<input
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="address"
@@ -139,7 +145,7 @@
type="text"
placeholder="Adresse"
/>
- <!-- error message -->
+ <!-- error message for address -->
<div
class="text-error-medium text-sm"
v-for="(error, index) of v$.address.$errors"
@@ -176,8 +182,6 @@ import {
import Button from "@/components/BaseComponents/ColoredButton";
import UserService from "@/services/user.service";
-// const isEmailTaken = (value) =>
-// fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
export default {
components: {
@@ -201,7 +205,6 @@ export default {
email: {
required: helpers.withMessage(`Feltet må være utfylt`, required),
email: helpers.withMessage("E-posten er ugyldig", email),
- // isUnique: helpers.withAsync(isEmailTaken),
},
password: {
required: helpers.withMessage(`Feltet må være utfylt`, required),
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
index f6bd34180d6771f7dd2f7982bdf4989f1e9928db..da0a65acb1aaebb2d840fba0a32e54ed26c72800 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -2,76 +2,90 @@
exports[`LoginForm component renders correctly 1`] = `
<div
- class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full"
+ data-v-app=""
>
+
+ <!-- Login form -->
<div
- class="px-6 py-4 mt-4"
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full"
>
+ <!-- Header -->
<div
- class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
+ class="px-6 py-4 mt-4"
>
- Logg på
- </div>
- <div>
<div
- class="w-full mt-6"
+ class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- placeholder="Skriv inn din e-postadresse *"
- required=""
- type="email"
- />
- <!-- error message -->
-
-
+ Logg på
</div>
- <div
- class="w-full mt-6"
- >
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- placeholder="Vennligst oppgi passordet ditt *"
- required=""
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="flex items-center justify-between mt-8"
- >
- <router-link
- class="text-primary-medium"
- to="/resetPassword"
+ <!-- Email -->
+ <div>
+ <div
+ class="w-full mt-6"
+ >
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ placeholder="Skriv inn din e-postadresse *"
+ required=""
+ type="email"
+ />
+ <!-- error message for email -->
+
+
+ </div>
+ <!-- Password -->
+ <div
+ class="w-full mt-6"
>
- Glemt passord?
- </router-link>
- <button
- class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light login"
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ placeholder="Vennligst oppgi passordet ditt *"
+ required=""
+ type="password"
+ />
+ <!-- error message for password -->
+
+
+ </div>
+ <!-- Router link for forgetting password. Redirects to reset password page. -->
+ <div
+ class="flex items-center justify-between mt-8"
>
- Logg på
- </button>
+ <router-link
+ class="text-primary-medium"
+ to="/resetPassword"
+ >
+ Glemt passord?
+ </router-link>
+ <!-- Button for logging in -->
+ <button
+ class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light login"
+ >
+ Logg på
+ </button>
+ </div>
</div>
</div>
- </div>
- <div
- class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
- >
- <router-link
- class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
- to="/register"
+ <div
+ class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
>
- Opprette ny konto
- </router-link>
- </div>
- <div
- class="flex items-center justify-center text-center bg-gray-50"
- >
- <label
- class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
- />
+ <!-- Router link to redirect to registering a new user page -->
+ <router-link
+ class="mx-2 text-sm font-bold text-primary-medium dark:text-primary-light hover:underline"
+ to="/register"
+ >
+ Opprette ny konto
+ </router-link>
+ </div>
+ <div
+ class="flex items-center justify-center text-center bg-gray-50"
+ >
+ <!-- Shows a message to user if login fails -->
+ <label
+ class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
+ />
+ </div>
</div>
+
</div>
`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
index 941fc2aaf4c6fd0b024cde59276a29a4af11813f..a62255e09948f531f521385f62d61d04c7899cef 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
@@ -2,87 +2,97 @@
exports[`NewPasswordForm component renders correctly 1`] = `
<div
- class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
+ data-v-app=""
>
- <h3
- class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
- >
- Endre passord
- </h3>
+
+ <!-- A form for changing password -->
<div
- class=""
- id="oldPasswordField"
+ class="md:ring-1 ring-gray-300 rounded-xl overflow-hidden mx-auto mb-auto max-w-md w-full p-4"
>
- <label
- class="block text-sm text-gray-800 dark:text-gray-200"
- for="oldPassword"
+ <!-- Header -->
+ <h3
+ class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
>
- Gammelt passord
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="mt-4"
- id="firstPasswordField"
- >
- <label
- class="block text-sm text-gray-800 dark:text-gray-200"
- for="password"
+ Endre passord
+ </h3>
+ <!-- Input field for old password -->
+ <div
+ class=""
+ id="oldPasswordField"
>
- Nytt passord
- </label>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="mt-4"
- id="secondPasswordField"
- >
+ <label
+ class="block text-sm text-gray-800 dark:text-gray-200"
+ >
+ Gammelt passord
+ </label>
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+ type="password"
+ />
+ <!-- error message for password -->
+
+
+ </div>
+ <!-- New password -->
<div
- class="flex items-center justify-between"
+ class="mt-4"
+ id="firstPasswordField"
>
<label
class="block text-sm text-gray-800 dark:text-gray-200"
- for="rePassword"
>
- Gjenta nytt passord
+ Nytt passord
</label>
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+ type="password"
+ />
+ <!-- error message for password -->
+
+
</div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div
- class="mt-6"
- id="buttonsField"
- >
- <button
- class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light float-right"
+ <!-- Repeating new password -->
+ <div
+ class="mt-4"
+ id="secondPasswordField"
>
- Sett ny passord
- </button>
- </div>
- <div
- class="flex items-center justify-center text-center bg-gray-50"
- >
- <label
- class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
- />
+ <div
+ class="flex items-center justify-between"
+ >
+ <label
+ class="block text-sm text-gray-800 dark:text-gray-200"
+ >
+ Gjenta nytt passord
+ </label>
+ </div>
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+ type="password"
+ />
+ <!-- error message for password -->
+
+
+ </div>
+ <!-- Button -->
+ <div
+ class="mt-6"
+ id="buttonsField"
+ >
+ <button
+ class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light float-right"
+ >
+ Sett ny passord
+ </button>
+ </div>
+ <!-- Message for user -->
+ <div
+ class="flex items-center justify-center text-center bg-gray-50"
+ >
+ <label
+ class="mx-2 text-sm font-bold text-error-medium dark:text-primary-light hover:underline"
+ />
+ </div>
</div>
+
</div>
`;
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
index 4528659ba8dc6ec84a04c67327896759074d5ae7..af2bbf8783faa8af62a497730fa7c81f24b960ed 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
@@ -2,99 +2,111 @@
exports[`RegisterFormComponent renders correctly 1`] = `
<div
- class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
+ data-v-app=""
>
+
+ <!-- Register form for creating a new user account -->
<div
- class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
- id="registerLabel"
+ class="w-full max-w-md mx-auto mb-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4"
>
- Opprett ny konto
- </div>
- <form>
<div
- class="grid grid-cols-1 gap-6 mt-4"
+ class="text-xl md:text-2xl font-medium text-center text-primary-light mt-4 mb-8"
+ id="registerLabel"
>
- <div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="email"
- placeholder="E-post adresse"
- type="email"
- />
- <!-- error message -->
-
-
- <div
- class="text-error-medium text-sm"
- style="display: none;"
- />
- </div>
- <div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="password"
- placeholder="Passord"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="confirmPassword"
- placeholder="Bekreft passord"
- type="password"
- />
- <!-- error message -->
-
-
- </div>
- <div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- data-test="firstNameTest"
- id="firstName"
- placeholder="Fornavn"
- type="text"
- />
- <!-- error message -->
-
-
- </div>
- <div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="lastName"
- placeholder="Etternavn"
- type="text"
- />
- <!-- error message -->
-
-
- </div>
- <div>
- <input
- class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
- id="address"
- placeholder="Adresse"
- type="text"
- />
- <!-- error message -->
-
-
- </div>
+ Opprett ny konto
</div>
- <div
- class="flex justify-end mt-6"
- >
- <button
- class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
+ <form>
+ <div
+ class="grid grid-cols-1 gap-6 mt-4"
>
- Opprett
- </button>
- </div>
- </form>
+ <div>
+ <!-- Email -->
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="email"
+ placeholder="E-post adresse"
+ type="email"
+ />
+ <!-- error message for email -->
+
+
+ <div
+ class="text-error-medium text-sm"
+ style="display: none;"
+ />
+ </div>
+ <div>
+ <!-- Password -->
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="password"
+ placeholder="Passord"
+ type="password"
+ />
+ <!-- error message -->
+
+
+ </div>
+ <div>
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="confirmPassword"
+ placeholder="Bekreft passord"
+ type="password"
+ />
+ <!-- error message -->
+
+
+ </div>
+ <div>
+ <!-- First name -->
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ data-test="firstNameTest"
+ id="firstName"
+ placeholder="Fornavn"
+ type="text"
+ />
+ <!-- error message for first name-->
+
+
+ </div>
+ <div>
+ <!-- Last name -->
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="lastName"
+ placeholder="Etternavn"
+ type="text"
+ />
+ <!-- error message for last name -->
+
+
+ </div>
+ <div>
+ <!-- Address -->
+ <input
+ class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
+ id="address"
+ placeholder="Adresse"
+ type="text"
+ />
+ <!-- error message for address -->
+
+
+ </div>
+ </div>
+ <div
+ class="flex justify-end mt-6"
+ >
+ <button
+ class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
+ >
+ Opprett
+ </button>
+ </div>
+ </form>
+ </div>
+
</div>
`;