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

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,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 (
+        <View style={styles.card}>
+          <Text style={styles.label}>Név:</Text>
+          <Text style={styles.value}>{fullName}</Text>
+          <Text style={styles.label}>Email:</Text>
+          <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>
-      <View style={styles.card}>
-        <Text style={styles.label}>Név:</Text>
-        <Text style={styles.value}>{fullName}</Text>
-        <Text style={styles.label}>Email:</Text>
-        <Text style={styles.value}>{email}</Text>
-        <Text style={styles.label}>UserID:</Text>
-        <Text style={styles.value}>{userId}</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,
+  },
 });