Skip to content

Commit 9ffadb6

Browse files
chnirtchnirt
committed
Do Design Ui AuthStack
1 parent 4fd1fa6 commit 9ffadb6

File tree

6 files changed

+389
-121
lines changed

6 files changed

+389
-121
lines changed

‎src/navigation/ScreenNavigator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {Platform, StyleSheet} from 'react-native';
66
import Birthday from '../screens/Birthday';
77
import Couple from '../screens/Couple';
88
import Events from '../screens/Events';
9-
import {View, Text, ImageBackground} from 'react-native';
9+
import {View, ImageBackground} from 'react-native';
1010

1111
const Tab = createMaterialTopTabNavigator();
1212

‎src/navigation/TabNavigator.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {View, Text, StyleSheet} from 'react-native';
44
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
55

66
import {primaryColor} from '../theme';
7+
import Couple from '../screens/Couple';
78

89
const styles = StyleSheet.create({
910
container: {
@@ -68,7 +69,7 @@ export default function TabNavigator() {
6869
/>
6970
<Tab.Screen
7071
name="Profile"
71-
component={Profile}
72+
component={Couple}
7273
options={{
7374
tabBarLabel: 'Profile',
7475
tabBarIcon: ({color, size}) => (

‎src/screens/Forgot.js‎

Lines changed: 112 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,136 @@
11
import React, {useState} from 'react';
2-
import {Text, StyleSheet, View, TextInput, Button, Alert} from 'react-native';
2+
import {
3+
Text,
4+
StyleSheet,
5+
View,
6+
TextInput,
7+
TouchableOpacity,
8+
} from 'react-native';
9+
import {Formik} from 'formik';
10+
import SafeAreaView from 'react-native-safe-area-view';
11+
12+
import ForgotSchema from '../validation/Forgot';
313

414
export default function ForgotScreen(props) {
515
const {navigation} = props;
616
const {navigate} = navigation;
717

8-
const [email, setEmail] = useState('');
9-
1018
function _onSend() {
11-
Alert.alert('Send');
19+
navigate('Login');
1220
}
1321

1422
function _navigateLogin() {
1523
navigate('Login');
1624
}
1725

1826
return (
19-
<View style={styles.container}>
20-
<Text> Forgot </Text>
21-
<Text>Email</Text>
22-
<TextInput
23-
style={{height: 40}}
24-
placeholder="Type here to Email!"
25-
onChangeText={text => setEmail(text)}
26-
value={email}
27-
/>
28-
<Button onPress={_onSend} title="Send mail" color="#841584" />
29-
<Button onPress={_navigateLogin} title="Sign up" color="#841584" />
30-
</View>
27+
<SafeAreaView style={styles.container}>
28+
<Text style={styles.greeting}>Forgot password?</Text>
29+
<View style={{height: 72}} />
30+
<Formik
31+
initialValues={{
32+
phone: '0704498756',
33+
}}
34+
validationSchema={ForgotSchema}
35+
onSubmit={values => {
36+
_onSend(values);
37+
}}>
38+
{({
39+
handleChange,
40+
handleBlur,
41+
handleSubmit,
42+
values,
43+
errors,
44+
touched,
45+
}) => (
46+
<View>
47+
<View style={styles.form}>
48+
<Text style={styles.inputTitle}>Phone Number</Text>
49+
<TextInput
50+
style={styles.input}
51+
onChangeText={handleChange('phone')}
52+
onBlur={handleBlur('phone')}
53+
value={values.phone}
54+
/>
55+
{errors.phone && touched.phone ? (
56+
<Text style={styles.error}>{errors.phone}</Text>
57+
) : null}
58+
</View>
59+
<TouchableOpacity style={styles.button} onPress={handleSubmit}>
60+
<Text style={styles.buttonText}>Reset Password</Text>
61+
</TouchableOpacity>
62+
</View>
63+
)}
64+
</Formik>
65+
66+
<View
67+
style={{
68+
flexDirection: 'row',
69+
alignSelf: 'center',
70+
marginTop: 32,
71+
}}>
72+
<Text style={{color: '#414959'}}>Back to </Text>
73+
<TouchableOpacity onPress={_navigateLogin}>
74+
<Text style={styles.signInText}>Sign In</Text>
75+
</TouchableOpacity>
76+
</View>
77+
</SafeAreaView>
3178
);
3279
}
3380

3481
const styles = StyleSheet.create({
3582
container: {
3683
flex: 1,
84+
},
85+
greeting: {
86+
marginTop: 32,
87+
fontSize: 18,
88+
fontWeight: '400',
89+
textAlign: 'center',
90+
},
91+
errorMessage: {
92+
height: 72,
3793
alignItems: 'center',
3894
justifyContent: 'center',
95+
marginHorizontal: 30,
96+
},
97+
form: {
98+
marginBottom: 48,
99+
marginHorizontal: 30,
100+
},
101+
inputTitle: {
102+
color: '#8A8F9E',
103+
fontSize: 10,
104+
textTransform: 'uppercase',
105+
},
106+
input: {
107+
borderBottomColor: '#8A8F9E',
108+
borderBottomWidth: StyleSheet.hairlineWidth,
109+
height: 40,
110+
fontSize: 15,
111+
color: '#161F3D',
112+
},
113+
error: {
114+
color: '#E9446A',
115+
fontSize: 13,
116+
fontWeight: '600',
117+
textAlign: 'center',
118+
},
119+
button: {
120+
marginHorizontal: 30,
121+
backgroundColor: '#E9446A',
122+
borderRadius: 4,
123+
height: 52,
124+
alignItems: 'center',
125+
justifyContent: 'center',
126+
},
127+
buttonText: {
128+
color: '#fff',
129+
fontWeight: '500',
130+
},
131+
signInText: {
132+
color: '#E9446A',
133+
fontSize: 13,
134+
fontWeight: '500',
39135
},
40136
});

‎src/screens/Login.js‎

Lines changed: 125 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import React, {useContext} from 'react';
2-
import {Text, StyleSheet, View, TextInput, Button, Image} from 'react-native';
1+
import React, {useContext, useState} from 'react';
2+
import {
3+
Text,
4+
StyleSheet,
5+
View,
6+
TextInput,
7+
TouchableOpacity,
8+
} from 'react-native';
39
import {Formik} from 'formik';
10+
import SafeAreaView from 'react-native-safe-area-view';
411

512
import {CTX} from '../tools/context';
613
import LoginSchema from '../validation/Login';
@@ -12,12 +19,18 @@ export default function LoginScreen(props) {
1219
const authContext = useContext(CTX);
1320
const {_authenticate} = authContext;
1421

22+
const [errorMessage, setErrorMessage] = useState('');
23+
1524
async function _onLogin(values) {
1625
const {email, password} = values;
1726
const accessToken = email + password;
1827

19-
_authenticate(accessToken);
20-
navigate('Home');
28+
if (email === 'trinhchinchin@gmail.com' && password === '123') {
29+
_authenticate(accessToken);
30+
navigate('Home');
31+
}
32+
33+
setErrorMessage('Email or Password is not correct.');
2134
}
2235

2336
function _navigateForgot() {
@@ -29,14 +42,17 @@ export default function LoginScreen(props) {
2942
}
3043

3144
return (
32-
<View style={styles.container}>
33-
<Image
45+
<SafeAreaView style={styles.container}>
46+
{/* <Image
3447
style={{width: 50, height: 50}}
3548
source={require('../assets/logo.png')}
36-
/>
37-
<Text> Login </Text>
49+
/> */}
50+
<Text style={styles.greeting}>{'Welcome back.'}</Text>
51+
<View style={styles.errorMessage}>
52+
<Text>{errorMessage}</Text>
53+
</View>
3854
<Formik
39-
initialValues={{email: 'trinchinchin@gmail.com', password: '123'}}
55+
initialValues={{email: 'trinhchinchin@gmail.com', password: '123'}}
4056
validationSchema={LoginSchema}
4157
onSubmit={values => {
4258
_onLogin(values);
@@ -50,52 +66,118 @@ export default function LoginScreen(props) {
5066
touched,
5167
}) => (
5268
<View>
53-
<Text>Email</Text>
54-
<TextInput
55-
style={{height: 40}}
56-
placeholder="Type here to email!"
57-
onChangeText={handleChange('email')}
58-
onBlur={handleBlur('email')}
59-
value={values.email}
60-
/>
61-
{errors.email && touched.email ? (
62-
<Text style={styles.error}>{errors.email}</Text>
63-
) : null}
64-
<Text>Password</Text>
65-
<TextInput
66-
style={{height: 40}}
67-
placeholder="Type here to password!"
68-
onChangeText={handleChange('password')}
69-
onBlur={handleBlur('password')}
70-
value={values.password}
71-
secureTextEntry
72-
/>
73-
{errors.password && touched.password ? (
74-
<Text style={styles.error}>{errors.password}</Text>
75-
) : null}
76-
<Button onPress={handleSubmit} title="Login" color="#841584" />
69+
<View style={styles.form}>
70+
<View>
71+
<Text style={styles.inputTitle}>Email Address</Text>
72+
<TextInput
73+
style={styles.input}
74+
onChangeText={handleChange('email')}
75+
onBlur={handleBlur('email')}
76+
value={values.email}
77+
/>
78+
{errors.email && touched.email ? (
79+
<Text style={styles.error}>{errors.email}</Text>
80+
) : null}
81+
</View>
82+
<View style={{marginTop: 32}}>
83+
<Text style={styles.inputTitle}>Password</Text>
84+
<TextInput
85+
style={styles.input}
86+
onChangeText={handleChange('password')}
87+
onBlur={handleBlur('password')}
88+
value={values.password}
89+
secureTextEntry
90+
/>
91+
{errors.password && touched.password ? (
92+
<Text style={styles.error}>{errors.password}</Text>
93+
) : null}
94+
</View>
95+
</View>
96+
<TouchableOpacity style={styles.button} onPress={handleSubmit}>
97+
<Text style={styles.buttonText}>Login</Text>
98+
</TouchableOpacity>
7799
</View>
78100
)}
79101
</Formik>
80-
<Text>OR</Text>
81-
<Text>Don't have an account?</Text>
82-
<Button onPress={_navigateRegister} title="Sign Up" color="#841584" />
83-
<Button
84-
onPress={_navigateForgot}
85-
title="Forgot your password?"
86-
color="#841584"
87-
/>
88-
</View>
102+
<View
103+
style={{
104+
flexDirection: 'row',
105+
alignSelf: 'center',
106+
marginTop: 32,
107+
}}>
108+
<Text style={{color: '#414959'}}>Don't have an account? </Text>
109+
<TouchableOpacity onPress={_navigateRegister}>
110+
<Text style={styles.signUpText}>Sign Up</Text>
111+
</TouchableOpacity>
112+
</View>
113+
114+
<View
115+
style={{
116+
flexDirection: 'row',
117+
alignSelf: 'center',
118+
marginTop: 32,
119+
}}>
120+
<TouchableOpacity onPress={_navigateForgot} color="#841584">
121+
<Text style={styles.signUpText}>Forgot password?</Text>
122+
</TouchableOpacity>
123+
</View>
124+
</SafeAreaView>
89125
);
90126
}
91127

92128
const styles = StyleSheet.create({
93129
container: {
94130
flex: 1,
131+
},
132+
greeting: {
133+
marginTop: 32,
134+
fontSize: 18,
135+
fontWeight: '400',
136+
textAlign: 'center',
137+
},
138+
errorMessage: {
139+
height: 72,
95140
alignItems: 'center',
96141
justifyContent: 'center',
142+
marginHorizontal: 30,
143+
},
144+
form: {
145+
marginBottom: 48,
146+
marginHorizontal: 30,
147+
},
148+
inputTitle: {
149+
color: '#8A8F9E',
150+
fontSize: 10,
151+
textTransform: 'uppercase',
152+
},
153+
input: {
154+
borderBottomColor: '#8A8F9E',
155+
borderBottomWidth: StyleSheet.hairlineWidth,
156+
height: 40,
157+
fontSize: 15,
158+
color: '#161F3D',
97159
},
98160
error: {
99-
color: 'red',
161+
color: '#E9446A',
162+
fontSize: 13,
163+
fontWeight: '600',
164+
textAlign: 'center',
165+
},
166+
button: {
167+
marginHorizontal: 30,
168+
backgroundColor: '#E9446A',
169+
borderRadius: 4,
170+
height: 52,
171+
alignItems: 'center',
172+
justifyContent: 'center',
173+
},
174+
buttonText: {
175+
color: '#fff',
176+
fontWeight: '500',
177+
},
178+
signUpText: {
179+
color: '#E9446A',
180+
fontSize: 13,
181+
fontWeight: '500',
100182
},
101183
});

0 commit comments

Comments
 (0)