chore: add toggle 2FA validation by clients

2026-05-10 15:24:04 +02:00
parent 1c04ce3095
commit a081fd3b4d
2 changed files with 95 additions and 14 deletions
@@ -310,21 +310,29 @@ export default function ProfilePage() {
              Double authentification (2FA)
            </h2>
            <p className="profile-hint">
-              À chaque connexion, un code vous sera envoyé sur Telegram avant d'accéder à votre compte.
+              À chaque connexion, un code à 6 chiffres vous sera envoyé sur Telegram avant d'accéder à votre compte.
            </p>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '0.8rem' }}>
-              <button
-                className={`profile-btn ${twoFAEnabled ? 'profile-btn--danger' : 'profile-btn--telegram'}`}
-                onClick={handleToggle2FA}
-                disabled={twoFALoading}
-              >
-                <FontAwesomeIcon icon={faShieldAlt} />
-                {twoFALoading ? ' ...' : twoFAEnabled ? ' Désactiver la 2FA' : ' Activer la 2FA'}
-              </button>
-              {twoFAEnabled && (
-                <span style={{ color: '#10b981', fontSize: '0.9rem' }}>
-                  <FontAwesomeIcon icon={faCheckCircle} /> Activée
-                </span>
+            <div className="profile-2fa-row">
+              <div className="profile-2fa-label">
+                <span>{twoFAEnabled ? 'Activée' : 'Désactivée'}</span>
+                {twoFAEnabled && (
+                  <span className="profile-2fa-badge">
+                    <FontAwesomeIcon icon={faCheckCircle} /> Protection active
+                  </span>
+                )}
+              </div>
+              {twoFALoading ? (
+                <div className="profile-2fa-spinner" />
+              ) : (
+                <button
+                  role="switch"
+                  aria-checked={twoFAEnabled}
+                  className={`profile-toggle ${twoFAEnabled ? 'profile-toggle--on' : ''}`}
+                  onClick={handleToggle2FA}
+                  aria-label="Activer ou désactiver la double authentification"
+                >
+                  <span className="profile-toggle-thumb" />
+                </button>
              )}
            </div>
          </div>