them cac trang cart, tai khoan
This commit is contained in:
@@ -12,53 +12,51 @@ export default function Login() {
|
||||
const navigation = useNavigation();
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<View style={styles.boxLogin}>
|
||||
<View style={styles.boxLoginTitle}>
|
||||
<Text style={styles.boxLoginTitleText}>Chào mừng đến với Nagakawa!</Text>
|
||||
<Text style={styles.boxLoginTitleText}>Đăng nhập ngay!</Text>
|
||||
<View style={styles.boxLogin}>
|
||||
<View style={styles.boxLoginTop}>
|
||||
<TouchableOpacity style={styles.boxLoginLogo}>
|
||||
<Image source={require('../assets/images/logo.png')} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxLoginItemList}>
|
||||
<View style={styles.boxLoginItem}>
|
||||
<Ionicons style={styles.boxLoginItemIcon} name="person-outline" />
|
||||
<TextInput style={styles.boxLoginItemInput} placeholder="Email đăng nhập*" />
|
||||
</View>
|
||||
<View style={styles.boxLoginToRegis}>
|
||||
<Text>Khách hàng mới?</Text>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('Register')}>
|
||||
<Text style={styles.green}>Đăng ký</Text>
|
||||
<View style={styles.boxLoginItem}>
|
||||
<Ionicons style={styles.boxLoginItemIcon} name="lock-closed-outline" />
|
||||
<TextInput style={[styles.boxLoginItemInput, styles.boxLoginItemInputMk]} placeholder="Mật khẩu" />
|
||||
<TouchableOpacity onPress={() => navigation.navigate('ForgotPassword')} style={styles.boxLoginItemForgitPas}>
|
||||
<Text style={styles.boxLoginItemForgitPasText}>Quên?</Text>
|
||||
</TouchableOpacity>
|
||||
<Text>tại đây</Text>
|
||||
</View>
|
||||
<View style={styles.loginCartSocialForm}>
|
||||
<View style={styles.loginCartSocialFormItem}>
|
||||
<Text style={styles.loginCartSocialFormItemText}>Email đăng nhập</Text>
|
||||
<TextInput style={styles.loginCartSocialFormItemInput} />
|
||||
</View>
|
||||
<View style={styles.loginCartSocialFormItem}>
|
||||
<Text style={styles.loginCartSocialFormItemText}>Mật khẩu</Text>
|
||||
<TextInput style={styles.loginCartSocialFormItemInput} />
|
||||
</View>
|
||||
<View style={styles.boxLoginForgetPass}>
|
||||
<TouchableOpacity>
|
||||
<Text style={styles.boxLoginForgetPassText}>Quên mật khẩu?</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.boxLoginSubmit} onPress={() => navigation.navigate('AccountHome')}>
|
||||
<Text style={styles.boxLoginSubmitText}>Đăng nhập</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.boxLoginOther}>
|
||||
<Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
|
||||
</View>
|
||||
<View style={styles.boxLoginSocial}>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
|
||||
<FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
|
||||
<FontAwesome style={styles.boxLoginSocialIcon} name="google" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
|
||||
<Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('AccountHome')} style={styles.boxLoginButton}>
|
||||
<Text style={styles.boxLoginButtonText}>Đăng nhập</Text>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.boxLoginButtonRegis}>
|
||||
<Text style={styles.boxLoginButtonRegisText}>Khách hàng mới?</Text>
|
||||
<TouchableOpacity onPress={() => navigation.navigate('Register')}>
|
||||
<Text style={styles.boxLoginButtonRegisBt}>Đăng ký</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View style={styles.boxLoginLineChia}>
|
||||
<View style={styles.boxLoginLine}></View>
|
||||
<Text style={styles.boxLoginLineChiaText}>Hoặc</Text>
|
||||
<View style={styles.boxLoginLine}></View>
|
||||
</View>
|
||||
<View style={styles.loginSocial}>
|
||||
<TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemFace]}>
|
||||
<FontAwesome style={styles.loginSocialItemIcon} name="facebook" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemGoogle]}>
|
||||
<FontAwesome style={styles.loginSocialItemIcon} name="google" />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={[styles.loginSocialItem, styles.loginSocialItemZalo]}>
|
||||
<Image style={styles.loginSocialItemImg} source={require('../assets/images/zalo-login.png')} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@@ -74,110 +72,120 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
boxLogin: {
|
||||
width: winWidth,
|
||||
height: winHeight - 130,
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
boxLoginTitle: {
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
boxLoginTop: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxLoginTitleText: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
boxLoginToRegis: {
|
||||
width: '100%',
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
boxLoginLogo: {},
|
||||
boxLoginItemList: {},
|
||||
boxLoginItem: {
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomColor: '#ABABAB',
|
||||
borderBottomWidth: 1,
|
||||
paddingBottom: 5,
|
||||
position: 'relative',
|
||||
},
|
||||
boxLoginItemIcon: {
|
||||
fontSize: 24,
|
||||
width: 32,
|
||||
},
|
||||
boxLoginItemInput: {
|
||||
width: winWidth - 52,
|
||||
height: 30,
|
||||
},
|
||||
boxLoginItemInputMk: {
|
||||
paddingRight: 50,
|
||||
},
|
||||
boxLoginItemForgitPas: {
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
borderLeftColor: '#e1e1e1',
|
||||
borderLeftWidth: 1,
|
||||
width: 50,
|
||||
height: 30,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
green: {
|
||||
color: '#008445',
|
||||
boxLoginItemForgitPasText: {
|
||||
color: '#0070C7'
|
||||
},
|
||||
loginCartSocialForm: {
|
||||
marginBottom: 10,
|
||||
padding: 10,
|
||||
},
|
||||
loginCartSocialFormItem: {
|
||||
width: '100%',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginCartSocialFormItemText: {
|
||||
marginBottom: 5,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
loginCartSocialFormItemInput: {
|
||||
boxLoginButton: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
borderRadius: 5,
|
||||
},
|
||||
loginCartSocialFormNote: {
|
||||
marginBottom: 10,
|
||||
flexDirection: 'row',
|
||||
},
|
||||
boxLoginForgetPass: {
|
||||
width: '100%',
|
||||
flexDirection: 'row',
|
||||
marginBottom: 15,
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
boxLoginForgetPassText: {
|
||||
color: '#008445',
|
||||
},
|
||||
boxLoginSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
backgroundColor: '#D8262F',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 5,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#d9282f',
|
||||
marginBottom: 20,
|
||||
},
|
||||
boxLoginSubmitText: {
|
||||
fontWeight: 'bold',
|
||||
boxLoginButtonText: {
|
||||
fontWeight: '700',
|
||||
color: '#fff',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
boxLoginButtonRegis: {
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
boxLoginButtonRegisText: {
|
||||
marginRight: 5,
|
||||
},
|
||||
boxLoginButtonRegisBt: {
|
||||
color: '#0070C7',
|
||||
},
|
||||
boxLoginLineChia: {
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
},
|
||||
boxLoginLine: {
|
||||
width: 80,
|
||||
height: 1,
|
||||
backgroundColor: '#e1e1e1',
|
||||
},
|
||||
boxLoginLineChiaText: {
|
||||
marginHorizontal: 5,
|
||||
color: '#777',
|
||||
fontWeight: '300',
|
||||
},
|
||||
loginSocial: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loginSocialItem: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: '#3B5998',
|
||||
marginHorizontal: 8,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loginSocialItemIcon: {
|
||||
fontSize: 18,
|
||||
color: '#fff'
|
||||
},
|
||||
boxLoginOther: {
|
||||
marginBottom: 20,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
loginSocialItemImg: {
|
||||
width: 22,
|
||||
height: 24,
|
||||
},
|
||||
boxLoginOtherText: {},
|
||||
boxLoginSocial: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
loginSocialItemFace: {},
|
||||
loginSocialItemGoogle: {
|
||||
backgroundColor: '#DF4A32',
|
||||
},
|
||||
boxLoginSocialItem: {
|
||||
width: 34,
|
||||
height: 34,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius: 5,
|
||||
marginHorizontal: 5,
|
||||
backgroundColor: '#3b5998',
|
||||
},
|
||||
boxLoginSocialFace: {},
|
||||
boxLoginSocialGoogle: {
|
||||
backgroundColor: '#df4a32',
|
||||
},
|
||||
boxLoginSocialZalo: {
|
||||
backgroundColor: '#0f8edd',
|
||||
},
|
||||
boxLoginSocialIcon: {
|
||||
fontSize: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
boxLoginSocialImg: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
loginSocialItemZalo: {
|
||||
backgroundColor: '#0F8EDD'
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user