Skip to content

Commit

Permalink
Merge pull request #272 from hotosm/fix-login
Browse files Browse the repository at this point in the history
Showing friendly error message when log in fails
  • Loading branch information
kshitijrajsharma authored Sep 4, 2024
2 parents 5d2d766 + bfa03e5 commit 91c378a
Showing 1 changed file with 76 additions and 66 deletions.
142 changes: 76 additions & 66 deletions frontend/src/components/Login/Authenticate.js
Original file line number Diff line number Diff line change
@@ -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 [email protected]");

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 [email protected]"
);
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;
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;

0 comments on commit 91c378a

Please sign in to comment.