betterstart-cli 0.0.108 → 0.0.110

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/{login-page-rsc.tsx → login-page-content.tsx}

@@ -3,7 +3,7 @@ import { getAdminPostLoginPath } from '@admin/utils/auth/get-admin-post-login-pa
 import { redirect } from 'next/navigation'
 import { LoginForm } from './login-form'
 
-export async function LoginPageRsc() {
+export async function LoginPageContent() {
   const session = await getSession({ disableCookieCache: true })
 
   if (session?.user) {

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

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next'
 import { Suspense } from 'react'
-import { LoginPageRsc } from './login-page-rsc'
+import { LoginPageContent } from './login-page-content'
 import { LoginPageSkeleton } from './login-page-skeleton'
 
 export const metadata: Metadata = {
@@ -13,7 +13,7 @@ export default function LoginPage() {
     <div className="flex min-h-svh flex-col items-center justify-center bg-background p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <Suspense fallback={<LoginPageSkeleton />}>
-          <LoginPageRsc />
+          <LoginPageContent />
         </Suspense>
       </div>
     </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/profile/profile-page-content.tsx

@@ -0,0 +1,31 @@
+import { getSession } from '@admin/auth/middleware'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { UserRole } from '@admin/types/auth'
+import { redirect } from 'next/navigation'
+import { ProfileForm } from './profile-form'
+
+export async function ProfilePageContent() {
+  const session = await getSession()
+
+  if (!session?.user) {
+    redirect('/admin/login')
+  }
+
+  const showPageHeader =
+    session.user.role === UserRole.ADMIN || session.user.role === UserRole.EDITOR
+
+  return (
+    <>
+      {showPageHeader && <PageHeader title="Profile" />}
+      <main className="container mx-auto w-full max-w-5xl p-4">
+        <ProfileForm
+          user={{
+            name: session.user.name,
+            email: session.user.email,
+            image: session.user.image ?? null
+          }}
+        />
+      </main>
+    </>
+  )
+}

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

@@ -0,0 +1,9 @@
+export function ProfilePageSkeleton() {
+  return (
+    <main className="container mx-auto w-full max-w-5xl p-4">
+      <div className="flex h-48 items-center justify-center">
+        <div className="text-muted-foreground">Loading Profile…</div>
+      </div>
+    </main>
+  )
+}

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

@@ -1,31 +1,11 @@
-import { getSession } from '@admin/auth/middleware'
-import { PageHeader } from '@admin/components/shared/page-header'
-import { UserRole } from '@admin/types/auth'
-import { redirect } from 'next/navigation'
-import { ProfileForm } from './profile-form'
-
-export default async function ProfilePage() {
-  const session = await getSession()
-
-  if (!session?.user) {
-    redirect('/admin/login')
-  }
-
-  const showPageHeader =
-    session.user.role === UserRole.ADMIN || session.user.role === UserRole.EDITOR
+import * as React from 'react'
+import { ProfilePageContent } from './profile-page-content'
+import { ProfilePageSkeleton } from './profile-page-skeleton'
 
+export default function ProfilePage() {
   return (
-    <>
-      {showPageHeader && <PageHeader title="Profile" />}
-      <main className="container mx-auto w-full max-w-5xl p-4">
-        <ProfileForm
-          user={{
-            name: session.user.name,
-            email: session.user.email,
-            image: session.user.image ?? null
-          }}
-        />
-      </main>
-    </>
+    <React.Suspense fallback={<ProfilePageSkeleton />}>
+      <ProfilePageContent />
+    </React.Suspense>
   )
 }

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/audit-log/audit-log-page.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
-import { requireRole, UserRole } from '@admin/auth/middleware'
+import { UserRole } from '@admin/auth/middleware'
+import { RoleGate } from '@admin/components/layouts/role-gate'
 import { AuditLogPageContent } from './audit-log-page-content'
 import { AuditLogPageSkeleton } from './audit-log-page-skeleton'
 
-export default async function AuditLogPage() {
-  await requireRole([UserRole.ADMIN])
-
+export default function AuditLogPage() {
   return (
     <React.Suspense fallback={<AuditLogPageSkeleton />}>
-      <AuditLogPageContent />
+      <RoleGate roles={[UserRole.ADMIN]}>
+        <AuditLogPageContent />
+      </RoleGate>
     </React.Suspense>
   )
 }

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/forms/forms-settings-page.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
-import { requireRole, UserRole } from '@admin/auth/middleware'
+import { UserRole } from '@admin/auth/middleware'
+import { RoleGate } from '@admin/components/layouts/role-gate'
 import { FormsSettingsPageContent } from './forms-settings-page-content'
 import { FormsSettingsPageSkeleton } from './forms-settings-page-skeleton'
 
-export default async function FormsSettingsPage() {
-  await requireRole([UserRole.ADMIN, UserRole.EDITOR])
-
+export default function FormsSettingsPage() {
   return (
     <React.Suspense fallback={<FormsSettingsPageSkeleton />}>
-      <FormsSettingsPageContent />
+      <RoleGate roles={[UserRole.ADMIN, UserRole.EDITOR]}>
+        <FormsSettingsPageContent />
+      </RoleGate>
     </React.Suspense>
   )
 }