|
| 1 | +<script setup lang="ts"> |
| 2 | +import { trans } from 'laravel-vue-i18n'; |
| 3 | +import { ref } from 'vue'; |
| 4 | +import { Api } from '../../../types/Api.gen'; |
| 5 | +
|
| 6 | +const props = defineProps<{ |
| 7 | + username: string; |
| 8 | +}>(); |
| 9 | +
|
| 10 | +const api = new Api({ baseUrl: window.location.origin + '/api/v1' }); |
| 11 | +
|
| 12 | +const modal = ref<HTMLDialogElement>(); |
| 13 | +const deleteStep = ref<1 | 2>(1); |
| 14 | +const confirmation = ref(''); |
| 15 | +const loadingDelete = ref(false); |
| 16 | +
|
| 17 | +function open() { |
| 18 | + deleteStep.value = 1; |
| 19 | + confirmation.value = ''; |
| 20 | + modal.value?.showModal(); |
| 21 | +} |
| 22 | +
|
| 23 | +function close() { |
| 24 | + modal.value?.close(); |
| 25 | + confirmation.value = ''; |
| 26 | + deleteStep.value = 1; |
| 27 | +} |
| 28 | +
|
| 29 | +async function deleteAccount() { |
| 30 | + loadingDelete.value = true; |
| 31 | + try { |
| 32 | + const response = await api.settings.deleteUserAccount({ confirmation: confirmation.value }); |
| 33 | + if (response.ok) { |
| 34 | + window.notyf.success(trans('settings.delete-account-completed')); |
| 35 | + window.location.href = '/'; |
| 36 | + } else { |
| 37 | + window.notyf.error(trans('settings.something-wrong')); |
| 38 | + close(); |
| 39 | + } |
| 40 | + } catch { |
| 41 | + window.notyf.error(trans('settings.something-wrong')); |
| 42 | + close(); |
| 43 | + } finally { |
| 44 | + loadingDelete.value = false; |
| 45 | + } |
| 46 | +} |
| 47 | +
|
| 48 | +defineExpose({ open }); |
| 49 | +</script> |
| 50 | + |
| 51 | +<template> |
| 52 | + <dialog |
| 53 | + ref="modal" |
| 54 | + style="z-index: 1100; border: none; border-radius: 0.5rem; padding: 0; max-width: 500px; width: 90%" |
| 55 | + > |
| 56 | + <!-- Step 1: Initial warning --> |
| 57 | + <div v-if="deleteStep === 1" style="padding: 1.5rem"> |
| 58 | + <h5 class="mb-2 fw-bold">{{ trans('settings.delete-account') }}</h5> |
| 59 | + <p class="text-muted small">{{ trans('settings.delete-account.detail') }}</p> |
| 60 | + <div class="d-flex justify-content-end gap-2 mt-3"> |
| 61 | + <button type="button" class="btn btn-secondary" @click="close"> |
| 62 | + {{ trans('menu.abort') }} |
| 63 | + </button> |
| 64 | + <button type="button" class="btn btn-danger" @click="deleteStep = 2"> |
| 65 | + {{ trans('settings.delete-account') }} |
| 66 | + </button> |
| 67 | + </div> |
| 68 | + </div> |
| 69 | + |
| 70 | + <!-- Step 2: Final confirmation with username --> |
| 71 | + <div v-else style="padding: 1.5rem; border: 2px solid #dc3545; border-radius: 0.5rem"> |
| 72 | + <h5 class="mb-2 fw-bold text-danger">{{ trans('settings.delete-account') }}</h5> |
| 73 | + <!-- eslint-disable-next-line vue/no-v-html --> |
| 74 | + <p class="small" v-html="trans('settings.delete-account-verify', { appname: 'Träwelling' })"></p> |
| 75 | + <form @submit.prevent="deleteAccount"> |
| 76 | + <div class="mt-3"> |
| 77 | + <!-- eslint-disable vue/no-v-html --> |
| 78 | + <label |
| 79 | + class="form-label small" |
| 80 | + v-html="trans('messages.account.please-confirm', { delete: props.username })" |
| 81 | + ></label> |
| 82 | + <!-- eslint-enable vue/no-v-html --> |
| 83 | + <input |
| 84 | + v-model="confirmation" |
| 85 | + type="text" |
| 86 | + class="form-control is-invalid" |
| 87 | + :placeholder="props.username ?? ''" |
| 88 | + autocomplete="off" |
| 89 | + required |
| 90 | + /> |
| 91 | + </div> |
| 92 | + <div class="d-flex justify-content-end gap-2 mt-3"> |
| 93 | + <button type="button" class="btn btn-secondary" @click="deleteStep = 1"> |
| 94 | + {{ trans('settings.delete-account-btn-back') }} |
| 95 | + </button> |
| 96 | + <button |
| 97 | + class="btn btn-danger" |
| 98 | + type="submit" |
| 99 | + :disabled="loadingDelete || confirmation !== props.username" |
| 100 | + > |
| 101 | + {{ trans('settings.delete-account-btn-confirm') }} |
| 102 | + </button> |
| 103 | + </div> |
| 104 | + </form> |
| 105 | + </div> |
| 106 | + |
| 107 | + <form method="dialog" style="display: none"> |
| 108 | + <button>close</button> |
| 109 | + </form> |
| 110 | + </dialog> |
| 111 | +</template> |
0 commit comments