Merge branch 'main' of https://gitlab.stud.idi.ntnu.no/idatt2106_2022_02/boco-frontend

src/components/BaseComponents/ColoredButton.vue

 <template>
   <button
-    class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+    class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px}"
+    :class="color"
   >
     {{ text }}
   </button>
@@ -11,6 +12,21 @@ export default {
   name: "ColoredButton",
   props: {
     text: String,
+    buttonColor: {
+      type: String,
+      default: "blue",
+    },
+  },
+  computed: {
+    color() {
+      if (this.buttonColor === "red") {
+        return "bg-error-medium hover:bg-error-dark focus:ring-error-light";
+      }
+      if (this.buttonColor === "green") {
+        return "bg-success-medium hover:bg-success-dark focus:ring-success-light";
+      }
+      return "bg-primary-medium hover:bg-primary-dark focus:ring-primary-light";
+    },
   },
 };
 </script>

src/components/CommunityComponents/CommunityHamburger.vue

@@ -25,10 +25,10 @@
           >Administrer Gruppe</router-link
         >
       </li>
-      <li id="leaveGroup">
+      <li id="leaveGroup" v-if="!admin">
         <div
           class="cursor-pointer block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-          @click="leaveCommunity"
+          @click="this.$emit('openLeaveCommunityDialog')"
         >
           Forlat Gruppe
         </div>
@@ -38,8 +38,6 @@
 </template>
 
 <script>
-import { LeaveCommunity } from "@/utils/apiutil";
-
 export default {
   name: "CommunityHamburger",
   data() {
@@ -49,13 +47,6 @@ export default {
       communityID: -1,
     };
   },
-  methods: {
-    leaveCommunity: async function () {
-      this.id = this.$route.params.communityID;
-      await LeaveCommunity(this.id);
-      this.$router.push("/");
-    },
-  },
   created() {
     this.communityID = this.$route.params.communityID;
     if (!Array.isArray(this.$store.state.user.adminList)) return;

src/components/CommunityComponents/CommunityHeader.vue

 <template>
-  <div v-if="loading" class="flex place-content-center mx-4">
-    <LoaderSpinner />
-  </div>
-  <div v-else class="flex items-center justify-between mx-4">
-    <router-link
-      :to="'/community/' + community.communityId"
-      class="flex-1 min-w-0"
+  <div>
+    <CustomFooterModal
+      :title="'Er du sikker på at du vil forlate felleskapet?'"
+      :message="'Dersom felleskapet er låst er du nødt til å spørre om å bli med på nytt.'"
+      :visible="leaveDialog"
+      @close="this.leaveDialog = false"
     >
-      <h2
-        class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
-      >
-        {{ community.name }}
-      </h2>
-      <div
-        class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
+      <div class="flex place-content-center min-w-6">
+        <ColoredButton
+          class="m-2"
+          :buttonColor="'red'"
+          @click="leaveCommunity()"
+          :text="'Ja'"
+        />
+        <ColoredButton
+          class="m-2"
+          :text="'Nei'"
+          @click="this.leaveDialog = false"
+        />
+      </div>
+    </CustomFooterModal>
+    <div v-if="loading" class="flex place-content-center mx-4">
+      <LoaderSpinner />
+    </div>
+    <div v-else class="flex items-center justify-between mx-4">
+      <router-link
+        :to="'/community/' + community.communityId"
+        class="flex-1 min-w-0"
       >
-        <div class="mt-2 flex items-center text-sm text-gray-500">
+        <h2
+          class="text-xl md:text-2xl text-gray-600 font-medium w-full sm:truncate"
+        >
+          {{ community.name }}
+        </h2>
+        <div
+          class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
+        >
+          <div class="mt-2 flex items-center text-sm text-gray-500">
+            <svg
+              class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            {{ community.location }}
+          </div>
+        </div>
+      </router-link>
+      <div>
+        <!-- If the user is not a member in the community, this button will show -->
+        <div v-if="!member">
+          <ColoredButton
+            v-if="!member"
+            :text="'Bli med'"
+            @click="joinCommunity(community.communityId)"
+            class="m-2"
+          />
+
+          <CustomFooterModal
+            @close="this.dialogOpen = false"
+            :visible="dialogOpen"
+            title="Kan ikke bli med"
+            message="Logg inn først for å bli med i en gruppe."
+          />
+        </div>
+
+        <!-- If the user is member of the community, this hamburger menu will show -->
+        <div v-if="member">
           <svg
-            class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+            @click="toggleHamburgerMenu()"
             xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
+            class="w-9 h-9 cursor-pointer"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
           >
             <path
-              fill-rule="evenodd"
-              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
-              clip-rule="evenodd"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M4 6h16M4 12h16M4 18h16"
             />
           </svg>
-          {{ community.location }}
-        </div>
-      </div>
-    </router-link>
-    <div>
-      <!-- If the user is not a member in the community, this button will show -->
-      <div v-if="!member">
-        <ColoredButton
-          v-if="!member"
-          :text="'Bli med'"
-          @click="joinCommunity(community.communityId)"
-          class="m-2"
-        />
-
-        <CustomFooterModal
-          @close="this.dialogOpen = false"
-          :visible="dialogOpen"
-          title="Kan ikke bli med"
-          message="Logg inn først for å bli med i en gruppe."
-        />
-      </div>
 
-      <!-- If the user is member of the community, this hamburger menu will show -->
-      <div v-if="member">
-        <svg
-          @click="toggleHamburgerMenu()"
-          xmlns="http://www.w3.org/2000/svg"
-          class="w-9 h-9 cursor-pointer"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h16"
+          <CommunityHamburger
+            @openLeaveCommunityDialog="this.leaveDialog = true"
+            v-if="hamburgerOpen"
+            class="origin-top-right absolute right-0"
+            :community-i-d="community.communityId"
+            :admin="admin"
           />
-        </svg>
-
-        <CommunityHamburger
-          v-if="hamburgerOpen"
-          class="origin-top-right absolute right-0"
-          :community-i-d="community.communityId"
-          :admin="admin"
-        />
-        <!-- class="absolute" -->
+          <!-- class="absolute" -->
+        </div>
       </div>
     </div>
   </div>
@@ -88,6 +111,8 @@ import LoaderSpinner from "@/components/BaseComponents/LoaderSpinner";
 import CommunityService from "@/services/community.service";
 import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
 import { parseCurrentUser } from "@/utils/token-utils";
+import { LeaveCommunity } from "@/utils/apiutil";
+
 import {
   JoinOpenCommunity,
   // GetIfUserAlreadyInCommunity,
@@ -109,10 +134,11 @@ export default {
   data() {
     return {
       hamburgerOpen: false,
-      dialogOpen: false,
+      leaveDialog: false,
       member: false,
       community: {},
       loading: true,
+      openDialog: false,
     };
   },
   props: {
@@ -122,6 +148,10 @@ export default {
     toggleHamburgerMenu() {
       this.hamburgerOpen = !this.hamburgerOpen;
     },
+    leaveCommunity: async function () {
+      await LeaveCommunity(this.community.communityID);
+      this.$router.push("/");
+    },
     async load() {
       this.community = await CommunityService.getCommunity(
         this.$route.params.communityID

src/services/community.service.js

@@ -55,6 +55,15 @@ class CommunityService {
         console.error(error);
       });
   }
+
+  async leaveCommunity(communityID) {
+    return await axios.patch(
+      API_URL + "/communities/" + communityID + "/leave",
+      {
+        headers: tokenHeader(),
+      }
+    );
+  }
 }
 
 export default new CommunityService();

tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap

@@ -3,24 +3,31 @@
 exports[`CommunityHeader component renders correctly 1`] = `
 <div
   adminstatus="true"
-  class="flex place-content-center mx-4"
   community="[object Object]"
 >
+  
+  <!-- Main modal -->
+  <!--v-if-->
+  
   <div
-    class="loadingio-spinner-bean-eater-o5tefvffeqm"
+    class="flex place-content-center mx-4"
   >
     <div
-      class="ldio-sweozsnwol"
+      class="loadingio-spinner-bean-eater-o5tefvffeqm"
     >
-      <div>
-        <div />
-        <div />
-        <div />
-      </div>
-      <div>
-        <div />
-        <div />
-        <div />
+      <div
+        class="ldio-sweozsnwol"
+      >
+        <div>
+          <div />
+          <div />
+          <div />
+        </div>
+        <div>
+          <div />
+          <div />
+          <div />
+        </div>
       </div>
     </div>
   </div>

tests/unit/component-tests/community-component-tests/__snapshots__/create-new-group.spec.js.snap

@@ -152,6 +152,7 @@ exports[`CreateNewGroup elements rendering renders correctly 1`] = `
     class="flex justify-center mt-10 float-right"
   >
     <button-stub
+      buttoncolor="blue"
       id="saveButton"
       text="Lagre"
     />

tests/unit/component-tests/community-component-tests/__snapshots__/new-item-form.spec.js.snap

@@ -215,7 +215,7 @@ exports[`NewItemForm component renders correctly 1`] = `
       type="file"
     />
     <button
-      class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+      class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
     >
       Velg bilde
     </button>
@@ -227,7 +227,7 @@ exports[`NewItemForm component renders correctly 1`] = `
     class="float-right"
   >
     <button
-      class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+      class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
       id="saveButton"
     >
       Lagre

tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap

@@ -49,7 +49,7 @@ exports[`LoginForm component renders correctly 1`] = `
           Glemt passord?
         </router-link>
         <button
-          class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light login"
+          class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light login"
         >
           Logg på
         </button>

tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap

@@ -72,7 +72,7 @@ exports[`NewPasswordForm component renders correctly 1`] = `
     id="buttonsField"
   >
     <button
-      class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light float-right"
+      class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light float-right"
     >
       Sett ny passord
     </button>

tests/unit/component-tests/user-component-tests/__snapshots__/register-user-component.spec.js.snap

@@ -86,7 +86,7 @@ exports[`RegisterFormComponent renders correctly 1`] = `
       class="flex justify-end mt-6"
     >
       <button
-        class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+        class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light"
       >
         Opprett
       </button>

tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap

@@ -34,7 +34,7 @@ exports[`ResetPasswordForm component renders correctly 1`] = `
       
     </div>
     <button
-      class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light float-right"
+      class="flex items-center px-2 py-2 font-medium tracking-wide capitalize text-white transition-colors duration-200 transform rounded-md focus:outline-none focus:ring focus:ring-opacity-80 min-w-{20px} bg-primary-medium hover:bg-primary-dark focus:ring-primary-light float-right"
     >
       Tilbakestill passord
     </button>