Migrate to Form component

Author: skryukov

Gemfile.lock

@@ -225,7 +225,7 @@ GEM
       date
       stringio
     public_suffix (6.0.2)
-    puma (7.0.1)
+    puma (7.0.2)
       nio4r (~> 2.0)
     raabro (1.4.0)
     racc (1.8.1)
@@ -348,7 +348,7 @@ GEM
       fugit (~> 1.11.0)
       railties (>= 7.1)
       thor (>= 1.3.1)
-    sorbet-runtime (0.6.12495)
+    sorbet-runtime (0.6.12507)
     sqlite3 (2.7.3-aarch64-linux-gnu)
     sqlite3 (2.7.3-aarch64-linux-musl)
     sqlite3 (2.7.3-arm-linux-gnu)
@@ -372,9 +372,9 @@ GEM
     timeout (0.4.3)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (3.1.5)
-      unicode-emoji (~> 4.0, >= 4.0.4)
-    unicode-emoji (4.0.4)
+    unicode-display_width (3.2.0)
+      unicode-emoji (~> 4.1)
+    unicode-emoji (4.1.0)
     uri (1.0.3)
     useragent (0.16.11)
     vite_rails (3.0.19)

app/frontend/components/DeleteUser.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useForm } from "@inertiajs/vue3"
+import { Form } from "@inertiajs/vue3"
 import { ref } from "vue"
 
 import HeadingSmall from "@/components/HeadingSmall.vue"
@@ -20,26 +20,6 @@ import { Label } from "@/components/ui/label"
 import { usersPath } from "@/routes"
 
 const passwordInput = ref<HTMLInputElement | null>(null)
-
-const form = useForm({
-  password_challenge: "",
-})
-
-const deleteUser = (e: Event) => {
-  e.preventDefault()
-
-  form.delete(usersPath(), {
-    preserveScroll: true,
-    onSuccess: () => closeModal(),
-    onError: () => passwordInput.value?.focus(),
-    onFinish: () => form.reset(),
-  })
-}
-
-const closeModal = () => {
-  form.clearErrors()
-  form.reset()
-}
 </script>
 
 <template>
@@ -62,7 +42,15 @@ const closeModal = () => {
           <Button variant="destructive">Delete account</Button>
         </DialogTrigger>
         <DialogContent>
-          <form class="space-y-6" @submit="deleteUser">
+          <Form
+            method="delete"
+            :action="usersPath()"
+            :options="{ preserveScroll: true }"
+            :onError="() => passwordInput?.focus()"
+            resetOnSuccess
+            className="space-y-6"
+            #default="{ resetAndClearErrors, processing, errors }"
+          >
             <DialogHeader class="space-y-3">
               <DialogTitle
                 >Are you sure you want to delete your account?</DialogTitle
@@ -81,28 +69,27 @@ const closeModal = () => {
                 type="password"
                 name="password_challenge"
                 ref="passwordInput"
-                v-model="form.password_challenge"
                 placeholder="Password"
               />
-              <InputError :message="form.errors.password_challenge" />
+              <InputError :message="errors.password_challenge" />
             </div>
 
             <DialogFooter class="gap-2">
               <DialogClose as-child>
-                <Button variant="secondary" @click="closeModal">
+                <Button variant="secondary" @click="resetAndClearErrors">
                   Cancel
                 </Button>
               </DialogClose>
 
               <Button
                 type="submit"
                 variant="destructive"
-                :disabled="form.processing"
+                :disabled="processing"
               >
                 Delete account
               </Button>
             </DialogFooter>
-          </form>
+          </Form>
         </DialogContent>
       </Dialog>
     </div>

app/frontend/pages/identity/password_resets/edit.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, useForm } from "@inertiajs/vue3"
+import { Form, Head } from "@inertiajs/vue3"
 import { LoaderCircle } from "lucide-vue-next"
 
 import InputError from "@/components/InputError.vue"
@@ -15,21 +15,6 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-
-const form = useForm({
-  sid: props.sid,
-  email: props.email,
-  password: "",
-  password_confirmation: "",
-})
-
-const submit = () => {
-  form.put(identityPasswordResetPath(), {
-    onFinish: () => {
-      form.reset("password", "password_confirmation")
-    },
-  })
-}
 </script>
 
 <template>
@@ -39,56 +24,60 @@ const submit = () => {
   >
     <Head title="Reset password" />
 
-    <form @submit.prevent="submit">
+    <Form
+      method="put"
+      :action="identityPasswordResetPath()"
+      :transform="(data) => ({ ...data, sid, email })"
+      :resetOnSuccess="['password', 'password_confirmation']"
+      #default="{ errors, processing }"
+    >
       <div class="grid gap-6">
         <div class="grid gap-2">
           <Label for="email">Email</Label>
           <Input
             id="email"
-            type="email"
             name="email"
+            type="email"
             autocomplete="email"
-            v-model="form.email"
+            :defaultValue="props.email"
             class="mt-1 block w-full"
             readonly
           />
-          <InputError :message="form.errors.email" class="mt-2" />
+          <InputError :message="errors.email" class="mt-2" />
         </div>
 
         <div class="grid gap-2">
           <Label for="password">Password</Label>
           <Input
             id="password"
-            type="password"
             name="password"
+            type="password"
             autocomplete="new-password"
-            v-model="form.password"
             class="mt-1 block w-full"
             autofocus
             placeholder="Password"
           />
-          <InputError :message="form.errors.password" />
+          <InputError :message="errors.password" />
         </div>
 
         <div class="grid gap-2">
           <Label for="password_confirmation"> Confirm Password </Label>
           <Input
             id="password_confirmation"
-            type="password"
             name="password_confirmation"
+            type="password"
             autocomplete="new-password"
-            v-model="form.password_confirmation"
             class="mt-1 block w-full"
             placeholder="Confirm password"
           />
-          <InputError :message="form.errors.password_confirmation" />
+          <InputError :message="errors.password_confirmation" />
         </div>
 
-        <Button type="submit" class="mt-4 w-full" :disabled="form.processing">
-          <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+        <Button type="submit" class="mt-4 w-full" :disabled="processing">
+          <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
           Reset password
         </Button>
       </div>
-    </form>
+    </Form>
   </AuthLayout>
 </template>

app/frontend/pages/identity/password_resets/new.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, useForm } from "@inertiajs/vue3"
+import { Form, Head } from "@inertiajs/vue3"
 import { LoaderCircle } from "lucide-vue-next"
 
 import InputError from "@/components/InputError.vue"
@@ -9,14 +9,6 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import AuthLayout from "@/layouts/AuthLayout.vue"
 import { identityPasswordResetPath, signInPath } from "@/routes"
-
-const form = useForm({
-  email: "",
-})
-
-const submit = () => {
-  form.post(identityPasswordResetPath())
-}
 </script>
 
 <template>
@@ -27,28 +19,31 @@ const submit = () => {
     <Head title="Forgot password" />
 
     <div class="space-y-6">
-      <form @submit.prevent="submit">
+      <Form
+        method="post"
+        :action="identityPasswordResetPath()"
+        #default="{ errors, processing }"
+      >
         <div class="grid gap-2">
           <Label for="email">Email address</Label>
           <Input
             id="email"
-            type="email"
             name="email"
+            type="email"
             autocomplete="off"
-            v-model="form.email"
             autofocus
             placeholder="[email protected]"
           />
-          <InputError :message="form.errors.email" />
+          <InputError :message="errors.email" />
         </div>
 
         <div class="my-6 flex items-center justify-start">
-          <Button class="w-full" :disabled="form.processing">
-            <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+          <Button class="w-full" :disabled="processing">
+            <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
             Email password reset link
           </Button>
         </div>
-      </form>
+      </Form>
 
       <div class="text-muted-foreground space-x-1 text-center text-sm">
         <span>Or, return to</span>

app/frontend/pages/sessions/new.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head, useForm } from "@inertiajs/vue3"
+import { Form, Head } from "@inertiajs/vue3"
 import { LoaderCircle } from "lucide-vue-next"
 
 import InputError from "@/components/InputError.vue"
@@ -9,18 +9,6 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import AuthBase from "@/layouts/AuthLayout.vue"
 import { newIdentityPasswordResetPath, signInPath, signUpPath } from "@/routes"
-
-const form = useForm({
-  email: "",
-  password: "",
-  remember: false,
-})
-
-const submit = () => {
-  form.post(signInPath(), {
-    onFinish: () => form.reset("password"),
-  })
-}
 </script>
 
 <template>
@@ -30,21 +18,27 @@ const submit = () => {
   >
     <Head title="Log in" />
 
-    <form @submit.prevent="submit" class="flex flex-col gap-6">
+    <Form
+      method="post"
+      :action="signInPath()"
+      :resetOnSuccess="['password']"
+      class="flex flex-col gap-6"
+      #default="{ errors, processing }"
+    >
       <div class="grid gap-6">
         <div class="grid gap-2">
           <Label for="email">Email address</Label>
           <Input
             id="email"
+            name="email"
             type="email"
             required
             autofocus
             :tabindex="1"
             autocomplete="email"
-            v-model="form.email"
             placeholder="[email protected]"
           />
-          <InputError :message="form.errors.email" />
+          <InputError :message="errors.email" />
         </div>
 
         <div class="grid gap-2">
@@ -60,23 +54,23 @@ const submit = () => {
           </div>
           <Input
             id="password"
+            name="password"
             type="password"
             required
             :tabindex="2"
             autocomplete="current-password"
-            v-model="form.password"
             placeholder="Password"
           />
-          <InputError :message="form.errors.password" />
+          <InputError :message="errors.password" />
         </div>
 
         <Button
           type="submit"
           class="mt-4 w-full"
           :tabindex="4"
-          :disabled="form.processing"
+          :disabled="processing"
         >
-          <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
+          <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
           Log in
         </Button>
       </div>
@@ -85,6 +79,6 @@ const submit = () => {
         Don't have an account?
         <TextLink :href="signUpPath()" :tabindex="5">Sign up</TextLink>
       </div>
-    </form>
+    </Form>
   </AuthBase>
 </template>