feat(mobile): improve login, profile, alerts screens and dark mode background
Run Tests on Branches / Detect Changes (push) Successful in 8s
Run Tests on Branches / Backend Tests (push) Has been skipped
Run Tests on Branches / Frontend Tests (push) Successful in 1m41s
Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m46s

- Unify login/register into single screen with tab switcher, logo, and themed inputs
- Redesign profile with header card, segmented theme toggle, icon-based menu, and bottom-sheet modals
- Add auth guard to alerts screen showing login prompt instead of 401 error
- Switch ImageBackground to explicit Image+View layering for reliable rendering
- Add dark mode background image switching in root layout
- Add dark mode override for recent-tag in PWA search view
This commit is contained in:
Antoni Nuñez Romeu
2026-07-10 16:39:59 +02:00
parent bf519e43c9
commit 2a7ab64bbf
7 changed files with 763 additions and 1255 deletions
+54 -2
View File
@@ -1,7 +1,9 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native'; import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { useAuth } from '../../hooks/useAuth';
import { spacing, borderRadius, shadows } from '../../constants/theme'; import { spacing, borderRadius, shadows } from '../../constants/theme';
import { LoadingSpinner } from '../../components/LoadingSpinner'; import { LoadingSpinner } from '../../components/LoadingSpinner';
import api from '../../services/api'; import api from '../../services/api';
@@ -20,17 +22,23 @@ interface NotificationItem {
} }
export default function AlertsScreen() { export default function AlertsScreen() {
const router = useRouter();
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const isTablet = width >= TABLET_MIN_WIDTH; const isTablet = width >= TABLET_MIN_WIDTH;
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const { isAuthenticated, isLoading: authLoading } = useAuth();
const [items, setItems] = useState<NotificationItem[]>([]); const [items, setItems] = useState<NotificationItem[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [deletingId, setDeletingId] = useState<string | null>(null); const [deletingId, setDeletingId] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
if (!authLoading && isAuthenticated) {
loadNotifications(); loadNotifications();
}, []); } else if (!authLoading && !isAuthenticated) {
setIsLoading(false);
}
}, [authLoading, isAuthenticated]);
async function loadNotifications() { async function loadNotifications() {
setIsLoading(true); setIsLoading(true);
@@ -123,10 +131,28 @@ export default function AlertsScreen() {
); );
} }
if (isLoading) { if (isLoading || authLoading) {
return <LoadingSpinner message="Cargando notificaciones..." />; return <LoadingSpinner message="Cargando notificaciones..." />;
} }
if (!isAuthenticated) {
return (
<View style={[styles.container, styles.centered, { backgroundColor: colors.background }]}>
<Ionicons name="lock-closed-outline" size={64} color={colors.border} />
<Text style={[styles.loginTitle, { color: colors.text }]}>Inicia sesión para continuar</Text>
<Text style={[styles.loginSubtitle, { color: colors.textSecondary }]}>
Necesitas estar autenticado para ver tus notificaciones
</Text>
<TouchableOpacity
style={[styles.loginButton, { backgroundColor: colors.primary }]}
onPress={() => router.push('/auth/login')}
>
<Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text>
</TouchableOpacity>
</View>
);
}
return ( return (
<View style={[styles.container, { backgroundColor: colors.background }]}> <View style={[styles.container, { backgroundColor: colors.background }]}>
<View style={[styles.header, isTablet && styles.headerTablet]}> <View style={[styles.header, isTablet && styles.headerTablet]}>
@@ -172,6 +198,32 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
centered: {
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: spacing.xl,
gap: spacing.md,
},
loginTitle: {
fontSize: 20,
fontWeight: '600',
textAlign: 'center',
},
loginSubtitle: {
fontSize: 14,
textAlign: 'center',
lineHeight: 20,
},
loginButton: {
paddingHorizontal: spacing.lg,
paddingVertical: spacing.md,
borderRadius: borderRadius.lg,
marginTop: spacing.sm,
},
loginButtonText: {
fontSize: 16,
fontWeight: '600',
},
header: { header: {
paddingHorizontal: spacing.lg, paddingHorizontal: spacing.lg,
paddingTop: spacing.lg, paddingTop: spacing.lg,
File diff suppressed because it is too large Load Diff
+22 -13
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { Stack } from 'expo-router'; import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, View } from 'react-native'; import { Image, StyleSheet, View } from 'react-native';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context'; import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -11,6 +11,9 @@ import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
const queryClient = new QueryClient(); const queryClient = new QueryClient();
const bgLight = require('../assets/bg.png');
const bgDark = require('../assets/bg_dark.png');
function RootLayoutInner() { function RootLayoutInner() {
const { checkAuth } = useAuthStore(); const { checkAuth } = useAuthStore();
const { colors, isDark } = useThemeContext(); const { colors, isDark } = useThemeContext();
@@ -85,21 +88,23 @@ function ThemedBackground({ children }: { children: React.ReactNode }) {
const { isDark } = useThemeContext(); const { isDark } = useThemeContext();
return ( return (
<ImageBackground <View style={styles.root}>
source={isDark ? require('../assets/bg_dark.png') : require('../assets/bg.png')} <Image
style={bgStyles.background} source={isDark ? bgDark : bgLight}
style={styles.bgImage}
resizeMode="cover" resizeMode="cover"
imageStyle={bgStyles.backgroundImage} />
> <View style={[styles.overlay, isDark && styles.overlayDark]} pointerEvents="none" />
<View style={[bgStyles.overlay, isDark && bgStyles.overlayDark]} /> <View style={styles.content}>
{children} {children}
</ImageBackground> </View>
</View>
); );
} }
export default function RootLayout() { export default function RootLayout() {
return ( return (
<GestureHandlerRootView style={{ flex: 1 }}> <GestureHandlerRootView style={styles.root}>
<SafeAreaProvider> <SafeAreaProvider>
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ThemeProvider> <ThemeProvider>
@@ -113,11 +118,12 @@ export default function RootLayout() {
); );
} }
const bgStyles = StyleSheet.create({ const styles = StyleSheet.create({
background: { root: {
flex: 1, flex: 1,
}, },
backgroundImage: { bgImage: {
...StyleSheet.absoluteFillObject,
opacity: 0.55, opacity: 0.55,
}, },
overlay: { overlay: {
@@ -127,4 +133,7 @@ const bgStyles = StyleSheet.create({
overlayDark: { overlayDark: {
backgroundColor: 'rgba(0, 0, 0, 0.25)', backgroundColor: 'rgba(0, 0, 0, 0.25)',
}, },
content: {
flex: 1,
},
}); });
+249 -57
View File
@@ -7,34 +7,48 @@ import {
StyleSheet, StyleSheet,
KeyboardAvoidingView, KeyboardAvoidingView,
Platform, Platform,
Alert Alert,
Image,
} from 'react-native'; } from 'react-native';
import { useRouter } from 'expo-router'; import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '../../store/authStore'; import { useAuthStore } from '../../store/authStore';
import { useThemeContext } from '../../components/ThemeProvider'; import { useThemeContext } from '../../components/ThemeProvider';
import { spacing, borderRadius } from '../../constants/theme'; import { register } from '../../services/auth';
import { spacing, borderRadius, shadows } from '../../constants/theme';
import { import {
isBiometricsAvailable, isBiometricsAvailable,
authenticateWithBiometrics, authenticateWithBiometrics,
saveBiometricCredentials, saveBiometricCredentials,
getBiometricUsername getBiometricUsername,
} from '../../services/biometrics'; } from '../../services/biometrics';
type Tab = 'login' | 'register';
export default function LoginScreen() { export default function LoginScreen() {
const router = useRouter(); const router = useRouter();
const { login } = useAuthStore(); const { login } = useAuthStore();
const { colors } = useThemeContext(); const { colors } = useThemeContext();
const [tab, setTab] = useState<Tab>('login');
const [username, setUsername] = useState(''); const [username, setUsername] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [biometricsAvailable, setBiometricsAvailable] = useState(false); const [biometricsAvailable, setBiometricsAvailable] = useState(false);
const [biometricUsername, setBiometricUsername] = useState<string | null>(null); const [biometricUsername, setBiometricUsername] = useState<string | null>(null);
const isRegister = tab === 'register';
useEffect(() => { useEffect(() => {
checkBiometrics(); checkBiometrics();
}, []); }, []);
useEffect(() => {
setUsername('');
setPassword('');
setConfirmPassword('');
}, [tab]);
const checkBiometrics = async () => { const checkBiometrics = async () => {
try { try {
const available = await isBiometricsAvailable(); const available = await isBiometricsAvailable();
@@ -48,21 +62,42 @@ export default function LoginScreen() {
} }
}; };
const handleLogin = async () => { const handleSubmit = async () => {
if (!username || !password) { if (!username.trim() || !password) {
Alert.alert('Error', 'Por favor ingresa usuario y contraseña'); Alert.alert('Error', 'Por favor completa todos los campos');
return; return;
} }
if (isRegister) {
if (password.length < 8) {
Alert.alert('Error', 'La contraseña debe tener al menos 8 caracteres');
return;
}
if (password !== confirmPassword) {
Alert.alert('Error', 'Las contraseñas no coinciden');
return;
}
}
setIsLoading(true); setIsLoading(true);
try { try {
await login(username, password); if (isRegister) {
await register(username.trim(), password);
Alert.alert('Éxito', 'Cuenta creada correctamente', [
{ text: 'OK', onPress: () => setTab('login') },
]);
} else {
await login(username.trim(), password);
if (biometricsAvailable) { if (biometricsAvailable) {
await saveBiometricCredentials(username); await saveBiometricCredentials(username.trim());
} }
router.replace('/(tabs)'); router.replace('/(tabs)');
}
} catch (error) { } catch (error) {
Alert.alert('Error', 'Credenciales incorrectas'); Alert.alert(
'Error',
isRegister ? 'No se pudo crear la cuenta' : 'Credenciales incorrectas'
);
} finally { } finally {
setIsLoading(false); setIsLoading(false);
} }
@@ -95,61 +130,162 @@ export default function LoginScreen() {
style={[styles.container, { backgroundColor: colors.background }]} style={[styles.container, { backgroundColor: colors.background }]}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
> >
<View style={styles.form}> <View style={styles.content}>
<Text style={[styles.title, { color: colors.text }]}>Iniciar Sesión</Text> {/* Logo */}
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>Ingresa tus credenciales para continuar</Text> <View style={styles.logoSection}>
<Image
source={require('../../assets/farmaclic_logo.png')}
style={styles.logo}
resizeMode="contain"
/>
<Text style={[styles.brandName, { color: colors.text }]}>FarmaClic</Text>
</View>
<View style={styles.inputContainer}> {/* Tabs */}
<Text style={[styles.label, { color: colors.text }]}>Usuario</Text> <View style={[styles.tabBar, { backgroundColor: colors.surfaceLow }]}>
<TouchableOpacity
style={[
styles.tab,
!isRegister && [styles.tabActive, { backgroundColor: colors.primary }],
]}
onPress={() => setTab('login')}
disabled={isLoading}
>
<Text
style={[
styles.tabText,
{ color: isRegister ? colors.textSecondary : colors.onPrimaryContainer },
!isRegister && styles.tabTextActive,
]}
>
Iniciar Sesión
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.tab,
isRegister && [styles.tabActive, { backgroundColor: colors.primary }],
]}
onPress={() => setTab('register')}
disabled={isLoading}
>
<Text
style={[
styles.tabText,
{ color: !isRegister ? colors.textSecondary : colors.onPrimaryContainer },
isRegister && styles.tabTextActive,
]}
>
Crear Cuenta
</Text>
</TouchableOpacity>
</View>
{/* Card */}
<View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
{/* Header */}
<Text style={[styles.title, { color: colors.text }]}>
{isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}
</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>
{isRegister
? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.'
: 'Inicia sesión para gestionar tu perfil y notificaciones.'}
</Text>
{/* Username */}
<View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
<Ionicons name="person-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
<TextInput <TextInput
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]} style={[styles.input, { color: colors.text }]}
value={username} value={username}
onChangeText={setUsername} onChangeText={setUsername}
placeholder="Tu usuario" placeholder="Usuario"
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
autoCapitalize="none" autoCapitalize="none"
autoCorrect={false} autoCorrect={false}
autoComplete="username"
/> />
</View> </View>
<View style={styles.inputContainer}> {/* Password */}
<Text style={[styles.label, { color: colors.text }]}>Contraseña</Text> <View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
<Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
<TextInput <TextInput
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]} style={[styles.input, { color: colors.text }]}
value={password} value={password}
onChangeText={setPassword} onChangeText={setPassword}
placeholder="Tu contraseña" placeholder="Contraseña"
placeholderTextColor={colors.textSecondary} placeholderTextColor={colors.textSecondary}
secureTextEntry secureTextEntry
autoComplete={isRegister ? 'new-password' : 'current-password'}
/> />
</View> </View>
{/* Confirm password (register only) */}
{isRegister && (
<View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
<Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
<TextInput
style={[styles.input, { color: colors.text }]}
value={confirmPassword}
onChangeText={setConfirmPassword}
placeholder="Confirmar contraseña"
placeholderTextColor={colors.textSecondary}
secureTextEntry
autoComplete="new-password"
/>
</View>
)}
{/* Hints (register only) */}
{isRegister && (
<View style={styles.hints}>
<Text style={[styles.hint, { color: colors.textSecondary }]}>
<Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> 3-32 caracteres para el usuario
</Text>
<Text style={[styles.hint, { color: colors.textSecondary }]}>
<Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> Mínimo 8 caracteres para la contraseña
</Text>
</View>
)}
{/* Submit button */}
<TouchableOpacity <TouchableOpacity
style={[styles.button, isLoading && styles.buttonDisabled]} style={[styles.button, { backgroundColor: colors.primary }, isLoading && styles.buttonDisabled]}
onPress={handleLogin} onPress={handleSubmit}
disabled={isLoading} disabled={isLoading}
> >
<Text style={styles.buttonText}> {isLoading ? (
{isLoading ? 'Ingresando...' : 'Iniciar Sesión'} <Ionicons name="hourglass" size={20} color={colors.onPrimaryContainer} />
) : (
<Text style={[styles.buttonText, { color: colors.onPrimaryContainer }]}>
{isRegister ? 'Crear Cuenta' : 'Iniciar Sesión'}
</Text> </Text>
)}
</TouchableOpacity> </TouchableOpacity>
{biometricsAvailable && biometricUsername && ( {/* Biometrics (login only) */}
{!isRegister && biometricsAvailable && biometricUsername && (
<TouchableOpacity <TouchableOpacity
style={[styles.biometricButton, { backgroundColor: colors.card, borderColor: colors.primary }]} style={[styles.biometricButton, { borderColor: colors.primary }]}
onPress={handleBiometricLogin} onPress={handleBiometricLogin}
disabled={isLoading} disabled={isLoading}
> >
<Ionicons name="finger-print" size={24} color={colors.primary} /> <Ionicons name="finger-print" size={22} color={colors.primary} />
<Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text> <Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text>
</TouchableOpacity> </TouchableOpacity>
)} )}
</View>
{/* Footer link */}
<TouchableOpacity <TouchableOpacity
style={styles.linkButton} style={styles.linkButton}
onPress={() => router.push('/auth/register')} onPress={() => setTab(isRegister ? 'login' : 'register')}
> >
<Text style={[styles.linkText, { color: colors.primary }]}>¿No tienes cuenta? Regístrate</Text> <Text style={[styles.linkText, { color: colors.primary }]}>
{isRegister ? '¿Ya tienes cuenta? Inicia sesión' : '¿No tienes cuenta? Regístrate'}
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
@@ -160,54 +296,102 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
form: { content: {
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
padding: spacing.xl, paddingHorizontal: spacing.lg,
gap: spacing.lg,
}, },
title: { logoSection: {
fontSize: 28, alignItems: 'center',
fontWeight: 'bold', gap: spacing.sm,
marginBottom: spacing.sm,
}, },
subtitle: { logo: {
fontSize: 16, width: 80,
marginBottom: spacing.xl, height: 80,
}, },
inputContainer: { brandName: {
marginBottom: spacing.md, fontSize: 22,
fontWeight: '700',
letterSpacing: -0.3,
}, },
label: { tabBar: {
flexDirection: 'row',
borderRadius: borderRadius.lg,
padding: 4,
},
tab: {
flex: 1,
paddingVertical: spacing.sm + 2,
borderRadius: borderRadius.md,
alignItems: 'center',
},
tabActive: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
},
tabText: {
fontSize: 14, fontSize: 14,
fontWeight: '500', fontWeight: '500',
},
tabTextActive: {
fontWeight: '700',
},
card: {
borderRadius: borderRadius.xl,
padding: spacing.lg,
gap: spacing.sm,
},
title: {
fontSize: 22,
fontWeight: '700',
marginBottom: spacing.xs, marginBottom: spacing.xs,
}, },
input: { subtitle: {
fontSize: 14,
lineHeight: 20,
marginBottom: spacing.sm,
},
inputWrapper: {
flexDirection: 'row',
alignItems: 'center',
borderRadius: borderRadius.md, borderRadius: borderRadius.md,
padding: spacing.md, borderWidth: 1,
paddingHorizontal: spacing.md,
},
inputIcon: {
marginRight: spacing.sm,
},
input: {
flex: 1,
paddingVertical: spacing.md,
fontSize: 16, fontSize: 16,
}, },
hints: {
gap: 2,
marginTop: spacing.xs,
},
hint: {
fontSize: 12,
lineHeight: 18,
},
button: { button: {
backgroundColor: '#7fbf8f',
borderRadius: borderRadius.md, borderRadius: borderRadius.md,
padding: spacing.md, padding: spacing.md,
alignItems: 'center', alignItems: 'center',
marginTop: spacing.md, marginTop: spacing.sm,
flexDirection: 'row',
justifyContent: 'center',
}, },
buttonDisabled: { buttonDisabled: {
opacity: 0.6, opacity: 0.6,
}, },
buttonText: { buttonText: {
color: '#ffffff',
fontSize: 16, fontSize: 16,
fontWeight: '600', fontWeight: '700',
},
linkButton: {
marginTop: spacing.lg,
alignItems: 'center',
},
linkText: {
fontSize: 14,
}, },
biometricButton: { biometricButton: {
flexDirection: 'row', flexDirection: 'row',
@@ -215,12 +399,20 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
borderRadius: borderRadius.md, borderRadius: borderRadius.md,
padding: spacing.md, padding: spacing.md,
marginTop: spacing.md, marginTop: spacing.xs,
borderWidth: 1, borderWidth: 1,
gap: spacing.sm,
}, },
biometricText: { biometricText: {
fontSize: 16, fontSize: 15,
fontWeight: '600',
},
linkButton: {
alignItems: 'center',
paddingVertical: spacing.sm,
},
linkText: {
fontSize: 14,
fontWeight: '600', fontWeight: '600',
marginLeft: spacing.sm,
}, },
}); });
+3 -165
View File
@@ -1,167 +1,5 @@
import React, { useState } from 'react'; import { Redirect } from 'expo-router';
import {
View,
Text,
TextInput,
TouchableOpacity,
StyleSheet,
KeyboardAvoidingView,
Platform,
Alert
} from 'react-native';
import { useRouter } from 'expo-router';
import { register } from '../../services/auth';
import { useThemeContext } from '../../components/ThemeProvider';
import { spacing, borderRadius } from '../../constants/theme';
export default function RegisterScreen() { export default function RegisterRedirect() {
const router = useRouter(); return <Redirect href="/auth/login" />;
const { colors } = useThemeContext();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleRegister = async () => {
if (!username || !password || !confirmPassword) {
Alert.alert('Error', 'Por favor completa todos los campos');
return;
}
if (password !== confirmPassword) {
Alert.alert('Error', 'Las contraseñas no coinciden');
return;
}
setIsLoading(true);
try {
await register(username, password);
router.replace('/(tabs)');
} catch (error) {
Alert.alert('Error', 'No se pudo crear la cuenta');
} finally {
setIsLoading(false);
}
};
return (
<KeyboardAvoidingView
style={[styles.container, { backgroundColor: colors.background }]}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<View style={styles.form}>
<Text style={[styles.title, { color: colors.text }]}>Crear Cuenta</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>Regístrate para empezar</Text>
<View style={styles.inputContainer}>
<Text style={[styles.label, { color: colors.text }]}>Usuario</Text>
<TextInput
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
value={username}
onChangeText={setUsername}
placeholder="Elige un usuario"
placeholderTextColor={colors.textSecondary}
autoCapitalize="none"
autoCorrect={false}
/>
</View>
<View style={styles.inputContainer}>
<Text style={[styles.label, { color: colors.text }]}>Contraseña</Text>
<TextInput
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
value={password}
onChangeText={setPassword}
placeholder="Elige una contraseña"
placeholderTextColor={colors.textSecondary}
secureTextEntry
/>
</View>
<View style={styles.inputContainer}>
<Text style={[styles.label, { color: colors.text }]}>Confirmar Contraseña</Text>
<TextInput
style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
value={confirmPassword}
onChangeText={setConfirmPassword}
placeholder="Repite la contraseña"
placeholderTextColor={colors.textSecondary}
secureTextEntry
/>
</View>
<TouchableOpacity
style={[styles.button, isLoading && styles.buttonDisabled]}
onPress={handleRegister}
disabled={isLoading}
>
<Text style={styles.buttonText}>
{isLoading ? 'Creando cuenta...' : 'Crear Cuenta'}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.linkButton}
onPress={() => router.back()}
>
<Text style={[styles.linkText, { color: colors.primary }]}>¿Ya tienes cuenta? Inicia sesión</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
} }
const styles = StyleSheet.create({
container: {
flex: 1,
},
form: {
flex: 1,
justifyContent: 'center',
padding: spacing.xl,
},
title: {
fontSize: 28,
fontWeight: 'bold',
marginBottom: spacing.sm,
},
subtitle: {
fontSize: 16,
marginBottom: spacing.xl,
},
inputContainer: {
marginBottom: spacing.md,
},
label: {
fontSize: 14,
fontWeight: '500',
marginBottom: spacing.xs,
},
input: {
borderRadius: borderRadius.md,
padding: spacing.md,
fontSize: 16,
},
button: {
backgroundColor: '#7fbf8f',
borderRadius: borderRadius.md,
padding: spacing.md,
alignItems: 'center',
marginTop: spacing.md,
},
buttonDisabled: {
opacity: 0.6,
},
buttonText: {
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
},
linkButton: {
marginTop: spacing.lg,
alignItems: 'center',
},
linkText: {
fontSize: 14,
},
});
+4
View File
@@ -149,6 +149,10 @@
white-space: nowrap; white-space: nowrap;
} }
[data-theme="dark"] .recent-tag {
background: #2c3038;
}
.recent-distance { .recent-distance {
display: flex; display: flex;
align-items: center; align-items: center;
+21
View File
@@ -0,0 +1,21 @@
{
"cli": {
"version": ">= 20.5.1",
"appVersionSource": "remote"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {
"autoIncrement": true
}
},
"submit": {
"production": {}
}
}