initial: add login
This commit is contained in:
Tran Anh Tuan
@@ -1,10 +1,10 @@
|
||||
import { Tabs } from 'expo-router';
|
||||
import React from 'react';
|
||||
import { Tabs } from "expo-router";
|
||||
import React from "react";
|
||||
|
||||
import { HapticTab } from '@/components/haptic-tab';
|
||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
||||
import { Colors } from '@/constants/theme';
|
||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
||||
import { HapticTab } from "@/components/haptic-tab";
|
||||
import { IconSymbol } from "@/components/ui/icon-symbol";
|
||||
import { Colors } from "@/constants/theme";
|
||||
import { useColorScheme } from "@/hooks/use-color-scheme";
|
||||
|
||||
export default function TabLayout() {
|
||||
const colorScheme = useColorScheme();
|
||||
@@ -12,22 +12,36 @@ export default function TabLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
|
||||
tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
|
||||
headerShown: false,
|
||||
tabBarButton: HapticTab,
|
||||
}}>
|
||||
}}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: 'Home',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
|
||||
title: "Home",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<IconSymbol size={28} name="house.fill" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="explore"
|
||||
options={{
|
||||
title: 'Explore',
|
||||
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
|
||||
title: "Explore",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<IconSymbol size={28} name="paperplane.fill" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="setting"
|
||||
options={{
|
||||
title: "Setting",
|
||||
tabBarIcon: ({ color }) => (
|
||||
<IconSymbol size={28} name="gear" color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
@@ -1,38 +1,42 @@
|
||||
import { Image } from 'expo-image';
|
||||
import { Platform, StyleSheet } from 'react-native';
|
||||
import { Image } from "expo-image";
|
||||
import { Platform, StyleSheet, TouchableOpacity } from "react-native";
|
||||
|
||||
import { HelloWave } from '@/components/hello-wave';
|
||||
import ParallaxScrollView from '@/components/parallax-scroll-view';
|
||||
import { ThemedText } from '@/components/themed-text';
|
||||
import { ThemedView } from '@/components/themed-view';
|
||||
import { Link } from 'expo-router';
|
||||
import { HelloWave } from "@/components/hello-wave";
|
||||
import ParallaxScrollView from "@/components/parallax-scroll-view";
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { Text } from "@react-navigation/elements";
|
||||
import { Link, useRouter } from "expo-router";
|
||||
|
||||
export default function HomeScreen() {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<ParallaxScrollView
|
||||
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
|
||||
headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
|
||||
headerImage={
|
||||
<Image
|
||||
source={require('@/assets/images/partial-react-logo.png')}
|
||||
source={require("@/assets/images/partial-react-logo.png")}
|
||||
style={styles.reactLogo}
|
||||
/>
|
||||
}>
|
||||
}
|
||||
>
|
||||
<ThemedView style={styles.titleContainer}>
|
||||
<ThemedText type="title">Welcome!</ThemedText>
|
||||
<ThemedText type="title">Nicce!</ThemedText>
|
||||
<HelloWave />
|
||||
</ThemedView>
|
||||
<ThemedView style={styles.stepContainer}>
|
||||
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
|
||||
<ThemedText>
|
||||
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
|
||||
Press{' '}
|
||||
Edit{" "}
|
||||
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{" "}
|
||||
to see changes. Press{" "}
|
||||
<ThemedText type="defaultSemiBold">
|
||||
{Platform.select({
|
||||
ios: 'cmd + d',
|
||||
android: 'cmd + m',
|
||||
web: 'F12',
|
||||
ios: "cmd + d",
|
||||
android: "cmd + m",
|
||||
web: "F12",
|
||||
})}
|
||||
</ThemedText>{' '}
|
||||
</ThemedText>{" "}
|
||||
to open developer tools.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
@@ -43,18 +47,22 @@ export default function HomeScreen() {
|
||||
</Link.Trigger>
|
||||
<Link.Preview />
|
||||
<Link.Menu>
|
||||
<Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} />
|
||||
<Link.MenuAction
|
||||
title="Action"
|
||||
icon="cube"
|
||||
onPress={() => alert("Action pressed")}
|
||||
/>
|
||||
<Link.MenuAction
|
||||
title="Share"
|
||||
icon="square.and.arrow.up"
|
||||
onPress={() => alert('Share pressed')}
|
||||
onPress={() => alert("Share pressed")}
|
||||
/>
|
||||
<Link.Menu title="More" icon="ellipsis">
|
||||
<Link.MenuAction
|
||||
title="Delete"
|
||||
icon="trash"
|
||||
destructive
|
||||
onPress={() => alert('Delete pressed')}
|
||||
onPress={() => alert("Delete pressed")}
|
||||
/>
|
||||
</Link.Menu>
|
||||
</Link.Menu>
|
||||
@@ -68,20 +76,29 @@ export default function HomeScreen() {
|
||||
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
|
||||
<ThemedText>
|
||||
{`When you're ready, run `}
|
||||
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
|
||||
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
|
||||
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
|
||||
<ThemedText type="defaultSemiBold">
|
||||
npm run reset-project
|
||||
</ThemedText>{" "}
|
||||
to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{" "}
|
||||
directory. This will move the current{" "}
|
||||
<ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
|
||||
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.replace("/auth/login")}
|
||||
// disabled={loading}
|
||||
>
|
||||
<Text>Đăng nhập</Text>
|
||||
</TouchableOpacity>
|
||||
</ParallaxScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
stepContainer: {
|
||||
@@ -93,6 +110,6 @@ const styles = StyleSheet.create({
|
||||
width: 290,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
position: 'absolute',
|
||||
position: "absolute",
|
||||
},
|
||||
});
|
||||
|
||||
71
app/(tabs)/setting.tsx
Normal file
71
app/(tabs)/setting.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { useRouter } from "expo-router";
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { api } from "@/config";
|
||||
import { TOKEN } from "@/constants";
|
||||
import { removeStorageItem } from "@/utils/storage";
|
||||
import { useState } from "react";
|
||||
|
||||
type Todo = {
|
||||
userId: number;
|
||||
id: number;
|
||||
title: string;
|
||||
completed: boolean;
|
||||
};
|
||||
|
||||
export default function SettingScreen() {
|
||||
const router = useRouter();
|
||||
const [data, setData] = useState<Todo | null>(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// getData();
|
||||
// }, []);
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
const response = await api.get("/todos/1");
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.container}>
|
||||
<ThemedText type="title">Settings</ThemedText>
|
||||
<ThemedView
|
||||
style={styles.button}
|
||||
onTouchEnd={() => {
|
||||
removeStorageItem(TOKEN);
|
||||
router.replace("/auth/login");
|
||||
}}
|
||||
>
|
||||
<ThemedText type="defaultSemiBold">Đăng xuất</ThemedText>
|
||||
</ThemedView>
|
||||
{data && (
|
||||
<ThemedView style={{ marginTop: 20 }}>
|
||||
<ThemedText type="default">{data.title}</ThemedText>
|
||||
<ThemedText type="default">{data.completed}</ThemedText>
|
||||
<ThemedText type="default">{data.id}</ThemedText>
|
||||
</ThemedView>
|
||||
)}
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 20,
|
||||
},
|
||||
button: {
|
||||
marginTop: 20,
|
||||
padding: 10,
|
||||
backgroundColor: "#007AFF",
|
||||
borderRadius: 5,
|
||||
},
|
||||
});
|
||||
@@ -1,24 +1,54 @@
|
||||
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
|
||||
import { Stack } from 'expo-router';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import 'react-native-reanimated';
|
||||
import {
|
||||
DarkTheme,
|
||||
DefaultTheme,
|
||||
ThemeProvider,
|
||||
} from "@react-navigation/native";
|
||||
import { Stack, useRouter } from "expo-router";
|
||||
import { StatusBar } from "expo-status-bar";
|
||||
import { useEffect } from "react";
|
||||
import "react-native-reanimated";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
||||
|
||||
export const unstable_settings = {
|
||||
anchor: '(tabs)',
|
||||
};
|
||||
import { setRouterInstance } from "@/config/auth";
|
||||
import { useColorScheme } from "@/hooks/use-color-scheme";
|
||||
|
||||
export default function RootLayout() {
|
||||
const colorScheme = useColorScheme();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
setRouterInstance(router);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
|
||||
<Stack>
|
||||
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
||||
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
|
||||
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
|
||||
<Stack
|
||||
screenOptions={{ headerShown: false }}
|
||||
initialRouteName="auth/login"
|
||||
>
|
||||
<Stack.Screen
|
||||
name="auth/login"
|
||||
options={{
|
||||
title: "Login",
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="(tabs)"
|
||||
options={{
|
||||
title: "Home",
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="modal"
|
||||
options={{ presentation: "formSheet", title: "Modal" }}
|
||||
/>
|
||||
</Stack>
|
||||
<StatusBar style="auto" />
|
||||
<Toast />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
235
app/auth/login.tsx
Normal file
235
app/auth/login.tsx
Normal file
@@ -0,0 +1,235 @@
|
||||
import { ThemedText } from "@/components/themed-text";
|
||||
import { ThemedView } from "@/components/themed-view";
|
||||
import { showToastError } from "@/config";
|
||||
import { TOKEN } from "@/constants";
|
||||
import { login } from "@/controller/AuthController";
|
||||
import {
|
||||
getStorageItem,
|
||||
removeStorageItem,
|
||||
setStorageItem,
|
||||
} from "@/utils/storage";
|
||||
import { parseJwtToken } from "@/utils/token";
|
||||
import { useRouter } from "expo-router";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export default function LoginScreen() {
|
||||
const router = useRouter();
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const checkLogin = useCallback(async () => {
|
||||
const token = await getStorageItem(TOKEN);
|
||||
if (!token) {
|
||||
return;
|
||||
}
|
||||
const parsed = parseJwtToken(token);
|
||||
console.log("Parse Token: ", parsed);
|
||||
|
||||
const { exp } = parsed;
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const oneHour = 60 * 60;
|
||||
if (exp - now < oneHour) {
|
||||
await removeStorageItem(TOKEN);
|
||||
} else {
|
||||
router.replace("/(tabs)");
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
useEffect(() => {
|
||||
checkLogin();
|
||||
}, [checkLogin]);
|
||||
|
||||
const handleLogin = async () => {
|
||||
// Validate input
|
||||
if (!username.trim() || !password.trim()) {
|
||||
showToastError("Lỗi", "Vui lòng nhập tài khoản và mật khẩu");
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const body: Model.LoginRequestBody = {
|
||||
username: username,
|
||||
password: password,
|
||||
};
|
||||
|
||||
const response = await login(body);
|
||||
|
||||
// Nếu thành công, lưu token và chuyển sang (tabs)
|
||||
console.log("Login thành công với data:", response.data);
|
||||
if (response?.data.token) {
|
||||
// Lưu token vào storage nếu cần (thêm logic này sau)
|
||||
await setStorageItem(TOKEN, response.data.token);
|
||||
console.log("Token:", response.data.token);
|
||||
router.replace("/(tabs)");
|
||||
}
|
||||
} catch (error) {
|
||||
showToastError(
|
||||
"Lỗi",
|
||||
error instanceof Error ? error.message : "Đăng nhập thất bại"
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
||||
<ThemedView style={styles.container}>
|
||||
{/* Header */}
|
||||
<View style={styles.headerContainer}>
|
||||
<ThemedText type="title" style={styles.title}>
|
||||
SGW App
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.subtitle}>
|
||||
Đăng nhập để tiếp tục
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
{/* Form */}
|
||||
<View style={styles.formContainer}>
|
||||
{/* Username Input */}
|
||||
<View style={styles.inputGroup}>
|
||||
<ThemedText style={styles.label}>Tài khoản</ThemedText>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Nhập tài khoản"
|
||||
placeholderTextColor="#999"
|
||||
value={username}
|
||||
onChangeText={setUsername}
|
||||
editable={!loading}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Password Input */}
|
||||
<View style={styles.inputGroup}>
|
||||
<ThemedText style={styles.label}>Mật khẩu</ThemedText>
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Nhập mật khẩu"
|
||||
placeholderTextColor="#999"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
editable={!loading}
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Login Button */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.loginButton,
|
||||
loading && styles.loginButtonDisabled,
|
||||
]}
|
||||
onPress={handleLogin}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#fff" size="small" />
|
||||
) : (
|
||||
<Text style={styles.loginButtonText}>Đăng nhập</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Footer text */}
|
||||
<View style={styles.footerContainer}>
|
||||
<ThemedText style={styles.footerText}>
|
||||
Chưa có tài khoản?{" "}
|
||||
<Text style={styles.linkText}>Đăng ký ngay</Text>
|
||||
</ThemedText>
|
||||
</View>
|
||||
</View>
|
||||
</ThemedView>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
scrollContainer: {
|
||||
flexGrow: 1,
|
||||
justifyContent: "center",
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 20,
|
||||
justifyContent: "center",
|
||||
},
|
||||
headerContainer: {
|
||||
marginBottom: 40,
|
||||
alignItems: "center",
|
||||
},
|
||||
title: {
|
||||
fontSize: 32,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 8,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 16,
|
||||
opacity: 0.7,
|
||||
},
|
||||
formContainer: {
|
||||
gap: 16,
|
||||
},
|
||||
inputGroup: {
|
||||
gap: 8,
|
||||
},
|
||||
label: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
},
|
||||
input: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#ddd",
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 12,
|
||||
fontSize: 16,
|
||||
backgroundColor: "#f5f5f5",
|
||||
color: "#000",
|
||||
},
|
||||
loginButton: {
|
||||
backgroundColor: "#007AFF",
|
||||
paddingVertical: 14,
|
||||
borderRadius: 8,
|
||||
alignItems: "center",
|
||||
marginTop: 16,
|
||||
},
|
||||
loginButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
loginButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
fontWeight: "600",
|
||||
},
|
||||
footerContainer: {
|
||||
marginTop: 16,
|
||||
alignItems: "center",
|
||||
},
|
||||
footerText: {
|
||||
fontSize: 14,
|
||||
},
|
||||
linkText: {
|
||||
color: "#007AFF",
|
||||
fontWeight: "600",
|
||||
},
|
||||
});
|
||||
5
app/index.tsx
Normal file
5
app/index.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Redirect } from "expo-router";
|
||||
|
||||
export default function Index() {
|
||||
return <Redirect href="/auth/login" />;
|
||||
}
|
||||
Reference in New Issue
Block a user