mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-21 10:15:04 +02:00
Create separate advanced auth create user modal and restore original modal
Co-authored-by: cadtoolbox <12723486+cadtoolbox@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
co-authored by
cadtoolbox
cadtoolbox
parent
41c9b64c8b
commit
ffd8eb5903
@@ -0,0 +1,180 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { X, Plus, Loader2, Users as UsersIcon } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader } from './Card';
|
||||
import { Button } from './Button';
|
||||
import type { Group, UserCreate } from '../api/client';
|
||||
|
||||
interface AdvancedAuthFormData extends UserCreate {
|
||||
group_ids: number[];
|
||||
confirmPassword: string;
|
||||
email?: string;
|
||||
}
|
||||
|
||||
interface CreateUserAdvancedAuthModalProps {
|
||||
formData: AdvancedAuthFormData;
|
||||
setFormData: (data: AdvancedAuthFormData) => void;
|
||||
groups: Group[];
|
||||
onClose: () => void;
|
||||
onCreate: () => void;
|
||||
isCreating: boolean;
|
||||
isCreateButtonDisabled: boolean;
|
||||
}
|
||||
|
||||
export function CreateUserAdvancedAuthModal({
|
||||
formData,
|
||||
setFormData,
|
||||
groups,
|
||||
onClose,
|
||||
onCreate,
|
||||
isCreating,
|
||||
isCreateButtonDisabled,
|
||||
}: CreateUserAdvancedAuthModalProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Close modal on Escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [onClose]);
|
||||
|
||||
const toggleGroup = (groupId: number) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
group_ids: formData.group_ids.includes(groupId)
|
||||
? formData.group_ids.filter(id => id !== groupId)
|
||||
: [...formData.group_ids, groupId],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<Card
|
||||
className="w-full max-w-md"
|
||||
onClick={(e: React.MouseEvent) => e.stopPropagation()}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<UsersIcon className="w-5 h-5 text-bambu-green" />
|
||||
<h2 className="text-lg font-semibold text-white">{t('users.modal.createUser')}</h2>
|
||||
</div>
|
||||
<p className="text-sm text-bambu-gray ml-7">with Advanced Authentication</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{/* Username Field */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
{t('users.form.username')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-lg text-white placeholder-bambu-gray focus:outline-none focus:ring-2 focus:ring-bambu-green/50 focus:border-bambu-green transition-colors"
|
||||
placeholder={t('users.form.usernamePlaceholder')}
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email Field */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
{t('users.form.email') || 'Email'} <span className="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full px-4 py-3 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-lg text-white placeholder-bambu-gray focus:outline-none focus:ring-2 focus:ring-bambu-green/50 focus:border-bambu-green transition-colors"
|
||||
placeholder={t('users.form.emailPlaceholder') || 'user@example.com'}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info box about auto-generated password */}
|
||||
<div className="bg-bambu-dark-secondary/50 border border-bambu-green/20 rounded-lg p-3">
|
||||
<p className="text-sm text-bambu-gray">
|
||||
{t('users.form.autoGeneratedPassword') || 'A secure password will be automatically generated and emailed to the user.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Groups Field */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white mb-2">
|
||||
{t('users.form.groups')}
|
||||
</label>
|
||||
<div className="space-y-2 max-h-40 overflow-y-auto p-2 bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-lg">
|
||||
{groups.map(group => (
|
||||
<label
|
||||
key={group.id}
|
||||
className="flex items-center gap-3 px-2 py-1.5 rounded hover:bg-bambu-dark-tertiary cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.group_ids.includes(group.id)}
|
||||
onChange={() => toggleGroup(group.id)}
|
||||
className="w-4 h-4 rounded border-bambu-gray text-bambu-green focus:ring-bambu-green focus:ring-offset-0 bg-bambu-dark"
|
||||
/>
|
||||
<span className="text-sm text-white">{group.name}</span>
|
||||
{group.is_system && (
|
||||
<span className="text-xs text-yellow-400">({t('users.system')})</span>
|
||||
)}
|
||||
</label>
|
||||
))}
|
||||
{groups.length === 0 && (
|
||||
<p className="text-sm text-bambu-gray">{t('users.noGroupsAvailable')}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 flex justify-end gap-3">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onClose}
|
||||
>
|
||||
{t('users.modal.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onCreate}
|
||||
disabled={isCreateButtonDisabled}
|
||||
>
|
||||
{isCreating ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
{t('users.modal.creating')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Plus className="w-4 h-4" />
|
||||
{t('users.modal.createUser')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user