RubyGems - kaze - Versions diffs - 0.5.0 → 0.7.0 - Mend

kaze 0.5.0 → 0.7.0

Files changed (123) hide show

data/stubs/inertia-react-ts/app/javascript/Pages/Profile/Edit.tsx CHANGED Viewed

@@ -1,33 +1,37 @@
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import DeleteUserForm from './Partials/DeleteUserForm';
-import UpdatePasswordForm from './Partials/UpdatePasswordForm';
-import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';
-import { Head } from '@inertiajs/react';
-import { PageProps } from '@/types';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+import DeleteUserForm from './Partials/DeleteUserForm'
+import UpdatePasswordForm from './Partials/UpdatePasswordForm'
+import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm'
+import { Head } from '@inertiajs/react'
+import { PageProps } from '@/types'
 export default function Edit({ auth }: PageProps) {
-    return (
-        <AuthenticatedLayout
-            user={auth.user}
-            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Profile</h2>}
-        >
-            <Head title="Profile" />
+  return (
+    <AuthenticatedLayout
+      user={auth.user}
+      header={
+        <h2 className="font-semibold text-xl text-gray-800 leading-tight">
+          Profile
+        </h2>
+      }
+    >
+      <Head title="Profile" />
-            <div className="py-12">
-                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-                    <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                        <UpdateProfileInformationForm className="max-w-xl" />
-                    </div>
+      <div className="py-12">
+        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+          <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <UpdateProfileInformationForm className="max-w-xl" />
+          </div>
-                    <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                        <UpdatePasswordForm className="max-w-xl" />
-                    </div>
+          <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <UpdatePasswordForm className="max-w-xl" />
+          </div>
-                    <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                        <DeleteUserForm className="max-w-xl" />
-                    </div>
-                </div>
-            </div>
-        </AuthenticatedLayout>
-    );
+          <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
+            <DeleteUserForm className="max-w-xl" />
+          </div>
+        </div>
+      </div>
+    </AuthenticatedLayout>
+  )
 }

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

@@ -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 CHANGED Viewed

@@ -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>
+  )
 }