7ad523f8ba
PostCommentsSheet: - Fix Resize-Bug: PanResponder nur auf Grabber+Header, kein onStartShouldSetPanResponderCapture (das stahl Touch-Events von der FlatList und brach Drag-Resize) - Height-Limits (MAX/MIN/INITIAL) als Refs in PanResponder-Closure, damit sie nicht auf den ersten-Render-Stand eingefroren werden - Keyboard-Show/-Hide animiert currentHeight korrekt ohne den Resize-Referenzpunkt zu verlieren - Avatar in CommentRow: resolveAvatar() wenn authorAvatar vorhanden, Initialen-Fallback sonst. Bereit sobald Backend authorAvatar in Comments-Response mitliefert. - Alle Pressable durch TouchableOpacity ersetzt SheetFieldStack (neu): - Progressives Multi-Input-Pattern als FormSheet-Inhalt - Ausgefüllte Felder werden als antippbare Chips (mit Stift-Icon) nach oben verschoben - Aktives Feld: TextInput + →/✓-Button (letztes Feld = Checkmark) - Validate + Normalize pro Feld, Fehleranzeige unter dem Input - suffix-Slot für Eye-Toggle etc. - Nach letztem Feld: Keyboard.dismiss() + children (Rest des Formulars) erscheint Migriert auf FormSheet + SheetFieldStack: - ConnectMailSheet: Grid-View unveraendert; Form-View (email+password) via SheetFieldStack; Zurück/Abbrechen-Header-Buttons entfernt (Schliessen = Swipe/Backdrop) - EditMailAccountSheet: single-password-field via SheetFieldStack; Cancel-Header-Button weg - AddDomainSheet: domain-field via SheetFieldStack; Favicon-Preview+Warning+Checkbox+Button als children; Cancel-Header-Button weg - CreateRoomSheet: name+description via SheetFieldStack; Public-Toggle+JoinMode+Buttons als children; Abbrechen-Button bleibt (kein Header-Button, design-OK) useSheetKeyboardLift: geloescht (keine Aufrufer mehr nach Migration) KeyboardAwareSheet bleibt (AddMacSheet + AddWindowsSheet nutzen es noch) tsc --noEmit: gruen Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
402 lines
12 KiB
TypeScript
402 lines
12 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Linking,
|
|
ScrollView,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useMailConnect, detectProvider, type MailProvider } from '../../hooks/useMailConnect';
|
|
import { humanizeMailError } from '../../lib/mailErrors';
|
|
import { useColors } from '../../lib/theme';
|
|
import { FormSheet } from '../FormSheet';
|
|
import { SheetFieldStack } from '../SheetFieldStack';
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
};
|
|
|
|
type ProviderConfig = {
|
|
id: MailProvider;
|
|
labelKey: string;
|
|
icon: React.ComponentProps<typeof Ionicons>['name'];
|
|
color: string;
|
|
guideKey: string;
|
|
guideUrl: string;
|
|
};
|
|
|
|
const PROVIDERS: ProviderConfig[] = [
|
|
{
|
|
id: 'gmail',
|
|
labelKey: 'mail.provider_gmail',
|
|
icon: 'mail',
|
|
color: '#EA4335',
|
|
guideKey: 'mail.app_password_guide_gmail',
|
|
guideUrl: 'https://myaccount.google.com/apppasswords',
|
|
},
|
|
{
|
|
id: 'icloud',
|
|
labelKey: 'mail.provider_icloud',
|
|
icon: 'cloud',
|
|
color: '#007AFF',
|
|
guideKey: 'mail.app_password_guide_icloud',
|
|
guideUrl: 'https://appleid.apple.com/account/manage',
|
|
},
|
|
{
|
|
id: 'outlook',
|
|
labelKey: 'mail.provider_outlook',
|
|
icon: 'mail-open',
|
|
color: '#0078D4',
|
|
guideKey: 'mail.app_password_guide_outlook',
|
|
guideUrl: 'https://account.microsoft.com/security',
|
|
},
|
|
{
|
|
id: 'yahoo',
|
|
labelKey: 'mail.provider_yahoo',
|
|
icon: 'at',
|
|
color: '#7C3AED',
|
|
guideKey: 'mail.app_password_guide_yahoo',
|
|
guideUrl: 'https://login.yahoo.com/account/security',
|
|
},
|
|
{
|
|
id: 'gmx',
|
|
labelKey: 'mail.provider_gmx',
|
|
icon: 'mail-unread',
|
|
color: '#E87A22',
|
|
guideKey: 'mail.app_password_guide_gmx',
|
|
guideUrl: 'https://www.gmx.net/mail/security',
|
|
},
|
|
{
|
|
id: 'other',
|
|
labelKey: 'mail.provider_other',
|
|
icon: 'server',
|
|
color: '#737373',
|
|
guideKey: 'mail.app_password_guide_other',
|
|
guideUrl: '',
|
|
},
|
|
];
|
|
|
|
/**
|
|
* Bottom-Sheet zum Verbinden eines Postfachs.
|
|
*
|
|
* Zwei Ansichten im selben Sheet (kein Navigations-Header):
|
|
* 1. Provider-Grid (6 Tiles) — Schließen via Swipe/Backdrop
|
|
* 2. Formular: Email + App-Passwort als SheetFieldStack,
|
|
* dann Datenschutz-Hinweis + Connect-Button
|
|
*/
|
|
export function ConnectMailSheet({ visible, onClose, onSuccess }: Props) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
const { connect, connecting, error: connectError } = useMailConnect();
|
|
|
|
const [view, setView] = useState<'grid' | 'form'>('grid');
|
|
const [selectedProvider, setSelectedProvider] = useState<ProviderConfig | null>(null);
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [passwordVisible, setPasswordVisible] = useState(false);
|
|
const [formError, setFormError] = useState<string | null>(null);
|
|
const [fieldsComplete, setFieldsComplete] = useState(false);
|
|
|
|
function handleClose() {
|
|
setView('grid');
|
|
setSelectedProvider(null);
|
|
setEmail('');
|
|
setPassword('');
|
|
setPasswordVisible(false);
|
|
setFormError(null);
|
|
setFieldsComplete(false);
|
|
onClose();
|
|
}
|
|
|
|
function handleProviderSelect(provider: ProviderConfig) {
|
|
setSelectedProvider(provider);
|
|
setEmail('');
|
|
setPassword('');
|
|
setFormError(null);
|
|
setFieldsComplete(false);
|
|
setView('form');
|
|
}
|
|
|
|
async function handleConnect() {
|
|
setFormError(null);
|
|
const result = await connect({ email: email.trim(), password });
|
|
if (result.ok) {
|
|
handleClose();
|
|
onSuccess();
|
|
} else {
|
|
setFormError(t(humanizeMailError(result.error)));
|
|
}
|
|
}
|
|
|
|
const sheetTitle =
|
|
view === 'form' && selectedProvider
|
|
? t(selectedProvider.labelKey)
|
|
: t('mail.connect_sheet_title');
|
|
|
|
return (
|
|
<FormSheet
|
|
visible={visible}
|
|
onClose={handleClose}
|
|
title={sheetTitle}
|
|
initialHeightPct={0.75}
|
|
growWithKeyboard
|
|
>
|
|
{view === 'grid' ? (
|
|
<ProviderGrid providers={PROVIDERS} onSelect={handleProviderSelect} t={t} />
|
|
) : (
|
|
<SheetFieldStack
|
|
fields={[
|
|
{
|
|
key: 'email',
|
|
label: t('mail.form_email_label'),
|
|
placeholder: t('mail.form_email_placeholder'),
|
|
value: email,
|
|
onChangeText: (v) => { setEmail(v); setFormError(null); },
|
|
keyboardType: 'email-address',
|
|
autoCapitalize: 'none',
|
|
autoCorrect: false,
|
|
validate: (v) =>
|
|
v.trim().length === 0 ? t('mail.form_fields_required') : undefined,
|
|
},
|
|
{
|
|
key: 'password',
|
|
label: t('mail.form_password_label'),
|
|
placeholder: t('mail.form_password_placeholder'),
|
|
value: password,
|
|
onChangeText: (v) => { setPassword(v); setFormError(null); },
|
|
secureTextEntry: !passwordVisible,
|
|
autoCapitalize: 'none',
|
|
autoCorrect: false,
|
|
validate: (v) =>
|
|
v.trim().length === 0 ? t('mail.form_fields_required') : undefined,
|
|
suffix: (
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => setPasswordVisible((p) => !p)}
|
|
hitSlop={8}
|
|
>
|
|
<Ionicons
|
|
name={passwordVisible ? 'eye-off-outline' : 'eye-outline'}
|
|
size={20}
|
|
color="#a3a3a3"
|
|
/>
|
|
</TouchableOpacity>
|
|
),
|
|
},
|
|
]}
|
|
onComplete={() => setFieldsComplete(true)}
|
|
>
|
|
{/* App-Password-Guide — über den Datenschutz-Hinweis */}
|
|
{selectedProvider && selectedProvider.id !== 'other' && (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
gap: 10,
|
|
padding: 12,
|
|
backgroundColor: '#f0f7ff',
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: '#bfdbfe',
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name="information-circle"
|
|
size={18}
|
|
color="#1d4ed8"
|
|
style={{ marginTop: 1 }}
|
|
/>
|
|
<View style={{ flex: 1, gap: 4 }}>
|
|
<Text
|
|
style={{ fontSize: 12, fontFamily: 'Nunito_600SemiBold', color: '#1e3a8a' }}
|
|
>
|
|
{t('mail.app_password_required_title')}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#1d4ed8',
|
|
lineHeight: 17,
|
|
}}
|
|
>
|
|
{t(selectedProvider.guideKey)}
|
|
</Text>
|
|
{selectedProvider.guideUrl.length > 0 && (
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => Linking.openURL(selectedProvider.guideUrl)}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: '#007AFF',
|
|
marginTop: 2,
|
|
}}
|
|
>
|
|
{t('mail.app_password_open_link')} →
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Datenschutz-Hinweis */}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
padding: 12,
|
|
backgroundColor: '#f0fdf4',
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: '#bbf7d0',
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<Ionicons name="shield-checkmark" size={16} color="#16a34a" style={{ marginTop: 1 }} />
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#166534',
|
|
lineHeight: 17,
|
|
}}
|
|
>
|
|
{t('mail.form_privacy_note')}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Fehler */}
|
|
{(formError ?? (connectError ? t(humanizeMailError(connectError)) : null)) && (
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#dc2626',
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
{formError ?? t(humanizeMailError(connectError))}
|
|
</Text>
|
|
)}
|
|
|
|
{/* Connect-Button */}
|
|
<TouchableOpacity
|
|
activeOpacity={0.85}
|
|
onPress={handleConnect}
|
|
disabled={connecting}
|
|
style={{ marginTop: 4, marginBottom: 12 }}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: connecting ? '#d4d4d4' : '#007AFF',
|
|
borderRadius: 14,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
{connecting ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
|
{t('mail.form_connect_btn')}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</SheetFieldStack>
|
|
)}
|
|
</FormSheet>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sub-View: Provider-Grid
|
|
// ---------------------------------------------------------------------------
|
|
|
|
function ProviderGrid({
|
|
providers,
|
|
onSelect,
|
|
t,
|
|
}: {
|
|
providers: ProviderConfig[];
|
|
onSelect: (p: ProviderConfig) => void;
|
|
t: (key: string) => string;
|
|
}) {
|
|
const colors = useColors();
|
|
return (
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={{ padding: 20, gap: 12 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: colors.textMuted,
|
|
marginBottom: 4,
|
|
lineHeight: 18,
|
|
}}
|
|
>
|
|
{t('mail.connect_sheet_subtitle')}
|
|
</Text>
|
|
|
|
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>
|
|
{providers.map((p) => (
|
|
<TouchableOpacity
|
|
key={p.id}
|
|
onPress={() => onSelect(p)}
|
|
activeOpacity={0.7}
|
|
style={{ width: '47%' }}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
backgroundColor: colors.surface,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 14,
|
|
padding: 14,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 10,
|
|
backgroundColor: p.color + '18',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Ionicons name={p.icon} size={18} color={p.color} />
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<Text
|
|
style={{ fontSize: 13, fontFamily: 'Nunito_700Bold', color: colors.text }}
|
|
numberOfLines={1}
|
|
>
|
|
{t(p.labelKey)}
|
|
</Text>
|
|
</View>
|
|
<Ionicons name="chevron-forward" size={14} color={colors.border} />
|
|
</View>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|