feat(teamsbot): user account credentials UI and MFA challenge dialog

Made-with: Cursor

src/api/teamsbotApi.ts

@@ -156,9 +156,24 @@ export interface AuthTestResults {
   };
 }
 
+// User Account (Mein Account) Types
+export interface UserAccountStatus {
+  hasSavedCredentials: boolean;
+  email?: string;
+  displayName?: string;
+}
+
+// MFA Types
+export interface MfaChallengeEvent {
+  mfaType: 'numberMatch' | 'pushApproval' | 'smsCode' | 'totpCode' | 'timeout' | 'unknown';
+  displayNumber?: string;
+  prompt: string;
+  timestamp?: string;
+}
+
 // SSE Event Types
 export interface TeamsbotSSEEvent {
-  type: 'transcript' | 'botResponse' | 'analysis' | 'suggestedResponse' | 'statusChange' | 'error' | 'ping' | 'sessionState' | 'ttsDeliveryStatus';
+  type: 'transcript' | 'botResponse' | 'analysis' | 'suggestedResponse' | 'statusChange' | 'error' | 'ping' | 'sessionState' | 'ttsDeliveryStatus' | 'mfaChallenge' | 'mfaResolved';
   data: any;
   timestamp?: string;
 }
@@ -402,3 +417,48 @@ export function getScreenshotUrl(instanceId: string, filename: string): string {
   const baseUrl = api.defaults.baseURL || '';
   return `${baseUrl}/api/teamsbot/${instanceId}/screenshots/${filename}`;
 }
+
+// =========================================================================
+// User Account (Mein Account)
+// =========================================================================
+
+export async function getUserAccount(instanceId: string): Promise<UserAccountStatus> {
+  const response = await api.get(`/api/teamsbot/${instanceId}/user-account`);
+  return response.data;
+}
+
+export async function saveUserAccount(
+  instanceId: string,
+  email: string,
+  password: string,
+  displayName?: string,
+): Promise<{ saved: boolean; email: string }> {
+  const response = await api.post(`/api/teamsbot/${instanceId}/user-account`, {
+    email,
+    password,
+    displayName,
+  });
+  return response.data;
+}
+
+export async function deleteUserAccount(instanceId: string): Promise<{ deleted: boolean }> {
+  const response = await api.delete(`/api/teamsbot/${instanceId}/user-account`);
+  return response.data;
+}
+
+// =========================================================================
+// MFA
+// =========================================================================
+
+export async function submitMfaCode(
+  instanceId: string,
+  sessionId: string,
+  code: string,
+  action: 'code' | 'confirmed' = 'code',
+): Promise<{ submitted: boolean }> {
+  const response = await api.post(`/api/teamsbot/${instanceId}/sessions/${sessionId}/mfa`, {
+    code,
+    action,
+  });
+  return response.data;
+}

src/pages/views/teamsbot/Teamsbot.module.css

@@ -163,6 +163,112 @@
   border-left: 3px solid var(--success-color, #2D8E5C);
 }
 
+/* User Account / MFA */
+.credentialsCard {
+  background: var(--surface-color, #f9f9f9);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  padding: 1rem 1.2rem;
+  margin-top: 0.5rem;
+}
+
+.credentialsInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.9rem;
+  gap: 0.5rem;
+}
+
+.credentialsEmail {
+  font-weight: 500;
+  color: var(--text-color, #333);
+}
+
+.checkboxRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+}
+
+.mfaOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.mfaDialog {
+  background: var(--surface-color, #fff);
+  border-radius: 12px;
+  padding: 2rem;
+  max-width: 420px;
+  width: 90%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  text-align: center;
+}
+
+.mfaTitle {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  color: var(--text-color, #333);
+}
+
+.mfaNumber {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--primary-color, #4A90D9);
+  margin: 1rem 0;
+  letter-spacing: 0.1em;
+}
+
+.mfaPrompt {
+  font-size: 0.9rem;
+  color: var(--text-secondary, #666);
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+
+.mfaCodeInput {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1.2rem;
+  text-align: center;
+  letter-spacing: 0.2em;
+  border: 2px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+}
+
+.mfaCodeInput:focus {
+  border-color: var(--primary-color, #4A90D9);
+  outline: none;
+}
+
+.mfaSpinner {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 3px solid var(--border-color, #e0e0e0);
+  border-top-color: var(--primary-color, #4A90D9);
+  border-radius: 50%;
+  animation: mfaSpin 0.8s linear infinite;
+  margin: 1rem auto;
+}
+
+@keyframes mfaSpin {
+  to { transform: rotate(360deg); }
+}
+
 /* Section */
 .sectionContainer {
   background: var(--surface-color, #fff);

src/pages/views/teamsbot/TeamsbotDashboardView.tsx

@@ -2,13 +2,14 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCurrentInstance } from '../../../hooks/useCurrentInstance';
 import * as teamsbotApi from '../../../api/teamsbotApi';
-import type { TeamsbotSession, StartSessionRequest, TeamsbotJoinMode } from '../../../api/teamsbotApi';
+import type { TeamsbotSession, StartSessionRequest, TeamsbotJoinMode, UserAccountStatus, MfaChallengeEvent } from '../../../api/teamsbotApi';
 import { getUserDataCache } from '../../../utils/userCache';
 import styles from './Teamsbot.module.css';
 
 /**
  * TeamsbotDashboardView - Overview of all Teams Bot sessions.
  * Allows starting new sessions and viewing active/past sessions.
+ * Supports "Mein Account" login with saved credentials and MFA relay.
  */
 export const TeamsbotDashboardView: React.FC = () => {
   const { instance, mandateId, featureCode } = useCurrentInstance();
@@ -29,6 +30,21 @@ export const TeamsbotDashboardView: React.FC = () => {
   const [sessionContext, setSessionContext] = useState('');
   const [isStarting, setIsStarting] = useState(false);
 
+  // User Account (Mein Account) state
+  const [userAccount, setUserAccount] = useState<UserAccountStatus | null>(null);
+  const [showCredentialForm, setShowCredentialForm] = useState(false);
+  const [credEmail, setCredEmail] = useState('');
+  const [credPassword, setCredPassword] = useState('');
+  const [saveCredentials, setSaveCredentials] = useState(true);
+  const [savingCredentials, setSavingCredentials] = useState(false);
+
+  // MFA state
+  const [mfaChallenge, setMfaChallenge] = useState<MfaChallengeEvent | null>(null);
+  const [mfaCode, setMfaCode] = useState('');
+  const [mfaSessionId, setMfaSessionId] = useState<string | null>(null);
+  const [mfaWaitingPush, setMfaWaitingPush] = useState(false);
+  const sseRef = useRef<EventSource | null>(null);
+
   const _loadSessions = useCallback(async () => {
     if (!instanceId) return;
     try {
@@ -47,6 +63,13 @@ export const TeamsbotDashboardView: React.FC = () => {
     _loadSessions();
   }, [_loadSessions]);
 
+  // Load user account status when joinMode changes to userAccount
+  useEffect(() => {
+    if (joinMode === 'userAccount' && instanceId) {
+      teamsbotApi.getUserAccount(instanceId).then(setUserAccount).catch(() => setUserAccount(null));
+    }
+  }, [joinMode, instanceId]);
+
   // Auto-refresh: poll every 10s when there are active sessions
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   useEffect(() => {
@@ -59,12 +82,73 @@ export const TeamsbotDashboardView: React.FC = () => {
     return () => { if (pollRef.current) clearInterval(pollRef.current); };
   }, [sessions, instanceId]);
 
+  // Cleanup SSE on unmount
+  useEffect(() => {
+    return () => { sseRef.current?.close(); };
+  }, []);
+
+  const _startMfaListener = useCallback((sessionId: string) => {
+    sseRef.current?.close();
+    const es = teamsbotApi.createSessionStream(instanceId, sessionId);
+    sseRef.current = es;
+    setMfaSessionId(sessionId);
+
+    es.onmessage = (event) => {
+      try {
+        const parsed = JSON.parse(event.data);
+        if (parsed.type === 'mfaChallenge') {
+          const data = parsed.data as MfaChallengeEvent;
+          if (data.mfaType === 'timeout') {
+            setMfaChallenge(null);
+            setMfaWaitingPush(false);
+            setError('MFA-Zeitlimit ueberschritten. Bitte erneut versuchen.');
+          } else {
+            setMfaChallenge(data);
+            setMfaCode('');
+            setMfaWaitingPush(data.mfaType === 'pushApproval' || data.mfaType === 'numberMatch');
+          }
+        } else if (parsed.type === 'mfaResolved') {
+          setMfaChallenge(null);
+          setMfaWaitingPush(false);
+          setMfaSessionId(null);
+          es.close();
+          sseRef.current = null;
+          _loadSessions();
+        }
+      } catch { /* ignore parse errors */ }
+    };
+  }, [instanceId, _loadSessions]);
+
   const _handleStartSession = async () => {
     if (!meetingLink.trim()) return;
-    
+
+    // For userAccount: need credentials (saved or entered now)
+    if (joinMode === 'userAccount' && !userAccount?.hasSavedCredentials && !credEmail) {
+      setShowCredentialForm(true);
+      return;
+    }
+
+    // Save credentials if requested (first-time entry)
+    if (joinMode === 'userAccount' && showCredentialForm && credEmail && credPassword) {
+      if (saveCredentials) {
+        try {
+          setSavingCredentials(true);
+          await teamsbotApi.saveUserAccount(instanceId, credEmail, credPassword);
+          setUserAccount({ hasSavedCredentials: true, email: credEmail });
+        } catch (err: any) {
+          setError(err.message || 'Fehler beim Speichern der Zugangsdaten');
+          setSavingCredentials(false);
+          return;
+        } finally {
+          setSavingCredentials(false);
+        }
+      }
+      setShowCredentialForm(false);
+    }
+
     setIsStarting(true);
     setError(null);
-    
+
     try {
       const request: StartSessionRequest = {
         meetingLink: meetingLink.trim(),
@@ -72,10 +156,17 @@ export const TeamsbotDashboardView: React.FC = () => {
         joinMode: joinMode,
         sessionContext: sessionContext.trim() || undefined,
       };
-      
+
-      await teamsbotApi.startSession(instanceId, request);
+      const result = await teamsbotApi.startSession(instanceId, request);
+      const newSessionId = result.session?.id;
       setMeetingLink('');
       setBotName('');
+
+      // Start SSE listener for MFA events if userAccount mode
+      if (joinMode === 'userAccount' && newSessionId) {
+        _startMfaListener(newSessionId);
+      }
+
       await _loadSessions();
     } catch (err: any) {
       setError(err.message || 'Fehler beim Starten der Sitzung');
@@ -84,6 +175,35 @@ export const TeamsbotDashboardView: React.FC = () => {
     }
   };
 
+  const _handleSubmitMfaCode = async () => {
+    if (!mfaSessionId || !instanceId) return;
+    const needsCode = mfaChallenge?.mfaType === 'totpCode' || mfaChallenge?.mfaType === 'smsCode';
+    try {
+      await teamsbotApi.submitMfaCode(
+        instanceId,
+        mfaSessionId,
+        needsCode ? mfaCode : '',
+        needsCode ? 'code' : 'confirmed',
+      );
+      if (!needsCode) {
+        setMfaWaitingPush(true);
+      }
+    } catch (err: any) {
+      setError(err.message || 'Fehler beim Senden des MFA-Codes');
+    }
+  };
+
+  const _handleDeleteUserAccount = async () => {
+    try {
+      await teamsbotApi.deleteUserAccount(instanceId);
+      setUserAccount({ hasSavedCredentials: false });
+      setCredEmail('');
+      setCredPassword('');
+    } catch (err: any) {
+      setError(err.message || 'Fehler beim Loeschen der Zugangsdaten');
+    }
+  };
+
   const _handleStopSession = async (sessionId: string) => {
     try {
       await teamsbotApi.stopSession(instanceId, sessionId);
@@ -129,8 +249,53 @@ export const TeamsbotDashboardView: React.FC = () => {
   const activeSessions = sessions.filter(s => ['pending', 'joining', 'active'].includes(s.status));
   const pastSessions = sessions.filter(s => ['ended', 'error', 'leaving'].includes(s.status));
 
+  const _needsCodeInput = mfaChallenge?.mfaType === 'totpCode' || mfaChallenge?.mfaType === 'smsCode';
+
   return (
     <div className={styles.dashboardContainer}>
+      {/* MFA Challenge Dialog */}
+      {mfaChallenge && (
+        <div className={styles.mfaOverlay}>
+          <div className={styles.mfaDialog}>
+            <div className={styles.mfaTitle}>Multi-Faktor-Authentifizierung</div>
+
+            {mfaChallenge.displayNumber && (
+              <div className={styles.mfaNumber}>{mfaChallenge.displayNumber}</div>
+            )}
+
+            <div className={styles.mfaPrompt}>{mfaChallenge.prompt}</div>
+
+            {_needsCodeInput ? (
+              <>
+                <input
+                  type="text"
+                  className={styles.mfaCodeInput}
+                  placeholder="Code eingeben"
+                  value={mfaCode}
+                  onChange={(e) => setMfaCode(e.target.value)}
+                  autoFocus
+                  onKeyDown={(e) => e.key === 'Enter' && _handleSubmitMfaCode()}
+                />
+                <button className={styles.startButton} onClick={_handleSubmitMfaCode} disabled={!mfaCode.trim()}>
+                  Bestaetigen
+                </button>
+              </>
+            ) : mfaWaitingPush ? (
+              <>
+                <div className={styles.mfaSpinner} />
+                <p style={{ fontSize: '0.85rem', color: '#888' }}>
+                  Warte auf Bestaetigung in der Authenticator App...
+                </p>
+              </>
+            ) : (
+              <button className={styles.startButton} onClick={_handleSubmitMfaCode}>
+                Ich habe bestaetigt
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
       {/* Start New Session Card */}
       <div className={styles.startSessionCard}>
         <h3 className={styles.cardTitle}>Neue Bot-Sitzung starten</h3>
@@ -164,6 +329,73 @@ export const TeamsbotDashboardView: React.FC = () => {
           </select>
         </div>
 
+        {/* User Account: saved credentials info or credential form */}
+        {joinMode === 'userAccount' && (
+          <div className={styles.credentialsCard}>
+            {userAccount?.hasSavedCredentials && !showCredentialForm ? (
+              <div className={styles.credentialsInfo}>
+                <span>
+                  Gespeichert: <span className={styles.credentialsEmail}>{userAccount.email}</span>
+                </span>
+                <div style={{ display: 'flex', gap: '0.5rem' }}>
+                  <button
+                    className={styles.viewButton}
+                    onClick={() => { setShowCredentialForm(true); setCredEmail(userAccount.email || ''); }}
+                  >
+                    Aendern
+                  </button>
+                  <button className={styles.deleteButton} onClick={_handleDeleteUserAccount}>
+                    Entfernen
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <>
+                <div className={styles.formGroup}>
+                  <label className={styles.label}>Microsoft E-Mail</label>
+                  <input
+                    type="email"
+                    className={styles.input}
+                    placeholder="name@example.com"
+                    value={credEmail}
+                    onChange={(e) => setCredEmail(e.target.value)}
+                    disabled={savingCredentials}
+                  />
+                </div>
+                <div className={styles.formGroup}>
+                  <label className={styles.label}>Passwort</label>
+                  <input
+                    type="password"
+                    className={styles.input}
+                    placeholder="Microsoft-Passwort"
+                    value={credPassword}
+                    onChange={(e) => setCredPassword(e.target.value)}
+                    disabled={savingCredentials}
+                  />
+                </div>
+                <div className={styles.checkboxRow}>
+                  <input
+                    type="checkbox"
+                    id="saveCredentials"
+                    checked={saveCredentials}
+                    onChange={(e) => setSaveCredentials(e.target.checked)}
+                  />
+                  <label htmlFor="saveCredentials">Zugangsdaten speichern (verschluesselt)</label>
+                </div>
+                {userAccount?.hasSavedCredentials && (
+                  <button
+                    className={styles.viewButton}
+                    style={{ marginTop: '0.5rem' }}
+                    onClick={() => setShowCredentialForm(false)}
+                  >
+                    Abbrechen
+                  </button>
+                )}
+              </>
+            )}
+          </div>
+        )}
+
         <div className={styles.formGroup}>
           <label className={styles.label}>Bot-Name (optional)</label>
           <input
@@ -196,7 +428,7 @@ export const TeamsbotDashboardView: React.FC = () => {
         <button
           className={styles.startButton}
           onClick={_handleStartSession}
-          disabled={isStarting || !meetingLink.trim()}
+          disabled={isStarting || !meetingLink.trim() || (joinMode === 'userAccount' && showCredentialForm && (!credEmail || !credPassword))}
         >
           {isStarting ? 'Wird gestartet...' : 'Bot ins Meeting senden'}
         </button>