This commit is contained in:
User
2024-12-27 20:43:18 -05:00
parent 89d0394de9
commit da918835c2
84 changed files with 6160 additions and 1068 deletions

View File

@@ -1,14 +1,20 @@
import DangerButton from '@/Components/DangerButton';
import InputError from '@/Components/InputError';
import InputLabel from '@/Components/InputLabel';
import Modal from '@/Components/Modal';
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 [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
const passwordInput = useRef();
const {
@@ -23,98 +29,57 @@ export default function DeleteUserForm({ className = '' }) {
password: '',
});
const confirmUserDeletion = () => {
setConfirmingUserDeletion(true);
};
const deleteUser = (e) => {
e.preventDefault();
destroy(route('profile.destroy'), {
preserveScroll: true,
onSuccess: () => closeModal(),
onError: () => passwordInput.current.focus(),
onFinish: () => reset(),
});
};
const closeModal = () => {
setConfirmingUserDeletion(false);
clearErrors();
reset();
};
return (
<section className={`space-y-6 ${className}`}>
<header>
<h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">
Delete Account
</h2>
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
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>
</header>
<DangerButton onClick={confirmUserDeletion}>
Delete Account
</DangerButton>
<Modal show={confirmingUserDeletion} onClose={closeModal}>
<form onSubmit={deleteUser} className="p-6">
<h2 className="text-lg font-medium text-gray-900 dark:text-gray-100">
Are you sure you want to delete your account?
</h2>
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
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.
</p>
<div className="mt-6">
<InputLabel
htmlFor="password"
value="Password"
className="sr-only"
/>
<TextInput
id="password"
type="password"
name="password"
ref={passwordInput}
value={data.password}
onChange={(e) =>
setData('password', e.target.value)
}
className="mt-1 block w-3/4"
isFocused
placeholder="Password"
/>
<InputError
message={errors.password}
className="mt-2"
/>
</div>
<div className="mt-6 flex justify-end">
<SecondaryButton onClick={closeModal}>
Cancel
</SecondaryButton>
<DangerButton className="ms-3" disabled={processing}>
Delete Account
</DangerButton>
</div>
</form>
</Modal>
</section>
<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>
);
}