From bcbfd3e38c50d967eb0b586d5c14afaace2e842d Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 21 Feb 2022 12:33:11 +0100 Subject: [PATCH 1/5] feat: add redirect params to /login --- frontend/src/component/App.tsx | 2 -- .../component/common/ProtectedRoute/ProtectedRoute.jsx | 8 ++++++-- frontend/src/component/user/Login/Login.tsx | 8 ++++++-- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index d2293e5a30..56cd5c8625 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -41,7 +41,6 @@ export const App = () => { const renderRoute = (route: any) => { if (route.type === 'protected') { const unauthorized = isUnauthorized(); - return ( { path="/" unauthorized={isUnauthorized()} component={Redirect} - renderProps={{ to: '/features' }} /> {renderMainLayoutRoutes()} {renderStandaloneRoutes()} diff --git a/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx b/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx index 710626db9e..7c26fda618 100644 --- a/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx +++ b/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx @@ -1,4 +1,4 @@ -import { Route, Redirect } from 'react-router-dom'; +import { Route, useLocation, useHistory } from 'react-router-dom'; const ProtectedRoute = ({ component: Component, @@ -6,12 +6,16 @@ const ProtectedRoute = ({ renderProps = {}, ...rest }) => { + const { pathname } = useLocation(); + const history = useHistory(); + const loginLink = + pathname.length > 1 ? `/login?redirect=${pathname}` : '/login'; return ( { if (unauthorized) { - return ; + history.push(loginLink); } else { return ; } diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx index 4e7f266710..efa57810f3 100644 --- a/frontend/src/component/user/Login/Login.tsx +++ b/frontend/src/component/user/Login/Login.tsx @@ -7,7 +7,7 @@ import { DEMO_TYPE } from '../../../constants/authTypes'; import Authentication from '../Authentication/Authentication'; import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails'; import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser'; -import { Redirect } from 'react-router-dom'; +import { useHistory } from 'react-router-dom'; const Login = () => { const styles = useStyles(); @@ -15,9 +15,13 @@ const Login = () => { const { user } = useAuthUser(); const query = useQueryParams(); const resetPassword = query.get('reset') === 'true'; + const redirect = query.get('redirect') || '/features'; + const history = useHistory(); + console.log(redirect); if (user) { - return ; + console.log(redirect); + history.push(redirect); } return ( From 622c97a99f4852478a8c3a7bdd16963e9dce5ff0 Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 21 Feb 2022 14:05:11 +0100 Subject: [PATCH 2/5] feat: add redirect to all auth components --- .../user/Authentication/Authentication.tsx | 20 +++++++++++++------ .../src/component/user/DemoAuth/DemoAuth.jsx | 4 ++-- .../component/user/HostedAuth/HostedAuth.jsx | 4 ++-- frontend/src/component/user/Login/Login.tsx | 6 ++---- .../user/PasswordAuth/PasswordAuth.jsx | 5 +++-- .../component/user/SimpleAuth/SimpleAuth.jsx | 4 ++-- 6 files changed, 25 insertions(+), 18 deletions(-) diff --git a/frontend/src/component/user/Authentication/Authentication.tsx b/frontend/src/component/user/Authentication/Authentication.tsx index 4137ac2000..fcc27976c2 100644 --- a/frontend/src/component/user/Authentication/Authentication.tsx +++ b/frontend/src/component/user/Authentication/Authentication.tsx @@ -15,7 +15,10 @@ import ConditionallyRender from '../../common/ConditionallyRender'; import { Alert } from '@material-ui/lab'; import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails'; -const Authentication = () => { +interface IAuthenticationProps { + redirect: string; +} +const Authentication = ({ redirect }: IAuthenticationProps) => { const { authDetails } = useAuthDetails(); const params = useQueryParams(); @@ -26,7 +29,7 @@ const Authentication = () => { if (authDetails.type === PASSWORD_TYPE) { content = ( <> - + } @@ -34,13 +37,13 @@ const Authentication = () => { ); } else if (authDetails.type === SIMPLE_TYPE) { - content = ; + content = ; } else if (authDetails.type === DEMO_TYPE) { - content = ; + content = ; } else if (authDetails.type === HOSTED_TYPE) { content = ( <> - + } @@ -48,7 +51,12 @@ const Authentication = () => { ); } else { - content = ; + content = ( + + ); } return ( <> diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.jsx b/frontend/src/component/user/DemoAuth/DemoAuth.jsx index 8fa4dd880c..550b0ea4d7 100644 --- a/frontend/src/component/user/DemoAuth/DemoAuth.jsx +++ b/frontend/src/component/user/DemoAuth/DemoAuth.jsx @@ -9,7 +9,7 @@ import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi'; import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser'; import useToast from '../../../hooks/useToast'; -const DemoAuth = ({ authDetails }) => { +const DemoAuth = ({ authDetails, redirect }) => { const [email, setEmail] = useState(''); const history = useHistory(); const { refetchUser } = useAuthUser(); @@ -22,7 +22,7 @@ const DemoAuth = ({ authDetails }) => { try { await emailAuth(authDetails.path, email); refetchUser(); - history.push(`/`); + history.push(redirect); } catch (e) { setToastApiError(e.toString()); } diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx index ce75206ebf..c738ca13ca 100644 --- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx +++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx @@ -18,7 +18,7 @@ import { LOGIN_PASSWORD_ID, } from '../../../testIds'; -const HostedAuth = ({ authDetails }) => { +const HostedAuth = ({ authDetails, redirect }) => { const commonStyles = useCommonStyles(); const styles = useStyles(); const { refetchUser } = useAuthUser(); @@ -55,7 +55,7 @@ const HostedAuth = ({ authDetails }) => { try { await passwordAuth(authDetails.path, username, password); refetchUser(); - history.push(`/`); + history.push(redirect); } catch (error) { if (error.statusCode === 404 || error.statusCode === 400) { setErrors(prev => ({ diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx index efa57810f3..03ef1bcb25 100644 --- a/frontend/src/component/user/Login/Login.tsx +++ b/frontend/src/component/user/Login/Login.tsx @@ -17,11 +17,9 @@ const Login = () => { const resetPassword = query.get('reset') === 'true'; const redirect = query.get('redirect') || '/features'; const history = useHistory(); - console.log(redirect); if (user) { - console.log(redirect); - history.push(redirect); + history.replace(redirect); } return ( @@ -40,7 +38,7 @@ const Login = () => { condition={resetPassword} show={} /> - + ); diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx index 3c2fbcc965..2340aba5c5 100644 --- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx +++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx @@ -19,7 +19,7 @@ import PasswordField from '../../common/PasswordField/PasswordField'; import { useAuthApi } from '../../../hooks/api/actions/useAuthApi/useAuthApi'; import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser'; -const PasswordAuth = ({ authDetails }) => { +const PasswordAuth = ({ authDetails, redirect }) => { const commonStyles = useCommonStyles(); const styles = useStyles(); const history = useHistory(); @@ -56,7 +56,8 @@ const PasswordAuth = ({ authDetails }) => { try { await passwordAuth(authDetails.path, username, password); refetchUser(); - history.push(`/`); + console.log('hio') + history.push(redirect); } catch (error) { if (error.statusCode === 404 || error.statusCode === 400) { setErrors(prev => ({ diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx index ede999d2ca..c9dfb9e66b 100644 --- a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx +++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx @@ -8,7 +8,7 @@ import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser'; import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from '../../../testIds'; import useToast from '../../../hooks/useToast'; -const SimpleAuth = ({ authDetails }) => { +const SimpleAuth = ({ authDetails, redirect }) => { const [email, setEmail] = useState(''); const { refetchUser } = useAuthUser(); const { emailAuth } = useAuthApi(); @@ -21,7 +21,7 @@ const SimpleAuth = ({ authDetails }) => { try { await emailAuth(authDetails.path, email); refetchUser(); - history.push(`/`); + history.push(redirect); } catch (e) { setToastApiError(e.toString()); } From a47d53d0f44bcca611bfec4027325c603c299ea9 Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 21 Feb 2022 14:06:42 +0100 Subject: [PATCH 3/5] fix: remove console log --- frontend/src/component/user/PasswordAuth/PasswordAuth.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx index 2340aba5c5..bf70f56dd0 100644 --- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx +++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx @@ -56,7 +56,6 @@ const PasswordAuth = ({ authDetails, redirect }) => { try { await passwordAuth(authDetails.path, username, password); refetchUser(); - console.log('hio') history.push(redirect); } catch (error) { if (error.statusCode === 404 || error.statusCode === 400) { From 1796aeb3ea8c056c9a2e12e7c106d32863448729 Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 21 Feb 2022 16:24:07 +0100 Subject: [PATCH 4/5] fix: update PR based on feedback --- frontend/src/component/App.tsx | 1 + .../src/component/common/ProtectedRoute/ProtectedRoute.jsx | 5 ++--- frontend/src/component/user/DemoAuth/DemoAuth.jsx | 1 + frontend/src/component/user/Login/Login.tsx | 7 +++---- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 56cd5c8625..3b2094721d 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -87,6 +87,7 @@ export const App = () => { path="/" unauthorized={isUnauthorized()} component={Redirect} + renderProps={{ to: '/features' }} /> {renderMainLayoutRoutes()} {renderStandaloneRoutes()} diff --git a/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx b/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx index 7c26fda618..2ab6d65e4c 100644 --- a/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx +++ b/frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx @@ -1,4 +1,4 @@ -import { Route, useLocation, useHistory } from 'react-router-dom'; +import { Route, useLocation, Redirect } from 'react-router-dom'; const ProtectedRoute = ({ component: Component, @@ -7,7 +7,6 @@ const ProtectedRoute = ({ ...rest }) => { const { pathname } = useLocation(); - const history = useHistory(); const loginLink = pathname.length > 1 ? `/login?redirect=${pathname}` : '/login'; return ( @@ -15,7 +14,7 @@ const ProtectedRoute = ({ {...rest} render={props => { if (unauthorized) { - history.push(loginLink); + return ; } else { return ; } diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.jsx b/frontend/src/component/user/DemoAuth/DemoAuth.jsx index 550b0ea4d7..74ae506a00 100644 --- a/frontend/src/component/user/DemoAuth/DemoAuth.jsx +++ b/frontend/src/component/user/DemoAuth/DemoAuth.jsx @@ -90,6 +90,7 @@ const DemoAuth = ({ authDetails, redirect }) => { DemoAuth.propTypes = { authDetails: PropTypes.object.isRequired, + redirect: PropTypes.string.isRequired, }; export default DemoAuth; diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx index 03ef1bcb25..c346737ad9 100644 --- a/frontend/src/component/user/Login/Login.tsx +++ b/frontend/src/component/user/Login/Login.tsx @@ -7,7 +7,7 @@ import { DEMO_TYPE } from '../../../constants/authTypes'; import Authentication from '../Authentication/Authentication'; import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails'; import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser'; -import { useHistory } from 'react-router-dom'; +import { Redirect, useHistory } from 'react-router-dom'; const Login = () => { const styles = useStyles(); @@ -15,11 +15,10 @@ const Login = () => { const { user } = useAuthUser(); const query = useQueryParams(); const resetPassword = query.get('reset') === 'true'; - const redirect = query.get('redirect') || '/features'; - const history = useHistory(); + const redirect = query.get('redirect') || '/'; if (user) { - history.replace(redirect); + return ; } return ( From f67ee17012adcabe26da298fc41a2a97814b737f Mon Sep 17 00:00:00 2001 From: Youssef Date: Tue, 22 Feb 2022 13:55:47 +0100 Subject: [PATCH 5/5] fix: add redirect to component PropTypes --- .../src/component/user/Authentication/Authentication.tsx | 7 +------ frontend/src/component/user/HostedAuth/HostedAuth.jsx | 1 + frontend/src/component/user/Login/Login.tsx | 4 ++-- frontend/src/component/user/PasswordAuth/PasswordAuth.jsx | 1 + frontend/src/component/user/SimpleAuth/SimpleAuth.jsx | 1 + 5 files changed, 6 insertions(+), 8 deletions(-) diff --git a/frontend/src/component/user/Authentication/Authentication.tsx b/frontend/src/component/user/Authentication/Authentication.tsx index fcc27976c2..0e72bb345c 100644 --- a/frontend/src/component/user/Authentication/Authentication.tsx +++ b/frontend/src/component/user/Authentication/Authentication.tsx @@ -51,12 +51,7 @@ const Authentication = ({ redirect }: IAuthenticationProps) => { ); } else { - content = ( - - ); + content = ; } return ( <> diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.jsx b/frontend/src/component/user/HostedAuth/HostedAuth.jsx index c738ca13ca..79cac78a8a 100644 --- a/frontend/src/component/user/HostedAuth/HostedAuth.jsx +++ b/frontend/src/component/user/HostedAuth/HostedAuth.jsx @@ -145,6 +145,7 @@ const HostedAuth = ({ authDetails, redirect }) => { HostedAuth.propTypes = { authDetails: PropTypes.object.isRequired, + redirect: PropTypes.string.isRequired, }; export default HostedAuth; diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx index c346737ad9..8ce7ec763c 100644 --- a/frontend/src/component/user/Login/Login.tsx +++ b/frontend/src/component/user/Login/Login.tsx @@ -7,7 +7,7 @@ import { DEMO_TYPE } from '../../../constants/authTypes'; import Authentication from '../Authentication/Authentication'; import { useAuthDetails } from '../../../hooks/api/getters/useAuth/useAuthDetails'; import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser'; -import { Redirect, useHistory } from 'react-router-dom'; +import { Redirect } from 'react-router-dom'; const Login = () => { const styles = useStyles(); @@ -18,7 +18,7 @@ const Login = () => { const redirect = query.get('redirect') || '/'; if (user) { - return ; + return ; } return ( diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx index bf70f56dd0..e705614fe3 100644 --- a/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx +++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.jsx @@ -168,6 +168,7 @@ const PasswordAuth = ({ authDetails, redirect }) => { PasswordAuth.propTypes = { authDetails: PropTypes.object.isRequired, + redirect: PropTypes.string.isRequired, }; export default PasswordAuth; diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx index c9dfb9e66b..5f5c4d57f2 100644 --- a/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx +++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.jsx @@ -79,6 +79,7 @@ const SimpleAuth = ({ authDetails, redirect }) => { SimpleAuth.propTypes = { authDetails: PropTypes.object.isRequired, + redirect: PropTypes.string.isRequired, }; export default SimpleAuth;