Install Breeze

2024-12-14 18:03:09 -05:00
parent cc613a3692
commit 89d0394de9
64 changed files with 7965 additions and 220 deletions
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.jsx
@@ -0,0 +1,120 @@
+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';
+
+export default function DeleteUserForm({ className = '' }) {
+    const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
+    const passwordInput = useRef();
+
+    const {
+        data,
+        setData,
+        delete: destroy,
+        processing,
+        reset,
+        errors,
+        clearErrors,
+    } = useForm({
+        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>
+    );
+}