From 18835ba36b964dbca19fd8191a38d7486ad068cb Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Thu, 5 May 2022 14:59:52 +0200
Subject: [PATCH] Delete user modal added
---
.../UserAuthComponents/DeleteUserModal.vue | 59 +++++++++++++++++++
.../UserProfileComponents/UserProfile.vue | 20 +++++--
src/services/user.service.js | 11 ++++
3 files changed, 85 insertions(+), 5 deletions(-)
create mode 100644 src/components/UserAuthComponents/DeleteUserModal.vue
diff --git a/src/components/UserAuthComponents/DeleteUserModal.vue b/src/components/UserAuthComponents/DeleteUserModal.vue
new file mode 100644
index 0000000..be010e6
--- /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="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 142f3e6..a9f152f 100644
--- a/src/components/UserProfileComponents/UserProfile.vue
+++ b/src/components/UserProfileComponents/UserProfile.vue
@@ -2,6 +2,7 @@
<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"/>
<div v-show="isCurrentUser" class="float-right px-4 pt-4">
<button
id="dropdownDefault"
@@ -68,11 +69,11 @@
>
</li>
<li>
- <router-link
- to=""
- 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</router-link
- >
+ <div class="block py-2 px-4 text-sm text-error-dark cursor-pointer"
+ @click="toggleModal"
+ >
+ Slett bruker
+ </div>
</li>
</ul>
</div>
@@ -108,6 +109,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 +125,12 @@ export default {
profileImage: {
src: require("../../assets/defaultUserProfileImage.jpg"),
},
+ show: false,
};
},
components: {
RatingComponent,
+ DeleteUserModal,
},
computed: {
getProfilePicture() {
@@ -162,6 +166,12 @@ export default {
this.$store.commit("logout");
this.$router.push("/");
},
+ toggleModal() {
+ this.show = !this.show;
+ },
+ deleteUser(){
+ console.log("Deleted")
+ },
},
beforeMount() {
this.getUser();
diff --git a/src/services/user.service.js b/src/services/user.service.js
index 44b6159..6c54e82 100644
--- a/src/services/user.service.js
+++ b/src/services/user.service.js
@@ -100,5 +100,16 @@ class UserService {
})
.catch((err) => console.error(err));
}
+
+ async deleteUser() {
+ return await axios
+ .get(API_URL + "user/delete", {
+ headers: tokenHeader(),
+ })
+ .then((res) => {
+ return res.data;
+ })
+ .catch((err) => console.error(err));
+ }
}
export default new UserService();
--
GitLab