86 lines
3.6 KiB
JavaScript
86 lines
3.6 KiB
JavaScript
import DangerButton from '@/components/DangerButton';
|
|
import InputError from '@/components/InputError';
|
|
import SecondaryButton from '@/components/SecondaryButton';
|
|
import TextInput from '@/components/TextInput';
|
|
import { useForm } from '@inertiajs/react';
|
|
import { useRef, useState } from 'react';
|
|
import {
|
|
Dialog, DialogClose,
|
|
DialogContent,
|
|
DialogDescription, DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card.jsx";
|
|
|
|
export default function DeleteUserForm({ className = '' }) {
|
|
const passwordInput = useRef();
|
|
|
|
const {
|
|
data,
|
|
setData,
|
|
delete: destroy,
|
|
processing,
|
|
reset,
|
|
errors,
|
|
clearErrors,
|
|
} = useForm({
|
|
password: '',
|
|
});
|
|
|
|
const deleteUser = (e) => {
|
|
e.preventDefault();
|
|
|
|
destroy(route('profile.destroy'), {
|
|
preserveScroll: true,
|
|
onError: () => passwordInput.current.focus(),
|
|
onFinish: () => reset(),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Delete Account</CardTitle>
|
|
<CardDescription className="pt-3">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.</CardDescription>
|
|
</CardHeader>
|
|
<CardFooter>
|
|
<Dialog>
|
|
<form onSubmit={ deleteUser }>
|
|
<DialogTrigger asChild>
|
|
<DangerButton>Delete Account</DangerButton>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-[800px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Are you sure you want to delete your account?</DialogTitle>
|
|
<DialogDescription className="pt-3">
|
|
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.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="items-center gap-4">
|
|
<TextInput id="password" type="password" name="password" ref={ passwordInput }
|
|
value={ data.password }
|
|
onChange={ (e) => setData('password', e.target.value) }
|
|
className="mt-1 block w-full" isFocused placeholder="Password" />
|
|
<InputError essage={ errors.password } className="mt-2" />
|
|
</div>
|
|
<DialogFooter className="mt-6 flex justify-end">
|
|
<DialogClose asChild>
|
|
<SecondaryButton>Cancel</SecondaryButton>
|
|
</DialogClose>
|
|
<DangerButton className="ms-3" onClick={ (e) => deleteUser(e) }>
|
|
Delete Account
|
|
</DangerButton>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</form>
|
|
</Dialog>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|