feat(web,renderer-app,flat-component): add agora sso

config/.env.development

@@ -2,6 +2,7 @@ NETLESS_APP_IDENTIFIER=n9q1oBxDEeyuBMn1qc0iFw/fLgNSEvdwKjlig
 AGORA_APP_ID=931b86d6781e49a2a255db4ce6e8e804
 GITHUB_CLIENT_ID=9821657775fbc74773f1
 WECHAT_APP_ID=wx1133c2153a45e9b8
+AGORA_OAUTH_CLIENT_ID=flat-dev
 
 CLOUD_STORAGE_OSS_ALIBABA_ACCESS_KEY=LTAI5t9Gb6tzQzzLmB6cTVf7
 CLOUD_STORAGE_OSS_ALIBABA_BUCKET=flat-storage

config/.env.production

@@ -2,6 +2,7 @@ NETLESS_APP_IDENTIFIER=cFjxAJjiEeuUQ0211QCRBw/mO9uJB_DiCIqug
 AGORA_APP_ID=931b86d6781e49a2a255db4ce6e8e804
 GITHUB_CLIENT_ID=71a29285a437998bdfe0
 WECHAT_APP_ID=wx96d522d69d384cce
+AGORA_OAUTH_CLIENT_ID=flat
 
 CLOUD_STORAGE_OSS_ALIBABA_ACCESS_KEY=LTAI5t9Gb6tzQzzLmB6cTVf7
 CLOUD_STORAGE_OSS_ALIBABA_BUCKET=flat-storage

desktop/renderer-app/src/pages/LoginPage/index.tsx

@@ -1,32 +1,36 @@
 import "./index.less";
 
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { constants } from "flat-types";
 import { observer } from "mobx-react-lite";
 import { ipcAsyncByMainWindow, ipcSyncByApp } from "../../utils/ipc";
-import { LoginChannelType, LoginPanel } from "flat-components";
+import { LoginPanel, LoginButton, LoginButtonProviderType } from "flat-components";
 import { LoginDisposer } from "./utils";
 import { githubLogin } from "./githubLogin";
 import { RouteNameType, usePushHistory } from "../../utils/routes";
 import { GlobalStoreContext } from "../../components/StoreProvider";
 import { AppUpgradeModal, AppUpgradeModalProps } from "../../components/AppUpgradeModal";
 import { runtime } from "../../utils/runtime";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
-import { WeChatLogin } from "./WeChatLogin";
 import { useTranslation } from "react-i18next";
 import {
     PRIVACY_URL_EN,
     PRIVACY_URL_CN,
     SERVICE_URL_EN,
     SERVICE_URL_CN,
 } from "../../constants/process";
+import { message } from "antd";
+import WeChatLogin from "./WeChatLogin";
 
 export const LoginPage = observer(function LoginPage() {
     const { i18n } = useTranslation();
     const pushHistory = usePushHistory();
     const globalStore = useContext(GlobalStoreContext);
     const loginDisposer = useRef<LoginDisposer>();
     const [updateInfo, setUpdateInfo] = useState<AppUpgradeModalProps["updateInfo"]>(null);
+    const [isWeChatLogin, setWeChatLogin] = useState<boolean>(false);
+    const [agreementChecked, setAgreementChecked] = useState<boolean>(false);
+
     const sp = useSafePromise();
 
     useEffect(() => {
@@ -61,35 +65,76 @@ export const LoginPage = observer(function LoginPage() {
             });
     }, [sp]);
 
-    const handleLogin = (loginChannel: LoginChannelType): React.ReactElement | undefined => {
-        if (loginDisposer.current) {
-            loginDisposer.current();
-            loginDisposer.current = void 0;
-        }
-
-        switch (loginChannel) {
-            case "github": {
-                loginDisposer.current = githubLogin(authData => {
-                    globalStore.updateUserInfo(authData);
-                    pushHistory(RouteNameType.HomePage);
-                });
-                return;
-            }
-            case "wechat": {
-                return <WeChatLogin />;
+    const handleLogin = useCallback(
+        (loginChannel: LoginButtonProviderType) => {
+            if (loginDisposer.current) {
+                loginDisposer.current();
+                loginDisposer.current = void 0;
             }
-            default: {
-                return;
+
+            const doLogin = (loginChannel: LoginButtonProviderType): void => {
+                switch (loginChannel) {
+                    case "github": {
+                        loginDisposer.current = githubLogin(authData => {
+                            globalStore.updateUserInfo(authData);
+                            pushHistory(RouteNameType.HomePage);
+                        });
+                        return;
+                    }
+                    case "wechat": {
+                        setWeChatLogin(true);
+                        return;
+                    }
+                    default: {
+                        return;
+                    }
+                }
+            };
+            if (agreementChecked) {
+                doLogin(loginChannel);
+            } else {
+                void message.info(i18n.t("agree-terms"));
             }
-        }
-    };
+        },
+        [agreementChecked, globalStore, i18n, pushHistory],
+    );
 
     const privacyURL = i18n.language.startsWith("zh") ? PRIVACY_URL_CN : PRIVACY_URL_EN;
     const serviceURL = i18n.language.startsWith("zh") ? SERVICE_URL_CN : SERVICE_URL_EN;
 
+    function renderButtonList(): React.ReactNode {
+        return (
+            <>
+                <LoginButton
+                    provider="wechat"
+                    text={i18n.t("login-wechat")}
+                    onLogin={handleLogin}
+                />
+                <LoginButton
+                    provider="github"
+                    text={i18n.t("login-github")}
+                    onLogin={handleLogin}
+                />
+            </>
+        );
+    }
+
+    function renderQRCode(): React.ReactNode {
+        return <WeChatLogin />;
+    }
+
     return (
         <div className="login-page-container">
-            <LoginPanel privacyURL={privacyURL} serviceURL={serviceURL} onLogin={handleLogin} />
+            <LoginPanel
+                agreementChecked={agreementChecked}
+                handleClickAgreement={() => setAgreementChecked(!agreementChecked)}
+                handleHideQRCode={() => setWeChatLogin(false)}
+                privacyURL={privacyURL}
+                renderButtonList={renderButtonList}
+                renderQRCode={renderQRCode}
+                serviceURL={serviceURL}
+                showQRCode={isWeChatLogin}
+            />
             <AppUpgradeModal updateInfo={updateInfo} onClose={() => setUpdateInfo(null)} />
         </div>
     );

packages/flat-components/src/components/LoginPage/LoginButton/LoginButton.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { LoginButton, LoginButtonProviderType, LoginButtonProps } from "..";
+import { message } from "antd";
+
+const storyMeta: Meta = {
+    title: "LoginPage/LoginButton",
+    component: LoginButton,
+};
+
+export default storyMeta;
+
+export const Overview: Story<LoginButtonProps> = () => {
+    const { i18n } = useTranslation();
+
+    const handleLogin = (type: LoginButtonProviderType): void => {
+        void message.info(type);
+    };
+
+    return (
+        <>
+            <LoginButton provider="wechat" text={i18n.t("login-wechat")} onLogin={handleLogin} />
+            <LoginButton provider="github" text={i18n.t("login-github")} onLogin={handleLogin} />
+        </>
+    );
+};

packages/flat-components/src/components/LoginPage/LoginChannel/index.less → packages/flat-components/src/components/LoginPage/LoginButton/index.less

@@ -1,9 +1,11 @@
-.login-channel-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+.login-channel-lg {
 
-    > .ant-btn {
+
+    &.ant-btn {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
         width: 272px;
         height: 44px;
         color: #fff;
@@ -18,6 +20,21 @@
         margin-right: 3px;
     }
 }
+
+
+.login-channel-agora {
+    &.ant-btn {
+        background: #089CFD;
+
+        &:hover {
+            background: #45B4FD;
+        }
+        &:active {
+            background: #0675BE;
+        }
+    }
+}
+
 .login-channel-wechat {
     margin-bottom: 12px;
 
@@ -34,6 +51,8 @@
 }
 
 .login-channel-github {
+    margin-bottom: 12px;
+
     &.ant-btn {
         background: #24292e;
 
@@ -44,4 +63,4 @@
             background: #1b1f22;
         }
     }
-}
+}

packages/flat-components/src/components/LoginPage/LoginButton/index.tsx

@@ -0,0 +1,32 @@
+import { Button } from "antd";
+import React from "react";
+import wechatSVG from "./icons/wechat.svg";
+import agoraSVG from "./icons/agora.svg";
+import githubSVG from "./icons/github.svg";
+import "./index.less";
+
+export type LoginButtonProviderType = "wechat" | "github" | "agora";
+
+export type LoginButtonProps = {
+    provider: LoginButtonProviderType;
+    onLogin: (type: LoginButtonProviderType) => void;
+    text: string;
+};
+
+const svgDict: Record<LoginButtonProviderType, string> = {
+    wechat: wechatSVG,
+    agora: agoraSVG,
+    github: githubSVG,
+};
+
+export const LoginButton: React.FC<LoginButtonProps> = ({ provider, onLogin, text }) => {
+    return (
+        <Button
+            className={`login-channel-lg login-channel-${provider}`}
+            onClick={() => onLogin(provider)}
+        >
+            <img src={svgDict[provider]} />
+            {text}
+        </Button>
+    );
+};

packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx

@@ -1,6 +1,9 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
-import { LoginContent, LoginContentProps } from ".";
+import React, { useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { LoginContent, LoginContentProps } from "./index";
+import { message } from "antd";
+import { LoginButton } from "..";
 
 const storyMeta: Meta = {
     title: "LoginPage/LoginContent",
@@ -9,8 +12,41 @@ const storyMeta: Meta = {
 
 export default storyMeta;
 
-export const Overview: Story<LoginContentProps> = args => (
-    <div className="vh-75">
-        <LoginContent {...args} />
-    </div>
-);
+export const Overview: Story<LoginContentProps> = () => {
+    const { i18n } = useTranslation();
+    const [showQRCode, updateShowQRCode] = useState<boolean>(false);
+
+    const [agreement, updateAgreement] = useState<boolean>(false);
+
+    const handleClickAgreement = (): void => {
+        updateAgreement(!agreement);
+    };
+
+    const handleLogin = useCallback(() => {
+        agreement === false && void message.info(i18n.t("agree-terms"));
+    }, [agreement, i18n]);
+
+
+    const { t } = useTranslation();
+
+    function renderButtonList(): React.ReactNode {
+        return (
+            <>
+                <LoginButton provider={"wechat"} text={t("login-wechat")} onLogin={handleLogin} />
+                <LoginButton provider={"github"} text={t("login-github")} onLogin={handleLogin} />
+            </>
+        );
+    }
+
+    return (
+        <div className="vh-75">
+            <LoginContent
+                agreementChecked={agreement}
+                handleClickAgreement={() => updateAgreement(!agreement)}
+                handleHideQRCode={handleHideQRCode}
+                renderButtonList={renderButtonList}
+                showQRCode={showQRCode}
+            />
+        </div>
+    );
+};

packages/flat-components/src/components/LoginPage/LoginContent/index.less

@@ -32,6 +32,9 @@
     width: 21%;
     margin: 0 auto;
     margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
 .login-content-agreement {