Browse Source

Checking password integrity and phone number mask

master
GabrielTrettel 3 years ago
parent
commit
185ff44427
  1. 65
      src/app/components/forms/PhoneNumberFormField.js
  2. 37
      src/app/screens/RegisterScreen.js

65
src/app/components/forms/PhoneNumberFormField.js

@ -0,0 +1,65 @@
import React, { useState, useEffect } from "react";
import { useFormikContext } from "formik";
import TextInput from "../TextInput";
import ErrorMessage from "./ErrorMessage";
import { View, Text, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import colors from "../../config/colors";
import defaultStyles from "../../config/styles";
import { MaskedTextInput } from "react-native-mask-text";
function PhoneNumberFormField({
name,
flex = 0,
maxLength = 0,
placeholder = "",
paddingLeft = 16,
paddingRight = 16,
}) {
const { values, setFieldValue, errors, touched } = useFormikContext();
// console.log(values);
return (
<View flex={flex}>
<View
style={{
paddingLeft: paddingLeft,
paddingRight: paddingRight,
}}
>
<MaskedTextInput
mask="(99) 99999-9999"
placeholder={placeholder}
placeholderTextColor={colors.medium}
onChangeText={(_, rawText) => {
setFieldValue(name, rawText.substr(0, maxLength));
}}
style={styles.container}
keyboardType="numeric"
/>
</View>
<View style={{ paddingRight: paddingRight, paddingLeft: paddingLeft }}>
<ErrorMessage error={errors[name]} visible={touched[name]} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
...defaultStyles.shadow,
...defaultStyles.text,
flexDirection: "row",
alignItems: "center",
backgroundColor: colors.white,
borderRadius: 6,
borderColor: colors.grayBG,
borderWidth: 1,
padding: 5,
paddingLeft: 12,
height: 68,
},
});
export default PhoneNumberFormField;

37
src/app/screens/RegisterScreen.js

@ -39,6 +39,7 @@ import PasswordFormField from "../components/forms/PasswordFormField";
import constants from "../config/constants";
import CheckBox from "../components/forms/CheckBox";
import defaultStyles from "../config/styles";
import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@ -296,16 +297,11 @@ export default function RegisterScreen(props) {
const authContext = useContext(AuthContext);
const _moment = moment();
const [date, setDate] = useState(_moment);
const [singUpFailed, setSingUpFailed] = useState(false);
const [scroll, setScroll] = useState();
const [showLog, setShowLog] = useState({ show: false, message: "" });
const comparePassword = (password, confirmPassword) => {
if (password !== confirmPassword) {
setSingUpFailed(true);
} else {
setSingUpFailed(false);
}
return password !== confirmPassword;
};
const automaticLogin = async (form) => {
@ -399,15 +395,30 @@ export default function RegisterScreen(props) {
consent: false,
}}
onSubmit={(form, actions) => {
comparePassword(form.password, form.confirmPassword);
console.log(form);
const psw_match = comparePassword(
form.password,
form.confirmPassword
);
if (psw_match) {
actions.setFieldError(
"confirmPassword",
"As senhas não correspondem"
);
scroll.scrollTo({ x: 0, y: 0, animated: true });
} else {
fieldsAreNotInUse(form, actions).then((isNotUsed) => {
if (isNotUsed) {
handleSubmit(form);
console.log("abobrinha");
// handleSubmit(form);
} else {
console.log("scrolll");
scroll.scrollTo({ x: 0, y: 0, animated: true });
}
});
}
}}
validationSchema={validationSchema}
>
@ -446,12 +457,12 @@ export default function RegisterScreen(props) {
<Text style={styles.labelStyle}>Número do telefone:*</Text>
<View style={styles.iconField}>
<MaterialCommunityIconsCustom name="phone" />
<FormField
<PhoneNumberFormField
flex={1}
maxLength={12}
name="number"
placeholder="(DD) XXXXX-XXXX"
paddingRight={2}
maxLength={11}
placeholder="(DD) XXXXX-XXXX"
/>
</View>
<Text style={styles.labelStyle}>Senha:*</Text>
@ -476,10 +487,6 @@ export default function RegisterScreen(props) {
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" />

Loading…
Cancel
Save