feat: 样式调整
This commit is contained in:
parent
7b938e37a2
commit
ef70e2f83a
@ -2,6 +2,7 @@ import Handers from '@/assets/icons/svg/handers.svg';
|
||||
import LoginIP1 from '@/assets/icons/svg/loginIp1.svg';
|
||||
import LoginIP2 from '@/assets/icons/svg/loginIp2.svg';
|
||||
import ForgetPwd from '@/components/login/forgetPwd';
|
||||
import Login from '@/components/login/login';
|
||||
import PhoneLogin from '@/components/login/phoneLogin';
|
||||
import SignUp from '@/components/login/signUp';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
@ -19,7 +20,10 @@ const LoginScreen = () => {
|
||||
const [error, setError] = useState<string>('123');
|
||||
const [containerHeight, setContainerHeight] = useState(0);
|
||||
const { height: windowHeight } = useWindowDimensions();
|
||||
// 展示首次输入密码
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
// 展示二次输入密码
|
||||
const [showSecondPassword, setShowSecondPassword] = useState(false);
|
||||
const [keyboardOffset, setKeyboardOffset] = useState(0);
|
||||
const insets = useSafeAreaInsets();
|
||||
// 判断是否有白边
|
||||
@ -126,6 +130,8 @@ const LoginScreen = () => {
|
||||
{...commonProps}
|
||||
setShowPassword={setShowPassword}
|
||||
showPassword={showPassword}
|
||||
setShowSecondPassword={setShowSecondPassword}
|
||||
showSecondPassword={showSecondPassword}
|
||||
/>
|
||||
),
|
||||
forgetPwd: (
|
||||
@ -134,12 +140,12 @@ const LoginScreen = () => {
|
||||
/>
|
||||
),
|
||||
login: (
|
||||
// <Login
|
||||
// {...commonProps}
|
||||
// setShowPassword={setShowPassword}
|
||||
// showPassword={showPassword}
|
||||
// />
|
||||
<PhoneLogin {...commonProps} />
|
||||
<Login
|
||||
{...commonProps}
|
||||
setShowPassword={setShowPassword}
|
||||
showPassword={showPassword}
|
||||
/>
|
||||
// <PhoneLogin {...commonProps} />
|
||||
),
|
||||
code: (
|
||||
<PhoneLogin {...commonProps} />
|
||||
|
||||
@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
|
||||
import { router } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ActivityIndicator, TextInput, TouchableOpacity, View } from "react-native";
|
||||
import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
|
||||
import { useAuth } from "../../contexts/auth-context";
|
||||
import { fetchApi } from "../../lib/server-api-util";
|
||||
import { User } from "../../types/user";
|
||||
@ -52,6 +52,7 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
|
||||
router.replace('/user-message');
|
||||
}
|
||||
} catch (error) {
|
||||
// Handle error
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
@ -64,14 +65,15 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
|
||||
const handleSignUp = () => {
|
||||
updateUrlParam('status', 'signUp');
|
||||
};
|
||||
return <View>
|
||||
{/* 邮箱输入框 */}
|
||||
<View className="mb-5">
|
||||
<ThemedText className="text-base !text-textPrimary mb-2 ml-2">
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={[styles.inputContainer, { marginBottom: 20 }]}>
|
||||
<ThemedText style={styles.inputLabel}>
|
||||
{t('auth.login.email', { ns: 'login' })}
|
||||
</ThemedText>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground"
|
||||
style={styles.textInput}
|
||||
placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
|
||||
placeholderTextColor="#ccc"
|
||||
value={email}
|
||||
@ -79,18 +81,17 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
|
||||
setEmail(text);
|
||||
setError('123');
|
||||
}}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
</View>
|
||||
{/* 密码输入框 */}
|
||||
<View className="mb-2">
|
||||
<ThemedText className="text-base !text-textPrimary mb-2 ml-2">
|
||||
|
||||
<View style={styles.inputContainer}>
|
||||
<ThemedText style={styles.inputLabel}>
|
||||
{t('auth.login.password', { ns: 'login' })}
|
||||
</ThemedText>
|
||||
<View className="relative">
|
||||
<View style={styles.passwordInputContainer}>
|
||||
<TextInput
|
||||
className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground pr-12"
|
||||
style={[styles.textInput, { paddingRight: 48 }]}
|
||||
placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
|
||||
placeholderTextColor="#ccc"
|
||||
value={password}
|
||||
@ -101,7 +102,7 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
|
||||
secureTextEntry={!showPassword}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
className="absolute right-3 top-3.5"
|
||||
style={styles.eyeIcon}
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
<Ionicons
|
||||
@ -113,44 +114,107 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 忘记密码链接 */}
|
||||
<TouchableOpacity
|
||||
className="self-end mb-6"
|
||||
style={styles.forgotPassword}
|
||||
onPress={handleForgotPassword}
|
||||
>
|
||||
<ThemedText className="!text-textPrimary text-sm">
|
||||
<ThemedText style={styles.forgotPasswordText}>
|
||||
{t('auth.login.forgotPassword', { ns: 'login' })}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 登录按钮 */}
|
||||
<TouchableOpacity
|
||||
className={`w-full bg-[#E2793F] rounded-full text-[#fff] p-4 items-center mb-6 ${isLoading ? 'opacity-70' : ''}`}
|
||||
style={[styles.loginButton, isLoading && { opacity: 0.7 }]}
|
||||
onPress={handleLogin}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator color="#fff" />
|
||||
) : (
|
||||
<ThemedText className="!text-white font-semibold">
|
||||
<ThemedText style={styles.loginButtonText}>
|
||||
{t('auth.login.loginButton', { ns: 'login' })}
|
||||
</ThemedText>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 注册链接 */}
|
||||
<View className="flex-row justify-center mt-2">
|
||||
<ThemedText className="!text-textPrimary text-sm">
|
||||
<View style={styles.signupContainer}>
|
||||
<ThemedText style={styles.signupText}>
|
||||
{t('auth.login.signUpMessage', { ns: 'login' })}
|
||||
</ThemedText>
|
||||
<TouchableOpacity onPress={handleSignUp}>
|
||||
<ThemedText className="!text-[#E2793F] text-sm font-semibold ml-1">
|
||||
<ThemedText style={styles.signupLink}>
|
||||
{t('auth.login.signUp', { ns: 'login' })}
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
inputContainer: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
inputLabel: {
|
||||
fontSize: 16,
|
||||
color: '#1F2937',
|
||||
marginBottom: 8,
|
||||
marginLeft: 8,
|
||||
},
|
||||
textInput: {
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
fontSize: 16,
|
||||
textAlignVertical: 'center',
|
||||
backgroundColor: '#FFF8DE'
|
||||
},
|
||||
passwordInputContainer: {
|
||||
position: 'relative',
|
||||
},
|
||||
eyeIcon: {
|
||||
position: 'absolute',
|
||||
right: 12,
|
||||
top: 14,
|
||||
},
|
||||
forgotPassword: {
|
||||
alignSelf: 'flex-end',
|
||||
marginBottom: 24,
|
||||
},
|
||||
forgotPasswordText: {
|
||||
color: '#1F2937',
|
||||
fontSize: 14,
|
||||
},
|
||||
loginButton: {
|
||||
width: '100%',
|
||||
backgroundColor: '#E2793F',
|
||||
borderRadius: 28,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
marginBottom: 24,
|
||||
},
|
||||
loginButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '600',
|
||||
},
|
||||
signupContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
marginTop: 8,
|
||||
},
|
||||
signupText: {
|
||||
color: '#1F2937',
|
||||
fontSize: 14,
|
||||
},
|
||||
signupLink: {
|
||||
color: '#E2793F',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginLeft: 4,
|
||||
},
|
||||
});
|
||||
|
||||
export default Login
|
||||
export default Login;
|
||||
@ -14,9 +14,11 @@ interface LoginProps {
|
||||
setError: (error: string) => void;
|
||||
setShowPassword: (showPassword: boolean) => void;
|
||||
showPassword: boolean;
|
||||
setShowSecondPassword: (showSecondPassword: boolean) => void;
|
||||
showSecondPassword: boolean;
|
||||
}
|
||||
|
||||
const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword }: LoginProps) => {
|
||||
const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setShowSecondPassword, showSecondPassword }: LoginProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { login } = useAuth();
|
||||
const router = useRouter();
|
||||
@ -32,7 +34,6 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword }: Log
|
||||
// 从 URL 参数中获取 task_id 和 steps
|
||||
const params = useLocalSearchParams<{ task_id?: string; steps?: string }>();
|
||||
const taskId = params.task_id;
|
||||
const steps = params.steps;
|
||||
|
||||
const handlePasswordChange = (value: string) => {
|
||||
setPassword(value);
|
||||
@ -139,6 +140,7 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword }: Log
|
||||
// 初始化
|
||||
useEffect(() => {
|
||||
setShowPassword(false)
|
||||
setShowSecondPassword(false)
|
||||
}, [])
|
||||
|
||||
return <View className="w-full">
|
||||
@ -208,14 +210,14 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword }: Log
|
||||
handleConfirmPasswordChange(value)
|
||||
setError('123')
|
||||
}}
|
||||
secureTextEntry={!showPassword}
|
||||
secureTextEntry={!showSecondPassword}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowPassword(!showPassword)}
|
||||
onPress={() => setShowSecondPassword(!showSecondPassword)}
|
||||
className="px-3 py-2"
|
||||
>
|
||||
<Ionicons
|
||||
name={showPassword ? 'eye' : 'eye-off'}
|
||||
name={showSecondPassword ? 'eye' : 'eye-off'}
|
||||
size={20}
|
||||
color="#666"
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user