Merge branch 'main' of https://github.com/IGSD-UoW/WPD-MobileApp into main

src/app/components/forms/PhoneNumberFormField.js

@@ -1,13 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { useFormikContext } from "formik";
 import { unMask, mask } from "react-native-mask-text";
 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";
+import { View } from "react-native";
 
 function PhoneNumberFormField({
   name,
@@ -16,6 +12,7 @@ function PhoneNumberFormField({
   placeholder = "",
   paddingLeft = 16,
   paddingRight = 16,
+  editable = true,
 }) {
   const {
     values,
@@ -37,6 +34,7 @@ function PhoneNumberFormField({
         }}
       >
         <TextInput
+          editable={editable}
           height={48}
           onBlur={() => setFieldTouched(name)}
           onChangeText={(val) => {

src/app/navigation/AccountNavigator.js

@@ -9,6 +9,8 @@ import UpdatePassword from "../screens/UpdatePassword";
 import EditUserData from "../screens/EditUserData";
 import ActivateInstitutionCode from "../screens/ActivateInstitutionCode";
 import ActivateInstitutionShowCode from "../screens/ActivateInstitutionShowCode";
+import PasswordRecovery from "../screens/PasswordRecoveryScreen";
+import PasswordRecoveryChangePswd from "../screens/PasswordRecoveryChangePswdScreen";
 
 const Stack = createStackNavigator();
 
@@ -78,15 +80,20 @@ const AccountNavigator = () => (
       }}
     />
     <Stack.Screen
-      name="UpdatePassword"
-      component={UpdatePassword}
-      options={{
-        title: "",
-        headerStyle: {
-          backgroundColor: "white",
-        },
-      }}
+      name="PasswordRecovery"
+      component={PasswordRecovery}
+      initialParams={{ user : {} }}
+      options={{ headerTitle: "" }}
     />
+
+    <Stack.Screen
+      name="PasswordRecoveryChangePswd"
+      component={PasswordRecoveryChangePswd}
+      initialParams={{ authToken : "" }}
+      options={{ headerTitle: "" }}
+    />
+
+
     <Stack.Screen
       name="EditUserData"
       component={EditUserData}

src/app/navigation/AuthNavigator.js

@@ -19,18 +19,19 @@ const AuthNavigator = () => (
     <Stack.Screen
       name="Register"
       component={RegisterScreen}
-      options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
+      options={{ headerTitle: "" }}
     />
     <Stack.Screen
       name="UserAgreement"
       component={UserAgreement}
-      options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
+      options={{ headerTitle: "" }}
     />
 
     <Stack.Screen
       name="PasswordRecovery"
       component={PasswordRecovery}
-      options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
+      initialParams={{ user : {} }}
+      options={{ headerTitle: "" }}
     />
 
     <Stack.Screen

src/app/screens/AccountScreen.js

@@ -123,6 +123,15 @@ function AccountScreen(props) {
 
 
   const profileItems = [ 
+   {
+      icon: "lock",
+      show: true,
+      IconProvider: MaterialCommunityIcons,
+      title: "alterar senha",
+      onPress: () => {
+        props.navigation.navigate("PasswordRecovery", {user: user});
+      },
+    },
     {
       icon: "account",
       show: user.pluviometer != undefined,
@@ -160,6 +169,7 @@ function AccountScreen(props) {
         setShowLog(true);
       },
     },
+
     {
       icon: "login",
       show: !isRegistered,

src/app/screens/PasswordRecoveryChangePswdScreen.js

@@ -8,6 +8,7 @@ import { dimensions } from "../config/dimensions";
 import PasswordFormField from "../components/forms/PasswordFormField";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { updatePassword } from "../api/auth";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const validationSchema = Yup.object().shape({
   password: Yup.string()
@@ -81,6 +82,7 @@ export default function PasswordRecoveryChangePswd({ navigation, route }) {
         }}
       />
 
+      <KeyboardAwareScrollView>
         <Form
           validationSchema={validationSchema}
           initialValues={{
@@ -129,6 +131,7 @@ export default function PasswordRecoveryChangePswd({ navigation, route }) {
 
           <SubmitButton title="confirmar" backgroundColor={colors.primary} />
         </Form>
+      </KeyboardAwareScrollView>
     </View>
   );
 }

src/app/screens/PasswordRecoveryScreen.js

@@ -8,7 +8,8 @@ import { dimensions } from "../config/dimensions";
 import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
 import SearchablePicker from "../components/SearchablePicker";
 import ConfirmationModal from "../components/ConfirmationModal";
-import {loginByUsernamAnswers} from "../api/auth";
+import { loginByUsernamAnswers, existUsername } from "../api/auth";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 function SecQuestionPicker({ name }) {
   const [items, setItems] = useState([
@@ -65,30 +66,52 @@ const validationSchema = Yup.object().shape({
     .max(255),
 });
 
-export default function PasswordRecovery({ navigation }) {
+export default function PasswordRecovery({ navigation, route }) {
+  const user = route.params.user;
+
+  const [showLoading, setShowLoading] = useState(false);
   const [confirmatioModalData, setConfirmatioModalData] = useState({
     show: false,
     message: "",
   });
 
   const handleSubmit = async (number, answer, secQuestion) => {
+    setShowLoading(true);
+    setTimeout(() => {
+      showLoading &&
         setConfirmatioModalData({
           message: "Validando informações",
           show: true,
         });
-    const apiResponse = await loginByUsernamAnswers(number, secQuestion, answer); 
+    }, 2000);
+
+    const userExists = await existUsername(number);
+    if (userExists.data == null) {
+      setConfirmatioModalData({
+        message: "Número de telefone inválido",
+        show: true,
+      });
+      setShowLoading(false);
+      return;
+    }
+
+    const apiResponse = await loginByUsernamAnswers(
+      number,
+      secQuestion,
+      answer
+    );
+    setShowLoading(false);
 
     switch (apiResponse.status) {
       case 200:
-        console.log("ir pra proxima tela....");
         navigation.navigate("PasswordRecoveryChangePswd", {
           authToken: apiResponse.data,
-          username: number
+          username: number,
         });
         break;
       case 404:
         setConfirmatioModalData({
-          message: "Número de telefone inválido",
+          message: "Pergunta de segurança ou senha incorretos",
           show: true,
         });
         break;
@@ -118,15 +141,15 @@ export default function PasswordRecovery({ navigation }) {
         }
       />
 
+      <KeyboardAwareScrollView>
         <Form
           validationSchema={validationSchema}
           initialValues={{
-          number: "",
+            number: user.username || "",
             answer: "",
             secQuestion: "",
           }}
-        onSubmit={({number, answer, secQuestion}) => {
-          
+          onSubmit={({ number, answer, secQuestion }) => {
             handleSubmit(number, answer, secQuestion);
           }}
         >
@@ -143,7 +166,8 @@ export default function PasswordRecovery({ navigation }) {
             <PhoneNumberFormField
               name="number"
               maxLength={11}
-            placeholder="(DDD) XXXXX-XXXX"
+              placeholder={"(DDD) XXXXX-XXXX"}
+              editable={user.username == null}
             />
           </View>
 
@@ -163,6 +187,7 @@ export default function PasswordRecovery({ navigation }) {
 
           <SubmitButton title="próximo" backgroundColor={colors.primary} />
         </Form>
+      </KeyboardAwareScrollView>
     </View>
   );
 }

src/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@expo/metro-config": "^0.2.8",
-    "@react-native-async-storage/async-storage": "^1.17.2",
+    "@react-native-async-storage/async-storagde94d72999594291828f1714c9346e8db5e2ac74e": "^1.17.2",
     "@react-native-community/checkbox": "^0.5.9",
     "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/masked-view": "^0.1.11",