Merge pull request #2 from ROOMrepair/main

add auto login
kubesphere-extensions · Dec 20, 2024 · e6786c6 · e6786c6
2 parents 48ae722 + 5966acf
commit e6786c6
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 5 deletions.
diff --git a/.github/workflows/build-push-dashboard.yml b/.github/workflows/build-push-dashboard.yml
@@ -25,7 +25,7 @@ jobs:
           cd ui/ && pnpm install
       - name: build-dashboard
         run: |
-          pnpm run dashboard:build 
+          make bundle-ui-dashboard
       - name: upload-dashboard
         uses: actions/upload-artifact@v4
         with:
@@ -65,7 +65,7 @@ jobs:
         run: |
           make image-karmada-dashboard-web GOARCH=amd64
       - name: login-docker
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_PASSWORD }}

diff --git a/ui/apps/dashboard/src/pages/login/index.tsx b/ui/apps/dashboard/src/pages/login/index.tsx
@@ -2,16 +2,97 @@ import i18nInstance from '@/utils/i18n';
 import { Alert, Button, Card, Collapse, Input, message } from 'antd';
 import styles from './index.module.less';
 import { cn } from '@/utils/cn.ts';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Login } from '@/services/auth.ts';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/components/auth';
 
+type CustomEventData = {
+  action: string;
+  token?: string;
+  payload?: {
+    [key: string]: any;
+  };
+};
+
+const isCustomEventData = (data: any): data is CustomEventData => {
+  return typeof data === 'object' && 'action' in data;
+};
+
 const LoginPage = () => {
   const [authToken, setAuthToken] = useState('');
+  const [isAutoLogin, setIsAutoLogin] = useState(false);
   const [messageApi, contextHolder] = message.useMessage();
   const navigate = useNavigate();
   const { setToken } = useAuth();
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      // todo use valid origin !
+      // if (event.origin === "") {
+      // }
+      if (!isCustomEventData(event.data)) return;
+      if (event.data.action === 'token') {
+        const { payload } = event.data;
+        if (
+          payload &&
+          typeof payload === 'object' &&
+          typeof payload.token === 'string'
+        ) {
+          const token: string = payload.token;
+          setAuthToken(token);
+          setIsAutoLogin(true);
+          console.log('auto sign');
+          // setTimeout(() => {}, 300);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    // console.log("window opener ",window.opener);
+    // console.log("window parent ",window.parent);
+    if (window.opener) {
+      (window.opener as Window).postMessage({ action: 'windowReady' }, '*');
+    } else if (window.parent) {
+      window.parent.postMessage({ action: 'frameReady' }, '*');
+    }
+    // window.parent.postMessage({action:"ready"},"*");
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isAutoLogin && authToken) {
+      // console.log("trigger auto sign");
+      // buttonRef.current?.click();
+      const autoLogin = async () => {
+        try {
+          const ret = await Login(authToken);
+          if (ret.code === 200) {
+            await messageApi.success(
+              i18nInstance.t('11427a1edb98cf7efe26ca229d6f2626'),
+            );
+            setTimeout(() => {
+              setToken(authToken);
+              navigate('/overview');
+            }, 1000);
+          } else {
+            await messageApi.error(
+              i18nInstance.t('a831066e2d289e126ff7cbf483c3bad1'),
+            );
+          }
+        } catch (e) {
+          await messageApi.error(
+            i18nInstance.t('b6076a055fe6cc0473e0d313dc58a049'),
+          );
+        }
+      };
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      autoLogin();
+    }
+  }, [isAutoLogin, authToken]);
+
   return (
     <div className={'h-screen w-screen  bg-[#FAFBFC]'}>
       <div className="h-full w-full flex justify-center items-center ">
@@ -23,7 +104,7 @@ const LoginPage = () => {
                 'bg-blue-500 text-white h-[56px] flex items-center px-[16px] text-xl rounded-t-[8px]'
               }
             >
-              Karmada Dashboard
+              Karmada-dashboard
             </div>
           }
         >
@@ -40,7 +121,12 @@ const LoginPage = () => {
                     {
                       key: '1',
                       label: i18nInstance.t('11fa53ed08b11d4753c29bbc8c8fee64'),
-                      children: <code>!!todo</code>,
+                      children: (
+                        <code>
+                          if the token does not load automatically,try to
+                          refresh the page
+                        </code>
+                      ),
                     },
                   ]}
                 />
@@ -54,6 +140,10 @@ const LoginPage = () => {
             rows={6}
             value={authToken}
             onChange={(v) => {
+              // console.log(isAutoLogin);
+              if (isAutoLogin) {
+                setIsAutoLogin(false);
+              }
               setAuthToken(v.target.value);
             }}
           />