Browse Source

initial implementation of "forgot password"

master
GabrielTrettel 3 years ago
parent
commit
ce1594cea1
  1. 8
      src/app/navigation/AuthNavigator.js
  2. 23
      src/app/screens/LoginScreen.js
  3. 136
      src/app/screens/PasswordRecoveryScreen.js

8
src/app/navigation/AuthNavigator.js

@ -2,6 +2,7 @@ import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import PasswordRecovery from "../screens/PasswordRecoveryScreen"
import colors from "../config/colors";
import UserAgreement from "../screens/UserAgreement";
@ -24,6 +25,13 @@ const AuthNavigator = () => (
component={UserAgreement}
options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
/>
<Stack.Screen
name="PasswordRecovery"
component={PasswordRecovery}
options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
/>
</Stack.Navigator>
);

23
src/app/screens/LoginScreen.js

@ -155,18 +155,17 @@ export default function LoginScreen(props) {
<SubmitButton title="entrar" backgroundColor={colors.primary} />
{/* FIXME: update this in future versions */}
{/* <TouchableNativeFeedback */}
{/* onPress={() => { */}
{/* props.navigation.navigate("ForgotPassword"); */}
{/* }} */}
{/* > */}
{/* <View flexDirection="row" alignSelf="center"> */}
{/* <Text style={{ color: colors.lightBlue, fontWeight: "bold" }}> */}
{/* Esqueceu a senha? */}
{/* </Text> */}
{/* </View> */}
{/* </TouchableNativeFeedback> */}
<TouchableNativeFeedback
onPress={() => {
props.navigation.navigate("PasswordRecovery");
}}
>
<View flexDirection="row" alignSelf="center">
<Text style={{ color: colors.lightBlue, fontWeight: "bold" }}>
Esqueceu a senha?
</Text>
</View>
</TouchableNativeFeedback>
<DashedOrSeparator />

136
src/app/screens/PasswordRecoveryScreen.js

@ -0,0 +1,136 @@
import React, { useState, useContext } from "react";
import { StyleSheet, View, Text } from "react-native";
import * as Yup from "yup";
import {
Form,
SubmitButton,
FormField,
ErrorMessage,
} from "../components/forms";
import Screen from "../components/Screen";
import colors from "../config/colors";
import { dimensions } from "../config/dimensions";
import assets from "../config/assets";
import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
import SearchablePicker from "../components/SearchablePicker";
function SecQuestionPicker({ name }) {
const [items, setItems] = useState([
{ value: "Qual a sua cor predileta?", label: "Qual a sua cor predileta?" },
{
value: "Qual é seu livro predileto?",
label: "Qual é seu livro predileto?",
},
{
value: "Qual o nome da rua em que você cresceu?",
label: "Qual o nome da rua em que você cresceu?",
},
{
value: "Qual o nome do seu bicho de estimação predileto?",
label: "Qual o nome do seu bicho de estimação predileto?",
},
{
value: "Qual a sua comida predileta?",
label: "Qual a sua comida predileta?",
},
{
value: "Qual é o seu país preferido?",
label: "Qual é o seu país preferido?",
},
{
value: "Qual é a sua marca de carro predileto?",
label: "Qual é a sua marca de carro predileto?",
},
]);
return (
<SearchablePicker
flex={0}
name={name}
items={items}
setItems={setItems}
formPlaceholder={"Selecione a pergunta de segurança"}
searchPlaceholder={"Busca..."}
marginRight={16}
/>
);
}
export default function PasswordRecovery() {
return (
<View>
<Form
initialValues={{
number: "",
answer: "",
secQuestion: "",
}}
>
<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>
<Text style={styles.labelStyle}>Número de telefone*:</Text>
<PhoneNumberFormField
name="number"
maxLength={11}
placeholder="(DDD) XXXXX-XXXX"
/>
</View>
<View style={{ marginTop: 24 }}>
<Text style={styles.labelStyle}>Pergunta*:</Text>
<SecQuestionPicker name="secQuestion" />
</View>
<View style={{ marginTop: 24 }}>
<Text style={styles.labelStyle}>Resposta*:</Text>
<FormField
name="answer"
maxLength={255}
placeholder={"Digite a resposta à pergunta"}
/>
</View>
<SubmitButton
title="próximo"
backgroundColor={colors.primary}
/>
</Form>
</View>
);
}
const styles = StyleSheet.create({
labelStyle: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.secondary,
marginBottom: 14,
paddingHorizontal: 16,
},
textHeader: {
textAlign: "center",
fontWeight: "bold",
fontSize: 22
},
textSubtitle: {
textAlign: "center",
fontSize: dimensions.text.secondary,
marginVertical: 22,
}
});
Loading…
Cancel
Save