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-vue-ts/app/javascript/Pages/Profile/Edit.vue CHANGED Viewed

@@ -1,42 +1,46 @@
 <script setup lang="ts">
-import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
-import DeleteUserForm from './Partials/DeleteUserForm.vue';
-import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
-import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
-import { Head } from '@inertiajs/vue3';
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
+import DeleteUserForm from './Partials/DeleteUserForm.vue'
+import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue'
+import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue'
+import { Head } from '@inertiajs/vue3'
 defineProps<{
-    mustVerifyEmail?: boolean;
-    status?: string;
-}>();
+  mustVerifyEmail?: boolean
+  status?: string
+}>()
 </script>
 <template>
-    <Head title="Profile" />
+  <Head title="Profile" />
-    <AuthenticatedLayout>
-        <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Profile</h2>
-        </template>
+  <AuthenticatedLayout>
+    <template #header>
+      <h2
+        class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"
+      >
+        Profile
+      </h2>
+    </template>
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-                    <UpdateProfileInformationForm
-                        :must-verify-email="mustVerifyEmail"
-                        :status="status"
-                        class="max-w-xl"
-                    />
-                </div>
+    <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+          <UpdateProfileInformationForm
+            :must-verify-email="mustVerifyEmail"
+            :status="status"
+            class="max-w-xl"
+          />
+        </div>
-                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-                    <UpdatePasswordForm class="max-w-xl" />
-                </div>
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+          <UpdatePasswordForm class="max-w-xl" />
+        </div>
-                <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
-                    <DeleteUserForm class="max-w-xl" />
-                </div>
-            </div>
+        <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+          <DeleteUserForm class="max-w-xl" />
         </div>
-    </AuthenticatedLayout>
+      </div>
+    </div>
+  </AuthenticatedLayout>
 </template>

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

@@ -1,98 +1,102 @@
 <script setup lang="ts">
-import DangerButton from '@/Components/DangerButton.vue';
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import Modal from '@/Components/Modal.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { useForm } from '@inertiajs/vue3';
-import { nextTick, ref } from 'vue';
-import { profile_destroy_path } from '@/routes';
-const confirmingUserDeletion = ref(false);
-const passwordInput = ref<HTMLInputElement | null>(null);
+import DangerButton from '@/Components/DangerButton.vue'
+import InputError from '@/Components/InputError.vue'
+import InputLabel from '@/Components/InputLabel.vue'
+import Modal from '@/Components/Modal.vue'
+import SecondaryButton from '@/Components/SecondaryButton.vue'
+import TextInput from '@/Components/TextInput.vue'
+import { useForm } from '@inertiajs/vue3'
+import { nextTick, ref } from 'vue'
+import { profile_destroy_path } from '@/routes'
+const confirmingUserDeletion = ref(false)
+const passwordInput = ref<HTMLInputElement | null>(null)
 const form = useForm({
-    password: '',
-});
+  password: '',
+})
 const confirmUserDeletion = () => {
-    confirmingUserDeletion.value = true;
+  confirmingUserDeletion.value = true
-    nextTick(() => passwordInput.value?.focus());
-};
+  nextTick(() => passwordInput.value?.focus())
+}
 const deleteUser = () => {
-    form.delete(profile_destroy_path(), {
-        preserveScroll: true,
-        onSuccess: () => closeModal(),
-        onError: () => passwordInput.value?.focus(),
-        onFinish: () => {
-            form.reset();
-        },
-    });
-};
+  form.delete(profile_destroy_path(), {
+    preserveScroll: true,
+    onSuccess: () => closeModal(),
+    onError: () => passwordInput.value?.focus(),
+    onFinish: () => {
+      form.reset()
+    },
+  })
+}
 const closeModal = () => {
-    confirmingUserDeletion.value = false;
+  confirmingUserDeletion.value = false
-    form.reset();
-};
+  form.reset()
+}
 </script>
 <template>
-    <section class="space-y-6">
-        <header>
-            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Delete Account</h2>
-            <p class="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 @click="confirmUserDeletion">Delete Account</DangerButton>
-        <Modal :show="confirmingUserDeletion" @close="closeModal">
-            <div class="p-6">
-                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-                    Are you sure you want to delete your account?
-                </h2>
-                <p class="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 class="mt-6">
-                    <InputLabel for="password" value="Password" class="sr-only" />
-                    <TextInput
-                        id="password"
-                        ref="passwordInput"
-                        v-model="form.password"
-                        type="password"
-                        class="mt-1 block w-3/4"
-                        placeholder="Password"
-                        @keyup.enter="deleteUser"
-                    />
-                    <InputError :message="form.errors.password" class="mt-2" />
-                </div>
-                <div class="mt-6 flex justify-end">
-                    <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
-                    <DangerButton
-                        class="ms-3"
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
-                        @click="deleteUser"
-                    >
-                        Delete Account
-                    </DangerButton>
-                </div>
-            </div>
-        </Modal>
-    </section>
+  <section class="space-y-6">
+    <header>
+      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        Delete Account
+      </h2>
+      <p class="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 @click="confirmUserDeletion">Delete Account</DangerButton>
+    <Modal :show="confirmingUserDeletion" @close="closeModal">
+      <div class="p-6">
+        <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+          Are you sure you want to delete your account?
+        </h2>
+        <p class="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 class="mt-6">
+          <InputLabel for="password" value="Password" class="sr-only" />
+          <TextInput
+            id="password"
+            ref="passwordInput"
+            v-model="form.password"
+            type="password"
+            class="mt-1 block w-3/4"
+            placeholder="Password"
+            @keyup.enter="deleteUser"
+          />
+          <InputError :message="form.errors.password" class="mt-2" />
+        </div>
+        <div class="mt-6 flex justify-end">
+          <SecondaryButton @click="closeModal"> Cancel </SecondaryButton>
+          <DangerButton
+            class="ms-3"
+            :class="{ 'opacity-25': form.processing }"
+            :disabled="form.processing"
+            @click="deleteUser"
+          >
+            Delete Account
+          </DangerButton>
+        </div>
+      </div>
+    </Modal>
+  </section>
 </template>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdatePasswordForm.vue CHANGED Viewed

@@ -1,108 +1,115 @@
 <script setup lang="ts">
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { useForm } from '@inertiajs/vue3';
-import { ref } from 'vue';
-import { password_update_path } from '@/routes';
+import InputError from '@/Components/InputError.vue'
+import InputLabel from '@/Components/InputLabel.vue'
+import PrimaryButton from '@/Components/PrimaryButton.vue'
+import TextInput from '@/Components/TextInput.vue'
+import { useForm } from '@inertiajs/vue3'
+import { ref } from 'vue'
+import { password_update_path } from '@/routes'
-const passwordInput = ref<HTMLInputElement | null>(null);
-const currentPasswordInput = ref<HTMLInputElement | null>(null);
+const passwordInput = ref<HTMLInputElement | null>(null)
+const currentPasswordInput = ref<HTMLInputElement | null>(null)
 const form = useForm({
-    current_password: '',
-    password: '',
-    password_confirmation: '',
-});
+  current_password: '',
+  password: '',
+  password_confirmation: '',
+})
 const updatePassword = () => {
-    form.put(password_update_path(), {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.reset();
-        },
-        onError: () => {
-            if (form.errors.password) {
-                form.reset('password', 'password_confirmation');
-                passwordInput.value?.focus();
-            }
-            if (form.errors.current_password) {
-                form.reset('current_password');
-                currentPasswordInput.value?.focus();
-            }
-        },
-    });
-};
+  form.put(password_update_path(), {
+    preserveScroll: true,
+    onSuccess: () => {
+      form.reset()
+    },
+    onError: () => {
+      if (form.errors.password) {
+        form.reset('password', 'password_confirmation')
+        passwordInput.value?.focus()
+      }
+      if (form.errors.current_password) {
+        form.reset('current_password')
+        currentPasswordInput.value?.focus()
+      }
+    },
+  })
+}
 </script>
 <template>
-    <section>
-        <header>
-            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Update Password</h2>
-            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                Ensure your account is using a long, random password to stay secure.
-            </p>
-        </header>
-        <form @submit.prevent="updatePassword" class="mt-6 space-y-6">
-            <div>
-                <InputLabel for="current_password" value="Current Password" />
-                <TextInput
-                    id="current_password"
-                    ref="currentPasswordInput"
-                    v-model="form.current_password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    autocomplete="current-password"
-                />
-                <InputError :message="form.errors.current_password" class="mt-2" />
-            </div>
-            <div>
-                <InputLabel for="password" value="New Password" />
-                <TextInput
-                    id="password"
-                    ref="passwordInput"
-                    v-model="form.password"
-                    type="password"
-                    class="mt-1 block w-full"
-                    autocomplete="new-password"
-                />
-                <InputError :message="form.errors.password" class="mt-2" />
-            </div>
-            <div>
-                <InputLabel for="password_confirmation" value="Confirm Password" />
-                <TextInput
-                    id="password_confirmation"
-                    v-model="form.password_confirmation"
-                    type="password"
-                    class="mt-1 block w-full"
-                    autocomplete="new-password"
-                />
-                <InputError :message="form.errors.password_confirmation" class="mt-2" />
-            </div>
-            <div class="flex items-center gap-4">
-                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
-                <Transition
-                    enter-active-class="transition ease-in-out"
-                    enter-from-class="opacity-0"
-                    leave-active-class="transition ease-in-out"
-                    leave-to-class="opacity-0"
-                >
-                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
-                </Transition>
-            </div>
-        </form>
-    </section>
+  <section>
+    <header>
+      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        Update Password
+      </h2>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        Ensure your account is using a long, random password to stay secure.
+      </p>
+    </header>
+    <form @submit.prevent="updatePassword" class="mt-6 space-y-6">
+      <div>
+        <InputLabel for="current_password" value="Current Password" />
+        <TextInput
+          id="current_password"
+          ref="currentPasswordInput"
+          v-model="form.current_password"
+          type="password"
+          class="mt-1 block w-full"
+          autocomplete="current-password"
+        />
+        <InputError :message="form.errors.current_password" class="mt-2" />
+      </div>
+      <div>
+        <InputLabel for="password" value="New Password" />
+        <TextInput
+          id="password"
+          ref="passwordInput"
+          v-model="form.password"
+          type="password"
+          class="mt-1 block w-full"
+          autocomplete="new-password"
+        />
+        <InputError :message="form.errors.password" class="mt-2" />
+      </div>
+      <div>
+        <InputLabel for="password_confirmation" value="Confirm Password" />
+        <TextInput
+          id="password_confirmation"
+          v-model="form.password_confirmation"
+          type="password"
+          class="mt-1 block w-full"
+          autocomplete="new-password"
+        />
+        <InputError :message="form.errors.password_confirmation" class="mt-2" />
+      </div>
+      <div class="flex items-center gap-4">
+        <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+        <Transition
+          enter-active-class="transition ease-in-out"
+          enter-from-class="opacity-0"
+          leave-active-class="transition ease-in-out"
+          leave-to-class="opacity-0"
+        >
+          <p
+            v-if="form.recentlySuccessful"
+            class="text-sm text-gray-600 dark:text-gray-400"
+          >
+            Saved.
+          </p>
+        </Transition>
+      </div>
+    </form>
+  </section>
 </template>

data/stubs/inertia-vue-ts/app/javascript/Pages/Profile/Partials/UpdateProfileInformationForm.vue CHANGED Viewed

@@ -1,78 +1,88 @@
 <script setup lang="ts">
-import InputError from '@/Components/InputError.vue';
-import InputLabel from '@/Components/InputLabel.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
-import TextInput from '@/Components/TextInput.vue';
-import { Link, useForm, usePage } from '@inertiajs/vue3';
-import { profile_update_path } from '@/routes';
+import InputError from '@/Components/InputError.vue'
+import InputLabel from '@/Components/InputLabel.vue'
+import PrimaryButton from '@/Components/PrimaryButton.vue'
+import TextInput from '@/Components/TextInput.vue'
+import { useForm, usePage } from '@inertiajs/vue3'
+import { profile_update_path } from '@/routes'
 defineProps<{
-    mustVerifyEmail?: Boolean;
-    status?: String;
-}>();
+  mustVerifyEmail?: Boolean
+  status?: String
+}>()
-const user = usePage().props.auth.user;
+const user = usePage().props.auth.user
 const form = useForm({
-    name: user.name,
-    email: user.email,
-});
+  name: user.name,
+  email: user.email,
+})
 </script>
 <template>
-    <section>
-        <header>
-            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Profile Information</h2>
+  <section>
+    <header>
+      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+        Profile Information
+      </h2>
-            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-                Update your account's profile information and email address.
-            </p>
-        </header>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        Update your account's profile information and email address.
+      </p>
+    </header>
-        <form @submit.prevent="form.patch(profile_update_path())" class="mt-6 space-y-6">
-            <div>
-                <InputLabel for="name" value="Name" />
+    <form
+      @submit.prevent="form.patch(profile_update_path())"
+      class="mt-6 space-y-6"
+    >
+      <div>
+        <InputLabel for="name" value="Name" />
-                <TextInput
-                    id="name"
-                    type="text"
-                    class="mt-1 block w-full"
-                    v-model="form.name"
-                    required
-                    autofocus
-                    autocomplete="name"
-                />
+        <TextInput
+          id="name"
+          type="text"
+          class="mt-1 block w-full"
+          v-model="form.name"
+          required
+          autofocus
+          autocomplete="name"
+        />
-                <InputError class="mt-2" :message="form.errors.name" />
-            </div>
+        <InputError class="mt-2" :message="form.errors.name" />
+      </div>
-            <div>
-                <InputLabel for="email" value="Email" />
+      <div>
+        <InputLabel for="email" value="Email" />
-                <TextInput
-                    id="email"
-                    type="email"
-                    class="mt-1 block w-full"
-                    v-model="form.email"
-                    required
-                    autocomplete="username"
-                />
+        <TextInput
+          id="email"
+          type="email"
+          class="mt-1 block w-full"
+          v-model="form.email"
+          required
+          autocomplete="username"
+        />
-                <InputError class="mt-2" :message="form.errors.email" />
-            </div>
+        <InputError class="mt-2" :message="form.errors.email" />
+      </div>
-            <div class="flex items-center gap-4">
-                <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
+      <div class="flex items-center gap-4">
+        <PrimaryButton :disabled="form.processing">Save</PrimaryButton>
-                <Transition
-                    enter-active-class="transition ease-in-out"
-                    enter-from-class="opacity-0"
-                    leave-active-class="transition ease-in-out"
-                    leave-to-class="opacity-0"
-                >
-                    <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
-                </Transition>
-            </div>
-        </form>
-    </section>
+        <Transition
+          enter-active-class="transition ease-in-out"
+          enter-from-class="opacity-0"
+          leave-active-class="transition ease-in-out"
+          leave-to-class="opacity-0"
+        >
+          <p
+            v-if="form.recentlySuccessful"
+            class="text-sm text-gray-600 dark:text-gray-400"
+          >
+            Saved.
+          </p>
+        </Transition>
+      </div>
+    </form>
+  </section>
 </template>