✨ feat: 美化登录界面并集成登录模态框
- 重设计未登录状态UI，添加动画效果和渐变按钮 - 集成LoginModal组件，提供完整的登录体验 - 新增游客浏览功能，提升用户体验 - 切换至测试环境API (api-test.mixvideo.bowong.cc) - 添加@expo/vector-icons图标库依赖 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
imeepos
412
components/auth/login-modal.tsx
Normal file
412
components/auth/login-modal.tsx
Normal file
@@ -0,0 +1,412 @@
|
||||
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",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user