Adding more descriptive error messages in login screen

src/app/screens/LoginScreen.js

@@ -18,6 +18,7 @@ import Button from "../components/Button";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { login, userPersonalData } from "../api/auth";
 import PasswordFormField from "../components/forms/PasswordFormField";
+import ConfirmationModal from "../components/ConfirmationModal";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -75,22 +76,40 @@ function DashedOrSeparator() {
 
 export default function LoginScreen(props) {
   const authContext = useContext(AuthContext);
+  const [showLog, setShowLog] = useState({ show: false, message: "" });
 
   const handleSubmit = async (name, password, setLoginFailed) => {
     const result = await login(name, password);
 
-    if (!result.ok) return setLoginFailed(true);
+    switch (result.status) {
+      case 404:
+        setLoginFailed(true);
+        return;
+      case 400:
+        setShowLog({
+          show: true,
+          message: "Um erro inesperado ocorreu. Tente novamente mais tarde",
+        });
+        return;
+    }
+
     await authStorage.setToken(result.data);
-    // console.log("TOKEN:  " + result.data);
 
-    setLoginFailed(false);
+    result.ok && setLoginFailed(false);
     const user = await userPersonalData();
     user.ok && authContext.setUser(user.data);
   };
 
   const [loginFailed, setLoginFailed] = useState(false);
+
   return (
     <Screen style={[styles.containter, { backgroundColor: colors.grayBG }]}>
+      <ConfirmationModal
+        show={showLog.show}
+        description={showLog.message}
+        confirmationLabel="OK"
+        onConfirm={() => setShowLog({ ...showLog, show: false })}
+      />
       <Form
         initialValues={{
           name: "",
@@ -110,13 +129,12 @@ export default function LoginScreen(props) {
             marginBottom={dimensions.spacing.big_padding}
           />
 
-          <View
-            style={{paddingHorizontal: 16, marginBottom: 12}}>
-          <ErrorMessage
-            error="Email ou senha inválidos"
-            visible={loginFailed}
-          />
-            </View>
+          <View style={{ paddingHorizontal: 16, marginBottom: 12 }}>
+            <ErrorMessage
+              error="Email ou senha inválidos"
+              visible={loginFailed}
+            />
+          </View>
 
           <View style={{ paddingBottom: 24 }}>
             <FormField