delete-user.tsx

import { useForm } from '@inertiajs/react';
import { FormEventHandler, useCallback, useRef, useState } from 'react';

import InputError from '@/components/input-error';
import { ResponsiveModal } from '@/components/responsive-modal';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

import HeadingSmall from '@/components/heading-small';

import { DialogDescription, DialogFooter, DialogTitle } from '@/components/ui/dialog';

export default function DeleteUser() {
    const passwordInput = useRef<HTMLInputElement>(null);
    const { data, setData, delete: destroy, processing, reset, errors, clearErrors } = useForm({ password: '' });
    const [isOpen, setIsOpen] = useState<boolean>(false);

    const handleModalClose = useCallback(() => {
        setIsOpen(false);
        clearErrors();
        reset();
    }, [clearErrors, reset]);

    const handleOpenChange = useCallback(
        (open: boolean) => {
            if (!open) handleModalClose();
            else setIsOpen(true);
        },
        [handleModalClose],
    );

    const deleteUser: FormEventHandler = (e) => {
        e.preventDefault();

        destroy(route('profile.destroy'), {
            preserveScroll: true,
            onSuccess: () => handleModalClose(),
            onError: () => passwordInput.current?.focus(),
            onFinish: () => reset(),
        });
    };
    return (
        <div className="space-y-6">
            <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
            <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
                <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
                    <p className="font-medium">Warning</p>
                    <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
                </div>

                <Button variant="destructive" onClick={() => setIsOpen(true)}>
                    Delete account
                </Button>

                <ResponsiveModal open={isOpen} onOpenChange={handleOpenChange}>
                    <div className="p-4 sm:p-6">
                        <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
                        <DialogDescription className="mt-2 mb-4">
                            Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password
                            to confirm you would like to permanently delete your account.
                        </DialogDescription>
                        <form className="space-y-6" onSubmit={deleteUser}>
                            <div className="grid gap-2">
                                <Label htmlFor="password" className="sr-only">
                                    Password
                                </Label>

                                <Input
                                    id="password"
                                    type="password"
                                    name="password"
                                    ref={passwordInput}
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    placeholder="Password"
                                    autoComplete="current-password"
                                />

                                <InputError message={errors.password} />
                            </div>

                            <DialogFooter className="gap-2">
                                <Button variant="secondary" onClick={handleModalClose}>
                                    Cancel
                                </Button>

                                <Button variant="destructive" disabled={processing} type="submit">
                                    Delete account
                                </Button>
                            </DialogFooter>
                        </form>
                    </div>
                </ResponsiveModal>
            </div>
        </div>
    );
}