sing up screen

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 (
-    <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>
+                <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: {
     flex: 1,
     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,
   },
 });