Merge branch 'delete-user-logic' into 'master'

Fixed method to delete-user and created pop up to for the user to confirm.

See merge request !64

src/components/popups/DeleteUserPopUp.vue

+<script setup lang="ts">
+
+import { useTokenStore } from '@/stores/token'
+import { deleteUser } from '@/utils/profileutils'
+
+const token:string = useTokenStore().jwtToken;
+const emit = defineEmits(['closeDeletePopUp', 'challengeDeleted']);
+
+const cancelCompleteThisChallenge = () => {
+  emit('closeDeletePopUp');
+}
+
+const deleteThisUser = async () => {
+  try{
+    await deleteUser(token);
+    useTokenStore().logout();
+  }catch (error){
+    console.log(error)
+  }
+}
+
+</script>
+
+<template>
+  <div class="popup-content">
+    <!-- Pop-up content goes here -->
+    <h2>Er du sikker på at du vil slette brukeren?</h2>
+
+    <div class="content">
+      <img class="sad-pig-img" src="/src/assets/png/sad-pig.png" alt="sad-pig" >
+      <h3> Husk! Dagens små sparinger kan føre til morgendagens store drømmer.</h3>
+    </div>
+
+    <div class="option-buttons">
+      <button class="option-button" id="cancel-button" @click="cancelCompleteThisChallenge()">
+        <h2 class="option-button-title">Avbryt</h2>
+      </button>
+      <button class="option-button" id="delete-button" @click="deleteThisUser()">
+        <h2 class="option-button-title">Slett</h2>
+      </button>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.popup-content {
+  display: flex;
+  flex-direction: column;
+
+  width: 50%;
+  height: 50%;
+  background-color: var(--color-background);
+
+  padding: 20px;
+  border-radius: 10px;
+  border: 2px solid var(--color-border);
+
+  place-content: space-between;
+
+}
+
+.content{
+  display: flex;
+  flex-direction: row;
+  place-items: center;
+}
+
+.sad-pig-img{
+  width:30%;
+}
+
+
+.option-buttons{
+  display: flex;
+  flex-direction: row;
+
+  width: 100%;
+  place-content: space-between;
+}
+
+.option-button{
+  border: none;
+  border-radius: 20px;
+  width: 35%;
+
+}
+
+.option-button-title{
+  color: var(--color-headerText);
+  font-weight: bold;
+}
+
+#cancel-button{
+  background-color: var(--color-cancel-button);
+}
+#cancel-button:active{
+  background-color: var(--color-cancel-button-click);
+}
+
+#delete-button{
+  background-color: var(--color-confirm-button);
+}
+#delete-button:active{
+  background-color: var(--color-confirm-button-click);
+}
+
+#delete-button:hover, #cancel-button:hover{
+  transform: scale(1.02);
+}
+
+@media only screen and (max-width: 1000px){
+  .popup-content {
+    width: 90%;
+    height: 60%;
+  }
+}
+
+</style>
\ No newline at end of file

src/views/HomePage/ProfileView.vue

@@ -8,12 +8,16 @@ import BadgeInfo from '@/components/profile/BadgeInfo.vue'
 import PasswordInfo from '@/components/profile/PasswordInfo.vue'
 import { deleteUser, getUserInfo } from '@/utils/profileutils'
 import { useTokenStore } from '@/stores/token'
+import DeleteChallengePopUp from '@/components/popups/DeleteChallengePopUp.vue'
+import DeleteUserPopUp from '@/components/popups/DeleteUserPopUp.vue'
 
 const token:string = useTokenStore().jwtToken;
 
 const firstName = ref<string>('Profile');
 const lastName = ref<string>('');
 
+const displayDeletePopUp = ref<boolean>(false)
+
 onMounted(async () => {
   try {
     await fetchUserInfo();
@@ -37,19 +41,21 @@ const logout = () => {
   useTokenStore().logout();
 }
 
-const deleteUserAccount = async () => {
-  try{
-    const response = await deleteUser(token);
-    console.log(response);
-    useTokenStore().logout();
-  } catch (error){
-    console.error('Error deleting user:', error);
-  }
+const handleRequestToDeleteUser = async () => {
+  displayDeletePopUp.value = true;
+}
+const closeDeletePopUp = async () => {
+  displayDeletePopUp.value = false;
 }
 
 </script>
 
 <template>
+  <div v-if="displayDeletePopUp" class="popup-container">
+    <DeleteUserPopUp
+      @closeDeletePopUp="closeDeletePopUp"
+    ></DeleteUserPopUp>
+  </div>
   <div class="profile-view">
     <div class="header">
       <h2 class="view-title">{{firstName}} {{lastName}}</h2>
@@ -78,7 +84,7 @@ const deleteUserAccount = async () => {
         <BadgeInfo title="Mynter"></BadgeInfo>
       </div>
       <div class="delete-user-button-box">
-        <button class="user-button" id="delete-user-button" @click="deleteUserAccount">
+        <button class="user-button" id="delete-user-button" @click="handleRequestToDeleteUser">
           <h3 class="user-button-title">Slett bruker</h3>
         </button>
       </div>
@@ -87,6 +93,20 @@ const deleteUserAccount = async () => {
 </template>
 
 <style scoped>
+.popup-container {
+  position: fixed; /* Change to fixed to cover the entire viewport */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: rgba(64, 64, 64, 0.5);
+
+  align-items: center;
+  z-index: 1000; /* Adjust z-index as needed */
+}
+
 
 .profile-view{
   display: flex;