chore: fix

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

@@ -44,6 +44,8 @@ export default function ProfilePage() {
 
   // Modal confirmation infos par défaut
   const [showSaveModal, setShowSaveModal] = useState(false);
+  const [showUnlinkModal, setShowUnlinkModal] = useState(false);
+  const [showUnlinkSuccessModal, setShowUnlinkSuccessModal] = useState(false);
 
   const username = extractUsernameFromToken() ?? '';
 
@@ -111,12 +113,16 @@ export default function ProfilePage() {
     window.open(res.link_url, '_blank');
   };
 
-  const handleUnlinkTelegram = async () => {
-    if (!window.confirm('Délier votre compte Telegram ? Vous ne recevrez plus de notifications.')) return;
+  const handleUnlinkTelegram = () => {
+    setShowUnlinkModal(true);
+  };
+
+  const confirmUnlinkTelegram = async () => {
+    setShowUnlinkModal(false);
     await unlinkTelegram();
     setTgLinked(false);
     setTwoFAEnabled(false);
-    showSuccess('Compte Telegram délié');
+    setShowUnlinkSuccessModal(true);
   };
 
   const handleToggle2FA = async () => {
@@ -371,6 +377,53 @@ export default function ProfilePage() {
           </div>
         </div>
       )}
+
+      {showUnlinkModal && (
+        <div className="profile-modal-overlay" onClick={() => setShowUnlinkModal(false)}>
+          <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
+            <button className="profile-modal-close" onClick={() => setShowUnlinkModal(false)}>
+              <FontAwesomeIcon icon={faTimes} />
+            </button>
+            <div className="profile-modal-icon profile-modal-icon--danger">
+              <FontAwesomeIcon icon={faUnlink} />
+            </div>
+            <h3 className="profile-modal-title">Délier Telegram ?</h3>
+            <p className="profile-modal-body">
+              Vous ne recevrez plus de notifications Telegram. La double authentification sera également désactivée.
+            </p>
+            <div className="profile-modal-actions">
+              <button className="profile-modal-btn profile-modal-btn--cancel" onClick={() => setShowUnlinkModal(false)}>
+                Annuler
+              </button>
+              <button className="profile-modal-btn profile-modal-btn--danger" onClick={confirmUnlinkTelegram}>
+                <FontAwesomeIcon icon={faUnlink} /> Délier
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {showUnlinkSuccessModal && (
+        <div className="profile-modal-overlay" onClick={() => setShowUnlinkSuccessModal(false)}>
+          <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
+            <button className="profile-modal-close" onClick={() => setShowUnlinkSuccessModal(false)}>
+              <FontAwesomeIcon icon={faTimes} />
+            </button>
+            <div className="profile-modal-icon profile-modal-icon--success">
+              <FontAwesomeIcon icon={faCheckCircle} />
+            </div>
+            <h3 className="profile-modal-title">Compte délié</h3>
+            <p className="profile-modal-body">
+              Votre compte Telegram a été délié avec succès. Vous ne recevrez plus de notifications via Telegram.
+            </p>
+            <div className="profile-modal-actions">
+              <button className="profile-modal-btn profile-modal-btn--confirm" onClick={() => setShowUnlinkSuccessModal(false)}>
+                <FontAwesomeIcon icon={faCheckCircle} /> Fermer
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 }