fix(mail/oauth): drop User.Read scope — MS rejects multi-resource at /token
Microsoft V2.0 OAuth-Spezifikation: ein einzelner /token-Exchange darf nur Scopes EINES Resource-Servers enthalten. Unsere bisherige Scope-Liste mischte: https://outlook.office.com/IMAP.AccessAsUser.All (outlook.office.com) User.Read (graph.microsoft.com) Im /authorize akzeptiert MS das (Multi-Consent-Screen), aber beim Token- Exchange wirft MS AADSTS70011: "The provided value for the input parameter 'scope' is not valid. One or more scopes [...] are not compatible with each other." Fix: User.Read raus. Display-Name in der App entfällt vorerst — Email kommt sauber aus id_token.preferred_username (bei Consumer-MS-Accounts typisch die Login-Email). Falls Display-Name künftig gebraucht wird → separater Graph-Token-Exchange via On-Behalf-Of-Pattern. Plus: ConnectMailSheet zeigt jetzt im roten Error-Banner den echten Backend-Error (API-Status + Body) statt nur generischen Text — sonst würden wir solche MS-Spezifika nie auf dem Device sehen. Hans-Müller-Memo Section 3.1 (Datenkategorien) + Section 4.1 (Datenschutzerklärung) müssen entsprechend zurückgerollt werden — siehe separater DSB-Update-Stream. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chahinebrini
parent
7fb76465f0
commit
09d85180b6
@ -275,7 +275,9 @@ export default function MailScreen() {
|
||||
<MailEmptyState onConnectPress={handleAddPress} />
|
||||
) : (
|
||||
<View>
|
||||
{accounts.map((account, idx) => (
|
||||
{accounts.map((account, idx) => {
|
||||
const connStat = blockedByConnection.find((c) => c.connectionId === account.id);
|
||||
return (
|
||||
<View key={account.id} style={{ marginTop: idx === 0 ? 0 : 10 }}>
|
||||
<MailAccountCard
|
||||
account={account}
|
||||
@ -286,9 +288,11 @@ export default function MailScreen() {
|
||||
onIntervalChanged={refresh}
|
||||
onEditSuccess={handleConnectSuccess}
|
||||
disconnecting={disconnectingId === account.id && disconnecting}
|
||||
blockedLast30d={connStat?.count}
|
||||
/>
|
||||
</View>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
|
||||
|
||||
@ -190,6 +190,7 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
|
||||
'rebreak://auth/mail-oauth-callback'
|
||||
);
|
||||
|
||||
console.log('[oauth] WebBrowser result.type=', result.type);
|
||||
if (result.type !== 'success') {
|
||||
setOauthError(t('mail.oauth.error_aborted'));
|
||||
setView('oauth_warning');
|
||||
@ -197,9 +198,23 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
|
||||
return;
|
||||
}
|
||||
|
||||
const url = new URL(result.url);
|
||||
console.log('[oauth] result.url=', (result as any).url);
|
||||
const url = new URL((result as any).url);
|
||||
const code = url.searchParams.get('code');
|
||||
const state = url.searchParams.get('state');
|
||||
const msError = url.searchParams.get('error');
|
||||
const msErrorDescription = url.searchParams.get('error_description');
|
||||
console.log('[oauth] code?=', !!code, 'state?=', !!state, 'msError=', msError, 'desc=', msErrorDescription);
|
||||
|
||||
if (msError) {
|
||||
// Microsoft hat einen expliziten Error im Redirect zurückgegeben (z.B.
|
||||
// access_denied wenn User Consent abbricht, invalid_redirect_uri wenn
|
||||
// Azure-App-Config nicht stimmt). Zeig dem User den echten Grund.
|
||||
setOauthError(`Microsoft: ${msError}${msErrorDescription ? ` — ${msErrorDescription}` : ''}`);
|
||||
setView('oauth_warning');
|
||||
setOauthRunning(false);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!code || !state) {
|
||||
setOauthError(t('mail.oauth.error_no_code'));
|
||||
@ -218,7 +233,12 @@ export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
|
||||
handleClose();
|
||||
onSuccess();
|
||||
} catch (e: any) {
|
||||
setOauthError(t('mail.oauth.error_callback_failed'));
|
||||
// Den echten Backend-Fehler sichtbar machen statt nur generischen Text
|
||||
// (apiFetch wirft `Error("API <status>: <body>")` — Status + Body landen
|
||||
// dann sowohl in Metro-Logs als auch im UI-Banner).
|
||||
const detail = (e?.message ?? String(e)) || 'unknown';
|
||||
console.log('[oauth] callback API call failed — error=', detail);
|
||||
setOauthError(`${t('mail.oauth.error_callback_failed')}\n${detail}`);
|
||||
setView('oauth_warning');
|
||||
setOauthRunning(false);
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
LayoutAnimation,
|
||||
Linking,
|
||||
Modal,
|
||||
@ -15,8 +14,10 @@ import { useTranslation } from 'react-i18next';
|
||||
import { ConfirmAlert } from '../ConfirmAlert';
|
||||
import { EditMailAccountSheet } from './EditMailAccountSheet';
|
||||
import { EditMailTitleSheet } from './EditMailTitleSheet';
|
||||
import { useMailInterval } from '../../hooks/useMailInterval';
|
||||
import { MailAccountSettingsSheet } from './MailAccountSettingsSheet';
|
||||
import { MailBlockedByDayChart } from './MailBlockedByDayChart';
|
||||
import type { MailAccount } from '../../hooks/useMailStatus';
|
||||
import type { BlockedByDayEntry } from '../../hooks/useMailStats';
|
||||
|
||||
if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
|
||||
UIManager.setLayoutAnimationEnabledExperimental(true);
|
||||
@ -31,300 +32,10 @@ type Props = {
|
||||
onIntervalChanged: () => void;
|
||||
onEditSuccess: () => void;
|
||||
disconnecting?: boolean;
|
||||
blockedLast30d?: number;
|
||||
connectionBlockedByDay?: BlockedByDayEntry[];
|
||||
};
|
||||
|
||||
function PausedBadge({ t }: { t: (k: string) => string }) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 6,
|
||||
paddingVertical: 2,
|
||||
borderRadius: 5,
|
||||
backgroundColor: 'rgba(115,115,115,0.1)',
|
||||
alignSelf: 'flex-start',
|
||||
marginTop: 3,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 10, color: '#737373', fontFamily: 'Nunito_600SemiBold' }}>
|
||||
{t('plan_limit.mail_account_paused')}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function resolveProviderIcon(provider: string): {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
color: string;
|
||||
} {
|
||||
const p = provider.toLowerCase();
|
||||
if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
|
||||
if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
|
||||
if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
|
||||
return { icon: 'mail-open', color: '#0078D4' };
|
||||
if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
|
||||
if (p.includes('gmx') || p.includes('web.de'))
|
||||
return { icon: 'mail-unread', color: '#E87A22' };
|
||||
return { icon: 'server', color: '#737373' };
|
||||
}
|
||||
|
||||
function isOAuthProvider(provider: string): boolean {
|
||||
return provider === 'outlook_oauth';
|
||||
}
|
||||
|
||||
const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
|
||||
const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
|
||||
const NO_NEW_MAIL_THRESHOLD_MS = 60 * 60_000;
|
||||
|
||||
function formatRelativeAbsolute(ts: Date): string {
|
||||
const min = Math.floor((Date.now() - ts.getTime()) / 60_000);
|
||||
const todayStr = new Date().toDateString();
|
||||
const yesterdayStr = new Date(Date.now() - 86_400_000).toDateString();
|
||||
|
||||
const hh = ts.getHours().toString().padStart(2, '0');
|
||||
const mm = ts.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
let dayLabel: string;
|
||||
if (ts.toDateString() === todayStr) dayLabel = 'heute';
|
||||
else if (ts.toDateString() === yesterdayStr) dayLabel = 'gestern';
|
||||
else dayLabel = ts.toLocaleDateString('de', { day: '2-digit', month: '2-digit' });
|
||||
|
||||
let rel: string;
|
||||
if (min < 1) rel = 'gerade eben';
|
||||
else if (min < 60) rel = `vor ${min} min`;
|
||||
else if (min < 1440) rel = `vor ${Math.floor(min / 60)}h`;
|
||||
else rel = `vor ${Math.floor(min / 1440)}d`;
|
||||
|
||||
return `${rel} (${dayLabel} ${hh}:${mm})`;
|
||||
}
|
||||
|
||||
function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
|
||||
if (!lastIdleHeartbeatAt) return false;
|
||||
return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
|
||||
}
|
||||
|
||||
function StatusBadgeRow({
|
||||
account,
|
||||
isLegend,
|
||||
t,
|
||||
}: {
|
||||
account: MailAccount;
|
||||
isLegend: boolean;
|
||||
t: (k: string, opts?: Record<string, string | number>) => string;
|
||||
}) {
|
||||
if (account.lastConnectError) {
|
||||
const isAuthError =
|
||||
account.lastConnectError.toLowerCase().includes('invalid credentials') ||
|
||||
account.lastConnectError.toLowerCase().includes('authentication failed');
|
||||
const errorLabel = isAuthError ? t('mail.status_auth_error') : t('mail.status_connect_error');
|
||||
const since = account.lastConnectErrorAt
|
||||
? formatRelativeAbsolute(new Date(account.lastConnectErrorAt))
|
||||
: null;
|
||||
return (
|
||||
<View style={{ marginTop: 3 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Ionicons name="lock-closed" size={11} color="#dc2626" style={{ marginRight: 4 }} />
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
|
||||
{errorLabel}
|
||||
</Text>
|
||||
<Text
|
||||
style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginLeft: 4 }}
|
||||
>
|
||||
· {t('mail.status_error_tap_hint')}
|
||||
</Text>
|
||||
</View>
|
||||
{since ? (
|
||||
<Text
|
||||
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
||||
>
|
||||
{since}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!account.lastScannedAt) {
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
|
||||
<View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#a3a3a3', marginRight: 5 }} />
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#a3a3a3' }}>
|
||||
{t('mail.status_waiting_first_connect')}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
|
||||
const lastScannedTs = new Date(account.lastScannedAt);
|
||||
const scannedAgo = Date.now() - lastScannedTs.getTime();
|
||||
const scannedRelAbs = formatRelativeAbsolute(lastScannedTs);
|
||||
|
||||
if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) {
|
||||
return (
|
||||
<View style={{ marginTop: 3 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<View
|
||||
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#d97706', marginRight: 5 }}
|
||||
/>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#d97706' }}>
|
||||
{t('mail.status_stale')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{t('mail.status_stale_last_scan', { rel: scannedRelAbs })}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (heartbeatAlive) {
|
||||
const heartbeatTs = new Date(account.lastIdleHeartbeatAt!);
|
||||
const heartbeatMin = Math.floor((Date.now() - heartbeatTs.getTime()) / 60_000);
|
||||
const idleSince = heartbeatMin < 1 ? 'gerade eben' : `${heartbeatMin} min`;
|
||||
|
||||
if (scannedAgo > NO_NEW_MAIL_THRESHOLD_MS) {
|
||||
return (
|
||||
<View style={{ marginTop: 3 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<View
|
||||
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
||||
/>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
||||
{isLegend ? t('mail.live') : t('mail.account_active')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{t('mail.status_live_no_new_mail', { rel: scannedRelAbs })}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ marginTop: 3 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<View
|
||||
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
||||
/>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
||||
{isLegend ? t('mail.live') : t('mail.account_active')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{t('mail.status_live_idle', { rel: idleSince })}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ marginTop: 3 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<View
|
||||
style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: '#16a34a', marginRight: 5 }}
|
||||
/>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}>
|
||||
{isLegend ? t('mail.live') : t('mail.account_active')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
style={{ fontSize: 10, fontFamily: 'Nunito_400Regular', color: '#a3a3a3', marginTop: 1 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{formatRelativeAbsolute(new Date(account.lastScannedAt!))}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
|
||||
free: [4],
|
||||
pro: [1, 4, 8],
|
||||
legend: [1, 4, 8],
|
||||
};
|
||||
|
||||
function maskEmail(email: string): string {
|
||||
const [local, domain] = email.split('@');
|
||||
if (!local || !domain) return email;
|
||||
if (local.length <= 3) return `${local[0]}***@${domain}`;
|
||||
return `${local.slice(0, 3)}***@${domain}`;
|
||||
}
|
||||
|
||||
function domainFromEmail(email: string): string {
|
||||
return email.split('@')[1] ?? email;
|
||||
}
|
||||
|
||||
function SettingsRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
onPress,
|
||||
destructive,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
destructive?: boolean;
|
||||
}) {
|
||||
const color = destructive ? '#dc2626' : '#0a0a0a';
|
||||
const Wrapper = onPress ? TouchableOpacity : View;
|
||||
const wrapperProps = onPress
|
||||
? { activeOpacity: 0.7, onPress }
|
||||
: {};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
{...wrapperProps}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 14,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f5f5f5',
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={16} color={destructive ? '#dc2626' : '#737373'} style={{ marginRight: 12, width: 20 }} />
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
color,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{value !== undefined && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
color: '#a3a3a3',
|
||||
marginRight: onPress ? 4 : 0,
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
)}
|
||||
{onPress && !destructive && (
|
||||
<Ionicons name="chevron-forward" size={14} color="#d4d4d4" />
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
function OAuthDisconnectHintModal({
|
||||
visible,
|
||||
onClose,
|
||||
@ -440,6 +151,97 @@ function OAuthDisconnectHintModal({
|
||||
);
|
||||
}
|
||||
|
||||
function resolveProviderIcon(provider: string): {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
color: string;
|
||||
} {
|
||||
const p = provider.toLowerCase();
|
||||
if (p.includes('gmail') || p.includes('google')) return { icon: 'mail', color: '#EA4335' };
|
||||
if (p.includes('icloud') || p.includes('apple')) return { icon: 'cloud', color: '#007AFF' };
|
||||
if (p.includes('outlook') || p.includes('hotmail') || p.includes('microsoft'))
|
||||
return { icon: 'mail-open', color: '#0078D4' };
|
||||
if (p.includes('yahoo')) return { icon: 'at', color: '#7C3AED' };
|
||||
if (p.includes('gmx') || p.includes('web.de'))
|
||||
return { icon: 'mail-unread', color: '#E87A22' };
|
||||
return { icon: 'server', color: '#737373' };
|
||||
}
|
||||
|
||||
function isOAuthProvider(provider: string): boolean {
|
||||
return provider === 'outlook_oauth';
|
||||
}
|
||||
|
||||
const STALE_THRESHOLD_MS = 5 * 60 * 1_000;
|
||||
const IDLE_HEARTBEAT_STALE_MS = STALE_THRESHOLD_MS;
|
||||
|
||||
function idleHeartbeatAlive(lastIdleHeartbeatAt: string | null | undefined): boolean {
|
||||
if (!lastIdleHeartbeatAt) return false;
|
||||
return Date.now() - new Date(lastIdleHeartbeatAt).getTime() < IDLE_HEARTBEAT_STALE_MS;
|
||||
}
|
||||
|
||||
function domainFromEmail(email: string): string {
|
||||
return email.split('@')[1] ?? email;
|
||||
}
|
||||
|
||||
type StatusDot = 'live' | 'stale' | 'error' | 'waiting';
|
||||
|
||||
function resolveStatusDot(account: MailAccount): StatusDot {
|
||||
if (account.lastConnectError) return 'error';
|
||||
if (!account.lastScannedAt) return 'waiting';
|
||||
const heartbeatAlive = idleHeartbeatAlive(account.lastIdleHeartbeatAt);
|
||||
const scannedAgo = Date.now() - new Date(account.lastScannedAt).getTime();
|
||||
if (!heartbeatAlive && scannedAgo > STALE_THRESHOLD_MS) return 'stale';
|
||||
return 'live';
|
||||
}
|
||||
|
||||
function StatusDotRow({
|
||||
account,
|
||||
isLegend,
|
||||
blockedLast30d,
|
||||
t,
|
||||
}: {
|
||||
account: MailAccount;
|
||||
isLegend: boolean;
|
||||
blockedLast30d: number | undefined;
|
||||
t: (k: string) => string;
|
||||
}) {
|
||||
const dot = resolveStatusDot(account);
|
||||
|
||||
const dotColor =
|
||||
dot === 'live' ? '#16a34a' :
|
||||
dot === 'stale' ? '#d97706' :
|
||||
dot === 'error' ? '#dc2626' :
|
||||
'#a3a3a3';
|
||||
|
||||
const label =
|
||||
dot === 'live' ? (isLegend ? t('mail.live') : t('mail.account_active')) :
|
||||
dot === 'stale' ? t('mail.status_stale') :
|
||||
dot === 'error' ? t('mail.status_auth_error') :
|
||||
t('mail.status_waiting_first_connect');
|
||||
|
||||
const blockedLabel =
|
||||
blockedLast30d !== undefined
|
||||
? `${blockedLast30d}`
|
||||
: account.totalBlocked > 0
|
||||
? `${account.totalBlocked}`
|
||||
: '0';
|
||||
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 3 }}>
|
||||
<View style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: dotColor, marginRight: 5 }} />
|
||||
<Text
|
||||
style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: dotColor, flex: 1 }}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 12, fontFamily: 'Nunito_700Bold', color: '#525252', marginRight: 6 }}>
|
||||
{blockedLabel}
|
||||
</Text>
|
||||
<Ionicons name="shield-checkmark" size={11} color="#a3a3a3" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export function MailAccountCard({
|
||||
account,
|
||||
plan,
|
||||
@ -449,26 +251,27 @@ export function MailAccountCard({
|
||||
onIntervalChanged,
|
||||
onEditSuccess,
|
||||
disconnecting,
|
||||
blockedLast30d,
|
||||
connectionBlockedByDay,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [confirmVisible, setConfirmVisible] = useState(false);
|
||||
const [settingsVisible, setSettingsVisible] = useState(false);
|
||||
const [editPasswordVisible, setEditPasswordVisible] = useState(false);
|
||||
const [editTitleVisible, setEditTitleVisible] = useState(false);
|
||||
const [confirmVisible, setConfirmVisible] = useState(false);
|
||||
const [oauthDisconnectHintVisible, setOauthDisconnectHintVisible] = useState(false);
|
||||
const [localTitle, setLocalTitle] = useState<string | null>(account.title ?? null);
|
||||
const { setInterval, updating } = useMailInterval();
|
||||
const { icon, color } = resolveProviderIcon(account.provider);
|
||||
|
||||
const isOAuth = isOAuthProvider(account.provider);
|
||||
const isLegend = plan === 'legend';
|
||||
const isPaused = account.paused === true;
|
||||
const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
|
||||
const hasError = !!account.lastConnectError;
|
||||
|
||||
const displayTitle = localTitle ?? domainFromEmail(account.email);
|
||||
const subEmail = maskEmail(account.email);
|
||||
|
||||
function handleToggle() {
|
||||
if (account.lastConnectError) {
|
||||
if (hasError) {
|
||||
setEditPasswordVisible(true);
|
||||
return;
|
||||
}
|
||||
@ -476,11 +279,6 @@ export function MailAccountCard({
|
||||
onToggle();
|
||||
}
|
||||
|
||||
async function handleSetInterval(value: number) {
|
||||
const res = await setInterval(account.id, value);
|
||||
if (res.ok) onIntervalChanged();
|
||||
}
|
||||
|
||||
function handleTitleSaved(newTitle: string | null) {
|
||||
setLocalTitle(newTitle);
|
||||
onEditSuccess();
|
||||
@ -493,25 +291,25 @@ export function MailAccountCard({
|
||||
backgroundColor: isPaused ? '#fafafa' : '#fff',
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: account.lastConnectError ? '#fecaca' : isPaused ? '#d4d4d4' : '#e5e5e5',
|
||||
borderColor: hasError ? '#fecaca' : isPaused ? '#d4d4d4' : '#e5e5e5',
|
||||
overflow: 'hidden',
|
||||
opacity: isPaused ? 0.75 : 1,
|
||||
}}
|
||||
>
|
||||
{/* Header — always visible, tap to expand settings */}
|
||||
{/* Header */}
|
||||
<TouchableOpacity onPress={handleToggle} activeOpacity={0.85}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 14,
|
||||
paddingVertical: 13,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 10,
|
||||
backgroundColor: color + '18',
|
||||
alignItems: 'center',
|
||||
@ -519,11 +317,10 @@ export function MailAccountCard({
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={19} color={color} />
|
||||
<Ionicons name={icon} size={18} color={color} />
|
||||
</View>
|
||||
|
||||
<View style={{ flex: 1, minWidth: 0, marginRight: 8 }}>
|
||||
{/* Title — prominent */}
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 15,
|
||||
@ -534,240 +331,102 @@ export function MailAccountCard({
|
||||
>
|
||||
{displayTitle}
|
||||
</Text>
|
||||
{/* Email — small sub-label */}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
color: '#a3a3a3',
|
||||
marginTop: 1,
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{subEmail}
|
||||
{isPaused ? (
|
||||
<View style={{ marginTop: 3 }}>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#737373' }}>
|
||||
{t('plan_limit.mail_account_paused')}
|
||||
</Text>
|
||||
{isPaused
|
||||
? <PausedBadge t={t} />
|
||||
: <StatusBadgeRow account={account} isLegend={isLegend} t={t} />
|
||||
}
|
||||
</View>
|
||||
) : (
|
||||
<StatusDotRow
|
||||
account={account}
|
||||
isLegend={isLegend}
|
||||
blockedLast30d={blockedLast30d}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Ionicons
|
||||
name={expanded ? 'chevron-up' : 'chevron-down'}
|
||||
size={18}
|
||||
color="#a3a3a3"
|
||||
style={{ marginLeft: 8 }}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Collapsible: Settings section */}
|
||||
{/* Expanded body */}
|
||||
{expanded && (
|
||||
<View style={{ borderTopWidth: 1, borderTopColor: '#f5f5f5' }}>
|
||||
{/* Stats banner */}
|
||||
{/* Per-connection bar chart */}
|
||||
<View style={{ paddingHorizontal: 14, paddingTop: 14, paddingBottom: 4 }}>
|
||||
{connectionBlockedByDay && connectionBlockedByDay.length > 0 ? (
|
||||
<MailBlockedByDayChart data={connectionBlockedByDay} />
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fef2f2',
|
||||
marginHorizontal: 14,
|
||||
marginTop: 14,
|
||||
borderRadius: 12,
|
||||
backgroundColor: '#f9fafb',
|
||||
borderWidth: 1,
|
||||
borderColor: '#e5e5e5',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
marginBottom: 12,
|
||||
paddingVertical: 16,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="shield-checkmark" size={20} color="#dc2626" style={{ marginRight: 10 }} />
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}>
|
||||
{t('mail.account_stat_blocked')}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
fontFamily: 'Nunito_800ExtraBold',
|
||||
color: '#dc2626',
|
||||
marginTop: 1,
|
||||
}}
|
||||
>
|
||||
{account.totalBlocked.toLocaleString()}
|
||||
<Text style={{ fontSize: 12, fontFamily: 'Nunito_400Regular', color: '#a3a3a3' }}>
|
||||
{t('mail.account_chart_unavailable')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: '#737373' }}>
|
||||
{t('mail.account_of_scanned', {
|
||||
scanned: account.totalScanned.toLocaleString(),
|
||||
})}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Scan interval (non-legend) */}
|
||||
{isLegend ? (
|
||||
<View
|
||||
{/* Einstellungen tap-row */}
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={() => setSettingsVisible(true)}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f0fdf4',
|
||||
borderRadius: 10,
|
||||
marginHorizontal: 14,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
marginBottom: 12,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 12,
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
color: '#16a34a',
|
||||
}}
|
||||
>
|
||||
{t('mail.realtime_desc')}
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View style={{ marginHorizontal: 14, marginBottom: 12 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
color: '#737373',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
{t('mail.scan_interval_label')}
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
{intervalOptions.map((opt, idx) => {
|
||||
const active = account.scanInterval === opt;
|
||||
const disabled = plan === 'free' || updating === account.id;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={opt}
|
||||
activeOpacity={0.7}
|
||||
disabled={disabled}
|
||||
onPress={() => handleSetInterval(opt)}
|
||||
style={{
|
||||
flex: 1,
|
||||
paddingVertical: 9,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
backgroundColor: active ? '#007AFF' : '#f5f5f5',
|
||||
marginLeft: idx === 0 ? 0 : 6,
|
||||
opacity: disabled && !active ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
color: active ? '#fff' : '#525252',
|
||||
}}
|
||||
>
|
||||
{opt}h
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
{plan === 'free' && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
color: '#a3a3a3',
|
||||
marginTop: 6,
|
||||
}}
|
||||
>
|
||||
{t('mail.free_scan_interval_hint')}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Settings separator label */}
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 14,
|
||||
paddingBottom: 4,
|
||||
paddingVertical: 13,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f5f5f5',
|
||||
paddingTop: 10,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
color: '#a3a3a3',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
}}
|
||||
>
|
||||
{t('mail.settings_section_label')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Settings rows */}
|
||||
<SettingsRow
|
||||
icon="pencil-outline"
|
||||
label={t('mail.row_title')}
|
||||
value={localTitle ?? '—'}
|
||||
onPress={() => setEditTitleVisible(true)}
|
||||
/>
|
||||
|
||||
<SettingsRow
|
||||
icon="mail-outline"
|
||||
label={t('mail.row_email')}
|
||||
value={account.email}
|
||||
/>
|
||||
|
||||
{!isOAuth && (
|
||||
<SettingsRow
|
||||
icon="key-outline"
|
||||
label={t('mail.row_password')}
|
||||
value="••••••••"
|
||||
onPress={() => setEditPasswordVisible(true)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={() => setConfirmVisible(true)}
|
||||
disabled={disconnecting}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 14,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f5f5f5',
|
||||
opacity: disconnecting ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
{disconnecting ? (
|
||||
<ActivityIndicator size="small" color="#dc2626" style={{ marginRight: 12, width: 20 }} />
|
||||
) : (
|
||||
<Ionicons name="trash-outline" size={16} color="#dc2626" style={{ marginRight: 12, width: 20 }} />
|
||||
)}
|
||||
<Text
|
||||
style={{
|
||||
flex: 1,
|
||||
fontSize: 14,
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
color: '#dc2626',
|
||||
color: '#0a0a0a',
|
||||
}}
|
||||
>
|
||||
{t('mail.row_disconnect')}
|
||||
{t('mail.settings_section_label')}
|
||||
</Text>
|
||||
<Ionicons name="chevron-forward" size={16} color="#a3a3a3" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Settings sub-sheet */}
|
||||
<MailAccountSettingsSheet
|
||||
visible={settingsVisible}
|
||||
account={account}
|
||||
localTitle={localTitle}
|
||||
isOAuth={isOAuth}
|
||||
plan={plan}
|
||||
disconnecting={disconnecting}
|
||||
onClose={() => setSettingsVisible(false)}
|
||||
onEditTitle={() => { setSettingsVisible(false); setEditTitleVisible(true); }}
|
||||
onEditPassword={() => { setSettingsVisible(false); setEditPasswordVisible(true); }}
|
||||
onDisconnectRequest={() => { setSettingsVisible(false); setConfirmVisible(true); }}
|
||||
onIntervalChanged={onIntervalChanged}
|
||||
/>
|
||||
|
||||
<ConfirmAlert
|
||||
visible={confirmVisible}
|
||||
title={t('mail.disconnect_confirm_title')}
|
||||
|
||||
274
apps/rebreak-native/components/mail/MailAccountSettingsSheet.tsx
Normal file
274
apps/rebreak-native/components/mail/MailAccountSettingsSheet.tsx
Normal file
@ -0,0 +1,274 @@
|
||||
import { Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FormSheet } from '../FormSheet';
|
||||
import { useMailInterval } from '../../hooks/useMailInterval';
|
||||
import type { MailAccount } from '../../hooks/useMailStatus';
|
||||
|
||||
type Props = {
|
||||
visible: boolean;
|
||||
account: MailAccount;
|
||||
localTitle: string | null;
|
||||
isOAuth: boolean;
|
||||
plan: 'free' | 'pro' | 'legend';
|
||||
disconnecting?: boolean;
|
||||
onClose: () => void;
|
||||
onEditTitle: () => void;
|
||||
onEditPassword: () => void;
|
||||
onDisconnectRequest: () => void;
|
||||
onIntervalChanged: () => void;
|
||||
};
|
||||
|
||||
const INTERVAL_OPTIONS_BY_PLAN: Record<'free' | 'pro' | 'legend', number[]> = {
|
||||
free: [4],
|
||||
pro: [1, 4, 8],
|
||||
legend: [1, 4, 8],
|
||||
};
|
||||
|
||||
function domainFromEmail(email: string): string {
|
||||
return email.split('@')[1] ?? email;
|
||||
}
|
||||
|
||||
function SettingsRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
onPress,
|
||||
destructive,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
destructive?: boolean;
|
||||
}) {
|
||||
const labelColor = destructive ? '#dc2626' : '#0a0a0a';
|
||||
const Wrapper = onPress ? TouchableOpacity : View;
|
||||
const wrapperProps = onPress ? { activeOpacity: 0.7 as const, onPress } : {};
|
||||
|
||||
return (
|
||||
<Wrapper
|
||||
{...(wrapperProps as any)}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 13,
|
||||
paddingHorizontal: 16,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f5f5f5',
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={icon}
|
||||
size={16}
|
||||
color={destructive ? '#dc2626' : '#737373'}
|
||||
style={{ marginRight: 12, width: 20 }}
|
||||
/>
|
||||
<Text
|
||||
style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_600SemiBold', color: labelColor }}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{value !== undefined && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
color: '#a3a3a3',
|
||||
marginRight: onPress && !destructive ? 4 : 0,
|
||||
maxWidth: 160,
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
)}
|
||||
{onPress && !destructive && (
|
||||
<Ionicons name="chevron-forward" size={14} color="#d4d4d4" />
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export function MailAccountSettingsSheet({
|
||||
visible,
|
||||
account,
|
||||
localTitle,
|
||||
isOAuth,
|
||||
plan,
|
||||
disconnecting,
|
||||
onClose,
|
||||
onEditTitle,
|
||||
onEditPassword,
|
||||
onDisconnectRequest,
|
||||
onIntervalChanged,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { setInterval, updating } = useMailInterval();
|
||||
const isLegend = plan === 'legend';
|
||||
const intervalOptions = INTERVAL_OPTIONS_BY_PLAN[plan];
|
||||
|
||||
const displayTitle = localTitle ?? domainFromEmail(account.email);
|
||||
|
||||
async function handleSetInterval(value: number) {
|
||||
const res = await setInterval(account.id, value);
|
||||
if (res.ok) onIntervalChanged();
|
||||
}
|
||||
|
||||
return (
|
||||
<FormSheet
|
||||
visible={visible}
|
||||
onClose={onClose}
|
||||
title={displayTitle}
|
||||
initialHeightPct={0.55}
|
||||
growWithKeyboard={false}
|
||||
>
|
||||
<View style={{ paddingTop: 8 }}>
|
||||
{/* Bezeichnung */}
|
||||
<SettingsRow
|
||||
icon="pencil-outline"
|
||||
label={t('mail.row_title')}
|
||||
value={localTitle ?? '—'}
|
||||
onPress={onEditTitle}
|
||||
/>
|
||||
|
||||
{/* E-Mail (read-only) */}
|
||||
<SettingsRow
|
||||
icon="mail-outline"
|
||||
label={t('mail.row_email')}
|
||||
value={account.email}
|
||||
/>
|
||||
|
||||
{/* Passwort — nur für IMAP-Accounts */}
|
||||
{!isOAuth && (
|
||||
<SettingsRow
|
||||
icon="key-outline"
|
||||
label={t('mail.row_password')}
|
||||
value="••••••••"
|
||||
onPress={onEditPassword}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Scan-Intervall */}
|
||||
{!isLegend ? (
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f5f5f5',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 11,
|
||||
fontFamily: 'Nunito_600SemiBold',
|
||||
color: '#737373',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.6,
|
||||
marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
{t('mail.scan_interval_label')}
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 6 }}>
|
||||
{intervalOptions.map((opt) => {
|
||||
const active = account.scanInterval === opt;
|
||||
const disabled = plan === 'free' || updating === account.id;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={opt}
|
||||
activeOpacity={0.7}
|
||||
disabled={disabled}
|
||||
onPress={() => handleSetInterval(opt)}
|
||||
style={{
|
||||
flex: 1,
|
||||
paddingVertical: 9,
|
||||
borderRadius: 10,
|
||||
alignItems: 'center',
|
||||
backgroundColor: active ? '#007AFF' : '#f5f5f5',
|
||||
opacity: disabled && !active ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
fontFamily: 'Nunito_700Bold',
|
||||
color: active ? '#fff' : '#525252',
|
||||
}}
|
||||
>
|
||||
{opt}h
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
{plan === 'free' && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontFamily: 'Nunito_400Regular',
|
||||
color: '#a3a3a3',
|
||||
marginTop: 6,
|
||||
}}
|
||||
>
|
||||
{t('mail.free_scan_interval_hint')}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f0fdf4',
|
||||
marginHorizontal: 16,
|
||||
marginVertical: 10,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="flash" size={14} color="#16a34a" style={{ marginRight: 8 }} />
|
||||
<Text
|
||||
style={{ flex: 1, fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#16a34a' }}
|
||||
>
|
||||
{t('mail.realtime_desc')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Separator */}
|
||||
<View style={{ height: 20 }} />
|
||||
|
||||
{/* Verbindung trennen */}
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.7}
|
||||
onPress={onDisconnectRequest}
|
||||
disabled={disconnecting}
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 13,
|
||||
paddingHorizontal: 16,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#f5f5f5',
|
||||
opacity: disconnecting ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="trash-outline"
|
||||
size={16}
|
||||
color="#dc2626"
|
||||
style={{ marginRight: 12, width: 20 }}
|
||||
/>
|
||||
<Text
|
||||
style={{ flex: 1, fontSize: 14, fontFamily: 'Nunito_600SemiBold', color: '#dc2626' }}
|
||||
>
|
||||
{t('mail.row_disconnect')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</FormSheet>
|
||||
);
|
||||
}
|
||||
@ -14,10 +14,16 @@ const OTHER_COLOR = '#a3a3a3';
|
||||
const MAX_SLICES = 5;
|
||||
|
||||
const R_OUTER = 54;
|
||||
const R_INNER = 32;
|
||||
const R_INNER = 34;
|
||||
const CX = 64;
|
||||
const CY = 64;
|
||||
|
||||
// Half-donut renders the UPPER semicircle (flat edge at bottom).
|
||||
// CY=64 places the center at the bottom of the 68px-tall viewBox.
|
||||
// angleDeg=0 → top (12 o'clock), angleDeg=-90 → left, angleDeg=90 → right.
|
||||
// Slices sweep from -90° (left) to +90° (right) = 180° total.
|
||||
const HALF_DONUT_START_DEG = -90;
|
||||
|
||||
function domainFromEmail(email: string): string {
|
||||
return email.split('@')[1] ?? email;
|
||||
}
|
||||
@ -42,12 +48,11 @@ function arcPath(
|
||||
startDeg: number,
|
||||
endDeg: number,
|
||||
): string {
|
||||
const clampedEnd = Math.min(endDeg, startDeg + 179.99);
|
||||
const outerStart = polarToXY(cx, cy, rOuter, startDeg);
|
||||
const outerEnd = polarToXY(cx, cy, rOuter, clampedEnd);
|
||||
const innerEnd = polarToXY(cx, cy, rInner, clampedEnd);
|
||||
const outerEnd = polarToXY(cx, cy, rOuter, endDeg);
|
||||
const innerEnd = polarToXY(cx, cy, rInner, endDeg);
|
||||
const innerStart = polarToXY(cx, cy, rInner, startDeg);
|
||||
const large = clampedEnd - startDeg > 90 ? 1 : 0;
|
||||
const large = endDeg - startDeg > 180 ? 1 : 0;
|
||||
|
||||
return [
|
||||
`M ${outerStart.x} ${outerStart.y}`,
|
||||
@ -90,7 +95,7 @@ export function MailDistributionChart({ data }: Props) {
|
||||
|
||||
if (data.length <= 1 || total === 0) return null;
|
||||
|
||||
let cursor = 0;
|
||||
let cursor = HALF_DONUT_START_DEG;
|
||||
|
||||
return (
|
||||
<View
|
||||
@ -118,7 +123,7 @@ export function MailDistributionChart({ data }: Props) {
|
||||
</Text>
|
||||
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
|
||||
{/* Half-donut — upper half of a donut ring, 180° arc from left to right */}
|
||||
{/* Half-donut — upper semicircle, center pinned at bottom of viewBox */}
|
||||
<Svg width={128} height={68} viewBox="0 0 128 68">
|
||||
{slices.map((slice) => {
|
||||
const sweep = (slice.count / total) * 180;
|
||||
@ -132,7 +137,7 @@ export function MailDistributionChart({ data }: Props) {
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{/* Center circle to keep donut look consistent */}
|
||||
{/* Inner fill to enforce donut shape */}
|
||||
<Circle cx={CX} cy={CY} r={R_INNER - 1} fill={colors.surface} />
|
||||
</Svg>
|
||||
|
||||
|
||||
@ -449,6 +449,7 @@
|
||||
"row_email": "E-Mail",
|
||||
"row_password": "Passwort",
|
||||
"row_disconnect": "Verbindung trennen",
|
||||
"account_chart_unavailable": "Tages-Verlauf wird geladen …",
|
||||
"disconnect_confirm_title": "Verbindung trennen?",
|
||||
"disconnect_confirm_body": "%{email} wird getrennt und alle Scan-Daten gelöscht.",
|
||||
"stats": {
|
||||
|
||||
@ -449,6 +449,7 @@
|
||||
"row_email": "Email",
|
||||
"row_password": "Password",
|
||||
"row_disconnect": "Disconnect",
|
||||
"account_chart_unavailable": "Daily chart loading …",
|
||||
"disconnect_confirm_title": "Disconnect mailbox?",
|
||||
"disconnect_confirm_body": "%{email} will be disconnected and all scan data deleted.",
|
||||
"stats": {
|
||||
|
||||
@ -19,14 +19,20 @@ export const MS_AUTH_BASE = `https://login.microsoftonline.com/${MS_TENANT}/oaut
|
||||
/**
|
||||
* OAuth scopes requested.
|
||||
* Matches the DSGVO-Memo Section 4.3 (Datenminimierung).
|
||||
* User.Read is included per User decision (email extraction from ID-token).
|
||||
* Hans-Müller-Memo will document this in the next revision.
|
||||
*
|
||||
* Single-resource constraint: Microsoft V2.0 erlaubt im /token-Exchange nur
|
||||
* Scopes EINES Resource-Servers. IMAP.AccessAsUser.All zielt auf
|
||||
* outlook.office.com, User.Read auf graph.microsoft.com — die Kombination
|
||||
* wirft `AADSTS70011: scopes are not compatible with each other`.
|
||||
*
|
||||
* Daher: KEIN User.Read. Email-Adresse kommt aus dem id_token-Claim
|
||||
* `preferred_username` (openid-Scope reicht). Falls künftig der Display-Name
|
||||
* gebraucht wird → separater Microsoft-Graph-Token-Exchange (OBO-Pattern).
|
||||
*/
|
||||
export const MS_OAUTH_SCOPES = [
|
||||
"https://outlook.office.com/IMAP.AccessAsUser.All",
|
||||
"offline_access",
|
||||
"openid",
|
||||
"User.Read",
|
||||
].join(" ");
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user