betterstart-cli 0.0.107 → 0.0.109

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

@@ -1,49 +1,68 @@
 'use client'
 
 import * as React from 'react'
+import type { FieldErrors } from 'react-hook-form'
 import { isEmailConfigured } from '@admin/actions/profile'
 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 { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const forgotPasswordSchema = z.object({
+  email: z.string().trim().min(1, 'Email is required').email('Enter a valid email address')
+})
+
+type ForgotPasswordFormValues = z.infer<typeof forgotPasswordSchema>
 
 export function ForgotPasswordForm({ className, ...props }: React.ComponentProps<'div'>) {
-  const [email, setEmail] = React.useState('')
-  const [error, setError] = React.useState<string | null>(null)
-  const [success, setSuccess] = React.useState(false)
   const [isPending, startTransition] = React.useTransition()
+  const form = useForm<ForgotPasswordFormValues>({
+    resolver: standardSchemaResolver(forgotPasswordSchema),
+    defaultValues: { email: '' },
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
-
+  const handleSubmit = (values: ForgotPasswordFormValues) => {
     startTransition(async () => {
       try {
         const emailReady = await isEmailConfigured()
         if (!emailReady) {
-          setError('Email delivery is not configured for this project.')
+          toast.error('Email delivery is not configured for this project.')
           return
         }
         const { error } = await authClient.requestPasswordReset({
-          email,
+          email: values.email,
           redirectTo: '/admin/reset-password'
         })
         if (error) {
-          setError(error.message || 'Failed to send reset link')
+          toast.error(error.message || 'Failed to send reset link')
           return
         }
-        setSuccess(true)
+        toast.success(
+          'If an account exists, we sent a password reset link. Check your inbox and spam folder.'
+        )
       } catch {
-        setError('Failed to send the reset link. Try again.')
+        toast.error('Failed to send the reset link. Try again.')
       }
     })
   }
 
+  const handleInvalid = (errors: FieldErrors<ForgotPasswordFormValues>) => {
+    const message = errors.email?.message
+    toast.error(typeof message === 'string' ? message : 'Enter a valid email address.')
+  }
+
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
@@ -54,25 +73,16 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
               alt=""
               fill
               sizes="(min-width: 768px) 42vw, 0px"
-              className="object-cover dark:brightness-[0.2] dark:grayscale"
+              className="object-cover"
             />
           </div>
           <div className="p-6 md:p-20">
-            {success ? (
-              <FieldGroup className="gap-10 pb-12">
-                <div className="flex flex-col items-start">
-                  <h1 className="text-xl font-medium">Check your email</h1>
-                  <p className="text-balance text-muted-foreground">
-                    If an account exists for {email}, we sent a password reset link. Check your
-                    inbox and spam folder.
-                  </p>
-                </div>
-                <Link href="/admin/login" className="text-sm underline-offset-4 hover:underline">
-                  Back to sign in
-                </Link>
-              </FieldGroup>
-            ) : (
-              <form onSubmit={handleSubmit}>
+            <Form {...form}>
+              <form
+                autoComplete="off"
+                noValidate
+                onSubmit={form.handleSubmit(handleSubmit, handleInvalid)}
+              >
                 <FieldGroup className="gap-10 pb-12">
                   <div className="flex flex-col items-start">
                     <h1 className="text-xl font-medium">Forgot password</h1>
@@ -81,21 +91,16 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
                       enabled
                     </p>
                   </div>
-                  {error ? (
-                    <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-                      {error}
-                    </div>
-                  ) : null}
                   <div className="flex flex-col gap-4">
                     <Field>
                       <FieldLabel htmlFor="email">Email</FieldLabel>
                       <Input
                         id="email"
                         type="email"
-                        autoComplete="email"
+                        autoComplete="off"
                         placeholder="m@example.com"
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
+                        aria-invalid={Boolean(form.formState.errors.email)}
+                        {...form.register('email')}
                         required
                         disabled={isPending}
                       />
@@ -115,7 +120,7 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
                   </div>
                 </FieldGroup>
               </form>
-            )}
+            </Form>
           </div>
         </CardContent>
       </Card>

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

@@ -1,41 +1,64 @@
 '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 { getAdminPostLoginPath } from '@admin/utils/auth/get-admin-post-login-path'
 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 { parseAsStringLiteral, useQueryState } from 'nuqs'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const loginSchema = z.object({
+  email: z.string().trim().min(1, 'Email is required').email('Enter a valid email address'),
+  password: z.string().min(1, 'Password is required')
+})
+
+type LoginFormValues = z.infer<typeof loginSchema>
 
 export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
   const router = useRouter()
   const [reset] = useQueryState('reset', parseAsStringLiteral(['success']))
-  const resetSuccess = reset === 'success'
-  const [email, setEmail] = React.useState('')
-  const [password, setPassword] = React.useState('')
-  const [error, setError] = React.useState<string | null>(null)
   const [isPending, startTransition] = React.useTransition()
+  const form = useForm<LoginFormValues>({
+    resolver: standardSchemaResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: ''
+    },
+    mode: 'onChange',
+    reValidateMode: 'onChange'
+  })
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setError(null)
+  React.useEffect(() => {
+    if (reset === 'success') {
+      toast.success('Password reset. Sign in with your new password.', {
+        id: 'admin-login-password-reset-success'
+      })
+    }
+  }, [reset])
 
+  const handleSubmit = (values: LoginFormValues) => {
     startTransition(async () => {
       try {
         const result = await authClient.signIn.email({
-          email,
-          password
+          email: values.email,
+          password: values.password
         })
 
         if (result.error) {
-          setError(result.error.message || 'Invalid email or password')
+          toast.error(result.error.message || 'Invalid email or password')
           return
         }
 
@@ -45,11 +68,16 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
         router.replace(getAdminPostLoginPath(role))
         router.refresh()
       } catch {
-        setError('Failed to sign you in. Try again.')
+        toast.error('Failed to sign you in. Try again.')
       }
     })
   }
 
+  const handleInvalid = (errors: FieldErrors<LoginFormValues>) => {
+    const message = errors.email?.message ?? errors.password?.message
+    toast.error(typeof message === 'string' ? message : 'Please check your sign-in details.')
+  }
+
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
       <Card className="overflow-hidden p-0">
@@ -60,70 +88,66 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
               alt=""
               fill
               sizes="(min-width: 768px) 42vw, 0px"
-              className="object-cover dark:brightness-[0.2] dark:grayscale"
+              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">Welcome back</h1>
-                <p className="text-balance text-muted-foreground">Sign in to your account</p>
-              </div>
-              {resetSuccess ? (
-                <div className="rounded-md bg-emerald-500/10 p-3 text-sm text-emerald-700 dark:text-emerald-400">
-                  Password reset. Sign in with your new password.
+          <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">Sign In</h1>
                 </div>
-              ) : null}
-              {error ? (
-                <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-                  {error}
+                <div className="flex flex-col gap-4">
+                  <Field>
+                    <FieldLabel htmlFor="email">Email</FieldLabel>
+                    <Input
+                      id="email"
+                      type="email"
+                      autoComplete="off"
+                      placeholder="m@example.com"
+                      aria-invalid={Boolean(form.formState.errors.email)}
+                      {...form.register('email')}
+                      required
+                      disabled={isPending}
+                    />
+                  </Field>
+                  <Field>
+                    <div className="flex items-center">
+                      <FieldLabel htmlFor="password">Password</FieldLabel>
+                      <Link
+                        href="/admin/forgot-password"
+                        className="ml-auto text-sm underline-offset-4 hover:underline"
+                        tabIndex={-1}
+                      >
+                        Forgot password?
+                      </Link>
+                    </div>
+                    <Input
+                      id="password"
+                      type="password"
+                      autoComplete="off"
+                      placeholder="Enter your password"
+                      aria-invalid={Boolean(form.formState.errors.password)}
+                      {...form.register('password')}
+                      required
+                      disabled={isPending}
+                    />
+                  </Field>
+                  <Field className="pt-4">
+                    <Button type="submit" disabled={isPending} aria-busy={isPending}>
+                      {isPending && <Spinner />}
+                      {isPending ? 'Signing in…' : 'Sign in'}
+                    </Button>
+                  </Field>
                 </div>
-              ) : null}
-              <div className="flex flex-col gap-4">
-                <Field>
-                  <FieldLabel htmlFor="email">Email</FieldLabel>
-                  <Input
-                    id="email"
-                    type="email"
-                    autoComplete="email"
-                    placeholder="m@example.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                    disabled={isPending}
-                  />
-                </Field>
-                <Field>
-                  <div className="flex items-center">
-                    <FieldLabel htmlFor="password">Password</FieldLabel>
-                    <Link
-                      href="/admin/forgot-password"
-                      className="ml-auto text-sm underline-offset-4 hover:underline"
-                      tabIndex={-1}
-                    >
-                      Forgot password?
-                    </Link>
-                  </div>
-                  <Input
-                    id="password"
-                    type="password"
-                    autoComplete="current-password"
-                    placeholder="Enter your password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                    disabled={isPending}
-                  />
-                </Field>
-                <Field className="pt-4">
-                  <Button type="submit" disabled={isPending} aria-busy={isPending}>
-                    {isPending && <Spinner />}
-                    {isPending ? 'Signing in…' : 'Sign in'}
-                  </Button>
-                </Field>
-              </div>
-            </FieldGroup>
-          </form>
+              </FieldGroup>
+            </form>
+          </Form>
         </CardContent>
       </Card>
     </div>

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

@@ -90,7 +90,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
       newPassword: '',
       confirmPassword: ''
     },
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange'
   })
 
@@ -195,7 +195,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
   return (
     <div className="space-y-6">
       <Form {...profileForm}>
-        <form onSubmit={profileForm.handleSubmit(onProfileSubmit)}>
+        <form autoComplete="off" onSubmit={profileForm.handleSubmit(onProfileSubmit)}>
           <Card>
             <CardHeader>
               <div className="flex items-center gap-4 pl-1">
@@ -282,7 +282,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
                         <Input
                           type="password"
                           placeholder="Enter current password to change email"
-                          autoComplete="current-password"
+                          autoComplete="off"
                           disabled={profilePending}
                           {...formField}
                         />
@@ -309,7 +309,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
       </Form>
 
       <Form {...passwordForm}>
-        <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)}>
+        <form autoComplete="off" onSubmit={passwordForm.handleSubmit(onPasswordSubmit)}>
           <Card>
             <CardHeader>
               <CardTitle>Change Password</CardTitle>
@@ -325,7 +325,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
                     <FormControl>
                       <Input
                         type="password"
-                        autoComplete="current-password"
+                        autoComplete="off"
                         disabled={passwordPending}
                         {...field}
                       />
@@ -343,7 +343,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
                     <FormControl>
                       <Input
                         type="password"
-                        autoComplete="new-password"
+                        autoComplete="off"
                         disabled={passwordPending}
                         {...field}
                       />
@@ -362,7 +362,7 @@ export function ProfileForm({ user }: ProfileFormProps) {
                     <FormControl>
                       <Input
                         type="password"
-                        autoComplete="new-password"
+                        autoComplete="off"
                         disabled={passwordPending}
                         {...field}
                       />

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 (
@@ -37,7 +60,7 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
                 alt=""
                 fill
                 sizes="(min-width: 768px) 42vw, 0px"
-                className="object-cover dark:brightness-[0.2] dark:grayscale"
+                className="object-cover"
               />
             </div>
             <div className="p-6 md:p-20">
@@ -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">
@@ -104,56 +119,60 @@ export function ResetPasswordForm({ className, ...props }: React.ComponentProps<
               alt=""
               fill
               sizes="(min-width: 768px) 42vw, 0px"
-              className="object-cover dark:brightness-[0.2] dark:grayscale"
+              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"
           >