leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add profile and login screen + first api logic draft

Browse Source
This commit is contained in:
leonardo
2025-12-09 18:29:24 +01:00
parent abe14f4c3f
commit 49b6ecadb2
19 changed files with 1046 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/(protected)/profile/_layout.tsx Normal file
View File

@ -0,0 +1,7 @@
import { Stack } from "expo-router";
export default function ProfileLayout() {
return (
<Stack screenOptions={{headerShown: false}} />
);
}

132
app/(protected)/profile/index.tsx Normal file
View File

@ -0,0 +1,132 @@
import { useRouter } from 'expo-router';
import { ChevronLeft, LogOut, Mail, Settings, Smartphone, User } from 'lucide-react-native';
import React, { useContext } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { MOCK_USER } from '@/data/data';
import { AuthContext } from '@/utils/authContext';
export default function ProfileScreen() {
const authContext = useContext(AuthContext);
const router = useRouter();
// Dati fittizi aggiuntivi (possono essere presi dal backend in seguito)
const email = `${MOCK_USER.name.toLowerCase().replace(/\s+/g, '.')}@example.com`;
const phone = '+39 345 123 4567';
const initials = MOCK_USER.name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
return (
<View className="flex-1 bg-[#099499]">
{/* --- SEZIONE HEADER (INVARIATA) --- */}
<View className="pt-16 pb-6 px-6">
<View className="flex-row justify-start items-center gap-4">
<TouchableOpacity
onPress={() => router.back()}
>
<ChevronLeft size={28} color="white" />
</TouchableOpacity>
<View className="flex-row items-center gap-4">
<View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center">
<Text className="text-white font-bold text-2xl">{initials}</Text>
</View>
<View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Profilo</Text>
<Text className="text-white text-2xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text>
</View>
</View>
</View>
</View>
<ScrollView
className="flex-1 bg-gray-50 rounded-t-[2.5rem] px-5 pt-8"
contentContainerStyle={{ paddingBottom: 60, gap: 24 }}
showsVerticalScrollIndicator={false}
>
{/* Card info - Testi ingranditi */}
<View className="bg-white p-7 rounded-3xl shadow-sm border border-gray-100">
{/* Titolo sezione ingrandito */}
<Text className="text-2xl font-bold text-gray-800">Informazioni</Text>
<View className="mt-6 gap-5">
<View className="flex-row items-center gap-5">
{/* Icona leggermente più grande e container adattato */}
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<Mail size={24} color="#374151" />
</View>
<View>
{/* Label e valore ingranditi */}
<Text className="text-lg text-gray-700 font-bold">Email</Text>
<Text className="text-gray-500 text-base">{email}</Text>
</View>
</View>
{/* // TODO: Rimuovere telefono, si potrebbe sostituire con altro dato? */}
{/* <View className="flex-row items-center gap-5">
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<Smartphone size={24} color="#374151" />
</View>
<View>
<Text className="text-lg text-gray-700 font-bold">Telefono</Text>
<Text className="text-gray-500 text-base">{phone}</Text>
</View>
</View> */}
<View className="flex-row items-center gap-5">
<View className="w-14 h-14 bg-gray-100 rounded-2xl items-center justify-center">
<User size={24} color="#374151" />
</View>
<View>
<Text className="text-lg text-gray-700 font-bold">Ruolo</Text>
<Text className="text-gray-500 text-base capitalize">{MOCK_USER.role}</Text>
</View>
</View>
</View>
</View>
{/* Actions - Testi e Pulsanti ingranditi */}
<View>
<Text className="text-gray-800 text-2xl font-bold mb-5 px-1">Azioni</Text>
<TouchableOpacity onPress={() => router.push('/permits')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
<View className="flex-row items-center gap-5">
<View className="bg-[#099499]/10 p-3.5 rounded-2xl">
<Settings size={26} color="#099499" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">I miei permessi</Text>
<Text className="text-base text-gray-400 mt-0.5">Richiedi o controlla lo stato</Text>
</View>
</View>
<Text className="text-[#099499] text-base font-bold">Apri</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log('Apri impostazioni')} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100 mb-4">
<View className="flex-row items-center gap-5">
<View className="bg-gray-100 p-3.5 rounded-2xl">
<Settings size={26} color="#374151" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">Impostazioni</Text>
<Text className="text-base text-gray-400 mt-0.5">Preferenze e privacy</Text>
</View>
</View>
<Text className="text-gray-400 text-base font-bold">Apri</Text>
</TouchableOpacity>
<TouchableOpacity onPress={authContext.logOut} className="bg-white p-4 rounded-3xl shadow-sm flex-row items-center justify-between border border-gray-100">
<View className="flex-row items-center gap-5">
<View className="bg-red-50 p-3.5 rounded-2xl">
<LogOut size={26} color="#ef4444" />
</View>
<View>
<Text className="text-lg text-gray-800 font-bold">Esci</Text>
<Text className="text-base text-gray-400 mt-0.5">Chiudi la sessione corrente</Text>
</View>
</View>
<Text className="text-red-500 text-base font-bold">Esci</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}