betterstart-cli 0.0.108 → 0.0.109

package/dist/assets/adapters/next/templates/init/admin-globals.css

@@ -98,7 +98,7 @@
   --warning-foreground: oklch(0.625 0.165 57.4);
   --border: oklch(0.93 0 0);
   --highlight: oklch(0.9 0.004 286.32);
-  --input: oklch(0.994 0 0);
+  --input: oklch(0.93 0 0);
   --ring: oklch(0.708 0 0);
   --chart-1: oklch(0.845 0.143 164.978);
   --chart-2: oklch(0.696 0.17 162.48);

package/dist/assets/adapters/next/templates/init/components/shared/media/edit-media-dialog-content.tsx

@@ -102,6 +102,7 @@ export function EditMediaDialogContent({
         </DrawerHeader>
         <Form {...form}>
           <form
+            autoComplete="off"
             id={formId}
             onSubmit={form.handleSubmit(handleSave)}
             className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 pt-px pb-4"

package/dist/assets/adapters/next/templates/init/components/shared/media/media-url-importer.tsx

@@ -2,7 +2,9 @@
 
 import * as React from 'react'
 import type { UploadFileResult } from '@admin/types'
+import type { FieldErrors } from 'react-hook-form'
 import { Card, CardContent } from '@admin/components/ui/card'
+import { Form } from '@admin/components/ui/form'
 import {
   InputGroup,
   InputGroupAddon,
@@ -15,19 +17,29 @@ import { getMediaUrlPlaceholder } from '@admin/utils/media/get-media-url-placeho
 import { cn } from '@admin/utils/shared/cn'
 import { isValidUrl } from '@admin/utils/validation/is-valid-url'
 import { Upload } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 
 interface MediaUrlImporterProps extends React.HTMLAttributes<HTMLDivElement> {
   onImportFromUrl: (url: string) => Promise<UploadFileResult>
   accept?: string
 }
 
+interface MediaUrlFormValues {
+  url: string
+}
+
 export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUrlImporterProps) {
-  const [urlValue, setUrlValue] = React.useState('')
-  const [urlError, setUrlError] = React.useState<string | null>(null)
   const [isImporting, startImportTransition] = React.useTransition()
   const mountedRef = React.useRef(true)
   const importInFlightRef = React.useRef(false)
   const importRequestIdRef = React.useRef(0)
+  const form = useForm<MediaUrlFormValues>({
+    defaultValues: { url: '' },
+    mode: 'onSubmit',
+    reValidateMode: 'onChange'
+  })
+  const urlField = form.register('url', { required: 'Enter a direct media URL to import.' })
 
   React.useEffect(() => {
     mountedRef.current = true
@@ -42,93 +54,92 @@ export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUr
   const urlHelpText = getMediaUrlHelpText(accept)
   const urlPlaceholder = getMediaUrlPlaceholder(accept)
 
-  const handleImport = React.useCallback(() => {
-    if (isImporting || importInFlightRef.current) return
-
-    const nextUrl = urlValue.trim()
-
-    if (!nextUrl) {
-      setUrlError('Enter a direct media URL to import.')
-      return
-    }
-
-    if (!isValidUrl(nextUrl)) {
-      setUrlError('Enter a valid HTTP or HTTPS URL.')
-      return
-    }
-
-    setUrlError(null)
-    const importRequestId = importRequestIdRef.current + 1
-    importRequestIdRef.current = importRequestId
-    importInFlightRef.current = true
+  const handleImport = React.useCallback(
+    (values: MediaUrlFormValues) => {
+      if (isImporting || importInFlightRef.current) return
 
-    startImportTransition(async () => {
-      try {
-        const result = await onImportFromUrl(nextUrl)
+      const nextUrl = values.url.trim()
 
-        if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
-          return
-        }
-
-        if (!result.success) {
-          setUrlError(result.error ?? 'Failed to import media from URL.')
-          return
-        }
+      if (!isValidUrl(nextUrl)) {
+        toast.error('Enter a valid HTTP or HTTPS URL.')
+        return
+      }
 
-        setUrlValue('')
-      } catch (error) {
-        if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
-          return
+      const importRequestId = importRequestIdRef.current + 1
+      importRequestIdRef.current = importRequestId
+      importInFlightRef.current = true
+
+      startImportTransition(async () => {
+        try {
+          const result = await onImportFromUrl(nextUrl)
+
+          if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
+            return
+          }
+
+          if (!result.success) {
+            toast.error(result.error ?? 'Failed to import media from URL.')
+            return
+          }
+
+          form.reset()
+        } catch (error) {
+          if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
+            return
+          }
+
+          toast.error(error instanceof Error ? error.message : 'Failed to import media from URL.')
+        } finally {
+          if (importRequestIdRef.current === importRequestId) {
+            importInFlightRef.current = false
+          }
         }
+      })
+    },
+    [form, isImporting, onImportFromUrl]
+  )
 
-        setUrlError(error instanceof Error ? error.message : 'Failed to import media from URL.')
-      } finally {
-        if (importRequestIdRef.current === importRequestId) {
-          importInFlightRef.current = false
-        }
-      }
-    })
-  }, [isImporting, onImportFromUrl, urlValue])
+  const handleInvalid = (errors: FieldErrors<MediaUrlFormValues>) => {
+    const message = errors.url?.message
+    toast.error(typeof message === 'string' ? message : 'Enter a direct media URL to import.')
+  }
 
   return (
     <Card className={cn('flex items-center justify-center', className)}>
       <CardContent className="h-full w-full">
         <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-center">
-          <InputGroup className="mx-auto max-w-2xl bg-background">
-            <InputGroupInput
-              type="url"
-              name="url"
-              aria-label="Media URL"
-              value={urlValue}
-              placeholder={urlPlaceholder}
+          <Form {...form}>
+            <form
               autoComplete="off"
-              spellCheck={false}
-              onChange={(event) => {
-                setUrlValue(event.target.value)
-                if (urlError) setUrlError(null)
-              }}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                  event.preventDefault()
-                  void handleImport()
-                }
-              }}
-              disabled={isImporting}
-            />
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton
-                type="button"
-                variant="outline"
-                onClick={() => void handleImport()}
-                disabled={isImporting}
-                aria-busy={isImporting}
-                className="h-full px-5"
-              >
-                {isImporting ? <Spinner /> : <Upload />}
-                {isImporting ? 'Importing…' : 'Import'}
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
+              noValidate
+              onSubmit={form.handleSubmit(handleImport, handleInvalid)}
+              className="w-full"
+            >
+              <InputGroup className="mx-auto max-w-2xl bg-background">
+                <InputGroupInput
+                  type="url"
+                  aria-label="Media URL"
+                  placeholder={urlPlaceholder}
+                  autoComplete="off"
+                  spellCheck={false}
+                  {...urlField}
+                  disabled={isImporting}
+                />
+                <InputGroupAddon align="inline-end">
+                  <InputGroupButton
+                    type="submit"
+                    variant="outline"
+                    disabled={isImporting}
+                    aria-busy={isImporting}
+                    className="h-full px-5"
+                  >
+                    {isImporting ? <Spinner /> : <Upload />}
+                    {isImporting ? 'Importing…' : 'Import'}
+                  </InputGroupButton>
+                </InputGroupAddon>
+              </InputGroup>
+            </form>
+          </Form>
 
           <div className="flex w-full flex-col items-center text-center">
             <p className="text-sm text-muted-foreground">{urlHelpText}</p>

package/dist/assets/adapters/next/templates/init/components/shared/search-input.tsx

@@ -40,7 +40,11 @@ export function SearchInput({
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="flex w-full items-center">
+      <form
+        autoComplete="off"
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full items-center"
+      >
         <FormField
           control={form.control}
           name="search"

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">
@@ -58,21 +77,12 @@ export function ForgotPasswordForm({ className, ...props }: React.ComponentProps
             />
           </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">
@@ -63,67 +91,63 @@ export function LoginForm({ className, ...props }: React.ComponentProps<'div'>)
               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">
-                  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}
                       />