413 lines
11 KiB
TypeScript
413 lines
11 KiB
TypeScript
import { Feather, Ionicons } from "@expo/vector-icons";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Animated,
|
|
Dimensions,
|
|
KeyboardAvoidingView,
|
|
Modal,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
import { useAuth } from "@/hooks/use-auth";
|
|
import { authClient } from "@/lib/auth/client";
|
|
import { storage } from "@/lib/storage";
|
|
|
|
interface LoginModalProps {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function LoginModal({ visible, onClose }: LoginModalProps) {
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [isPasswordVisible, setPasswordVisible] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const { isAuthenticated } = useAuth();
|
|
const slideAnim = useRef(new Animated.Value(Dimensions.get("window").height)).current;
|
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
Animated.parallel([
|
|
Animated.timing(slideAnim, {
|
|
toValue: 0,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 0.5,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start();
|
|
} else {
|
|
Animated.parallel([
|
|
Animated.timing(slideAnim, {
|
|
toValue: Dimensions.get("window").height,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 0,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start();
|
|
}
|
|
}, [visible]);
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated && visible) {
|
|
onClose();
|
|
setEmail("");
|
|
setPassword("");
|
|
}
|
|
}, [isAuthenticated, visible, onClose]);
|
|
|
|
const handleClose = () => {
|
|
Animated.parallel([
|
|
Animated.timing(slideAnim, {
|
|
toValue: Dimensions.get("window").height,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 0,
|
|
duration: 300,
|
|
useNativeDriver: true,
|
|
}),
|
|
]).start(() => onClose());
|
|
};
|
|
|
|
const handleLogin = async () => {
|
|
if (!email.trim() || !password.trim()) {
|
|
Alert.alert("错误", "请输入邮箱和密码");
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
try {
|
|
await new Promise<void>(async (resolve, reject) => {
|
|
await authClient.signIn.username(
|
|
{
|
|
username: email.trim(),
|
|
password,
|
|
},
|
|
{
|
|
onSuccess: async (ctx) => {
|
|
const authToken = ctx.response.headers.get("set-auth-token");
|
|
if (authToken) {
|
|
await storage.setItem(
|
|
`bestaibest.better-auth.session_token`,
|
|
authToken
|
|
);
|
|
resolve();
|
|
} else {
|
|
console.error("Bearer token not set");
|
|
reject();
|
|
}
|
|
},
|
|
}
|
|
);
|
|
});
|
|
Alert.alert("成功", "登录成功！");
|
|
} catch (error: any) {
|
|
Alert.alert("登录失败", error?.message || "邮箱或密码错误");
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleBackdropPress = () => {
|
|
handleClose();
|
|
};
|
|
|
|
return (
|
|
<Modal visible={visible} transparent animationType="none">
|
|
<Animated.View
|
|
style={[
|
|
styles.overlay,
|
|
{
|
|
opacity: fadeAnim,
|
|
},
|
|
]}
|
|
>
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
style={styles.backdrop}
|
|
onPress={handleBackdropPress}
|
|
>
|
|
<LinearGradient
|
|
colors={["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"]}
|
|
style={StyleSheet.absoluteFillObject}
|
|
/>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
|
|
<Animated.View
|
|
style={[
|
|
styles.modalContainer,
|
|
{
|
|
transform: [{ translateY: slideAnim }],
|
|
},
|
|
]}
|
|
>
|
|
<TouchableOpacity activeOpacity={1} style={styles.modalContent}>
|
|
<View style={styles.sheetIndicator} />
|
|
|
|
<SafeAreaView style={styles.safeArea}>
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
|
style={styles.flex}
|
|
>
|
|
<View style={styles.content}>
|
|
<View style={styles.header}>
|
|
<View style={styles.titleGroup}>
|
|
<View style={styles.iconBadge}>
|
|
<Ionicons name="mail-open" size={16} color="#ffffff" />
|
|
</View>
|
|
<Text style={styles.title}>Email Login</Text>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={handleClose}
|
|
style={styles.closeButton}
|
|
>
|
|
<Feather name="x" size={20} color="#f2f4f8" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.form}>
|
|
<View style={styles.inputWrapper}>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="yours@example.com"
|
|
placeholderTextColor="#70737c"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
autoCapitalize="none"
|
|
autoCorrect={false}
|
|
keyboardType="email-address"
|
|
editable={!isLoading}
|
|
keyboardAppearance="dark"
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.inputWrapper}>
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="email password"
|
|
placeholderTextColor="#70737c"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
secureTextEntry={!isPasswordVisible}
|
|
autoCorrect={false}
|
|
editable={!isLoading}
|
|
keyboardAppearance="dark"
|
|
/>
|
|
<TouchableOpacity
|
|
activeOpacity={0.7}
|
|
onPress={() => setPasswordVisible((visible) => !visible)}
|
|
style={styles.visibilityToggle}
|
|
>
|
|
<Feather
|
|
name={isPasswordVisible ? "eye-off" : "eye"}
|
|
size={18}
|
|
color="#8a8e97"
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.loginButton, isLoading && styles.loginButtonDisabled]}
|
|
onPress={handleLogin}
|
|
disabled={isLoading}
|
|
activeOpacity={0.85}
|
|
>
|
|
{isLoading ? (
|
|
<ActivityIndicator color="#0f100f" />
|
|
) : (
|
|
<Text style={styles.loginButtonText}>Log in</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
<View style={styles.termsRow}>
|
|
<Ionicons name="checkmark-circle" size={16} color="#d7ff1f" />
|
|
<Text style={styles.termsText}>
|
|
已阅读并同意
|
|
<Text style={styles.linkText}> 用户协议 </Text>
|
|
和
|
|
<Text style={styles.linkText}> 隐私政策</Text>
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
backdrop: {
|
|
flex: 1,
|
|
},
|
|
modalContainer: {
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
modalContent: {
|
|
backgroundColor: "#14161c",
|
|
borderTopLeftRadius: 28,
|
|
borderTopRightRadius: 28,
|
|
borderWidth: 1,
|
|
borderColor: "rgba(255, 255, 255, 0.08)",
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: -8 },
|
|
shadowRadius: 18,
|
|
shadowOpacity: 0.25,
|
|
elevation: 24,
|
|
maxHeight: Dimensions.get("window").height * 0.75,
|
|
},
|
|
sheetIndicator: {
|
|
width: 40,
|
|
height: 4,
|
|
backgroundColor: "rgba(255, 255, 255, 0.3)",
|
|
borderRadius: 2,
|
|
alignSelf: "center",
|
|
marginTop: 12,
|
|
marginBottom: 8,
|
|
},
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
flex: {
|
|
flex: 1,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingHorizontal: 24,
|
|
paddingBottom: 34,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
marginTop: 16,
|
|
marginBottom: 28,
|
|
},
|
|
titleGroup: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
},
|
|
iconBadge: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 16,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "#f6474d",
|
|
marginRight: 12,
|
|
},
|
|
title: {
|
|
color: "#f5f6f8",
|
|
fontSize: 22,
|
|
fontWeight: "700",
|
|
letterSpacing: 0.2,
|
|
},
|
|
closeButton: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 20,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "rgba(255, 255, 255, 0.05)",
|
|
borderWidth: 1,
|
|
borderColor: "rgba(255, 255, 255, 0.06)",
|
|
},
|
|
form: {
|
|
marginTop: 4,
|
|
},
|
|
inputWrapper: {
|
|
position: "relative",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 18,
|
|
backgroundColor: "#1a1d23",
|
|
borderRadius: 18,
|
|
borderWidth: 1,
|
|
borderColor: "rgba(255, 255, 255, 0.05)",
|
|
marginBottom: 18,
|
|
},
|
|
input: {
|
|
flex: 1,
|
|
paddingVertical: 16,
|
|
fontSize: 16,
|
|
color: "#f5f6f8",
|
|
letterSpacing: 0.3,
|
|
},
|
|
visibilityToggle: {
|
|
marginLeft: 12,
|
|
},
|
|
loginButton: {
|
|
height: 56,
|
|
borderRadius: 18,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "#d7ff1f",
|
|
shadowColor: "#d7ff1f",
|
|
shadowOpacity: 0.35,
|
|
shadowRadius: 16,
|
|
shadowOffset: { width: 0, height: 10 },
|
|
elevation: 10,
|
|
marginTop: 4,
|
|
},
|
|
loginButtonDisabled: {
|
|
opacity: 0.7,
|
|
},
|
|
loginButtonText: {
|
|
color: "#10120d",
|
|
fontSize: 17,
|
|
fontWeight: "700",
|
|
letterSpacing: 0.5,
|
|
},
|
|
termsRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginTop: 18,
|
|
},
|
|
termsText: {
|
|
color: "#a7abb5",
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
marginLeft: 8,
|
|
},
|
|
linkText: {
|
|
color: "#f5f6f8",
|
|
fontWeight: "600",
|
|
},
|
|
});
|