@betterstart/cli 0.1.81 → 0.1.82

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

@@ -0,0 +1,159 @@
+'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 Link from 'next/link'
+import { useRouter, useSearchParams } from 'next/navigation'
+import * as React from 'react'
+
+export function ResetPasswordForm({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const token = searchParams.get('token')
+
+  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">
+              <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">
+              <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="/cms/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
+        }
+        router.push('/cms/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">
+            <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">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/templates/init/pages/reset-password-page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next'
+import { Suspense } from 'react'
+import { ResetPasswordForm } from './reset-password-form'
+
+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>
+          <ResetPasswordForm />
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/templates/ui/button.tsx

@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default:
-          "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+          "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         xs: "h-7 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-9 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         lg: "h-12 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",

package/templates/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl material-md",
+        "group/card flex flex-col gap-6 overflow-hidden rounded bg-card py-6 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t *:[img:last-child]:rounded-b material-sm",
         className
       )}
       {...props}
@@ -84,7 +84,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "flex items-center border-t bg-muted/50 px-6 pt-4 pb-4.5 group-data-[size=sm]/card:p-3",
+        "flex items-center border-t bg-background px-6 pt-4 pb-4.5 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}

package/templates/ui/curriculum-editor.tsx

@@ -296,7 +296,7 @@ const SequentialEditor = ({
       >
         {items.map((item, index) => (
           <AccordionItem key={index} value={`item-${index + 1}`} className="p-0 border-none">
-            <div className="space-y-5 rounded-lg border p-4 bg-secondary/50 corner-squircle [&_h3]:m-0 w-full">
+            <div className="space-y-5 rounded-lg border p-4 bg-background corner-squircle [&_h3]:m-0 w-full">
               <AccordionTrigger className="flex items-center p-0 justify-between w-full">
                 <div className="flex w-full items-center justify-between">
                   <h4 className="text-sm font-medium w-full">
@@ -438,7 +438,7 @@ const WeeklyEditor = ({
             value={`week-${weekIndex + 1}`}
             className="p-0 border-none"
           >
-            <div className="space-y-5 rounded-lg border p-4 bg-secondary/50 corner-squircle [&_h3]:m-0 w-full">
+            <div className="space-y-5 rounded-lg border p-4 bg-background corner-squircle [&_h3]:m-0 w-full">
               <AccordionTrigger className="flex items-center p-0 justify-between w-full">
                 <div className="flex w-full items-center justify-between">
                   <div className="flex flex-col items-start">

package/templates/ui/image-upload-field.tsx

@@ -277,7 +277,7 @@ export function ImageUploadField({
 
         {/* Preview or Upload Area */}
         {displayPreview ? (
-          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group">
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-background h-50 flex items-center justify-center p-10 group">
             <img
               src={displayPreview}
               alt="Preview"
@@ -320,7 +320,7 @@ export function ImageUploadField({
             onClick={handleClick}
             disabled={disabled || isUploading}
             className={cn(
-              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group',
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-background h-50 flex items-center justify-center p-10 group',
               'hover:border-primary/50 transition-colors',
               'flex flex-col items-center justify-center gap-2 p-8',
               'disabled:opacity-50 disabled:cursor-not-allowed'

package/templates/ui/input.tsx

@@ -1,13 +1,14 @@
-import { cn } from '@cms/utils/cn'
-import type * as React from 'react'
+import * as React from "react"
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+import { cn } from "@cms/utils/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-10 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        "h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

package/templates/ui/media-upload-field.tsx

@@ -209,7 +209,7 @@ export function MediaUploadField({
 
         {/* Preview or Upload Area */}
         {previewUrl ? (
-          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50 group">
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-background group">
             {mediaType === 'video' ? (
               <video
                 src={previewUrl}
@@ -265,7 +265,7 @@ export function MediaUploadField({
             onClick={handleClick}
             disabled={disabled || isUploading}
             className={cn(
-              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50',
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-background',
               'hover:border-primary/50 transition-colors',
               'flex flex-col items-center justify-center gap-2 p-8',
               'disabled:opacity-50 disabled:cursor-not-allowed'

package/templates/ui/placeholder.tsx

@@ -12,7 +12,7 @@ export function Placeholder({ label, description, action, className, ...props }:
   return (
     <div
       className={cn(
-        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg corner-squircle p-8 bg-secondary/50',
+        'border flex items-center flex-col gap-2 border-dashed border-border rounded-lg corner-squircle p-8 bg-background',
         className
       )}
       {...props}

package/templates/ui/sidebar.tsx

@@ -454,7 +454,7 @@ const sidebarMenuButtonVariants = cva(
           'bg-background hover:bg-sidebar-accent hover:text-sidebar-primary shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
       },
       size: {
-        default: 'h-9 text-sm',
+        default: 'h-8 text-sm',
         sm: 'h-7 text-xs',
         lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!'
       }

package/templates/ui/video-upload-field.tsx

@@ -283,7 +283,7 @@ export function VideoUploadField({
 
         {/* Preview or Upload Area */}
         {displayPreview ? (
-          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary h-50 flex items-center justify-center p-10 group overflow-hidden">
+          <div className="relative w-full rounded-lg corner-squircle border border-dashed border-border bg-background h-50 flex items-center justify-center p-10 group overflow-hidden">
             <video
               src={displayPreview}
               controls
@@ -328,7 +328,7 @@ export function VideoUploadField({
             onClick={handleClick}
             disabled={disabled || isUploading}
             className={cn(
-              'w-full rounded-lg corner-squircle border border-dashed border-border bg-secondary/50',
+              'w-full rounded-lg corner-squircle border border-dashed border-border bg-background',
               'hover:border-primary/50 transition-colors',
               'flex flex-col items-center justify-center gap-2 p-8',
               'disabled:opacity-50 disabled:cursor-not-allowed'