refactor: redirect to the right path when auth login on share page

Author: scottsut

frontend/src/app/pages/AuthorizationPage/index.tsx

@@ -1,10 +1,12 @@
 import { EmptyFiller } from 'app/components/EmptyFiller';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import { getUserInfoByToken } from 'app/slice/thunks';
-import { useCallback, useEffect } from 'react';
+import { StorageKeys } from 'globalConstants';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory, useRouteMatch } from 'react-router';
 import styled from 'styled-components/macro';
+import persistence from 'utils/persistence';
 
 export const AuthorizationPage = () => {
   const dispatch = useDispatch();
@@ -13,15 +15,26 @@ export const AuthorizationPage = () => {
   const token = paramsMatch.params.token;
   const t = useI18NPrefix('authorization');
 
-  const toApp = useCallback(() => {
-    history.replace('/');
-  }, [history]);
-
   useEffect(() => {
     if (token) {
-      dispatch(getUserInfoByToken({ token, resolve: toApp }));
+      dispatch(
+        getUserInfoByToken({
+          token,
+          resolve: () => {
+            const redirectUrl = persistence.session.get(
+              StorageKeys.AuthRedirectUrl,
+            );
+            if (redirectUrl) {
+              persistence.session.remove(StorageKeys.AuthRedirectUrl);
+              window.location.href = redirectUrl;
+            } else {
+              history.replace('/');
+            }
+          },
+        }),
+      );
     }
-  }, [token, dispatch, toApp]);
+  }, [token, dispatch, history]);
   return (
     <Wrapper>
       <EmptyFiller loading title={t('processing')} />

frontend/src/app/pages/LoginPage/LoginForm.tsx

@@ -20,6 +20,7 @@ import { Button, Form, Input } from 'antd';
 import { AuthForm } from 'app/components';
 import usePrefixI18N from 'app/hooks/useI18NPrefix';
 import { User } from 'app/slice/types';
+import { StorageKeys } from 'globalConstants';
 import React, { useCallback, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
@@ -31,14 +32,15 @@ import {
   SPACE_XS,
 } from 'styles/StyleConstants';
 import { getToken } from 'utils/auth';
+import persistence from 'utils/persistence';
 import { AUTH_CLIENT_ICON_MAPPING } from './constants';
 
 interface LoginFormProps {
   loading: boolean;
   loggedInUser?: User | null;
   oauth2Clients: Array<{ name: string; value: string }>;
   registerEnable?: boolean;
-  modal?: boolean;
+  inShare?: boolean;
   onLogin?: (value) => void;
 }
 
@@ -47,7 +49,7 @@ export function LoginForm({
   loggedInUser,
   oauth2Clients,
   registerEnable = true,
-  modal = false,
+  inShare = false,
   onLogin,
 }: LoginFormProps) {
   const [switchUser, setSwitchUser] = useState(false);
@@ -65,9 +67,22 @@ export function LoginForm({
     setSwitchUser(true);
   }, []);
 
+  const toAuthClient = useCallback(
+    clientUrl => () => {
+      if (inShare) {
+        persistence.session.save(
+          StorageKeys.AuthRedirectUrl,
+          window.location.href,
+        );
+      }
+      window.location.href = clientUrl;
+    },
+    [inShare],
+  );
+
   return (
     <AuthForm>
-      {logged && !switchUser && !modal ? (
+      {logged && !switchUser && !inShare ? (
         <>
           <h2>{t('alreadyLoggedIn')}</h2>
           <UserPanel onClick={toApp}>
@@ -121,7 +136,7 @@ export function LoginForm({
               </Button>
             )}
           </Form.Item>
-          {!modal && (
+          {!inShare && (
             <Links>
               <LinkButton to="/forgetPassword">
                 {t('forgotPassword')}
@@ -139,7 +154,7 @@ export function LoginForm({
                   key={value}
                   size="large"
                   icon={AUTH_CLIENT_ICON_MAPPING[name.toLowerCase()]}
-                  href={value}
+                  onClick={toAuthClient(value)}
                   block
                 >
                   {name}

frontend/src/app/pages/SharePage/ShareLoginModal.tsx

@@ -38,7 +38,7 @@ function ShareLoginModal({ visible, onChange }) {
         <LoginForm
           loading={loading}
           oauth2Clients={oauth2Clients}
-          modal={true}
+          inShare={true}
           onLogin={onChange}
         />
       </LoginWrapper>

frontend/src/globalConstants.ts

@@ -27,6 +27,7 @@ export enum StorageKeys {
   AuthorizationToken = 'AUTHORIZATION_TOKEN',
   LoggedInUser = 'LOGGED_IN_USER',
   ShareClientId = 'SHARE_CLIENT_ID',
+  AuthRedirectUrl = 'AUTH_REDIRECT_URL',
   Locale = 'LOCALE',
   Theme = 'THEME',
 }