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 { 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() {
         <Text style={styles.subtitle}>Jelentkezz be a mymenu fiókodba</Text>
         <View style={{ height: 24 }} />
         <Text style={styles.label}>Felhasználónév</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="valaki@gmail.com"
-          placeholderTextColor="#aaa"
-          value={username}
-          onChangeText={setUsername}
-          autoCapitalize="none"
-        />
+        <View style={styles.inputRow}>
+          <MaterialIcons name="email" size={22} color="#bdbdbd" style={{ marginRight: 8 }} />
+          <TextInput
+            style={styles.input}
+            placeholder="valaki@gmail.com"
+            placeholderTextColor="#aaa"
+            value={username}
+            onChangeText={setUsername}
+            autoCapitalize="none"
+          />
+        </View>
         <View style={{ height: 16 }} />
         <Text style={styles.label}>Jelszó</Text>
-        <TextInput
-          style={styles.input}
-          placeholder="••••••••"
-          placeholderTextColor="#aaa"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-        />
+        <View style={styles.inputRow}>
+          <MaterialIcons name="lock" size={22} color="#bdbdbd" style={{ marginRight: 8 }} />
+          <TextInput
+            style={styles.input}
+            placeholder="••••••••"
+            placeholderTextColor="#aaa"
+            value={password}
+            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',
+  },
 });