jjbrunton/Sauci
1
0 Fork 0
mirror of https://github.com/jjbrunton/Sauci.git synced 2026-11-02 02:19:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add E2EE unit tests and improve mobile UI

Browse Source 
- Add comprehensive tests for encryption/decryption logic
- Improve error messages for encrypted chat
- Update profile danger zone UI with blur effect
- Refactor typing indicator hook
This commit is contained in:
Jamie Brunton committed 2026-01-03 09:51:31 +00:00
1 parent 0ffa7fa952
commit 365852c130
16 files changed
+591 -218
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/mobile/src/features/chat/ChatScreen.tsx
+14 -2
View File
@@ -3,7 +3,7 @@ import { View, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform, Act
import { Image } from "expo-image";
import { Video, ResizeMode } from "expo-av";
import { useLocalSearchParams, useRouter } from "expo-router";
import { useFocusEffect } from "@react-navigation/native";
import { useFocusEffect, useIsFocused } from "@react-navigation/native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
@@ -56,10 +56,13 @@ export const ChatScreen: React.FC = () => {
cameraVideoMaxDuration: 60, // 1 min for camera recording
});
const isFocused = useIsFocused();
// Typing indicator hook
const { partnerTyping, sendTypingEvent, clearTypingIndicator } = useTypingIndicator({
channelName: `chat:${matchId}`,
userId: user?.id,
isFocused,
});
// Message subscription hook
@@ -188,7 +191,16 @@ export const ChatScreen: React.FC = () => {
const errorMessage = err instanceof Error && err.message
? err.message
: "Failed to send message";
Alert.alert("Error", errorMessage);
// Map technical/unknown errors to friendly ones
let friendlyMessage = errorMessage;
if (errorMessage.includes('Failed to send') && !errorMessage.includes('connection')) {
friendlyMessage = "Couldn't send secure message. Please check your connection.";
} else if (errorMessage.includes('verification failed')) {
friendlyMessage = "Security check failed. Please restart the app.";
}
Alert.alert("Delivery Failed", friendlyMessage);
setInputText(content);
}
};
apps/mobile/src/features/chat/components/MessageContent.tsx
-3
View File
@@ -189,7 +189,6 @@ export function MessageContent({
) : (
<View style={[styles.messageVideo, styles.messageImageLoading]}>
<ActivityIndicator color={ACCENT} />
<Text style={styles.decryptingText}>Loading...</Text>
</View>
)}
{/* Viewed indicator for sender */}
@@ -272,7 +271,6 @@ export function MessageContent({
) : (
<View style={[styles.messageImage, styles.messageImageLoading]}>
<ActivityIndicator color={ACCENT} />
<Text style={styles.decryptingText}>Loading...</Text>
</View>
)}
</TouchableOpacity>
@@ -323,7 +321,6 @@ export function MessageContent({
return (
<View style={styles.decryptingContainer}>
<ActivityIndicator size="small" color={ACCENT} />
<Text style={styles.decryptingText}>Loading...</Text>
</View>
);
}
apps/mobile/src/features/profile/ProfileScreen.tsx
+2 -8
View File
@@ -254,22 +254,17 @@ export function ProfileScreen() {
{__DEV__ && (
<SettingsSection title="Debug" delay={550}>
<MenuItem
icon="refresh"
icon="refresh-outline"
label="Reset Swipe Tutorial"
description="Show the tutorial again"
onPress={async () => {
await resetSwipeTutorial();
Alert.alert("Success", "Swipe tutorial has been reset.");
}}
variant="danger"
// Using danger just for yellow/warning color simulation via props? No, MenuItem uses error color for danger.
// I'll stick to default and standard styling or custom if needed.
// The original used warning color (yellow).
// I will use default for now.
/>
<View style={styles.preferencesDivider} />
<MenuItem
icon="heart"
icon="heart-outline"
label="Reset Matches Tutorial"
description="Show the tutorial again"
onPress={async () => {
@@ -319,7 +314,6 @@ export function ProfileScreen() {
]
);
}}
variant="danger"
/>
</SettingsSection>
)}
apps/mobile/src/features/profile/components/DangerZone.tsx
+112 -125
View File
@@ -1,8 +1,9 @@
import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Modal, TextInput, ActivityIndicator } from 'react-native';
import { View, Text, StyleSheet, Modal, Platform, KeyboardAvoidingView, TouchableOpacity, ActivityIndicator, TextInput } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Animated, { FadeInDown } from 'react-native-reanimated';
import { GlassCard } from '../../../components/ui';
import { BlurView } from 'expo-blur';
import { GlassCard, GlassButton } from '../../../components/ui';
import { colors, spacing, radius, typography } from '../../../theme';
interface DangerZoneProps {
@@ -23,8 +24,6 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
setDeleteConfirmText("");
} catch (error) {
// Error handling relies on parent throwing or managing its own alerts
// If parent throws, we stay on modal or close it?
// Usually parent alerts.
} finally {
setIsDeleting(false);
}
@@ -50,14 +49,15 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
</Text>
</View>
</View>
<TouchableOpacity
style={styles.dangerButton}
<GlassButton
variant="danger"
size="sm"
onPress={() => setShowDeleteModal(true)}
activeOpacity={0.7}
icon={<Ionicons name="trash-outline" size={16} color={colors.text} />}
style={styles.dangerButton}
>
<Ionicons name="trash-outline" size={16} color={colors.error} />
<Text style={styles.dangerButtonText}>Delete</Text>
</TouchableOpacity>
Delete
</GlassButton>
</View>
</GlassCard>
</Animated.View>
@@ -68,87 +68,96 @@ export const DangerZone: React.FC<DangerZoneProps> = ({ onDeleteRelationship })
animationType="fade"
onRequestClose={() => !isDeleting && setShowDeleteModal(false)}
>
<View style={styles.modalOverlay}>
<View style={styles.modalContent}>
<View style={styles.modalHeader}>
<View style={styles.modalIconContainer}>
<Ionicons name="warning" size={32} color={colors.error} />
<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="warning" size={32} color={colors.error} />
</View>
<Text style={styles.modalTitle}>Delete All Data?</Text>
</View>
<Text style={styles.modalTitle}>Delete All Data?</Text>
</View>
<Text style={styles.modalDescription}>
This action cannot be undone. This will permanently delete:
</Text>
<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 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>
<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>
<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={!isDeleting}
/>
<View style={styles.modalButtons}>
<TouchableOpacity
style={styles.cancelButton}
onPress={() => {
setShowDeleteModal(false);
setDeleteConfirmText("");
}}
disabled={isDeleting}
activeOpacity={0.7}
>
<Text style={styles.cancelButtonText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.deleteButton,
(deleteConfirmText !== "DELETE" || isDeleting) && styles.deleteButtonDisabled,
]}
onPress={handleDelete}
disabled={deleteConfirmText !== "DELETE" || isDeleting}
activeOpacity={0.7}
>
{isDeleting ? (
<ActivityIndicator size="small" color={colors.text} />
) : (
<>
<Ionicons name="trash" size={16} color={colors.text} />
<Text style={styles.deleteButtonText}>Delete</Text>
</>
)}
</TouchableOpacity>
</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={!isDeleting}
/>
<View style={styles.modalButtons}>
<TouchableOpacity
style={styles.cancelButton}
onPress={() => {
setShowDeleteModal(false);
setDeleteConfirmText("");
}}
disabled={isDeleting}
activeOpacity={0.7}
>
<Text style={styles.cancelButtonText}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.confirmDeleteButton,
deleteConfirmText !== "DELETE" && styles.confirmDeleteButtonDisabled,
]}
onPress={handleDelete}
disabled={deleteConfirmText !== "DELETE" || isDeleting}
activeOpacity={0.7}
>
{isDeleting ? (
<ActivityIndicator size="small" color={colors.text} />
) : (
<>
<Ionicons name="trash" size={16} color={colors.text} />
<Text style={styles.confirmDeleteButtonText}>Delete</Text>
</>
)}
</TouchableOpacity>
</View>
</View>
</View>
</KeyboardAvoidingView>
</BlurView>
</Modal>
</>
);
@@ -201,39 +210,21 @@ const styles = StyleSheet.create({
lineHeight: 20,
},
dangerButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: colors.errorLight,
paddingVertical: spacing.sm,
paddingHorizontal: spacing.md,
borderRadius: radius.md,
borderWidth: 1,
borderColor: 'rgba(231, 76, 60, 0.3)',
gap: spacing.xs,
alignSelf: "flex-end",
},
dangerButtonText: {
...typography.subhead,
color: colors.error,
fontWeight: "600",
},
// Modal styles
modalOverlay: {
flex: 1,
backgroundColor: "rgba(0, 0, 0, 0.8)",
backgroundColor: "rgba(0, 0, 0, 0.7)",
justifyContent: "center",
alignItems: "center",
padding: spacing.lg,
},
modalContent: {
backgroundColor: colors.backgroundLight,
borderRadius: radius.xl,
padding: spacing.xl,
width: "100%",
maxWidth: 400,
borderWidth: 1,
borderColor: colors.glass.border,
padding: spacing.xl,
backgroundColor: colors.backgroundLight,
},
modalHeader: {
alignItems: "center",
@@ -260,11 +251,13 @@ const styles = StyleSheet.create({
textAlign: "center",
},
deleteList: {
backgroundColor: colors.glass.background,
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",
@@ -285,16 +278,11 @@ const styles = StyleSheet.create({
fontWeight: "bold",
color: colors.error,
},
confirmInput: {
backgroundColor: colors.background,
borderRadius: radius.md,
padding: spacing.md,
color: colors.text,
fontSize: 16,
borderWidth: 1,
borderColor: colors.error,
inputContainer: {
marginBottom: spacing.xl,
textAlign: "center",
},
confirmInput: {
textAlign: 'center',
},
modalButtons: {
flexDirection: "row",
@@ -302,33 +290,32 @@ const styles = StyleSheet.create({
},
cancelButton: {
flex: 1,
backgroundColor: colors.glass.backgroundLight,
paddingVertical: spacing.md,
borderRadius: radius.md,
backgroundColor: colors.glass.background,
alignItems: "center",
borderWidth: 1,
borderColor: colors.glass.border,
borderColor: colors.glass.borderLight,
},
cancelButtonText: {
...typography.body,
color: colors.text,
color: colors.textSecondary,
fontWeight: "600",
},
confirmDeleteButton: {
deleteButton: {
flex: 1,
flexDirection: "row",
backgroundColor: colors.error,
paddingVertical: spacing.md,
borderRadius: radius.md,
backgroundColor: colors.error,
alignItems: "center",
flexDirection: "row",
justifyContent: "center",
gap: spacing.xs,
},
confirmDeleteButtonDisabled: {
deleteButtonDisabled: {
opacity: 0.5,
backgroundColor: colors.errorLight,
},
confirmDeleteButtonText: {
deleteButtonText: {
...typography.body,
color: colors.text,
fontWeight: "600",
apps/mobile/src/features/profile/components/ProfileHeader.tsx
+1
View File
@@ -139,6 +139,7 @@ export const ProfileHeader: React.FC<ProfileHeaderProps> = ({
const styles = StyleSheet.create({
profileSection: {
marginBottom: spacing.xl,
paddingHorizontal: spacing.lg,
},
profileContent: {
flexDirection: 'row',
apps/mobile/src/features/profile/components/SettingsSection.tsx
+1
View File
@@ -33,6 +33,7 @@ export function SettingsSection({ title, delay = 200, children }: SettingsSectio
const styles = StyleSheet.create({
container: {
marginBottom: spacing.lg,
paddingHorizontal: spacing.lg,
},
title: {
...typography.caption1,