More user form tweaks
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user