106 lines
3.9 KiB
Vue
106 lines
3.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { Input } from '@/Components/ui/input';
|
|
import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/Components/ui/alert-dialog';
|
|
import InputError from '@/Components/InputError.vue';
|
|
import { Trash2, AlertTriangle } from 'lucide-vue-next';
|
|
|
|
const confirmingUserDeletion = ref(false);
|
|
const passwordInput = ref(null);
|
|
|
|
const form = useForm({
|
|
password: '',
|
|
});
|
|
|
|
const confirmUserDeletion = () => {
|
|
confirmingUserDeletion.value = true;
|
|
|
|
setTimeout(() => passwordInput.value.focus(), 250);
|
|
};
|
|
|
|
const deleteUser = () => {
|
|
form.delete(route('current-user.destroy'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => closeModal(),
|
|
onError: () => passwordInput.value.focus(),
|
|
onFinish: () => form.reset(),
|
|
});
|
|
};
|
|
|
|
const closeModal = () => {
|
|
confirmingUserDeletion.value = false;
|
|
|
|
form.reset();
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Card>
|
|
<CardHeader>
|
|
<div class="flex items-center gap-2">
|
|
<Trash2 class="h-5 w-5 text-destructive" />
|
|
<CardTitle>Delete Account</CardTitle>
|
|
</div>
|
|
<CardDescription>
|
|
Permanently delete your account.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
|
|
<CardContent class="space-y-4">
|
|
<div class="rounded-lg border border-destructive/50 bg-destructive/10 p-4">
|
|
<div class="flex gap-3">
|
|
<AlertTriangle class="h-5 w-5 text-destructive flex-shrink-0 mt-0.5" />
|
|
<p class="text-sm text-foreground">
|
|
Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Button variant="destructive" @click="confirmUserDeletion">
|
|
<Trash2 class="h-4 w-4 mr-2" />
|
|
Delete Account
|
|
</Button>
|
|
</CardContent>
|
|
|
|
<!-- Delete Account Confirmation Dialog -->
|
|
<AlertDialog :open="confirmingUserDeletion" @update:open="closeModal">
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete Account</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
|
|
<div class="py-4">
|
|
<Input
|
|
ref="passwordInput"
|
|
v-model="form.password"
|
|
type="password"
|
|
placeholder="Password"
|
|
autocomplete="current-password"
|
|
@keyup.enter="deleteUser"
|
|
/>
|
|
<InputError :message="form.errors.password" class="mt-2" />
|
|
</div>
|
|
|
|
<AlertDialogFooter>
|
|
<Button variant="outline" @click="closeModal">
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
:disabled="form.processing"
|
|
@click="deleteUser"
|
|
>
|
|
Delete Account
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</Card>
|
|
</template>
|