More user form tweaks

2025-09-02 12:15:35 -04:00
parent a0c442d1af
commit ad1ebeefe1
2 changed files with 149 additions and 143 deletions
--- 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">
--- 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,6 +250,8 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
      
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          {/* Basic Information Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <FormField
              control={form.control}
              name="username"
@@ -270,6 +280,25 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
              )}
            />
          
+            <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"
@@ -278,13 +307,13 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
                    <FormLabel>Rocket Chat User</FormLabel>
                    <FormControl>
                      {form.watch("is_admin") ? (
-                    <div className="flex items-center gap-2 p-2 border rounded-md bg-muted">
+                        <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} onValueChange={field.onChange}>
+                        <Select value={field.value || "none"} onValueChange={field.onChange}>
                          <SelectTrigger>
                            <SelectValue placeholder={loadingRocketChatUsers ? "Loading..." : "Select Rocket Chat user..."} />
                          </SelectTrigger>
@@ -321,26 +350,9 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
                  </FormItem>
                )}
              />
+            </div>
          
-          <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>
-            )}
-          />
-          
+          {/* Status Switches - Two Columns */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <FormField
              control={form.control}
@@ -385,31 +397,18 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
            />
          </div>

+                      {/* Permissions Section */}
            {permissions && permissions.length > 0 && (
              <>
-              {form.watch("is_admin") ? (
-                <div className="space-y-4">
-                  <Alert variant="destructive">
-                    <AlertDescription>
-                      Administrators have access to all permissions by default. Individual permissions cannot be edited for admin users.
-                    </AlertDescription>
-                  </Alert>
                <PermissionSelector
                  permissionsByCategory={permissions}
-                    selectedPermissions={getAllPermissionIds(permissions)}
-                    onChange={() => {}}
-                    disabled={true}
-                  />
-                </div>
-              ) : (
-                <>
-                  <PermissionSelector
-                    permissionsByCategory={permissions}
-                    selectedPermissions={selectedPermissions}
+                  selectedPermissions={form.watch("is_admin") ? getAllPermissionIds(permissions) : selectedPermissions}
                  onChange={setSelectedPermissions}
+                  disabled={form.watch("is_admin")}
+                  isAdmin={form.watch("is_admin")}
                />
-                  {selectedPermissions.length === 0 && (
-                    <Alert>
+                {!form.watch("is_admin") && selectedPermissions.length === 0 && (
+                  <Alert variant="destructive">
                    <AlertDescription>
                      Warning: This user has no permissions selected. They won't be able to access anything.
                    </AlertDescription>
@@ -417,8 +416,6 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
                )}
              </>
            )}
-            </>
-          )}
          
          <div className="flex justify-end space-x-4">
            <Button type="button" variant="outline" onClick={onCancel}>