90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import React, { useEffect } from 'react'
|
|
import { View, StyleSheet, StatusBar as RNStatusBar } from 'react-native'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useRouter } from 'expo-router'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
|
|
import { AuthForm } from '@/components/blocks/AuthForm'
|
|
import { useSession } from '@/lib/auth'
|
|
|
|
export default function Auth() {
|
|
const router = useRouter()
|
|
const { data: session, isPending } = useSession()
|
|
|
|
useEffect(() => {
|
|
// 如果用户已登录，跳转到首页
|
|
if (session?.user) {
|
|
router.replace('/(tabs)' as any)
|
|
}
|
|
}, [session, router])
|
|
|
|
// 会话加载中显示空白
|
|
if (isPending) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<StatusBar style="light" />
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// 如果已登录，不显示内容（等待跳转）
|
|
if (session?.user) {
|
|
return null
|
|
}
|
|
|
|
const handleSuccess = () => {
|
|
router.replace('/(tabs)' as any)
|
|
}
|
|
|
|
return (
|
|
<LinearGradient
|
|
colors={['#1a1a2e', '#16213e', '#0f3460']}
|
|
locations={[0, 0.5, 1]}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.background}
|
|
>
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<StatusBar style="light" />
|
|
<RNStatusBar barStyle="light-content" />
|
|
|
|
<KeyboardAwareScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
bottomOffset={50}
|
|
>
|
|
<View style={styles.content}>
|
|
<AuthForm onSuccess={handleSuccess} />
|
|
</View>
|
|
</KeyboardAwareScrollView>
|
|
</SafeAreaView>
|
|
</LinearGradient>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
background: {
|
|
flex: 1,
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
flexGrow: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
},
|
|
content: {
|
|
width: '100%',
|
|
alignItems: 'center',
|
|
},
|
|
})
|