72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { api } from '@/api';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
|
|
|
export default function AddUserCard({ onCreated }) {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleCreate = async (e) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (password.length < 8) {
|
|
const msg = 'Password must be at least 8 characters.';
|
|
setError(msg);
|
|
toast.error(msg);
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
await api.createUser({ username, password });
|
|
toast.success(`User "${username}" created.`);
|
|
setUsername('');
|
|
setPassword('');
|
|
setError('');
|
|
onCreated();
|
|
} catch (err) {
|
|
const errorMessage = err.message || 'Failed to create user.';
|
|
setError(errorMessage);
|
|
toast.error(errorMessage);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<CardTitle>Add User</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={handleCreate} className="flex flex-col gap-3 lg:flex-row lg:items-end">
|
|
<div className="space-y-1.5 flex-1">
|
|
<Label htmlFor="new-uname">Username</Label>
|
|
<Input id="new-uname" value={username} onChange={e => setUsername(e.target.value)} placeholder="username" required />
|
|
</div>
|
|
<div className="space-y-1.5 flex-1">
|
|
<Label htmlFor="new-upw">Password</Label>
|
|
<Input id="new-upw" type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" required />
|
|
</div>
|
|
<div className="lg:flex-1" />
|
|
{error && (
|
|
<div className="w-full lg:w-auto rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm text-destructive lg:col-start-1 lg:col-span-3">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<Button type="submit" disabled={loading} className="shrink-0" aria-busy={loading}>
|
|
{loading ? 'Creating…' : 'Create User'}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|