betterstart-cli 0.0.108 → 0.0.109

package/dist/assets/adapters/next/templates/init/pages/reset-password-form.tsx

@@ -1,30 +1,53 @@
 'use client'
 
 import * as React from 'react'
+import type { FieldErrors } from 'react-hook-form'
 import { authClient } from '@admin/auth/client'
 import { Button } from '@admin/components/ui/button'
 import { Card, CardContent } from '@admin/components/ui/card'
 import { Field, FieldGroup, FieldLabel } from '@admin/components/ui/field'
+import { Form } from '@admin/components/ui/form'
 import { Input } from '@admin/components/ui/input'
 import { Spinner } from '@admin/components/ui/spinner'
 import { cn } from '@admin/utils/shared/cn'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { createSerializer, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
 
 const serializeLoginUrl = createSerializer({
   reset: parseAsStringLiteral(['success'])
 })
 
+const resetPasswordSchema = z
+  .object({
+    newPassword: z.string().min(8, 'Password must be at least 8 characters'),
+    confirmPassword: z.string().min(1, 'Confirm the new password')
+  })
+  .refine((values) => values.newPassword === values.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword']
+  })
+
+type ResetPasswordFormValues = z.infer<typeof resetPasswordSchema>
+
 export function ResetPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
   const router = useRouter()
   const [token] = useQueryState('token', parseAsString)
-
-  const [newPassword, setNewPassword] = React.useState('')
-  const [confirmPassword, setConfirmPassword] = React.useState('')
-  const [error, setError] = React.useState<string | null>(null)
   const [isPending, startTransition] = React.useTransition()
+  const form = useForm<ResetPasswordFormValues>({
+    resolver: standardSchemaResolver(resetPasswordSchema),
+    defaultValues: {
+      newPassword: '',
+      confirmPassword: ''
+    },
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
 
   if (!token) {
     return (
@@ -62,38 +85,30 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
     )
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
-
-    if (newPassword !== confirmPassword) {
-      setError('Passwords do not match')
-      return
-    }
-
-    if (newPassword.length < 8) {
-      setError('Password must be at least 8 characters')
-      return
-    }
-
+  const handleSubmit = (values: ResetPasswordFormValues) => {
     startTransition(async () => {
       try {
         const { error } = await authClient.resetPassword({
-          newPassword,
+          newPassword: values.newPassword,
           token
         })
         if (error) {
-          setError(error.message || 'Failed to reset password')
+          toast.error(error.message || 'Failed to reset password')
           return
         }
         await authClient.getSession({ query: { disableCookieCache: true } })
         router.push(serializeLoginUrl('/admin/login', { reset: 'success' }))
       } catch {
-        setError('Failed to reset your password. Try again.')
+        toast.error('Failed to reset your password. Try again.')
       }
     })
   }
 
+  const handleInvalid = (errors: FieldErrors<ResetPasswordFormValues>) => {
+    const message = errors.newPassword?.message ?? errors.confirmPassword?.message
+    toast.error(typeof message === 'string' ? message : 'Please check your new password.')
+  }
+
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
@@ -107,53 +122,57 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
               className="object-cover"
             />
           </div>
-          <form onSubmit={handleSubmit} className="p-6 md:p-20">
-            <FieldGroup className="gap-10 pb-12">
-              <div className="flex flex-col items-start">
-                <h1 className="text-xl font-medium">Reset password</h1>
-                <p className="text-balance text-muted-foreground">Enter your new password below</p>
-              </div>
-              {error ? (
-                <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-                  {error}
+          <Form {...form}>
+            <form
+              autoComplete="off"
+              noValidate
+              onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
+              className="p-6 md:p-20"
+            >
+              <FieldGroup className="gap-10 pb-12">
+                <div className="flex flex-col items-start">
+                  <h1 className="text-xl font-medium">Reset password</h1>
+                  <p className="text-balance text-muted-foreground">
+                    Enter your new password below
+                  </p>
+                </div>
+                <div className="flex flex-col gap-4">
+                  <Field>
+                    <FieldLabel htmlFor="newPassword">New Password</FieldLabel>
+                    <Input
+                      id="newPassword"
+                      type="password"
+                      autoComplete="off"
+                      placeholder="Enter new password"
+                      aria-invalid={Boolean(form.formState.errors.newPassword)}
+                      {...form.register('newPassword')}
+                      required
+                      disabled={isPending}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="confirmPassword">Confirm Password</FieldLabel>
+                    <Input
+                      id="confirmPassword"
+                      type="password"
+                      autoComplete="off"
+                      placeholder="Confirm new password"
+                      aria-invalid={Boolean(form.formState.errors.confirmPassword)}
+                      {...form.register('confirmPassword')}
+                      required
+                      disabled={isPending}
+                    />
+                  </Field>
+                  <Field className="pt-4">
+                    <Button type="submit" disabled={isPending} aria-busy={isPending}>
+                      {isPending && <Spinner />}
+                      {isPending ? 'Resetting…' : 'Reset Password'}
+                    </Button>
+                  </Field>
                 </div>
-              ) : null}
-              <div className="flex flex-col gap-4">
-                <Field>
-                  <FieldLabel htmlFor="newPassword">New Password</FieldLabel>
-                  <Input
-                    id="newPassword"
-                    type="password"
-                    autoComplete="new-password"
-                    placeholder="Enter new password"
-                    value={newPassword}
-                    onChange={(e) => setNewPassword(e.target.value)}
-                    required
-                    disabled={isPending}
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="confirmPassword">Confirm Password</FieldLabel>
-                  <Input
-                    id="confirmPassword"
-                    type="password"
-                    autoComplete="new-password"
-                    placeholder="Confirm new password"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    required
-                    disabled={isPending}
-                  />
-                </Field>
-                <Field className="pt-4">
-                  <Button type="submit" disabled={isPending} aria-busy={isPending}>
-                    {isPending && <Spinner />}
-                    {isPending ? 'Resetting…' : 'Reset Password'}
-                  </Button>
-                </Field>
-              </div>
-            </FieldGroup>
-          </form>
+              </FieldGroup>
+            </form>
+          </Form>
         </CardContent>
       </Card>
     </div>

package/dist/assets/adapters/next/templates/init/pages/settings/forms/form-notifications-drawer.tsx

@@ -86,6 +86,7 @@ export function FormNotificationsDrawer({
       <DrawerContent className="h-full sm:max-w-xl">
         <Form {...form}>
           <form
+            autoComplete="off"
             onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
             className="flex min-h-0 flex-1 flex-col gap-4"
           >

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-endpoint-dialog.tsx

@@ -67,8 +67,6 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
         : [],
     [subscriptions, webhook]
   )
-  const [selectedEvents, setSelectedEvents] = React.useState<string[] | null>(null)
-  const events = selectedEvents ?? subscribedEvents
   const [secret, setSecret] = React.useState<string | null>(null)
 
   const formSources = webhookEventSources.filter((source) => source.kind === 'form')
@@ -83,6 +81,19 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
       events: subscribedEvents
     }
   })
+  const events = form.watch('events')
+
+  React.useEffect(() => {
+    if (!open) return
+
+    form.reset({
+      name: webhook?.name ?? '',
+      url: webhook?.url ?? '',
+      enabled: webhook?.enabled ?? true,
+      events: subscribedEvents
+    })
+    setSecret(null)
+  }, [form, open, subscribedEvents, webhook])
 
   const saveMutation = useMutation({
     mutationFn: async (values: EndpointFormValues) => {
@@ -92,8 +103,8 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
         enabled: values.enabled
       }
       const result = webhook
-        ? await updateWebhook(webhook.id, { ...endpointValues, events })
-        : await createWebhook({ ...endpointValues, events })
+        ? await updateWebhook(webhook.id, { ...endpointValues, events: values.events })
+        : await createWebhook({ ...endpointValues, events: values.events })
       if (!result.success) {
         throw new Error(result.error || 'Failed to save this webhook')
       }
@@ -172,16 +183,23 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
   const isPending = saveMutation.isPending
 
   function toggleEvent(event: string, checked: boolean) {
-    const nextEvents = checked ? [...events, event] : events.filter((entry) => entry !== event)
-    setSelectedEvents(nextEvents)
-    form.setValue('events', nextEvents)
+    const currentEvents = form.getValues('events')
+    const nextEvents = checked
+      ? currentEvents.includes(event)
+        ? currentEvents
+        : [...currentEvents, event]
+      : currentEvents.filter((entry) => entry !== event)
+    form.setValue('events', nextEvents, { shouldDirty: true, shouldValidate: true })
   }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}>
+          <form
+            autoComplete="off"
+            onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
+          >
             <DialogHeader>
               <DialogTitle>{isEdit ? `Edit webhook — ${webhook.name}` : 'Add webhook'}</DialogTitle>
               <DialogDescription>

package/dist/assets/adapters/next/templates/init/pages/users/change-password-dialog.tsx

@@ -82,7 +82,7 @@ export function ChangePasswordDialog({
   const form = useForm<ChangePasswordFormValues>({
     resolver: standardSchemaResolver(isCurrentUser ? ownPasswordSchema : userPasswordSchema),
     defaultValues,
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange'
   })
 
@@ -144,7 +144,10 @@ export function ChangePasswordDialog({
       </DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+          <form
+            autoComplete="off"
+            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
+          >
             <DialogHeader>
               <DialogTitle>Change Password</DialogTitle>
               <DialogDescription>
@@ -166,7 +169,7 @@ export function ChangePasswordDialog({
                         <FormControl>
                           <Input
                             type="password"
-                            autoComplete="current-password"
+                            autoComplete="off"
                             disabled={isPending}
                             autoFocus
                             {...field}
@@ -186,7 +189,7 @@ export function ChangePasswordDialog({
                       <FormControl>
                         <Input
                           type="password"
-                          autoComplete="new-password"
+                          autoComplete="off"
                           disabled={isPending}
                           autoFocus={!isCurrentUser}
                           {...field}
@@ -204,12 +207,7 @@ export function ChangePasswordDialog({
                     <FormItem>
                       <FormLabel>Confirm Password</FormLabel>
                       <FormControl>
-                        <Input
-                          type="password"
-                          autoComplete="new-password"
-                          disabled={isPending}
-                          {...field}
-                        />
+                        <Input type="password" autoComplete="off" disabled={isPending} {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>

package/dist/assets/adapters/next/templates/init/pages/users/create-user-dialog.tsx

@@ -67,7 +67,7 @@ export function CreateUserDialog() {
   const form = useForm<CreateUserFormValues>({
     resolver: standardSchemaResolver(createUserSchema),
     defaultValues,
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange'
   })
 
@@ -111,7 +111,10 @@ export function CreateUserDialog() {
       <DialogTrigger render={<Button />}>Create User</DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+          <form
+            autoComplete="off"
+            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
+          >
             <DialogHeader>
               <DialogTitle>Create User</DialogTitle>
               <DialogDescription>Add a new user to the system</DialogDescription>
@@ -129,7 +132,7 @@ export function CreateUserDialog() {
                         <Input
                           type="email"
                           placeholder="user@example.com"
-                          autoComplete="email"
+                          autoComplete="off"
                           disabled={isPending}
                           {...field}
                         />
@@ -148,7 +151,7 @@ export function CreateUserDialog() {
                         <Input
                           type="text"
                           placeholder="Full name"
-                          autoComplete="name"
+                          autoComplete="off"
                           disabled={isPending}
                           {...field}
                         />
@@ -167,7 +170,7 @@ export function CreateUserDialog() {
                         <Input
                           type="password"
                           placeholder="Min 8 characters"
-                          autoComplete="new-password"
+                          autoComplete="off"
                           disabled={isPending}
                           {...field}
                         />

package/dist/assets/adapters/next/templates/init/pages/users/delete-user-dialog.tsx

@@ -118,7 +118,7 @@ export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUser
       </AlertDialogTrigger>
       <AlertDialogContent>
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(() => mutation.mutate())}>
+          <form autoComplete="off" onSubmit={form.handleSubmit(() => mutation.mutate())}>
             <AlertDialogHeader>
               <AlertDialogTitle>Delete account?</AlertDialogTitle>
               <AlertDialogDescription>

package/dist/assets/adapters/next/templates/init/pages/users/edit-role-dialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
   DialogTrigger
 } from '@admin/components/ui/dialog'
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@admin/components/ui/form'
 import {
   Select,
   SelectContent,
@@ -22,6 +23,7 @@ import {
 import { Spinner } from '@admin/components/ui/spinner'
 import { UserRole } from '@admin/types/auth'
 import { useQueryClient } from '@tanstack/react-query'
+import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
 interface EditRoleDialogProps {
@@ -31,19 +33,32 @@ interface EditRoleDialogProps {
   children: React.ReactNode
 }
 
+interface EditRoleFormValues {
+  role: UserRole
+}
+
 export function EditRoleDialog({ userId, currentRole, userName, children }: EditRoleDialogProps) {
   const [open, setOpen] = React.useState(false)
-  const [role, setRole] = React.useState(currentRole)
   const [isPending, startTransition] = React.useTransition()
   const queryClient = useQueryClient()
+  const form = useForm<EditRoleFormValues>({
+    defaultValues: {
+      role: currentRole as UserRole
+    }
+  })
+
+  React.useEffect(() => {
+    form.reset({ role: currentRole as UserRole })
+  }, [currentRole, form])
 
-  const handleSave = () => {
+  const handleSave = (values: EditRoleFormValues) => {
     startTransition(async () => {
       try {
-        const result = await updateUserRole(userId, role as UserRole)
+        const result = await updateUserRole(userId, values.role)
         if (result.success) {
           toast.success(`Role updated for ${userName}`)
           queryClient.refetchQueries({ queryKey: ['users'] })
+          form.reset(values)
           setOpen(false)
         } else {
           toast.error(result.error || 'Failed to update role')
@@ -54,41 +69,69 @@ export function EditRoleDialog({ userId, currentRole, userName, children }: Edit
     })
   }
 
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen)
+
+    if (!nextOpen) {
+      form.reset({ role: currentRole as UserRole })
+    }
+  }
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger render={children as React.ReactElement} />
       <DialogContent className="sm:max-w-87.5">
-        <DialogHeader>
-          <DialogTitle>Edit Role</DialogTitle>
-          <DialogDescription>Change the role for {userName}</DialogDescription>
-        </DialogHeader>
+        <Form {...form}>
+          <form autoComplete="off" onSubmit={form.handleSubmit(handleSave)}>
+            <DialogHeader>
+              <DialogTitle>Edit Role</DialogTitle>
+              <DialogDescription>Change the role for {userName}</DialogDescription>
+            </DialogHeader>
 
-        <div className="p-2">
-          <Select value={role} onValueChange={setRole}>
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
-              <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
-              <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+            <div className="p-2">
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <Select value={field.value} onValueChange={field.onChange} disabled={isPending}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
+                        <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
+                        <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
 
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSave}
-            disabled={isPending || role === currentRole}
-            aria-busy={isPending}
-          >
-            {isPending && <Spinner />}
-            {isPending ? 'Saving Role…' : 'Save Role'}
-          </Button>
-        </DialogFooter>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={isPending || !form.formState.isDirty}
+                aria-busy={isPending}
+              >
+                {isPending && <Spinner />}
+                {isPending ? 'Saving Role…' : 'Save Role'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   )

package/dist/assets/shared-assets/react-admin/ui/input-group.tsx

@@ -59,6 +59,12 @@ function InputGroupAddon({
         }
         e.currentTarget.parentElement?.querySelector('input')?.focus()
       }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          e.currentTarget.parentElement?.querySelector('input')?.focus()
+        }
+      }}
       {...props}
     />
   )