74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<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> |