Browse Source

Confirmation modal for username/nickname in register screen

master
GabrielTrettel 3 years ago
parent
commit
c86fac66b7
  1. 12
      src/app/components/ConfirmationModal.js
  2. 85
      src/app/screens/RegisterScreen.js

12
src/app/components/ConfirmationModal.js

@ -2,7 +2,7 @@ import React from "react";
import { Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import { Ionicons } from "@expo/vector-icons";
import { Ionicons, FontAwesome5 } from "@expo/vector-icons";
function Btn({ label, onPress, bgColor, txtColor, style={} }) {
return (
@ -30,6 +30,7 @@ export default function ConfirmationModal({
title = null,
description = "",
icon = null,
isNicknameConfirmation= false,
}) {
return (
<Modal
@ -56,12 +57,17 @@ export default function ConfirmationModal({
</Text>
</View>
)}
<View style={{ flexDirection: "row", alignItems: "center" }}>
{icon && (
<View style={{ flexDirection: "row", alignItems: "center", width: "95%" }}>
{icon && !isNicknameConfirmation && (
<View style={{ marginRight: 12 }}>
<Ionicons name={icon} size={30} color={colors.primary} />
</View>
)}
{icon && isNicknameConfirmation && (
<View style={{ marginRight: 12, justifyContent: "flex-start", alignSelf: "flex-start" }}>
<FontAwesome5 name={icon} size={20} color={colors.primary} />
</View>
)}
<Text style={styles.text}>{description}</Text>
</View>
<View

85
src/app/screens/RegisterScreen.js

@ -2,7 +2,6 @@ import {
Form,
SubmitButton,
FormField,
ErrorMessage,
} from "../components/forms";
import React, { useState, useEffect, useContext } from "react";
import {
@ -16,11 +15,9 @@ 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 institutions from "../assets/institutions";
@ -40,6 +37,7 @@ import constants from "../config/constants";
import CheckBox from "../components/forms/CheckBox";
import defaultStyles from "../config/styles";
import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
import { unMask, mask } from "react-native-mask-text";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@ -300,6 +298,11 @@ export default function RegisterScreen(props) {
const [date, setDate] = useState(_moment);
const [scroll, setScroll] = useState();
const [showLog, setShowLog] = useState({ show: false, message: "" });
const [showModal, setShowModal] = useState({
show: false,
message: "",
form: null,
});
const comparePassword = (password, confirmPassword) => {
return password !== confirmPassword;
@ -321,7 +324,6 @@ export default function RegisterScreen(props) {
date.format("DD/MM/yyyy") === moment().format("DD/MM/yyyy") ? "" : date;
const result = await signup({ ...form, dateofborn: formDate });
// console.log(JSON.stringify(result))
switch (result.status) {
case 200:
@ -371,6 +373,35 @@ export default function RegisterScreen(props) {
return !inUse;
};
const copnfirmations = (form, actions) => {
console.log(form);
var current_mask =
form.number.length >= 11 ? "(99) 99999-9999" : "(99) 9999-9999";
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) {
setShowModal({
show: true,
form: form,
message:
'Você está cadastrando o apelido "' +
form.name +
'" e o número ' + mask(form.number, current_mask) +
'. Deseja continuar o cadastro?',
});
} else {
console.log("scrolll");
scroll.scrollTo({ x: 0, y: 0, animated: true });
}
});
}
};
return (
<Screen style={styles.containter}>
<ConfirmationModal
@ -379,6 +410,21 @@ export default function RegisterScreen(props) {
confirmationLabel="OK"
onConfirm={() => setShowLog({ ...showLog, show: false })}
/>
<ConfirmationModal
show={showModal.show}
description={showModal.message}
isNicknameConfirmation={true}
icon="user-check"
confirmationLabel="SIM"
declineLabel="NÃO"
onConfirm={() => {
handleSubmit(showModal.form);
}}
onDecline={() => {
setShowModal({ ...showModal, show: false, message: "" });
}}
/>
<Form
initialValues={{
name: "",
@ -396,28 +442,7 @@ export default function RegisterScreen(props) {
consent: false,
}}
onSubmit={(form, actions) => {
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);
} else {
console.log("scrolll");
scroll.scrollTo({ x: 0, y: 0, animated: true });
}
});
}
copnfirmations(form, actions);
}}
validationSchema={validationSchema}
>
@ -527,11 +552,13 @@ export default function RegisterScreen(props) {
</View>
<Text style={styles.labelStyle}>Nome da instituição</Text>
<View style={{ flexDirection: "column", flex: 1 }}>
<View style={{...styles.iconField, marginBottom:12}}>
<View style={{ ...styles.iconField, marginBottom: 12 }}>
<MaterialCommunityIconsCustom name="bank" />
<InstitutionNamePicker name="institutionName" />
</View>
<Text style={styles.warningText}>O nome da instituição é fornecido pelo Cemaden Educação</Text>
<Text style={styles.warningText}>
O nome da instituição é fornecido pelo Cemaden Educação
</Text>
</View>
<Text style={styles.labelStyle}>Vínculo institucional:</Text>
<View style={[styles.iconField]}>
@ -633,4 +660,4 @@ const styles = StyleSheet.create({
textAlign: "left",
marginBottom: 24,
},
});
});
Loading…
Cancel
Save