FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 邮箱登录

Browse Source
This commit is contained in:
jinyaqiu 2025-08-06 14:01:52 +08:00
parent 1f35ce1c4a
commit 11ceca9753
4 changed files with 76 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/(tabs)/login.tsx
View File

@ -3,6 +3,7 @@ import ForgetPwd from '@/components/login/forgetPwd';
import Login from '@/components/login/login'; import Login from '@/components/login/login';
import PhoneLogin from '@/components/login/phoneLogin'; import PhoneLogin from '@/components/login/phoneLogin';
import SignUp from '@/components/login/signUp'; import SignUp from '@/components/login/signUp';
import PrivacyModal from '@/components/owner/qualification/privacy';
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from '@/components/ThemedView';
import { useLocalSearchParams, useRouter } from 'expo-router'; import { useLocalSearchParams, useRouter } from 'expo-router';
@ -27,6 +28,9 @@ const LoginScreen = () => {
// 判断是否有白边 // 判断是否有白边
const statusBarHeight = StatusBar?.currentHeight ?? 0; const statusBarHeight = StatusBar?.currentHeight ?? 0;
// 协议弹窗
const [modalVisible, setModalVisible] = useState(false);
const [modalType, setModalType] = useState<'ai' | 'terms' | 'privacy' | 'user' | 'membership'>('privacy');
useEffect(() => { useEffect(() => {
const keyboardWillShowListener = Keyboard.addListener( const keyboardWillShowListener = Keyboard.addListener(
Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
@ -71,12 +75,15 @@ const LoginScreen = () => {
bounces={false} bounces={false}
> >
<ThemedView className="flex-1 bg-bgPrimary justify-end"> <ThemedView className="flex-1 bg-bgPrimary justify-end">
<View style={{ width: "100%", alignItems: "center", marginTop: insets.top + 8 }}>
<ThemedText style={{ fontSize: 20, fontWeight: 'bold', color: "#fff" }}>Awake your Memo</ThemedText>
</View>
<View className="flex-1"> <View className="flex-1">
<View <View
className="absolute left-1/2 z-10" className="absolute left-1/2 z-10"
style={{ style={{
top: containerHeight > 0 ? windowHeight - containerHeight - 210 + statusBarHeight : 0, top: containerHeight > 0 ? windowHeight - containerHeight - 210 + statusBarHeight - insets.top - 28 : 0,
transform: [{ translateX: -200 }, { translateY: keyboardOffset > 0 ? -keyboardOffset + statusBarHeight : -keyboardOffset }] transform: [{ translateX: -200 }, { translateY: keyboardOffset > 0 ? -keyboardOffset + statusBarHeight - insets.top - 28 : -keyboardOffset }]
}} }}
> >
{ {
@ -90,8 +97,8 @@ const LoginScreen = () => {
<View <View
className="absolute left-1/2 z-[1000] -translate-x-[39.5px] -translate-y-[4px]" className="absolute left-1/2 z-[1000] -translate-x-[39.5px] -translate-y-[4px]"
style={{ style={{
top: containerHeight > 0 ? windowHeight - containerHeight - 1 + statusBarHeight : 0, top: containerHeight > 0 ? windowHeight - containerHeight - 1 + statusBarHeight - insets.top - 30 : 0,
transform: [{ translateX: -39.5 }, { translateY: keyboardOffset > 0 ? -4 - keyboardOffset + statusBarHeight : -4 - keyboardOffset }] transform: [{ translateX: -39.5 }, { translateY: keyboardOffset > 0 ? -4 - keyboardOffset + statusBarHeight - insets.top - 30 : -4 - keyboardOffset }]
}} }}
> >
<Handers /> <Handers />
@ -100,8 +107,8 @@ const LoginScreen = () => {
<ThemedView <ThemedView
className="w-full bg-white pt-4 px-6 relative z-20 shadow-lg pb-5" className="w-full bg-white pt-4 px-6 relative z-20 shadow-lg pb-5"
style={{ style={{
borderTopLeftRadius: 24, borderTopLeftRadius: 50,
borderTopRightRadius: 24, borderTopRightRadius: 50,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1, shadowOpacity: 0.1,
@ -154,26 +161,29 @@ const LoginScreen = () => {
return components[status as keyof typeof components] || components.login; return components[status as keyof typeof components] || components.login;
})()} })()}
{status == 'login' || !status && <View style={{ width: "100%", alignItems: "center", marginTop: 16 }}>
<View className="flex-row justify-center mt-2"> {status == 'login' || !status &&
<ThemedText className="text-sm !text-textPrimary"> <View className="flex-row justify-center mt-2 flex-wrap w-[85%] items-center">
{status === 'login' || !status ? t('auth.agree.logintext', { ns: 'login' }) : t('auth.agree.singupText', { ns: 'login' })} <ThemedText style={{ fontSize: 11, color: "#FFB645" }}>
</ThemedText> {status === 'login' || !status ? t('auth.agree.logintext', { ns: 'login' }) : t('auth.agree.singupText', { ns: 'login' })}
<TouchableOpacity onPress={() => { }}>
<ThemedText className="text-sm font-semibold ml-1 !text-textPrimary underline">
{t('auth.agree.terms', { ns: 'login' })}
</ThemedText> </ThemedText>
</TouchableOpacity> <TouchableOpacity onPress={() => { setModalVisible(true); setModalType('terms') }}>
<ThemedText className="text-sm !text-textPrimary"> <ThemedText style={{ fontSize: 11, color: "#FFB645", textDecorationLine: 'underline' }}>
{t('auth.agree.join', { ns: 'login' })} {t('auth.agree.terms', { ns: 'login' })}
</ThemedText> </ThemedText>
<TouchableOpacity onPress={() => { }}> </TouchableOpacity>
<ThemedText className="!text-textPrimary underline text-sm font-semibold ml-1"> <ThemedText style={{ fontSize: 11, color: "#FFB645", flexWrap: 'wrap' }}>
{t('auth.agree.privacyPolicy', { ns: 'login' })} {t('auth.agree.join', { ns: 'login' })}
</ThemedText> </ThemedText>
</TouchableOpacity> <TouchableOpacity onPress={() => { setModalVisible(true); setModalType('privacy') }}>
</View> <ThemedText style={{ fontSize: 11, color: "#FFB645", textDecorationLine: 'underline' }}>
} {t('auth.agree.privacyPolicy', { ns: 'login' })}
</ThemedText>
</TouchableOpacity>
</View>
}
</View>
<PrivacyModal modalVisible={modalVisible} setModalVisible={setModalVisible} type={modalType} />
</ThemedView> </ThemedView>
</ThemedView> </ThemedView>
</ScrollView> </ScrollView>

45
components/login/login.tsx
View File

@ -138,6 +138,19 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
)} )}
</TouchableOpacity> </TouchableOpacity>
<View style={{ width: "100%", alignItems: "center", opacity: 0 }}>
<View style={styles.loginTypeContainer}>
<ThemedText>
OR
</ThemedText>
<View style={{ flexDirection: 'row', justifyContent: "space-between", width: "100%" }}>
<ThemedText style={styles.loginType} />
<ThemedText style={styles.loginType} />
<ThemedText style={styles.loginType} />
</View>
</View>
</View>
<View style={styles.signupContainer}> <View style={styles.signupContainer}>
<ThemedText style={styles.signupText}> <ThemedText style={styles.signupText}>
{t('auth.login.signUpMessage', { ns: 'login' })} {t('auth.login.signUpMessage', { ns: 'login' })}
@ -156,12 +169,28 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
}, },
loginTypeContainer: {
display: "flex",
flexDirection: "column",
justifyContent: 'center',
alignItems: 'center',
gap: 16,
width: "70%"
},
loginType: {
borderRadius: 12,
width: 54,
height: 54,
textAlign: 'center',
backgroundColor: '#FADBA1'
},
inputContainer: { inputContainer: {
marginBottom: 20, marginBottom: 20,
}, },
inputLabel: { inputLabel: {
fontSize: 16, fontSize: 16,
color: '#1F2937', color: '#AC7E35',
fontWeight: '600',
marginBottom: 8, marginBottom: 8,
marginLeft: 8, marginLeft: 8,
}, },
@ -169,7 +198,7 @@ const styles = StyleSheet.create({
borderRadius: 12, borderRadius: 12,
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 12, paddingVertical: 12,
fontSize: 16, fontSize: 14,
textAlignVertical: 'center', textAlignVertical: 'center',
backgroundColor: '#FFF8DE' backgroundColor: '#FFF8DE'
}, },
@ -186,8 +215,8 @@ const styles = StyleSheet.create({
marginBottom: 24, marginBottom: 24,
}, },
forgotPasswordText: { forgotPasswordText: {
color: '#1F2937', color: '#AC7E35',
fontSize: 14, fontSize: 11,
}, },
loginButton: { loginButton: {
width: '100%', width: '100%',
@ -200,6 +229,7 @@ const styles = StyleSheet.create({
loginButtonText: { loginButtonText: {
color: '#FFFFFF', color: '#FFFFFF',
fontWeight: '600', fontWeight: '600',
fontSize: 18,
}, },
signupContainer: { signupContainer: {
flexDirection: 'row', flexDirection: 'row',
@ -207,14 +237,15 @@ const styles = StyleSheet.create({
marginTop: 8, marginTop: 8,
}, },
signupText: { signupText: {
color: '#1F2937', color: '#AC7E35',
fontSize: 14, fontSize: 17,
}, },
signupLink: { signupLink: {
color: '#E2793F', color: '#E2793F',
fontSize: 14, fontSize: 17,
fontWeight: '600', fontWeight: '600',
marginLeft: 4, marginLeft: 4,
textDecorationLine: 'underline',
}, },
}); });

5
components/login/signUp.tsx
View File

@ -353,8 +353,9 @@ const styles = StyleSheet.create({
overflow: 'hidden', overflow: 'hidden',
}, },
inputLabel: { inputLabel: {
fontSize: 16, fontSize: 14,
color: '#1F2937', color: '#AC7E35',
fontWeight: '600',
marginBottom: 8, marginBottom: 8,
marginLeft: 8, marginLeft: 8,
}, },

2
i18n/locales/en/login.json
View File

@ -73,7 +73,7 @@
"logintext": "By logging in, you agree to our", "logintext": "By logging in, you agree to our",
"singupText": "By signing up, you agree to our", "singupText": "By signing up, you agree to our",
"terms": " Terms", "terms": " Terms",
"join": "&", "join": " and have read our",
"privacyPolicy": " Privacy Policy." "privacyPolicy": " Privacy Policy."
}, },
"welcome": { "welcome": {