chore: add toggle 2FA validation by clients

frontend-prep/src/pages/User/ProfilePage.css

@@ -179,6 +179,79 @@
   font-weight: 500;
 }
 
+/* Toggle 2FA */
+.profile-2fa-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 0.4rem;
+  gap: 1rem;
+}
+
+.profile-2fa-label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.profile-2fa-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: #10b981;
+}
+
+.profile-toggle {
+  position: relative;
+  width: 48px;
+  height: 26px;
+  border-radius: 13px;
+  border: none;
+  background: var(--border);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 0.25s;
+}
+
+.profile-toggle--on {
+  background: #6366f155;
+  border: 1px solid #6366f1;
+}
+
+.profile-toggle-thumb {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  transition: transform 0.25s, background 0.25s;
+}
+
+.profile-toggle--on .profile-toggle-thumb {
+  transform: translateX(22px);
+  background: #6366f1;
+}
+
+.profile-2fa-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #6366f133;
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
 @media (max-width: 480px) {
   .profile-row { grid-template-columns: 1fr; }
 }

frontend-prep/src/pages/User/ProfilePage.tsx

@@ -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>