Enhance login and profile screens with auto-login feature, improved UI, and logout functionality

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 React, { useEffect, useState } from "react";
-import { ActivityIndicator, Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+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,
+            UserName: user,
-            Password: password
+            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('email', user);
-      await SecureStore.setItemAsync('password', password);
+      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,6 +90,8 @@ export default function Index() {
         <Text style={styles.subtitle}>Jelentkezz be a mymenu fiókodba</Text>
         <View style={{ height: 24 }} />
         <Text style={styles.label}>Felhasználónév</Text>
+        <View style={styles.inputRow}>
+          <MaterialIcons name="email" size={22} color="#bdbdbd" style={{ marginRight: 8 }} />
           <TextInput
             style={styles.input}
             placeholder="valaki@gmail.com"
@@ -70,8 +100,11 @@ export default function Index() {
             onChangeText={setUsername}
             autoCapitalize="none"
           />
+        </View>
         <View style={{ height: 16 }} />
         <Text style={styles.label}>Jelszó</Text>
+        <View style={styles.inputRow}>
+          <MaterialIcons name="lock" size={22} color="#bdbdbd" style={{ marginRight: 8 }} />
           <TextInput
             style={styles.input}
             placeholder="••••••••"
@@ -80,8 +113,9 @@ export default function Index() {
             onChangeText={setPassword}
             secureTextEntry
           />
+        </View>
         <View style={{ height: 24 }} />
-        <TouchableOpacity style={styles.button} onPress={handleLogin} disabled={loading}>
+        <TouchableOpacity style={styles.button} onPress={() => handleLogin()} disabled={loading}>
           {loading ? (
             <ActivityIndicator color="#fff" />
           ) : (
@@ -89,6 +123,12 @@ export default function Index() {
           )}
         </TouchableOpacity>
       </View>
+      {(loading || autoLogin) && (
+        <View style={styles.loadingOverlay}>
+          <ActivityIndicator size="large" color={PRIMARY} />
+          <Text style={styles.loadingText}>{autoLogin ? 'Bejelentkezés...' : 'Betöltés...'}</Text>
+        </View>
+      )}
     </View>
   );
 }
@@ -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',
+  },
 });

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) => <MaterialIcons name="person" size={28} color={color} /> },
+  { key: 'schedule', label: 'Beosztás', icon: (color: string) => <MaterialCommunityIcons name="calendar-month" size={28} color={color} /> },
+  { key: 'requests', label: 'Kérelmek', icon: (color: string) => <Ionicons name="mail" size={28} color={color} /> },
+];
 
 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,9 +30,18 @@ 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 (
-    <View style={styles.container}>
-      <Text style={styles.title}>Profil</Text>
         <View style={styles.card}>
           <Text style={styles.label}>Név:</Text>
           <Text style={styles.value}>{fullName}</Text>
@@ -31,6 +49,41 @@ export default function Profile() {
           <Text style={styles.value}>{email}</Text>
           <Text style={styles.label}>UserID:</Text>
           <Text style={styles.value}>{userId}</Text>
+          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+            <Text style={styles.logoutText}>Kijelentkezés</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    } else if (activeTab === 'schedule') {
+      return (
+        <View style={styles.card}>
+          <Text style={styles.value}>Beosztás funkció hamarosan…</Text>
+        </View>
+      );
+    } else if (activeTab === 'requests') {
+      return (
+        <View style={styles.card}>
+          <Text style={styles.value}>Kérelmek funkció hamarosan…</Text>
+        </View>
+      );
+    }
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Profil</Text>
+      {renderContent()}
+      <View style={styles.navBar}>
+        {NAV_ITEMS.map(item => (
+          <TouchableOpacity
+            key={item.key}
+            style={styles.navItem}
+            onPress={() => setActiveTab(item.key)}
+          >
+            {item.icon(activeTab === item.key ? PRIMARY : '#bdbdbd')}
+            <Text style={[styles.navLabel, { color: activeTab === item.key ? PRIMARY : '#bdbdbd' }]}>{item.label}</Text>
+          </TouchableOpacity>
+        ))}
       </View>
     </View>
   );
@@ -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,
+  },
 });