v1.0.0
This commit is contained in:
@@ -1,231 +1,251 @@
|
||||
import React from 'react';
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
StyleSheet,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
} from 'react-native';
|
||||
import { useAuth } from '../../src/context/AuthContext';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
Alert,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useColorScheme } from "../../hooks/use-color-scheme";
|
||||
import { useAuth } from "../../src/context/AuthContext";
|
||||
import { useRouter } from "expo-router";
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const { user, logout } = useAuth();
|
||||
const { user, serverAddress, logout } = useAuth();
|
||||
const router = useRouter();
|
||||
const colorScheme = useColorScheme() ?? "light";
|
||||
const isDark = colorScheme === "dark";
|
||||
const bgColor = isDark ? "#0b0b0d" : "#f5f5f5";
|
||||
const sectionBg = isDark ? "#1c1c1e" : "#fff";
|
||||
const sectionTitleBg = isDark ? "#111111" : "#f9f9f9";
|
||||
const textColor = isDark ? "#fff" : "#333";
|
||||
const subTextColor = isDark ? "#c6c6c8" : "#666";
|
||||
const primary = isDark ? "#0A84FF" : "#007AFF";
|
||||
const destructiveColor = "#f44336";
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'Logout',
|
||||
'Are you sure you want to logout?',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Logout',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await logout();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
const handleLogout = () => {
|
||||
Alert.alert("Logout", "Are you sure you want to logout?", [
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Logout",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
router.replace("/login");
|
||||
await logout();
|
||||
},
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleClearData = () => {
|
||||
Alert.alert(
|
||||
'Clear Data',
|
||||
'This will clear all stored data. Are you sure?',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Clear',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
await AsyncStorage.clear();
|
||||
Alert.alert('Success', 'All data cleared');
|
||||
} catch (error) {
|
||||
Alert.alert('Error', 'Failed to clear data');
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
const SettingItem = ({
|
||||
label,
|
||||
value,
|
||||
onPress,
|
||||
}: {
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.settingItem,
|
||||
{ borderBottomColor: isDark ? "rgba(255,255,255,0.03)" : "#f0f0f0" },
|
||||
]}
|
||||
onPress={onPress}
|
||||
disabled={!onPress}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
>
|
||||
<Text style={[styles.settingLabel, { color: textColor }]}>{label}</Text>
|
||||
<View style={styles.settingValueContainer}>
|
||||
<Text
|
||||
style={[styles.settingValue, { color: subTextColor }]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const SettingItem = ({
|
||||
label,
|
||||
value,
|
||||
onPress
|
||||
}: {
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={styles.settingItem}
|
||||
onPress={onPress}
|
||||
disabled={!onPress}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
>
|
||||
<Text style={styles.settingLabel}>{label}</Text>
|
||||
<View style={styles.settingValueContainer}>
|
||||
<Text style={styles.settingValue} numberOfLines={1}>
|
||||
{value || 'N/A'}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
const ActionButton = ({
|
||||
title,
|
||||
onPress,
|
||||
destructive = false,
|
||||
}: {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
destructive?: boolean;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.actionButton,
|
||||
{ backgroundColor: destructive ? destructiveColor : primary },
|
||||
]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text style={styles.actionButtonText}>{title}</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
const ActionButton = ({
|
||||
title,
|
||||
onPress,
|
||||
destructive = false,
|
||||
}: {
|
||||
title: string;
|
||||
onPress: () => void;
|
||||
destructive?: boolean;
|
||||
}) => (
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, destructive && styles.actionButtonDestructive]}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.actionButtonText,
|
||||
destructive && styles.actionButtonTextDestructive,
|
||||
]}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
return (
|
||||
<ScrollView style={[styles.container, { backgroundColor: bgColor }]}>
|
||||
<View style={styles.content}>
|
||||
<View
|
||||
style={[
|
||||
styles.section,
|
||||
{
|
||||
backgroundColor: sectionBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{ color: subTextColor, backgroundColor: sectionTitleBg },
|
||||
]}
|
||||
>
|
||||
User Information
|
||||
</Text>
|
||||
<SettingItem label="Username" value={user?.username || "Admin"} />
|
||||
<SettingItem label="Email" value={user?.email || "N/A"} />
|
||||
<SettingItem label="Server URL" value={serverAddress || "N/A"} />
|
||||
</View>
|
||||
|
||||
return (
|
||||
<ScrollView style={styles.container}>
|
||||
<View style={styles.content}>
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>User Information</Text>
|
||||
<SettingItem label="Username" value={user?.username || 'N/A'} />
|
||||
<SettingItem label="Email" value={user?.email || 'N/A'} />
|
||||
<SettingItem
|
||||
label="User ID"
|
||||
value={user?.id || 'N/A'}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.section,
|
||||
{
|
||||
backgroundColor: sectionBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{ color: subTextColor, backgroundColor: sectionTitleBg },
|
||||
]}
|
||||
>
|
||||
App Info
|
||||
</Text>
|
||||
<SettingItem label="Version" value="1.0.0" />
|
||||
<SettingItem label="Build" value="Expo" />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Server</Text>
|
||||
<SettingItem
|
||||
label="Server URL"
|
||||
value="https://wol.f6knight.duckdns.org"
|
||||
/>
|
||||
<SettingItem
|
||||
label="API Base"
|
||||
value="/api"
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={[
|
||||
styles.section,
|
||||
{
|
||||
backgroundColor: sectionBg,
|
||||
shadowColor: isDark ? "rgba(255,255,255,0.02)" : "#000",
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.sectionTitle,
|
||||
{ color: subTextColor, backgroundColor: sectionTitleBg },
|
||||
]}
|
||||
>
|
||||
Actions
|
||||
</Text>
|
||||
<ActionButton title="Logout" onPress={handleLogout} destructive />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>App Info</Text>
|
||||
<SettingItem label="Version" value="1.0.0" />
|
||||
<SettingItem label="Build" value="Expo" />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.sectionTitle}>Actions</Text>
|
||||
<ActionButton title="Logout" onPress={handleLogout} destructive />
|
||||
<ActionButton title="Clear All Data" onPress={handleClearData} destructive />
|
||||
</View>
|
||||
|
||||
<View style={styles.footer}>
|
||||
<Text style={styles.footerText}>
|
||||
UpSnap Mobile App
|
||||
</Text>
|
||||
<Text style={styles.footerText}>
|
||||
Connect to your UpSnap server
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
<View style={styles.footer}>
|
||||
<Text style={[styles.footerText, { color: subTextColor }]}>
|
||||
UpSnap Mobile App
|
||||
</Text>
|
||||
<Text style={[styles.footerText, { color: subTextColor }]}>
|
||||
Connect to your UpSnap server
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 12,
|
||||
marginBottom: 20,
|
||||
overflow: 'hidden',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
color: '#666',
|
||||
paddingHorizontal: 15,
|
||||
paddingTop: 15,
|
||||
paddingBottom: 10,
|
||||
backgroundColor: '#f9f9f9',
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 15,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#f0f0f0',
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: '#333',
|
||||
flex: 1,
|
||||
},
|
||||
settingValueContainer: {
|
||||
flex: 1,
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
settingValue: {
|
||||
fontSize: 14,
|
||||
color: '#666',
|
||||
maxWidth: 200,
|
||||
},
|
||||
actionButton: {
|
||||
backgroundColor: '#007AFF',
|
||||
margin: 15,
|
||||
padding: 15,
|
||||
borderRadius: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
actionButtonDestructive: {
|
||||
backgroundColor: '#f44336',
|
||||
},
|
||||
actionButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
actionButtonTextDestructive: {
|
||||
color: '#fff',
|
||||
},
|
||||
footer: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 30,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
color: '#999',
|
||||
marginBottom: 5,
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f5f5",
|
||||
},
|
||||
content: {
|
||||
padding: 20,
|
||||
},
|
||||
section: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 12,
|
||||
marginBottom: 20,
|
||||
overflow: "hidden",
|
||||
shadowColor: "#000",
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 3,
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
color: "#666",
|
||||
paddingHorizontal: 15,
|
||||
paddingTop: 15,
|
||||
paddingBottom: 10,
|
||||
backgroundColor: "#f9f9f9",
|
||||
borderTopLeftRadius: 12,
|
||||
borderTopRightRadius: 12,
|
||||
},
|
||||
settingItem: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 15,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f0f0f0",
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
flex: 1,
|
||||
},
|
||||
settingValueContainer: {
|
||||
flex: 1,
|
||||
alignItems: "flex-end",
|
||||
},
|
||||
settingValue: {
|
||||
fontSize: 14,
|
||||
color: "#666",
|
||||
maxWidth: 200,
|
||||
},
|
||||
actionButton: {
|
||||
backgroundColor: "#007AFF",
|
||||
margin: 15,
|
||||
padding: 15,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
},
|
||||
actionButtonDestructive: {
|
||||
backgroundColor: "#f44336",
|
||||
},
|
||||
actionButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
actionButtonTextDestructive: {
|
||||
color: "#fff",
|
||||
},
|
||||
footer: {
|
||||
alignItems: "center",
|
||||
paddingVertical: 30,
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
color: "#999",
|
||||
marginBottom: 5,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user