mirror of
https://github.com/jjbrunton/Sauci.git
synced 2026-11-02 10:19:43 +00:00
Jamie BruntonandClaude Opus 4.5
693ae59321
- Add user message reporting via long press menu - Add delete-account edge function for App Store compliance - Update admin moderation page with AI/User tabs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
501 lines
21 KiB
TypeScript
501 lines
21 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput, ViewStyle } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import Animated, { FadeInDown } from 'react-native-reanimated';
|
|
import { BlurView } from 'expo-blur';
|
|
import { GlassCard, GlassButton } from '../../../components/ui';
|
|
import { colors, spacing, radius, typography } from '../../../theme';
|
|
|
|
interface DangerZoneProps {
|
|
onDeleteRelationship?: () => Promise<void>;
|
|
onDeleteAccount: () => Promise<void>;
|
|
hasRelationship?: boolean;
|
|
}
|
|
|
|
export const DangerZone: React.FC<DangerZoneProps> = ({
|
|
onDeleteRelationship,
|
|
onDeleteAccount,
|
|
hasRelationship = false
|
|
}) => {
|
|
const [showDeleteRelationshipModal, setShowDeleteRelationshipModal] = useState(false);
|
|
const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);
|
|
const [deleteConfirmText, setDeleteConfirmText] = useState("");
|
|
const [isDeletingRelationship, setIsDeletingRelationship] = useState(false);
|
|
const [isDeletingAccount, setIsDeletingAccount] = useState(false);
|
|
|
|
const handleDeleteRelationship = async () => {
|
|
if (deleteConfirmText !== "DELETE" || !onDeleteRelationship) return;
|
|
setIsDeletingRelationship(true);
|
|
try {
|
|
await onDeleteRelationship();
|
|
setShowDeleteRelationshipModal(false);
|
|
setDeleteConfirmText("");
|
|
} catch (error) {
|
|
// Error handling relies on parent throwing or managing its own alerts
|
|
} finally {
|
|
setIsDeletingRelationship(false);
|
|
}
|
|
};
|
|
|
|
const handleDeleteAccount = async () => {
|
|
if (deleteConfirmText !== "DELETE") return;
|
|
setIsDeletingAccount(true);
|
|
try {
|
|
await onDeleteAccount();
|
|
// No need to close modal - user will be signed out
|
|
} catch (error) {
|
|
// Error handling relies on parent throwing or managing its own alerts
|
|
setIsDeletingAccount(false);
|
|
}
|
|
};
|
|
|
|
const closeRelationshipModal = () => {
|
|
if (!isDeletingRelationship) {
|
|
setShowDeleteRelationshipModal(false);
|
|
setDeleteConfirmText("");
|
|
}
|
|
};
|
|
|
|
const closeAccountModal = () => {
|
|
if (!isDeletingAccount) {
|
|
setShowDeleteAccountModal(false);
|
|
setDeleteConfirmText("");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Animated.View
|
|
entering={FadeInDown.delay(600).duration(500)}
|
|
style={styles.section}
|
|
>
|
|
<Text style={styles.dangerSectionTitle}>Danger Zone</Text>
|
|
|
|
{/* Delete Relationship - only show if in a relationship */}
|
|
{hasRelationship && onDeleteRelationship && (
|
|
<GlassCard style={styles.dangerCard}>
|
|
<View style={styles.dangerContent}>
|
|
<View style={styles.dangerInfo}>
|
|
<View style={styles.dangerIconContainer}>
|
|
<Ionicons name="heart-dislike" size={20} color={colors.error} />
|
|
</View>
|
|
<View style={styles.dangerTextContainer}>
|
|
<Text style={styles.dangerTitle}>Delete Relationship Data</Text>
|
|
<Text style={styles.dangerDescription}>
|
|
Delete your relationship including all matches, chats, and shared photos. Your account will remain.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<GlassButton
|
|
variant="danger"
|
|
size="sm"
|
|
onPress={() => setShowDeleteRelationshipModal(true)}
|
|
icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
|
|
style={styles.dangerButton}
|
|
>
|
|
Delete
|
|
</GlassButton>
|
|
</View>
|
|
</GlassCard>
|
|
)}
|
|
|
|
{/* Delete Account - always show */}
|
|
<GlassCard style={hasRelationship ? StyleSheet.flatten([styles.dangerCard, styles.dangerCardSpacing]) as ViewStyle : styles.dangerCard}>
|
|
<View style={styles.dangerContent}>
|
|
<View style={styles.dangerInfo}>
|
|
<View style={styles.dangerIconContainer}>
|
|
<Ionicons name="person-remove" size={20} color={colors.error} />
|
|
</View>
|
|
<View style={styles.dangerTextContainer}>
|
|
<Text style={styles.dangerTitle}>Delete Account</Text>
|
|
<Text style={styles.dangerDescription}>
|
|
Permanently delete your account and all associated data. This cannot be undone.
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<GlassButton
|
|
variant="danger"
|
|
size="sm"
|
|
onPress={() => setShowDeleteAccountModal(true)}
|
|
icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
|
|
style={styles.dangerButton}
|
|
>
|
|
Delete
|
|
</GlassButton>
|
|
</View>
|
|
</GlassCard>
|
|
</Animated.View>
|
|
|
|
{/* Delete Relationship Modal */}
|
|
<Modal
|
|
visible={showDeleteRelationshipModal}
|
|
transparent
|
|
animationType="fade"
|
|
onRequestClose={closeRelationshipModal}
|
|
>
|
|
<BlurView
|
|
intensity={Platform.OS === 'ios' ? 20 : 0}
|
|
tint="dark"
|
|
style={StyleSheet.absoluteFill}
|
|
>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
style={styles.modalOverlay}
|
|
>
|
|
<View style={styles.modalContent}>
|
|
<View style={styles.modalHeader}>
|
|
<View style={styles.modalIconContainer}>
|
|
<Ionicons name="heart-dislike" size={32} color={colors.error} />
|
|
</View>
|
|
<Text style={styles.modalTitle}>Delete Relationship Data?</Text>
|
|
</View>
|
|
|
|
<Text style={styles.modalDescription}>
|
|
This action cannot be undone. This will permanently delete:
|
|
</Text>
|
|
|
|
<View style={styles.deleteList}>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="heart-dislike" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>Your couple connection</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="checkmark-circle" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All matches and responses</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="chatbubbles" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All chat messages</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="images" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All shared photos</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.confirmLabel}>
|
|
Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
|
|
</Text>
|
|
|
|
<TextInput
|
|
style={styles.confirmInput}
|
|
value={deleteConfirmText}
|
|
onChangeText={setDeleteConfirmText}
|
|
placeholder="Type DELETE"
|
|
placeholderTextColor={colors.textTertiary}
|
|
autoCapitalize="characters"
|
|
autoCorrect={false}
|
|
editable={!isDeletingRelationship}
|
|
/>
|
|
|
|
<View style={styles.modalButtons}>
|
|
<TouchableOpacity
|
|
style={styles.cancelButton}
|
|
onPress={closeRelationshipModal}
|
|
disabled={isDeletingRelationship}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.cancelButtonText}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.deleteButton,
|
|
(deleteConfirmText !== "DELETE" || isDeletingRelationship) && styles.deleteButtonDisabled,
|
|
]}
|
|
onPress={handleDeleteRelationship}
|
|
disabled={deleteConfirmText !== "DELETE" || isDeletingRelationship}
|
|
activeOpacity={0.7}
|
|
>
|
|
{isDeletingRelationship ? (
|
|
<ActivityIndicator size="small" color={colors.text} />
|
|
) : (
|
|
<>
|
|
<Ionicons name="trash" size={16} color={colors.text} />
|
|
<Text style={styles.deleteButtonText}>Delete</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</BlurView>
|
|
</Modal>
|
|
|
|
{/* Delete Account Modal */}
|
|
<Modal
|
|
visible={showDeleteAccountModal}
|
|
transparent
|
|
animationType="fade"
|
|
onRequestClose={closeAccountModal}
|
|
>
|
|
<BlurView
|
|
intensity={Platform.OS === 'ios' ? 20 : 0}
|
|
tint="dark"
|
|
style={StyleSheet.absoluteFill}
|
|
>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
style={styles.modalOverlay}
|
|
>
|
|
<View style={styles.modalContent}>
|
|
<View style={styles.modalHeader}>
|
|
<View style={styles.modalIconContainer}>
|
|
<Ionicons name="person-remove" size={32} color={colors.error} />
|
|
</View>
|
|
<Text style={styles.modalTitle}>Delete Account?</Text>
|
|
</View>
|
|
|
|
<Text style={styles.modalDescription}>
|
|
This action cannot be undone. This will permanently delete:
|
|
</Text>
|
|
|
|
<View style={styles.deleteList}>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="person" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>Your account and profile</Text>
|
|
</View>
|
|
{hasRelationship && (
|
|
<>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="heart-dislike" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>Your relationship data</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="chatbubbles" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All chat messages and photos</Text>
|
|
</View>
|
|
</>
|
|
)}
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="key" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>Your encryption keys</Text>
|
|
</View>
|
|
<View style={styles.deleteListItem}>
|
|
<Ionicons name="cloud-offline" size={16} color={colors.error} />
|
|
<Text style={styles.deleteListText}>All cloud-stored data</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={styles.confirmLabel}>
|
|
Type <Text style={styles.confirmKeyword}>DELETE</Text> to confirm:
|
|
</Text>
|
|
|
|
<TextInput
|
|
style={styles.confirmInput}
|
|
value={deleteConfirmText}
|
|
onChangeText={setDeleteConfirmText}
|
|
placeholder="Type DELETE"
|
|
placeholderTextColor={colors.textTertiary}
|
|
autoCapitalize="characters"
|
|
autoCorrect={false}
|
|
editable={!isDeletingAccount}
|
|
/>
|
|
|
|
<View style={styles.modalButtons}>
|
|
<TouchableOpacity
|
|
style={styles.cancelButton}
|
|
onPress={closeAccountModal}
|
|
disabled={isDeletingAccount}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.cancelButtonText}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.deleteButton,
|
|
(deleteConfirmText !== "DELETE" || isDeletingAccount) && styles.deleteButtonDisabled,
|
|
]}
|
|
onPress={handleDeleteAccount}
|
|
disabled={deleteConfirmText !== "DELETE" || isDeletingAccount}
|
|
activeOpacity={0.7}
|
|
>
|
|
{isDeletingAccount ? (
|
|
<ActivityIndicator size="small" color={colors.text} />
|
|
) : (
|
|
<>
|
|
<Ionicons name="trash" size={16} color={colors.text} />
|
|
<Text style={styles.deleteButtonText}>Delete Account</Text>
|
|
</>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</BlurView>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
section: {
|
|
paddingHorizontal: spacing.lg,
|
|
marginBottom: spacing.lg,
|
|
},
|
|
dangerSectionTitle: {
|
|
...typography.caption1,
|
|
color: colors.error,
|
|
textTransform: "uppercase",
|
|
letterSpacing: 1.5,
|
|
marginBottom: spacing.sm,
|
|
marginLeft: spacing.xs,
|
|
},
|
|
dangerCard: {
|
|
borderColor: 'rgba(231, 76, 60, 0.3)',
|
|
borderWidth: 1,
|
|
},
|
|
dangerCardSpacing: {
|
|
marginTop: spacing.md,
|
|
},
|
|
dangerContent: {
|
|
gap: spacing.md,
|
|
},
|
|
dangerInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-start",
|
|
},
|
|
dangerIconContainer: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.errorLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
dangerTextContainer: {
|
|
flex: 1,
|
|
marginLeft: spacing.md,
|
|
},
|
|
dangerTitle: {
|
|
...typography.headline,
|
|
color: colors.text,
|
|
marginBottom: spacing.xs,
|
|
},
|
|
dangerDescription: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
lineHeight: 20,
|
|
},
|
|
dangerButton: {
|
|
alignSelf: "flex-end",
|
|
},
|
|
// Modal styles
|
|
modalOverlay: {
|
|
flex: 1,
|
|
backgroundColor: "rgba(0, 0, 0, 0.7)",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: spacing.lg,
|
|
},
|
|
modalContent: {
|
|
width: "100%",
|
|
maxWidth: 400,
|
|
padding: spacing.xl,
|
|
backgroundColor: colors.backgroundLight,
|
|
borderRadius: radius.xl,
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.border,
|
|
},
|
|
modalHeader: {
|
|
alignItems: "center",
|
|
marginBottom: spacing.lg,
|
|
},
|
|
modalIconContainer: {
|
|
width: 64,
|
|
height: 64,
|
|
borderRadius: 32,
|
|
backgroundColor: colors.errorLight,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
marginBottom: spacing.md,
|
|
},
|
|
modalTitle: {
|
|
...typography.title2,
|
|
color: colors.text,
|
|
textAlign: "center",
|
|
},
|
|
modalDescription: {
|
|
...typography.body,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.lg,
|
|
textAlign: "center",
|
|
},
|
|
deleteList: {
|
|
backgroundColor: "rgba(231, 76, 60, 0.1)",
|
|
borderRadius: radius.lg,
|
|
padding: spacing.md,
|
|
gap: spacing.sm,
|
|
marginBottom: spacing.xl,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(231, 76, 60, 0.2)',
|
|
},
|
|
deleteListItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: spacing.sm,
|
|
},
|
|
deleteListText: {
|
|
...typography.subhead,
|
|
color: colors.text,
|
|
},
|
|
confirmLabel: {
|
|
...typography.subhead,
|
|
color: colors.textSecondary,
|
|
marginBottom: spacing.xs,
|
|
textAlign: "center",
|
|
},
|
|
confirmKeyword: {
|
|
fontWeight: "bold",
|
|
color: colors.error,
|
|
},
|
|
confirmInput: {
|
|
backgroundColor: colors.glass.background,
|
|
borderRadius: radius.md,
|
|
borderWidth: 1,
|
|
borderColor: colors.error,
|
|
padding: spacing.md,
|
|
...typography.body,
|
|
color: colors.text,
|
|
textAlign: 'center',
|
|
marginBottom: spacing.xl,
|
|
},
|
|
modalButtons: {
|
|
flexDirection: "row",
|
|
gap: spacing.md,
|
|
},
|
|
cancelButton: {
|
|
flex: 1,
|
|
backgroundColor: colors.glass.backgroundLight,
|
|
paddingVertical: spacing.md,
|
|
borderRadius: radius.md,
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
borderColor: colors.glass.borderLight,
|
|
},
|
|
cancelButtonText: {
|
|
...typography.body,
|
|
color: colors.textSecondary,
|
|
fontWeight: "600",
|
|
},
|
|
deleteButton: {
|
|
flex: 1,
|
|
backgroundColor: colors.error,
|
|
paddingVertical: spacing.md,
|
|
borderRadius: radius.md,
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
gap: spacing.xs,
|
|
},
|
|
deleteButtonDisabled: {
|
|
opacity: 0.5,
|
|
},
|
|
deleteButtonText: {
|
|
...typography.body,
|
|
color: colors.text,
|
|
fontWeight: "600",
|
|
},
|
|
});
|