From bfa03e56fd41ab1ffcf5ee110b5f779698bd80ad Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Wed, 4 Sep 2024 11:40:06 +0200
Subject: [PATCH] Showing freidnly error message when log in fails

---
 frontend/src/components/Login/Authenticate.js | 142 ++++++++++--------
 1 file changed, 76 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/Login/Authenticate.js b/frontend/src/components/Login/Authenticate.js
index c174c8da..f269552e 100644
--- a/frontend/src/components/Login/Authenticate.js
+++ b/frontend/src/components/Login/Authenticate.js
@@ -1,70 +1,80 @@
+import { Alert, LinearProgress, Stack } from "@mui/material";
+import React, { useContext, useEffect, useState } from "react";
+import { useMutation } from "react-query";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import RefreshTwoTone from "@mui/icons-material/RefreshTwoTone";
+import axios from "../../axios";
+import AuthContext from "../../Context/AuthContext";
+const Authenticate = (props) => {
+  const { authenticate } = useContext(AuthContext);
+  const [error, setError] = useState(false);
+  let location = useLocation();
+  const navigate = useNavigate();
 
-import { LinearProgress, Stack } from '@mui/material';
-import React, { useContext, useEffect, useState } from 'react'
-import { useMutation } from 'react-query';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import axios from '../../axios'
-import AuthContext from '../../Context/AuthContext';
-const Authenticate = props => {
+  const callback = async () => {
+    try {
+      // const params = `?${location.search.split("&")[1]}&${location.search.split("&")[2]}`
+      const params = location.search;
+      console.log("calling auth/callback");
+      const res = await axios.get(`/auth/callback/${params}`);
 
-    const {authenticate} = useContext(AuthContext);
-    const [error, setError] = useState(false)
-    let location = useLocation();
-    const navigate = useNavigate()
-    
-    const callback = async () => {
-        try {
-         
-            // const params = `?${location.search.split("&")[1]}&${location.search.split("&")[2]}`
-            const params =location.search;
-          console.log('calling auth/callback')
-          const res = await axios.get(`/auth/callback/${params}`);
-            
-          if (!res)
-          setError("OSM Authentication API is not avialble, please contact HOT tech team tech@hotosm.org");
-         
-          if (res.error) 
-            setError(res.error.response.statusText);
-                
-         
-         authenticate(res.data.access_token)
-         
-       
-         navigate(`${localStorage.getItem("redirect") ? localStorage.getItem("redirect")  : "/"}`)
-          return res.data;
-        } catch (e) {
-          console.log("isError");
-          setError(e);
-        } finally {
-          
-        }
-      };
-      const { mutate,  isLoading} = useMutation(callback);
+      if (!res)
+        setError(
+          "OSM Authentication API is not avialble, please contact HOT tech team tech@hotosm.org"
+        );
+      console.log("res", res);
+      if (res.error) setError("Error");
 
-    useEffect(() => {
-      
-        // console.log(location)
-        mutate()
-      return () => {
-       
-      }
-    }, [])
-    
-    return <>
-{isLoading &&
-    <Stack sx={{ width: '100%', color: 'grey.500' }} spacing={2}>
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-      <LinearProgress color="hot" />
-    </Stack>}
-    {error && error}
-     </>
-}
+      authenticate(res.data.access_token);
 
-export default Authenticate;
\ No newline at end of file
+      navigate(
+        `${
+          localStorage.getItem("redirect")
+            ? localStorage.getItem("redirect")
+            : "/"
+        }`
+      );
+      return res.data;
+    } catch (e) {
+      console.log("isError");
+      setError("Error");
+    } finally {
+    }
+  };
+  const { mutate, isLoading } = useMutation(callback);
+
+  useEffect(() => {
+    // console.log(location)
+    mutate();
+    return () => {};
+  }, []);
+
+  return (
+    <>
+      {isLoading && (
+        <Stack sx={{ width: "100%", color: "grey.500" }} spacing={2}>
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+          <LinearProgress color="hot" />
+        </Stack>
+      )}
+      {error && (
+        <p>
+          <Alert severity="error">
+            Please press refresh button{" "}
+            <RefreshTwoTone color="error"></RefreshTwoTone> in you browser if
+            you see this error <br></br>
+          </Alert>
+        </p>
+      )}
+    </>
+  );
+};
+
+export default Authenticate;