From ad1ebeefe1fcf8946780aad496b1d2161eeab883 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Tue, 2 Sep 2025 12:15:35 -0400
Subject: [PATCH] More user form tweaks

---
 .../settings/PermissionSelector.tsx           |  13 +-
 .../src/components/settings/UserForm.tsx      | 279 +++++++++---------
 2 files changed, 149 insertions(+), 143 deletions(-)

diff --git a/inventory/src/components/settings/PermissionSelector.tsx b/inventory/src/components/settings/PermissionSelector.tsx
index 2be318b..c0f6c3c 100644
--- a/inventory/src/components/settings/PermissionSelector.tsx
+++ b/inventory/src/components/settings/PermissionSelector.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Info } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
 interface Permission {
   id: number;
@@ -21,13 +22,15 @@ interface PermissionSelectorProps {
   selectedPermissions: number[];
   onChange: (selectedPermissions: number[]) => void;
   disabled?: boolean;
+  isAdmin?: boolean;
 }
 
 export function PermissionSelector({
   permissionsByCategory,
   selectedPermissions,
   onChange,
-  disabled = false
+  disabled = false,
+  isAdmin = false
 }: PermissionSelectorProps) {
   // Handle permission checkbox change
   const handlePermissionChange = (permissionId: number) => {
@@ -68,7 +71,13 @@ export function PermissionSelector({
   return (
     <div className="space-y-4">
       <h3 className="text-lg font-medium">Permissions</h3>
-     
+      {isAdmin && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            Administrators have access to all permissions by default. Individual permissions cannot be edited for admin users.
+          </AlertDescription>
+        </Alert>
+      )}
       
       {permissionsByCategory.map(category => (
         <Card key={category.category} className="mb-4">
diff --git a/inventory/src/components/settings/UserForm.tsx b/inventory/src/components/settings/UserForm.tsx
index 5df6c15..c3e35aa 100644
--- a/inventory/src/components/settings/UserForm.tsx
+++ b/inventory/src/components/settings/UserForm.tsx
@@ -66,7 +66,7 @@ const userFormSchema = z.object({
   password: z.string().min(6, { message: "Password must be at least 6 characters" }).optional().or(z.literal("")),
   is_admin: z.boolean().default(false),
   is_active: z.boolean().default(true),
-  rocket_chat_user_id: z.string().optional(),
+  rocket_chat_user_id: z.string().default("none"),
 });
 
 type FormValues = z.infer<typeof userFormSchema>;
@@ -136,20 +136,24 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
       }
     };
 
+    // Ensure rocket_chat_user_id is set to "none" initially if not set
+    if (!form.getValues().rocket_chat_user_id) {
+      form.setValue('rocket_chat_user_id', 'none');
+    }
+
     fetchRocketChatUsers();
-  }, []);
+  }, [form]);
 
   // Initialize selected permissions and form values
   useEffect(() => {
-    console.log("User permissions:", user?.permissions);
     
     if (user?.permissions && Array.isArray(user.permissions) && user.permissions.length > 0) {
       // Extract IDs from the permissions
       const permissionIds = user.permissions.map(p => p.id);
-      console.log("Setting selected permissions:", permissionIds);
+     
       setSelectedPermissions(permissionIds);
     } else {
-      console.log("No permissions found or empty permissions array");
+     
       setSelectedPermissions([]);
     }
 
@@ -163,6 +167,16 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
         is_active: user.is_active !== false,
         rocket_chat_user_id: user.rocket_chat_user_id || "none",
       });
+    } else {
+      // For new users, ensure rocket_chat_user_id defaults to "none"
+      form.reset({
+        username: "",
+        email: "",
+        password: "",
+        is_admin: false,
+        is_active: true,
+        rocket_chat_user_id: "none",
+      });
     }
   }, [user, form]);
   
@@ -170,7 +184,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
   const onSubmit = (data: FormValues) => {
     try {
       setFormError(null);
-      console.log("Form submitted with permissions:", selectedPermissions);
+     
       
       // Validate
       if (!user && !data.password) {
@@ -214,7 +228,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
         userData.permissions = [];
       }
       
-      console.log("Saving user data:", userData);
+      
       onSave(userData);
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : "An error occurred";
@@ -222,12 +236,6 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
     }
   };
 
-  // For debugging
-  console.log("Current form state:", form.getValues());
-  console.log("Available permissions categories:", permissions);
-  console.log("Selected permissions:", selectedPermissions);
-  console.log("Is admin:", form.watch("is_admin"));
-
   return (
     <div className="space-y-6">
       <div>
@@ -242,105 +250,109 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
       
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-          <FormField
-            control={form.control}
-            name="username"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Username</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+          {/* Basic Information Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          
-          <FormField
-            control={form.control}
-            name="rocket_chat_user_id"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Rocket Chat User</FormLabel>
-                <FormControl>
-                  {form.watch("is_admin") ? (
-                    <div className="flex items-center gap-2 p-2 border rounded-md bg-muted">
-                      <span className="text-muted-foreground">
-                        Admin users have access to all chat rooms by default
-                      </span>
-                    </div>
-                  ) : (
-                    <Select value={field.value} onValueChange={field.onChange}>
-                      <SelectTrigger>
-                        <SelectValue placeholder={loadingRocketChatUsers ? "Loading..." : "Select Rocket Chat user..."} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {!loadingRocketChatUsers && (
-                          <SelectItem value="none">
-                            <span className="text-muted-foreground">None</span>
-                          </SelectItem>
-                        )}
-                        {rocketChatUsers.map((rcUser) => (
-                          <SelectItem key={rcUser.id} value={rcUser.id.toString()}>
-                            <div className="flex items-center gap-2">
-                              <Avatar className="h-6 w-6">
-                                <AvatarImage 
-                                  src={rcUser.mongo_id ? `${config.chatUrl}/avatar/${rcUser.mongo_id}` : undefined}
-                                  alt={rcUser.name || rcUser.username}
-                                />
-                                <AvatarFallback className="text-xs">
-                                  {(rcUser.name || rcUser.username).charAt(0).toUpperCase()}
-                                </AvatarFallback>
-                              </Avatar>
-                              <span className={rcUser.active ? '' : 'text-muted-foreground'}>
-                                {rcUser.name || rcUser.username}
-                                {!rcUser.active && <span className="text-xs ml-1">(inactive)</span>}
-                              </span>
-                            </div>
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  )}
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{user ? "New Password" : "Password"}</FormLabel>
-                <FormControl>
-                  <Input 
-                    type="password" 
-                    {...field} 
-                    placeholder={user ? "Leave blank to keep current password" : ""} 
-                  />
-                </FormControl>
-             
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{user ? "New Password" : "Password"}</FormLabel>
+                  <FormControl>
+                    <Input 
+                      type="password" 
+                      {...field} 
+                      placeholder={user ? "Leave blank to keep current password" : ""} 
+                    />
+                  </FormControl>
+               
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              
+              <FormField
+                control={form.control}
+                name="rocket_chat_user_id"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Rocket Chat User</FormLabel>
+                    <FormControl>
+                      {form.watch("is_admin") ? (
+                        <div className="flex items-center gap-2 p-2 border text-sm rounded-md bg-muted">
+                          <span className="text-muted-foreground">
+                            Admin users have access to all chat rooms by default
+                          </span>
+                        </div>
+                      ) : (
+                        <Select value={field.value || "none"} onValueChange={field.onChange}>
+                          <SelectTrigger>
+                            <SelectValue placeholder={loadingRocketChatUsers ? "Loading..." : "Select Rocket Chat user..."} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {!loadingRocketChatUsers && (
+                              <SelectItem value="none">
+                                <span className="text-muted-foreground">None</span>
+                              </SelectItem>
+                            )}
+                            {rocketChatUsers.map((rcUser) => (
+                              <SelectItem key={rcUser.id} value={rcUser.id.toString()}>
+                                <div className="flex items-center gap-2">
+                                  <Avatar className="h-6 w-6">
+                                    <AvatarImage 
+                                      src={rcUser.mongo_id ? `${config.chatUrl}/avatar/${rcUser.mongo_id}` : undefined}
+                                      alt={rcUser.name || rcUser.username}
+                                    />
+                                    <AvatarFallback className="text-xs">
+                                      {(rcUser.name || rcUser.username).charAt(0).toUpperCase()}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  <span className={rcUser.active ? '' : 'text-muted-foreground'}>
+                                    {rcUser.name || rcUser.username}
+                                    {!rcUser.active && <span className="text-xs ml-1">(inactive)</span>}
+                                  </span>
+                                </div>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
           
+          {/* Status Switches - Two Columns */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <FormField
               control={form.control}
@@ -384,41 +396,26 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
               )}
             />
           </div>
-          
-          {permissions && permissions.length > 0 && (
-            <>
-              {form.watch("is_admin") ? (
-                <div className="space-y-4">
+
+                      {/* Permissions Section */}
+            {permissions && permissions.length > 0 && (
+              <>
+                <PermissionSelector
+                  permissionsByCategory={permissions}
+                  selectedPermissions={form.watch("is_admin") ? getAllPermissionIds(permissions) : selectedPermissions}
+                  onChange={setSelectedPermissions}
+                  disabled={form.watch("is_admin")}
+                  isAdmin={form.watch("is_admin")}
+                />
+                {!form.watch("is_admin") && selectedPermissions.length === 0 && (
                   <Alert variant="destructive">
                     <AlertDescription>
-                      Administrators have access to all permissions by default. Individual permissions cannot be edited for admin users.
+                      Warning: This user has no permissions selected. They won't be able to access anything.
                     </AlertDescription>
                   </Alert>
-                  <PermissionSelector
-                    permissionsByCategory={permissions}
-                    selectedPermissions={getAllPermissionIds(permissions)}
-                    onChange={() => {}}
-                    disabled={true}
-                  />
-                </div>
-              ) : (
-                <>
-                  <PermissionSelector
-                    permissionsByCategory={permissions}
-                    selectedPermissions={selectedPermissions}
-                    onChange={setSelectedPermissions}
-                  />
-                  {selectedPermissions.length === 0 && (
-                    <Alert>
-                      <AlertDescription>
-                        Warning: This user has no permissions selected. They won't be able to access anything.
-                      </AlertDescription>
-                    </Alert>
-                  )}
-                </>
-              )}
-            </>
-          )}
+                )}
+              </>
+            )}
           
           <div className="flex justify-end space-x-4">
             <Button type="button" variant="outline" onClick={onCancel}>