Fixed a merge conflict

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/vue": "^1.0.6",
         "@mdi/font": "5.9.55",
+        "@vue-hero-icons/outline": "^1.7.2",
         "@vuelidate/core": "^2.0.0-alpha.40",
         "@vuelidate/validators": "^2.0.0-alpha.28",
         "axios": "^0.26.1",
@@ -2833,6 +2834,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vue-hero-icons/outline": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+      "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+      "dependencies": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "dev": true,
@@ -4173,6 +4182,11 @@
         "follow-redirects": "^1.14.8"
       }
     },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "node_modules/babel-jest": {
       "version": "27.5.1",
       "dev": true,
@@ -16919,6 +16933,14 @@
       "version": "21.0.0",
       "dev": true
     },
+    "@vue-hero-icons/outline": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@vue-hero-icons/outline/-/outline-1.7.2.tgz",
+      "integrity": "sha512-mgMpncarjZHXY1K2tyjbYHf53yQG9amroDR9t2iH/umpsN8+f8RNcTy1m131EZ8WBCm8MpF97XpXPV129rvtVg==",
+      "requires": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.2.1",
       "dev": true
@@ -17800,6 +17822,11 @@
         "follow-redirects": "^1.14.8"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-jest": {
       "version": "27.5.1",
       "dev": true,

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/vue": "^1.0.6",
     "@mdi/font": "5.9.55",
+    "@vue-hero-icons/outline": "^1.7.2",
     "@vuelidate/core": "^2.0.0-alpha.40",
     "@vuelidate/validators": "^2.0.0-alpha.28",
     "axios": "^0.26.1",

src/components/BaseComponents/ColoredButton.vue

 <template>
   <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"
+    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"
   >
     {{ text }}
   </button>

src/components/BaseComponents/CommunityHeader.vue

@@ -28,9 +28,25 @@
       </div>
     </div>
     <div>
-      <span class="hidden sm:block">
-        <!-- Legg dette til i button: v-if="adminStatus" -->
+      <!-- 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"
@@ -53,21 +69,32 @@
           :community-i-d="community.communityId"
         />
         <!-- class="absolute" -->
-      </span>
+      </div>
     </div>
   </div>
 </template>
 
 <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: {
@@ -82,6 +109,7 @@ export default {
     },
   },
   methods: {
+    //To open and close the hamburger menu
     toggle: function () {
       if (this.hamburgerOpen) {
         this.hamburgerOpen = false;
@@ -89,6 +117,26 @@ export default {
         this.hamburgerOpen = true;
       }
     },
+    joinCommunity: async function (id) {
+      const response = await JoinOpenCommunity(id);
+      if (response === "Login to join any community") {
+        this.dialogOpen = true;
+      } else {
+        window.location.reload();
+      }
+    },
+    getIfUserInCommunity: async function () {
+      try {
+        this.member = await GetIfUserAlreadyInCommunity(
+          this.$router.currentRoute.value.params.communityID
+        );
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+  beforeMount() {
+    this.getIfUserInCommunity();
   },
 };
 </script>

src/components/BaseComponents/CustomFooterModal.vue

@@ -2,7 +2,7 @@
   <!-- Main modal -->
   <div
     v-if="visible"
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
   >
     <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
       <!-- Modal content -->

src/components/BaseComponents/IconButton.vue

 <template>
   <!-- Icon button -->
   <button
-    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    class="block w-fit text-white text-base bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-dark"
   >
     <div class="flex flex-row px-5 py-2.5 h-10">
       <!-- Icon slot: Default content "Ban"-icon -->

src/components/BaseComponents/InputField.vue

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

src/components/BaseComponents/NavBar.vue

 <template>
   <nav
-    class="flex items-center justify-between bg-white h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
+    class="flex items-center bg-white justify-between h-14 border-1 border-b border-gray-300 border-solid sticky top-0 z-50"
   >
     <div class="logo">
       <img
@@ -12,25 +12,22 @@
     </div>
     <ul class="flex">
       <li>
-        <img
+        <PlusIcon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/additem.png"
           alt="Legg til"
           @click="$router.push('/addNewItem')"
         />
       </li>
       <li>
-        <img
+        <ChatAlt2Icon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/messages.png"
           alt="Meldinger"
           @click="$router.push('/messages')"
         />
       </li>
       <li>
-        <img
+        <UserCircleIcon
           class="m-6 cursor-pointer h-7"
-          src="../../assets/profile.png"
           alt="Profil"
           @click="loadProfile"
         />
@@ -41,10 +38,17 @@
 
 <script>
 import { parseUserFromToken } from "@/utils/token-utils";
+import {PlusIcon, ChatAlt2Icon, UserCircleIcon} from "@heroicons/vue/outline";
 
 export default {
   name: "NavBar.vue",
 
+  components:{
+    PlusIcon,
+    ChatAlt2Icon,
+    UserCircleIcon,
+  },
+
   methods: {
     async loadProfile() {
       if (this.$store.state.user.token !== null) {

src/components/BaseComponents/NotificationModal.vue

@@ -2,7 +2,7 @@
   <!-- Main modal -->
   <div
     v-if="visible"
-    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto inset-0 h-full"
   >
     <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
       <!-- Modal content -->

src/components/ChatComponents/ChatMessage.vue

@@ -34,7 +34,9 @@ export default {
   methods: {
     color() {
       console.log(this.userID);
-      return this?.message.from == this.userID ? "bg-gray-300" : "bg-blue-600";
+      return this?.message.from == this.userID
+        ? "bg-gray-300"
+        : "bg-primary-medium";
     },
     textColor() {
       return this?.message.from == this.userID ? "text-gray-900" : "text-white";

src/components/CommunityComponents/CommunityHome.vue

@@ -23,7 +23,7 @@
       <input
         type="text"
         id="searchInput"
-        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
+        class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
         placeholder="Search"
         v-model="search"
       />

src/components/CommunityComponents/CommunityListItem.vue

@@ -6,16 +6,36 @@
     :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
@@ -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,13 @@ 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;