From d2aa75015253f1f4ea4fcd489530b177c982f543 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Tue, 4 Jul 2023 16:49:05 +0800
Subject: [PATCH] refactor: disable oauth login in mobile

---
 client/web/src/plugin/common/index.ts         |  1 +
 .../plugins/com.msgbyte.iam/src/IAMAction.tsx | 58 +++++++++++--------
 .../plugins/com.msgbyte.iam/src/translate.ts  |  4 ++
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/client/web/src/plugin/common/index.ts b/client/web/src/plugin/common/index.ts
index 42ca1a38..54b2e9bd 100644
--- a/client/web/src/plugin/common/index.ts
+++ b/client/web/src/plugin/common/index.ts
@@ -20,6 +20,7 @@ export {
   openReconfirmModal,
 } from '@/components/Modal';
 export { Loadable } from '@/components/Loadable';
+export { useIsMobile } from '@/hooks/useIsMobile';
 export {
   getGlobalState,
   useGlobalSocketEvent,
diff --git a/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/IAMAction.tsx b/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/IAMAction.tsx
index 139c3d65..ff53b6e0 100644
--- a/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/IAMAction.tsx
+++ b/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/IAMAction.tsx
@@ -5,6 +5,7 @@ import {
   useNavigate,
   loginWithToken,
   setUserJWT,
+  useIsMobile,
 } from '@capital/common';
 import { Divider, Image, Tooltip } from '@capital/component';
 import { request } from './request';
@@ -18,6 +19,7 @@ export const IAMAction: React.FC = React.memo(() => {
   }, []);
   const newWin = useRef<Window>();
   const navigate = useNavigate();
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     const fn = (event: MessageEvent<any>) => {
@@ -59,31 +61,39 @@ export const IAMAction: React.FC = React.memo(() => {
     return (
       <div>
         <Divider>{Translate.iamLogin}</Divider>
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-          {strategies.map((s) => (
-            <Tooltip key={s.name} title={s.name}>
-              <Image
-                style={{
-                  width: 40,
-                  height: 40,
-                  cursor: 'pointer',
-                  borderRadius: 20,
-                }}
-                src={s.icon}
-                onClick={async () => {
-                  if (s.type === 'oauth') {
-                    const { data: url } = await request.get(
-                      `${s.name}.loginUrl`
-                    );
+        {isMobile ? (
+          <div
+            style={{ textAlign: 'center', opacity: 0.8, fontSize: '0.75rem' }}
+          >
+            {Translate.notSupportMobile}
+          </div>
+        ) : (
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            {strategies.map((s) => (
+              <Tooltip key={s.name} title={s.name}>
+                <Image
+                  style={{
+                    width: 40,
+                    height: 40,
+                    cursor: 'pointer',
+                    borderRadius: 20,
+                  }}
+                  src={s.icon}
+                  onClick={async () => {
+                    if (s.type === 'oauth') {
+                      const { data: url } = await request.get(
+                        `${s.name}.loginUrl`
+                      );
 
-                    const win = window.open(url, 'square', 'frame=true');
-                    newWin.current = win;
-                  }
-                }}
-              />
-            </Tooltip>
-          ))}
-        </div>
+                      const win = window.open(url, 'square', 'frame=true');
+                      newWin.current = win;
+                    }
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </div>
+        )}
       </div>
     );
   }
diff --git a/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/translate.ts b/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/translate.ts
index 14f58b28..6a708363 100644
--- a/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/translate.ts
+++ b/server/plugins/com.msgbyte.iam/web/plugins/com.msgbyte.iam/src/translate.ts
@@ -15,4 +15,8 @@ export const Translate = {
     'zh-CN': '账号已存在，请使用账号密码登录',
     'en-US': 'Account Existed, please log in with account password',
   }),
+  notSupportMobile: localTrans({
+    'zh-CN': '第三方登录功能暂不支持移动端使用',
+    'en-US': 'The third-party login function does not support mobile use',
+  }),
 };