betterstart-cli 0.0.22 → 0.0.23

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

@@ -1,6 +1,11 @@
 'use client'
 
-import { invalidateUsersCache, isEmailConfigured, updateEmail } from '@admin/actions/profile'
+import {
+  changeOwnPassword,
+  invalidateUsersCache,
+  isEmailConfigured,
+  updateEmail
+} from '@admin/actions/profile'
 import { authClient } from '@admin/auth/client'
 import { MediaField } from '@admin/components/custom/media-field'
 import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
@@ -16,6 +21,7 @@ import {
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -40,7 +46,19 @@ const profileSchema = z.object({
   currentPasswordForEmail: z.string().optional()
 })
 
+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, 'Confirm the new password')
+  })
+  .refine((values) => values.newPassword === values.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword']
+  })
+
 type ProfileValues = z.infer<typeof profileSchema>
+type PasswordValues = z.infer<typeof passwordSchema>
 
 interface ProfileFormProps {
   user: {
@@ -53,6 +71,7 @@ interface ProfileFormProps {
 export function ProfileForm({ user }: ProfileFormProps) {
   const router = useRouter()
   const [profilePending, startProfileTransition] = React.useTransition()
+  const [passwordPending, startPasswordTransition] = React.useTransition()
   const [resetPending, startResetTransition] = React.useTransition()
 
   const profileForm = useForm<ProfileValues>({
@@ -64,6 +83,16 @@ export function ProfileForm({ user }: ProfileFormProps) {
       currentPasswordForEmail: ''
     }
   })
+  const passwordForm = useForm<PasswordValues>({
+    resolver: standardSchemaResolver(passwordSchema),
+    defaultValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    },
+    mode: 'onBlur',
+    reValidateMode: 'onChange'
+  })
 
   const emailDirty = profileForm.watch('email') !== user.email
   const imageValue = profileForm.watch('image')
@@ -115,6 +144,31 @@ export function ProfileForm({ user }: ProfileFormProps) {
     })
   }
 
+  function onPasswordSubmit(values: PasswordValues) {
+    startPasswordTransition(async () => {
+      try {
+        const result = await changeOwnPassword({
+          currentPassword: values.currentPassword,
+          newPassword: values.newPassword
+        })
+
+        if (!result.success) {
+          toast.error(result.error || 'Failed to change password')
+          return
+        }
+
+        toast.success('Password changed successfully')
+        passwordForm.reset({
+          currentPassword: '',
+          newPassword: '',
+          confirmPassword: ''
+        })
+      } catch {
+        toast.error('An error occurred while changing your password')
+      }
+    })
+  }
+
   function handleResetPassword() {
     startResetTransition(async () => {
       try {
@@ -253,6 +307,84 @@ export function ProfileForm({ user }: ProfileFormProps) {
         </form>
       </Form>
 
+      <Form {...passwordForm}>
+        <form onSubmit={passwordForm.handleSubmit(onPasswordSubmit)}>
+          <Card>
+            <CardHeader>
+              <CardTitle>Change Password</CardTitle>
+              <CardDescription>Update the password for your account</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              <FormField
+                control={passwordForm.control}
+                name="currentPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Current Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        autoComplete="current-password"
+                        disabled={passwordPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={passwordForm.control}
+                name="newPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>New Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        autoComplete="new-password"
+                        disabled={passwordPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>Use at least 8 characters.</FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={passwordForm.control}
+                name="confirmPassword"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Confirm Password</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="password"
+                        autoComplete="new-password"
+                        disabled={passwordPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </CardContent>
+            <CardFooter>
+              <Button
+                type="submit"
+                disabled={passwordPending || !passwordForm.formState.isDirty}
+                className="ml-auto min-w-25"
+              >
+                {passwordPending && <LoaderCircle className="animate-spin" />}
+                {passwordPending ? 'Changing...' : 'Change Password'}
+              </Button>
+            </CardFooter>
+          </Card>
+        </form>
+      </Form>
+
       <Card>
         <CardHeader>
           <CardTitle>Reset Password</CardTitle>

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

@@ -1,6 +1,6 @@
 export function ResetPasswordPageSkeleton() {
   return (
-    <div className="overflow-hidden rounded-lg border bg-card">
+    <div className="overflow-hidden rounded-sm 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">

package/dist/assets/adapters/next/templates/init/pages/users/change-password-dialog.tsx

@@ -0,0 +1,229 @@
+'use client'
+
+import { changeOwnPassword } from '@admin/actions/profile'
+import { changeUserPassword } from '@admin/actions/users'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '@admin/components/ui/dialog'
+import { DropdownMenuItem } from '@admin/components/ui/dropdown-menu'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { KeySquare, LoaderCircle } from 'lucide-react'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const passwordFieldsSchema = z.object({
+  newPassword: z.string().min(8, 'Password must be at least 8 characters'),
+  confirmPassword: z.string().min(1, 'Confirm the new password')
+})
+
+const ownPasswordSchema = passwordFieldsSchema
+  .extend({
+    currentPassword: z.string().min(1, 'Current password is required')
+  })
+  .refine((values) => values.newPassword === values.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword']
+  })
+
+const userPasswordSchema = passwordFieldsSchema
+  .extend({
+    currentPassword: z.string().optional()
+  })
+  .refine((values) => values.newPassword === values.confirmPassword, {
+    message: 'Passwords do not match',
+    path: ['confirmPassword']
+  })
+
+type ChangePasswordFormValues = z.infer<typeof userPasswordSchema>
+
+const defaultValues: ChangePasswordFormValues = {
+  currentPassword: '',
+  newPassword: '',
+  confirmPassword: ''
+}
+
+interface ChangePasswordDialogProps {
+  userId: string
+  userName: string
+  userEmail: string
+  isCurrentUser: boolean
+}
+
+export function ChangePasswordDialog({
+  userId,
+  userName,
+  userEmail,
+  isCurrentUser
+}: ChangePasswordDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const queryClient = useQueryClient()
+  const form = useForm<ChangePasswordFormValues>({
+    resolver: standardSchemaResolver(isCurrentUser ? ownPasswordSchema : userPasswordSchema),
+    defaultValues,
+    mode: 'onBlur',
+    reValidateMode: 'onChange'
+  })
+
+  const mutation = useMutation({
+    mutationFn: async (values: ChangePasswordFormValues) => {
+      const result = isCurrentUser
+        ? await changeOwnPassword({
+            currentPassword: values.currentPassword ?? '',
+            newPassword: values.newPassword
+          })
+        : await changeUserPassword({
+            userId,
+            newPassword: values.newPassword
+          })
+
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to change password')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success(
+        isCurrentUser ? 'Password changed successfully' : `Password changed for ${userName}`
+      )
+      await queryClient.invalidateQueries({ queryKey: ['users'] })
+      resetFormState()
+      setOpen(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  function resetFormState() {
+    form.reset(defaultValues)
+    mutation.reset()
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen)
+
+    if (!nextOpen) {
+      resetFormState()
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem onSelect={(event) => event.preventDefault()}>
+          <KeySquare className="size-4" />
+          Change password
+        </DropdownMenuItem>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-135">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+            <DialogHeader>
+              <DialogTitle>Change Password</DialogTitle>
+              <DialogDescription>
+                {isCurrentUser
+                  ? 'Set a new password for your account.'
+                  : `Set a new password for ${userName || userEmail}.`}
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogBody>
+              <div className="space-y-4">
+                {isCurrentUser ? (
+                  <FormField
+                    control={form.control}
+                    name="currentPassword"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>Current Password</FormLabel>
+                        <FormControl>
+                          <Input
+                            type="password"
+                            autoComplete="current-password"
+                            disabled={isPending}
+                            autoFocus
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                ) : null}
+                <FormField
+                  control={form.control}
+                  name="newPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>New Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          autoComplete="new-password"
+                          disabled={isPending}
+                          autoFocus={!isCurrentUser}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormDescription>Use at least 8 characters.</FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="confirmPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Confirm Password</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="password"
+                          autoComplete="new-password"
+                          disabled={isPending}
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </DialogBody>
+
+            <DialogFooter showCloseButton={true}>
+              <Button type="submit" disabled={isPending} size="lg">
+                {isPending ? <LoaderCircle className="animate-spin" /> : null}
+                {isPending ? 'Changing...' : 'Change Password'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/users/columns.tsx

@@ -5,13 +5,13 @@ import { Button } from '@admin/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger
 } from '@admin/components/ui/dropdown-menu'
-import type { User } from '@admin/types/auth'
+import { type User, UserRole } from '@admin/types/auth'
 import { getUserInitials } from '@admin/utils/user/user'
 import type { ColumnDef } from '@tanstack/react-table'
-import { Edit, KeySquare, MoreHorizontal, ShieldCheck } from 'lucide-react'
+import { Edit, MoreHorizontal, ShieldCheck } from 'lucide-react'
+import { ChangePasswordDialog } from './change-password-dialog'
 import { DeleteUserDialog } from './delete-user-dialog'
 import { EditRoleDialog } from './edit-role-dialog'
 
@@ -138,9 +138,11 @@ export const columns: ColumnDef<User>[] = [
     meta: { width: '80px' },
     cell: ({ row, table }) => {
       const currentUser = table.options.meta?.currentUser
-      const isCurrentUser = currentUser?.email === row.original.email
+      const isCurrentUser =
+        currentUser?.id === row.original.id || currentUser?.email === row.original.email
+      const canChangePassword = isCurrentUser || currentUser?.role === UserRole.ADMIN
 
-      if (isCurrentUser) return null
+      if (!isCurrentUser && !currentUser) return null
 
       return (
         <div className="flex justify-end">
@@ -152,15 +154,21 @@ export const columns: ColumnDef<User>[] = [
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DeleteUserDialog
-                userId={row.original.id}
-                userName={row.original.name}
-                isCurrentUser={isCurrentUser}
-              />
-              <DropdownMenuItem className="justify-between">
-                <span>Change Password</span>
-                <KeySquare />
-              </DropdownMenuItem>
+              {!isCurrentUser ? (
+                <DeleteUserDialog
+                  userId={row.original.id}
+                  userName={row.original.name}
+                  isCurrentUser={isCurrentUser}
+                />
+              ) : null}
+              {canChangePassword ? (
+                <ChangePasswordDialog
+                  userId={row.original.id}
+                  userName={row.original.name}
+                  userEmail={row.original.email}
+                  isCurrentUser={isCurrentUser}
+                />
+              ) : null}
             </DropdownMenuContent>
           </DropdownMenu>
         </div>