diff --git a/src/components/CommunityComponents/CommunityHeader.vue b/src/components/CommunityComponents/CommunityHeader.vue index eba31718a765b9adfc08bd6b449dbff4c3de28a1..201d9fb337b3666965d0584ee17ecc91d576d7e7 100644 --- a/src/components/CommunityComponents/CommunityHeader.vue +++ b/src/components/CommunityComponents/CommunityHeader.vue @@ -126,13 +126,15 @@ export default { this.community = await CommunityService.getCommunity( this.$route.params.communityID ); - const members = await CommunityService.getCommunityMembers( - this.$route.params.communityID - ); - for (let i = 0; i < members.length; i++) { - if (members[i].userId == this.userid) { - this.member = true; - return; + if (this.$store.state.user.token !== null) { + const members = await CommunityService.getCommunityMembers( + this.$route.params.communityID + ); + for (let i = 0; i < members.length; i++) { + if (members[i].userId == this.userid) { + this.member = true; + return; + } } } }, diff --git a/src/components/UserAuthComponents/DeleteUserModal.vue b/src/components/UserAuthComponents/DeleteUserModal.vue new file mode 100644 index 0000000000000000000000000000000000000000..fd72ea52de88494162c320db0386e2777ef65ae3 --- /dev/null +++ b/src/components/UserAuthComponents/DeleteUserModal.vue @@ -0,0 +1,59 @@ +<template> + <!-- 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 inset-0 h-full" + > + <div class="relative w-full h-full max-w-2xl p-4 md:h-auto"> + <!-- Modal content --> + <div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> + <!-- Modal header --> + <div + class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600" + > + <h3 class="text-xl font-semibold text-gray-900 dark:text-white"> + Er du helt sikker? + </h3> + <button + @click="close()" + class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" + > + <svg + class="w-5 h-5" + fill="currentColor" + viewBox="0 0 20 20" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill-rule="evenodd" + d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" + clip-rule="evenodd" + ></path> + </svg> + </button> + </div> + <!-- Modal body --> + <div class="p-6 space-y-6"> + <div @click="deleteUser" class="flex justify-center text-xl text-error-dark cursor-pointer">Slett bruker</div> + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + name: "DeleteUserModal", + props: { + visible: Boolean, + }, + methods: { + close() { + this.$emit("close"); + }, + deleteUser(){ + this.$emit("deleteUser"); + }, + }, +}; +</script> diff --git a/src/components/UserProfileComponents/UserProfile.vue b/src/components/UserProfileComponents/UserProfile.vue index 28f59e1adbcef880ad6d96f2a865c7d742e792df..6d401940bc4c7f395afe6b7878ff21d9c8cdadec 100644 --- a/src/components/UserProfileComponents/UserProfile.vue +++ b/src/components/UserProfileComponents/UserProfile.vue @@ -2,6 +2,8 @@ <div class="w-full max-w-xl m-auto md:ring-1 ring-gray-300 overflow-hidden rounded-xl p-4" > + <DeleteUserModal :visible="show" @close="this.show = false" + @deleteUser="deleteUser"/> <div v-show="isCurrentUser" class="float-right px-4 pt-4"> <button id="dropdownDefault" @@ -68,11 +70,11 @@ > </li> <li> - <button - @click="deleteUser" - class="block py-2 px-4 text-sm text-error-dark hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" - >Slett bruker</button - > + <div class="block py-2 px-4 text-sm text-error-dark cursor-pointer" + @click="toggleModal" + > + Slett bruker + </div> </li> </ul> </div> @@ -108,6 +110,7 @@ import RatingComponent from "@/components/UserProfileComponents/RatingComponents import { parseCurrentUser } from "@/utils/token-utils"; import { getUser } from "@/utils/apiutil"; import UserService from "@/services/user.service"; +import DeleteUserModal from "@/components/UserAuthComponents/DeleteUserModal"; export default { name: "LargeProfileCard", @@ -123,10 +126,12 @@ export default { profileImage: { src: require("../../assets/defaultUserProfileImage.jpg"), }, + show: false, }; }, components: { RatingComponent, + DeleteUserModal, }, computed: { getProfilePicture() { @@ -158,14 +163,17 @@ export default { this.renterRating = ratingAsRenter; } }, - async deleteUser(){ - await UserService.deleteUser(); - this.logout(); - }, logout() { this.$store.commit("logout"); this.$router.push("/"); }, + toggleModal() { + this.show = !this.show; + }, + async deleteUser(){ + await UserService.deleteUser(); + this.$store.commit("logout"); + }, }, beforeMount() { this.getUser();