refactor: improve formatting, type safety, and component organization

- Adjusted inconsistent formatting for better readability across components and services.
- Enhanced type safety by adding placeholders for ignored error parameters and improving types across services.
- Improved component organization by reordering imports consistently and applying formatting updates in UI components.
This commit is contained in:
Mathis HERRIOT
2026-01-29 14:11:28 +01:00
parent 3edf5cc070
commit 9ccbd2ceb1
11 changed files with 133 additions and 59 deletions

View File

@@ -1,8 +1,8 @@
"use client";
import { Loader2, Shield, ShieldAlert, ShieldCheck } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Shield, ShieldCheck, ShieldAlert, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Card,
@@ -18,8 +18,8 @@ import {
InputOTPSeparator,
InputOTPSlot,
} from "@/components/ui/input-otp";
import { AuthService } from "@/services/auth.service";
import { useAuth } from "@/providers/auth-provider";
import { AuthService } from "@/services/auth.service";
export function TwoFactorSetup() {
const { user, refreshUser } = useAuth();
@@ -36,7 +36,7 @@ export function TwoFactorSetup() {
setQrCode(data.qrCodeUrl);
setSecret(data.secret);
setStep("setup");
} catch (error) {
} catch (_error) {
toast.error("Erreur lors de la configuration de la 2FA.");
} finally {
setIsLoading(false);
@@ -52,7 +52,7 @@ export function TwoFactorSetup() {
await refreshUser();
setStep("idle");
setOtpValue("");
} catch (error) {
} catch (_error) {
toast.error("Code invalide. Veuillez réessayer.");
} finally {
setIsLoading(false);
@@ -68,14 +68,14 @@ export function TwoFactorSetup() {
await refreshUser();
setStep("idle");
setOtpValue("");
} catch (error) {
} catch (_error) {
toast.error("Code invalide. Veuillez réessayer.");
} finally {
setIsLoading(false);
}
};
// Note: We need a way to know if 2FA is enabled.
// Note: We need a way to know if 2FA is enabled.
// Assuming user object might have twoFactorEnabled property or similar.
// For now, let's assume it's on the user object (we might need to add it to the type).
const isEnabled = (user as any)?.twoFactorEnabled;
@@ -89,7 +89,8 @@ export function TwoFactorSetup() {
<CardTitle>Double Authentification (2FA)</CardTitle>
</div>
<CardDescription>
Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant une application d'authentification.
Ajoutez une couche de sécurité supplémentaire à votre compte en utilisant
une application d'authentification.
</CardDescription>
</CardHeader>
<CardContent>
@@ -101,7 +102,9 @@ export function TwoFactorSetup() {
</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>
<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
@@ -114,10 +117,21 @@ export function TwoFactorSetup() {
</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>
<p className="text-sm text-muted-foreground">
Activez la 2FA pour mieux protéger votre compte.
</p>
</div>
<Button variant="primary" size="sm" onClick={handleSetup} disabled={isLoading}>
{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : "Configurer"}
<Button
variant="default"
size="sm"
onClick={handleSetup}
disabled={isLoading}
>
{isLoading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
"Configurer"
)}
</Button>
</>
)}
@@ -133,7 +147,8 @@ export function TwoFactorSetup() {
<CardHeader>
<CardTitle>Configurer la 2FA</CardTitle>
<CardDescription>
Scannez le QR Code ci-dessous avec votre application d'authentification (Google Authenticator, Authy, etc.).
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">
@@ -143,13 +158,17 @@ export function TwoFactorSetup() {
</div>
)}
<div className="w-full space-y-2">
<p className="text-sm font-medium text-center">Ou entrez ce code manuellement :</p>
<p className="text-sm font-medium text-center">
Ou entrez ce code manuellement :
</p>
<code className="block p-2 bg-muted text-center rounded text-xs font-mono break-all">
{secret}
</code>
</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>
<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} />
@@ -166,9 +185,18 @@ export function TwoFactorSetup() {
</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 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>
@@ -181,7 +209,8 @@ export function TwoFactorSetup() {
<CardHeader>
<CardTitle>Désactiver la 2FA</CardTitle>
<CardDescription>
Veuillez entrer le code de votre application pour désactiver la double authentification.
Veuillez entrer le code de votre application pour désactiver la double
authentification.
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col items-center gap-6">
@@ -200,9 +229,19 @@ export function TwoFactorSetup() {
</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 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>