refactor: disable oauth login in mobile

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,

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' }}>
+        {isMobile ? (
-          {strategies.map((s) => (
+          <div
-            <Tooltip key={s.name} title={s.name}>
+            style={{ textAlign: 'center', opacity: 0.8, fontSize: '0.75rem' }}
-              <Image
+          >
-                style={{
+            {Translate.notSupportMobile}
-                  width: 40,
+          </div>
-                  height: 40,
+        ) : (
-                  cursor: 'pointer',
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
-                  borderRadius: 20,
+            {strategies.map((s) => (
-                }}
+              <Tooltip key={s.name} title={s.name}>
-                src={s.icon}
+                <Image
-                onClick={async () => {
+                  style={{
-                  if (s.type === 'oauth') {
+                    width: 40,
-                    const { data: url } = await request.get(
+                    height: 40,
-                      `${s.name}.loginUrl`
+                    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');
+                      const win = window.open(url, 'square', 'frame=true');
-                    newWin.current = win;
+                      newWin.current = win;
-                  }
+                    }
-                }}
+                  }}
-              />
+                />
-            </Tooltip>
+              </Tooltip>
-          ))}
+            ))}
-        </div>
+          </div>
+        )}
       </div>
     );
   }

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',
+  }),
 };