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

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

@ -0,0 +1,84 @@
import { Redirect, Tabs } from 'expo-router';
import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
import { useContext } from 'react';
import { AuthContext } from '@/utils/authContext';
export default function ProtectedLayout() {
const authState = useContext(AuthContext);
if (!authState.isReady) {
return null;
}
if (!authState.isAuthenticated) {
return <Redirect href="/login" />;
}
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: '#f3f4f6',
height: 80,
paddingBottom: 20,
paddingTop: 10,
},
tabBarActiveTintColor: '#099499',
tabBarInactiveTintColor: '#9ca3af',
tabBarLabelStyle: {
fontSize: 10,
fontWeight: '600',
marginTop: 4
}
}}
backBehavior='history'
>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
}}
/>
<Tabs.Screen
name="attendance/index"
options={{
title: 'Presenze',
tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
}}
/>
<Tabs.Screen
name="permits/index"
options={{
title: 'Permessi',
tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
}}
/>
<Tabs.Screen
name="documents/index"
options={{
title: 'Moduli',
tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
}}
/>
<Tabs.Screen
name="automation"
options={{
title: 'Domotica',
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
}}
/>
{/* TODO: Da rimuovere */}
<Tabs.Screen
name="profile"
options={{
href: null,
title: 'Profilo',
}}
/>
</Tabs>
);
}

0
app/attendance/index.tsx → app/(protected)/attendance/index.tsx
View File

0
app/automation/[id].tsx → app/(protected)/automation/[id].tsx
View File

0
app/automation/_layout.tsx → app/(protected)/automation/_layout.tsx
View File

0
app/automation/index.tsx → app/(protected)/automation/index.tsx
View File

0
app/documents/index.tsx → app/(protected)/documents/index.tsx
View File

12
app/index.tsx → app/(protected)/index.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { useRouter } from 'expo-router';
import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
import { Bell, User, AlertTriangle, QrCode, FileText, CheckCircle2 } from 'lucide-react-native';
import { MOCK_USER, ATTENDANCE_DATA, DOCUMENTS_DATA } from '../data/data';
import { AlertTriangle, Bell, CheckCircle2, FileText, QrCode, User } from 'lucide-react-native';
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { ATTENDANCE_DATA, DOCUMENTS_DATA, MOCK_USER } from '../../data/data';
export default function HomeScreen() {
const router = useRouter();
@ -16,7 +16,7 @@ export default function HomeScreen() {
<View className="flex-row items-center gap-4">
<View>
<Text className="text-teal-100 text-lg font-medium uppercase tracking-wider mb-1">Benvenuto</Text>
<Text className="text-white text-3xl font-bold">{MOCK_USER.name}</Text>
<Text className="text-white text-3xl font-bold">{MOCK_USER.name} {MOCK_USER.surname}</Text>
<Text className="text-teal-200">{MOCK_USER.role}</Text>
</View>
</View>
@ -25,7 +25,7 @@ export default function HomeScreen() {
<Bell size={28} color="white" />
<View className="absolute top-2.5 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-[#099499]" />
</TouchableOpacity>
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20">
<TouchableOpacity className="p-3 bg-white/10 rounded-full active:bg-white/20" onPress={() => router.push('/profile')}>
<User size={28} color="white" />
</TouchableOpacity>
</View>

0
app/permits/index.tsx → app/(protected)/permits/index.tsx
View File

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>
);
}

70
app/_layout.tsx
View File

@ -1,64 +1,14 @@
import '../global.css';
import { Tabs } from 'expo-router';
import { Home, Clock, FileText, Zap, CalendarIcon } from 'lucide-react-native';
import { AuthProvider } from '@/utils/authContext';
import { Stack } from 'expo-router';
export default function AppLayout() {
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: '#f3f4f6',
height: 80,
paddingBottom: 20,
paddingTop: 10,
},
tabBarActiveTintColor: '#099499',
tabBarInactiveTintColor: '#9ca3af',
tabBarLabelStyle: {
fontSize: 10,
fontWeight: '600',
marginTop: 4
}
}}
>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, size }) => <Home color={color} size={24} />,
}}
/>
<Tabs.Screen
name="attendance/index"
options={{
title: 'Presenze',
tabBarIcon: ({ color, size }) => <Clock color={color} size={24} />,
}}
/>
<Tabs.Screen
name="permits/index"
options={{
title: 'Permessi',
tabBarIcon: ({ color, size }) => <CalendarIcon color={color} size={24} />,
}}
/>
<Tabs.Screen
name="documents/index"
options={{
title: 'Moduli',
tabBarIcon: ({ color, size }) => <FileText color={color} size={24} />,
}}
/>
<Tabs.Screen
name="automation"
options={{
title: 'Domotica',
tabBarIcon: ({ color, size }) => <Zap color={color} size={24} />,
}}
/>
</Tabs>
);
return (
<AuthProvider>
<Stack screenOptions={{ headerShown: false }}>
<Stack.Screen name="(protected)" />
<Stack.Screen name="login" />
</Stack>
</AuthProvider>
);
}

111
app/login.tsx Normal file
View File

@ -0,0 +1,111 @@
import React, { useState, useContext } from 'react';
import { Eye, EyeOff, Lock, LogIn, Mail } from 'lucide-react-native';
import {
KeyboardAvoidingView,
Platform,
ScrollView,
Text,
TextInput,
TouchableOpacity,
View,
Image
} from 'react-native';
import { AuthContext } from '@/utils/authContext';
export default function LoginScreen() {
const authContext = useContext(AuthContext);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const handleLogin = () => {
setIsLoading(true);
// Simulazione login
setTimeout(() => {
setIsLoading(false);
authContext.logIn();
}, 1500);
};
return (
<View className="flex-1 bg-[#099499] h-screen overflow-hidden">
{/* Header con Logo/Titolo */}
<View className="h-[35%] flex-column justify-center items-center">
<Image
source={require('@/assets/images/mariani-logo.png')}
className='h-24 w-80'
resizeMode="contain"
/>
</View>
{/* Form Container */}
<View className="flex-1 bg-white rounded-t-[2.5rem] px-8 pt-10 shadow-xl w-full">
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
className="flex-1"
>
<ScrollView showsVerticalScrollIndicator={false} className="h-full">
<View className="gap-6 flex flex-col" style={{ gap: '1.5rem' }}>
{/* Input Email */}
<View>
<Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Email o Username</Text>
<View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex">
<Mail size={24} color="#9ca3af" />
<TextInput
className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full"
placeholder="mario.rossi@esempio.com"
placeholderTextColor="#9ca3af"
value={email}
onChangeText={setEmail}
autoCapitalize="none"
keyboardType="email-address"
/>
</View>
</View>
{/* Input Password */}
<View>
<Text className="text-gray-700 text-lg font-bold mb-3 ml-1">Password</Text>
<View className="flex-row items-center bg-gray-50 border border-gray-100 rounded-2xl h-16 px-4 flex">
<Lock size={24} color="#9ca3af" />
<TextInput
className="flex-1 ml-4 text-gray-800 text-lg font-medium h-full w-full"
placeholder="••••••••"
placeholderTextColor="#9ca3af"
value={password}
onChangeText={setPassword}
secureTextEntry={!showPassword}
/>
<TouchableOpacity onPress={() => setShowPassword(!showPassword)}>
{showPassword ? (
<EyeOff size={24} color="#6b7280" />
) : (
<Eye size={24} color="#6b7280" />
)}
</TouchableOpacity>
</View>
<TouchableOpacity className="mt-3 self-end" style={{ alignSelf: 'flex-end' }}>
<Text className="text-[#099499] font-bold text-base">Password dimenticata?</Text>
</TouchableOpacity>
</View>
{/* Tasto Login */}
<TouchableOpacity
onPress={handleLogin}
activeOpacity={0.8}
className={`bg-[#099499] h-16 rounded-2xl flex-row justify-center items-center shadow-md mt-4 flex ${isLoading ? 'opacity-70' : ''}`}
disabled={isLoading}
>
<Text className="text-white text-xl font-bold mr-2">
{isLoading ? 'Accesso in corso...' : 'Accedi'}
</Text>
{!isLoading && <LogIn size={24} color="white" />}
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
</View>
</View>
);
}