You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
443 lines
14 KiB
443 lines
14 KiB
import {
|
|
Form,
|
|
SubmitButton,
|
|
FormField,
|
|
ErrorMessage,
|
|
} from "../components/forms";
|
|
import React, { useState, useEffect } from "react";
|
|
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
|
|
import Screen from "../components/Screen";
|
|
import { dimensions } from "../config/dimensions";
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import colors from "../config/colors";
|
|
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
|
|
import * as Yup from "yup";
|
|
import FormDatePicker from "../components/forms/FormDatePicker";
|
|
import moment from "moment";
|
|
import { Shadow } from "react-native-shadow-2";
|
|
import SearchablePicker from "../components/SearchablePicker";
|
|
import { states, statesToCities } from "../assets/cities_states";
|
|
import { useFormikContext } from "formik";
|
|
import Checkbox from "../components/forms/CheckBox";
|
|
import { TouchableOpacity } from "react-native-gesture-handler";
|
|
|
|
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ório")
|
|
.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"),
|
|
state: Yup.string().required("O estado é obrigatório"),
|
|
city: Yup.string().required("A cidade é obrigatória"),
|
|
institutionName: Yup.string(),
|
|
secQuestion: Yup.string().required("Escolha a pergunta de segurança"),
|
|
secQuestionAns: Yup.string()
|
|
.required("A resposta da pergunta de segurança é obrigatória")
|
|
.max(255),
|
|
consent: Yup.bool().equals([true], "Este campo é obrigatório"),
|
|
});
|
|
|
|
function LocalDatePicker({ date, setDate, _moment }) {
|
|
const formatDate = () => date.format("DD/MM/YYYY");
|
|
|
|
return (
|
|
<View flex={1}>
|
|
<FormDatePicker
|
|
onDateChange={(value) => setDate(value)}
|
|
minimumDate={new Date(moment().subtract(110, "year"))}
|
|
date={date}
|
|
>
|
|
<View style={[styles.dateInput, { flex: 1, paddingRight: 2 }]}>
|
|
<Shadow
|
|
offset={[0, 3]}
|
|
distance={3}
|
|
radius={4}
|
|
startColor="rgba(0, 0, 0, 0.15)"
|
|
paintInside={true}
|
|
viewStyle={{ width: "100%", height: 48 }}
|
|
>
|
|
<View
|
|
style={{
|
|
paddingLeft: 12,
|
|
backgroundColor: colors.white,
|
|
height: 48,
|
|
borderColor: colors.grayBG,
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: colors.medium,
|
|
fontSize: 18,
|
|
}}
|
|
>
|
|
{date != _moment
|
|
? formatDate()
|
|
: "Selecione a data de nascimento"}
|
|
</Text>
|
|
</View>
|
|
</Shadow>
|
|
</View>
|
|
</FormDatePicker>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function GenderPicker({ name }) {
|
|
const [items, setItems] = useState([
|
|
{ value: "Feminino", label: "Feminino" },
|
|
{ value: "Masculino", label: "Masculino" },
|
|
{ value: "Prefiro não dizer", label: "Prefiro não dizer" },
|
|
]);
|
|
return (
|
|
<SearchablePicker
|
|
name={name}
|
|
items={items}
|
|
setItems={setItems}
|
|
formPlaceholder={"Selecione o seu gênero"}
|
|
searchPlaceholder={"Busca..."}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function InstitutionPicker({ name }) {
|
|
const [items, setItems] = useState([
|
|
{ value: "Escola", label: "Escola" },
|
|
{ value: "Defesa civil", label: "Defesa civil" },
|
|
{ value: "Não governamental", label: "Não governamental" },
|
|
{ value: "Outra", label: "Outra" },
|
|
{ value: "Nenhuma", label: "Nenhuma" },
|
|
]);
|
|
return (
|
|
<SearchablePicker
|
|
name={name}
|
|
items={items}
|
|
setItems={setItems}
|
|
formPlaceholder={"Selecione o tipo da instituição"}
|
|
searchPlaceholder={"Busca..."}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function StatePicker({ name }) {
|
|
const [items, setItems] = useState(states);
|
|
return (
|
|
<SearchablePicker
|
|
name={name}
|
|
items={items}
|
|
setItems={setItems}
|
|
formPlaceholder={"Selecione o seu estado"}
|
|
searchPlaceholder={"Busca..."}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function CityPicker({ name }) {
|
|
const { values } = useFormikContext();
|
|
const state = values["state"];
|
|
|
|
useEffect(() => {
|
|
state && setItems(statesToCities[state].cities);
|
|
}, [state]);
|
|
|
|
const [items, setItems] = useState([]);
|
|
|
|
return (
|
|
<SearchablePicker
|
|
name={name}
|
|
items={items}
|
|
setItems={setItems}
|
|
formPlaceholder={"Selecione a sua cidade"}
|
|
nothingToShow={
|
|
state
|
|
? "Não encontramos nada com esse termo"
|
|
: "Selecione o Estado primeiro"
|
|
}
|
|
searchPlaceholder={"Busca..."}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SecQuestionPicker({ name }) {
|
|
const [items, setItems] = useState([
|
|
{ value: "a", label: "Qual a sua cor predileta?" },
|
|
{ value: "s", label: "Qual é seu livro predileto?" },
|
|
{ value: "d", label: "Qual o nome da rua em que você cresceu?" },
|
|
{ value: "f", label: "Qual o nome do seu bicho de estimação predileto?" },
|
|
{ value: "g", label: "Qual a sua comida predileta?" },
|
|
{ value: "j", label: "Qual é o seu país preferido?" },
|
|
{ value: "k", label: "Qual é a sua marca de carro predileto?" },
|
|
]);
|
|
|
|
return (
|
|
<SearchablePicker
|
|
name={name}
|
|
items={items}
|
|
setItems={setItems}
|
|
formPlaceholder={"Selecione a pergunta de segurança"}
|
|
searchPlaceholder={"Busca..."}
|
|
marginLeft={2}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function MaterialCommunityIconsCustom({
|
|
name,
|
|
color = colors.primary,
|
|
size = 25,
|
|
}) {
|
|
return (
|
|
<View justifyContent={"center"} height={48}>
|
|
<MaterialCommunityIcons name={name} size={size} color={color} />
|
|
</View>
|
|
);
|
|
}
|
|
export default function RegisterScreen(props) {
|
|
const _moment = moment();
|
|
const [date, setDate] = useState(_moment);
|
|
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: "",
|
|
gender: "",
|
|
institutionName: "",
|
|
gender: "",
|
|
state: "",
|
|
city: "",
|
|
institution: "",
|
|
secQuestion: "",
|
|
secQuestionAns: "",
|
|
consent: false,
|
|
}}
|
|
onSubmit={(form) => {
|
|
comparePassword(form.password, form.confirmPassword);
|
|
console.log("cadastro ainda não implementado");
|
|
console.log("Forms values: \n" + JSON.stringify(form));
|
|
}}
|
|
validationSchema={validationSchema}
|
|
>
|
|
<View
|
|
style={{ flexDirection: "column", justifyContent: "center", flex: 1 }}
|
|
>
|
|
<KeyboardAwareScrollView scrollEnabled={true}>
|
|
<Text
|
|
style={{
|
|
color: colors.primary,
|
|
fontSize: 20,
|
|
fontWeight: "bold",
|
|
alignSelf: "center",
|
|
marginVertical: 24,
|
|
}}
|
|
>
|
|
Cadastro do usuário
|
|
</Text>
|
|
<Text style={styles.labelStyle}>Apelido de usuário*</Text>
|
|
<View style={styles.iconField}>
|
|
<MaterialCommunityIconsCustom name="account" />
|
|
<FormField
|
|
paddingRight={2}
|
|
flex={1}
|
|
maxLength={12}
|
|
name="name"
|
|
numberOfLines={2}
|
|
placeholder="Digite o apelido de usuário"
|
|
/>
|
|
</View>
|
|
<Text style={styles.labelStyle}>Número do telefone:*</Text>
|
|
<View style={styles.iconField}>
|
|
<MaterialCommunityIconsCustom name="phone" />
|
|
<FormField
|
|
flex={1}
|
|
maxLength={12}
|
|
name="number"
|
|
numberOfLines={2}
|
|
placeholder="Digite o número de telefone celular"
|
|
paddingRight={2}
|
|
/>
|
|
</View>
|
|
<Text style={styles.labelStyle}>Senha:*</Text>
|
|
<View style={styles.iconField}>
|
|
<MaterialCommunityIconsCustom name="lock" />
|
|
<FormField
|
|
flex={1}
|
|
maxLength={12}
|
|
name="password"
|
|
secureTextEntry={true}
|
|
numberOfLines={2}
|
|
placeholder="Digite a senha"
|
|
paddingRight={2}
|
|
/>
|
|
</View>
|
|
<Text style={styles.labelStyle}>Confirmar senha:*</Text>
|
|
<View style={styles.iconField}>
|
|
<MaterialCommunityIconsCustom name="lock" />
|
|
<FormField
|
|
flex={1}
|
|
maxLength={12}
|
|
name="confirmPassword"
|
|
secureTextEntry={true}
|
|
numberOfLines={2}
|
|
placeholder="Repita a senha"
|
|
paddingRight={2}
|
|
/>
|
|
</View>
|
|
<ErrorMessage
|
|
error="As senhas não correspondem"
|
|
visible={singUpFailed}
|
|
/>
|
|
<Text style={styles.labelStyle}>Data de nascimento:</Text>
|
|
<View style={styles.iconField}>
|
|
<MaterialCommunityIconsCustom name="calendar-today" />
|
|
<LocalDatePicker
|
|
date={date}
|
|
setDate={setDate}
|
|
_moment={_moment}
|
|
/>
|
|
</View>
|
|
<Text style={styles.labelStyle}>Gênero:</Text>
|
|
<View style={[styles.iconField]}>
|
|
<MaterialCommunityIconsCustom name="account" />
|
|
<GenderPicker name="gender" />
|
|
</View>
|
|
|
|
<Text style={styles.labelStyle}>Estado*:</Text>
|
|
<View style={[styles.iconField]}>
|
|
<MaterialCommunityIconsCustom name="map-marker" />
|
|
<StatePicker name="state" />
|
|
</View>
|
|
|
|
<Text style={styles.labelStyle}>Cidade*:</Text>
|
|
<View style={[styles.iconField]}>
|
|
<MaterialCommunityIconsCustom name="map-marker" />
|
|
<CityPicker name={"city"} />
|
|
</View>
|
|
|
|
<Text style={styles.labelStyle}>Tipo de instituição:</Text>
|
|
<View style={[styles.iconField]}>
|
|
<MaterialCommunityIconsCustom name="bank" />
|
|
<InstitutionPicker name="institution" />
|
|
</View>
|
|
|
|
<Text style={styles.labelStyle}>Nome da instituição</Text>
|
|
<View style={styles.iconField}>
|
|
<MaterialCommunityIconsCustom name="bank" />
|
|
<FormField
|
|
flex={1}
|
|
maxLength={12}
|
|
name="institutionName"
|
|
numberOfLines={2}
|
|
placeholder="Digite o nome da instituição"
|
|
paddingRight={2}
|
|
/>
|
|
</View>
|
|
<Text style={styles.labelStyle}>Pergunta de segurança*:</Text>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
marginTop: 12,
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
<SecQuestionPicker name="secQuestion" />
|
|
</View>
|
|
<Text style={styles.labelStyle}>Resposta*:</Text>
|
|
<View style={styles.iconField}>
|
|
<FormField
|
|
flex={1}
|
|
maxLength={255}
|
|
name="secQuestionAns"
|
|
numberOfLines={2}
|
|
placeholder="Degite a resposta à pergunta"
|
|
paddingRight={2}
|
|
paddingLeft={2}
|
|
/>
|
|
</View>
|
|
|
|
<Text style={styles.labelStyle}>Termos de uso*</Text>
|
|
<View flexDirection="column" alignItems={"flex-start"} marginBottom={24} marginTop={12}>
|
|
<Checkbox name={"consent"} navigate={() => props.navigation.navigate("UserAgreement")}/>
|
|
</View>
|
|
|
|
<SubmitButton
|
|
flex={1}
|
|
title="cadastrar"
|
|
backgroundColor={colors.primary}
|
|
/>
|
|
<TouchableNativeFeedback
|
|
onPress={() => {
|
|
props.navigation.goBack();
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignSelf: "center",
|
|
paddingBottom: 34,
|
|
marginTop: 6,
|
|
}}
|
|
>
|
|
<Text>Já tem uma conta? </Text>
|
|
<Text style={{ color: colors.lightBlue }}>Faça Login</Text>
|
|
</View>
|
|
</TouchableNativeFeedback>
|
|
</KeyboardAwareScrollView>
|
|
</View>
|
|
</Form>
|
|
</Screen>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
containter: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
textAlign: "center",
|
|
paddingHorizontal: 10,
|
|
},
|
|
labelStyle: {
|
|
fontSize: dimensions.text.secondary,
|
|
fontWeight: "bold",
|
|
textAlign: "left",
|
|
color: colors.secondary,
|
|
},
|
|
iconField: {
|
|
width: "100%",
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
marginTop: 12,
|
|
marginBottom: 24,
|
|
},
|
|
dateInput: {
|
|
paddingLeft: 16,
|
|
},
|
|
});
|