Browse Source

Adding more descriptive error messages in login screen

master
GabrielTrettel 3 years ago
parent
commit
ba5dccfdd7
  1. 28
      src/app/screens/LoginScreen.js

28
src/app/screens/LoginScreen.js

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

Loading…
Cancel
Save