refactor: support auth login in share page & improve auth client button styles

Author: scottsut

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

@@ -19,63 +19,52 @@
 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 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 { AUTH_CLIENT_ICON_MAPPING } from './constants';
+
+interface LoginFormProps {
+  loading: boolean;
+  loggedInUser?: User | null;
+  oauth2Clients: Array<{ name: string; value: string }>;
+  registerEnable?: boolean;
+  modal?: boolean;
+  onLogin?: (value) => void;
+}
 
 export function LoginForm({
+  loading,
+  loggedInUser,
+  oauth2Clients,
   registerEnable = true,
   modal = 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>
-    );
-  });
-
   return (
     <AuthForm>
       {logged && !switchUser && !modal ? (
@@ -142,8 +131,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()]}
+                  href={value}
+                  block
+                >
+                  {name}
+                </AuthButton>
+              ))}
+            </>
+          )}
         </Form>
       )}
     </AuthForm>
@@ -154,16 +157,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 +166,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}
+          modal={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 }) => {

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

@@ -71,6 +71,16 @@ export const selectSharePassword = createSelector(
   shareState => shareState.sharePassword,
 );
 
+export const selectLoginLoading = createSelector(
+  [selectDomain],
+  shareState => shareState.loginLoading,
+);
+
+export const selectOauth2Clients = createSelector(
+  [selectDomain],
+  appState => appState.oauth2Clients,
+);
+
 export const selectAvailableSourceFunctions = createSelector(
   [selectDomain],
   shareState => shareState.availableSourceFunctions,

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

@@ -248,6 +248,17 @@ export const updateGroupAndFetchDatasetForShare = createAsyncThunk(
   },
 );
 
+export const getOauth2Clients = createAsyncThunk<[]>(
+  'app/getOauth2Clients',
+  async () => {
+    const { data } = await request2<[]>({
+      url: '/tpa/getOauth2Clients',
+      method: 'GET',
+    });
+    return data;
+  },
+);
+
 export const fetchAvailableSourceFunctions = createAsyncThunk<
   string[],
   { sourceId: string }

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

@@ -35,6 +35,8 @@ export interface SharePageState {
   headlessBrowserRenderSign: boolean;
   pageWidthHeight: [number, number];
   shareDownloadPolling: boolean;
+  loginLoading: boolean;
+  oauth2Clients: Array<{ name: string; value: string }>;
   availableSourceFunctions?: string[];
 }
 export interface ShareVizInfo {

frontend/src/locales/en/translation.json

@@ -78,6 +78,7 @@
     "login": "Log in",
     "register": "Sign up for an account",
     "forgotPassword": "Can't log in?",
+    "authTitle": "OR",
     "alreadyLoggedIn": "Your account is already logged in",
     "enter": "Click to enter",
     "switch": "Switch accounts"

frontend/src/locales/zh/translation.json

@@ -78,6 +78,7 @@
     "login": "登录",
     "register": "注册新账号",
     "forgotPassword": "忘记密码？",
+    "authTitle": "第三方登录",
     "alreadyLoggedIn": "账号已登录",
     "enter": "点击进入",
     "switch": "切换账号"