betterstart-cli 0.0.108 → 0.0.110

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-endpoint-dialog.tsx

@@ -67,8 +67,6 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
         : [],
     [subscriptions, webhook]
   )
-  const [selectedEvents, setSelectedEvents] = React.useState<string[] | null>(null)
-  const events = selectedEvents ?? subscribedEvents
   const [secret, setSecret] = React.useState<string | null>(null)
 
   const formSources = webhookEventSources.filter((source) => source.kind === 'form')
@@ -83,6 +81,19 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
       events: subscribedEvents
     }
   })
+  const events = form.watch('events')
+
+  React.useEffect(() => {
+    if (!open) return
+
+    form.reset({
+      name: webhook?.name ?? '',
+      url: webhook?.url ?? '',
+      enabled: webhook?.enabled ?? true,
+      events: subscribedEvents
+    })
+    setSecret(null)
+  }, [form, open, subscribedEvents, webhook])
 
   const saveMutation = useMutation({
     mutationFn: async (values: EndpointFormValues) => {
@@ -92,8 +103,8 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
         enabled: values.enabled
       }
       const result = webhook
-        ? await updateWebhook(webhook.id, { ...endpointValues, events })
-        : await createWebhook({ ...endpointValues, events })
+        ? await updateWebhook(webhook.id, { ...endpointValues, events: values.events })
+        : await createWebhook({ ...endpointValues, events: values.events })
       if (!result.success) {
         throw new Error(result.error || 'Failed to save this webhook')
       }
@@ -172,16 +183,23 @@ export function WebhookEndpointDialog({ webhook, open, onOpenChange }: WebhookEn
   const isPending = saveMutation.isPending
 
   function toggleEvent(event: string, checked: boolean) {
-    const nextEvents = checked ? [...events, event] : events.filter((entry) => entry !== event)
-    setSelectedEvents(nextEvents)
-    form.setValue('events', nextEvents)
+    const currentEvents = form.getValues('events')
+    const nextEvents = checked
+      ? currentEvents.includes(event)
+        ? currentEvents
+        : [...currentEvents, event]
+      : currentEvents.filter((entry) => entry !== event)
+    form.setValue('events', nextEvents, { shouldDirty: true, shouldValidate: true })
   }
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}>
+          <form
+            autoComplete="off"
+            onSubmit={form.handleSubmit((values) => saveMutation.mutate(values))}
+          >
             <DialogHeader>
               <DialogTitle>{isEdit ? `Edit webhook — ${webhook.name}` : 'Add webhook'}</DialogTitle>
               <DialogDescription>

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-page.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
-import { requireRole, UserRole } from '@admin/auth/middleware'
+import { UserRole } from '@admin/auth/middleware'
+import { RoleGate } from '@admin/components/layouts/role-gate'
 import { WebhooksLogsPageContent } from '../webhooks-logs-page-content'
 import { WebhooksPageSkeleton } from '../webhooks-page-skeleton'
 
-export default async function WebhooksLogsPage() {
-  await requireRole([UserRole.ADMIN])
-
+export default function WebhooksLogsPage() {
   return (
     <React.Suspense fallback={<WebhooksPageSkeleton />}>
-      <WebhooksLogsPageContent />
+      <RoleGate roles={[UserRole.ADMIN]}>
+        <WebhooksLogsPageContent />
+      </RoleGate>
     </React.Suspense>
   )
 }

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-page.tsx

@@ -1,14 +1,15 @@
 import * as React from 'react'
-import { requireRole, UserRole } from '@admin/auth/middleware'
+import { UserRole } from '@admin/auth/middleware'
+import { RoleGate } from '@admin/components/layouts/role-gate'
 import { WebhooksPageContent } from './webhooks-page-content'
 import { WebhooksPageSkeleton } from './webhooks-page-skeleton'
 
-export default async function WebhooksPage() {
-  await requireRole([UserRole.ADMIN])
-
+export default function WebhooksPage() {
   return (
     <React.Suspense fallback={<WebhooksPageSkeleton />}>
-      <WebhooksPageContent />
+      <RoleGate roles={[UserRole.ADMIN]}>
+        <WebhooksPageContent />
+      </RoleGate>
     </React.Suspense>
   )
 }

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

@@ -82,7 +82,7 @@ export function ChangePasswordDialog({
   const form = useForm<ChangePasswordFormValues>({
     resolver: standardSchemaResolver(isCurrentUser ? ownPasswordSchema : userPasswordSchema),
     defaultValues,
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange'
   })
 
@@ -144,7 +144,10 @@ export function ChangePasswordDialog({
       </DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+          <form
+            autoComplete="off"
+            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
+          >
             <DialogHeader>
               <DialogTitle>Change Password</DialogTitle>
               <DialogDescription>
@@ -166,7 +169,7 @@ export function ChangePasswordDialog({
                         <FormControl>
                           <Input
                             type="password"
-                            autoComplete="current-password"
+                            autoComplete="off"
                             disabled={isPending}
                             autoFocus
                             {...field}
@@ -186,7 +189,7 @@ export function ChangePasswordDialog({
                       <FormControl>
                         <Input
                           type="password"
-                          autoComplete="new-password"
+                          autoComplete="off"
                           disabled={isPending}
                           autoFocus={!isCurrentUser}
                           {...field}
@@ -204,12 +207,7 @@ export function ChangePasswordDialog({
                     <FormItem>
                       <FormLabel>Confirm Password</FormLabel>
                       <FormControl>
-                        <Input
-                          type="password"
-                          autoComplete="new-password"
-                          disabled={isPending}
-                          {...field}
-                        />
+                        <Input type="password" autoComplete="off" disabled={isPending} {...field} />
                       </FormControl>
                       <FormMessage />
                     </FormItem>

package/dist/assets/adapters/next/templates/init/pages/users/create-user-dialog.tsx

@@ -67,7 +67,7 @@ export function CreateUserDialog() {
   const form = useForm<CreateUserFormValues>({
     resolver: standardSchemaResolver(createUserSchema),
     defaultValues,
-    mode: 'onBlur',
+    mode: 'onChange',
     reValidateMode: 'onChange'
   })
 
@@ -111,7 +111,10 @@ export function CreateUserDialog() {
       <DialogTrigger render={<Button />}>Create User</DialogTrigger>
       <DialogContent className="sm:max-w-135">
         <Form {...form}>
-          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+          <form
+            autoComplete="off"
+            onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
+          >
             <DialogHeader>
               <DialogTitle>Create User</DialogTitle>
               <DialogDescription>Add a new user to the system</DialogDescription>
@@ -129,7 +132,7 @@ export function CreateUserDialog() {
                         <Input
                           type="email"
                           placeholder="user@example.com"
-                          autoComplete="email"
+                          autoComplete="off"
                           disabled={isPending}
                           {...field}
                         />
@@ -148,7 +151,7 @@ export function CreateUserDialog() {
                         <Input
                           type="text"
                           placeholder="Full name"
-                          autoComplete="name"
+                          autoComplete="off"
                           disabled={isPending}
                           {...field}
                         />
@@ -167,7 +170,7 @@ export function CreateUserDialog() {
                         <Input
                           type="password"
                           placeholder="Min 8 characters"
-                          autoComplete="new-password"
+                          autoComplete="off"
                           disabled={isPending}
                           {...field}
                         />

package/dist/assets/adapters/next/templates/init/pages/users/delete-user-dialog.tsx

@@ -118,7 +118,7 @@ export function DeleteUserDialog({ userId, userName, isCurrentUser }: DeleteUser
       </AlertDialogTrigger>
       <AlertDialogContent>
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(() => mutation.mutate())}>
+          <form autoComplete="off" onSubmit={form.handleSubmit(() => mutation.mutate())}>
             <AlertDialogHeader>
               <AlertDialogTitle>Delete account?</AlertDialogTitle>
               <AlertDialogDescription>

package/dist/assets/adapters/next/templates/init/pages/users/edit-role-dialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
   DialogTrigger
 } from '@admin/components/ui/dialog'
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@admin/components/ui/form'
 import {
   Select,
   SelectContent,
@@ -22,6 +23,7 @@ import {
 import { Spinner } from '@admin/components/ui/spinner'
 import { UserRole } from '@admin/types/auth'
 import { useQueryClient } from '@tanstack/react-query'
+import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
 interface EditRoleDialogProps {
@@ -31,19 +33,32 @@ interface EditRoleDialogProps {
   children: React.ReactNode
 }
 
+interface EditRoleFormValues {
+  role: UserRole
+}
+
 export function EditRoleDialog({ userId, currentRole, userName, children }: EditRoleDialogProps) {
   const [open, setOpen] = React.useState(false)
-  const [role, setRole] = React.useState(currentRole)
   const [isPending, startTransition] = React.useTransition()
   const queryClient = useQueryClient()
+  const form = useForm<EditRoleFormValues>({
+    defaultValues: {
+      role: currentRole as UserRole
+    }
+  })
+
+  React.useEffect(() => {
+    form.reset({ role: currentRole as UserRole })
+  }, [currentRole, form])
 
-  const handleSave = () => {
+  const handleSave = (values: EditRoleFormValues) => {
     startTransition(async () => {
       try {
-        const result = await updateUserRole(userId, role as UserRole)
+        const result = await updateUserRole(userId, values.role)
         if (result.success) {
           toast.success(`Role updated for ${userName}`)
           queryClient.refetchQueries({ queryKey: ['users'] })
+          form.reset(values)
           setOpen(false)
         } else {
           toast.error(result.error || 'Failed to update role')
@@ -54,41 +69,69 @@ export function EditRoleDialog({ userId, currentRole, userName, children }: Edit
     })
   }
 
+  function handleOpenChange(nextOpen: boolean) {
+    setOpen(nextOpen)
+
+    if (!nextOpen) {
+      form.reset({ role: currentRole as UserRole })
+    }
+  }
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger render={children as React.ReactElement} />
       <DialogContent className="sm:max-w-87.5">
-        <DialogHeader>
-          <DialogTitle>Edit Role</DialogTitle>
-          <DialogDescription>Change the role for {userName}</DialogDescription>
-        </DialogHeader>
+        <Form {...form}>
+          <form autoComplete="off" onSubmit={form.handleSubmit(handleSave)}>
+            <DialogHeader>
+              <DialogTitle>Edit Role</DialogTitle>
+              <DialogDescription>Change the role for {userName}</DialogDescription>
+            </DialogHeader>
 
-        <div className="p-2">
-          <Select value={role} onValueChange={setRole}>
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
-              <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
-              <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
+            <div className="p-2">
+              <FormField
+                control={form.control}
+                name="role"
+                render={({ field }) => (
+                  <FormItem>
+                    <Select value={field.value} onValueChange={field.onChange} disabled={isPending}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
+                        <SelectItem value={UserRole.EDITOR}>Editor</SelectItem>
+                        <SelectItem value={UserRole.MEMBER}>Member</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
 
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)} disabled={isPending}>
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSave}
-            disabled={isPending || role === currentRole}
-            aria-busy={isPending}
-          >
-            {isPending && <Spinner />}
-            {isPending ? 'Saving Role…' : 'Save Role'}
-          </Button>
-        </DialogFooter>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setOpen(false)}
+                disabled={isPending}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={isPending || !form.formState.isDirty}
+                aria-busy={isPending}
+              >
+                {isPending && <Spinner />}
+                {isPending ? 'Saving Role…' : 'Save Role'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   )

package/dist/assets/shared-assets/react-admin/ui/input-group.tsx

@@ -59,6 +59,12 @@ function InputGroupAddon({
         }
         e.currentTarget.parentElement?.querySelector('input')?.focus()
       }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          e.currentTarget.parentElement?.querySelector('input')?.focus()
+        }
+      }}
       {...props}
     />
   )