@betterstart/cli 0.1.81 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@betterstart/cli",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "description": "Scaffold a full-featured CMS into any Next.js 16 application",
   "type": "module",
   "main": "./dist/index.js",

package/templates/init/components/data-table/data-table.tsx

@@ -133,7 +133,7 @@ export function DataTable<TData, TValue>({
     <div className="space-y-6">
       <div className="bg-card border overflow-hidden rounded-lg corner-squircle">
         <Table>
-          <TableHeader className="bg-secondary">
+          <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (

package/templates/init/components/layout/cms-search.tsx

@@ -3,17 +3,18 @@ import { Command, Search } from 'lucide-react'
 
 export const CmsSearch = () => {
   return (
-    <div className="flex items-center gap-2 relative w-full max-w-[240px]">
+    <div className="flex items-center gap-2 relative w-full max-w-60">
       <Button
         variant="outline"
-        className="w-full text-left items-center pr-2! pl-3 py-0 rounded-lg bg-white"
+        size="sm"
+        className="w-full text-left items-center pr-2! pl-3.5 py-0 rounded-full bg-white"
       >
-        <Search className="shrink-0 size-3.5 -ml-0.5 text-muted-foreground/70" />
-        <span className="w-full font-normal text-sm text-muted-foreground/70 [text-box-trim:trim-both]">
+        <Search className="shrink-0 size-3.5 -ml-0.5 text-muted-foreground" />
+        <span className="w-full font-normal text-sm text-muted-foreground [text-box-trim:trim-both]">
           Search
         </span>
         <div className="flex items-center gap-1 py-0.5 border rounded-full corner-squircle px-2 border-border bg-background">
-          <Command className="size-3! text-muted-foreground" />
+          <Command className="size-3 text-muted-foreground" />
           <span className="font-mono text-xs font-medium">K</span>
         </div>
       </Button>

package/templates/init/components/layout/cms-sidebar.tsx

@@ -56,9 +56,6 @@ export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
   const user = session?.user ?? null
   const groups = groupNavItems(cmsNavigation)
 
-  console.log({ settings });
-
-
   return (
     <Sidebar collapsible="icon" {...props}>
       <SidebarHeader className="border-b border-border h-14 items-center flex w-full">
@@ -79,7 +76,7 @@ export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
         </div>
       </SidebarHeader>
       <SidebarContent className='pb-2'>
-        <SidebarGroup className="pb-1">
+        <SidebarGroup className="pb-0">
           <CmsSearch />
         </SidebarGroup>
 
@@ -141,12 +138,11 @@ export async function CmsSidebar(props: React.ComponentProps<typeof Sidebar>) {
                     </div>
 
                     <div className="group-data-[collapsible=icon]:hidden">
-                      <span className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'rounded-full group-hover:bg-white size-6!')}>
-                        <Ellipsis strokeWidth={2} />
+                      <span className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'rounded-full group-hover:bg-white size-7')}>
+                        <Ellipsis strokeWidth={2} className='size-4' />
                       </span>
                     </div>
                   </Button>
-
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-68 p-0">
                   <DropdownMenuGroup className='py-2 border-b border-border px-2'>

package/templates/init/components/shared/page-header.tsx

@@ -8,16 +8,16 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, children, search, actions, back }: PageHeaderProps) {
   return (
-    <div className="grid grid-cols-3 items-center justify-between w-full h-14 px-4 border-b border-border sticky top-0 bg-background/60 backdrop-blur-md z-10">
-      <div className="flex items-center justify-start gap-2 w-full">{back && back}</div>
-      <div className="flex items-center justify-center gap-2">
+    <header className="grid grid-cols-3 items-center h-14 px-6 border-b border-border fixed top-0 bg-background/60 backdrop-blur-md z-10 left-0 pl-[calc(var(--sidebar-width)+calc(var(--spacing)*6))] right-0 w-svw">
+      <div className="flex items-center justify-start gap-2 w-full">{back}</div>
+      <div className="flex items-center justify-center gap-2 w-full">
         <h2 className="text-sm font-medium tracking-tight">{title}</h2>
       </div>
-      <div className="flex items-center justify-end gap-2">
+      <div className="flex items-center justify-end gap-2 w-full">
         {children && children}
         {search && search}
         {actions && actions}
       </div>
-    </div>
+    </header>
   )
 }

package/templates/init/data/navigation.ts

@@ -24,16 +24,16 @@ export const cmsNavigation: CmsNavigationItem[] = [
     href: '/cms/media',
     icon: ImagePlay,
   },
-  {
-    label: 'Categories',
-    href: '/cms/categories',
-    icon: Tag,
-    group: 'Blog',
-  },
   {
     label: 'Posts',
     href: '/cms/posts',
     icon: FileText,
     group: 'Blog',
   },
+  {
+    label: 'Categories',
+    href: '/cms/categories',
+    icon: Tag,
+    group: 'Blog',
+  },
 ]

package/templates/init/lib/actions/profile.ts

@@ -6,6 +6,10 @@ import db from '@cms/db'
 import { user } from '@cms/db/schema'
 import { eq } from 'drizzle-orm'
 
+export async function isEmailConfigured(): Promise<boolean> {
+  return !!process.env.BETTERSTART_RESEND_API_KEY
+}
+
 export interface UpdateEmailResult {
   success: boolean
   error?: string

package/templates/init/lib/auth/auth.ts

@@ -3,6 +3,7 @@ import * as schema from '@cms/db/schema'
 import { betterAuth } from 'better-auth'
 import { drizzleAdapter } from 'better-auth/adapters/drizzle'
 import { toNextJsHandler } from 'better-auth/next-js'
+import { Resend } from 'resend'
 
 export { toNextJsHandler }
 
@@ -22,6 +23,22 @@ export const auth = betterAuth({
   emailAndPassword: {
     enabled: true,
     minPasswordLength: 8,
+    revokeSessionsOnPasswordReset: true,
+    sendResetPassword: async ({ user, url }: { user: { email: string; name: string }; url: string }) => {
+      const apiKey = process.env.BETTERSTART_RESEND_API_KEY
+      if (!apiKey) {
+        throw new Error(
+          'Email is not configured. Set BETTERSTART_RESEND_API_KEY to enable password reset emails.'
+        )
+      }
+      const resend = new Resend(apiKey)
+      await resend.emails.send({
+        from: process.env.BETTERSTART_EMAIL_FROM || 'noreply@yourdomain.com',
+        to: user.email,
+        subject: 'Reset your password',
+        html: `<p>Hi ${user.name},</p><p>Click the link below to reset your password:</p><p><a href="${url}">Reset Password</a></p><p>This link will expire in 1 hour. If you didn't request this, you can safely ignore this email.</p>`,
+      })
+    },
   },
   session: {
     expiresIn: 60 * 60 * 24 * 7, // 7 days

package/templates/init/pages/dashboard-page.tsx

@@ -28,7 +28,7 @@ const quickLinks = [
 
 export default function DashboardPage() {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col pt-14">
       <PageHeader title="Dashboard" />
       <div className="p-6 space-y-6">
         <div className="grid gap-4 md:grid-cols-3">

package/templates/init/pages/forgot-password-form.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { isEmailConfigured } from '@cms/actions/profile'
+import { authClient } from '@cms/auth/client'
+import { Button } from '@cms/components/ui/button'
+import { Card, CardContent } from '@cms/components/ui/card'
+import { Field, FieldGroup, FieldLabel } from '@cms/components/ui/field'
+import { Input } from '@cms/components/ui/input'
+import { cn } from '@cms/utils/cn'
+import { LoaderCircle } from 'lucide-react'
+import Link from 'next/link'
+import * as React from 'react'
+
+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 handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    startTransition(async () => {
+      try {
+        const emailReady = await isEmailConfigured()
+        if (!emailReady) {
+          setError(
+            'Email is not configured. Set BETTERSTART_RESEND_API_KEY to enable password reset emails.'
+          )
+          return
+        }
+        const { error } = await authClient.requestPasswordReset({
+          email,
+          redirectTo: '/cms/reset-password',
+        })
+        if (error) {
+          setError(error.message || 'Failed to send reset link')
+          return
+        }
+        setSuccess(true)
+      } catch {
+        setError('An error occurred. Please try again.')
+      }
+    })
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-6', className)} {...props}>
+      <Card className="overflow-hidden p-0">
+        <CardContent className="grid p-0 md:grid-cols-[5fr_7fr]">
+          <div className="relative hidden bg-muted md:block">
+            <img
+              src="https://assets.betterstart.dev/assets/placeholder.png"
+              alt="Image"
+              className="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            />
+          </div>
+          <div className="p-6 md:p-20">
+            {success ? (
+              <FieldGroup className="pb-12 gap-10">
+                <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="/cms/login"
+                  className="text-sm underline-offset-4 hover:underline"
+                >
+                  Back to login
+                </Link>
+              </FieldGroup>
+            ) : (
+              <form onSubmit={handleSubmit}>
+                <FieldGroup className="pb-12 gap-10">
+                  <div className="flex flex-col items-start">
+                    <h1 className="text-xl font-medium">Forgot password</h1>
+                    <p className="text-balance text-muted-foreground">
+                      Enter your email and we&apos;ll send you a reset link
+                    </p>
+                  </div>
+                  {error ? (
+                    <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
+                      {error}
+                    </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 className="pt-4">
+                      <Button type="submit" disabled={isPending}>
+                        {isPending && (
+                          <LoaderCircle className="animate-spin" />
+                        )}
+                        {isPending ? 'Sending...' : 'Send Reset Link'}
+                      </Button>
+                    </Field>
+                    <Link
+                      href="/cms/login"
+                      className="text-sm text-center underline-offset-4 hover:underline"
+                    >
+                      Back to login
+                    </Link>
+                  </div>
+                </FieldGroup>
+              </form>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/templates/init/pages/forgot-password-page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { ForgotPasswordForm } from './forgot-password-form'
+
+export const metadata: Metadata = {
+  title: 'Forgot Password',
+  robots: { index: false, follow: false },
+}
+
+export default function ForgotPasswordPage() {
+  return (
+    <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>
+          <ForgotPasswordForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/templates/init/pages/login-form.tsx

@@ -11,7 +11,8 @@ import {
 import { Input } from '@cms/components/ui/input'
 import { cn } from '@cms/utils/cn'
 import { LoaderCircle } from 'lucide-react'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
 import * as React from 'react'
 
 export function LoginForm({
@@ -19,6 +20,8 @@ export function LoginForm({
   ...props
 }: React.ComponentProps<'div'>) {
   const router = useRouter()
+  const searchParams = useSearchParams()
+  const resetSuccess = searchParams.get('reset') === 'success'
   const [email, setEmail] = React.useState('')
   const [password, setPassword] = React.useState('')
   const [error, setError] = React.useState<string | null>(null)
@@ -67,6 +70,12 @@ export function LoginForm({
                   Login to your account
                 </p>
               </div>
+              {resetSuccess ? (
+                <div className="bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 text-sm p-3 rounded-md">
+                  Password reset successfully. Please log in with your new
+                  password.
+                </div>
+              ) : null}
               {error ? (
                 <div className="bg-destructive/10 text-destructive text-sm p-3 rounded-md">
                   {error}
@@ -89,6 +98,13 @@ export function LoginForm({
                 <Field>
                   <div className="flex items-center">
                     <FieldLabel htmlFor="password">Password</FieldLabel>
+                    <Link
+                      href="/cms/forgot-password"
+                      className="ml-auto text-sm underline-offset-4 hover:underline"
+                      tabIndex={-1}
+                    >
+                      Forgot password?
+                    </Link>
                   </div>
                   <Input
                     id="password"

package/templates/init/pages/login-page.tsx

@@ -1,4 +1,7 @@
 import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+import { Suspense } from 'react'
+import { getSession } from '@cms/auth/middleware'
 import { LoginForm } from './login-form'
 
 export const metadata: Metadata = {
@@ -6,11 +9,18 @@ export const metadata: Metadata = {
   robots: { index: false, follow: false },
 }
 
-export default function LoginPage() {
+export default async function LoginPage() {
+  const session = await getSession()
+  if (session?.user) {
+    redirect('/cms')
+  }
+
   return (
     <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">
-        <LoginForm />
+        <Suspense>
+          <LoginForm />
+        </Suspense>
       </div>
     </div>
   )

package/templates/init/pages/profile/profile-form.tsx

@@ -5,7 +5,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod/v3'
 import { authClient } from '@cms/auth/client'
-import { updateEmail } from '@cms/actions/profile'
+import { isEmailConfigured, updateEmail } from '@cms/actions/profile'
 import { Avatar, AvatarFallback, AvatarImage } from '@cms/components/ui/avatar'
 import { Button } from '@cms/components/ui/button'
 import { Input } from '@cms/components/ui/input'
@@ -42,19 +42,6 @@ const profileSchema = z.object({
 
 type ProfileValues = z.infer<typeof profileSchema>
 
-const passwordSchema = z
-  .object({
-    currentPassword: z.string().min(1, 'Current password is required'),
-    newPassword: z.string().min(8, 'Password must be at least 8 characters'),
-    confirmPassword: z.string().min(1, 'Please confirm your new password'),
-  })
-  .refine((data) => data.newPassword === data.confirmPassword, {
-    message: 'Passwords do not match',
-    path: ['confirmPassword'],
-  })
-
-type PasswordValues = z.infer<typeof passwordSchema>
-
 interface ProfileFormProps {
   user: {
     name: string
@@ -66,7 +53,7 @@ interface ProfileFormProps {
 export function ProfileForm({ user }: ProfileFormProps) {
   const router = useRouter()
   const [profilePending, setProfilePending] = useState(false)
-  const [passwordPending, setPasswordPending] = useState(false)
+  const [resetPending, setResetPending] = useState(false)
 
   const profileForm = useForm<ProfileValues>({
     resolver: zodResolver(profileSchema),
@@ -78,15 +65,6 @@ export function ProfileForm({ user }: ProfileFormProps) {
     },
   })
 
-  const passwordForm = useForm<PasswordValues>({
-    resolver: zodResolver(passwordSchema),
-    defaultValues: {
-      currentPassword: '',
-      newPassword: '',
-      confirmPassword: '',
-    },
-  })
-
   const emailDirty = profileForm.watch('email') !== user.email
   const imageValue = profileForm.watch('image')
 
@@ -141,27 +119,29 @@ export function ProfileForm({ user }: ProfileFormProps) {
     }
   }
 
-  async function onPasswordSubmit(values: PasswordValues) {
-    setPasswordPending(true)
-
+  async function handleResetPassword() {
+    setResetPending(true)
     try {
-      const { error } = await authClient.changePassword({
-        currentPassword: values.currentPassword,
-        newPassword: values.newPassword,
+      const emailReady = await isEmailConfigured()
+      if (!emailReady) {
+        toast.error(
+          'Email is not configured. Set BETTERSTART_RESEND_API_KEY to enable password reset emails.'
+        )
+        return
+      }
+      const { error } = await authClient.requestPasswordReset({
+        email: user.email,
+        redirectTo: '/cms/reset-password',
       })
-
       if (error) {
-        toast.error(error.message || 'Failed to change password')
-        setPasswordPending(false)
+        toast.error(error.message || 'Failed to send reset link')
         return
       }
-
-      toast.success('Password changed successfully')
-      passwordForm.reset()
+      toast.success('Check your email for a password reset link')
     } catch {
-      toast.error('An error occurred while changing your password')
+      toast.error('An error occurred while sending the reset link')
     } finally {
-      setPasswordPending(false)
+      setResetPending(false)
     }
   }
 
@@ -187,6 +167,27 @@ export function ProfileForm({ user }: ProfileFormProps) {
               </div>
             </CardHeader>
             <CardContent className="space-y-6">
+              <FormField
+                control={profileForm.control}
+                name="image"
+                render={({ field: formField }) => (
+                  <FormItem>
+                    <FormLabel>Profile Picture</FormLabel>
+                    <FormControl>
+                      <ImageUploadField
+                        value={formField.value}
+                        onChange={formField.onChange}
+                        onBlur={formField.onBlur}
+                        disabled={profilePending}
+                        maxSizeInMB={5}
+                        label=""
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <FormField
                 control={profileForm.control}
                 name="name"
@@ -246,27 +247,6 @@ export function ProfileForm({ user }: ProfileFormProps) {
                   )}
                 />
               )}
-
-              <FormField
-                control={profileForm.control}
-                name="image"
-                render={({ field: formField }) => (
-                  <FormItem>
-                    <FormLabel>Profile Picture</FormLabel>
-                    <FormControl>
-                      <ImageUploadField
-                        value={formField.value}
-                        onChange={formField.onChange}
-                        onBlur={formField.onBlur}
-                        disabled={profilePending}
-                        maxSizeInMB={5}
-                        label=""
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
             </CardContent>
             <CardFooter>
               <Button type="submit" disabled={profilePending || !profileForm.formState.isDirty} size="sm" className="ml-auto min-w-25">
@@ -278,84 +258,32 @@ export function ProfileForm({ user }: ProfileFormProps) {
         </form>
       </Form>
 
-      <Form {...passwordForm}>
-        <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)}>
-          <Card className="material-sm!">
-            <CardHeader>
-              <CardTitle>Change Password</CardTitle>
-              <CardDescription>
-                Update your password to keep your account secure
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <FormField
-                control={passwordForm.control}
-                name="currentPassword"
-                render={({ field: formField }) => (
-                  <FormItem>
-                    <FormLabel>Current Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Enter current password"
-                        autoComplete="current-password"
-                        disabled={passwordPending}
-                        {...formField}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={passwordForm.control}
-                name="newPassword"
-                render={({ field: formField }) => (
-                  <FormItem>
-                    <FormLabel>New Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Enter new password"
-                        autoComplete="new-password"
-                        disabled={passwordPending}
-                        {...formField}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={passwordForm.control}
-                name="confirmPassword"
-                render={({ field: formField }) => (
-                  <FormItem>
-                    <FormLabel>Confirm New Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Confirm new password"
-                        autoComplete="new-password"
-                        disabled={passwordPending}
-                        {...formField}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </CardContent>
-            <CardFooter>
-              <Button type="submit" disabled={passwordPending || !passwordForm.formState.isDirty} size="sm" className="ml-auto min-w-25">
-                {passwordPending ? 'Changing...' : 'Change Password'}
-              </Button>
-            </CardFooter>
-          </Card>
-        </form>
-      </Form>
+      <Card className="material-sm!">
+        <CardHeader>
+          <CardTitle>Reset Password</CardTitle>
+          <CardDescription>
+            Send a password reset link to your email address
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            A reset link will be sent to{' '}
+            <span className="font-medium text-foreground">{user.email}</span>
+          </p>
+        </CardContent>
+        <CardFooter>
+          <Button
+            type="button"
+            size="sm"
+            className="ml-auto min-w-25"
+            disabled={resetPending}
+            onClick={handleResetPassword}
+          >
+            {resetPending && <LoaderCircle className="animate-spin" />}
+            {resetPending ? 'Sending...' : 'Reset Password'}
+          </Button>
+        </CardFooter>
+      </Card>
     </div>
   )
 }