WPD-MobileApp/src/app/screens/RegisterScreen.js

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 assets from "../config/assets";
import * as Yup from "yup";

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);
    } else {
      setSingUpFailed(false);
    }
  };

  return (
    <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" }}>
            <assets.AppLogoTitle
              preserveAspectRatio="xMidYMid meet"
              width={300}
              height={30}
              alignSelf="center"
              marginBottom={dimensions.spacing.big_padding}
            />
          </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 do telefone: </Text>
                <FormField
                  maxLength={12}
                  name="number"
                  numberOfLines={1}
                  placeholder="Número de telefone celular"
                />
              </View>
              <View>
                <Text style={styles.labelStyle}> Senha: </Text>
                <FormField
                  maxLength={12}
                  name="password"
                  numberOfLines={1}
                  placeholder="Senha"
                />
              </View>
              <View>
                <Text style={styles.labelStyle}> Confirmar senha: </Text>
                <FormField
                  maxLength={12}
                  name="confirmPassword"
                  numberOfLines={1}
                  placeholder="Repetir a senha"
                />
              </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>
  );
}

const styles = StyleSheet.create({
  containter: {
    flex: 1,
    justifyContent: "center",
    textAlign: "center",
    padding: 10,
  },
  labelStyle: {
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.lightBlue,
    marginTop: 10,
  },
});