kaze 0.4.0 → 0.6.0

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/DeleteUserForm.tsx

@@ -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';
-
-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(profile_destroy_path(), {
-            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>
-    );
+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)
+
+  const {
+    data,
+    setData,
+    delete: destroy,
+    processing,
+    reset,
+    errors,
+  } = useForm({
+    password: '',
+  })
+
+  const confirmUserDeletion = () => {
+    setConfirmingUserDeletion(true)
+  }
+
+  const deleteUser: FormEventHandler = (e) => {
+    e.preventDefault()
+
+    destroy(profile_destroy_path(), {
+      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>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdatePasswordForm.tsx

@@ -1,114 +1,122 @@
-import { useRef, FormEventHandler } from 'react';
-import InputError from '@/Components/InputError';
-import InputLabel from '@/Components/InputLabel';
-import PrimaryButton from '@/Components/PrimaryButton';
-import TextInput from '@/Components/TextInput';
-import { useForm } from '@inertiajs/react';
-import { Transition } from '@headlessui/react';
-import { password_update_path } from '@/routes';
-
-export default function UpdatePasswordForm({ className = '' }: { className?: string }) {
-    const passwordInput = useRef<HTMLInputElement>(null);
-    const currentPasswordInput = useRef<HTMLInputElement>(null);
-
-    const { data, setData, errors, put, reset, processing, recentlySuccessful } = useForm({
-        current_password: '',
-        password: '',
-        password_confirmation: '',
-    });
-
-    const updatePassword: FormEventHandler = (e) => {
-        e.preventDefault();
-
-        put(password_update_path(), {
-            preserveScroll: true,
-            onSuccess: () => reset(),
-            onError: (errors) => {
-                if (errors.password) {
-                    reset('password', 'password_confirmation');
-                    passwordInput.current?.focus();
-                }
-
-                if (errors.current_password) {
-                    reset('current_password');
-                    currentPasswordInput.current?.focus();
-                }
-            },
-        });
-    };
-
-    return (
-        <section className={className}>
-            <header>
-                <h2 className="text-lg font-medium text-gray-900">Update Password</h2>
-
-                <p className="mt-1 text-sm text-gray-600">
-                    Ensure your account is using a long, random password to stay secure.
-                </p>
-            </header>
-
-            <form onSubmit={updatePassword} className="mt-6 space-y-6">
-                <div>
-                    <InputLabel htmlFor="current_password" value="Current Password" />
-
-                    <TextInput
-                        id="current_password"
-                        ref={currentPasswordInput}
-                        value={data.current_password}
-                        onChange={(e) => setData('current_password', e.target.value)}
-                        type="password"
-                        className="mt-1 block w-full"
-                        autoComplete="current-password"
-                    />
-
-                    <InputError message={errors.current_password} className="mt-2" />
-                </div>
-
-                <div>
-                    <InputLabel htmlFor="password" value="New Password" />
-
-                    <TextInput
-                        id="password"
-                        ref={passwordInput}
-                        value={data.password}
-                        onChange={(e) => setData('password', e.target.value)}
-                        type="password"
-                        className="mt-1 block w-full"
-                        autoComplete="new-password"
-                    />
-
-                    <InputError message={errors.password} className="mt-2" />
-                </div>
-
-                <div>
-                    <InputLabel htmlFor="password_confirmation" value="Confirm Password" />
-
-                    <TextInput
-                        id="password_confirmation"
-                        value={data.password_confirmation}
-                        onChange={(e) => setData('password_confirmation', e.target.value)}
-                        type="password"
-                        className="mt-1 block w-full"
-                        autoComplete="new-password"
-                    />
-
-                    <InputError message={errors.password_confirmation} className="mt-2" />
-                </div>
-
-                <div className="flex items-center gap-4">
-                    <PrimaryButton disabled={processing}>Save</PrimaryButton>
-
-                    <Transition
-                        show={recentlySuccessful}
-                        enter="transition ease-in-out"
-                        enterFrom="opacity-0"
-                        leave="transition ease-in-out"
-                        leaveTo="opacity-0"
-                    >
-                        <p className="text-sm text-gray-600">Saved.</p>
-                    </Transition>
-                </div>
-            </form>
-        </section>
-    );
+import { useRef, FormEventHandler } from 'react'
+import InputError from '@/Components/InputError'
+import InputLabel from '@/Components/InputLabel'
+import PrimaryButton from '@/Components/PrimaryButton'
+import TextInput from '@/Components/TextInput'
+import { useForm } from '@inertiajs/react'
+import { Transition } from '@headlessui/react'
+import { password_update_path } from '@/routes'
+
+export default function UpdatePasswordForm({
+  className = '',
+}: {
+  className?: string
+}) {
+  const passwordInput = useRef<HTMLInputElement>(null)
+  const currentPasswordInput = useRef<HTMLInputElement>(null)
+
+  const { data, setData, errors, put, reset, processing, recentlySuccessful } =
+    useForm({
+      current_password: '',
+      password: '',
+      password_confirmation: '',
+    })
+
+  const updatePassword: FormEventHandler = (e) => {
+    e.preventDefault()
+
+    put(password_update_path(), {
+      preserveScroll: true,
+      onSuccess: () => reset(),
+      onError: (errors) => {
+        if (errors.password) {
+          reset('password', 'password_confirmation')
+          passwordInput.current?.focus()
+        }
+
+        if (errors.current_password) {
+          reset('current_password')
+          currentPasswordInput.current?.focus()
+        }
+      },
+    })
+  }
+
+  return (
+    <section className={className}>
+      <header>
+        <h2 className="text-lg font-medium text-gray-900">Update Password</h2>
+
+        <p className="mt-1 text-sm text-gray-600">
+          Ensure your account is using a long, random password to stay secure.
+        </p>
+      </header>
+
+      <form onSubmit={updatePassword} className="mt-6 space-y-6">
+        <div>
+          <InputLabel htmlFor="current_password" value="Current Password" />
+
+          <TextInput
+            id="current_password"
+            ref={currentPasswordInput}
+            value={data.current_password}
+            onChange={(e) => setData('current_password', e.target.value)}
+            type="password"
+            className="mt-1 block w-full"
+            autoComplete="current-password"
+          />
+
+          <InputError message={errors.current_password} className="mt-2" />
+        </div>
+
+        <div>
+          <InputLabel htmlFor="password" value="New Password" />
+
+          <TextInput
+            id="password"
+            ref={passwordInput}
+            value={data.password}
+            onChange={(e) => setData('password', e.target.value)}
+            type="password"
+            className="mt-1 block w-full"
+            autoComplete="new-password"
+          />
+
+          <InputError message={errors.password} className="mt-2" />
+        </div>
+
+        <div>
+          <InputLabel
+            htmlFor="password_confirmation"
+            value="Confirm Password"
+          />
+
+          <TextInput
+            id="password_confirmation"
+            value={data.password_confirmation}
+            onChange={(e) => setData('password_confirmation', e.target.value)}
+            type="password"
+            className="mt-1 block w-full"
+            autoComplete="new-password"
+          />
+
+          <InputError message={errors.password_confirmation} className="mt-2" />
+        </div>
+
+        <div className="flex items-center gap-4">
+          <PrimaryButton disabled={processing}>Save</PrimaryButton>
+
+          <Transition
+            show={recentlySuccessful}
+            enter="transition ease-in-out"
+            enterFrom="opacity-0"
+            leave="transition ease-in-out"
+            leaveTo="opacity-0"
+          >
+            <p className="text-sm text-gray-600">Saved.</p>
+          </Transition>
+        </div>
+      </form>
+    </section>
+  )
 }

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.tsx

@@ -1,84 +1,91 @@
-import InputError from '@/Components/InputError';
-import InputLabel from '@/Components/InputLabel';
-import PrimaryButton from '@/Components/PrimaryButton';
-import TextInput from '@/Components/TextInput';
-import { useForm, usePage } from '@inertiajs/react';
-import { Transition } from '@headlessui/react';
-import { FormEventHandler } from 'react';
-import { PageProps } from '@/types';
-import { profile_update_path } from '@/routes';
+import InputError from '@/Components/InputError'
+import InputLabel from '@/Components/InputLabel'
+import PrimaryButton from '@/Components/PrimaryButton'
+import TextInput from '@/Components/TextInput'
+import { useForm, usePage } from '@inertiajs/react'
+import { Transition } from '@headlessui/react'
+import { FormEventHandler } from 'react'
+import { PageProps } from '@/types'
+import { profile_update_path } from '@/routes'
 
-export default function UpdateProfileInformation({ className = '' }: { className?: string }) {
-    const user = usePage<PageProps>().props.auth.user;
+export default function UpdateProfileInformation({
+  className = '',
+}: {
+  className?: string
+}) {
+  const user = usePage<PageProps>().props.auth.user
 
-    const { data, setData, patch, errors, processing, recentlySuccessful } = useForm({
-        name: user.name,
-        email: user.email,
-    });
+  const { data, setData, patch, errors, processing, recentlySuccessful } =
+    useForm({
+      name: user.name,
+      email: user.email,
+    })
 
-    const submit: FormEventHandler = (e) => {
-        e.preventDefault();
+  const submit: FormEventHandler = (e) => {
+    e.preventDefault()
 
-        patch(profile_update_path());
-    };
+    patch(profile_update_path())
+  }
 
-    return (
-        <section className={className}>
-            <header>
-                <h2 className="text-lg font-medium text-gray-900">Profile Information</h2>
+  return (
+    <section className={className}>
+      <header>
+        <h2 className="text-lg font-medium text-gray-900">
+          Profile Information
+        </h2>
 
-                <p className="mt-1 text-sm text-gray-600">
-                    Update your account's profile information and email address.
-                </p>
-            </header>
+        <p className="mt-1 text-sm text-gray-600">
+          Update your account's profile information and email address.
+        </p>
+      </header>
 
-            <form onSubmit={submit} className="mt-6 space-y-6">
-                <div>
-                    <InputLabel htmlFor="name" value="Name" />
+      <form onSubmit={submit} className="mt-6 space-y-6">
+        <div>
+          <InputLabel htmlFor="name" value="Name" />
 
-                    <TextInput
-                        id="name"
-                        className="mt-1 block w-full"
-                        value={data.name}
-                        onChange={(e) => setData('name', e.target.value)}
-                        required
-                        isFocused
-                        autoComplete="name"
-                    />
+          <TextInput
+            id="name"
+            className="mt-1 block w-full"
+            value={data.name}
+            onChange={(e) => setData('name', e.target.value)}
+            required
+            isFocused
+            autoComplete="name"
+          />
 
-                    <InputError className="mt-2" message={errors.name} />
-                </div>
+          <InputError className="mt-2" message={errors.name} />
+        </div>
 
-                <div>
-                    <InputLabel htmlFor="email" value="Email" />
+        <div>
+          <InputLabel htmlFor="email" value="Email" />
 
-                    <TextInput
-                        id="email"
-                        type="email"
-                        className="mt-1 block w-full"
-                        value={data.email}
-                        onChange={(e) => setData('email', e.target.value)}
-                        required
-                        autoComplete="username"
-                    />
+          <TextInput
+            id="email"
+            type="email"
+            className="mt-1 block w-full"
+            value={data.email}
+            onChange={(e) => setData('email', e.target.value)}
+            required
+            autoComplete="username"
+          />
 
-                    <InputError className="mt-2" message={errors.email} />
-                </div>
+          <InputError className="mt-2" message={errors.email} />
+        </div>
 
-                <div className="flex items-center gap-4">
-                    <PrimaryButton disabled={processing}>Save</PrimaryButton>
+        <div className="flex items-center gap-4">
+          <PrimaryButton disabled={processing}>Save</PrimaryButton>
 
-                    <Transition
-                        show={recentlySuccessful}
-                        enter="transition ease-in-out"
-                        enterFrom="opacity-0"
-                        leave="transition ease-in-out"
-                        leaveTo="opacity-0"
-                    >
-                        <p className="text-sm text-gray-600">Saved.</p>
-                    </Transition>
-                </div>
-            </form>
-        </section>
-    );
+          <Transition
+            show={recentlySuccessful}
+            enter="transition ease-in-out"
+            enterFrom="opacity-0"
+            leave="transition ease-in-out"
+            leaveTo="opacity-0"
+          >
+            <p className="text-sm text-gray-600">Saved.</p>
+          </Transition>
+        </div>
+      </form>
+    </section>
+  )
 }