feat(fim): add fim login callback

client/web/src/plugin/common/index.ts

@@ -24,7 +24,7 @@ export {
   getGlobalState,
   useGlobalSocketEvent,
 } from '@/utils/global-state-helper';
-export { getJWTUserInfo } from '@/utils/jwt-helper';
+export { setUserJWT, getJWTUserInfo } from '@/utils/jwt-helper';
 export { dataUrlToFile } from '@/utils/file-helper';
 export {
   urlSearchStringify,
@@ -67,6 +67,7 @@ export {
   showMessageTime,
   joinArray,
   useConverseMessageContext,
+  loginWithToken,
 } from 'tailchat-shared';
 
 export { navigate } from '@/components/AppRouterApi';

server/plugins/com.msgbyte.fim/web/plugins/com.msgbyte.fim/src/FimAction.tsx

@@ -1,14 +1,52 @@
-import React from 'react';
-import { useAsync } from '@capital/common';
+import React, { useEffect, useRef } from 'react';
+import {
+  useAsync,
+  showToasts,
+  useNavigate,
+  loginWithToken,
+  setUserJWT,
+} from '@capital/common';
 import { Divider, Image, Tooltip } from '@capital/component';
 import { request } from './request';
+import { Translate } from './translate';
 
 export const FimAction: React.FC = React.memo(() => {
   const { loading, value: strategies } = useAsync(async () => {
     const { data: strategies } = await request.get('availableStrategies');
 
     return strategies;
   }, []);
+  const newWin = useRef<Window>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fn = (event: MessageEvent<any>) => {
+      if (newWin.current && event.source === newWin.current) {
+        newWin.current.close();
+
+        const payload = event.data;
+
+        if (payload.type === 'exist') {
+          showToasts(Translate.accountExistedTip, 'warning');
+        } else if (payload.type === 'token') {
+          const token = payload.token;
+          setUserJWT(token)
+            .then(loginWithToken(token))
+            .then(() => {
+              navigate('/main');
+            })
+            .catch(() => {
+              showToasts(Translate.loginFailed, 'error');
+            });
+        }
+      }
+    };
+    window.addEventListener('message', fn);
+
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
 
   if (loading) {
     return null;
@@ -17,7 +55,7 @@ export const FimAction: React.FC = React.memo(() => {
   if (Array.isArray(strategies) && strategies.length > 0) {
     return (
       <div>
-        <Divider />
+        <Divider>{Translate.fimLogin}</Divider>
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           {strategies.map((s) => (
             <Tooltip key={s.name} title={s.name}>
@@ -36,9 +74,7 @@ export const FimAction: React.FC = React.memo(() => {
                     );
 
                     const win = window.open(url, 'square', 'frame=true');
-                    win.addEventListener('message', (...args) => {
-                      console.log(...args);
-                    });
+                    newWin.current = win;
                   }
                 }}
               />

server/plugins/com.msgbyte.fim/web/plugins/com.msgbyte.fim/src/translate.ts

@@ -0,0 +1,16 @@
+import { localTrans } from '@capital/common';
+
+export const Translate = {
+  fimLogin: localTrans({
+    'zh-CN': '第三方登录',
+    'en-US': 'Third party login',
+  }),
+  loginFailed: localTrans({
+    'zh-CN': '登录失败',
+    'en-US': 'Login Failed',
+  }),
+  accountExistedTip: localTrans({
+    'zh-CN': '账号已存在，你应该在登录后绑定账号',
+    'en-US': 'Account Existed, You should bind provider account after login',
+  }),
+};