diff --git a/app/index.tsx b/app/index.tsx index 42ef62b..778af5b 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -1,9 +1,10 @@ +import { MaterialIcons } from '@expo/vector-icons'; import axios from 'axios'; import { useRouter } from 'expo-router'; import * as SecureStore from 'expo-secure-store'; import { StatusBar } from 'expo-status-bar'; -import React, { useState } from "react"; -import { ActivityIndicator, Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native"; +import React, { useEffect, useState } from "react"; +import { ActivityIndicator, Alert, Platform, StyleSheet, Text, TextInput, ToastAndroid, TouchableOpacity, View } from "react-native"; const PRIMARY = '#A24BFA'; const BG = '#0c0a0a'; @@ -12,18 +13,36 @@ export default function Index() { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); + const [autoLogin, setAutoLogin] = useState(false); const router = useRouter(); - async function handleLogin() { + useEffect(() => { + (async () => { + const savedEmail = await SecureStore.getItemAsync('email'); + const savedPassword = await SecureStore.getItemAsync('password'); + if (savedEmail && savedPassword) { + setUsername(savedEmail); + setPassword(savedPassword); + setAutoLogin(true); + setTimeout(() => { + handleLogin(savedEmail, savedPassword, true); + }, 1000); + } + })(); + }, []); + + async function handleLogin(emailOverride?: string, passwordOverride?: string, isAuto?: boolean) { setLoading(true); - console.log('Login attempt:', username); + const user = emailOverride ?? username; + const pass = passwordOverride ?? password; + console.log('Login attempt:', user); try { const response = await axios.post( "https://mymenu.mcdonalds.hu/api/AccountApi/Login", { Data: { - UserName: username, - Password: password + UserName: user, + Password: pass } }, { @@ -41,16 +60,25 @@ export default function Index() { const fullName = response.data.Data.FullName; await SecureStore.setItemAsync('cookie', cookie || ''); await SecureStore.setItemAsync('userId', String(userId)); - await SecureStore.setItemAsync('email', username); - await SecureStore.setItemAsync('password', password); + await SecureStore.setItemAsync('email', user); + await SecureStore.setItemAsync('password', pass); await SecureStore.setItemAsync('fullName', fullName || ''); - console.log('Saved to SecureStore:', { cookie, userId, username, password, fullName }); + console.log('Saved to SecureStore:', { cookie, userId, user, pass, fullName }); + if (isAuto) { + if (Platform.OS === 'android') { + ToastAndroid.show('Sikeres automatikus bejelentkezés', ToastAndroid.SHORT); + } else { + // iOS: custom toast helyett Alert + Alert.alert('Sikeres automatikus bejelentkezés'); + } + } router.replace('/profile'); } catch (e) { console.log('Login error:', e); Alert.alert('Hiba', 'Hibás felhasználónév vagy jelszó, vagy hálózati hiba.'); } finally { setLoading(false); + setAutoLogin(false); } } @@ -62,26 +90,32 @@ export default function Index() { Jelentkezz be a mymenu fiókodba Felhasználónév - + + + + Jelszó - + + + + - + handleLogin()} disabled={loading}> {loading ? ( ) : ( @@ -89,6 +123,12 @@ export default function Index() { )} + {(loading || autoLogin) && ( + + + {autoLogin ? 'Bejelentkezés...' : 'Betöltés...'} + + )} ); } @@ -127,22 +167,31 @@ const styles = StyleSheet.create({ color: '#bdbdbd', fontSize: 16, textAlign: 'center', - marginBottom: 8, + marginBottom: 24, }, label: { color: '#bdbdbd', fontSize: 14, - marginBottom: 4, + marginBottom: 8, }, - input: { + inputRow: { + flexDirection: 'row', + alignItems: 'center', backgroundColor: 'rgba(20,18,24,1)', borderColor: PRIMARY, borderWidth: 1, borderRadius: 12, + marginBottom: 16, + paddingHorizontal: 8, + }, + input: { + flex: 1, + backgroundColor: 'transparent', color: '#fff', - paddingHorizontal: 16, + paddingHorizontal: 8, paddingVertical: 12, fontSize: 16, + borderWidth: 0, }, button: { backgroundColor: PRIMARY, @@ -161,4 +210,21 @@ const styles = StyleSheet.create({ fontWeight: 'bold', fontSize: 18, }, + loadingOverlay: { + position: 'absolute', + left: 0, + top: 0, + right: 0, + bottom: 0, + backgroundColor: 'rgba(12,10,10,0.85)', + justifyContent: 'center', + alignItems: 'center', + zIndex: 10, + }, + loadingText: { + color: PRIMARY, + fontSize: 18, + marginTop: 16, + fontWeight: 'bold', + }, }); \ No newline at end of file diff --git a/app/profile.tsx b/app/profile.tsx index ef504b0..06a74b1 100644 --- a/app/profile.tsx +++ b/app/profile.tsx @@ -1,14 +1,23 @@ +import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons'; +import { useRouter } from 'expo-router'; import * as SecureStore from 'expo-secure-store'; import React, { useEffect, useState } from "react"; -import { StyleSheet, Text, View } from "react-native"; +import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; const PRIMARY = '#A24BFA'; const BG = '#0c0a0a'; +const NAV_ITEMS = [ + { key: 'profile', label: 'Profilom', icon: (color: string) => }, + { key: 'schedule', label: 'Beosztás', icon: (color: string) => }, + { key: 'requests', label: 'Kérelmek', icon: (color: string) => }, +]; export default function Profile() { const [fullName, setFullName] = useState(''); const [email, setEmail] = useState(''); const [userId, setUserId] = useState(''); + const [activeTab, setActiveTab] = useState('profile'); + const router = useRouter(); useEffect(() => { (async () => { @@ -21,16 +30,60 @@ export default function Profile() { })(); }, []); + async function handleLogout() { + await SecureStore.deleteItemAsync('cookie'); + await SecureStore.deleteItemAsync('userId'); + await SecureStore.deleteItemAsync('email'); + await SecureStore.deleteItemAsync('password'); + await SecureStore.deleteItemAsync('fullName'); + router.replace('/'); + } + + function renderContent() { + if (activeTab === 'profile') { + return ( + + Név: + {fullName} + Email: + {email} + UserID: + {userId} + + Kijelentkezés + + + ); + } else if (activeTab === 'schedule') { + return ( + + Beosztás funkció hamarosan… + + ); + } else if (activeTab === 'requests') { + return ( + + Kérelmek funkció hamarosan… + + ); + } + } + return ( Profil - - Név: - {fullName} - Email: - {email} - UserID: - {userId} + {renderContent()} + + {NAV_ITEMS.map(item => ( + setActiveTab(item.key)} + > + {item.icon(activeTab === item.key ? PRIMARY : '#bdbdbd')} + {item.label} + + ))} ); @@ -42,6 +95,7 @@ const styles = StyleSheet.create({ backgroundColor: BG, justifyContent: 'center', alignItems: 'center', + paddingBottom: 64, }, title: { color: '#fff', @@ -49,6 +103,7 @@ const styles = StyleSheet.create({ fontSize: 28, textAlign: 'center', marginBottom: 24, + marginTop: 32, }, card: { backgroundColor: 'rgba(24, 20, 28, 0.95)', @@ -61,6 +116,7 @@ const styles = StyleSheet.create({ shadowRadius: 24, shadowOffset: { width: 0, height: 8 }, elevation: 8, + marginBottom: 32, }, label: { color: '#bdbdbd', @@ -73,4 +129,46 @@ const styles = StyleSheet.create({ fontSize: 18, marginBottom: 8, }, + navBar: { + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + backgroundColor: 'rgba(24, 20, 28, 0.98)', + borderTopWidth: 1, + borderTopColor: '#222', + position: 'absolute', + bottom: 0, + left: 0, + right: 0, + height: 64, + paddingHorizontal: 16, + }, + navItem: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + navLabel: { + fontSize: 13, + marginTop: 2, + fontWeight: 'bold', + }, + logoutButton: { + backgroundColor: PRIMARY, + borderRadius: 12, + paddingVertical: 16, + alignItems: 'center', + marginTop: 32, + shadowColor: PRIMARY, + shadowOpacity: 0.3, + shadowRadius: 8, + shadowOffset: { width: 0, height: 2 }, + elevation: 2, + }, + logoutText: { + color: '#fff', + fontWeight: 'bold', + fontSize: 18, + letterSpacing: 1, + }, });