DeleteUserForm.tsx in kaze-0.6.0

- old
+ new
@@ -1,100 +1,110 @@
-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';
-import { profile_destroy_path } from '@/routes';
+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'
+import { profile_destroy_path } from '@/routes'
 
-export default function DeleteUserForm({ className = '' }: { className?: string }) {
-    const [confirmingUserDeletion, setConfirmingUserDeletion] = useState(false);
-    const passwordInput = useRef<HTMLInputElement>(null);
+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 {
+    data,
+    setData,
+    delete: destroy,
+    processing,
+    reset,
+    errors,
+  } = useForm({
+    password: '',
+  })
 
-    const confirmUserDeletion = () => {
-        setConfirmingUserDeletion(true);
-    };
+  const confirmUserDeletion = () => {
+    setConfirmingUserDeletion(true)
+  }
 
-    const deleteUser: FormEventHandler = (e) => {
-        e.preventDefault();
+  const deleteUser: FormEventHandler = (e) => {
+    e.preventDefault()
 
-        destroy(profile_destroy_path(), {
-            preserveScroll: true,
-            onSuccess: () => closeModal(),
-            onError: () => passwordInput.current?.focus(),
-            onFinish: () => reset(),
-        });
-    };
+    destroy(profile_destroy_path(), {
+      preserveScroll: true,
+      onSuccess: () => closeModal(),
+      onError: () => passwordInput.current?.focus(),
+      onFinish: () => reset(),
+    })
+  }
 
-    const closeModal = () => {
-        setConfirmingUserDeletion(false);
+  const closeModal = () => {
+    setConfirmingUserDeletion(false)
 
-        reset();
-    };
+    reset()
+  }
 
-    return (
-        <section className={`space-y-6 ${className}`}>
-            <header>
-                <h2 className="text-lg font-medium text-gray-900">Delete Account</h2>
+  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>
+        <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>
+      <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>
+      <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>
+          <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" />
+          <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"
-                        />
+            <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>
+            <InputError message={errors.password} className="mt-2" />
+          </div>
 
-                    <div className="mt-6 flex justify-end">
-                        <SecondaryButton onClick={closeModal}>Cancel</SecondaryButton>
+          <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>
-    );
+            <DangerButton className="ms-3" disabled={processing}>
+              Delete Account
+            </DangerButton>
+          </div>
+        </form>
+      </Modal>
+    </section>
+  )
 }