137 lines
3.9 KiB
Vue
137 lines
3.9 KiB
Vue
<template>
|
|
<card :title="$t('user.deletion.title')" v-if="userDeletionEnabled">
|
|
<template v-if="deletionScheduledAt !== null">
|
|
<form @submit.prevent="cancelDeletion()">
|
|
<p>
|
|
{{
|
|
$t('user.deletion.scheduled', {
|
|
date: formatDateShort(deletionScheduledAt),
|
|
dateSince: formatDateSince(deletionScheduledAt),
|
|
})
|
|
}}
|
|
</p>
|
|
<p>
|
|
{{ $t('user.deletion.scheduledCancelText') }}
|
|
</p>
|
|
<div class="field">
|
|
<label class="label" for="currentPasswordAccountDelete">
|
|
{{ $t('user.settings.currentPassword') }}
|
|
</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
:class="{'is-danger': errPasswordRequired}"
|
|
id="currentPasswordAccountDelete"
|
|
:placeholder="$t('user.settings.currentPasswordPlaceholder')"
|
|
type="password"
|
|
v-model="password"
|
|
@keyup="() => errPasswordRequired = password === ''"
|
|
ref="passwordInput"
|
|
/>
|
|
</div>
|
|
<p class="help is-danger" v-if="errPasswordRequired">
|
|
{{ $t('user.deletion.passwordRequired') }}
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
<x-button
|
|
:loading="accountDeleteService.loading"
|
|
@click="cancelDeletion()"
|
|
class="is-fullwidth mt-4">
|
|
{{ $t('user.deletion.scheduledCancelConfirm') }}
|
|
</x-button>
|
|
</template>
|
|
<template v-else>
|
|
<form @submit.prevent="deleteAccount()">
|
|
<p>
|
|
{{ $t('user.deletion.text1') }}
|
|
</p>
|
|
<p>
|
|
{{ $t('user.deletion.text2') }}
|
|
</p>
|
|
<div class="field">
|
|
<label class="label" for="currentPasswordAccountDelete">
|
|
{{ $t('user.settings.currentPassword') }}
|
|
</label>
|
|
<div class="control">
|
|
<input
|
|
class="input"
|
|
:class="{'is-danger': errPasswordRequired}"
|
|
id="currentPasswordAccountDelete"
|
|
:placeholder="$t('user.settings.currentPasswordPlaceholder')"
|
|
type="password"
|
|
v-model="password"
|
|
@keyup="() => errPasswordRequired = password === ''"
|
|
ref="passwordInput"
|
|
/>
|
|
</div>
|
|
<p class="help is-danger" v-if="errPasswordRequired">
|
|
{{ $t('user.deletion.passwordRequired') }}
|
|
</p>
|
|
</div>
|
|
</form>
|
|
|
|
<x-button
|
|
:loading="accountDeleteService.loading"
|
|
@click="deleteAccount()"
|
|
class="is-fullwidth mt-4 is-danger">
|
|
{{ $t('user.deletion.confirm') }}
|
|
</x-button>
|
|
</template>
|
|
</card>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default { name: 'user-settings-deletion' }
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import {ref, shallowReactive, computed} from 'vue'
|
|
import {useStore} from 'vuex'
|
|
import {useI18n} from 'vue-i18n'
|
|
|
|
import AccountDeleteService from '@/services/accountDelete'
|
|
import {parseDateOrNull} from '@/helpers/parseDateOrNull'
|
|
import {formatDateShort, formatDateSince} from '@/helpers/time/formatDate'
|
|
import {useTitle} from '@/composables/useTitle'
|
|
import {success} from '@/message'
|
|
|
|
const {t} = useI18n({useScope: 'global'})
|
|
useTitle(() => `${t('user.deletion.title')} - ${t('user.settings.title')}`)
|
|
|
|
const accountDeleteService = shallowReactive(new AccountDeleteService())
|
|
const password = ref('')
|
|
const errPasswordRequired = ref(false)
|
|
|
|
const store = useStore()
|
|
const userDeletionEnabled = computed(() => store.state.config.userDeletionEnabled)
|
|
const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt))
|
|
|
|
const passwordInput = ref()
|
|
async function deleteAccount() {
|
|
if (password.value === '') {
|
|
errPasswordRequired.value = true
|
|
passwordInput.value.focus()
|
|
return
|
|
}
|
|
|
|
await accountDeleteService.request(password.value)
|
|
success({message: t('user.deletion.requestSuccess')})
|
|
password.value = ''
|
|
}
|
|
|
|
async function cancelDeletion() {
|
|
if (password.value === '') {
|
|
errPasswordRequired.value = true
|
|
passwordInput.value.focus()
|
|
return
|
|
}
|
|
|
|
await accountDeleteService.cancel(password.value)
|
|
success({message: t('user.deletion.scheduledCancelSuccess')})
|
|
store.dispatch('auth/refreshUserInfo')
|
|
password.value = ''
|
|
}
|
|
</script>
|