them chi tiet tin tuc, dang ky, dang nhap, gioi thieu, lien he, build pc
This commit is contained in:
237
screens/Login.tsx
Normal file
237
screens/Login.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import 'react-native-gesture-handler';
|
||||
import * as React from 'react';
|
||||
import { useState } from 'react';
|
||||
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
|
||||
import Constants from 'expo-constants';
|
||||
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
|
||||
|
||||
import EditScreenInfo from '../components/EditScreenInfo';
|
||||
import { Text, View, } from '../components/Themed';
|
||||
import useColorScheme from '../hooks/useColorScheme';
|
||||
import { TextInput } from 'react-native-gesture-handler';
|
||||
import { RadioButton, Checkbox } from 'react-native-paper';
|
||||
import { Picker } from '@react-native-picker/picker';
|
||||
import { ArticleItem } from '../components/article/ArticleItem';
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView>
|
||||
<View style={styles.brecrumb}>
|
||||
<Text style={styles.brecrumbText}>Trang chủ</Text>
|
||||
<FontAwesome style={styles.brecrumbIcon} name="angle-right" />
|
||||
<Text style={styles.brecrumbTextLast}>Đăng nhập</Text>
|
||||
</View>
|
||||
|
||||
<LoginBox />
|
||||
|
||||
<NoteLogin />
|
||||
|
||||
<PolicyFooter />
|
||||
|
||||
<Social />
|
||||
|
||||
<ShowroomList />
|
||||
|
||||
<FooterInfo />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const winWidth = Dimensions.get('window').width; //full width
|
||||
const winHeight = Dimensions.get('window').height; //full height
|
||||
const winWidthP10 = winWidth - 20;
|
||||
const halfWinWidth = winWidth / 2;
|
||||
const ratio = winWidthP10 / 850; //541 is actual image width
|
||||
|
||||
const LoginBox = () => {
|
||||
return (
|
||||
<View style={styles.login}>
|
||||
<Text style={styles.loginTitle}>Thông tin khách hàng đăng nhập hệ thống</Text>
|
||||
<View style={styles.loginContent}>
|
||||
<View style={styles.loginItem}>
|
||||
<Text style={styles.loginText}>Email Đăng nhập</Text>
|
||||
<TextInput style={styles.loginInput} />
|
||||
</View>
|
||||
<View style={styles.loginItem}>
|
||||
<Text style={styles.loginText}>Mật khẩu</Text>
|
||||
<TextInput style={styles.loginInput} />
|
||||
</View>
|
||||
<Pressable style={styles.loginSubmit}>
|
||||
<Text style={styles.loginSubmitText}>Đăng nhập</Text>
|
||||
</Pressable>
|
||||
<View style={styles.loginGoogle}>
|
||||
<View style={styles.loginSocialIcon}>
|
||||
<FontAwesome style={styles.loginSocialIconCt} name="google-plus" />
|
||||
</View>
|
||||
<Text style={styles.loginSocialText}>Đăng nhập bằng google</Text>
|
||||
</View>
|
||||
<View style={styles.loginFace}>
|
||||
<View style={styles.loginSocialIcon}>
|
||||
<FontAwesome style={styles.loginSocialIconCt} name="facebook" />
|
||||
</View>
|
||||
<Text style={styles.loginSocialText}>Đăng nhập bằng Facebook</Text>
|
||||
</View>
|
||||
<View style={styles.loginZalo}>
|
||||
<View style={styles.loginSocialIcon}>
|
||||
<Image style={styles.loginZaloImg} source={{ uri: 'https://www.hanoicomputer.vn/template/may2020/images/logo-zalo-png-vertor-jpeg.jpg' }} />
|
||||
</View>
|
||||
<Text style={styles.loginSocialText}>Đăng nhập bằng Zalo</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const NoteLogin = () => {
|
||||
return (
|
||||
<View style={styles.noteLogin}>
|
||||
<Text style={styles.noteLoginTitle}>Trợ giúp</Text>
|
||||
<View>
|
||||
<Text style={styles.noteLoginText}>1. Nếu bạn chưa là thành viên, vui lòng <Pressable><Text style={styles.noteLoginTextLink}>Đăng ký tài khoản</Text></Pressable></Text>
|
||||
<Text style={styles.noteLoginText}>2. Nếu bạn quên mật khẩu, vui lòng yêu cầu <Pressable><Text style={styles.noteLoginTextLink}>quên mật khẩu</Text></Pressable></Text>
|
||||
<Text style={styles.noteLoginText}>3. Nếu bạn không đăng ký thành viên được, vui lòng gửi email tới chúng tôi</Text>
|
||||
<Text style={styles.noteLoginText}>4. Hoặc gọi điện tới chúng tôi để được tư vấn.</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
brecrumb: {
|
||||
display: 'flex',
|
||||
width: winWidth,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
flexDirection: 'row',
|
||||
height: 18,
|
||||
alignItems: 'center',
|
||||
marginTop: 10,
|
||||
marginBottom: 10,
|
||||
},
|
||||
brecrumbText: {
|
||||
fontSize: 13,
|
||||
color: '#222',
|
||||
},
|
||||
brecrumbTextLast: {
|
||||
fontSize: 13,
|
||||
color: '#b7b7b7',
|
||||
},
|
||||
brecrumbIcon: {
|
||||
fontSize: 13,
|
||||
color: '#222',
|
||||
marginLeft: 6,
|
||||
marginRight: 6
|
||||
},
|
||||
login: {
|
||||
width: winWidth,
|
||||
marginBottom: 20,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
loginTitle: {
|
||||
fontSize: 13,
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginContent: {},
|
||||
loginItem: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
loginText: {
|
||||
marginBottom: 5,
|
||||
},
|
||||
loginInput: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e1e1e1',
|
||||
},
|
||||
loginSubmit: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgb(253, 216, 53)',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginSubmitText: {},
|
||||
loginGoogle: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#df4a32',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginSocialIcon: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: '#fff',
|
||||
backgroundColor: 'rgba(0,0,0,0)'
|
||||
},
|
||||
loginSocialIconCt: {
|
||||
fontSize: 25,
|
||||
color: '#fff'
|
||||
},
|
||||
loginSocialText: {
|
||||
textAlign: 'center',
|
||||
width: winWidthP10 - 41,
|
||||
color: '#fff'
|
||||
},
|
||||
loginFace: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#3b5998',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginZalo: {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 3,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#3b5998',
|
||||
marginBottom: 10,
|
||||
},
|
||||
loginZaloImg: {
|
||||
width: 25,
|
||||
height: 25,
|
||||
},
|
||||
noteLogin: {
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 20,
|
||||
borderTopColor: '#e1e1e1',
|
||||
borderTopWidth: 1,
|
||||
marginBottom: 20,
|
||||
},
|
||||
noteLoginTitle: {
|
||||
fontWeight: 'bold',
|
||||
marginBottom: 10,
|
||||
},
|
||||
noteLoginText: {
|
||||
marginBottom: 5,
|
||||
},
|
||||
noteLoginTextLink: {
|
||||
color: '#3b5998'
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user