initial commit

app/components/profile/modules/delete-account.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <button class="deleteBtn" @click="openModal">
+      {{ $t('profile.delete_account') }}
+    </button>
+  </div>
+
+  <UiModale @close="closeModal" :modalActive="modalActive">
+    <div class="modal-content">
+      <h1>{{ $t('delete.modale.title') }}</h1>
+        <p>{{ $t('delete.modale.text1') }}</p>
+        <!-- <p>{{ $t('emailUpdate.modale.text2') }}</p> -->
+        <div class="modale-btns">
+          <ButtonBase ref=ConfirmBtn @click="confirm" :loading="awaiting">{{ $t('ui.yes') }}</ButtonBase>
+          <ButtonBase class="btn" @click="closeModal">{{ $t('ui.no') }}</ButtonBase>
+      </div>
+    </div>
+  </UiModale>
+
+  <UiModale @close="closeModalInfo" :modalActive="modalInfoActive">
+    <div class="modal-content">
+      <h1>{{ $t('delete.modale2.title') }}</h1>
+      <p>{{ $t('delete.modale2.text1') }}</p>
+      <div class="modale-btns">
+        <ButtonBase ref=btnCloseInfo @click="closeModalInfo">{{ $t('ui.ok') }}</ButtonBase>
+      </div>
+    </div>
+  </UiModale>
+
+</template>
+
+<script setup lang="ts">
+  const {locale} = useI18n() 
+  const authStore = useAuthStore();
+  const modalActive = ref(false);
+  const modalInfoActive = ref(false)
+  const awaiting = ref(false)
+
+  const openModal = () => {
+    modalActive.value = true;
+  }
+  const closeModal = () => {
+    modalActive.value = false;
+  }
+  const confirm = async (locale:string) => {
+    awaiting.value = true;
+    await authStore.deleteRequest(locale)
+    awaiting.value=false
+    modalActive.value = false;
+    modalInfoActive.value = true
+  }
+  const closeModalInfo = () => {
+    modalInfoActive.value = false
+  }
+
+</script>
+
+<style scoped lang="scss">
+.deleteBtn{
+  color:red;
+  font-weight: bold;
+  margin:0;
+  border:none;
+  text-align: left;
+  background-color: none;
+  &:hover{
+    color:rgb(83, 0, 0)
+  }
+}
+button{
+  text-align: center;
+}
+
+</style>