user management
This commit is contained in:
nBiqoz
274
components/dashboard/create-user.tsx
Normal file
274
components/dashboard/create-user.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { UserPlus, Loader2, CheckCircle, AlertCircle } from "lucide-react";
|
||||
|
||||
interface CreateUserResult {
|
||||
success: boolean;
|
||||
message: string;
|
||||
user?: {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export default function CreateUser() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
role: "USER",
|
||||
});
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [result, setResult] = useState<CreateUserResult | null>(null);
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
// Réinitialiser le résultat quand l'utilisateur modifie le formulaire
|
||||
if (result) {
|
||||
setResult(null);
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
if (!formData.name.trim()) {
|
||||
return "Le nom est requis";
|
||||
}
|
||||
if (!formData.email.trim()) {
|
||||
return "L'email est requis";
|
||||
}
|
||||
if (!formData.password) {
|
||||
return "Le mot de passe est requis";
|
||||
}
|
||||
if (formData.password.length < 8) {
|
||||
return "Le mot de passe doit contenir au moins 8 caractères";
|
||||
}
|
||||
if (formData.password !== formData.confirmPassword) {
|
||||
return "Les mots de passe ne correspondent pas";
|
||||
}
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
return "Format d'email invalide";
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const validationError = validateForm();
|
||||
if (validationError) {
|
||||
setResult({
|
||||
success: false,
|
||||
message: validationError,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/create-user", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: formData.name.trim(),
|
||||
email: formData.email.trim().toLowerCase(),
|
||||
password: formData.password,
|
||||
role: formData.role,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
setResult({
|
||||
success: true,
|
||||
message: data.message,
|
||||
user: data.user,
|
||||
});
|
||||
// Réinitialiser le formulaire en cas de succès
|
||||
setFormData({
|
||||
name: "",
|
||||
email: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
role: "USER",
|
||||
});
|
||||
} else {
|
||||
setResult({
|
||||
success: false,
|
||||
message: data.error || "Erreur lors de la création de l'utilisateur",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la création de l'utilisateur:", error);
|
||||
setResult({
|
||||
success: false,
|
||||
message: "Erreur de connexion au serveur",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<UserPlus className="h-5 w-5" />
|
||||
Créer un nouvel utilisateur
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Nom complet *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Ex: Jean Dupont"
|
||||
value={formData.name}
|
||||
onChange={(e) => handleInputChange("name", e.target.value)}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Adresse email *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Ex: jean.dupont@example.com"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Mot de passe *</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Minimum 8 caractères"
|
||||
value={formData.password}
|
||||
onChange={(e) => handleInputChange("password", e.target.value)}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirmer le mot de passe *</Label>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
placeholder="Répéter le mot de passe"
|
||||
value={formData.confirmPassword}
|
||||
onChange={(e) =>
|
||||
handleInputChange("confirmPassword", e.target.value)
|
||||
}
|
||||
disabled={isLoading}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role">Rôle</Label>
|
||||
<Select
|
||||
value={formData.role}
|
||||
onValueChange={(value: string) => handleInputChange("role", value)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Sélectionner un rôle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="USER">Utilisateur</SelectItem>
|
||||
<SelectItem value="ADMIN">Administrateur</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{result && (
|
||||
<Alert variant={result.success ? "default" : "destructive"}>
|
||||
{result.success ? (
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
)}
|
||||
<AlertDescription>
|
||||
{result.message}
|
||||
{result.success && result.user && (
|
||||
<div className="mt-2 text-sm">
|
||||
<strong>Détails:</strong>
|
||||
<br />
|
||||
• ID: {result.user.id}
|
||||
<br />
|
||||
• Email: {result.user.email}
|
||||
<br />
|
||||
• Rôle: {result.user.role}
|
||||
<br />• Crédits initiaux: 5,000,000 tokens
|
||||
</div>
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Création en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserPlus className="mr-2 h-4 w-4" />
|
||||
Créer l'utilisateur
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 p-4 bg-muted rounded-lg">
|
||||
<h4 className="font-medium mb-2">Informations importantes :</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>• L'utilisateur recevra automatiquement 5,000,000 tokens</li>
|
||||
<li>• Le mot de passe sera hashé de manière sécurisée</li>
|
||||
<li>• L'email doit être unique dans le système</li>
|
||||
<li>• L'utilisateur pourra se connecter immédiatement</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user