From 216da516295c99057f1059ea9cf854c492a8634b Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Tue, 7 May 2024 11:58:52 +0000
Subject: [PATCH] showing a basic error message when authentication is a failure

---
 src/screens/UserLoginScreen.tsx | 13 ++++++++++++-
 src/themes/Theme.tsx            |  6 ++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/screens/UserLoginScreen.tsx b/src/screens/UserLoginScreen.tsx
index 854dabd..b1d510d 100644
--- a/src/screens/UserLoginScreen.tsx
+++ b/src/screens/UserLoginScreen.tsx
@@ -22,6 +22,7 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> 
 
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [error, setError] = useState("");
 
 	const authenticationMutation = useMutation({
 		mutationFn: authenticateUser,
@@ -30,7 +31,11 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> 
 			navigation.navigate("bottomTabs");
 		},
 		onError: (error) => {
-			console.error("error :: ", error);
+			console.error("error :: ", error.response.data);
+			if (error.response.status === 400) {
+				return setError("Bad request");
+			}
+			setError(error.response.data.detail);
 		},
 	});
 
@@ -77,6 +82,7 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> 
 								<Input
 									label="Email"
 									// value={email}
+									autoCorrect={false}
 									textContentType="emailAddress"
 									onChangeText={setEmail}
 								/>
@@ -89,6 +95,11 @@ const UserLoginScreen: UnloggedUserStackScreenComponentProps<"userLoginScreen"> 
 								/>
 							</Box>
 						</Box>
+						{error && (
+							<Text variant={"error"} textAlign={"center"}>
+								{error}
+							</Text>
+						)}
 						<Box p={"s"}>
 							<Button
 								variant={"full"}
diff --git a/src/themes/Theme.tsx b/src/themes/Theme.tsx
index da7793d..22d82e7 100644
--- a/src/themes/Theme.tsx
+++ b/src/themes/Theme.tsx
@@ -15,6 +15,8 @@ const palette = {
 	lightGray: "#F4F5F7",
 	gray: "#747E98",
 	yellow: "#F4C44A",
+
+	red: "#FF0000",
 };
 
 const theme = createTheme({
@@ -27,6 +29,7 @@ const theme = createTheme({
 		lightGray: palette.lightGray,
 		gray: palette.gray,
 		yellow: palette.yellow,
+		red: palette.red,
 	},
 	spacing: {
 		s: 8,
@@ -82,6 +85,9 @@ const theme = createTheme({
 		lightGray: {
 			color: "lightGray",
 		},
+		error: {
+			color: "red",
+		},
 	},
 	cardVariants: {
 		defaults: {
--
libgit2 0.27.1