feat(teamsbot): user account credentials UI and MFA challenge dialog
Made-with: Cursor
This commit is contained in:
ValueOn AG
parent
53dd0176b6
commit
bc5bae7c34
3 changed files with 405 additions and 7 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,9 +82,70 @@ 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);
|
||||
|
||||
|
|
@ -73,9 +157,16 @@ export const TeamsbotDashboardView: React.FC = () => {
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue