Merge pull request #730 from Unleash/feat/redirect

feat: add redirect params to /login

frontend/src/component/App.tsx

@@ -41,7 +41,6 @@ export const App = () => {
     const renderRoute = (route: any) => {
         if (route.type === 'protected') {
             const unauthorized = isUnauthorized();
-
             return (
                 <ProtectedRoute
                     key={route.path}

frontend/src/component/common/ProtectedRoute/ProtectedRoute.jsx

@@ -1,4 +1,4 @@
-import { Route, Redirect } from 'react-router-dom';
+import { Route, useLocation, Redirect } from 'react-router-dom';
 
 const ProtectedRoute = ({
     component: Component,
@@ -6,12 +6,15 @@ const ProtectedRoute = ({
     renderProps = {},
     ...rest
 }) => {
+    const { pathname } = useLocation();
+    const loginLink =
+        pathname.length > 1 ? `/login?redirect=${pathname}` : '/login';
     return (
         <Route
             {...rest}
             render={props => {
                 if (unauthorized) {
-                    return <Redirect to={'/login'} />;
+                    return <Redirect to={loginLink} />;
                 } else {
                     return <Component {...props} {...renderProps} />;
                 }

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 = (
             <>
-                <PasswordAuth authDetails={authDetails} />
+                <PasswordAuth authDetails={authDetails} redirect={redirect} />
                 <ConditionallyRender
                     condition={!authDetails.defaultHidden}
                     show={<SecondaryLoginActions />}
@@ -34,13 +37,13 @@ const Authentication = () => {
             </>
         );
     } else if (authDetails.type === SIMPLE_TYPE) {
-        content = <SimpleAuth authDetails={authDetails} />;
+        content = <SimpleAuth authDetails={authDetails} redirect={redirect} />;
     } else if (authDetails.type === DEMO_TYPE) {
-        content = <DemoAuth authDetails={authDetails} />;
+        content = <DemoAuth authDetails={authDetails} redirect={redirect} />;
     } else if (authDetails.type === HOSTED_TYPE) {
         content = (
             <>
-                <HostedAuth authDetails={authDetails} />
+                <HostedAuth authDetails={authDetails} redirect={redirect} />
                 <ConditionallyRender
                     condition={!authDetails.defaultHidden}
                     show={<SecondaryLoginActions />}

frontend/src/component/user/DemoAuth/DemoAuth.jsx

@@ -10,7 +10,7 @@ import { useAuthUser } from '../../../hooks/api/getters/useAuth/useAuthUser';
 import useToast from '../../../hooks/useToast';
 import { formatUnknownError } from '../../../utils/format-unknown-error';
 
-const DemoAuth = ({ authDetails }) => {
+const DemoAuth = ({ authDetails, redirect }) => {
     const [email, setEmail] = useState('');
     const history = useHistory();
     const { refetchUser } = useAuthUser();
@@ -23,7 +23,7 @@ const DemoAuth = ({ authDetails }) => {
         try {
             await emailAuth(authDetails.path, email);
             refetchUser();
-            history.push(`/`);
+            history.push(redirect);
         } catch (error) {
             setToastApiError(formatUnknownError(error));
         }
@@ -91,6 +91,7 @@ const DemoAuth = ({ authDetails }) => {
 
 DemoAuth.propTypes = {
     authDetails: PropTypes.object.isRequired,
+    redirect: PropTypes.string.isRequired,
 };
 
 export default DemoAuth;

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 => ({
@@ -145,6 +145,7 @@ const HostedAuth = ({ authDetails }) => {
 
 HostedAuth.propTypes = {
     authDetails: PropTypes.object.isRequired,
+    redirect: PropTypes.string.isRequired,
 };
 
 export default HostedAuth;

frontend/src/component/user/Login/Login.tsx

@@ -15,9 +15,10 @@ const Login = () => {
     const { user } = useAuthUser();
     const query = useQueryParams();
     const resetPassword = query.get('reset') === 'true';
+    const redirect = query.get('redirect') || '/';
 
     if (user) {
-        return <Redirect to="/features" />;
+        return <Redirect to={redirect} />;
     }
 
     return (
@@ -36,7 +37,7 @@ const Login = () => {
                     condition={resetPassword}
                     show={<ResetPasswordSuccess />}
                 />
-                <Authentication />
+                <Authentication redirect={redirect} />
             </div>
         </StandaloneLayout>
     );

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,7 @@ const PasswordAuth = ({ 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 => ({
@@ -168,6 +168,7 @@ const PasswordAuth = ({ authDetails }) => {
 
 PasswordAuth.propTypes = {
     authDetails: PropTypes.object.isRequired,
+    redirect: PropTypes.string.isRequired,
 };
 
 export default PasswordAuth;

frontend/src/component/user/SimpleAuth/SimpleAuth.jsx

@@ -9,7 +9,7 @@ import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from '../../../testIds';
 import useToast from '../../../hooks/useToast';
 import { formatUnknownError } from '../../../utils/format-unknown-error';
 
-const SimpleAuth = ({ authDetails }) => {
+const SimpleAuth = ({ authDetails, redirect }) => {
     const [email, setEmail] = useState('');
     const { refetchUser } = useAuthUser();
     const { emailAuth } = useAuthApi();
@@ -22,7 +22,7 @@ const SimpleAuth = ({ authDetails }) => {
         try {
             await emailAuth(authDetails.path, email);
             refetchUser();
-            history.push(`/`);
+            history.push(redirect);
         } catch (error) {
             setToastApiError(formatUnknownError(error));
         }
@@ -80,6 +80,7 @@ const SimpleAuth = ({ authDetails }) => {
 
 SimpleAuth.propTypes = {
     authDetails: PropTypes.object.isRequired,
+    redirect: PropTypes.string.isRequired,
 };
 
 export default SimpleAuth;