diff --git a/src/components/BaseComponents/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
index 842c89e97c17bdc5bf5e35149be61c93449e45ed..fb8c6ca884739d6d6b6a196fadd496944640ef57 100644
--- a/src/components/BaseComponents/ColoredButton.vue
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -1,6 +1,7 @@
<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>
diff --git a/src/components/CommunityComponents/CommunityHamburger.vue b/src/components/CommunityComponents/CommunityHamburger.vue
index d788a57adb429e7aeb3af5cbd9f1c10f35ff6a8d..348e60a278d44a882a535860aa6976314846a5b3 100644
--- a/src/components/CommunityComponents/CommunityHamburger.vue
+++ b/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;
diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue
index 201d9fb337b3666965d0584ee17ecc91d576d7e7..06d915710434da303964f7ebc99b0f042d6306b7 100644
--- a/src/components/CommunityComponents/CommunityHeader.vue
+++ b/src/components/CommunityComponents/CommunityHeader.vue
@@ -1,81 +1,104 @@
<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
diff --git a/src/services/community.service.js b/src/services/community.service.js
index 11bc85817db76d285c028434a7e8df2f64cc5f46..b0540e4381b0452e5ed01bed531c2ab731a0965f 100644
--- a/src/services/community.service.js
+++ b/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();
diff --git a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap b/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
index e7df24bdd8074c7762732e44fcac5daf475f1c7d..30bc58a9142e8e5b02ef7f595d25c6b495848ea0 100644
--- a/tests/unit/component-tests/community-component-tests/__snapshots__/community-header.spec.js.snap
+++ b/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>
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 e3a0811fb62bb0a919a31fa7a987b7bf16e599bf..9888519e7bc965cf1feeadf34dc0c6053e58a2fc 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
@@ -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"
/>
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 0fb93e452e415b69e0155700117307baef0361ef..077fa95d85dac09fe48caeef8f17d9cb68dfc46c 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
@@ -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
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 1576edbeb3f100ee0d5beea86937dfeffa3748fe..f6bd34180d6771f7dd2f7982bdf4989f1e9928db 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
@@ -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>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
index 129085284ce0c40121b0be19e799ac65b7361f12..941fc2aaf4c6fd0b024cde59276a29a4af11813f 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/new-password-form.spec.js.snap
+++ b/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>
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 8adae3ffa2833611c6e3da43443b7e2a381b4e3f..193cbfa3c50d17fb2f50c439c23fe6b0031c3d33 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
@@ -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>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
index 7b7c1ace2fabdd62b5a782799ce6d1f71ba8bfb1..40a038afb49c611841f534b60c65fd7a2ee740ee 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/reset-password-form.spec.js.snap
+++ b/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>