Browse Source

sing up screen

master
analuizaff 4 years ago
parent
commit
82948be786
  1. 145
      src/app/screens/RegisterScreen.js
  2. 20847
      src/package-lock.json

145
src/app/screens/RegisterScreen.js

@ -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> 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,
}, },
}); });

20847
src/package-lock.json
File diff suppressed because it is too large
View File

Loading…
Cancel
Save