Browse Source

Initial error handling in password recovery

master
GabrielTrettel 3 years ago
parent
commit
49af0f08da
  1. 72
      src/app/screens/PasswordRecoveryScreen.js

72
src/app/screens/PasswordRecoveryScreen.js

@ -14,8 +14,7 @@ import { dimensions } from "../config/dimensions";
import assets from "../config/assets"; import assets from "../config/assets";
import PhoneNumberFormField from "../components/forms/PhoneNumberFormField"; import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
import SearchablePicker from "../components/SearchablePicker"; import SearchablePicker from "../components/SearchablePicker";
import ConfirmationModal from "../components/ConfirmationModal";
function SecQuestionPicker({ name }) { function SecQuestionPicker({ name }) {
const [items, setItems] = useState([ const [items, setItems] = useState([
@ -72,9 +71,23 @@ const validationSchema = Yup.object().shape({
.max(255), .max(255),
}); });
export default function PasswordRecovery({navigation}) {
export default function PasswordRecovery({ navigation }) {
const [confirmatioModalData, setConfirmatioModalData] = useState({
show: false,
message: "",
});
return ( return (
<View> <View>
<ConfirmationModal
show={confirmatioModalData.show}
description={confirmatioModalData.message}
confirmationLabel="OK"
onConfirm={() =>
setConfirmatioModalData({ ...confirmatioModalData, show: false })
}
/>
<Form <Form
validationSchema={validationSchema} validationSchema={validationSchema}
initialValues={{ initialValues={{
@ -83,14 +96,41 @@ export default function PasswordRecovery({navigation}) {
secQuestion: "", secQuestion: "",
}} }}
onSubmit={() => { onSubmit={() => {
navigation.navigate("PasswordRecoveryChangePswd")
// FIXME: This should be replaced by the proper api call in future
const apiReturnTest = 200;
switch (apiReturnTest) {
case 200:
console.log("ir pra proxima tela....");
navigation.navigate("PasswordRecoveryChangePswd")
break;
case 404:
setConfirmatioModalData({
message: "Número de telefone inválido",
show: true,
});
break;
case 422:
setConfirmatioModalData({
message: "Pergunta de segurança ou senha incorretos",
show: true,
});
break;
default:
setConfirmatioModalData({
message: "Algo deu errado, tente novamente mais tarde",
show: true,
});
break;
}
}} }}
> >
<View style={{padding:16}}>
<Text style={styles.textHeader}>Recuperação de senha</Text>
<Text style={styles.textSubtitle}>Responda à pergunta de segurança, isso ajuda a mostrar que
essa conta realmente pertence a você</Text>
<View style={{ padding: 16 }}>
<Text style={styles.textHeader}>Recuperação de senha</Text>
<Text style={styles.textSubtitle}>
Responda à pergunta de segurança, isso ajuda a mostrar que essa
conta realmente pertence a você
</Text>
</View> </View>
<View> <View>
@ -102,14 +142,11 @@ export default function PasswordRecovery({navigation}) {
/> />
</View> </View>
<View style={{ marginTop: 24 }}> <View style={{ marginTop: 24 }}>
<Text style={styles.labelStyle}>Pergunta*:</Text> <Text style={styles.labelStyle}>Pergunta*:</Text>
<SecQuestionPicker name="secQuestion" /> <SecQuestionPicker name="secQuestion" />
</View> </View>
<View style={{ marginVertical: 24 }}> <View style={{ marginVertical: 24 }}>
<Text style={styles.labelStyle}>Resposta*:</Text> <Text style={styles.labelStyle}>Resposta*:</Text>
<FormField <FormField
@ -119,12 +156,7 @@ export default function PasswordRecovery({navigation}) {
/> />
</View> </View>
<SubmitButton
title="próximo"
backgroundColor={colors.primary}
/>
<SubmitButton title="próximo" backgroundColor={colors.primary} />
</Form> </Form>
</View> </View>
); );
@ -142,11 +174,11 @@ const styles = StyleSheet.create({
textHeader: { textHeader: {
textAlign: "center", textAlign: "center",
fontWeight: "bold", fontWeight: "bold",
fontSize: 22
fontSize: 22,
}, },
textSubtitle: { textSubtitle: {
textAlign: "center", textAlign: "center",
fontSize: dimensions.text.secondary, fontSize: dimensions.text.secondary,
marginVertical: 22, marginVertical: 22,
}
},
}); });
Loading…
Cancel
Save