1e07e8303f
Two bugs reported on the new mail-pattern flow: 1. The sheet sent the full local@domain.tld pattern to the backend so a user blocking communications@only4-subscribers.com would only catch that exact local-part — newsletter@, info@, promo@ from the same sender would slip through. Casino affiliates rotate the local-part on every blast while keeping the domain stable, so we now strip the local-part on submit. The preview-card under the input shows what actually gets stored (only4-subscribers.com), so the user sees the pattern that will hit. Bare tokens without "@" stay as-is and reach the backend as display-name candidates. 2. FormSheet's backdrop was a <Pressable> — straight violation of the "TouchableOpacity, never Pressable" rule. Swapped for <TouchableOpacity activeOpacity={1}> so the tap-to-dismiss still works with no visible feedback on the dim layer.
448 lines
12 KiB
TypeScript
448 lines
12 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Image,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
isValidDomain,
|
|
normalizeDomain,
|
|
type Tier,
|
|
} from '../../hooks/useCustomDomains';
|
|
import { useColors, type ColorScheme } from '../../lib/theme';
|
|
import { FormSheet } from '../FormSheet';
|
|
import { SheetFieldStack } from '../SheetFieldStack';
|
|
|
|
type InputKind = 'web' | 'mail';
|
|
|
|
type Props = {
|
|
visible: boolean;
|
|
tier: Tier;
|
|
initialType?: InputKind;
|
|
onClose: () => void;
|
|
onAdd: (pattern: string, kind: InputKind) => Promise<{ ok: boolean; error?: string; alreadyGlobal?: boolean }>;
|
|
};
|
|
|
|
export function AddDomainSheet({ visible, tier, initialType, onClose, onAdd }: Props) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
const [kind, setKind] = useState<InputKind>(initialType ?? 'web');
|
|
const [input, setInput] = useState('');
|
|
const [confirmPermanent, setConfirmPermanent] = useState(false);
|
|
const [adding, setAdding] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [fieldsDone, setFieldsDone] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (visible) setKind(initialType ?? 'web');
|
|
}, [visible, initialType]);
|
|
|
|
const normalizedWeb = kind === 'web' ? normalizeDomain(input) : '';
|
|
|
|
// For mail input: if the user typed a full address (local@domain.tld), strip
|
|
// the local-part and keep only the domain — casino affiliates rotate the
|
|
// local-part rapidly (communications@, newsletter@, info@, …) while the
|
|
// sender-domain stays stable. Blocking on the domain is more durable.
|
|
// A bare token without "@" stays as-is (will be matched as display-name on
|
|
// the backend).
|
|
const mailPattern = (() => {
|
|
if (kind !== 'mail') return '';
|
|
const raw = input.trim();
|
|
if (!raw) return '';
|
|
const atIdx = raw.lastIndexOf('@');
|
|
if (atIdx === -1) return raw;
|
|
return raw.slice(atIdx + 1).trim().toLowerCase();
|
|
})();
|
|
|
|
function close() {
|
|
setInput('');
|
|
setConfirmPermanent(false);
|
|
setError(null);
|
|
setFieldsDone(false);
|
|
onClose();
|
|
}
|
|
|
|
function handleKindChange(next: InputKind) {
|
|
if (next === kind) return;
|
|
setKind(next);
|
|
setInput('');
|
|
setError(null);
|
|
setFieldsDone(false);
|
|
}
|
|
|
|
function isInputValid(): boolean {
|
|
if (kind === 'web') return isValidDomain(input);
|
|
return input.trim().length > 0;
|
|
}
|
|
|
|
async function handleAdd() {
|
|
if (!isInputValid() || !confirmPermanent || adding) return;
|
|
setAdding(true);
|
|
setError(null);
|
|
const pattern = kind === 'web' ? input : mailPattern;
|
|
const result = await onAdd(pattern, kind);
|
|
setAdding(false);
|
|
if (result.ok) {
|
|
close();
|
|
return;
|
|
}
|
|
if (result.alreadyGlobal) {
|
|
setError(t('blocker.add_sheet_already_global', { domain: normalizedWeb || input.trim() }));
|
|
} else if (result.error?.includes('WEB_LIMIT_REACHED')) {
|
|
setError(t('blocker.error_web_limit_reached'));
|
|
} else if (result.error?.includes('MAIL_LIMIT_REACHED')) {
|
|
setError(t('blocker.error_mail_limit_reached'));
|
|
} else {
|
|
setError(result.error ?? t('blocker.add_sheet_add_failed'));
|
|
}
|
|
}
|
|
|
|
const warningText =
|
|
tier.plan === 'free'
|
|
? t('blocker.add_sheet_warning_free')
|
|
: t('blocker.add_sheet_warning_pro');
|
|
|
|
const inputLabel = kind === 'web'
|
|
? t('blocker.add_web_label')
|
|
: t('blocker.add_mail_label');
|
|
|
|
const inputPlaceholder = kind === 'web'
|
|
? t('blocker.add_web_placeholder')
|
|
: t('blocker.add_mail_placeholder');
|
|
|
|
const helpText = kind === 'web'
|
|
? t('blocker.add_web_help')
|
|
: t('blocker.add_mail_help');
|
|
|
|
const validateField = kind === 'web'
|
|
? (v: string) => isValidDomain(v) ? undefined : t('blocker.add_sheet_invalid')
|
|
: (v: string) => v.trim().length > 0 ? undefined : t('blocker.add_mail_invalid');
|
|
|
|
return (
|
|
<FormSheet
|
|
visible={visible}
|
|
onClose={close}
|
|
title={t('blocker.add_sheet_title')}
|
|
initialHeightPct={0.75}
|
|
growWithKeyboard
|
|
>
|
|
<SheetFieldStack
|
|
intro={
|
|
<TypePicker kind={kind} onChange={handleKindChange} />
|
|
}
|
|
fields={[
|
|
{
|
|
key: 'pattern',
|
|
label: inputLabel,
|
|
placeholder: inputPlaceholder,
|
|
value: input,
|
|
onChangeText: (v) => { setInput(v); setError(null); },
|
|
normalize: kind === 'web' ? normalizeDomain : undefined,
|
|
keyboardType: kind === 'web' ? 'url' : 'default',
|
|
autoCapitalize: 'none',
|
|
autoCorrect: false,
|
|
validate: validateField,
|
|
},
|
|
]}
|
|
onComplete={() => setFieldsDone(true)}
|
|
>
|
|
{/* Help-Text */}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
padding: 12,
|
|
backgroundColor: colors.surfaceElevated,
|
|
borderRadius: 12,
|
|
marginBottom: 8,
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={kind === 'web' ? 'globe-outline' : 'mail-outline'}
|
|
size={16}
|
|
color={colors.textMuted}
|
|
style={{ marginTop: 1 }}
|
|
/>
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: colors.textMuted,
|
|
lineHeight: 17,
|
|
}}
|
|
>
|
|
{helpText}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Favicon-Preview (nur Web) */}
|
|
{kind === 'web' && (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
padding: 12,
|
|
backgroundColor: colors.surfaceElevated,
|
|
borderRadius: 12,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Image
|
|
source={{
|
|
uri: `https://www.google.com/s2/favicons?domain=${normalizedWeb}&sz=64`,
|
|
}}
|
|
style={{ width: 24, height: 24, borderRadius: 4 }}
|
|
/>
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 14,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: colors.text,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{normalizedWeb}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Mail-Typ Icon-Preview */}
|
|
{kind === 'mail' && (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 10,
|
|
padding: 12,
|
|
backgroundColor: colors.surfaceElevated,
|
|
borderRadius: 12,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 4,
|
|
backgroundColor: '#dbeafe',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Ionicons name="mail-outline" size={14} color="#2563eb" />
|
|
</View>
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 14,
|
|
fontFamily: 'Nunito_600SemiBold',
|
|
color: colors.text,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{mailPattern || inputPlaceholder}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Warnung */}
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
gap: 10,
|
|
padding: 12,
|
|
backgroundColor: '#fef3c7',
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: '#fcd34d',
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<Ionicons name="lock-closed" size={18} color="#92400e" />
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 12,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#92400e',
|
|
lineHeight: 17,
|
|
}}
|
|
>
|
|
{warningText}
|
|
</Text>
|
|
</View>
|
|
|
|
{/* Confirm-Checkbox */}
|
|
<TouchableOpacity
|
|
onPress={() => setConfirmPermanent((v) => !v)}
|
|
activeOpacity={0.7}
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
gap: 10,
|
|
paddingVertical: 4,
|
|
marginBottom: 14,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: 22,
|
|
height: 22,
|
|
borderRadius: 6,
|
|
borderWidth: 1.5,
|
|
borderColor: confirmPermanent ? colors.success : colors.border,
|
|
backgroundColor: confirmPermanent ? colors.success : colors.bg,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 1,
|
|
}}
|
|
>
|
|
{confirmPermanent && <Ionicons name="checkmark" size={16} color="#fff" />}
|
|
</View>
|
|
<Text
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: colors.text,
|
|
lineHeight: 18,
|
|
}}
|
|
>
|
|
{t('blocker.add_sheet_confirm_permanent')}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
{error && (
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: 'Nunito_400Regular',
|
|
color: '#dc2626',
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
{error}
|
|
</Text>
|
|
)}
|
|
|
|
{/* Add-Button */}
|
|
<TouchableOpacity
|
|
onPress={handleAdd}
|
|
disabled={!confirmPermanent || adding}
|
|
activeOpacity={0.85}
|
|
style={{ marginBottom: 12 }}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: !confirmPermanent ? '#d4d4d4' : '#dc2626',
|
|
borderRadius: 14,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
{adding ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
|
|
{t('blocker.add_sheet_title')}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</SheetFieldStack>
|
|
</FormSheet>
|
|
);
|
|
}
|
|
|
|
// ─── TypePicker ──────────────────────────────────────────────────────────────
|
|
|
|
function TypePicker({ kind, onChange }: { kind: InputKind; onChange: (k: InputKind) => void }) {
|
|
const { t } = useTranslation();
|
|
const colors = useColors();
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
backgroundColor: colors.surfaceElevated,
|
|
borderRadius: 12,
|
|
padding: 3,
|
|
gap: 3,
|
|
}}
|
|
>
|
|
<TypePill
|
|
icon="globe-outline"
|
|
label={t('blocker.type_web')}
|
|
active={kind === 'web'}
|
|
onPress={() => onChange('web')}
|
|
colors={colors}
|
|
/>
|
|
<TypePill
|
|
icon="mail-outline"
|
|
label={t('blocker.type_mail')}
|
|
active={kind === 'mail'}
|
|
onPress={() => onChange('mail')}
|
|
colors={colors}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function TypePill({
|
|
icon,
|
|
label,
|
|
active,
|
|
onPress,
|
|
colors,
|
|
}: {
|
|
icon: 'globe-outline' | 'mail-outline';
|
|
label: string;
|
|
active: boolean;
|
|
onPress: () => void;
|
|
colors: ColorScheme;
|
|
}) {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
activeOpacity={0.8}
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 6,
|
|
paddingVertical: 9,
|
|
borderRadius: 10,
|
|
backgroundColor: active ? colors.bg : 'transparent',
|
|
shadowColor: active ? '#000' : 'transparent',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: active ? 0.08 : 0,
|
|
shadowRadius: 2,
|
|
elevation: active ? 1 : 0,
|
|
}}
|
|
>
|
|
<Ionicons
|
|
name={icon}
|
|
size={15}
|
|
color={active ? colors.text : colors.textMuted}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 13,
|
|
fontFamily: active ? 'Nunito_700Bold' : 'Nunito_400Regular',
|
|
color: active ? colors.text : colors.textMuted,
|
|
}}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|