You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.6 KiB
99 lines
3.6 KiB
import { useRef, useState, FormEventHandler } from 'react';
|
|
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';
|
|
|
|
export default function DeleteUserForm({ className = '' }: { className?: string }) {
|
|
const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
|
|
const passwordInput = useRef<HTMLInputElement>(null);
|
|
|
|
const {
|
|
data,
|
|
setData,
|
|
delete: destroy,
|
|
processing,
|
|
reset,
|
|
errors,
|
|
} = useForm({
|
|
password: '',
|
|
});
|
|
|
|
const confirmUserDeletion = () => {
|
|
setConfirmingUserDeletion(true);
|
|
};
|
|
|
|
const deleteUser: FormEventHandler = (e) => {
|
|
e.preventDefault();
|
|
|
|
destroy(route('profile.destroy'), {
|
|
preserveScroll: true,
|
|
onSuccess: () => closeModal(),
|
|
onError: () => passwordInput.current?.focus(),
|
|
onFinish: () => reset(),
|
|
});
|
|
};
|
|
|
|
const closeModal = () => {
|
|
setConfirmingUserDeletion(false);
|
|
|
|
reset();
|
|
};
|
|
|
|
return (
|
|
<section className={`space-y-6 ${className}`}>
|
|
<header>
|
|
<h2 className="text-lg font-medium text-gray-900">Delete Account</h2>
|
|
|
|
<p className="mt-1 text-sm text-gray-600">
|
|
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">
|
|
Are you sure you want to delete your account?
|
|
</h2>
|
|
|
|
<p className="mt-1 text-sm text-gray-600">
|
|
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>
|
|
);
|
|
}
|