Added popup to allow the user to confirm the deletion of their account

src/components/SettingsPopUp.vue

@@ -1,4 +1,16 @@
 <template>
+  <q-dialog v-bind:model-value="showDeleteAccountPopup">
+    <q-card style="padding: 20px;">
+      <q-card-section>
+        <div class="text-h4">Account löschen</div>
+        <div class="text-body">Bist du sicher, dass du deinen Account löschen möchtest?</div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn label="Abbrechen" class="greyButton" style="width: 48%;" @click="showDeleteAccountPopup = false" />
+        <q-btn label="Account löschen" class="buttonRed" style="width: 48%" @click="" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
   <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" backdrop-filter="brightness(60%)" full-width>
       <q-card style="margin: 3rem 20rem;padding: 30px;height: 80vh;overflow-y:scroll" v-if="userStore.userLoaded">
         <!--<h1>{{ internalShowDialog }}</h1>-->
@@ -40,7 +52,7 @@
             <div style="display: flex;" v-if="userStore.profilePicturesLoaded">
               <div
                 v-for="(image, index) in userStore.profilePictures"
-                :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == userStore.user!.profilePictureUrl ? 'dashed grey' : 'none'}"
+                :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == userStore.user!.profilepicture ? 'dashed grey' : 'none'}"
                 style="color: red;"
                 round
                 flat
@@ -62,7 +74,7 @@
             <h5>Aktionen</h5>
             <q-btn @click="logout()" label="Abmelden" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
             <q-btn @click="logout()" label="Account privatisieren" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;margin-bottom: 14px;"/>
-            <q-btn @click="" label="Account löschen" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;"/>
+            <q-btn @click="deleteAccount()" label="Account löschen" style="color:darkred;border:2px solid darkred;border-radius: 6px;width: 100%;"/>
           </q-card-section>
 
           <q-card-section>
@@ -79,8 +91,9 @@
 
 <script setup lang="ts">
   import { useQuasar } from 'quasar';
-  import {profilePicture, message, ptpTestUser} from 'src/models';
+  import {profilePicture, responseModel,} from 'src/models';
   import { useUserStore } from 'src/stores/user-store';
+import { sendNotification } from 'src/utils';
   import { computed, onMounted, toRefs } from 'vue';
   import { ref } from 'vue';
 
@@ -100,11 +113,16 @@
 
   function selectProfilePicture(image : profilePicture) {
     showUnsavedChangesAlert();
-    userStore.user!.profilePictureUrl = image.url;
+    userStore.user!.profilepicture = image.url;
   }
 
   function saveProfileChanges() {
     showingAlert.value = false;
+    userStore.updateUser().then((response : responseModel) => {
+      sendNotification(response.message, true);
+    });
+    closeDialog();
+    
     // Hier muss ein request ans Backend geschickt werden, welcher den gesamten User enthält
   }
 
@@ -112,6 +130,12 @@
     userStore.logout();
   };
 
+  const showDeleteAccountPopup = ref(false);
+
+  const deleteAccount = () => {
+    showDeleteAccountPopup.value = true;
+  }
+
   const closeDialog = () => {
     //internalShowDialog.value = false;
     emit('showModal', true);
@@ -170,4 +194,18 @@
   .grid-container > div:nth-child(odd) {
     margin-right: 50px;
   }
+
+  .buttonRed {
+    color: white;
+    background: darkred;
+  }
+
+  .buttonRed:hover, .greyButton:hover {
+    filter: brightness(0.7);
+  }
+
+  .greyButton {
+    color: white;
+    background: grey;
+  }
 </style>