initial implementation of "forgot password"

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>
 );
 

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 />
 

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,
+  }
+});