change and add into components, widgets and pages

2026-07-30 14:08:49 +02:00
parent ec900efe3a
commit 057aa628a3
39 changed files with 1620 additions and 1062 deletions
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { Button } from '@/components/ui/Button';
+
+interface MfaFormProps {
+  isFirstSetup: boolean;
+  qrUrl: string;
+  isLoading: boolean;
+  onVerify: (code: string) => void;
+  onCancel: () => void;
+}
+
+export const MfaForm: React.FC<MfaFormProps> = ({ isFirstSetup, qrUrl, isLoading, onVerify, onCancel }) => {
+  const [code, setCode] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onVerify(code);
+  };
+
+  return (
+    <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleSubmit}>
+      {isFirstSetup ? (
+        <div className="text-center mb-6">
+          <p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
+          <p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy.</p>
+          <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
+            <QRCodeSVG value={qrUrl} size={150} />
+          </div>
+        </div>
+      ) : (
+        <div className="text-center mb-6">
+          <p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
+          <p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
+        </div>
+      )}
+      
+      <div>
+        <input 
+          type="text" required maxLength={6} placeholder="000000"
+          value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))} // Force les chiffres
+          className="block w-full rounded-md border border-slate-300 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 font-mono shadow-sm focus:border-blue-900 focus:ring-blue-900" 
+        />
+      </div>
+      
+      <div className="flex space-x-3">
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading} className="w-1/3">
+          Annuler
+        </Button>
+        <Button type="submit" isLoading={isLoading} disabled={code.length !== 6} className="w-2/3 bg-emerald-600 hover:bg-emerald-700">
+          Déverrouiller
+        </Button>
+      </div>
+    </form>
+  );
+};