f9b202375f
- Replaced `div` with `button` elements in `NotificationHandler` for better semantics and accessibility. - Added conditional QR Code reveal in 2FA setup with `blur` effect for enhanced security and user control. - Enhanced messages layout for responsiveness on smaller screens with dynamic chat/sidebar toggling. - Simplified legacy prop handling in `ShareDialog`.
295 lines
8.2 KiB
TypeScript
295 lines
8.2 KiB
TypeScript
"use client";
|
|
|
|
import { Loader2, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { toast } from "sonner";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
InputOTP,
|
|
InputOTPGroup,
|
|
InputOTPSeparator,
|
|
InputOTPSlot,
|
|
} from "@/components/ui/input-otp";
|
|
import { useAuth } from "@/providers/auth-provider";
|
|
import { AuthService } from "@/services/auth.service";
|
|
|
|
export function TwoFactorSetup() {
|
|
const { user, refreshUser } = useAuth();
|
|
const [step, setStep] = useState<"idle" | "setup" | "verify">("idle");
|
|
const [qrCode, setQrCode] = useState<string | null>(null);
|
|
const [secret, setSecret] = useState<string | null>(null);
|
|
const [otpValue, setOtpValue] = useState("");
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [isRevealed, setIsRevealed] = useState(false);
|
|
|
|
const handleSetup = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const data = await AuthService.setup2fa();
|
|
setQrCode(data.qrCodeUrl);
|
|
setSecret(data.secret);
|
|
setStep("setup");
|
|
} catch (_error) {
|
|
toast.error("Erreur lors de la configuration de la 2FA.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleEnable = async () => {
|
|
if (otpValue.length !== 6) return;
|
|
setIsLoading(true);
|
|
try {
|
|
await AuthService.enable2fa(otpValue);
|
|
toast.success("Double authentification activée !");
|
|
await refreshUser();
|
|
setStep("idle");
|
|
setOtpValue("");
|
|
} catch (_error) {
|
|
toast.error("Code invalide. Veuillez réessayer.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDisable = async () => {
|
|
if (otpValue.length !== 6) return;
|
|
setIsLoading(true);
|
|
try {
|
|
await AuthService.disable2fa(otpValue);
|
|
toast.success("Double authentification désactivée.");
|
|
await refreshUser();
|
|
setStep("idle");
|
|
setOtpValue("");
|
|
} catch (_error) {
|
|
toast.error("Code invalide. Veuillez réessayer.");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
// Note: We need a way to know if 2FA is enabled.
|
|
const isEnabled = user?.twoFactorEnabled;
|
|
|
|
if (step === "idle") {
|
|
return (
|
|
<Card className="border-none shadow-sm">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Shield className="h-5 w-5 text-primary" />
|
|
<CardTitle>Double Authentification (2FA)</CardTitle>
|
|
</div>
|
|
<CardDescription>
|
|
Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant
|
|
une application d'authentification.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-4 p-4 rounded-lg bg-zinc-50 dark:bg-zinc-900 border">
|
|
{isEnabled ? (
|
|
<>
|
|
<div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-full">
|
|
<ShieldCheck className="h-6 w-6 text-green-600 dark:text-green-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-bold">La 2FA est activée</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Votre compte est protégé par un code temporaire.
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={() => setStep("verify")}>
|
|
Désactiver
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="bg-zinc-200 dark:bg-zinc-800 p-2 rounded-full">
|
|
<ShieldAlert className="h-6 w-6 text-zinc-500" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-bold">La 2FA n'est pas activée</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Activez la 2FA pour mieux protéger votre compte.
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={handleSetup}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
"Configurer"
|
|
)}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (step === "setup") {
|
|
return (
|
|
<Card className="border-none shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle>Configurer la 2FA</CardTitle>
|
|
<CardDescription>
|
|
Scannez le QR Code ci-dessous avec votre application d'authentification
|
|
(Google Authenticator, Authy, etc.).
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col items-center gap-6">
|
|
{qrCode && (
|
|
<div className="relative group">
|
|
<div
|
|
className={`bg-white p-4 rounded-xl border-4 border-zinc-100 transition-all duration-300 ${
|
|
!isRevealed ? "blur-md select-none" : ""
|
|
}`}
|
|
>
|
|
<Image
|
|
src={qrCode}
|
|
alt="QR Code 2FA"
|
|
width={192}
|
|
height={192}
|
|
className="w-48 h-48"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
{!isRevealed && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => setIsRevealed(true)}
|
|
className="shadow-lg"
|
|
>
|
|
Afficher le QR Code
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="w-full space-y-2">
|
|
<p className="text-sm font-medium text-center">
|
|
Ou entrez ce code manuellement :
|
|
</p>
|
|
<div className="relative group">
|
|
<code
|
|
className={`block p-2 bg-muted text-center rounded text-xs font-mono break-all transition-all duration-300 ${
|
|
!isRevealed ? "blur-[3px] select-none" : ""
|
|
}`}
|
|
>
|
|
{secret}
|
|
</code>
|
|
{!isRevealed && (
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsRevealed(true)}
|
|
className="text-[10px] font-bold uppercase tracking-wider text-primary hover:underline"
|
|
>
|
|
Afficher le code
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-4 w-full border-t pt-6">
|
|
<p className="text-sm font-medium">
|
|
Entrez le code à 6 chiffres pour confirmer :
|
|
</p>
|
|
<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button variant="ghost" onClick={() => setStep("idle")}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
onClick={handleEnable}
|
|
disabled={otpValue.length !== 6 || isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
"Activer la 2FA"
|
|
)}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (step === "verify") {
|
|
return (
|
|
<Card className="border-none shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle>Désactiver la 2FA</CardTitle>
|
|
<CardDescription>
|
|
Veuillez entrer le code de votre application pour désactiver la double
|
|
authentification.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex flex-col items-center gap-6">
|
|
<InputOTP maxLength={6} value={otpValue} onChange={setOtpValue}>
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={0} />
|
|
<InputOTPSlot index={1} />
|
|
<InputOTPSlot index={2} />
|
|
</InputOTPGroup>
|
|
<InputOTPSeparator />
|
|
<InputOTPGroup>
|
|
<InputOTPSlot index={3} />
|
|
<InputOTPSlot index={4} />
|
|
<InputOTPSlot index={5} />
|
|
</InputOTPGroup>
|
|
</InputOTP>
|
|
</CardContent>
|
|
<CardFooter className="flex justify-between">
|
|
<Button variant="ghost" onClick={() => setStep("idle")}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleDisable}
|
|
disabled={otpValue.length !== 6 || isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
"Confirmer la désactivation"
|
|
)}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|