@betterstart/cli 0.1.69 → 0.1.70

package/templates/init/pages/account-layout.tsx

@@ -0,0 +1,63 @@
+import { Suspense } from 'react'
+import { getSession } from '@cms/auth/middleware'
+import { cms } from '@cms/data/cms'
+import { CmsSidebar } from '@cms/components/layout/cms-sidebar'
+import { CmsSignOut } from '@cms/components/layout/cms-sign-out'
+import { SidebarInset, SidebarProvider } from '@cms/components/ui/sidebar'
+import { UserRole } from '@cms/types/auth'
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
+
+export default function AccountLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center h-screen">
+          <div className="text-muted-foreground">Loading...</div>
+        </div>
+      }
+    >
+      <AccountShell>{children}</AccountShell>
+    </Suspense>
+  )
+}
+
+async function AccountShell({ children }: { children: React.ReactNode }) {
+  const session = await getSession()
+
+  if (!session?.user) {
+    redirect('/cms/login')
+  }
+
+  const role = session.user.role as string
+
+  // Admin/Editor get the full dashboard shell with sidebar
+  if (role === UserRole.ADMIN || role === UserRole.EDITOR) {
+    return (
+      <SidebarProvider>
+        <CmsSidebar />
+        <SidebarInset>
+          <main>{children}</main>
+        </SidebarInset>
+      </SidebarProvider>
+    )
+  }
+
+  // Member gets a minimal shell
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="sticky top-0 z-50 flex h-14 items-center justify-between border-b bg-background px-6">
+        <Link
+          href="/cms"
+          className="text-sm font-medium hover:text-foreground/80 transition-colors"
+        >
+          {cms.name}
+        </Link>
+        <CmsSignOut />
+      </header>
+      <div className="flex-1">
+        {children}
+      </div>
+    </div>
+  )
+}

package/templates/init/pages/authenticated-layout.tsx

@@ -0,0 +1,26 @@
+import { Suspense } from 'react'
+import { requireRole } from '@cms/auth/middleware'
+import { CmsSidebar } from '@cms/components/layout/cms-sidebar'
+import { SidebarInset, SidebarProvider } from '@cms/components/ui/sidebar'
+import { UserRole } from '@cms/types/auth'
+
+export default function CmsAuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <Suspense fallback={<div className="flex items-center justify-center h-screen"><div className="text-muted-foreground">Loading...</div></div>}>
+      <AuthenticatedShell>{children}</AuthenticatedShell>
+    </Suspense>
+  )
+}
+
+async function AuthenticatedShell({ children }: { children: React.ReactNode }) {
+  await requireRole([UserRole.ADMIN, UserRole.EDITOR])
+
+  return (
+    <SidebarProvider>
+      <CmsSidebar />
+      <SidebarInset>
+        <main>{children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/templates/init/pages/cms-layout.tsx

@@ -0,0 +1,16 @@
+import '@cms/cms-globals.css'
+import { CmsProviders } from '@cms/components/layout/cms-providers'
+import { GeistSans } from 'geist/font/sans'
+import { GeistMono } from 'geist/font/mono'
+
+export default function CmsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <CmsProviders>
+      <div
+        className={`cms-root min-h-screen antialiased ${GeistSans.variable} ${GeistMono.variable}`}
+      >
+        {children}
+      </div>
+    </CmsProviders>
+  )
+}

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

@@ -0,0 +1,91 @@
+import { PageHeader } from '@cms/components/shared/page-header'
+import { Badge } from '@cms/components/ui/badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@cms/components/ui/card'
+import { FileText, Settings, Users } from 'lucide-react'
+import Link from 'next/link'
+
+const quickLinks = [
+  {
+    title: 'Users',
+    description: 'Manage admin users and roles',
+    href: '/cms/users',
+    icon: Users,
+  },
+  {
+    title: 'Settings',
+    description: 'Configure CMS settings',
+    href: '/cms/settings',
+    icon: Settings,
+  },
+  {
+    title: 'Generate',
+    description: 'Add a new resource from a schema',
+    href: '#',
+    icon: FileText,
+    hint: 'npx betterstart generate <schema>',
+  },
+]
+
+export default function DashboardPage() {
+  return (
+    <div className="flex flex-col">
+      <PageHeader title="Dashboard" />
+      <div className="p-6 space-y-6">
+        <div className="grid gap-4 md:grid-cols-3">
+          {quickLinks.map((link) => (
+            <Link key={link.title} href={link.href}>
+              <Card className="hover:bg-accent/50 transition-colors h-full">
+                <CardHeader className="pb-2">
+                  <div className="flex items-center gap-2">
+                    <link.icon className="size-4 text-muted-foreground" />
+                    <CardTitle className="text-sm font-medium">{link.title}</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription>{link.description}</CardDescription>
+                  {link.hint && (
+                    <code className="mt-2 block rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground">
+                      {link.hint}
+                    </code>
+                  )}
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-sm font-medium">Environment</CardTitle>
+            <CardDescription>Current configuration status</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Environment</span>
+              <Badge variant="outline">
+                {process.env.NODE_ENV === 'production' ? 'Production' : 'Development'}
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Database</span>
+              <Badge variant="outline">
+                {process.env.BETTERSTART_DATABASE_URL ? 'Connected' : 'Not configured'}
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Storage (R2)</span>
+              <Badge variant="outline">
+                {process.env.BETTERSTART_R2_BUCKET_NAME ? 'Configured' : 'Not configured'}
+              </Badge>
+            </div>
+            <div className="flex items-center justify-between">
+              <span className="text-sm text-muted-foreground">Email (Resend)</span>
+              <Badge variant="outline">
+                {process.env.BETTERSTART_RESEND_API_KEY ? 'Configured' : 'Not configured'}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,117 @@
+'use client'
+
+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 { useRouter } from 'next/navigation'
+import * as React from 'react'
+
+export function LoginForm({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const router = useRouter()
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const [error, setError] = React.useState<string | null>(null)
+  const [isPending, startTransition] = React.useTransition()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    startTransition(async () => {
+      try {
+        const result = await authClient.signIn.email({
+          email,
+          password,
+        })
+
+        if (result.error) {
+          setError(result.error.message || 'Invalid email or password')
+          return
+        }
+
+        router.push('/cms')
+        router.refresh()
+      } 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>
+          <form onSubmit={handleSubmit} className="p-6 md:p-20">
+            <FieldGroup className="pb-12 gap-10">
+              <div className="flex flex-col items-start">
+                <h1 className="text-xl font-medium">Welcome back</h1>
+                <p className="text-balance text-muted-foreground">
+                  Login to your account
+                </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>
+                  <div className="flex items-center">
+                    <FieldLabel htmlFor="password">Password</FieldLabel>
+                  </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}>
+                    {isPending && <LoaderCircle className="animate-spin" />}
+                    {isPending ? 'Signing in...' : 'Login'}
+                  </Button>
+                </Field>
+              </div>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,17 @@
+import type { Metadata } from 'next'
+import { LoginForm } from './login-form'
+
+export const metadata: Metadata = {
+  title: 'CMS Login',
+  robots: { index: false, follow: false },
+}
+
+export default function LoginPage() {
+  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 />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,361 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+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 { Avatar, AvatarFallback, AvatarImage } from '@cms/components/ui/avatar'
+import { Button } from '@cms/components/ui/button'
+import { Input } from '@cms/components/ui/input'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@cms/components/ui/form'
+import { ImageUploadField } from '@cms/components/ui/image-upload-field'
+import { Separator } from '@cms/components/ui/separator'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+
+const profileSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().email('Invalid email address'),
+  image: z
+    .string()
+    .transform((val) => (val === '' ? undefined : val))
+    .optional(),
+  currentPasswordForEmail: z.string().optional(),
+})
+
+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
+    email: string
+    image: string | null
+  }
+}
+
+export function ProfileForm({ user }: ProfileFormProps) {
+  const router = useRouter()
+  const [profilePending, setProfilePending] = useState(false)
+  const [passwordPending, setPasswordPending] = useState(false)
+
+  const profileForm = useForm<ProfileValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      name: user.name,
+      email: user.email,
+      image: user.image ?? '',
+      currentPasswordForEmail: '',
+    },
+  })
+
+  const passwordForm = useForm<PasswordValues>({
+    resolver: zodResolver(passwordSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: '',
+    },
+  })
+
+  const emailDirty = profileForm.watch('email') !== user.email
+
+  async function onProfileSubmit(values: ProfileValues) {
+    setProfilePending(true)
+
+    try {
+      // Update name and image via Better Auth
+      const { error } = await authClient.updateUser({
+        name: values.name,
+        image: values.image ?? null,
+      })
+
+      if (error) {
+        toast.error(error.message || 'Failed to update profile')
+        setProfilePending(false)
+        return
+      }
+
+      // If email changed, update via server action
+      if (values.email !== user.email) {
+        if (!values.currentPasswordForEmail) {
+          profileForm.setError('currentPasswordForEmail', {
+            message: 'Password is required to change email',
+          })
+          setProfilePending(false)
+          return
+        }
+
+        const result = await updateEmail(
+          values.email,
+          values.currentPasswordForEmail
+        )
+
+        if (!result.success) {
+          toast.error(result.error || 'Failed to update email')
+          setProfilePending(false)
+          return
+        }
+      }
+
+      toast.success('Profile updated successfully')
+      profileForm.reset({
+        name: values.name,
+        email: values.email,
+        image: values.image ?? '',
+        currentPasswordForEmail: '',
+      })
+      router.refresh()
+    } catch {
+      toast.error('An error occurred while updating your profile')
+    } finally {
+      setProfilePending(false)
+    }
+  }
+
+  async function onPasswordSubmit(values: PasswordValues) {
+    setPasswordPending(true)
+
+    try {
+      const { error } = await authClient.changePassword({
+        currentPassword: values.currentPassword,
+        newPassword: values.newPassword,
+      })
+
+      if (error) {
+        toast.error(error.message || 'Failed to change password')
+        setPasswordPending(false)
+        return
+      }
+
+      toast.success('Password changed successfully')
+      passwordForm.reset()
+    } catch {
+      toast.error('An error occurred while changing your password')
+    } finally {
+      setPasswordPending(false)
+    }
+  }
+
+  const imageValue = profileForm.watch('image')
+
+  return (
+    <div className="space-y-6">
+      {/* Profile Section */}
+      <Form {...profileForm}>
+        <form
+          onSubmit={profileForm.handleSubmit(onProfileSubmit)}
+          className="space-y-6 p-6 rounded-2xl border bg-card"
+        >
+          <div className="flex items-center gap-4">
+            <Avatar className="size-16">
+              <AvatarImage src={imageValue || undefined} />
+              <AvatarFallback className="text-lg font-semibold">
+                {user.name?.charAt(0) ?? '?'}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <h2 className="text-lg font-semibold">Profile</h2>
+              <p className="text-sm text-muted-foreground">
+                Update your name, email, and profile picture
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          <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"
+            render={({ field: formField }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    placeholder="Your name"
+                    disabled={profilePending}
+                    {...formField}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={profileForm.control}
+            name="email"
+            render={({ field: formField }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="you@example.com"
+                    disabled={profilePending}
+                    {...formField}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {emailDirty && (
+            <FormField
+              control={profileForm.control}
+              name="currentPasswordForEmail"
+              render={({ field: formField }) => (
+                <FormItem>
+                  <FormLabel>Current Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Enter current password to change email"
+                      autoComplete="current-password"
+                      disabled={profilePending}
+                      {...formField}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          <div className="flex justify-end">
+            <Button type="submit" disabled={profilePending}>
+              {profilePending ? 'Saving...' : 'Save Profile'}
+            </Button>
+          </div>
+        </form>
+      </Form>
+
+      {/* Password Section */}
+      <Form {...passwordForm}>
+        <form
+          onSubmit={passwordForm.handleSubmit(onPasswordSubmit)}
+          className="space-y-6 p-6 rounded-2xl border bg-card"
+        >
+          <div>
+            <h2 className="text-lg font-semibold">Change Password</h2>
+            <p className="text-sm text-muted-foreground">
+              Update your password to keep your account secure
+            </p>
+          </div>
+
+          <Separator />
+
+          <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>
+            )}
+          />
+
+          <div className="flex justify-end">
+            <Button type="submit" disabled={passwordPending}>
+              {passwordPending ? 'Changing...' : 'Change Password'}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+}