Feature: Add login center

src/app/api/index.ts

@@ -282,6 +282,20 @@ const getCaseResourcesList = (() => {
     };
 })();
 
+//
+// user info
+//
+const getUserInfo = (() => {
+    // cache CaseResources data for once load
+    let data;
+    return async (token) => {
+        const getData = defaultAPIFactory(() => request.get('/api/common/accounts/current').query({ token }));
+        if (!data) {
+            data = getData();
+        }
+        return data;
+    };
+})();
 
 const getInformationFlow = (() => {
     // cache CaseResources data for once load
@@ -301,6 +315,9 @@ export default {
     // version
     getLatestVersion,
 
+    // user info
+    getUserInfo,
+
     // utils
     utils,
 

src/app/ui/pages/HomePage/Avatar/index.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from 'react';
+import { Dropdown, Menu, Modal } from 'antd';
+import api from '../../../../api';
+import { machineStore } from '../../../../store/local-storage';
+import styles from './styles.styl';
+import log from '../../../../lib/log';
+
+import defaultAvatarUrl from '../images/default-avatar.png';
+
+const Avatar: React.FC = () => {
+    const [userInfo, setUserInfo] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const [iframeUrl, setIframeUrl] = useState('');
+
+    const showModal = () => {
+        setIsModalVisible(true);
+    };
+    const handleCancel = () => {
+        setIsModalVisible(false);
+    };
+    const handleToken = async (token: string) => {
+        try {
+            setLoading(true);
+            const { body: res } = await api.getUserInfo(token);
+            if (res.code === 200) {
+                setUserInfo(res.data);
+            } if (res.code === 100010110) {
+                log.info(`user login session time out: ${res}`);
+                setUserInfo(null);
+                machineStore.set('machine-token', '');
+            } else {
+                log.info(`userinfo load failed: ${res}`);
+            }
+            setLoading(false);
+        } catch (error) {
+            log.info(`userinfo load error: ${error}`);
+        }
+    };
+    // define Login
+    const handleLogin = () => {
+        if (loading) return;
+        setIframeUrl('https://id.snapmaker.com?postKey=Luban');
+        showModal();
+    };
+    // define Logout
+    const handleLogout = () => {
+        machineStore.set('machine-token', '');
+        setUserInfo(null);
+        setIframeUrl('http://id.snapmaker.com/logout#Luban');
+        showModal();
+    };
+    // define Main
+    const handleMain = () => {
+        setIframeUrl('https://snapmaker.com');
+        showModal();
+    };
+
+    useEffect(() => {
+        window.addEventListener(
+            'message',
+            (event) => {
+                setIframeUrl('https://snapmaker.com');
+                const token = event.data;
+                if (token && typeof token === 'string') {
+                    if (token === 'logout') {
+                        setIframeUrl('https://snapmaker.com');
+                    } else {
+                        handleToken(token);
+                        machineStore.set('machine-token', token);
+                    }
+                }
+            }
+        );
+        // get token from local storage
+        const machineToken = machineStore.get('machine-token');
+        if (machineToken) {
+            handleToken(machineToken);
+        }
+    }, []);
+
+    const menu = (
+        <Menu>
+            <Menu.Item key="profile">
+                <div className={styles.userInfoName}>{userInfo?.nickname}</div>
+            </Menu.Item>
+            <Menu.Item key="com" onClick={handleMain}>
+                Snapmaker Website
+            </Menu.Item>
+            <Menu.Item key="logout" onClick={handleLogout}>
+                Logout
+            </Menu.Item>
+        </Menu>
+    );
+
+    return (
+        <div id="avatar-box" className={styles.avatarBox}>
+            {
+                userInfo?.id ? (
+                    <Dropdown overlay={menu} trigger={['click', 'hover']}>
+                        <div className={styles.userInfo}>
+                            <div className={styles.imgBox}>
+                                <img src={userInfo?.icon} alt="avatar" />
+                            </div>
+                        </div>
+                    </Dropdown>
+                ) : (
+                    <div
+                        role="button"
+                        tabIndex={0}
+                        onClick={handleLogin}
+                        onKeyDown={handleLogin}
+                        aria-disabled={loading}
+                        className={styles.imgBox}
+                    >
+                        <img
+                            src={defaultAvatarUrl}
+                            alt="avatar"
+                        />
+                    </div>
+                )
+            }
+
+            <Modal
+                open={isModalVisible}
+                onCancel={handleCancel}
+                className={styles.iframeModal}
+                footer={null}
+                getContainer={() => document.getElementById('avatar-box')}
+            >
+                <div className={styles.iframeBox}>
+                    <iframe id="dashboard" key={iframeUrl} src={iframeUrl} title="iframe">
+                        <p>Your browser does not support the iframe tag.</p>
+                    </iframe>
+                </div>
+            </Modal>
+        </div>
+    );
+};
+
+export default Avatar;

src/app/ui/pages/HomePage/Avatar/styles.styl

@@ -0,0 +1,47 @@
+.avatarBox {
+    position: absolute;
+    top: 0;
+    right: 2.5%;
+    height: 50px;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.userInfo {
+    display: flex;
+    align-items: center;
+}
+.userInfoName {
+    font-size: 16px;
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+.imgBox {
+    width: 40px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    img {
+        width: 40px;
+        height: 40px;
+    }
+}
+
+.iframeModal {
+    width: 90% !important;
+    max-width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    z-index: 99999;
+}
+
+.iframeBox {
+    padding: 10px;
+    iframe {
+        border: none;
+        height: 800px;
+        width: 100%;
+    }
+}

src/app/ui/pages/HomePage/index.tsx

@@ -15,7 +15,7 @@ import MoreInfo from './MoreInfo';
 import StartProject from './StartProject';
 import StarterGuideModal from './modals/StarterGuideModal';
 import styles from './styles.styl';
-
+import Avatar from './Avatar';
 
 interface HomePageProps {
     isPopup?: boolean;
@@ -98,6 +98,7 @@ const HomePage: React.FC<HomePageProps> = (props) => { // Todo, what's the props
                     />
                 )
             }
+            <Avatar />
             <StartProject />
             <div className={classNames(styles.secondLine, isPopup ? styles.popup : '')} ref={resourcesBlock} id="second-line">
                 <CaseLibrary {...props} />

src/server/services/api/api-online-resources-service.js

@@ -87,3 +87,24 @@ export function getInformationFlowData(req, res) {
             log.error('get information flow err:', JSON.stringify(err));
         });
 }
+
+const addAuthorization = (token) => {
+    return function (request) {
+        request.set('Authorization', `Bearer ${token}`);
+        return request;
+    };
+};
+
+export function getUserInfoData(req, res) {
+    const userDomain = 'https://account.snapmaker.com';
+    const { token } = req.query;
+    agent.use(addAuthorization(token));
+    agent.get(`${userDomain}/api/common/accounts/current`)
+        .then((result) => {
+            res.status(200).send({
+                ...result.body
+            });
+        }).catch((err) => {
+            log.error('get information flow err:', JSON.stringify(err));
+        });
+}

src/server/services/index.ts

@@ -211,6 +211,7 @@ function registerApis(app) {
     app.get(urljoin(settings.route, 'api/svg-shape-label/list'), api.onlineResourcesService.getSvgShapeLabelList);
 
     app.get(urljoin(settings.route, 'api/information-flow'), api.onlineResourcesService.getInformationFlowData);
+    app.get(urljoin(settings.route, 'api/common/accounts/current'), api.onlineResourcesService.getUserInfoData);
 }
 
 export {