added doc and cleaned code

src/components/UserAuthComponents/DeleteUserModal.vue

 <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"

src/components/UserAuthComponents/LoginForm.vue

 <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;
 

src/components/UserAuthComponents/NewPasswordForm.vue

 <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;
 

src/components/UserAuthComponents/RegisterForm.vue

 <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),

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>
 `;

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>
 `;

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>
 `;