Ajout du système d'administration avec token unique et QR code
- Implémentation complète du système d'administration (/admin) - Gestion des clients avec base de données JSON - Génération de token unique et QR code pour chaque client - Intégration des données client dans l'application (bungalow, WiFi, message) - Amélioration du composant WifiCard avec fallback de copie - Optimisation du hook useClientData pour chargement immédiat - Ajout de la variable d'environnement ADMIN_PASSWORD
This commit is contained in:
195
components/admin/ClientForm.tsx
Normal file
195
components/admin/ClientForm.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { Client, ClientInput } from "@/lib/types/client";
|
||||
import QRCodeDisplay from "./QRCodeDisplay";
|
||||
|
||||
interface ClientFormProps {
|
||||
client?: Client;
|
||||
onSuccess: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export default function ClientForm({ client, onSuccess, onCancel }: ClientFormProps) {
|
||||
const [formData, setFormData] = useState<ClientInput>({
|
||||
email: client?.email || "",
|
||||
bungalowNumber: client?.bungalowNumber || "",
|
||||
wifiName: client?.wifiName || "Lagon-WiFi",
|
||||
wifiPassword: client?.wifiPassword || "",
|
||||
gerantMessage: client?.gerantMessage || "Bienvenue dans notre pension de famille !",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [createdClient, setCreatedClient] = useState<Client | null>(client || null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const adminPassword = localStorage.getItem("adminPassword") || "";
|
||||
const url = client
|
||||
? `/api/admin/clients/${client.id}`
|
||||
: "/api/admin/clients";
|
||||
|
||||
const method = client ? "PUT" : "POST";
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${adminPassword}`,
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Erreur lors de la sauvegarde");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setCreatedClient(data);
|
||||
onSuccess();
|
||||
} catch (err: any) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getClientUrl = () => {
|
||||
if (!createdClient) return "";
|
||||
const baseUrl = typeof window !== "undefined" ? window.location.origin : "";
|
||||
return `${baseUrl}/accueil?token=${createdClient.token}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{client ? "Modifier le client" : "Nouveau client"}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
disabled={!!client}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Numéro de bungalow *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.bungalowNumber}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, bungalowNumber: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nom du WiFi
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.wifiName}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, wifiName: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Mot de passe WiFi
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.wifiPassword}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, wifiPassword: e.target.value })
|
||||
}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Message du gérant
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.gerantMessage}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, gerantMessage: e.target.value })
|
||||
}
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<Button type="button" variant="outline" onClick={onCancel} className="flex-1">
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" disabled={loading} className="flex-1">
|
||||
{loading ? "Enregistrement..." : client ? "Modifier" : "Créer"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{createdClient && !client && (
|
||||
<div className="mt-6 pt-6 border-t border-gray-200">
|
||||
<h3 className="font-semibold text-primary mb-3">Client créé avec succès !</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">Lien unique :</p>
|
||||
<div className="bg-secondary rounded-xl p-3 flex items-center justify-between gap-2">
|
||||
<code className="text-xs break-all flex-1">{getClientUrl()}</code>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(getClientUrl());
|
||||
}}
|
||||
>
|
||||
Copier
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-2">QR Code :</p>
|
||||
<QRCodeDisplay url={getClientUrl()} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user