From 1b403328249df48a4b0388e867934014e7d8872a Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 11:23:13 +0200
Subject: [PATCH 01/27] Login and signup component update

---
 src/components/FormComponents/LoginForm.vue   | 146 +++++++-----------
 .../FormComponents/RegisterForm.vue           | 106 +++----------
 src/views/FormViews/LoginView.vue             |  12 +-
 src/views/FormViews/RegisterView.vue          |   2 +-
 4 files changed, 83 insertions(+), 183 deletions(-)

diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c..b824040 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,66 @@
 <template>
-  <div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
-    <div class="flex justify-center text-2xl">Logg inn</div>
-    <div
-      id="emailField"
-      class="m-6"
-      :class="{ error: v$.user.email.$errors.length }"
-    >
-      <div class="mb-6">
-        <label
-          for="email"
-          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-          >E-post</label
-        >
-        <input
-          type="email"
-          id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="eksempel@eksempel.no"
-          v-model="v$.user.email.$model"
-          required
-        />
-        <!-- error message -->
-        <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+  <div class="w-full max-w-sm m-auto overflow-hidden bg-white rounded-lg shadow-md mt-[10%]">
+    <div class="px-6 py-4 mt-4">
+
+      <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
+
+      <div>
+        <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
+          <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="email"
+                 placeholder="Skriv inn din e-postadresse *"
+                 v-model="v$.user.email.$model"
+                 required
+                 />
+          <!-- error message -->
+          <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
+          <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"
+                 placeholder="Vennligst oppgi passordet ditt *"
+                 v-model="v$.user.password.$model"
+                 @keyup.enter="loginClicked"
+                 required
+          />
+          <!-- error message -->
           <div
-            class="text-red-600 text-sm"
-            v-show="showError"
-            id="emailErrorId"
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.user.password.$errors"
+              :key="index"
           >
-            {{ error.$message }}
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <div
-      id="passwordField"
-      class="m-6"
-      :class="{ error: v$.user.password.$errors.length }"
-    >
-      <label
-        for="password"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Passord</label
-      >
-      <input
-        type="password"
-        id="password"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-        v-model="v$.user.password.$model"
-        required
-        @keyup.enter="loginClicked"
-      />
-      <!-- error message -->
-      <div
-        class="text-red"
-        v-for="(error, index) of v$.user.password.$errors"
-        :key="index"
-      >
-        <div
-          class="text-red-600 text-sm"
-          v-show="showError"
-          id="passwordErrorId"
-        >
-          {{ error.$message }}
+        <div class="flex items-center justify-between mt-4">
+          <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Glemt passord?</a>
+
+          <Button @click="loginClicked" :text="'Logg på'"></Button>
         </div>
       </div>
     </div>
 
-    <div id="buttonsField" class="m-6">
-      <div class="align-items: flex-end; mb-6">
-        <div class="ml-3 text-sm">
-          <router-link
-            to="/resetPassword"
-            class="text-blue-600 flex justify-end"
-            >Glemt passord</router-link
-          >
-        </div>
-      </div>
-      <button
-        @click="loginClicked"
-        class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
-      >
-        Logg inn
-      </button>
-      <div class="align-items: flex-end; mb-6 mt-12">
-        <div class="text-sm">
-          <router-link to="register" class="text-blue-600 flex justify-center"
-            >Ny bruker</router-link
-          >
-        </div>
-      </div>
-      <div class="flex justify-center">
-        <label>{{ message }}</label>
-      </div>
+    <div class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700">
+      <router-link to="/register" class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline">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-red-500 dark:text-blue-400 hover:underline">{{ message }}</label>
     </div>
   </div>
 </template>
@@ -101,6 +69,7 @@
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton"
 
 export default {
   name: "LoginForm.vue",
@@ -138,9 +107,9 @@ export default {
     async loginClicked() {
       this.showError = true;
 
-      this.v$.user.email.$touch();
+      this.v$.user.$touch();
 
-      if (this.v$.user.email.$invalid) {
+      if (this.v$.user.$invalid) {
         console.log("Ugyldig, avslutter...");
         return;
       }
@@ -167,5 +136,8 @@ export default {
       this.$refs.form.validate();
     },
   },
+  components: {
+    Button,
+  }
 };
 </script>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 240895b..48e2d48 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,107 +1,78 @@
 <template>
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <div
+    class="max-w-sm p-6 m-auto bg-white overflow-hidden rounded-md shadow-md mt-[10%]"
   >
-    <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
-      Opprett ny bruker
-    </h2>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
 
     <form @submit.prevent>
       <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="email"
-            >E-mail</label
-          >
           <input
             v-model="email"
             id="email"
             type="email"
+            placeholder="E-post adresse"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="password"
-            >Passord</label
-          >
           <input
             v-model="password"
             id="password"
             type="password"
+            placeholder="Passord"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
-            >Bekreft Passord</label
-          >
           <input
             v-model="confirmPassword"
             id="confirmPassword"
             type="password"
+            placeholder="Bekreft passord"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="firstName"
-            >Fornavn</label
-          >
           <input
             data-test="firstNameTest"
             v-model="firstName"
             id="firstName"
             type="text"
+            placeholder="Fornavn"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="lastName"
-            >Etternavn</label
-          >
           <input
             v-model="lastName"
             id="lastName"
             type="text"
+            placeholder="Etternavn"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="address"
-            >Addresse</label
-          >
           <input
             v-model="address"
             id="address"
             type="text"
+            placeholder="Adresse"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
       </div>
 
       <div class="flex justify-end mt-6">
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          @click="submit()"
-          type="submit"
-          :disabled="loading"
-        >
-          <div v-if="loading">
-            <div v-if="loading" class="lds-ring">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
-          <div v-else>Lagre</div>
-        </button>
+        <Button @click="submit" :text="'Lagre'"></Button>
       </div>
     </form>
-  </section>
+  </div>
   <ul data-test="errorMessageList">
     <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
     <li v-for="error of v$.$errors" :key="error.$uid">
@@ -118,11 +89,15 @@
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
 import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton"
 
 // const isEmailTaken = (value) =>
 // fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
 
 export default {
+  components: {
+    Button,
+  },
   setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
@@ -182,15 +157,15 @@ export default {
 
       const loginResponse = await doLogin(loginRequest);
 
-      if (loginResponse === "Failed login") {
+      if (loginResponse.isLoggedIn === false) {
         this.errorMessage = "Failed to log in with new user";
         this.$store.commit("logout");
-        this.$router.push("/login");
+        await this.$router.push("/login");
         return;
       }
 
-      this.$store.commit("saveToken", loginResponse);
-      this.$router.push("/");
+      this.$store.commit("saveToken", loginResponse.token);
+      await this.$router.push("/");
     },
     async sendRegisterRequest() {
       const registerInfo = {
@@ -203,48 +178,9 @@ export default {
 
       const response = await registerUser(registerInfo);
 
-      if (response.status === 200) return true;
-      return false;
+      return response.status === 200;
+
     },
   },
 };
 </script>
-
-<style scoped>
-/* https://loading.io/css/ */
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c5..09d909a 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="loginPage">
+  <div class="h-screen grid">
     <LoginForm></LoginForm>
   </div>
 </template>
@@ -12,12 +12,4 @@ export default {
     LoginForm,
   },
 };
-</script>
-
-<style scoped>
-.loginPage {
-  background-color: white;
-  height: 100%;
-  overflow: auto;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index e5d5683..2b431f1 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 content-center grid place-items-center">
+  <div class="h-screen grid">
     <RegisterFormComponent />
   </div>
 </template>
-- 
GitLab


From 288512d2934721978eb5e5f8031f4a70f52d7d87 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 13:13:07 +0200
Subject: [PATCH 02/27] Component update

---
 .../CommunityComponents/NewCommunityForm.vue           |  2 +-
 src/components/CommunityComponents/NewItemForm.vue     |  4 ++--
 src/components/FormComponents/LoginForm.vue            |  2 +-
 src/components/FormComponents/RegisterForm.vue         |  2 +-
 .../UserProfileComponents/LargeProfileCard.vue         | 10 +++++-----
 src/views/CommunityViews/CommunityView.vue             |  7 ++++---
 src/views/UserProfileViews/ProfileView.vue             |  2 +-
 7 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index bb3a4d8..89fefad 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-6">
+  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
     <!-- Component heading -->
     <div class="flex justify-center mt-6">
       <p class="text-4xl">Opprett Gruppe</p>
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9324b2b..8e7c69c 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="m-6">
+  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
     <!-- Component heading -->
-    <div class="flex justify-center">
+    <div class="flex justify-center ">
       <p class="text-4xl mb-6 mt-6">Utleie</p>
     </div>
 
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index b824040..c626107 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full max-w-sm m-auto overflow-hidden bg-white rounded-lg shadow-md mt-[10%]">
+  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
     <div class="px-6 py-4 mt-4">
 
       <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 48e2d48..b96eaec 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="max-w-sm p-6 m-auto bg-white overflow-hidden rounded-md shadow-md mt-[10%]"
+    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
   >
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
 
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 19d2596..7c126c5 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
   >
-    <div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
+    <div v-show="isCurrentUser" class="float-right px-4 pt-4">
       <button
         id="dropdownDefault"
         data-dropdown-toggle="dropdown"
         @click="dropdown = !dropdown"
-        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
         type="button"
       >
         <svg
@@ -25,7 +25,7 @@
       <div
         id="dropdown"
         v-show="dropdown"
-        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 origin-bottom-left absolute"
       >
         <ul class="py-1" aria-labelledby="dropdownDefault">
           <li>
@@ -75,7 +75,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col items-center pb-10">
+    <div class="flex flex-col items-center pb-10 mt-16 z-5">
       <img
         class="mb-3 w-24 h-24 rounded-full shadow-lg"
         src="../../assets/defaultUserProfileImage.jpg"
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index a227905..3a7300a 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,7 +1,8 @@
 <template>
-  <div>
+  <div class="max-w-sm m-auto">
+  <div >
     <img
-        class="cursor-pointer h-8 mr-4 mt-4 float-right"
+        class="cursor-pointer h-8 float-right"
         v-if="isLoggedIn"
         src="@/assets/newCommunity.png"
         alt="Legg til gruppe"
@@ -18,7 +19,7 @@
       <group-list :groupList="localGroups" />
     </div>
   </div>
-
+  </div>
 </template>
 
 <script>
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index c4ea15c..b44558f 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 grid place-items-center">
+  <div>
     <large-profile-card :isCurrentUser="true" class="align-top" />
   </div>
 </template>
-- 
GitLab


From 32530d9d5ca64b24981644a1a7e6f7c461f04fc9 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 14:57:07 +0200
Subject: [PATCH 03/27] Login, register, largeprofilecard, new community, new
 item upgraded to the same styling

---
 src/components/BaseComponents/InputField.vue  | 10 +++
 .../CommunityComponents/NewCommunityForm.vue  | 10 ++-
 .../CommunityComponents/NewItemForm.vue       | 38 +++++------
 src/components/FormComponents/LoginForm.vue   | 30 ++++----
 .../FormComponents/RegisterForm.vue           | 56 +++++++--------
 .../LargeProfileCard.vue                      |  6 +-
 src/views/CommunityViews/CommunityView.vue    | 68 ++++++++-----------
 7 files changed, 104 insertions(+), 114 deletions(-)
 create mode 100644 src/components/BaseComponents/InputField.vue

diff --git a/src/components/BaseComponents/InputField.vue b/src/components/BaseComponents/InputField.vue
new file mode 100644
index 0000000..46fb4fc
--- /dev/null
+++ b/src/components/BaseComponents/InputField.vue
@@ -0,0 +1,10 @@
+<template>
+  <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"
+  />
+</template>
+
+<script>
+export default {
+  name: "InputField"
+}
+</script>
\ No newline at end of file
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 89fefad..28bf92f 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
     <!-- Component heading -->
-    <div class="flex justify-center mt-6">
-      <p class="text-4xl">Opprett Gruppe</p>
-    </div>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
 
     <!-- Radio boxes -->
     <div class="mt-6">
@@ -59,7 +57,7 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.group.name.$model"
         required
       />
@@ -84,7 +82,7 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.group.place.$model"
         required
       />
@@ -112,7 +110,7 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         required
       ></textarea>
 
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 8e7c69c..da1a6e5 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
     <!-- Component heading -->
-    <div class="flex justify-center ">
-      <p class="text-4xl mb-6 mt-6">Utleie</p>
-    </div>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
 
     <!-- Title -->
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -15,7 +13,7 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.item.title.$model"
         required
       />
@@ -42,7 +40,7 @@
       <select
         v-model="v$.item.select.$model"
         id="categories"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a category
@@ -76,7 +74,7 @@
       >
       <select
         v-model="v$.item.selectGroup.$model"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a Group
@@ -113,7 +111,7 @@
         type="number"
         v-model="v$.item.price.$model"
         id="price"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         required
       />
 
@@ -140,7 +138,7 @@
         id="description"
         rows="4"
         v-model="v$.item.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         required
       ></textarea>
 
@@ -164,7 +162,7 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.item.address.$model"
         id="adress"
         required
@@ -200,12 +198,10 @@
         accept="image/png, image/jpeg"
       />
 
-      <button
+      <Button
+          :text="'Velg bilde'"
         @click="$refs.file.click()"
-        class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
-      >
-        Velg bilde
-      </button>
+        />
 
       <div v-for="image in item.images" :key="image" class="m-2">
         <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
@@ -214,13 +210,12 @@
 
     <!-- Save item button -->
     <div class="flex justify-center">
-      <button
+      <Button
+          :text="'Lagre'"
         @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         id="saveButton"
-      >
-        Lagre
-      </button>
+      />
+
     </div>
   </div>
 </template>
@@ -229,6 +224,7 @@
 import useVuelidate from "@vuelidate/core";
 import { parseUserFromToken } from "@/utils/token-utils";
 import { postNewItem } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 import {
   required,
@@ -241,6 +237,10 @@ import {
 export default {
   name: "AddNewItem",
 
+  components:{
+    Button,
+  },
+
   setup() {
     return { v$: useVuelidate() };
   },
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index c626107..b493d4c 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
+  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
     <div class="px-6 py-4 mt-4">
 
-      <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
+      <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Logg på</h3>
 
       <div>
-        <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
+        <div class="w-full mt-6" :class="{ error: v$.user.email.$errors.length }">
           <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="email"
-                 placeholder="Skriv inn din e-postadresse *"
-                 v-model="v$.user.email.$model"
-                 required
-                 />
+                      placeholder="Skriv inn din e-postadresse *"
+                      v-model="v$.user.email.$model"
+                      required
+          />
           <!-- error message -->
           <div v-for="(error, index) of v$.user.email.$errors" :key="index">
             <div
@@ -48,8 +48,8 @@
           </div>
         </div>
 
-        <div class="flex items-center justify-between mt-4">
-          <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Glemt passord?</a>
+        <div class="flex items-center justify-between mt-8 ">
+          <router-link to="/resetPassword" class="text-blue-500">Glemt passord?</router-link>
 
           <Button @click="loginClicked" :text="'Logg på'"></Button>
         </div>
@@ -74,6 +74,9 @@ import Button from "@/components/BaseComponents/ColoredButton"
 export default {
   name: "LoginForm.vue",
 
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -105,6 +108,7 @@ export default {
 
   methods: {
     async loginClicked() {
+
       this.showError = true;
 
       this.v$.user.$touch();
@@ -123,7 +127,6 @@ export default {
 
       if (loginResponse.isLoggedIn === false) {
         this.message = "Feil e-post/passord";
-        this.$store.commit("logout");
       } else if (loginResponse.isLoggedIn === true) {
         this.$store.commit("saveToken", loginResponse.token);
         await this.$router.push("/");
@@ -131,13 +134,6 @@ export default {
         console.log("Something went wrong");
       }
     },
-
-    validate() {
-      this.$refs.form.validate();
-    },
   },
-  components: {
-    Button,
-  }
 };
 </script>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index b96eaec..250a3ac 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,70 +1,64 @@
 <template>
   <div
-    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
+    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
   >
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny bruker</h3>
 
     <form @submit.prevent>
-      <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
-        <div>
-          <input
-            v-model="email"
-            id="email"
+      <div class="grid grid-cols-1 gap-6 mt-4">
+        <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"
+                 v-model="email"
+                 id="email"
             type="email"
             placeholder="E-post adresse"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+         />
         </div>
 
-        <div>
-          <input
-            v-model="password"
-            id="password"
+        <div class="w-full">
+          <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"
+                 v-model="password"
+                 id="password"
             type="password"
             placeholder="Passord"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            v-model="confirmPassword"
+          <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"
+                 v-model="confirmPassword"
             id="confirmPassword"
             type="password"
             placeholder="Bekreft passord"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            data-test="firstNameTest"
+          <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"
+                 data-test="firstNameTest"
             v-model="firstName"
             id="firstName"
             type="text"
             placeholder="Fornavn"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            v-model="lastName"
+          <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"
+                 v-model="lastName"
             id="lastName"
             type="text"
             placeholder="Etternavn"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            v-model="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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+                 v-model="address"
             id="address"
             type="text"
             placeholder="Adresse"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
       </div>
 
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 7c126c5..5d8f876 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
+    class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
   >
     <div v-show="isCurrentUser" class="float-right px-4 pt-4">
       <button
@@ -25,9 +25,9 @@
       <div
         id="dropdown"
         v-show="dropdown"
-        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 origin-bottom-left absolute"
+        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 "
       >
-        <ul class="py-1" aria-labelledby="dropdownDefault">
+        <ul class="py-1 absolute bg-white" aria-labelledby="dropdownDefault">
           <li>
             <router-link
               to=""
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 3a7300a..a6ef26f 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,57 +1,49 @@
 <template>
-  <div class="max-w-sm m-auto">
-  <div >
-    <img
-        class="cursor-pointer h-8 float-right"
-        v-if="isLoggedIn"
-        src="@/assets/newCommunity.png"
-        alt="Legg til gruppe"
-        @click="$router.push('/createNewGroup')"
-    />
-  </div>
-  <div>
-    <div id="myGroups" v-if="isLoggedIn">
-      <div class="m-4" >Mine grupper:</div>
-      <group-list :groupList="myGroups" />
-    </div>
-    <div id="localGroups">
-      <div class="m-4">Offentlige grupper:</div>
-      <group-list :groupList="localGroups" />
+  <div v-if="loggedIn">
+    <div class="flex flex-row p-4 relative">
+      <p class="capitalize font-bold w-full">Mine felleskap</p>
+      <PlusIcon
+          class="cursor-pointer max-h-6 max-w-6 float-right grow"
+          @click="$router.push('/createNewGroup')"
+          v-if="loggedIn"
+          alt="Lag ett nytt felleskap"
+      />
     </div>
+    <CommunityList :communities="myCommunities" :member="true" />
   </div>
-  </div>
+  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <CommunityList :communities="publicCommunities" :member="false" />
 </template>
 
 <script>
-import GroupList from "@/components/CommunityComponents/CommunityList.vue";
+import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
 import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
+import { PlusIcon } from "@heroicons/vue/outline";
 
 export default {
   name: "HomeView",
   data() {
     return {
-      isLoggedIn: false,
-      myGroups: [],
-      localGroups: [],
+      loggedIn: false,
+      myCommunities: [],
+      publicCommunities: [],
     };
   },
   components: {
-    GroupList,
-  },
-  methods: {
-    async getMyGroups() {
-      this.myGroups = await getMyGroups();
-    },
-    async getPotentialGroups() {
-      this.localGroups = await getVisibleGroups();
-    },
+    CommunityList,
+    PlusIcon,
   },
   async created() {
-    await this.getMyGroups();
-    await this.getPotentialGroups();
-    if(this.$store.state.user.token !== null){
-      this.isLoggedIn = true
-    }
-    },
+    this.publicCommunities = await getVisibleGroups();
+    this.loggedIn = this.$store.state.user.token !== null;
+    if (!this.loggedIn) return;
+
+    this.myCommunities = await getMyGroups();
+
+    // Remove all of the user's communities from the public communities arrays
+    this.publicCommunities = this.publicCommunities.filter(
+        (val) => !this.myCommunities.includes(val)
+    );
+  },
 };
 </script>
-- 
GitLab


From bdd0391cfa9d4daae11c049aeb61d8d3c6a94910 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 14:59:53 +0200
Subject: [PATCH 04/27] Styling update

---
 src/components/CommunityComponents/NewCommunityForm.vue | 2 +-
 src/components/CommunityComponents/NewItemForm.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 28bf92f..3aa82aa 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
+  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
     <!-- Component heading -->
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
 
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index da1a6e5..9e52408 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
+  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
     <!-- Component heading -->
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
 
-- 
GitLab


From 164cf9f2f8e6248dc101ed897c2ce7db911f323c Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:09:40 +0200
Subject: [PATCH 05/27] Validate errors showing in register

---
 .../FormComponents/RegisterForm.vue           | 100 +++++++++++++++---
 1 file changed, 87 insertions(+), 13 deletions(-)

diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 250a3ac..e01d8ba 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -13,15 +13,43 @@
             type="email"
             placeholder="E-post adresse"
          />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.email.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
-        <div class="w-full">
+        <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"
                  v-model="password"
                  id="password"
             type="password"
             placeholder="Passord"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.password.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -31,6 +59,20 @@
             type="password"
             placeholder="Bekreft passord"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.confirmPassword.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="confirmPasswordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -41,6 +83,20 @@
             type="text"
             placeholder="Fornavn"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.firstName.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="firstNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -50,6 +106,20 @@
             type="text"
             placeholder="Etternavn"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.lastName.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="lastNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -59,6 +129,20 @@
             type="text"
             placeholder="Adresse"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.address.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="addressErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
       </div>
 
@@ -67,16 +151,6 @@
       </div>
     </form>
   </div>
-  <ul data-test="errorMessageList">
-    <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
-    <li v-for="error of v$.$errors" :key="error.$uid">
-      <!-- {{ error.$validator }} -->
-      Field
-      {{ error.$property }}
-      has error:
-      {{ error.$message }}
-    </li>
-  </ul>
 </template>
 
 <script>
@@ -95,8 +169,8 @@ export default {
   setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
+      showError: false,
       errorMessage: "",
-      loading: false,
       email: "",
       password: "",
       confirmPassword: "",
@@ -125,7 +199,7 @@ export default {
   methods: {
     async submit() {
       //Display loading symbol
-      this.loading = true;
+      this.showError = true;
 
       //Validate form
       const result = await this.v$.$validate();
-- 
GitLab


From ea9b328f7f3188d86ef5663905621406cfee5a04 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:22:03 +0200
Subject: [PATCH 06/27] Validate errors working in register

---
 src/components/FormComponents/LoginForm.vue   |  4 ++--
 .../FormComponents/RegisterForm.vue           | 21 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index b493d4c..f3259d7 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -84,11 +84,11 @@ export default {
     return {
       user: {
         email: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
           email: helpers.withMessage(`E-posten er ugyldig`, email),
         },
         password: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
         },
       },
     };
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index e01d8ba..5eef8af 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -156,7 +156,7 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
-import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import {required, email, minLength, sameAs, helpers} from "@vuelidate/validators";
 import Button from "@/components/BaseComponents/ColoredButton"
 
 // const isEmailTaken = (value) =>
@@ -182,18 +182,21 @@ export default {
   validations() {
     return {
       email: {
-        required,
-        email,
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        email: helpers.withMessage('E-posten er ugyldig', email),
         // isUnique: helpers.withAsync(isEmailTaken),
       },
       password: {
-        required,
-        minLength: minLength(8),
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
       },
-      confirmPassword: { sameAs: sameAs(this.password) },
-      firstName: { required },
-      lastName: { required },
-      address: { required },
+      confirmPassword: {
+        sameAs: helpers.withMessage('Passordene må være like', sameAs(this.password)),
+        required: helpers.withMessage(`Feltet må være utfylt`, required)
+      },
+      firstName: {required: helpers.withMessage(`Feltet må være utfylt`, required)},
+      lastName: {required: helpers.withMessage(`Feltet må være utfylt`, required)},
+      address: {required: helpers.withMessage(`Feltet må være utfylt`, required)},
     };
   },
   methods: {
-- 
GitLab


From 7d2f00fd92dd983dc7d1bb3ec8192532a7d974ee Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:30:58 +0200
Subject: [PATCH 07/27] Register tests fix

---
 tests/unit/RegisterUserComponent.spec.js      |  14 +-
 .../RegisterUserComponent.spec.js.snap        | 196 ++++++++----------
 2 files changed, 85 insertions(+), 125 deletions(-)

diff --git a/tests/unit/RegisterUserComponent.spec.js b/tests/unit/RegisterUserComponent.spec.js
index b6a4474..142860b 100644
--- a/tests/unit/RegisterUserComponent.spec.js
+++ b/tests/unit/RegisterUserComponent.spec.js
@@ -16,15 +16,8 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
 
-  it("renders error message to user", async () => {
-    await wrapper.setData({ errorMessage: "test message" });
-    expect(wrapper.find('li[data-test="customErrorMsg"]').text()).toBe(
-      "test message"
-    );
-  });
-
   it("renders the h2 text correctly", () => {
-    expect(wrapper.find("h2").text()).toBe("Opprett ny bruker");
+    expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
   });
 
   it("has a button", () => {
@@ -36,11 +29,6 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.vm.firstName).toBe("Gunnar");
   });
 
-  it("displays 5 error messages when submit is clicked with no data", async () => {
-    await wrapper.find("button").trigger("click");
-    expect(wrapper.findAll("li").length).toBe(5);
-  });
-
   /*   it("button click with correct sum", () => {
     wrapper.setData({ guess: "15" });
     const button = wrapper.find("button");
diff --git a/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap b/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap
index f1a63d0..1ba30f8 100644
--- a/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap
+++ b/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap
@@ -2,122 +2,94 @@
 
 exports[`RegisterFormComponent renders correctly 1`] = `
 <div
-  data-v-app=""
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
 >
-  
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <h2
-      class="text-lg font-semibold text-gray-700 capitalize dark:text-white"
+    Opprett ny bruker
+  </h3>
+  <form>
+    <div
+      class="grid grid-cols-1 gap-6 mt-4"
     >
-       Opprett ny bruker 
-    </h2>
-    <form>
-      <div
-        class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"
-      >
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="email"
-          >
-            E-mail
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="email"
-            type="email"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="password"
-          >
-            Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="password"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="confirmPassword"
-          >
-            Bekreft Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="confirmPassword"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="firstName"
-          >
-            Fornavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            data-test="firstNameTest"
-            id="firstName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="lastName"
-          >
-            Etternavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="lastName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="address"
-          >
-            Addresse
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="address"
-            type="text"
-          />
-        </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          id="email"
+          placeholder="E-post adresse"
+          type="email"
+        />
+        <!-- error message -->
+        
+        
       </div>
-      <div
-        class="flex justify-end mt-6"
-      >
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          type="submit"
-        >
-          <div>
-            Lagre
-          </div>
-        </button>
+      <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"
+          id="password"
+          placeholder="Passord"
+          type="password"
+        />
+        <!-- error message -->
+        
+        
       </div>
-    </form>
-  </section>
-  <ul
-    data-test="errorMessageList"
-  >
-    <!--v-if-->
-    
-    
-  </ul>
-  
+      <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"
+          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          id="address"
+          placeholder="Adresse"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+    </div>
+    <div
+      class="flex justify-end mt-6"
+    >
+      <button
+        class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      >
+        Lagre
+      </button>
+    </div>
+  </form>
 </div>
 `;
-- 
GitLab


From fb6d52bfcfe3a9b7545c1339f2c23be8bd0f9eee Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:43:38 +0200
Subject: [PATCH 08/27] Delete RegisterUserComponent.spec.js.snap

---
 .../RegisterUserComponent.spec.js.snap        | 95 -------------------
 1 file changed, 95 deletions(-)
 delete mode 100644 tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap

diff --git a/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap b/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap
deleted file mode 100644
index 1ba30f8..0000000
--- a/tests/unit/__snapshots__/RegisterUserComponent.spec.js.snap
+++ /dev/null
@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RegisterFormComponent renders correctly 1`] = `
-<div
-  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
->
-  <h3
-    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
-  >
-    Opprett ny bruker
-  </h3>
-  <form>
-    <div
-      class="grid grid-cols-1 gap-6 mt-4"
-    >
-      <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"
-          id="email"
-          placeholder="E-post adresse"
-          type="email"
-        />
-        <!-- 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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          id="address"
-          placeholder="Adresse"
-          type="text"
-        />
-        <!-- error message -->
-        
-        
-      </div>
-    </div>
-    <div
-      class="flex justify-end mt-6"
-    >
-      <button
-        class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-        Lagre
-      </button>
-    </div>
-  </form>
-</div>
-`;
-- 
GitLab


From 30c5f92fb888f223c83c7372c260061193bfe6fd Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:29:14 +0200
Subject: [PATCH 09/27] Community view update

---
 src/views/CommunityViews/CommunityView.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index a6ef26f..b4ffedb 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="loggedIn">
-    <div class="flex flex-row p-4 relative">
-      <p class="capitalize font-bold w-full">Mine felleskap</p>
+    <div className="flex flex-row p-4 relative">
+      <p className="capitalize font-bold w-full">Mine felleskap</p>
       <PlusIcon
           class="cursor-pointer max-h-6 max-w-6 float-right grow"
           @click="$router.push('/createNewGroup')"
@@ -9,16 +9,16 @@
           alt="Lag ett nytt felleskap"
       />
     </div>
-    <CommunityList :communities="myCommunities" :member="true" />
+    <CommunityList :communities="myCommunities" :member="true"/>
   </div>
-  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
-  <CommunityList :communities="publicCommunities" :member="false" />
+  <p className="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <CommunityList :communities="publicCommunities" :member="false"/>
 </template>
 
 <script>
 import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-import { PlusIcon } from "@heroicons/vue/outline";
+import {getMyGroups, getVisibleGroups} from "@/utils/apiutil";
+import {PlusIcon} from "@heroicons/vue/outline";
 
 export default {
   name: "HomeView",
-- 
GitLab


From 044f91f7894c98c451e3ab818eda0f9718297947 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:29:41 +0200
Subject: [PATCH 10/27] Community view update

---
 src/views/CommunityViews/CommunityView.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index b4ffedb..a6ef26f 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="loggedIn">
-    <div className="flex flex-row p-4 relative">
-      <p className="capitalize font-bold w-full">Mine felleskap</p>
+    <div class="flex flex-row p-4 relative">
+      <p class="capitalize font-bold w-full">Mine felleskap</p>
       <PlusIcon
           class="cursor-pointer max-h-6 max-w-6 float-right grow"
           @click="$router.push('/createNewGroup')"
@@ -9,16 +9,16 @@
           alt="Lag ett nytt felleskap"
       />
     </div>
-    <CommunityList :communities="myCommunities" :member="true"/>
+    <CommunityList :communities="myCommunities" :member="true" />
   </div>
-  <p className="capitalize font-bold w-full p-4">Offentlige felleskap</p>
-  <CommunityList :communities="publicCommunities" :member="false"/>
+  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <CommunityList :communities="publicCommunities" :member="false" />
 </template>
 
 <script>
 import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import {getMyGroups, getVisibleGroups} from "@/utils/apiutil";
-import {PlusIcon} from "@heroicons/vue/outline";
+import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
+import { PlusIcon } from "@heroicons/vue/outline";
 
 export default {
   name: "HomeView",
-- 
GitLab


From 4022450b7facaf8f079c5ab08f541e409e17aa3e Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 11:23:13 +0200
Subject: [PATCH 11/27] Login and signup component update

---
 src/components/FormComponents/LoginForm.vue   | 146 +++++++-----------
 .../FormComponents/RegisterForm.vue           |  98 ++----------
 src/views/FormViews/LoginView.vue             |  12 +-
 src/views/FormViews/RegisterView.vue          |   2 +-
 4 files changed, 79 insertions(+), 179 deletions(-)

diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index bf7b23c..b824040 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,98 +1,66 @@
 <template>
-  <div class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16">
-    <div class="flex justify-center text-2xl">Logg inn</div>
-    <div
-      id="emailField"
-      class="m-6"
-      :class="{ error: v$.user.email.$errors.length }"
-    >
-      <div class="mb-6">
-        <label
-          for="email"
-          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-          >E-post</label
-        >
-        <input
-          type="email"
-          id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-          placeholder="eksempel@eksempel.no"
-          v-model="v$.user.email.$model"
-          required
-        />
-        <!-- error message -->
-        <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+  <div class="w-full max-w-sm m-auto overflow-hidden bg-white rounded-lg shadow-md mt-[10%]">
+    <div class="px-6 py-4 mt-4">
+
+      <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
+
+      <div>
+        <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
+          <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="email"
+                 placeholder="Skriv inn din e-postadresse *"
+                 v-model="v$.user.email.$model"
+                 required
+                 />
+          <!-- error message -->
+          <div v-for="(error, index) of v$.user.email.$errors" :key="index">
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
+        </div>
+
+        <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
+          <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"
+                 placeholder="Vennligst oppgi passordet ditt *"
+                 v-model="v$.user.password.$model"
+                 @keyup.enter="loginClicked"
+                 required
+          />
+          <!-- error message -->
           <div
-            class="text-red-600 text-sm"
-            v-show="showError"
-            id="emailErrorId"
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.user.password.$errors"
+              :key="index"
           >
-            {{ error.$message }}
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
           </div>
         </div>
-      </div>
-    </div>
 
-    <div
-      id="passwordField"
-      class="m-6"
-      :class="{ error: v$.user.password.$errors.length }"
-    >
-      <label
-        for="password"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Passord</label
-      >
-      <input
-        type="password"
-        id="password"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-        v-model="v$.user.password.$model"
-        required
-        @keyup.enter="loginClicked"
-      />
-      <!-- error message -->
-      <div
-        class="text-red"
-        v-for="(error, index) of v$.user.password.$errors"
-        :key="index"
-      >
-        <div
-          class="text-red-600 text-sm"
-          v-show="showError"
-          id="passwordErrorId"
-        >
-          {{ error.$message }}
+        <div class="flex items-center justify-between mt-4">
+          <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Glemt passord?</a>
+
+          <Button @click="loginClicked" :text="'Logg på'"></Button>
         </div>
       </div>
     </div>
 
-    <div id="buttonsField" class="m-6">
-      <div class="align-items: flex-end; mb-6">
-        <div class="ml-3 text-sm">
-          <router-link
-            to="/resetPassword"
-            class="text-blue-600 flex justify-end"
-            >Glemt passord</router-link
-          >
-        </div>
-      </div>
-      <button
-        @click="loginClicked"
-        class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
-      >
-        Logg inn
-      </button>
-      <div class="align-items: flex-end; mb-6 mt-12">
-        <div class="text-sm">
-          <router-link to="register" class="text-blue-600 flex justify-center"
-            >Ny bruker</router-link
-          >
-        </div>
-      </div>
-      <div class="flex justify-center">
-        <label>{{ message }}</label>
-      </div>
+    <div class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700">
+      <router-link to="/register" class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline">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-red-500 dark:text-blue-400 hover:underline">{{ message }}</label>
     </div>
   </div>
 </template>
@@ -101,6 +69,7 @@
 import useVuelidate from "@vuelidate/core";
 import { required, email, helpers } from "@vuelidate/validators";
 import { doLogin } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton"
 
 export default {
   name: "LoginForm.vue",
@@ -138,9 +107,9 @@ export default {
     async loginClicked() {
       this.showError = true;
 
-      this.v$.user.email.$touch();
+      this.v$.user.$touch();
 
-      if (this.v$.user.email.$invalid) {
+      if (this.v$.user.$invalid) {
         console.log("Ugyldig, avslutter...");
         return;
       }
@@ -167,5 +136,8 @@ export default {
       this.$refs.form.validate();
     },
   },
+  components: {
+    Button,
+  }
 };
 </script>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 3f4551a..48e2d48 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,107 +1,78 @@
 <template>
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <div
+    class="max-w-sm p-6 m-auto bg-white overflow-hidden rounded-md shadow-md mt-[10%]"
   >
-    <h2 class="text-lg font-semibold text-gray-700 capitalize dark:text-white">
-      Opprett ny bruker
-    </h2>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
 
     <form @submit.prevent>
       <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="email"
-            >E-mail</label
-          >
           <input
             v-model="email"
             id="email"
             type="email"
+            placeholder="E-post adresse"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="password"
-            >Passord</label
-          >
           <input
             v-model="password"
             id="password"
             type="password"
+            placeholder="Passord"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="confirmPassword"
-            >Bekreft Passord</label
-          >
           <input
             v-model="confirmPassword"
             id="confirmPassword"
             type="password"
+            placeholder="Bekreft passord"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="firstName"
-            >Fornavn</label
-          >
           <input
             data-test="firstNameTest"
             v-model="firstName"
             id="firstName"
             type="text"
+            placeholder="Fornavn"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="lastName"
-            >Etternavn</label
-          >
           <input
             v-model="lastName"
             id="lastName"
             type="text"
+            placeholder="Etternavn"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
 
         <div>
-          <label class="text-gray-700 dark:text-gray-200" for="address"
-            >Addresse</label
-          >
           <input
             v-model="address"
             id="address"
             type="text"
+            placeholder="Adresse"
             class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
           />
         </div>
       </div>
 
       <div class="flex justify-end mt-6">
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          @click="submit()"
-          type="submit"
-          :disabled="loading"
-        >
-          <div v-if="loading">
-            <div v-if="loading" class="lds-ring">
-              <div></div>
-              <div></div>
-              <div></div>
-              <div></div>
-            </div>
-          </div>
-          <div v-else>Lagre</div>
-        </button>
+        <Button @click="submit" :text="'Lagre'"></Button>
       </div>
     </form>
-  </section>
+  </div>
   <ul data-test="errorMessageList">
     <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
     <li v-for="error of v$.$errors" :key="error.$uid">
@@ -118,11 +89,15 @@
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
 import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import Button from "@/components/BaseComponents/ColoredButton"
 
 // const isEmailTaken = (value) =>
 // fetch(`/api/unique/${value}`).then((r) => r.json()); // check the email in the server
 
 export default {
+  components: {
+    Button,
+  },
   setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
@@ -203,48 +178,9 @@ export default {
 
       const response = await registerUser(registerInfo);
 
-      if (response.status === 200) return true;
-      return false;
+      return response.status === 200;
+
     },
   },
 };
 </script>
-
-<style scoped>
-/* https://loading.io/css/ */
-.lds-ring {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-}
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
-}
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/views/FormViews/LoginView.vue b/src/views/FormViews/LoginView.vue
index 95329c5..09d909a 100644
--- a/src/views/FormViews/LoginView.vue
+++ b/src/views/FormViews/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="loginPage">
+  <div class="h-screen grid">
     <LoginForm></LoginForm>
   </div>
 </template>
@@ -12,12 +12,4 @@ export default {
     LoginForm,
   },
 };
-</script>
-
-<style scoped>
-.loginPage {
-  background-color: white;
-  height: 100%;
-  overflow: auto;
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/src/views/FormViews/RegisterView.vue b/src/views/FormViews/RegisterView.vue
index e5d5683..2b431f1 100644
--- a/src/views/FormViews/RegisterView.vue
+++ b/src/views/FormViews/RegisterView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 content-center grid place-items-center">
+  <div class="h-screen grid">
     <RegisterFormComponent />
   </div>
 </template>
-- 
GitLab


From d100ee6e6477702a02371d587fd7a8be7648995a Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 13:13:07 +0200
Subject: [PATCH 12/27] Component update

---
 .../CommunityComponents/NewCommunityForm.vue           |  2 +-
 src/components/CommunityComponents/NewItemForm.vue     |  4 ++--
 src/components/FormComponents/LoginForm.vue            |  2 +-
 src/components/FormComponents/RegisterForm.vue         |  2 +-
 .../UserProfileComponents/LargeProfileCard.vue         | 10 +++++-----
 src/views/UserProfileViews/ProfileView.vue             |  2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index bb3a4d8..89fefad 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-6">
+  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
     <!-- Component heading -->
     <div class="flex justify-center mt-6">
       <p class="text-4xl">Opprett Gruppe</p>
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 9324b2b..8e7c69c 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="m-6">
+  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
     <!-- Component heading -->
-    <div class="flex justify-center">
+    <div class="flex justify-center ">
       <p class="text-4xl mb-6 mt-6">Utleie</p>
     </div>
 
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index b824040..c626107 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full max-w-sm m-auto overflow-hidden bg-white rounded-lg shadow-md mt-[10%]">
+  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
     <div class="px-6 py-4 mt-4">
 
       <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 48e2d48..b96eaec 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="max-w-sm p-6 m-auto bg-white overflow-hidden rounded-md shadow-md mt-[10%]"
+    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
   >
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
 
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 19d2596..7c126c5 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,13 +1,13 @@
 <template>
   <div
-    class="min-w-full md:min-w-0 md:w-96 my-4 py-8 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700"
+    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
   >
-    <div v-show="isCurrentUser" class="flex absolute justify-end px-4 pt-4">
+    <div v-show="isCurrentUser" class="float-right px-4 pt-4">
       <button
         id="dropdownDefault"
         data-dropdown-toggle="dropdown"
         @click="dropdown = !dropdown"
-        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
+        class="w-10 h-10 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg float-right text-sm p-1.5"
         type="button"
       >
         <svg
@@ -25,7 +25,7 @@
       <div
         id="dropdown"
         v-show="dropdown"
-        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 origin-bottom-left absolute"
       >
         <ul class="py-1" aria-labelledby="dropdownDefault">
           <li>
@@ -75,7 +75,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col items-center pb-10">
+    <div class="flex flex-col items-center pb-10 mt-16 z-5">
       <img
         class="mb-3 w-24 h-24 rounded-full shadow-lg"
         src="../../assets/defaultUserProfileImage.jpg"
diff --git a/src/views/UserProfileViews/ProfileView.vue b/src/views/UserProfileViews/ProfileView.vue
index c4ea15c..b44558f 100644
--- a/src/views/UserProfileViews/ProfileView.vue
+++ b/src/views/UserProfileViews/ProfileView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-screen bg-gray-200 grid place-items-center">
+  <div>
     <large-profile-card :isCurrentUser="true" class="align-top" />
   </div>
 </template>
-- 
GitLab


From 6d2ee10c1b52725a14c6a9a98bafbc3780c96699 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 14:57:07 +0200
Subject: [PATCH 13/27] Login, register, largeprofilecard, new community, new
 item upgraded to the same styling

---
 src/components/BaseComponents/InputField.vue  | 10 ++++
 .../CommunityComponents/NewCommunityForm.vue  | 10 ++--
 .../CommunityComponents/NewItemForm.vue       | 38 ++++++-------
 src/components/FormComponents/LoginForm.vue   | 30 +++++-----
 .../FormComponents/RegisterForm.vue           | 56 +++++++++----------
 .../LargeProfileCard.vue                      |  6 +-
 6 files changed, 74 insertions(+), 76 deletions(-)
 create mode 100644 src/components/BaseComponents/InputField.vue

diff --git a/src/components/BaseComponents/InputField.vue b/src/components/BaseComponents/InputField.vue
new file mode 100644
index 0000000..46fb4fc
--- /dev/null
+++ b/src/components/BaseComponents/InputField.vue
@@ -0,0 +1,10 @@
+<template>
+  <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"
+  />
+</template>
+
+<script>
+export default {
+  name: "InputField"
+}
+</script>
\ No newline at end of file
diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 89fefad..28bf92f 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
     <!-- Component heading -->
-    <div class="flex justify-center mt-6">
-      <p class="text-4xl">Opprett Gruppe</p>
-    </div>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
 
     <!-- Radio boxes -->
     <div class="mt-6">
@@ -59,7 +57,7 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.group.name.$model"
         required
       />
@@ -84,7 +82,7 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.group.place.$model"
         required
       />
@@ -112,7 +110,7 @@
         id="description"
         rows="4"
         v-model="v$.group.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         required
       ></textarea>
 
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index 8e7c69c..da1a6e5 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
     <!-- Component heading -->
-    <div class="flex justify-center ">
-      <p class="text-4xl mb-6 mt-6">Utleie</p>
-    </div>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
 
     <!-- Title -->
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
@@ -15,7 +13,7 @@
       <input
         type="text"
         id="title"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.item.title.$model"
         required
       />
@@ -42,7 +40,7 @@
       <select
         v-model="v$.item.select.$model"
         id="categories"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a category
@@ -76,7 +74,7 @@
       >
       <select
         v-model="v$.item.selectGroup.$model"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
       >
         <option class="text-gray-400" value="" disabled selected>
           Select a Group
@@ -113,7 +111,7 @@
         type="number"
         v-model="v$.item.price.$model"
         id="price"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         required
       />
 
@@ -140,7 +138,7 @@
         id="description"
         rows="4"
         v-model="v$.item.description.$model"
-        class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         required
       ></textarea>
 
@@ -164,7 +162,7 @@
       >
       <input
         type="text"
-        class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        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"
         v-model="v$.item.address.$model"
         id="adress"
         required
@@ -200,12 +198,10 @@
         accept="image/png, image/jpeg"
       />
 
-      <button
+      <Button
+          :text="'Velg bilde'"
         @click="$refs.file.click()"
-        class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
-      >
-        Velg bilde
-      </button>
+        />
 
       <div v-for="image in item.images" :key="image" class="m-2">
         <img :src="image" class="w-2/5 inline" alt="Bilde av gjenstanden" />
@@ -214,13 +210,12 @@
 
     <!-- Save item button -->
     <div class="flex justify-center">
-      <button
+      <Button
+          :text="'Lagre'"
         @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         id="saveButton"
-      >
-        Lagre
-      </button>
+      />
+
     </div>
   </div>
 </template>
@@ -229,6 +224,7 @@
 import useVuelidate from "@vuelidate/core";
 import { parseUserFromToken } from "@/utils/token-utils";
 import { postNewItem } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 import {
   required,
@@ -241,6 +237,10 @@ import {
 export default {
   name: "AddNewItem",
 
+  components:{
+    Button,
+  },
+
   setup() {
     return { v$: useVuelidate() };
   },
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index c626107..b493d4c 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
+  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]">
     <div class="px-6 py-4 mt-4">
 
-      <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Logg på</h3>
+      <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Logg på</h3>
 
       <div>
-        <div class="w-full mt-6" :class="{ error: v$.user.password.$errors.length }">
+        <div class="w-full mt-6" :class="{ error: v$.user.email.$errors.length }">
           <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="email"
-                 placeholder="Skriv inn din e-postadresse *"
-                 v-model="v$.user.email.$model"
-                 required
-                 />
+                      placeholder="Skriv inn din e-postadresse *"
+                      v-model="v$.user.email.$model"
+                      required
+          />
           <!-- error message -->
           <div v-for="(error, index) of v$.user.email.$errors" :key="index">
             <div
@@ -48,8 +48,8 @@
           </div>
         </div>
 
-        <div class="flex items-center justify-between mt-4">
-          <a href="#" class="text-sm text-gray-600 dark:text-gray-200 hover:text-gray-500">Glemt passord?</a>
+        <div class="flex items-center justify-between mt-8 ">
+          <router-link to="/resetPassword" class="text-blue-500">Glemt passord?</router-link>
 
           <Button @click="loginClicked" :text="'Logg på'"></Button>
         </div>
@@ -74,6 +74,9 @@ import Button from "@/components/BaseComponents/ColoredButton"
 export default {
   name: "LoginForm.vue",
 
+  components: {
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
@@ -105,6 +108,7 @@ export default {
 
   methods: {
     async loginClicked() {
+
       this.showError = true;
 
       this.v$.user.$touch();
@@ -123,7 +127,6 @@ export default {
 
       if (loginResponse.isLoggedIn === false) {
         this.message = "Feil e-post/passord";
-        this.$store.commit("logout");
       } else if (loginResponse.isLoggedIn === true) {
         this.$store.commit("saveToken", loginResponse.token);
         await this.$router.push("/");
@@ -131,13 +134,6 @@ export default {
         console.log("Something went wrong");
       }
     },
-
-    validate() {
-      this.$refs.form.validate();
-    },
   },
-  components: {
-    Button,
-  }
 };
 </script>
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index b96eaec..250a3ac 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -1,70 +1,64 @@
 <template>
   <div
-    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
+    class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
   >
-    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200">Opprett ny bruker</h3>
+    <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny bruker</h3>
 
     <form @submit.prevent>
-      <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
-        <div>
-          <input
-            v-model="email"
-            id="email"
+      <div class="grid grid-cols-1 gap-6 mt-4">
+        <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"
+                 v-model="email"
+                 id="email"
             type="email"
             placeholder="E-post adresse"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+         />
         </div>
 
-        <div>
-          <input
-            v-model="password"
-            id="password"
+        <div class="w-full">
+          <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"
+                 v-model="password"
+                 id="password"
             type="password"
             placeholder="Passord"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            v-model="confirmPassword"
+          <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"
+                 v-model="confirmPassword"
             id="confirmPassword"
             type="password"
             placeholder="Bekreft passord"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            data-test="firstNameTest"
+          <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"
+                 data-test="firstNameTest"
             v-model="firstName"
             id="firstName"
             type="text"
             placeholder="Fornavn"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            v-model="lastName"
+          <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"
+                 v-model="lastName"
             id="lastName"
             type="text"
             placeholder="Etternavn"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
 
         <div>
-          <input
-            v-model="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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+                 v-model="address"
             id="address"
             type="text"
             placeholder="Adresse"
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-          />
+            />
         </div>
       </div>
 
diff --git a/src/components/UserProfileComponents/LargeProfileCard.vue b/src/components/UserProfileComponents/LargeProfileCard.vue
index 7c126c5..5d8f876 100644
--- a/src/components/UserProfileComponents/LargeProfileCard.vue
+++ b/src/components/UserProfileComponents/LargeProfileCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
+    class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-6"
   >
     <div v-show="isCurrentUser" class="float-right px-4 pt-4">
       <button
@@ -25,9 +25,9 @@
       <div
         id="dropdown"
         v-show="dropdown"
-        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 origin-bottom-left absolute"
+        class="z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 "
       >
-        <ul class="py-1" aria-labelledby="dropdownDefault">
+        <ul class="py-1 absolute bg-white" aria-labelledby="dropdownDefault">
           <li>
             <router-link
               to=""
-- 
GitLab


From e62f6cdb8fade26a87291a252f5e60ac555dbf07 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 14:59:53 +0200
Subject: [PATCH 14/27] Styling update

---
 src/components/CommunityComponents/NewCommunityForm.vue | 2 +-
 src/components/CommunityComponents/NewItemForm.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 28bf92f..3aa82aa 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
+  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4">
     <!-- Component heading -->
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Opprett ny gruppe</h3>
 
diff --git a/src/components/CommunityComponents/NewItemForm.vue b/src/components/CommunityComponents/NewItemForm.vue
index da1a6e5..9e52408 100644
--- a/src/components/CommunityComponents/NewItemForm.vue
+++ b/src/components/CommunityComponents/NewItemForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full max-w-sm m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
+  <div class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4">
     <!-- Component heading -->
     <h3 class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8">Utleie</h3>
 
-- 
GitLab


From cd1bd0edf75319dd868ff23d0e4fdb25b3bb2a38 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:09:40 +0200
Subject: [PATCH 15/27] Validate errors showing in register

---
 .../FormComponents/RegisterForm.vue           | 100 +++++++++++++++---
 1 file changed, 87 insertions(+), 13 deletions(-)

diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index 250a3ac..e01d8ba 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -13,15 +13,43 @@
             type="email"
             placeholder="E-post adresse"
          />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.email.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="emailErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
-        <div class="w-full">
+        <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"
                  v-model="password"
                  id="password"
             type="password"
             placeholder="Passord"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.password.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="passwordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -31,6 +59,20 @@
             type="password"
             placeholder="Bekreft passord"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.confirmPassword.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="confirmPasswordErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -41,6 +83,20 @@
             type="text"
             placeholder="Fornavn"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.firstName.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="firstNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -50,6 +106,20 @@
             type="text"
             placeholder="Etternavn"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.lastName.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="lastNameErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
 
         <div>
@@ -59,6 +129,20 @@
             type="text"
             placeholder="Adresse"
             />
+          <!-- error message -->
+          <div
+              class="text-red-600 text-sm"
+              v-for="(error, index) of v$.address.$errors"
+              :key="index"
+          >
+            <div
+                class="text-red-600 text-sm"
+                v-show="showError"
+                id="addressErrorId"
+            >
+              {{ error.$message }}
+            </div>
+          </div>
         </div>
       </div>
 
@@ -67,16 +151,6 @@
       </div>
     </form>
   </div>
-  <ul data-test="errorMessageList">
-    <li v-if="errorMessage" data-test="customErrorMsg">{{ errorMessage }}</li>
-    <li v-for="error of v$.$errors" :key="error.$uid">
-      <!-- {{ error.$validator }} -->
-      Field
-      {{ error.$property }}
-      has error:
-      {{ error.$message }}
-    </li>
-  </ul>
 </template>
 
 <script>
@@ -95,8 +169,8 @@ export default {
   setup: () => ({ v$: useVuelidate() }),
   data() {
     return {
+      showError: false,
       errorMessage: "",
-      loading: false,
       email: "",
       password: "",
       confirmPassword: "",
@@ -125,7 +199,7 @@ export default {
   methods: {
     async submit() {
       //Display loading symbol
-      this.loading = true;
+      this.showError = true;
 
       //Validate form
       const result = await this.v$.$validate();
-- 
GitLab


From a7446a00da6c4b20db1e112a644ce72f41aee6f8 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:22:03 +0200
Subject: [PATCH 16/27] Validate errors working in register

---
 src/components/FormComponents/LoginForm.vue   |  4 ++--
 .../FormComponents/RegisterForm.vue           | 21 +++++++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index b493d4c..f3259d7 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -84,11 +84,11 @@ export default {
     return {
       user: {
         email: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
           email: helpers.withMessage(`E-posten er ugyldig`, email),
         },
         password: {
-          required,
+          required: helpers.withMessage(`Feltet må være utfylt`, required),
         },
       },
     };
diff --git a/src/components/FormComponents/RegisterForm.vue b/src/components/FormComponents/RegisterForm.vue
index e01d8ba..5eef8af 100644
--- a/src/components/FormComponents/RegisterForm.vue
+++ b/src/components/FormComponents/RegisterForm.vue
@@ -156,7 +156,7 @@
 <script>
 import useVuelidate from "@vuelidate/core";
 import { doLogin, registerUser } from "@/utils/apiutil";
-import { required, email, minLength, sameAs } from "@vuelidate/validators";
+import {required, email, minLength, sameAs, helpers} from "@vuelidate/validators";
 import Button from "@/components/BaseComponents/ColoredButton"
 
 // const isEmailTaken = (value) =>
@@ -182,18 +182,21 @@ export default {
   validations() {
     return {
       email: {
-        required,
-        email,
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        email: helpers.withMessage('E-posten er ugyldig', email),
         // isUnique: helpers.withAsync(isEmailTaken),
       },
       password: {
-        required,
-        minLength: minLength(8),
+        required: helpers.withMessage(`Feltet må være utfylt`, required),
+        minLength: helpers.withMessage('Passordet må være minst 8 karakterer lang', minLength(8)),
       },
-      confirmPassword: { sameAs: sameAs(this.password) },
-      firstName: { required },
-      lastName: { required },
-      address: { required },
+      confirmPassword: {
+        sameAs: helpers.withMessage('Passordene må være like', sameAs(this.password)),
+        required: helpers.withMessage(`Feltet må være utfylt`, required)
+      },
+      firstName: {required: helpers.withMessage(`Feltet må være utfylt`, required)},
+      lastName: {required: helpers.withMessage(`Feltet må være utfylt`, required)},
+      address: {required: helpers.withMessage(`Feltet må være utfylt`, required)},
     };
   },
   methods: {
-- 
GitLab


From d9b0f3bd77438fe99d867c2aeee196199a3a459e Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 29 Apr 2022 15:30:58 +0200
Subject: [PATCH 17/27] Register tests fix

---
 .../register-user-component.spec.js.snap      | 196 ++++++++----------
 .../register-user-component.spec.js           |  14 +-
 2 files changed, 85 insertions(+), 125 deletions(-)

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 f1a63d0..1ba30f8 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,122 +2,94 @@
 
 exports[`RegisterFormComponent renders correctly 1`] = `
 <div
-  data-v-app=""
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
 >
-  
-  <section
-    class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md dark:bg-gray-800"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <h2
-      class="text-lg font-semibold text-gray-700 capitalize dark:text-white"
+    Opprett ny bruker
+  </h3>
+  <form>
+    <div
+      class="grid grid-cols-1 gap-6 mt-4"
     >
-       Opprett ny bruker 
-    </h2>
-    <form>
-      <div
-        class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2"
-      >
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="email"
-          >
-            E-mail
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="email"
-            type="email"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="password"
-          >
-            Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="password"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="confirmPassword"
-          >
-            Bekreft Passord
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="confirmPassword"
-            type="password"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="firstName"
-          >
-            Fornavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            data-test="firstNameTest"
-            id="firstName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="lastName"
-          >
-            Etternavn
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="lastName"
-            type="text"
-          />
-        </div>
-        <div>
-          <label
-            class="text-gray-700 dark:text-gray-200"
-            for="address"
-          >
-            Addresse
-          </label>
-          <input
-            class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-200 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-blue-300 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring"
-            id="address"
-            type="text"
-          />
-        </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          id="email"
+          placeholder="E-post adresse"
+          type="email"
+        />
+        <!-- error message -->
+        
+        
       </div>
-      <div
-        class="flex justify-end mt-6"
-      >
-        <button
-          class="px-6 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded-md hover:bg-gray-600 focus:outline-none focus:bg-gray-600"
-          type="submit"
-        >
-          <div>
-            Lagre
-          </div>
-        </button>
+      <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"
+          id="password"
+          placeholder="Passord"
+          type="password"
+        />
+        <!-- error message -->
+        
+        
       </div>
-    </form>
-  </section>
-  <ul
-    data-test="errorMessageList"
-  >
-    <!--v-if-->
-    
-    
-  </ul>
-  
+      <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"
+          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          id="address"
+          placeholder="Adresse"
+          type="text"
+        />
+        <!-- error message -->
+        
+        
+      </div>
+    </div>
+    <div
+      class="flex justify-end mt-6"
+    >
+      <button
+        class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      >
+        Lagre
+      </button>
+    </div>
+  </form>
 </div>
 `;
diff --git a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
index b6a4474..142860b 100644
--- a/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
+++ b/tests/unit/component-tests/user-component-tests/register-user-component.spec.js
@@ -16,15 +16,8 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.exists()).toBeTruthy();
   });
 
-  it("renders error message to user", async () => {
-    await wrapper.setData({ errorMessage: "test message" });
-    expect(wrapper.find('li[data-test="customErrorMsg"]').text()).toBe(
-      "test message"
-    );
-  });
-
   it("renders the h2 text correctly", () => {
-    expect(wrapper.find("h2").text()).toBe("Opprett ny bruker");
+    expect(wrapper.find("h3").text()).toBe("Opprett ny bruker");
   });
 
   it("has a button", () => {
@@ -36,11 +29,6 @@ describe("RegisterFormComponent", () => {
     expect(wrapper.vm.firstName).toBe("Gunnar");
   });
 
-  it("displays 5 error messages when submit is clicked with no data", async () => {
-    await wrapper.find("button").trigger("click");
-    expect(wrapper.findAll("li").length).toBe(5);
-  });
-
   /*   it("button click with correct sum", () => {
     wrapper.setData({ guess: "15" });
     const button = wrapper.find("button");
-- 
GitLab


From f424954c86291a51350d4c2fda19800ad752f996 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:29:14 +0200
Subject: [PATCH 18/27] Community view update

---
 src/views/CommunityViews/CommunityView.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 9fd39f5..b68e1f2 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="loggedIn">
-    <div class="flex flex-row p-4 relative">
-      <p class="capitalize font-bold w-full">Mine felleskap</p>
+    <div className="flex flex-row p-4 relative">
+      <p className="capitalize font-bold w-full">Mine felleskap</p>
       <PlusIcon
         class="cursor-pointer max-h-6 max-w-6 float-right grow"
         @click="$router.push('/createNewGroup')"
@@ -9,16 +9,16 @@
         alt="Lag ett nytt felleskap"
       />
     </div>
-    <CommunityList :communities="myCommunities" :member="true" />
+    <CommunityList :communities="myCommunities" :member="true"/>
   </div>
-  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
-  <CommunityList :communities="publicCommunities" :member="false" />
+  <p className="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <CommunityList :communities="publicCommunities" :member="false"/>
 </template>
 
 <script>
 import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
-import { PlusIcon } from "@heroicons/vue/outline";
+import {getMyGroups, getVisibleGroups} from "@/utils/apiutil";
+import {PlusIcon} from "@heroicons/vue/outline";
 
 export default {
   name: "HomeView",
-- 
GitLab


From 574a9c414bb9fe33a4f143fdf08a39f89a4dbb62 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:29:41 +0200
Subject: [PATCH 19/27] Community view update

---
 src/views/CommunityViews/CommunityView.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index b68e1f2..9fd39f5 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="loggedIn">
-    <div className="flex flex-row p-4 relative">
-      <p className="capitalize font-bold w-full">Mine felleskap</p>
+    <div class="flex flex-row p-4 relative">
+      <p class="capitalize font-bold w-full">Mine felleskap</p>
       <PlusIcon
         class="cursor-pointer max-h-6 max-w-6 float-right grow"
         @click="$router.push('/createNewGroup')"
@@ -9,16 +9,16 @@
         alt="Lag ett nytt felleskap"
       />
     </div>
-    <CommunityList :communities="myCommunities" :member="true"/>
+    <CommunityList :communities="myCommunities" :member="true" />
   </div>
-  <p className="capitalize font-bold w-full p-4">Offentlige felleskap</p>
-  <CommunityList :communities="publicCommunities" :member="false"/>
+  <p class="capitalize font-bold w-full p-4">Offentlige felleskap</p>
+  <CommunityList :communities="publicCommunities" :member="false" />
 </template>
 
 <script>
 import CommunityList from "@/components/CommunityComponents/CommunityList.vue";
-import {getMyGroups, getVisibleGroups} from "@/utils/apiutil";
-import {PlusIcon} from "@heroicons/vue/outline";
+import { getMyGroups, getVisibleGroups } from "@/utils/apiutil";
+import { PlusIcon } from "@heroicons/vue/outline";
 
 export default {
   name: "HomeView",
-- 
GitLab


From 491297bf81d0b382fd54e37fb08600a98994bec6 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:43:55 +0200
Subject: [PATCH 20/27] Snapshot updates

---
 .../create-new-group.spec.js.snap             |  20 ++-
 .../__snapshots__/new-item-form.spec.js.snap  |  34 ++---
 .../__snapshots__/login-form.spec.js.snap     | 132 +++++++-----------
 3 files changed, 77 insertions(+), 109 deletions(-)

diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
index a9b5043..11107ad 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
@@ -2,18 +2,14 @@
 
 exports[`CreateNewGroup elements rendering renders correctly 1`] = `
 <div
-  class="m-6"
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
 >
   <!-- Component heading -->
-  <div
-    class="flex justify-center mt-6"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <p
-      class="text-4xl"
-    >
-      Opprett Gruppe
-    </p>
-  </div>
+    Opprett ny gruppe
+  </h3>
   <!-- Radio boxes -->
   <div
     class="mt-6"
@@ -72,7 +68,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       Gruppenavn
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="title"
       required=""
       type="text"
@@ -91,7 +87,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       By/Sted
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       required=""
       type="text"
     />
@@ -110,7 +106,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
       Beskrivelse
     </label>
     <textarea
-      class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="description"
       required=""
       rows="4"
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
index a975fa5..fa0d16d 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
@@ -2,18 +2,14 @@
 
 exports[`NewItemForm component renders correctly 1`] = `
 <div
-  class="m-6"
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4"
 >
   <!-- Component heading -->
-  <div
-    class="flex justify-center"
+  <h3
+    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
   >
-    <p
-      class="text-4xl mb-6 mt-6"
-    >
-      Utleie
-    </p>
-  </div>
+    Utleie
+  </h3>
   <!-- Title -->
   <div
     class="mb-6"
@@ -25,7 +21,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Tittel
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="title"
       required=""
       type="text"
@@ -45,7 +41,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Kategori
     </label>
     <select
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="categories"
     >
       <option
@@ -92,7 +88,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Gruppe
     </label>
     <select
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
     >
       <option
         class="text-gray-400"
@@ -129,7 +125,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Pris
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="price"
       required=""
       type="number"
@@ -149,7 +145,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Beskrivelse
     </label>
     <textarea
-      class="block p-2.5 w-full text-sm text-gray-900 bg-gray-200 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="description"
       required=""
       rows="4"
@@ -168,7 +164,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       Adresse
     </label>
     <input
-      class="bg-gray-200 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      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"
       id="adress"
       required=""
       type="text"
@@ -192,9 +188,9 @@ exports[`NewItemForm component renders correctly 1`] = `
       type="file"
     />
     <button
-      class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800"
+      class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
     >
-       Velg bilde 
+      Velg bilde
     </button>
     
     
@@ -204,10 +200,10 @@ exports[`NewItemForm component renders correctly 1`] = `
     class="flex justify-center"
   >
     <button
-      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
       id="saveButton"
     >
-       Lagre 
+      Lagre
     </button>
   </div>
 </div>
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 c712a50..28ff5c0 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,100 +2,76 @@
 
 exports[`LoginForm component renders correctly 1`] = `
 <div
-  class="max-w-md p-6 mx-auto rounded-md shadow-lg mt-16"
+  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]"
 >
   <div
-    class="flex justify-center text-2xl"
+    class="px-6 py-4 mt-4"
   >
-    Logg inn
-  </div>
-  <div
-    class="m-6"
-    id="emailField"
-  >
-    <div
-      class="mb-6"
+    <h3
+      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
     >
-      <label
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        for="email"
+      Logg på
+    </h3>
+    <div>
+      <div
+        class="w-full mt-6"
       >
-        E-post
-      </label>
-      <input
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-        id="email"
-        placeholder="eksempel@eksempel.no"
-        required=""
-        type="email"
-      />
-      <!-- error message -->
-      
-      
-    </div>
-  </div>
-  <div
-    class="m-6"
-    id="passwordField"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      for="password"
-    >
-      Passord
-    </label>
-    <input
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-      id="password"
-      required=""
-      type="password"
-    />
-    <!-- error message -->
-    
-    
-  </div>
-  <div
-    class="m-6"
-    id="buttonsField"
-  >
-    <div
-      class="align-items: flex-end; mb-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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
+          placeholder="Skriv inn din e-postadresse *"
+          required=""
+          type="email"
+        />
+        <!-- error message -->
+        
+        
+      </div>
       <div
-        class="ml-3 text-sm"
+        class="w-full mt-6"
       >
-        <router-link
-          class="text-blue-600 flex justify-end"
-          to="/resetPassword"
-        >
-          Glemt passord
-        </router-link>
+        <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"
+          placeholder="Vennligst oppgi passordet ditt *"
+          required=""
+          type="password"
+        />
+        <!-- error message -->
+        
+        
       </div>
-    </div>
-    <button
-      class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5"
-    >
-       Logg inn 
-    </button>
-    <div
-      class="align-items: flex-end; mb-6 mt-12"
-    >
       <div
-        class="text-sm"
+        class="flex items-center justify-between mt-8"
       >
         <router-link
-          class="text-blue-600 flex justify-center"
-          to="register"
+          class="text-blue-500"
+          to="/resetPassword"
         >
-          Ny bruker
+          Glemt passord?
         </router-link>
+        <button
+          class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        >
+          Logg på
+        </button>
       </div>
     </div>
-    <div
-      class="flex justify-center"
+  </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-blue-500 dark:text-blue-400 hover:underline"
+      to="/register"
     >
-      <label />
-    </div>
+      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-red-500 dark:text-blue-400 hover:underline"
+    />
   </div>
 </div>
 `;
-- 
GitLab


From 52476b6b6cf2fd8d1797f83b2ddacc400cadcb1b Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:58:57 +0200
Subject: [PATCH 21/27] Delete login-form.spec.js.snap

---
 .../__snapshots__/login-form.spec.js.snap     | 77 -------------------
 1 file changed, 77 deletions(-)
 delete mode 100644 tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap

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
deleted file mode 100644
index 28ff5c0..0000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ /dev/null
@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoginForm component renders correctly 1`] = `
-<div
-  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%]"
->
-  <div
-    class="px-6 py-4 mt-4"
-  >
-    <h3
-      class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
-    >
-      Logg på
-    </h3>
-    <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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          placeholder="Skriv inn din e-postadresse *"
-          required=""
-          type="email"
-        />
-        <!-- error message -->
-        
-        
-      </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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          placeholder="Vennligst oppgi passordet ditt *"
-          required=""
-          type="password"
-        />
-        <!-- error message -->
-        
-        
-      </div>
-      <div
-        class="flex items-center justify-between mt-8"
-      >
-        <router-link
-          class="text-blue-500"
-          to="/resetPassword"
-        >
-          Glemt passord?
-        </router-link>
-        <button
-          class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-        >
-          Logg på
-        </button>
-      </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-blue-500 dark:text-blue-400 hover:underline"
-      to="/register"
-    >
-      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-red-500 dark:text-blue-400 hover:underline"
-    />
-  </div>
-</div>
-`;
-- 
GitLab


From b28ea53c7c7fa50bed4e9c68987b78a6a598c619 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:59:06 +0200
Subject: [PATCH 22/27] Delete register-user-component.spec.js.snap

---
 .../register-user-component.spec.js.snap      | 95 -------------------
 1 file changed, 95 deletions(-)
 delete mode 100644 tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap

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
deleted file mode 100644
index 1ba30f8..0000000
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap
+++ /dev/null
@@ -1,95 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RegisterFormComponent renders correctly 1`] = `
-<div
-  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
->
-  <h3
-    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
-  >
-    Opprett ny bruker
-  </h3>
-  <form>
-    <div
-      class="grid grid-cols-1 gap-6 mt-4"
-    >
-      <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"
-          id="email"
-          placeholder="E-post adresse"
-          type="email"
-        />
-        <!-- 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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          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-blue-400 dark:focus:border-blue-300 focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-blue-300"
-          id="address"
-          placeholder="Adresse"
-          type="text"
-        />
-        <!-- error message -->
-        
-        
-      </div>
-    </div>
-    <div
-      class="flex justify-end mt-6"
-    >
-      <button
-        class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-        Lagre
-      </button>
-    </div>
-  </form>
-</div>
-`;
-- 
GitLab


From b7b01eba5853a0cf10649ff2d830ba06b71a8b5a Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 08:59:33 +0200
Subject: [PATCH 23/27] Delete new-item-form.spec.js

---
 .../new-item-form.spec.js                      | 18 ------------------
 1 file changed, 18 deletions(-)
 delete mode 100644 tests/unit/component-tests/community-component-tests/new-item-form.spec.js

diff --git a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
deleted file mode 100644
index 4559d4a..0000000
--- a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { mount } from "@vue/test-utils";
-import NewItemForm from "@/components/CommunityComponents/NewItemForm.vue"
-
-describe("NewItemForm component", () => {
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = mount(NewItemForm);
-  });
-
-  it("renders correctly", () => {
-    expect(wrapper.element).toMatchSnapshot();
-  });
-
-  it("is instantiated", () => {
-    expect(wrapper.exists()).toBeTruthy();
-  });
-});
\ No newline at end of file
-- 
GitLab


From 66643cb7d3278adc8f7628894ec481cd9e835d77 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 09:01:45 +0200
Subject: [PATCH 24/27] Component updates

---
 .../new-item-form.spec.js                      | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 tests/unit/component-tests/community-component-tests/new-item-form.spec.js

diff --git a/tests/unit/component-tests/community-component-tests/new-item-form.spec.js b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
new file mode 100644
index 0000000..4559d4a
--- /dev/null
+++ b/tests/unit/component-tests/community-component-tests/new-item-form.spec.js
@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import NewItemForm from "@/components/CommunityComponents/NewItemForm.vue"
+
+describe("NewItemForm component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(NewItemForm);
+  });
+
+  it("renders correctly", () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it("is instantiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});
\ No newline at end of file
-- 
GitLab


From 7bb2fe5501b1a11b7e386027bd96d2c8a340161b Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 09:02:33 +0200
Subject: [PATCH 25/27] Delete new-item-form.spec.js.snap

---
 .../__snapshots__/new-item-form.spec.js.snap  | 210 ------------------
 1 file changed, 210 deletions(-)
 delete mode 100644 tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap

diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
deleted file mode 100644
index fa0d16d..0000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap
+++ /dev/null
@@ -1,210 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NewItemForm component renders correctly 1`] = `
-<div
-  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[3%] p-4"
->
-  <!-- Component heading -->
-  <h3
-    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
-  >
-    Utleie
-  </h3>
-  <!-- Title -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="titleLabel"
-    >
-      Tittel
-    </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"
-      id="title"
-      required=""
-      type="text"
-    />
-    <!-- error message for title-->
-    
-    
-  </div>
-  <!-- Select category -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="selectCategoryLabel"
-    >
-      Kategori
-    </label>
-    <select
-      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"
-      id="categories"
-    >
-      <option
-        class="text-gray-400"
-        disabled=""
-        value=""
-      >
-         Select a category 
-      </option>
-      
-      <option
-        class="text-gray-900 text-sm"
-      >
-        Hage
-      </option>
-      <option
-        class="text-gray-900 text-sm"
-      >
-        Kjøkken
-      </option>
-      <option
-        class="text-gray-900 text-sm"
-      >
-        Musikk
-      </option>
-      <option
-        class="text-gray-900 text-sm"
-      >
-        Annet
-      </option>
-      
-    </select>
-    <!-- error message for select box -->
-    
-    
-  </div>
-  <!-- Select Group -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-    >
-      Gruppe
-    </label>
-    <select
-      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"
-    >
-      <option
-        class="text-gray-400"
-        disabled=""
-        value=""
-      >
-         Select a Group 
-      </option>
-      
-      <option
-        class="text-gray-900 text-sm"
-      >
-        4040
-      </option>
-      <option
-        class="text-gray-900 text-sm"
-      >
-        4041
-      </option>
-      
-    </select>
-    <!-- error message for select box -->
-    
-    
-  </div>
-  <!-- price -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="priceLabel"
-    >
-      Pris
-    </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"
-      id="price"
-      required=""
-      type="number"
-    />
-    <!-- error message for price -->
-    
-    
-  </div>
-  <!-- Description -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="descriptionLabel"
-    >
-      Beskrivelse
-    </label>
-    <textarea
-      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"
-      id="description"
-      required=""
-      rows="4"
-    />
-    <!-- error message for description -->
-    
-    
-  </div>
-  <!-- Address -->
-  <div
-    class="mb-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-    >
-      Adresse
-    </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"
-      id="adress"
-      required=""
-      type="text"
-    />
-    <!-- error message for address-->
-    
-    
-  </div>
-  <!-- Images -->
-  <div>
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="imageLabel"
-    >
-       Bilder 
-    </label>
-    <input
-      accept="image/png, image/jpeg"
-      multiple=""
-      style="display: none;"
-      type="file"
-    />
-    <button
-      class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-    >
-      Velg bilde
-    </button>
-    
-    
-  </div>
-  <!-- Save item button -->
-  <div
-    class="flex justify-center"
-  >
-    <button
-      class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      id="saveButton"
-    >
-      Lagre
-    </button>
-  </div>
-</div>
-`;
-- 
GitLab


From 01c20b2848e06bb57ea5eaf5bfb7827de1543bc9 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 09:03:01 +0200
Subject: [PATCH 26/27] Delete create-new-group.spec.js.snap

---
 .../create-new-group.spec.js.snap             | 177 ------------------
 1 file changed, 177 deletions(-)
 delete mode 100644 tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap

diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
deleted file mode 100644
index 11107ad..0000000
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap
+++ /dev/null
@@ -1,177 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreateNewGroup elements rendering renders correctly 1`] = `
-<div
-  class="w-full max-w-md m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl mt-[10%] p-4"
->
-  <!-- Component heading -->
-  <h3
-    class="text-xl font-medium text-center text-gray-600 dark:text-gray-200 mt-4 mb-8"
-  >
-    Opprett ny gruppe
-  </h3>
-  <!-- Radio boxes -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="radioBoxLabel"
-    >
-      Synlighet
-    </label>
-    <div
-      class="form-check"
-    >
-      <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-        id="flexRadioOpen"
-        name="flexRadioDefault"
-        type="radio"
-        value="Ã…pen"
-      />
-      <label
-        class="form-check-label inline-block text-gray-800"
-        for="flexRadioOpen"
-        id="radioBoxOpenLabel"
-      >
-         Ã…pen 
-      </label>
-    </div>
-    <div
-      class="form-check"
-    >
-      <input
-        class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
-        id="flexRadioPrivate"
-        name="flexRadioDefault"
-        type="radio"
-        value="Privat"
-      />
-      <label
-        class="form-check-label inline-block text-gray-800"
-        for="flexRadioPrivate"
-        id="radioBoxPrivateLabel"
-      >
-         Privat 
-      </label>
-    </div>
-  </div>
-  <!-- Title -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      id="titleLabel"
-    >
-      Gruppenavn
-    </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"
-      id="title"
-      required=""
-      type="text"
-    />
-    <!-- error message for title-->
-    
-    
-  </div>
-  <!-- Place -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-    >
-      By/Sted
-    </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"
-      required=""
-      type="text"
-    />
-    <!-- error message for place-->
-    
-    
-  </div>
-  <!-- Description -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-      id="descriptionLabel"
-    >
-      Beskrivelse
-    </label>
-    <textarea
-      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"
-      id="description"
-      required=""
-      rows="4"
-    />
-    <!-- error message for description -->
-    
-    
-  </div>
-  <!-- Images -->
-  <div
-    class="mt-6"
-  >
-    <label
-      class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
-      id="imageLabel"
-    >
-       Bilde 
-    </label>
-    <input
-      accept="image/png, image/jpeg"
-      multiple=""
-      style="display: none;"
-      type="file"
-    />
-    <!-- Button for adding an image -->
-    <div
-      class="inline-flex rounded-md shadow-sm"
-    >
-      <div
-        class="text-red-500 uppercase text-center"
-      >
-         midlertidig fjernet 
-      </div>
-      <!-- &lt;button
-          @click="$refs.file.click()"
-          class="text-black bg-gray-200 hover:bg-grey-800 focus:ring-4 focus:outline-none focus:ring-grey-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-grey-600 dark:hover:bg-grey-700 dark:focus:ring-grey-800 disabled:opacity-50"
-          :disabled="imageAdded"
-        &gt;
-          Velg bilde
-        &lt;/button&gt; -->
-      <!-- Button for removing an image -->
-      <button
-        class="w-1/12 ml-5 text-white bg-white-500 font-medium rounded-lg text-sm"
-        style="display: none;"
-      >
-        <img
-          alt="Remove icon image"
-          src=""
-        />
-      </button>
-    </div>
-    <!-- Div box for showing all chosen images -->
-    
-    
-  </div>
-  <!-- Save item button -->
-  <div
-    class="flex justify-center mt-10"
-  >
-    <button
-      class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      id="saveButton"
-    >
-       Lagre 
-    </button>
-  </div>
-</div>
-`;
-- 
GitLab


From 84defc20fef7b124c4d49d3b9dceaec58c37ac3f Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Mon, 2 May 2022 09:09:49 +0200
Subject: [PATCH 27/27] New community using ColoredButton now

---
 .../CommunityComponents/NewCommunityForm.vue          | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/CommunityComponents/NewCommunityForm.vue b/src/components/CommunityComponents/NewCommunityForm.vue
index 3aa82aa..3973a71 100644
--- a/src/components/CommunityComponents/NewCommunityForm.vue
+++ b/src/components/CommunityComponents/NewCommunityForm.vue
@@ -175,13 +175,12 @@
 
     <!-- Save item button -->
     <div class="flex justify-center mt-10">
-      <button
+      <Button
         @click="saveClicked"
-        class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
         id="saveButton"
+        :text="'Lagre'"
       >
-        Lagre
-      </button>
+      </Button>
     </div>
   </div>
 </template>
@@ -190,10 +189,14 @@
 import useVuelidate from "@vuelidate/core";
 import { required, helpers, maxLength } from "@vuelidate/validators";
 import { postNewgroup } from "@/utils/apiutil";
+import Button from "@/components/BaseComponents/ColoredButton";
 
 export default {
   name: "CreateNewGroup.vue",
 
+  components:{
+    Button,
+  },
   setup() {
     return { v$: useVuelidate() };
   },
-- 
GitLab