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

@@ -122,7 +122,16 @@ function AccountScreen(props) {
   }
 
 
-  const profileItems = [
+  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,54 +82,56 @@ export default function PasswordRecoveryChangePswd({ navigation, route }) {
         }}
       />
 
-      <Form
-        validationSchema={validationSchema}
-        initialValues={{
-          password: "",
-          confirmPassword: "",
-        }}
-        onSubmit={(form, actions) => {
-          const psw_not_match = comparePassword(
-            form.password,
-            form.confirmPassword
-          );
-          if (psw_not_match) {
-            actions.setFieldError(
-              "confirmPassword",
-              "As senhas não correspondem"
+      <KeyboardAwareScrollView>
+        <Form
+          validationSchema={validationSchema}
+          initialValues={{
+            password: "",
+            confirmPassword: "",
+          }}
+          onSubmit={(form, actions) => {
+            const psw_not_match = comparePassword(
+              form.password,
+              form.confirmPassword
             );
-          } else {
-            handleSubmit(form.password);
-          }
-        }}
-      >
-        <View style={{ padding: 16 }}>
-          <Text style={styles.textHeader}>Redefinir sua senha</Text>
-          <Text style={styles.textSubtitle}>
-            Digite uma nova senha nos campos abaixo para redefini-la
-          </Text>
-        </View>
+            if (psw_not_match) {
+              actions.setFieldError(
+                "confirmPassword",
+                "As senhas não correspondem"
+              );
+            } else {
+              handleSubmit(form.password);
+            }
+          }}
+        >
+          <View style={{ padding: 16 }}>
+            <Text style={styles.textHeader}>Redefinir sua senha</Text>
+            <Text style={styles.textSubtitle}>
+              Digite uma nova senha nos campos abaixo para redefini-la
+            </Text>
+          </View>
 
-        <View>
-          <Text style={styles.labelStyle}>Nova senha*:</Text>
-          <PasswordFormField
-            maxLength={20}
-            name="password"
-            placeholder="Digite a nova senha"
-          />
-        </View>
+          <View>
+            <Text style={styles.labelStyle}>Nova senha*:</Text>
+            <PasswordFormField
+              maxLength={20}
+              name="password"
+              placeholder="Digite a nova senha"
+            />
+          </View>
 
-        <View style={{ marginVertical: 24 }}>
-          <Text style={styles.labelStyle}>Confirmar a senha</Text>
-          <PasswordFormField
-            maxLength={20}
-            name="confirmPassword"
-            placeholder="Digite novamente a senha"
-          />
-        </View>
+          <View style={{ marginVertical: 24 }}>
+            <Text style={styles.labelStyle}>Confirmar a senha</Text>
+            <PasswordFormField
+              maxLength={20}
+              name="confirmPassword"
+              placeholder="Digite novamente a senha"
+            />
+          </View>
 
-        <SubmitButton title="confirmar" backgroundColor={colors.primary} />
-      </Form>
+          <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) => {
-    setConfirmatioModalData({
-      message: "Validando informações",
-      show: true,
-    });
-    const apiResponse = await loginByUsernamAnswers(number, secQuestion, answer); 
+    setShowLoading(true);
+    setTimeout(() => {
+      showLoading &&
+        setConfirmatioModalData({
+          message: "Validando informações",
+          show: true,
+        });
+    }, 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,51 +141,53 @@ export default function PasswordRecovery({ navigation }) {
         }
       />
 
-      <Form
-        validationSchema={validationSchema}
-        initialValues={{
-          number: "",
-          answer: "",
-          secQuestion: "",
-        }}
-        onSubmit={({number, answer, secQuestion}) => {
-          
-          handleSubmit(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={{ marginVertical: 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>
+      <KeyboardAwareScrollView>
+        <Form
+          validationSchema={validationSchema}
+          initialValues={{
+            number: user.username || "",
+            answer: "",
+            secQuestion: "",
+          }}
+          onSubmit={({ number, answer, secQuestion }) => {
+            handleSubmit(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"}
+              editable={user.username == null}
+            />
+          </View>
+
+          <View style={{ marginTop: 24 }}>
+            <Text style={styles.labelStyle}>Pergunta*:</Text>
+            <SecQuestionPicker name="secQuestion" />
+          </View>
+
+          <View style={{ marginVertical: 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>
+      </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",