Merge pull request #1236 from scottsut/fix

refactor: support auth login in 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

@@ -19,66 +19,70 @@
 import { Button, Form, Input } from 'antd';
 import { AuthForm } from 'app/components';
 import usePrefixI18N from 'app/hooks/useI18NPrefix';
-import {
-  selectLoggedInUser,
-  selectLoginLoading,
-  selectOauth2Clients,
-} from 'app/slice/selectors';
-import { getOauth2Clients } from 'app/slice/thunks';
-import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+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';
 import {
   BORDER_RADIUS,
   LINE_HEIGHT_ICON_LG,
+  LINE_HEIGHT_ICON_XXL,
   SPACE_MD,
+  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;
+  inShare?: boolean;
+  onLogin?: (value) => void;
+}
 
 export function LoginForm({
+  loading,
+  loggedInUser,
+  oauth2Clients,
   registerEnable = true,
-  modal = false,
+  inShare = false,
   onLogin,
-}: {
-  registerEnable?: boolean;
-  modal?: boolean;
-  onLogin?: (value) => void;
-}) {
+}: LoginFormProps) {
   const [switchUser, setSwitchUser] = useState(false);
-  const dispatch = useDispatch();
   const history = useHistory();
-  const loading = useSelector(selectLoginLoading);
-  const loggedInUser = useSelector(selectLoggedInUser);
   const [form] = Form.useForm();
   const logged = !!getToken();
   const t = usePrefixI18N('login');
   const tg = usePrefixI18N('global');
-  const oauth2Clients = useSelector(selectOauth2Clients);
 
   const toApp = useCallback(() => {
     history.replace('/');
   }, [history]);
 
-  useEffect(() => {
-    dispatch(getOauth2Clients());
-  }, [dispatch]);
-
   const onSwitch = useCallback(() => {
     setSwitchUser(true);
   }, []);
 
-  let Oauth2BtnList = oauth2Clients.map(client => {
-    return (
-      <Oauth2Button key={client.value} href={client.value}>
-        {client.name}
-      </Oauth2Button>
-    );
-  });
+  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}>
@@ -132,7 +136,7 @@ export function LoginForm({
               </Button>
             )}
           </Form.Item>
-          {!modal && (
+          {!inShare && (
             <Links>
               <LinkButton to="/forgetPassword">
                 {t('forgotPassword')}
@@ -142,8 +146,22 @@ export function LoginForm({
               )}
             </Links>
           )}
-
-          {Oauth2BtnList}
+          {oauth2Clients.length > 0 && (
+            <>
+              <AuthTitle>{t('authTitle')}</AuthTitle>
+              {oauth2Clients.map(({ name, value }) => (
+                <AuthButton
+                  key={value}
+                  size="large"
+                  icon={AUTH_CLIENT_ICON_MAPPING[name.toLowerCase()]}
+                  onClick={toAuthClient(value)}
+                  block
+                >
+                  {name}
+                </AuthButton>
+              ))}
+            </>
+          )}
         </Form>
       )}
     </AuthForm>
@@ -154,16 +172,6 @@ const Links = styled.div`
   display: flex;
 `;
 
-const Oauth2Button = styled.a`
-  display: block;
-  height: 36px;
-  font-weight: bold;
-  line-height: 36px;
-  color: #fff;
-  text-align: center;
-  background-color: blue;
-`;
-
 const LinkButton = styled(Link)`
   flex: 1;
   line-height: ${LINE_HEIGHT_ICON_LG};
@@ -173,6 +181,20 @@ const LinkButton = styled(Link)`
   }
 `;
 
+const AuthTitle = styled.p`
+  line-height: ${LINE_HEIGHT_ICON_XXL};
+  color: ${p => p.theme.textColorLight};
+  text-align: center;
+`;
+
+const AuthButton = styled(Button)`
+  margin-bottom: ${SPACE_XS};
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
 const UserPanel = styled.div`
   display: flex;
   padding: ${SPACE_MD};

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

@@ -0,0 +1,49 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  AlipayCircleOutlined,
+  AliyunOutlined,
+  CodepenCircleOutlined,
+  DingdingOutlined,
+  FacebookOutlined,
+  GithubOutlined,
+  GitlabOutlined,
+  GoogleOutlined,
+  InstagramOutlined,
+  QqOutlined,
+  SlackOutlined,
+  WeiboCircleOutlined,
+  ZhihuOutlined,
+} from '@ant-design/icons';
+
+export const AUTH_CLIENT_ICON_MAPPING = {
+  github: <GithubOutlined />,
+  dingding: <DingdingOutlined />,
+  qq: <QqOutlined />,
+  gitlab: <GitlabOutlined />,
+  weibo: <WeiboCircleOutlined />,
+  zhihu: <ZhihuOutlined />,
+  alipay: <AlipayCircleOutlined />,
+  aliyun: <AliyunOutlined />,
+  google: <GoogleOutlined />,
+  facebook: <FacebookOutlined />,
+  slack: <SlackOutlined />,
+  instagram: <InstagramOutlined />,
+  codepen: <CodepenCircleOutlined />,
+};

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

@@ -18,9 +18,14 @@
 
 import { Brand } from 'app/components/Brand';
 import { Version } from 'app/components/Version';
-import { selectSystemInfo } from 'app/slice/selectors';
-import { login } from 'app/slice/thunks';
-import React, { useCallback } from 'react';
+import {
+  selectLoggedInUser,
+  selectLoginLoading,
+  selectOauth2Clients,
+  selectSystemInfo,
+} from 'app/slice/selectors';
+import { getOauth2Clients, login } from 'app/slice/thunks';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
@@ -30,6 +35,13 @@ export function LoginPage() {
   const dispatch = useDispatch();
   const history = useHistory();
   const systemInfo = useSelector(selectSystemInfo);
+  const loading = useSelector(selectLoginLoading);
+  const loggedInUser = useSelector(selectLoggedInUser);
+  const oauth2Clients = useSelector(selectOauth2Clients);
+
+  useEffect(() => {
+    dispatch(getOauth2Clients());
+  }, [dispatch]);
 
   const onLogin = useCallback(
     values => {
@@ -48,6 +60,9 @@ export function LoginPage() {
     <Wrapper>
       <Brand />
       <LoginForm
+        loading={loading}
+        loggedInUser={loggedInUser}
+        oauth2Clients={oauth2Clients}
         registerEnable={systemInfo?.registerEnable}
         onLogin={onLogin}
       />

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

@@ -17,13 +17,30 @@
  */
 
 import { LoginForm } from 'app/pages/LoginPage/LoginForm';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { selectLoginLoading, selectOauth2Clients } from './slice/selectors';
+import { getOauth2Clients } from './slice/thunks';
 
 function ShareLoginModal({ visible, onChange }) {
+  const dispatch = useDispatch();
+  const loading = useSelector(selectLoginLoading);
+  const oauth2Clients = useSelector(selectOauth2Clients);
+
+  useEffect(() => {
+    dispatch(getOauth2Clients());
+  }, [dispatch]);
+
   return (
     visible && (
       <LoginWrapper>
-        <LoginForm modal={true} onLogin={onChange} />
+        <LoginForm
+          loading={loading}
+          oauth2Clients={oauth2Clients}
+          inShare={true}
+          onLogin={onChange}
+        />
       </LoginWrapper>
     )
   );

frontend/src/app/pages/SharePage/slice/index.ts

@@ -31,6 +31,8 @@ import { useInjectReducer } from 'utils/@reduxjs/injectReducer';
 import {
   fetchAvailableSourceFunctions,
   fetchShareDataSetByPreviewChartAction,
+  fetchShareVizInfo,
+  getOauth2Clients,
 } from './thunks';
 // import { fetchShareDataSetByPreviewChartAction } from './thunk';
 import { ExecuteToken, SharePageState, ShareVizInfo } from './types';
@@ -46,6 +48,8 @@ export const initialState: SharePageState = {
   headlessBrowserRenderSign: false,
   pageWidthHeight: [0, 0],
   shareDownloadPolling: false,
+  loginLoading: false,
+  oauth2Clients: [],
   availableSourceFunctions: [],
 };
 
@@ -173,6 +177,15 @@ export const slice = createSlice({
   },
   extraReducers: builder => {
     builder
+      .addCase(fetchShareVizInfo.pending, state => {
+        state.loginLoading = true;
+      })
+      .addCase(fetchShareVizInfo.fulfilled, state => {
+        state.loginLoading = false;
+      })
+      .addCase(fetchShareVizInfo.rejected, state => {
+        state.loginLoading = false;
+      })
       .addCase(
         fetchShareDataSetByPreviewChartAction.fulfilled,
         (state, { payload }) => {
@@ -186,6 +199,12 @@ export const slice = createSlice({
       .addCase(fetchShareDataSetByPreviewChartAction.rejected, state => {
         state.headlessBrowserRenderSign = true;
       })
+      .addCase(getOauth2Clients.fulfilled, (state, action) => {
+        state.oauth2Clients = action.payload.map(x => ({
+          name: Object.keys(x)[0],
+          value: x[Object.keys(x)[0]],
+        }));
+      })
       .addCase(
         fetchAvailableSourceFunctions.fulfilled,
         (state, { payload }) => {