golscontrol-frontend-v1/src/pages/Profile/Partials/DeleteUserForm.vue

<script setup>
import { ref }         from 'vue';
import { useForm } from '@Services/Api';
import { logout } from '@Services/Page';

import ActionSection   from '@Holos/ActionSection.vue';
import DangerButton    from '@Holos/Button/Danger.vue';
import DialogModal     from '@Holos/Modal/Elements/Base.vue';
import SecondaryButton from '@Holos/Button/Secondary.vue';
import Input           from '@Holos/Form/Input.vue';

const modalRef = ref(null);
const passwordInput = ref(null);

const form = useForm({
    password: '',
});

const confirmUserDeletion = () => {
    modalRef.value.open();

    setTimeout(() => passwordInput.value.focus(), 250);
};

const deleteUser = () => {
    form.delete(route('user.destroy'), {
        preserveScroll: true,
        onSuccess: () => {
            modalRef.value.close();
            logout();
        },
        onError: () => passwordInput.value.focus(),
        onFinish: () => form.reset(),
    });
};

const onCloseModal = () => {
    form.reset();
};
</script>

<template>
    <ActionSection>
        <template #title>
            {{ $t('account.delete.title') }}
        </template>

        <template #description>
            {{ $t('account.delete.description') }}
        </template>

        <template #content>
            <div class="max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
                {{ $t('account.delete.onDelete') }}
            </div>

            <div class="mt-5">
                <DangerButton @click="confirmUserDeletion">
                    {{ $t('account.delete.title') }}
                </DangerButton>
            </div>

            <!-- Delete Account Confirmation Modal -->
            <DialogModal
                ref="modalRef"
                @close="onCloseModal"
            >
                <template #title>
                    {{ $t('account.delete.title') }}
                </template>

                <template #content>
                    <div class="px-4 pb-2">
                        <p>{{ $t('account.delete.confirm') }}</p>
    
                        <div class="mt-4">
                            <Input
                                ref="passwordInput"
                                v-model="form.password"
                                id="password"
                                type="password"
                                :onError="form.errors.password"
                            />
                        </div>

                    </div>
                </template>

                <template #footer>
                    <SecondaryButton @click="modalRef.close()">
                        {{ $t('cancel') }}
                    </SecondaryButton>

                    <DangerButton
                        class="ms-3"
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                        @click="deleteUser"
                    >
                        {{ $t('account.delete.title') }}
                    </DangerButton>
                </template>
            </DialogModal>
        </template>
    </ActionSection>
</template>