|
@ -1,13 +1,131 @@ |
|
|
import React from "react"; |
|
|
|
|
|
import { StyleSheet, View, Text } from "react-native"; |
|
|
|
|
|
|
|
|
import { |
|
|
|
|
|
Form, |
|
|
|
|
|
SubmitButton, |
|
|
|
|
|
FormField, |
|
|
|
|
|
ErrorMessage, |
|
|
|
|
|
} from "../components/forms"; |
|
|
|
|
|
import React, { useState } from "react"; |
|
|
|
|
|
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native"; |
|
|
|
|
|
import Screen from "../components/Screen"; |
|
|
|
|
|
import { dimensions } from "../config/dimensions"; |
|
|
|
|
|
import colors from "../config/colors"; |
|
|
|
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; |
|
|
|
|
|
import * as Yup from "yup"; |
|
|
|
|
|
|
|
|
export default function RegisterScreen() { |
|
|
|
|
|
// TODO: Implement this screen as needed
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const phoneRegex = RegExp( |
|
|
|
|
|
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/ |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const validationSchema = Yup.object().shape({ |
|
|
|
|
|
name: Yup.string() |
|
|
|
|
|
.required("O nome é obrigatória") |
|
|
|
|
|
.matches(/[a-zA-Z]/, "O nome e só pode conter letras"), |
|
|
|
|
|
number: Yup.string() |
|
|
|
|
|
.matches(phoneRegex, "Número inválido") |
|
|
|
|
|
.required("O número de telefone é obrigatório"), |
|
|
|
|
|
password: Yup.string() |
|
|
|
|
|
.required("A senha é obrigatória") |
|
|
|
|
|
.min(8, "Senha muito curta, minimo 8 caracteres") |
|
|
|
|
|
.matches(/[a-zA-Z]/, "A senha só pode conter letras"), |
|
|
|
|
|
confirmPassword: Yup.string() |
|
|
|
|
|
.required("A senha é obrigatória") |
|
|
|
|
|
.min(8, "Senha muito curta, minimo 8 caracteres") |
|
|
|
|
|
.matches(/[a-zA-Z]/, "A senha só pode conter letras"), |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function RegisterScreen(props) { |
|
|
|
|
|
const [singUpFailed, setSingUpFailed] = useState(false); |
|
|
|
|
|
|
|
|
|
|
|
const comparePassword = (password, confirmPassword) => { |
|
|
|
|
|
if(password !== confirmPassword){ |
|
|
|
|
|
setSingUpFailed(true); |
|
|
|
|
|
console.log("Senhas Diferentes") |
|
|
|
|
|
} |
|
|
|
|
|
else{ |
|
|
|
|
|
setSingUpFailed(false); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<View style={styles.containter}> |
|
|
|
|
|
<Text>Registro</Text> |
|
|
|
|
|
|
|
|
<Screen style={styles.containter}> |
|
|
|
|
|
<Form |
|
|
|
|
|
initialValues={{ |
|
|
|
|
|
name: "", |
|
|
|
|
|
number: "", |
|
|
|
|
|
password: "", |
|
|
|
|
|
confirmPassword: "", |
|
|
|
|
|
}} |
|
|
|
|
|
onSubmit={({name, number, password, confirmPassword}) => { |
|
|
|
|
|
comparePassword(password, confirmPassword); |
|
|
|
|
|
console.log("cadastro ainda não implementado") |
|
|
|
|
|
}} |
|
|
|
|
|
validationSchema={validationSchema} |
|
|
|
|
|
> |
|
|
|
|
|
<View style={{ flex: 1, flexDirection: "column", justifyContent: "center" }}> |
|
|
|
|
|
<View style={{ flex: 1, justifyContent: "flex-end" }}> |
|
|
|
|
|
<Text style={styles.title}>Pega Chuva</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View style={{ flex: 6 }}> |
|
|
|
|
|
<KeyboardAwareScrollView |
|
|
|
|
|
scrollEnabled={true}> |
|
|
|
|
|
<View> |
|
|
|
|
|
<Text style={styles.labelStyle}> Nome Completo: </Text> |
|
|
|
|
|
<FormField |
|
|
|
|
|
maxLength={12} |
|
|
|
|
|
name="name" |
|
|
|
|
|
numberOfLines={1} |
|
|
|
|
|
placeholder="Nome Completo" |
|
|
|
|
|
/> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View> |
|
|
|
|
|
<Text style={styles.labelStyle}> Número de telefone: </Text> |
|
|
|
|
|
<FormField |
|
|
|
|
|
maxLength={12} |
|
|
|
|
|
name="number" |
|
|
|
|
|
numberOfLines={1} |
|
|
|
|
|
placeholder="Nome Completo" |
|
|
|
|
|
/> |
|
|
</View> |
|
|
</View> |
|
|
|
|
|
<View> |
|
|
|
|
|
<Text style={styles.labelStyle}> Senha: </Text> |
|
|
|
|
|
<FormField |
|
|
|
|
|
maxLength={12} |
|
|
|
|
|
name="password" |
|
|
|
|
|
numberOfLines={1} |
|
|
|
|
|
placeholder="Nome Completo" |
|
|
|
|
|
/> |
|
|
|
|
|
</View> |
|
|
|
|
|
<View> |
|
|
|
|
|
<Text style={styles.labelStyle}> Confirmar senha: </Text> |
|
|
|
|
|
<FormField |
|
|
|
|
|
maxLength={12} |
|
|
|
|
|
name="confirmPassword" |
|
|
|
|
|
numberOfLines={1} |
|
|
|
|
|
placeholder="Nome Completo" |
|
|
|
|
|
/> |
|
|
|
|
|
</View> |
|
|
|
|
|
<ErrorMessage error="As senhas não correspondem" visible={singUpFailed} /> |
|
|
|
|
|
|
|
|
|
|
|
<SubmitButton title="cadastrar" backgroundColor={colors.primary} marginTop={10} /> |
|
|
|
|
|
|
|
|
|
|
|
<TouchableNativeFeedback |
|
|
|
|
|
onPress={() => { |
|
|
|
|
|
props.navigation.goBack(); |
|
|
|
|
|
}} |
|
|
|
|
|
> |
|
|
|
|
|
<View style={{ flexDirection: "row", alignSelf: "center" }}> |
|
|
|
|
|
<Text>Já tem uma conta? </Text> |
|
|
|
|
|
<Text style={{ color: colors.lightBlue }}>Faça Login</Text> |
|
|
|
|
|
</View> |
|
|
|
|
|
</TouchableNativeFeedback> |
|
|
|
|
|
</KeyboardAwareScrollView> |
|
|
|
|
|
</View> |
|
|
|
|
|
</View> |
|
|
|
|
|
</Form> |
|
|
|
|
|
</Screen > |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -15,6 +133,19 @@ const styles = StyleSheet.create({ |
|
|
containter: { |
|
|
containter: { |
|
|
flex: 1, |
|
|
flex: 1, |
|
|
justifyContent: "center", |
|
|
justifyContent: "center", |
|
|
alignItems: "center", |
|
|
|
|
|
|
|
|
textAlign: "center", |
|
|
|
|
|
padding: 10, |
|
|
|
|
|
}, |
|
|
|
|
|
title: { |
|
|
|
|
|
fontSize: dimensions.text.header, |
|
|
|
|
|
marginBottom: dimensions.spacing.big_padding, |
|
|
|
|
|
textAlign: "center", |
|
|
|
|
|
}, |
|
|
|
|
|
labelStyle: { |
|
|
|
|
|
fontSize: dimensions.text.secondary, |
|
|
|
|
|
fontWeight: "bold", |
|
|
|
|
|
textAlign: "left", |
|
|
|
|
|
color: colors.lightBlue, |
|
|
|
|
|
marginTop: 10, |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |