Skip to content

Commit 027f98d

Browse files
Benjamín Thomas Kramm Pinojfcampos1
Benjamín Thomas Kramm Pino
authored and
jfcampos1
committed
feat: added authentication components (#2)
1 parent 6b0eba8 commit 027f98d

2 files changed

Lines changed: 349 additions & 0 deletions

File tree

‎src/components/Authentication/LoginForm.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React, { Component } from 'react'
2+
import { StyleSheet } from 'react-native'
3+
import { Text, Form, Item, Input, Button } from 'native-base'
4+
import Layout from '../../constants/Layout'
5+
import PropTypes from 'prop-types'
6+
7+
class LoginForm extends Component {
8+
constructor(props) {
9+
super(props)
10+
this.state = {
11+
email: '',
12+
password: '',
13+
inputValidity: true,
14+
}
15+
16+
this.onChangePassword = this.onChangePassword.bind(this)
17+
this.onChangeEmail = this.onChangeEmail.bind(this)
18+
}
19+
20+
onChangeEmail(email) {
21+
const validity = email.match(
22+
// eslint-disable-next-line no-useless-escape
23+
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
24+
)
25+
this.setState({ email, inputValidity: validity })
26+
}
27+
28+
onChangePassword(password) {
29+
this.setState({ password })
30+
}
31+
32+
render() {
33+
return (
34+
<Form style={styles.form}>
35+
<Item inlineLabel regular style={styles.item}>
36+
<Input
37+
placeholder="Email"
38+
style={styles.input}
39+
onChangeText={this.onChangeEmail}
40+
keyboardType="email-address"
41+
autoCapitalize="none"
42+
value={this.state.email}
43+
/>
44+
</Item>
45+
<Item inlineLabel last regular style={styles.item}>
46+
<Input
47+
placeholder="Contraseña"
48+
style={styles.input}
49+
onChangeText={this.onChangePassword}
50+
secureTextEntry
51+
value={this.state.password}
52+
/>
53+
</Item>
54+
<Button
55+
block
56+
borderRadius={10}
57+
style={styles.button}
58+
disabled={!this.state.inputValidity}
59+
onPress={() =>
60+
this.props.onSend(this.state.email, this.state.password)
61+
}
62+
>
63+
<Text>Entrar</Text>
64+
</Button>
65+
</Form>
66+
)
67+
}
68+
}
69+
70+
LoginForm.propTypes = {
71+
onSend: PropTypes.func.isRequired,
72+
}
73+
74+
const styles = StyleSheet.create({
75+
button: {
76+
backgroundColor: '#0000FF',
77+
marginTop: 20,
78+
},
79+
form: {
80+
alignItems: 'center',
81+
height: 250,
82+
margin: 15,
83+
},
84+
input: {
85+
width: Layout.window.width * 0.85,
86+
},
87+
item: {
88+
borderRadius: 10,
89+
marginBottom: 20,
90+
paddingHorizontal: 10,
91+
},
92+
})
93+
94+
export default LoginForm

‎src/components/Authentication/SignupForm.js‎

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
/* eslint-disable react-native/no-inline-styles */
2+
import React, { Component } from 'react'
3+
import { StyleSheet } from 'react-native'
4+
import { Text, Form, Item, Input, Label, Button } from 'native-base'
5+
import Layout from '../../constants/Layout'
6+
import PropTypes from 'prop-types'
7+
import Colors from '../../constants/Colors'
8+
9+
class SignupForm extends Component {
10+
constructor(props) {
11+
super(props)
12+
this.state = {
13+
name: '',
14+
lastname: '',
15+
email: '',
16+
phoneNumber: '',
17+
password: '',
18+
passwordRepeat: '',
19+
validity: {
20+
name: false,
21+
lastname: false,
22+
email: false,
23+
phoneNumber: false,
24+
password: false,
25+
passwordRepeat: false,
26+
},
27+
}
28+
29+
this.onChangeName = this.onChangeName.bind(this)
30+
this.onChangeLastname = this.onChangeLastname.bind(this)
31+
this.onChangeEmail = this.onChangeEmail.bind(this)
32+
this.onChangePhoneNumber = this.onChangePhoneNumber.bind(this)
33+
this.onChangePassword = this.onChangePassword.bind(this)
34+
this.onChangePasswordRepeat = this.onChangePasswordRepeat.bind(this)
35+
36+
this.getValidity = this.getValidity.bind(this)
37+
this.onPress = this.onPress.bind(this)
38+
}
39+
40+
onChangeName(name) {
41+
this.setState(oldState => ({
42+
name,
43+
validity: { ...oldState.validity, name: name.length > 2 },
44+
}))
45+
}
46+
47+
onChangeLastname(lastname) {
48+
this.setState(oldState => ({
49+
lastname,
50+
validity: { ...oldState.validity, lastname: lastname.length > 2 },
51+
}))
52+
}
53+
54+
onChangeEmail(email) {
55+
const validity = email.match(
56+
// eslint-disable-next-line no-useless-escape
57+
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
58+
)
59+
this.setState(oldState => ({
60+
email,
61+
validity: { ...oldState.validity, email: !!validity },
62+
}))
63+
}
64+
65+
onChangePhoneNumber(phoneNumber) {
66+
const validity = phoneNumber.match(/(\+56)?\d{9}/)
67+
this.setState(oldState => ({
68+
phoneNumber,
69+
validity: { ...oldState.validity, phoneNumber: !!validity },
70+
}))
71+
}
72+
73+
onChangePassword(password) {
74+
this.setState(oldState => ({
75+
password,
76+
validity: { ...oldState.validity, password: password.length > 3 },
77+
}))
78+
}
79+
80+
onChangePasswordRepeat(password) {
81+
this.setState(oldState => ({
82+
passwordRepeat: password,
83+
validity: { ...oldState.validity, passwordRepeat: password.length > 3 },
84+
}))
85+
}
86+
87+
getValidity() {
88+
const validity =
89+
this.state.validity.name &&
90+
this.state.validity.lastname &&
91+
this.state.validity.email &&
92+
this.state.validity.phoneNumber &&
93+
this.state.validity.password &&
94+
this.state.validity.passwordRepeat
95+
return validity && this.state.password === this.state.passwordRepeat
96+
}
97+
98+
onPress() {
99+
this.props.onSend({
100+
name: this.state.name,
101+
lastName: this.state.lastname,
102+
email: this.state.email,
103+
phone: this.state.phoneNumber,
104+
password: this.state.password,
105+
passwordRepeat: this.state.passwordRepeat,
106+
})
107+
}
108+
109+
render() {
110+
return (
111+
<Form style={styles.form}>
112+
<Item floatingLabel style={styles.item}>
113+
<Label
114+
style={{
115+
color:
116+
this.state.validity.name || !this.state.name
117+
? Colors.textGray
118+
: 'red',
119+
}}
120+
>
121+
Nombre
122+
</Label>
123+
<Input
124+
style={styles.input}
125+
onChangeText={this.onChangeName}
126+
value={this.state.name}
127+
/>
128+
</Item>
129+
<Item floatingLabel style={styles.item}>
130+
<Label
131+
style={{
132+
color:
133+
this.state.validity.lastname || !this.state.lastname
134+
? Colors.textGray
135+
: 'red',
136+
}}
137+
>
138+
Apellido
139+
</Label>
140+
<Input
141+
style={styles.input}
142+
onChangeText={this.onChangeLastname}
143+
value={this.state.lastname}
144+
/>
145+
</Item>
146+
<Item floatingLabel style={styles.item}>
147+
<Label
148+
style={{
149+
color:
150+
this.state.validity.email || !this.state.email
151+
? Colors.textGray
152+
: 'red',
153+
}}
154+
>
155+
Email
156+
</Label>
157+
<Input
158+
style={styles.input}
159+
onChangeText={this.onChangeEmail}
160+
keyboardType="email-address"
161+
autoCapitalize="none"
162+
value={this.state.email}
163+
/>
164+
</Item>
165+
<Item floatingLabel style={styles.item}>
166+
<Label
167+
style={{
168+
color:
169+
this.state.validity.phoneNumber || !this.state.phoneNumber
170+
? Colors.textGray
171+
: 'red',
172+
}}
173+
>
174+
Número de Teléfono
175+
</Label>
176+
<Input
177+
style={styles.input}
178+
onChangeText={this.onChangePhoneNumber}
179+
keyboardType="phone-pad"
180+
value={this.state.phoneNumber}
181+
/>
182+
</Item>
183+
<Item floatingLabel style={styles.item}>
184+
<Label
185+
style={{
186+
color:
187+
this.state.validity.password || !this.state.password
188+
? Colors.textGray
189+
: 'red',
190+
}}
191+
>
192+
Clave
193+
</Label>
194+
<Input
195+
style={styles.input}
196+
onChangeText={this.onChangePassword}
197+
secureTextEntry
198+
value={this.state.password}
199+
/>
200+
</Item>
201+
<Item floatingLabel last style={styles.item}>
202+
<Label
203+
style={{
204+
color:
205+
this.state.validity.passwordRepeat || !this.state.passwordRepeat
206+
? Colors.textGray
207+
: 'red',
208+
}}
209+
>
210+
Confirma Tu Clave
211+
</Label>
212+
<Input
213+
style={styles.input}
214+
onChangeText={this.onChangePasswordRepeat}
215+
secureTextEntry
216+
value={this.state.passwordRepeat}
217+
/>
218+
</Item>
219+
<Button
220+
block
221+
borderRadius={10}
222+
style={styles.button}
223+
disabled={!this.getValidity()}
224+
onPress={this.onPress}
225+
>
226+
<Text>Siguiente</Text>
227+
</Button>
228+
</Form>
229+
)
230+
}
231+
}
232+
233+
SignupForm.propTypes = {
234+
onSend: PropTypes.func.isRequired,
235+
}
236+
237+
const styles = StyleSheet.create({
238+
button: {
239+
marginTop: 20,
240+
},
241+
form: {
242+
alignItems: 'center',
243+
margin: 15,
244+
},
245+
input: {
246+
width: Layout.window.width * 0.85,
247+
},
248+
item: {
249+
borderRadius: 10,
250+
marginBottom: 20,
251+
paddingHorizontal: 10,
252+
},
253+
})
254+
255+
export default SignupForm

0 commit comments

Comments
 (0)