Add profile and login screen + first api logic draft
This commit is contained in:
84
app/(protected)/_layout.tsx
Normal file
84
app/(protected)/_layout.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
7
app/(protected)/profile/_layout.tsx
Normal file
7
app/(protected)/profile/_layout.tsx
Normal 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
132
app/(protected)/profile/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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
111
app/login.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
BIN
assets/images/mariani-logo.png
Normal file
BIN
assets/images/mariani-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@ -1,8 +1,11 @@
|
||||
import { UserData, AttendanceRecord, DocumentItem, OfficeItem, PermitRecord } from '../types/types';
|
||||
import { UserData, AttendanceRecord, DocumentItem, OfficeItem, PermitRecord } from '@/types/types';
|
||||
|
||||
// --- MOCK DATA (File: data.ts) ---
|
||||
export const MOCK_USER: UserData = {
|
||||
name: "Mario Rossi",
|
||||
name: "Mario",
|
||||
surname: "Rossi",
|
||||
username: "mario.rossi",
|
||||
email: "mario.rossi@esempio.com",
|
||||
role: "Tecnico Specializzato",
|
||||
id: "EMP-8842"
|
||||
};
|
||||
|
||||
1205
package-lock.json
generated
1205
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,9 +12,11 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^15.0.3",
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
||||
"@react-navigation/elements": "^2.6.3",
|
||||
"@react-navigation/native": "^7.1.8",
|
||||
"axios": "^1.13.2",
|
||||
"expo": "~54.0.25",
|
||||
"expo-constants": "~18.0.10",
|
||||
"expo-font": "~14.0.9",
|
||||
@ -22,6 +24,7 @@
|
||||
"expo-image": "~3.0.10",
|
||||
"expo-linking": "~8.0.9",
|
||||
"expo-router": "~6.0.15",
|
||||
"expo-secure-store": "~15.0.8",
|
||||
"expo-splash-screen": "~31.0.11",
|
||||
"expo-status-bar": "~3.0.8",
|
||||
"expo-symbols": "~1.0.7",
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
// --- TYPES & export INTERFACES (File: types.ts) ---
|
||||
// In un progetto reale, metti queste interfacce in un file separato 'types.ts'
|
||||
|
||||
export interface UserData {
|
||||
name: string;
|
||||
role: string;
|
||||
surname: string;
|
||||
username: string;
|
||||
role?: string;
|
||||
email?: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
|
||||
43
utils/api.ts
Normal file
43
utils/api.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import axios from 'axios';
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
|
||||
// CONFIGURAZIONE GATEWAY (Adatta questi valori al tuo DDEV)
|
||||
// Se sei su emulatore Android usa 10.0.2.2, se su iOS o fisico usa il tuo IP LAN (es 192.168.1.x)
|
||||
const GATEWAY_BASE_URL = "http://10.0.2.2:PORTA";
|
||||
export const GATEWAY_ENDPOINT = `${GATEWAY_BASE_URL}/tuo_endpoint_gateway`;
|
||||
export const GATEWAY_TOKEN = "il_tuo_token_statico_se_esiste";
|
||||
|
||||
const api = axios.create({
|
||||
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
});
|
||||
|
||||
// INTERCEPTOR: Configura ogni chiamata al volo
|
||||
api.interceptors.request.use(async (config) => {
|
||||
try {
|
||||
// 1. Cerchiamo se abbiamo già salvato l'URL finale del backend (post-gateway)
|
||||
const savedBaseUrl = await SecureStore.getItemAsync('App_URL');
|
||||
|
||||
if (savedBaseUrl) {
|
||||
config.baseURL = savedBaseUrl;
|
||||
} else {
|
||||
// Se non c'è, usiamo il gateway come fallback o gestiamo l'errore
|
||||
// (La logica di init nell'AuthContext dovrebbe averlo già settato)
|
||||
config.baseURL = GATEWAY_BASE_URL;
|
||||
}
|
||||
|
||||
// 2. Cerchiamo il token utente
|
||||
const token = await SecureStore.getItemAsync('auth-token');
|
||||
if (token) {
|
||||
// Adatta l'header in base al tuo backend (Bearer, x-access-tokens, etc.)
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Errore interceptor:", error);
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
export default api;
|
||||
176
utils/authContext.tsx
Normal file
176
utils/authContext.tsx
Normal file
@ -0,0 +1,176 @@
|
||||
import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
|
||||
import { SplashScreen, useRouter, useSegments } from 'expo-router';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { UserData } from '@/types/types';
|
||||
import * as SecureStore from 'expo-secure-store';
|
||||
import api, { GATEWAY_ENDPOINT, GATEWAY_TOKEN } from './api';
|
||||
import axios from 'axios';
|
||||
|
||||
type AuthState = {
|
||||
isAuthenticated: boolean;
|
||||
isReady: boolean;
|
||||
user: UserData | null;
|
||||
logIn: (token: string, userData: UserData) => void;
|
||||
logOut: () => void;
|
||||
};
|
||||
|
||||
SplashScreen.preventAutoHideAsync();
|
||||
|
||||
const KEY_TOKEN = 'auth-token';
|
||||
const KEY_URL = 'App_URL';
|
||||
|
||||
export const AuthContext = createContext<AuthState>({
|
||||
isAuthenticated: false,
|
||||
isReady: false,
|
||||
user: null,
|
||||
logIn: () => { },
|
||||
logOut: () => { },
|
||||
});
|
||||
|
||||
export const useAuth = () => useContext(AuthContext);
|
||||
|
||||
export function AuthProvider({ children }: PropsWithChildren) {
|
||||
const [isReady, setIsReady] = useState(false);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [user, setUser] = useState<UserData | null>(null);
|
||||
const router = useRouter();
|
||||
const segments = useSegments();
|
||||
|
||||
const storeAuthState = async (newState: { isAuthenticated: boolean }) => {
|
||||
try {
|
||||
const jsonValue = JSON.stringify(newState);
|
||||
await AsyncStorage.setItem(KEY_TOKEN, jsonValue);
|
||||
} catch (error) {
|
||||
console.error('Errore nel salvataggio dello stato di autenticazione:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const logIn = async (token: string, userData: UserData) => {
|
||||
try {
|
||||
await SecureStore.setItemAsync(KEY_TOKEN, token);
|
||||
setIsAuthenticated(true);
|
||||
setUser(userData);
|
||||
storeAuthState({ isAuthenticated: true }); // TODO: can be removed later
|
||||
router.replace('/');
|
||||
} catch (error) {
|
||||
console.error('Errore durante il login:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const logOut = async () => {
|
||||
try {
|
||||
await SecureStore.deleteItemAsync(KEY_TOKEN);
|
||||
setIsAuthenticated(false);
|
||||
setUser(null);
|
||||
storeAuthState({ isAuthenticated: false });
|
||||
router.replace('/login');
|
||||
} catch (error) {
|
||||
console.error('Errore durante il logout:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const initApp = async () => {
|
||||
try {
|
||||
// 1. Gestione URL Gateway (Logica "else" del vecchio snippet)
|
||||
let currentApiUrl = await SecureStore.getItemAsync(KEY_URL);
|
||||
|
||||
if (!currentApiUrl) {
|
||||
console.log("URL non trovato, contatto Gateway...");
|
||||
try {
|
||||
// Chiamata diretta al gateway (senza interceptor api.ts)
|
||||
const gwResponse = await axios.get(GATEWAY_ENDPOINT, {
|
||||
headers: { "x-access-tokens": GATEWAY_TOKEN }
|
||||
});
|
||||
|
||||
// Supponiamo che il backend ritorni { url: "http://..." }
|
||||
// Adatta questo parsing alla risposta reale del tuo backend
|
||||
const newUrl = gwResponse.data.url + "/api/app_cantieri";
|
||||
|
||||
await SecureStore.setItemAsync(KEY_URL, newUrl);
|
||||
currentApiUrl = newUrl;
|
||||
console.log("URL acquisito:", newUrl);
|
||||
} catch (gwError) {
|
||||
console.error("Errore connessione Gateway:", gwError);
|
||||
// Qui potresti decidere di non bloccare l'app o mostrare un errore
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Controllo Token e Recupero User (Logica "if" del vecchio snippet)
|
||||
const savedToken = await SecureStore.getItemAsync(KEY_TOKEN);
|
||||
|
||||
if (savedToken && currentApiUrl) {
|
||||
// Verifichiamo il token chiamando /user
|
||||
// Qui usiamo l'istanza 'api' importata che ora userà l'URL e il token
|
||||
const userRes = await api.get("/user");
|
||||
|
||||
const result = userRes.data;
|
||||
const loadedUser: UserData = {
|
||||
name: result.nome,
|
||||
surname: result.cognome,
|
||||
username: result.username,
|
||||
email: result.email,
|
||||
role: result.role,
|
||||
id: result.id,
|
||||
};
|
||||
|
||||
setUser(loadedUser);
|
||||
setIsAuthenticated(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Errore durante l\'inizializzazione dell\'app:', error);
|
||||
// Se il token è scaduto o l'API fallisce, consideriamo l'utente non loggato
|
||||
await SecureStore.deleteItemAsync(KEY_TOKEN);
|
||||
setIsAuthenticated(false);
|
||||
setUser(null);
|
||||
} finally {
|
||||
setIsReady(true);
|
||||
await SplashScreen.hideAsync();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// TODO: can be removed later
|
||||
// const getAuthFromStorage = async () => {
|
||||
// try {
|
||||
// const jsonValue = await AsyncStorage.getItem(KEY_TOKEN);
|
||||
// if (jsonValue != null) {
|
||||
// const auth = JSON.parse(jsonValue);
|
||||
// setIsAuthenticated(auth.isAuthenticated);
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('Errore nel recupero dello stato di autenticazione:', error);
|
||||
// }
|
||||
// setIsReady(true);
|
||||
// };
|
||||
// getAuthFromStorage();
|
||||
|
||||
initApp();
|
||||
}, []);
|
||||
|
||||
// TODO: Can be removed later
|
||||
// useEffect(() => {
|
||||
// if (isReady) {
|
||||
// SplashScreen.hideAsync();
|
||||
// }
|
||||
// }, [isReady]);
|
||||
|
||||
// Protezione rotte (opzionale, ma consigliata qui o nel Layout)
|
||||
useEffect(() => {
|
||||
if (!isReady) return;
|
||||
|
||||
const inAuthGroup = segments[0] === '(protected)';
|
||||
|
||||
if (!isAuthenticated && inAuthGroup) {
|
||||
router.replace('/login');
|
||||
} else if (isAuthenticated && !inAuthGroup) {
|
||||
// router.replace('/(protected)/home'); // Decommenta se vuoi redirect automatico da login a home
|
||||
}
|
||||
}, [isReady, isAuthenticated, segments]);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isReady, isAuthenticated, user, logIn, logOut }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user