betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/pages/minimal-account-shell.tsx

@@ -0,0 +1,25 @@
+import { AdminSignOut } from '@admin/components/layouts/admin-sign-out'
+import Link from 'next/link'
+
+export function MinimalAccountShell({
+  name,
+  children
+}: {
+  name: string
+  children: React.ReactNode
+}) {
+  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="/admin/profile"
+          className="text-sm font-medium hover:text-foreground/80 transition-colors"
+        >
+          {name}
+        </Link>
+        <AdminSignOut mode="button" />
+      </header>
+      <div className="flex-1">{children}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,281 @@
+'use client'
+
+import { invalidateUsersCache, isEmailConfigured, updateEmail } from '@admin/actions/profile'
+import { authClient } from '@admin/auth/client'
+import { MediaGalleryField } from '@admin/components/custom/media-gallery-field'
+import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
+import { Button } from '@admin/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@admin/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { LoaderCircle } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+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>
+
+interface ProfileFormProps {
+  user: {
+    name: string
+    email: string
+    image: string | null
+  }
+}
+
+export function ProfileForm({ user }: ProfileFormProps) {
+  const router = useRouter()
+  const [profilePending, startProfileTransition] = React.useTransition()
+  const [resetPending, startResetTransition] = React.useTransition()
+
+  const profileForm = useForm<ProfileValues>({
+    resolver: standardSchemaResolver(profileSchema),
+    defaultValues: {
+      name: user.name,
+      email: user.email,
+      image: user.image ?? '',
+      currentPasswordForEmail: ''
+    }
+  })
+
+  const emailDirty = profileForm.watch('email') !== user.email
+  const imageValue = profileForm.watch('image')
+
+  function onProfileSubmit(values: ProfileValues) {
+    startProfileTransition(async () => {
+      try {
+        const { error } = await authClient.updateUser({
+          name: values.name,
+          image: values.image ?? null
+        })
+
+        if (error) {
+          toast.error(error.message || 'Failed to update profile')
+          return
+        }
+
+        await invalidateUsersCache()
+
+        if (values.email !== user.email) {
+          if (!values.currentPasswordForEmail) {
+            profileForm.setError('currentPasswordForEmail', {
+              message: 'Password is required to change email'
+            })
+            return
+          }
+
+          const result = await updateEmail(values.email, values.currentPasswordForEmail)
+
+          if (!result.success) {
+            toast.error(result.error || 'Failed to update email')
+            return
+          }
+
+          await authClient.getSession({ query: { disableCookieCache: true } })
+        }
+
+        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')
+      }
+    })
+  }
+
+  function handleResetPassword() {
+    startResetTransition(async () => {
+      try {
+        const emailReady = await isEmailConfigured()
+        if (!emailReady) {
+          toast.error('No email provider is configured. Add one to enable password reset emails.')
+          return
+        }
+        const { error } = await authClient.requestPasswordReset({
+          email: user.email,
+          redirectTo: '/admin/reset-password'
+        })
+        if (error) {
+          toast.error(error.message || 'Failed to send reset link')
+          return
+        }
+        toast.success('Check your email for a password reset link')
+      } catch {
+        toast.error('An error occurred while sending the reset link')
+      }
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <Form {...profileForm}>
+        <form onSubmit={profileForm.handleSubmit(onProfileSubmit)}>
+          <Card>
+            <CardHeader>
+              <div className="flex items-center gap-4 pl-1">
+                <Avatar className="size-12">
+                  <AvatarImage src={imageValue || undefined} />
+                  <AvatarFallback className="text-lg font-semibold">
+                    {user.name?.charAt(0) ?? '?'}
+                  </AvatarFallback>
+                </Avatar>
+                <div>
+                  <CardTitle>Profile</CardTitle>
+                  <CardDescription>Update your name, email, and profile picture</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <FormField
+                control={profileForm.control}
+                name="image"
+                render={({ field: formField }) => (
+                  <FormItem>
+                    <FormLabel>Profile Picture</FormLabel>
+                    <FormControl>
+                      <MediaGalleryField
+                        value={formField.value}
+                        onChange={formField.onChange}
+                        onBlur={formField.onBlur}
+                        disabled={profilePending}
+                        accept="image/*"
+                        valueMode="url"
+                      />
+                    </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>
+                  )}
+                />
+              )}
+            </CardContent>
+            <CardFooter>
+              <Button
+                type="submit"
+                disabled={profilePending || !profileForm.formState.isDirty}
+                className="ml-auto min-w-25"
+              >
+                {profilePending && <LoaderCircle className="animate-spin" />}
+                {profilePending ? 'Saving...' : 'Save'}
+              </Button>
+            </CardFooter>
+          </Card>
+        </form>
+      </Form>
+
+      <Card>
+        <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"
+            className="ml-auto min-w-25"
+            disabled={resetPending}
+            onClick={handleResetPassword}
+          >
+            {resetPending && <LoaderCircle className="animate-spin" />}
+            {resetPending ? 'Sending...' : 'Reset Password'}
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/profile/profile-page.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 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
+
+  return (
+    <>
+      {showPageHeader && <PageHeader title="Profile" />}
+      <main className="container mx-auto max-w-5xl w-full 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/reset-password-form.tsx

@@ -0,0 +1,161 @@
+'use client'
+
+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 { Input } from '@admin/components/ui/input'
+import { cn } from '@admin/utils/shared/cn'
+import { LoaderCircle } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { createSerializer, parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
+import * as React from 'react'
+
+const serializeLoginUrl = createSerializer({
+  reset: parseAsStringLiteral(['success'])
+})
+
+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()
+
+  if (!token) {
+    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">
+              <Image
+                src="https://assets.betterstart.dev/assets/placeholder.png"
+                alt=""
+                fill
+                sizes="(min-width: 768px) 42vw, 0px"
+                className="object-cover dark:brightness-[0.2] dark:grayscale"
+              />
+            </div>
+            <div 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">Invalid reset link</h1>
+                  <p className="text-balance text-muted-foreground">
+                    This password reset link is invalid or has expired. Please request a new one.
+                  </p>
+                </div>
+                <Link
+                  href="/admin/forgot-password"
+                  className="text-sm underline-offset-4 hover:underline"
+                >
+                  Request a new reset link
+                </Link>
+              </FieldGroup>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  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
+    }
+
+    startTransition(async () => {
+      try {
+        const { error } = await authClient.resetPassword({
+          newPassword,
+          token
+        })
+        if (error) {
+          setError(error.message || 'Failed to reset password')
+          return
+        }
+        await authClient.getSession({ query: { disableCookieCache: true } })
+        router.push(serializeLoginUrl('/admin/login', { reset: 'success' }))
+      } 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">
+            <Image
+              src="https://assets.betterstart.dev/assets/placeholder.png"
+              alt=""
+              fill
+              sizes="(min-width: 768px) 42vw, 0px"
+              className="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">Reset password</h1>
+                <p className="text-balance text-muted-foreground">Enter your new password below</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="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}>
+                    {isPending && <LoaderCircle className="animate-spin" />}
+                    {isPending ? 'Resetting...' : 'Reset Password'}
+                  </Button>
+                </Field>
+              </div>
+            </FieldGroup>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,26 @@
+export function ResetPasswordPageSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-lg border bg-card">
+      <div className="grid md:grid-cols-[5fr_7fr]">
+        <div className="hidden min-h-[520px] bg-muted md:block" />
+        <div className="flex min-h-[520px] flex-col gap-10 p-6 md:p-20">
+          <div className="space-y-3">
+            <div className="h-6 w-36 animate-pulse rounded-md bg-muted" />
+            <div className="h-4 w-56 animate-pulse rounded-md bg-muted" />
+          </div>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <div className="h-4 w-28 animate-pulse rounded-md bg-muted" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+            </div>
+            <div className="space-y-2">
+              <div className="h-4 w-32 animate-pulse rounded-md bg-muted" />
+              <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+            </div>
+            <div className="h-10 w-full animate-pulse rounded-md bg-muted" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { ResetPasswordForm } from './reset-password-form'
+import { ResetPasswordPageSkeleton } from './reset-password-page-skeleton'
+
+export const metadata: Metadata = {
+  title: 'Reset Password',
+  robots: { index: false, follow: false }
+}
+
+export default function ResetPasswordPage() {
+  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 fallback={<ResetPasswordPageSkeleton />}>
+          <ResetPasswordForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}