made navigation and auth

app/(auth)/(tabs)/_layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs } from 'expo-router';
-import { View, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 const HomeIcon = ({ color }: { color: string }) => (
@@ -50,6 +50,7 @@ export default function TabLayout() {
     return (
         <Tabs
             screenOptions={{
+                headerShown:false,
                 tabBarLabelStyle: {
                     fontSize: 16,
                     marginBottom: Platform.OS === 'ios' ? 0 : 25

app/(auth)/(tabs)/account.tsx

@@ -1,16 +1,9 @@
-import { Button, StyleSheet } from 'react-native';
-
+import { Button } from 'react-native';
 import { View, Text } from 'react-native';
 import { useAuth } from '../../../context/AuthProvider';
-import { useEffect } from 'react';
 
-export default function Account() {
+export default function AccountScreen() {
     const { user, logout } = useAuth();
-
-    // useEffect(() => {
-    //     console.log('two', user);
-    // }, []);
-
     if (!user) return <Text>Loading...</Text>;
 
     return (
@@ -23,7 +16,7 @@ export default function Account() {
                 paddingHorizontal: 4
             }}
         >
-            <Text>Account</Text>
+            <Text className="mb-8">Account PAGE</Text>
             <Text>{user?.username || 'No username'}</Text>
             <Button title="Log out" onPress={logout} />
         </View>

app/(auth)/(tabs)/charging.tsx

@@ -1,13 +1,17 @@
-import { Button, StyleSheet } from 'react-native';
-
 import { View, Text } from 'react-native';
-import { useAuth } from '../../../context/AuthProvider';
-import { useEffect } from 'react';
 
-export default function Charging() {
+export default function ChargingScreen() {
     return (
-        <View className="flex-1">
-            <Text>Charging</Text>
+        <View
+            style={{
+                flex: 1,
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                paddingHorizontal: 4
+            }}
+        >
+            <Text>充電PAGE</Text>
         </View>
     );
 }

app/(auth)/(tabs)/index.tsx

@@ -1,8 +1,6 @@
-import { StyleSheet } from 'react-native';
-
 import { View, Text } from 'react-native';
 
-export default function TabOneScreen() {
+export default function HomeScreen() {
     return (
         <View
             style={{
@@ -13,7 +11,8 @@ export default function TabOneScreen() {
                 paddingHorizontal: 4
             }}
         >
-            <Text>You are logged in</Text>
+            <Text>You've logged in to: </Text>
+            <Text>Home Page</Text>
         </View>
     );
 }

app/(auth)/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Text, View } from 'react-native';
 
 export default function Page() {

app/(public)/login.tsx

@@ -1,204 +1,10 @@
-// import React, { useState } from 'react';
-
-// import {
-//     Text,
-//     Alert,
-//     SafeAreaView,
-//     TouchableOpacity,
-//     View,
-//     TextInput
-// } from 'react-native';
-// import { useAuth } from '../../context/AuthProvider';
-
-// export default function login() {
-//     const [username, setUsername] = useState('');
-//     const [password, setPassword] = useState('');
-
-//     const { login } = useAuth();
-
-//     const _login = (username: string, password: string) => {
-//         if (username === '' || password === '')
-//             Alert.alert('Error', 'Please enter a username and password');
-//         else login(username, password);
-//     };
-
-//     return (
-//         <SafeAreaView style={{ flex: 1, flexDirection: 'column' }}>
-//             <View
-//                 style={{
-//                     flex: 1,
-//                     flexDirection: 'column',
-//                     justifyContent: 'center',
-//                     paddingHorizontal: 4
-//                 }}
-//             >
-//                 <Text style={{ fontSize: 20, marginBottom: 2 }}>Log in</Text>
-//                 <Text style={{ marginBottom: 2, opacity: 70 }}>
-//                     Any username and password is a valid login.
-//                 </Text>
-//                 <View>
-//                     <Text style={{ fontSize: 20, marginBottom: 2 }}>
-//                         Username
-//                     </Text>
-//                     <TextInput
-//                         placeholder="username"
-//                         style={{
-//                             borderWidth: 1,
-//                             borderColor: 'gray',
-//                             padding: 3
-//                         }}
-//                         value={username}
-//                         onChangeText={setUsername}
-//                     />
-//                 </View>
-//                 <View>
-//                     <Text style={{ fontSize: 20, marginBottom: 2 }}>
-//                         Password
-//                     </Text>
-//                     <TextInput
-//                         placeholder="password"
-//                         style={{
-//                             borderWidth: 1,
-//                             borderColor: 'gray',
-//                             padding: 3
-//                         }}
-//                         value={password}
-//                         onChangeText={setPassword}
-//                     />
-//                 </View>
-//                 <Button
-//                     style={{ marginTop: 20 }}
-//                     title="Log in"
-//                     onPress={() => _login(username, password)}
-//                 />
-//             </View>
-//         </SafeAreaView>
-//     );
-// }
-
-// const Button = ({
-//     title,
-//     onPress,
-//     style
-// }: {
-//     title: string;
-//     onPress: () => void;
-//     style?: any;
-// }) => {
-//     return (
-//         <TouchableOpacity onPress={onPress} style={[style]}>
-//             <Text>{title}</Text>
-//         </TouchableOpacity>
-//     );
-// };
-
-// --------------------------------
-
-import React, { useState } from 'react';
-import {
-    Text,
-    Alert,
-    SafeAreaView,
-    TouchableOpacity,
-    View,
-    TextInput
-} from 'react-native';
-import { useAuth } from '../../context/AuthProvider';
-
-import LoginForm from '../../component/registrationMultiStepForm/formComponent/formPages/loginPage';
+import { View } from 'react-native';
 import MultiStepForm from '../../component/registrationMultiStepForm/multi_step_form';
+
 export default function LoginPage() {
-    const { login } = useAuth();
     return (
         <View className="flex-1">
             <MultiStepForm />
         </View>
     );
 }
-
-// export default function LoginPage() {
-//     const [username, setUsername] = useState('');
-//     const [password, setPassword] = useState('');
-    // const { login } = useAuth();
-
-    // const _login = async (username: string, password: string) => {
-    //     if (username === '' || password === '') {
-    //         Alert.alert('Error', 'Please enter a username and password');
-    //     } else {
-    //         const success = await login(username, password);
-    //         if (!success) {
-    //             Alert.alert('Error', 'Invalid username or password');
-    //         }
-    //     }
-    // };
-
-//     return (
-//         <SafeAreaView style={{ flex: 1, flexDirection: 'column' }}>
-//             <View
-//                 style={{
-//                     flex: 1,
-//                     flexDirection: 'column',
-//                     justifyContent: 'center',
-//                     paddingHorizontal: 4
-//                 }}
-//             >
-//                 <Text style={{ fontSize: 20, marginBottom: 2 }}>Log in</Text>
-//                 <Text style={{ marginBottom: 2, opacity: 70 }}>
-//                     Any username and password is a valid login.
-//                 </Text>
-//                 <View>
-//                     <Text style={{ fontSize: 20, marginBottom: 2 }}>
-//                         Username
-//                     </Text>
-//                     <TextInput
-//                         placeholder="username"
-//                         style={{
-//                             borderWidth: 1,
-//                             borderColor: 'gray',
-//                             padding: 3
-//                         }}
-//                         value={username}
-//                         onChangeText={setUsername}
-//                     />
-//                 </View>
-//                 <View>
-//                     <Text style={{ fontSize: 20, marginBottom: 2 }}>
-//                         Password
-//                     </Text>
-//                     <TextInput
-//                         placeholder="password"
-//                         secureTextEntry
-//                         style={{
-//                             borderWidth: 1,
-//                             borderColor: 'gray',
-//                             padding: 3
-//                         }}
-//                         value={password}
-//                         onChangeText={setPassword}
-//                     />
-//                 </View>
-//                 <Button
-//                     style={{ marginTop: 20 }}
-//                     title="Log in"
-//                     onPress={() => _login(username, password)}
-//                 />
-//             </View>
-//         </SafeAreaView>
-//     );
-// }
-
-// const Button = ({
-//     title,
-//     onPress,
-//     style
-// }: {
-//     title: string;
-//     onPress: () => void;
-//     style?: any;
-// }) => {
-//     return (
-//         <TouchableOpacity onPress={onPress} style={[style]}>
-//             <Text>{title}</Text>
-//         </TouchableOpacity>
-//     );
-// };

app/_layout.tsx

@@ -1,14 +1,6 @@
-// import { Stack } from "expo-router/stack";
-
-// export default function AppLayout() {
-//   return (
-//     <Stack>
-//       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-//     </Stack>
-//   );
-// }
 import { Stack } from 'expo-router/stack';
 import AuthProvider from '../context/AuthProvider';
+import { StatusBar } from 'expo-status-bar';
 
 export default function RootLayout() {
     return (

context/AuthProvider.tsx

@@ -56,9 +56,8 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
             const username = await AsyncStorage.getItem('username');
 
             if (token) {
-                // Fetch user details from your API using the token
-                // jwt-decode or sth
-                // For now, we are just setting a dummy user
+                // Fetch user details from API by decoding the token
+                // For now, I am just setting a dummy user
                 setUser({
                     id: '1',
                     username: username || ''
@@ -84,14 +83,13 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
                 }
             );
 
-            // console.log('Response:', response.data);
             if (response.status === 201) {
                 const token = response.data.accessToken;
                 await SecureStore.setItemAsync('accessToken', token);
                 await AsyncStorage.setItem('username', username);
-                //i will use jwt_decode to decode the accesstoken,
-                //then i will set the user
-                setUser({ id: '999', username: username });
+                //-- use jwt_decode to decode the accesstoken,
+                //-- set the user according to decoded information
+                setUser({ id: '9999', username: username });
                 console.log('Login successful!');
                 return true;
             } else {