Join an open community functionality added,

src/components/BaseComponents/CommunityHeader.vue

@@ -28,13 +28,33 @@
       </div>
     </div>
     <div>
-      <span class="hidden sm:block"> <!-- Legg dette til i button: v-if="adminStatus" -->
+      <span class="hidden sm:block">
 
-        <svg @click="toggle" xmlns="http://www.w3.org/2000/svg" class="w-9 h-9 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <!-- 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="toggle" 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" />
         </svg>
 
         <CommunityHamburger v-if="hamburgerOpen" class="origin-top-right absolute right-0" :community-i-d="community.communityId"/> <!-- class="absolute" -->
+        </div>
 
       </span>
     </div>
@@ -43,14 +63,22 @@
 
 <script>
 import CommunityHamburger from "@/components/CommunityComponents/CommunityHamburger";
+import ColoredButton from "@/components/BaseComponents/ColoredButton";
+import { JoinOpenCommunity, GetIfUserAlreadyInCommunity } from "@/utils/apiutil";
+import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal";
+
 export default {
   name: "CommunityHeader",
   components: {
     CommunityHamburger,
+    ColoredButton,
+    CustomFooterModal,
   },
   data(){
     return{
       hamburgerOpen: false,
+      dialogOpen: false,
+      member: true,
     }
   },
   props: {
@@ -65,6 +93,7 @@ export default {
     }
   },
   methods: {
+    //To open and close the hamburger menu
     toggle: function (){
       if(this.hamburgerOpen){
         this.hamburgerOpen = false;
@@ -72,7 +101,24 @@ export default {
       else{
         this.hamburgerOpen = true;
       }
+    },
+    joinCommunity: async function(id){
+      const response = await JoinOpenCommunity(id);
+      console.log("response: " + response);
+      if(response === "Login to join any community"){
+        this.dialogOpen = true;
+      }
+      else{
+        window.location.reload();
+      }
+    },
+    getIfUserInCommunity: async function(){
+      this.member = await GetIfUserAlreadyInCommunity(this.$router.currentRoute.value.params.communityID);
+      console.log("in: " + this.member);
     }
   },
+  beforeMount() {
+    this.getIfUserInCommunity();
+  }
 };
 </script>

src/components/CommunityComponents/CommunityHome.vue

@@ -6,6 +6,7 @@
       class="mb-5"
     />
 
+
     <!-- Search field -->
     <div class="relative" id="searchComponent">
       <span class="absolute inset-y-0 left-0 flex items-center pl-3">

src/components/CommunityComponents/CommunityListItem.vue

@@ -6,17 +6,37 @@
     :message="community.description"
   >
     <div class="flex justify-center p-2">
+      <!-- If a user is not a member in the community, this button will show -->
       <ColoredButton
         v-if="!member"
         :text="'Bli med'"
         @click="goToJoin(community.communityId)"
+        class="m-2"
       />
+
+      <!-- If a user is member this button will show -->
       <ColoredButton
         v-if="member"
         :text="'Gå til'"
         @click="goToGroup(community.communityId)"
+        class="m-2"
+      />
+
+      <!-- If a user isn't member but the community is open, the user is able to get in to see listings(items) -->
+      <ColoredButton
+          v-if="!member && community.visibility===1"
+          :text="'Gå til'"
+          @click="goToGroup(community.communityId)"
+          class="m-2"
       />
     </div>
+
+    <!-- If a user is not logges in and tries to join a community, this message shows -->
+    <div class="flex justify-center p-2">
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        {{ responseToUser }}
+      </p>
+    </div>
   </CustomFooterModal>
   <div
     @click="toggleDialog()"
@@ -44,6 +64,7 @@
 import CustomFooterModal from "@/components/BaseComponents/CustomFooterModal.vue";
 import ColoredButton from "@/components/BaseComponents/ColoredButton.vue";
 import { UserGroupIcon, LockClosedIcon } from "@heroicons/vue/outline";
+import { JoinOpenCommunity } from "@/utils/apiutil";
 
 export default {
   name: "CommunityListItem",
@@ -56,6 +77,7 @@ export default {
   data() {
     return {
       dialogOpen: false,
+      responseToUser: '',
     };
   },
   props: {
@@ -66,8 +88,14 @@ export default {
     goToGroup(id) {
       this.$router.push("/community/" + id);
     },
-    goToJoin(id) {
-      this.$router.push("/community/" + id + "/join");
+    async goToJoin(id) {
+      const response = await JoinOpenCommunity(id);
+      if(response === "Login to join any community"){
+        this.responseToUser = "Logg inn først for å bli med i en gruppe";
+      }
+      else{
+        this.$router.push("/community/" + id);
+      }
     },
     toggleDialog() {
       this.dialogOpen = !this.dialogOpen;

src/utils/apiutil.js

@@ -186,3 +186,45 @@ export async function GetMembersOfCommunity(communityID) {
             console.error(error);
         });
 }
+
+export function JoinOpenCommunity(communityId) {
+
+    if(tokenHeader().Authorization == "Bearer " + null){
+        console.log("ikke logget på!");
+        return "Login to join any community";
+    }
+
+    return axios
+        .post(API_URL + "communities/" + communityId + "/join", communityId, {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            return response;
+        })
+        .catch((error) => {
+            console.log(error.response);
+            return error;
+        });
+}
+
+export async function GetIfUserAlreadyInCommunity(communityID) {
+    console.log("token: " + tokenHeader().Authorization);
+
+    if(tokenHeader().Authorization == "Bearer " + null){
+        console.log("ikke logget på!");
+        return false;
+    }
+
+    return axios
+        .get(API_URL + "communities/" + communityID + "/user/status", {
+            headers: tokenHeader(),
+        })
+        .then((response) => {
+            console.log("res: " + response.data);
+            return response.data;
+        })
+        .catch((error) => {
+            console.error("err: " + error);
+            return error;
+        });
+}