From abf91340e4fac23309a2b1aedf14df5eb391b75c Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Thu, 27 Jan 2022 15:24:47 +0800 Subject: [PATCH 01/10] refactor(web,electron,component): login-panel --- config/.env.development | 1 + config/.env.production | 1 + desktop/renderer-app/package.json | 2 +- .../src/pages/LoginPage/index.tsx | 68 +++++++++-- .../LoginPage/LoginButton/icons/agora.svg | 1 + .../icons/github.svg | 0 .../icons/google.svg | 0 .../icons/wechat.svg | 0 .../{LoginChannel => LoginButton}/index.less | 29 ++--- .../LoginPage/LoginButton/index.tsx | 29 +++++ .../LoginChannel/LoginChannel.stories.tsx | 17 --- .../LoginPage/LoginChannel/index.tsx | 29 ----- .../LoginContent/LoginContent.stories.tsx | 53 +++++++-- .../{ => LoginContent}/icons/qr-code.svg | 0 .../LoginPage/LoginContent/index.tsx | 109 +++++++++--------- .../LoginPage/LoginPanel.stories.tsx | 86 ++++++++++---- .../src/components/LoginPage/index.less | 21 ++++ .../src/components/LoginPage/index.tsx | 10 +- .../src/theme/antd.mod.stories.tsx | 10 +- packages/flat-i18n/locales/en.json | 1 + packages/flat-i18n/locales/zh-CN.json | 1 + .../api-middleware/flatServer/constants.ts | 1 + web/flat-web/src/constants/process.ts | 4 + .../src/pages/LoginPage/agoraLogin.ts | 47 ++++++++ web/flat-web/src/pages/LoginPage/index.tsx | 108 +++++++++++++++-- web/flat-web/src/utils/routes.ts | 19 ++- web/flat-web/typings/global.d.ts | 2 + 27 files changed, 465 insertions(+), 184 deletions(-) create mode 100644 packages/flat-components/src/components/LoginPage/LoginButton/icons/agora.svg rename packages/flat-components/src/components/LoginPage/{LoginChannel => LoginButton}/icons/github.svg (100%) rename packages/flat-components/src/components/LoginPage/{LoginChannel => LoginButton}/icons/google.svg (100%) rename packages/flat-components/src/components/LoginPage/{LoginChannel => LoginButton}/icons/wechat.svg (100%) rename packages/flat-components/src/components/LoginPage/{LoginChannel => LoginButton}/index.less (59%) create mode 100644 packages/flat-components/src/components/LoginPage/LoginButton/index.tsx delete mode 100644 packages/flat-components/src/components/LoginPage/LoginChannel/LoginChannel.stories.tsx delete mode 100644 packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx rename packages/flat-components/src/components/LoginPage/{ => LoginContent}/icons/qr-code.svg (100%) create mode 100644 web/flat-web/src/pages/LoginPage/agoraLogin.ts diff --git a/config/.env.development b/config/.env.development index 9e6a0018f0e..870710b6204 100644 --- a/config/.env.development +++ b/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 diff --git a/config/.env.production b/config/.env.production index 9dfbbb1c5f1..647907399da 100644 --- a/config/.env.production +++ b/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 diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json index 38bf846b13a..01eea2c361f 100644 --- a/desktop/renderer-app/package.json +++ b/desktop/renderer-app/package.json @@ -90,7 +90,7 @@ "vite-plugin-eslint": "^1.3.0" }, "scripts": { - "start": "cross-env NODE_ENV=development vite", + "start": "cross-env NODE_ENV=development vite --force", "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=6144\" vite build", "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true NODE_OPTIONS=\"--max-old-space-size=6144\" vite build", "lint": "lint-staged" diff --git a/desktop/renderer-app/src/pages/LoginPage/index.tsx b/desktop/renderer-app/src/pages/LoginPage/index.tsx index 9482e59755f..2aad179befd 100644 --- a/desktop/renderer-app/src/pages/LoginPage/index.tsx +++ b/desktop/renderer-app/src/pages/LoginPage/index.tsx @@ -1,10 +1,10 @@ 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"; @@ -12,7 +12,6 @@ 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, @@ -20,6 +19,8 @@ import { 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(); @@ -27,6 +28,9 @@ export const LoginPage = observer(function LoginPage() { const globalStore = useContext(GlobalStoreContext); const loginDisposer = useRef(); const [updateInfo, setUpdateInfo] = useState(null); + const [isWeChatLogin, setWeChatLogin] = useState(false); + const [agreementChecked, setAgreementChecked] = useState(false); + const sp = useSafePromise(); useEffect(() => { @@ -61,12 +65,7 @@ export const LoginPage = observer(function LoginPage() { }); }, [sp]); - const handleLogin = (loginChannel: LoginChannelType): React.ReactElement | undefined => { - if (loginDisposer.current) { - loginDisposer.current(); - loginDisposer.current = void 0; - } - + const doLogin = (loginChannel: LoginButtonProviderType): void => { switch (loginChannel) { case "github": { loginDisposer.current = githubLogin(authData => { @@ -76,7 +75,8 @@ export const LoginPage = observer(function LoginPage() { return; } case "wechat": { - return ; + setWeChatLogin(true); + return; } default: { return; @@ -84,12 +84,58 @@ export const LoginPage = observer(function LoginPage() { } }; + const handleLogin = useCallback( + (loginChannel: LoginButtonProviderType) => { + if (loginDisposer.current) { + loginDisposer.current(); + loginDisposer.current = void 0; + } + if (agreementChecked) { + doLogin(loginChannel); + } else { + void message.info(i18n.t("agree-terms")); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [agreementChecked], + ); + 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 ( + <> + + + + ); + } + + function renderQRCode(): React.ReactNode { + return ; + } + return (
- + setAgreementChecked(!agreementChecked)} + handleHideQRCode={() => setWeChatLogin(false)} + privacyURL={privacyURL} + renderButtonList={renderButtonList} + renderQRCode={renderQRCode} + serviceURL={serviceURL} + showQRCode={isWeChatLogin} + /> setUpdateInfo(null)} />
); diff --git a/packages/flat-components/src/components/LoginPage/LoginButton/icons/agora.svg b/packages/flat-components/src/components/LoginPage/LoginButton/icons/agora.svg new file mode 100644 index 00000000000..999295af554 --- /dev/null +++ b/packages/flat-components/src/components/LoginPage/LoginButton/icons/agora.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/icons/github.svg b/packages/flat-components/src/components/LoginPage/LoginButton/icons/github.svg similarity index 100% rename from packages/flat-components/src/components/LoginPage/LoginChannel/icons/github.svg rename to packages/flat-components/src/components/LoginPage/LoginButton/icons/github.svg diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/icons/google.svg b/packages/flat-components/src/components/LoginPage/LoginButton/icons/google.svg similarity index 100% rename from packages/flat-components/src/components/LoginPage/LoginChannel/icons/google.svg rename to packages/flat-components/src/components/LoginPage/LoginButton/icons/google.svg diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/icons/wechat.svg b/packages/flat-components/src/components/LoginPage/LoginButton/icons/wechat.svg similarity index 100% rename from packages/flat-components/src/components/LoginPage/LoginChannel/icons/wechat.svg rename to packages/flat-components/src/components/LoginPage/LoginButton/icons/wechat.svg diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/index.less b/packages/flat-components/src/components/LoginPage/LoginButton/index.less similarity index 59% rename from packages/flat-components/src/components/LoginPage/LoginChannel/index.less rename to packages/flat-components/src/components/LoginPage/LoginButton/index.less index 9fc4f5a655c..d77a7d8ff84 100644 --- a/packages/flat-components/src/components/LoginPage/LoginChannel/index.less +++ b/packages/flat-components/src/components/LoginPage/LoginButton/index.less @@ -1,23 +1,16 @@ -.login-channel-container { - display: flex; - flex-direction: column; - align-items: center; - - > .ant-btn { - width: 272px; - height: 44px; - color: #fff; - border: none; +.login-channel-agora { + &.ant-btn { + background: #089CFD; - span { - vertical-align: middle; + &:hover { + background: #45B4FD; + } + &:active { + background: #0675BE; } - } - - img { - margin-right: 3px; } } + .login-channel-wechat { margin-bottom: 12px; @@ -34,6 +27,8 @@ } .login-channel-github { + margin-bottom: 12px; + &.ant-btn { background: #24292e; @@ -44,4 +39,4 @@ background: #1b1f22; } } -} +} \ No newline at end of file diff --git a/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx b/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx new file mode 100644 index 00000000000..49cf2b383b5 --- /dev/null +++ b/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx @@ -0,0 +1,29 @@ +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"; + +type LoginButtonProps = { + provider: LoginButtonProviderType; + onLogin: (type: LoginButtonProviderType) => void; + text: string; +}; + +const svgDict: Record = { + wechat: wechatSVG, + agora: agoraSVG, + github: githubSVG, +}; + +export const LoginButton: React.FC = ({ provider, onLogin, text }) => { + return ( + + ); +}; diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/LoginChannel.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginChannel/LoginChannel.stories.tsx deleted file mode 100644 index 003f7b0a35b..00000000000 --- a/packages/flat-components/src/components/LoginPage/LoginChannel/LoginChannel.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Meta, Story } from "@storybook/react"; -import React from "react"; -import { LoginChannel, LoginChannelProps } from "../LoginChannel"; - -const storyMeta: Meta = { - title: "LoginPage/LoginChannel", - component: LoginChannel, -}; - -export default storyMeta; - -export const Overview: Story = args => ( -
- -
-); -Overview.args = {}; diff --git a/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx b/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx deleted file mode 100644 index a03b61ed5af..00000000000 --- a/packages/flat-components/src/components/LoginPage/LoginChannel/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import wechatSVG from "./icons/wechat.svg"; -import githubSVG from "./icons/github.svg"; -import "./index.less"; - -import React from "react"; -import { Button } from "antd"; -import { useTranslation } from "react-i18next"; - -export type LoginChannelType = "wechat" | "github"; - -export interface LoginChannelProps { - onLogin: (loginChannel: LoginChannelType) => void; -} - -export const LoginChannel: React.FC = ({ onLogin }) => { - const { t } = useTranslation(); - return ( -
- - -
- ); -}; diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx index d6a1e164a61..e6864f73b81 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx +++ b/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,44 @@ const storyMeta: Meta = { export default storyMeta; -export const Overview: Story = args => ( -
- -
-); +export const Overview: Story = () => { + const { i18n } = useTranslation(); + const [showQRCode, updateShowQRCode] = useState(false); + + const [agreement, updateAgreement] = useState(false); + + const handleClickAgreement = (): void => { + updateAgreement(!agreement); + }; + + const handleLogin = useCallback(() => { + agreement === false && void message.info(i18n.t("agree-terms")); + }, [agreement, i18n]); + + const handleHideQRCode = (): void => { + updateShowQRCode(!showQRCode); + }; + + const { t } = useTranslation(); + + function renderButtonList(): React.ReactNode { + return ( + <> + + + + ); + } + + return ( +
+ +
+ ); +}; diff --git a/packages/flat-components/src/components/LoginPage/icons/qr-code.svg b/packages/flat-components/src/components/LoginPage/LoginContent/icons/qr-code.svg similarity index 100% rename from packages/flat-components/src/components/LoginPage/icons/qr-code.svg rename to packages/flat-components/src/components/LoginPage/LoginContent/icons/qr-code.svg diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx index 860ef5a3a51..4ea06bb89e0 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx @@ -1,79 +1,82 @@ /* eslint react/jsx-no-target-blank: off */ -import logoSVG from "./icons/logo.svg"; import "./index.less"; -import React, { useState } from "react"; -import { LoginChannel, LoginChannelType } from "../LoginChannel"; +import logoSVG from "./icons/logo.svg"; +import QRCodeSVG from "./icons/qr-code.svg"; +import React from "react"; import { CSSTransition, SwitchTransition } from "react-transition-group"; -import { message, Checkbox } from "antd"; import { useTranslation } from "react-i18next"; +import { Checkbox } from "antd"; export interface LoginContentProps { - onLogin: (loginChannel: LoginChannelType) => React.ReactElement | undefined; + showQRCode: boolean; + handleHideQRCode: () => void; + agreementChecked: boolean; + handleClickAgreement: () => void; + renderButtonList: () => React.ReactNode; + renderQRCode?: () => React.ReactNode; privacyURL?: string; serviceURL?: string; } -export const LoginContent: React.FC = ({ onLogin, privacyURL, serviceURL }) => { +export const LoginContent: React.FC = ({ + showQRCode, + handleHideQRCode, + agreementChecked, + handleClickAgreement, + privacyURL, + serviceURL, + renderButtonList, + renderQRCode = () => , +}) => { const { t } = useTranslation(); - const [inPageLogin, setInPageLogin] = useState(); - const [isChecked, setIsChecked] = useState(false); - return ( - {inPageLogin ? ( -
+ - ) : ( -
-
- - {t("welcome-to-Flat")} - - {t("online-interaction-to-synchronize-ideas")} - -
-
- { - if (isChecked) { - setInPageLogin(onLogin(loginChannel)); - } else { - void message.info(t("agree-terms")); - } - }} - /> -
-
- setIsChecked(!isChecked)} - > - {t("have-read-and-agree")}{" "} - - {t("privacy-agreement")} - {" "} - {t("and")}{" "} - - {t("service-policy")} - - -
-
- )} + ) : ( + <> +
+ + {t("welcome-to-Flat")} + + {t("online-interaction-to-synchronize-ideas")} + +
+
+
{renderButtonList()}
+
+
+ + {t("have-read-and-agree")}{" "} + + {t("privacy-agreement")} + {" "} + {t("and")}{" "} + + {t("service-policy")} + + +
+ + )} +
); diff --git a/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx index b6b11c6c158..636ade444c2 100644 --- a/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx @@ -1,9 +1,8 @@ -import QRCodeSVG from "./icons/qr-code.svg"; - import { Meta, Story } from "@storybook/react"; -import { Modal } from "antd"; -import React from "react"; -import { LoginChannelType, LoginPanel, LoginPanelProps } from "."; +import { message, Modal } from "antd"; +import React, { useState } from "react"; +import { LoginButton, LoginButtonProviderType, LoginPanel, LoginPanelProps } from "."; +import { useTranslation } from "react-i18next"; const storyMeta: Meta = { title: "LoginPage/LoginPanel", @@ -31,26 +30,63 @@ const storyMeta: Meta = { export default storyMeta; -const handleLogin = (loginChannel: LoginChannelType): React.ReactElement | undefined => { - switch (loginChannel) { - case "wechat": { - return ; - } - case "github": { - Modal.info({ content: "This is Github Login" }); - return; - } - default: { - return; - } +export const PlayableExample: Story = () => { + const [isWeChatLogin, setWeChatLogin] = useState(false); + + const handleHideQRCode = (): void => { + setWeChatLogin(!isWeChatLogin); + }; + + const [agreement, setAgreement] = useState(false); + + const { i18n } = useTranslation(); + + function renderButtonList(): React.ReactNode { + const handleLogin = (loginChannel: LoginButtonProviderType): void => { + if (agreement) { + switch (loginChannel) { + case "wechat": { + setWeChatLogin(true); + return; + } + case "github": { + Modal.info({ content: "This is Github Login" }); + return; + } + default: { + return; + } + } + } else { + void message.info(i18n.t("agree-terms")); + } + }; + + return ( + <> + + + + ); } -}; -export const PlayableExample: Story = args => ( -
- -
-); -PlayableExample.args = { - onLogin: handleLogin, + return ( +
+ setAgreement(!agreement)} + handleHideQRCode={handleHideQRCode} + renderButtonList={renderButtonList} + showQRCode={isWeChatLogin} + /> +
+ ); }; diff --git a/packages/flat-components/src/components/LoginPage/index.less b/packages/flat-components/src/components/LoginPage/index.less index 98b60fcb3d3..02c71ea4f9b 100644 --- a/packages/flat-components/src/components/LoginPage/index.less +++ b/packages/flat-components/src/components/LoginPage/index.less @@ -47,3 +47,24 @@ .login-panel-inner-content-container { margin-top: 178px; } + +.login-channel-container { + display: flex; + flex-direction: column; + align-items: center; + + > .ant-btn { + width: 272px; + height: 44px; + color: #fff; + border: none; + + span { + vertical-align: middle; + } + } + + img { + margin-right: 3px; + } +} diff --git a/packages/flat-components/src/components/LoginPage/index.tsx b/packages/flat-components/src/components/LoginPage/index.tsx index 96f937695e9..ffc28a8e10b 100644 --- a/packages/flat-components/src/components/LoginPage/index.tsx +++ b/packages/flat-components/src/components/LoginPage/index.tsx @@ -5,15 +5,11 @@ import bgBottomLeftSVG from "./icons/bg-bottom-left.svg"; import "./index.less"; import React from "react"; -import { LoginContent, LoginContentProps } from "./LoginContent"; +import { LoginContent, LoginContentProps } from "./LoginContent/index"; -export type { LoginChannelType } from "./LoginChannel"; +export * from "./LoginButton"; -export interface LoginPanelProps { - onLogin: LoginContentProps["onLogin"]; - privacyURL?: string; - serviceURL?: string; -} +export interface LoginPanelProps extends LoginContentProps {} export const LoginPanel: React.FC = props => { return ( diff --git a/packages/flat-components/src/theme/antd.mod.stories.tsx b/packages/flat-components/src/theme/antd.mod.stories.tsx index ce9c074f2d4..6b40adafe55 100644 --- a/packages/flat-components/src/theme/antd.mod.stories.tsx +++ b/packages/flat-components/src/theme/antd.mod.stories.tsx @@ -27,15 +27,15 @@ export const Buttons: Story = () => { Dashed Text Link - + Danger - + Danger - }> - }> - }> + } shape="circle" type="primary"> + } shape="circle" type="default"> + } shape="circle" type="dashed">
Ghost
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json index 5cd62300779..c6b99adf4b3 100644 --- a/packages/flat-i18n/locales/en.json +++ b/packages/flat-i18n/locales/en.json @@ -110,6 +110,7 @@ "copy": "Copy", "login-github": "Sign In with GitHub", "login-wechat": "Sign In with WeChat", + "login-agora": "Sign In with Agora", "agree-terms": "Please agree to the terms of service first", "and": "and", "have-read-and-agree": "Have read and agree", diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json index b01941506b9..37174419735 100644 --- a/packages/flat-i18n/locales/zh-CN.json +++ b/packages/flat-i18n/locales/zh-CN.json @@ -111,6 +111,7 @@ "copy": "复制", "login-wechat": "微信登录", "login-github": "GitHub 登录", + "login-agora": "声网登录", "welcome-to-Flat": "欢迎使用 Flat", "online-interaction-to-synchronize-ideas": "在线互动，让想法同步", "agree-terms": "请先同意服务条款", diff --git a/web/flat-web/src/api-middleware/flatServer/constants.ts b/web/flat-web/src/api-middleware/flatServer/constants.ts index 6791d4fb6f4..87277d46c80 100644 --- a/web/flat-web/src/api-middleware/flatServer/constants.ts +++ b/web/flat-web/src/api-middleware/flatServer/constants.ts @@ -7,6 +7,7 @@ export const FLAT_SERVER_VERSIONS = { } as const; export const FLAT_SERVER_LOGIN = { + AGORA_CALLBACK: `${FLAT_SERVER_VERSIONS.V1}/login/agora/callback`, GITHUB_CALLBACK: `${FLAT_SERVER_VERSIONS.V1}/login/github/callback?platform=web`, WECHAT_CALLBACK: `${FLAT_SERVER_VERSIONS.V1}/login/weChat/web/callback`, } as const; diff --git a/web/flat-web/src/constants/process.ts b/web/flat-web/src/constants/process.ts index c55b69d308b..50990be2927 100644 --- a/web/flat-web/src/constants/process.ts +++ b/web/flat-web/src/constants/process.ts @@ -16,6 +16,10 @@ export const AGORA = Object.freeze({ APP_ID: process.env.AGORA_APP_ID, }); +export const AGORA_OAUTH = Object.freeze({ + CLIENT_ID: process.env.AGORA_OAUTH_CLIENT_ID, +}); + export const WECHAT = Object.freeze({ APP_ID: process.env.WECHAT_APP_ID, }); diff --git a/web/flat-web/src/pages/LoginPage/agoraLogin.ts b/web/flat-web/src/pages/LoginPage/agoraLogin.ts new file mode 100644 index 00000000000..e6d04d02e62 --- /dev/null +++ b/web/flat-web/src/pages/LoginPage/agoraLogin.ts @@ -0,0 +1,47 @@ +import { setAuthUUID, loginProcess } from "../../api-middleware/flatServer"; +import { v4 as uuidv4 } from "uuid"; +import { LoginExecutor } from "./utils"; +import { errorTips } from "../../components/Tips/ErrorTips"; +import { FLAT_SERVER_LOGIN } from "../../api-middleware/flatServer/constants"; +import { AGORA_OAUTH } from "../../constants/process"; + +export const agoraLogin: LoginExecutor = onSuccess => { + let timer = NaN; + const authUUID = uuidv4(); + + function getAgoraURL(authUUID: string): string { + const redirectURL = encodeURIComponent(FLAT_SERVER_LOGIN.AGORA_CALLBACK); + return `http://sso2.agora.io/api/v0/oauth/authorize?response_type=code&client_id=${AGORA_OAUTH.CLIENT_ID}&redirect_uri=${redirectURL}&scope=basic_info&state=${authUUID}`; + } + + void (async () => { + try { + await setAuthUUID(authUUID); + } catch (err) { + errorTips(err); + } + + void window.open(getAgoraURL(authUUID)); + + const agoraLoginProcessRequest = async (): Promise => { + try { + const data = await loginProcess(authUUID); + + if (!data.name) { + timer = window.setTimeout(agoraLoginProcessRequest, 2000); + return; + } + + onSuccess(data); + } catch (err) { + errorTips(err); + } + }; + + void agoraLoginProcessRequest(); + })(); + + return () => { + window.clearTimeout(timer); + }; +}; diff --git a/web/flat-web/src/pages/LoginPage/index.tsx b/web/flat-web/src/pages/LoginPage/index.tsx index f5449e46a24..0ff86fd6e67 100644 --- a/web/flat-web/src/pages/LoginPage/index.tsx +++ b/web/flat-web/src/pages/LoginPage/index.tsx @@ -1,24 +1,31 @@ import "./style.less"; -import React, { useContext, useEffect, useRef } from "react"; +import React, { useCallback, useContext, useEffect, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; -import { LoginChannelType, LoginPanel } from "flat-components"; +import { LoginButton, LoginButtonProviderType, LoginPanel } from "flat-components"; import { LoginDisposer } from "./utils"; import { githubLogin } from "./githubLogin"; -import { RouteNameType, usePushHistory } from "../../utils/routes"; +import { RouteNameType, usePushHistory, useURLParams } from "../../utils/routes"; import { GlobalStoreContext } from "../../components/StoreProvider"; import { WeChatLogin } from "./WeChatLogin"; import { joinRoomHandler } from "../utils/join-room-handler"; import { PRIVACY_URL, PRIVACY_URL_CN, SERVICE_URL, SERVICE_URL_CN } from "../../constants/process"; import { useTranslation } from "react-i18next"; +import { agoraLogin } from "./agoraLogin"; +import { message } from "antd"; export const LoginPage = observer(function LoginPage() { const { i18n } = useTranslation(); const pushHistory = usePushHistory(); const globalStore = useContext(GlobalStoreContext); const loginDisposer = useRef(); + + const [isWeChatLogin, setWeChatLogin] = useState(false); + const [agreement, setAgreement] = useState(false); const roomUUID = sessionStorage.getItem("roomUUID"); + const urlParams = useURLParams(); + useEffect(() => { return () => { if (loginDisposer.current) { @@ -29,13 +36,23 @@ export const LoginPage = observer(function LoginPage() { }; }, []); - const handleLogin = (loginChannel: LoginChannelType): React.ReactElement | undefined => { - if (loginDisposer.current) { - loginDisposer.current(); - loginDisposer.current = void 0; - } - + const doLogin = (loginChannel: LoginButtonProviderType): void => { switch (loginChannel) { + case "agora": { + loginDisposer.current = agoraLogin(async authData => { + globalStore.updateUserInfo(authData); + if (roomUUID) { + if (globalStore.isTurnOffDeviceTest) { + await joinRoomHandler(roomUUID, pushHistory); + } else { + pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); + } + } else { + pushHistory(RouteNameType.HomePage); + } + }); + return; + } case "github": { loginDisposer.current = githubLogin(async authData => { globalStore.updateUserInfo(authData); @@ -52,7 +69,8 @@ export const LoginPage = observer(function LoginPage() { return; } case "wechat": { - return ; + setWeChatLogin(true); + return; } default: { return; @@ -60,12 +78,80 @@ export const LoginPage = observer(function LoginPage() { } }; + const handleLogin = useCallback( + (loginChannel: LoginButtonProviderType) => { + if (loginDisposer.current) { + loginDisposer.current(); + loginDisposer.current = void 0; + } + if (agreement) { + doLogin(loginChannel); + } else { + void message.info(i18n.t("agree-terms")); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [agreement], + ); + const privacyURL = i18n.language.startsWith("zh") ? PRIVACY_URL_CN : PRIVACY_URL; const serviceURL = i18n.language.startsWith("zh") ? SERVICE_URL_CN : SERVICE_URL; + function renderButtonList({ utm_source }: Record): React.ReactNode { + if (utm_source === "agora") { + return ( + <> + + + + + ); + } else { + return ( + <> + + + + ); + } + } + + function renderQRCode(): React.ReactNode { + return ; + } + return (
- + setAgreement(!agreement)} + handleHideQRCode={() => setWeChatLogin(false)} + privacyURL={privacyURL} + renderButtonList={() => renderButtonList(urlParams)} + renderQRCode={renderQRCode} + serviceURL={serviceURL} + showQRCode={isWeChatLogin} + />
); }); diff --git a/web/flat-web/src/utils/routes.ts b/web/flat-web/src/utils/routes.ts index 1d5a58058f5..60b69dca55d 100644 --- a/web/flat-web/src/utils/routes.ts +++ b/web/flat-web/src/utils/routes.ts @@ -1,6 +1,6 @@ import { routeConfig, RouteConfig, RouteNameType, ExtraRouteConfig } from "../route-config"; import { generatePath, useHistory } from "react-router-dom"; -import { useCallback } from "react"; +import { useCallback, useMemo } from "react"; export { RouteNameType } from "../route-config"; @@ -77,3 +77,20 @@ export function useReplaceHistory(): ( return pushHistory; } + +/** + * get url parameters + */ +export function useURLParams(): Record { + const urlSearchParams: Record = new URLSearchParams(window.location.search); + + const params = useMemo(() => { + const res: Record = {}; + for (const [key, value] of urlSearchParams.entries()) { + res[key] = value; + } + return res; + }, [urlSearchParams]); + + return params; +} diff --git a/web/flat-web/typings/global.d.ts b/web/flat-web/typings/global.d.ts index 4817d42aa2e..30bebce73b8 100644 --- a/web/flat-web/typings/global.d.ts +++ b/web/flat-web/typings/global.d.ts @@ -19,6 +19,8 @@ declare namespace NodeJS { AGORA_APP_ID: string; + AGORA_OAUTH_CLIENT_ID: string; + GITHUB_CLIENT_ID: string; WECHAT_APP_ID: string; From 21cf1706eb9496a528deba1700adaeea07575a6a Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Thu, 27 Jan 2022 15:31:41 +0800 Subject: [PATCH 02/10] chore(scripts): remove force refresh cache --- desktop/renderer-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json index cd340caf512..b0763db0f16 100644 --- a/desktop/renderer-app/package.json +++ b/desktop/renderer-app/package.json @@ -90,7 +90,7 @@ "vite-plugin-eslint": "^1.3.0" }, "scripts": { - "start": "cross-env NODE_ENV=development vite --force", + "start": "cross-env NODE_ENV=development vite", "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=6144\" vite build", "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true NODE_OPTIONS=\"--max-old-space-size=6144\" vite build", "lint": "lint-staged" From 1606484baf906c900836dfeedb14436aec89c32b Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Thu, 27 Jan 2022 16:44:24 +0800 Subject: [PATCH 03/10] fix(renderer-app,web): code format and add button stories & refactor button styles --- .../src/pages/LoginPage/index.tsx | 41 ++++---- .../LoginButton/LoginButton.stories.tsx | 27 ++++++ .../LoginPage/LoginButton/index.less | 24 +++++ .../LoginPage/LoginButton/index.tsx | 7 +- .../LoginPage/LoginContent/index.less | 3 + .../LoginPage/LoginContent/index.tsx | 4 +- .../src/components/LoginPage/index.less | 23 +---- web/flat-web/src/pages/LoginPage/index.tsx | 96 ++++++++----------- 8 files changed, 123 insertions(+), 102 deletions(-) create mode 100644 packages/flat-components/src/components/LoginPage/LoginButton/LoginButton.stories.tsx diff --git a/desktop/renderer-app/src/pages/LoginPage/index.tsx b/desktop/renderer-app/src/pages/LoginPage/index.tsx index 2aad179befd..1087b4679f5 100644 --- a/desktop/renderer-app/src/pages/LoginPage/index.tsx +++ b/desktop/renderer-app/src/pages/LoginPage/index.tsx @@ -65,39 +65,38 @@ export const LoginPage = observer(function LoginPage() { }); }, [sp]); - 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; - } - } - }; - const handleLogin = useCallback( (loginChannel: LoginButtonProviderType) => { if (loginDisposer.current) { loginDisposer.current(); loginDisposer.current = void 0; } + + 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")); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [agreementChecked], + [agreementChecked, globalStore, i18n, pushHistory], ); const privacyURL = i18n.language.startsWith("zh") ? PRIVACY_URL_CN : PRIVACY_URL_EN; diff --git a/packages/flat-components/src/components/LoginPage/LoginButton/LoginButton.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginButton/LoginButton.stories.tsx new file mode 100644 index 00000000000..bf8d6cac191 --- /dev/null +++ b/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 = () => { + const { i18n } = useTranslation(); + + const handleLogin = (type: LoginButtonProviderType): void => { + void message.info(type); + }; + + return ( + <> + + + + ); +}; diff --git a/packages/flat-components/src/components/LoginPage/LoginButton/index.less b/packages/flat-components/src/components/LoginPage/LoginButton/index.less index d77a7d8ff84..3cb728a119c 100644 --- a/packages/flat-components/src/components/LoginPage/LoginButton/index.less +++ b/packages/flat-components/src/components/LoginPage/LoginButton/index.less @@ -1,3 +1,27 @@ +.login-channel-lg { + + + &.ant-btn { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 272px; + height: 44px; + color: #fff; + border: none; + + span { + vertical-align: middle; + } + } + + img { + margin-right: 3px; + } +} + + .login-channel-agora { &.ant-btn { background: #089CFD; diff --git a/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx b/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx index 49cf2b383b5..e1b84be2966 100644 --- a/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginButton/index.tsx @@ -7,7 +7,7 @@ import "./index.less"; export type LoginButtonProviderType = "wechat" | "github" | "agora"; -type LoginButtonProps = { +export type LoginButtonProps = { provider: LoginButtonProviderType; onLogin: (type: LoginButtonProviderType) => void; text: string; @@ -21,7 +21,10 @@ const svgDict: Record = { export const LoginButton: React.FC = ({ provider, onLogin, text }) => { return ( - diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.less b/packages/flat-components/src/components/LoginPage/LoginContent/index.less index c2c517d94d4..c7c2a3b9727 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/index.less +++ b/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 { diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx index 4ea06bb89e0..72b8bb4338f 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginContent/index.tsx @@ -56,9 +56,7 @@ export const LoginContent: React.FC = ({ {t("online-interaction-to-synchronize-ideas")} -
-
{renderButtonList()}
-
+
{renderButtonList()}
.ant-btn { - width: 272px; - height: 44px; - color: #fff; - border: none; - - span { - vertical-align: middle; - } - } - - img { - margin-right: 3px; - } -} +} \ No newline at end of file diff --git a/web/flat-web/src/pages/LoginPage/index.tsx b/web/flat-web/src/pages/LoginPage/index.tsx index 0ff86fd6e67..be6ca07dffb 100644 --- a/web/flat-web/src/pages/LoginPage/index.tsx +++ b/web/flat-web/src/pages/LoginPage/index.tsx @@ -36,62 +36,60 @@ export const LoginPage = observer(function LoginPage() { }; }, []); - const doLogin = (loginChannel: LoginButtonProviderType): void => { - switch (loginChannel) { - case "agora": { - loginDisposer.current = agoraLogin(async authData => { - globalStore.updateUserInfo(authData); - if (roomUUID) { - if (globalStore.isTurnOffDeviceTest) { - await joinRoomHandler(roomUUID, pushHistory); - } else { - pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); - } - } else { - pushHistory(RouteNameType.HomePage); - } - }); - return; - } - case "github": { - loginDisposer.current = githubLogin(async authData => { - globalStore.updateUserInfo(authData); - if (roomUUID) { - if (globalStore.isTurnOffDeviceTest) { - await joinRoomHandler(roomUUID, pushHistory); - } else { - pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); - } - } else { - pushHistory(RouteNameType.HomePage); - } - }); - return; - } - case "wechat": { - setWeChatLogin(true); - return; - } - default: { - return; - } - } - }; - const handleLogin = useCallback( (loginChannel: LoginButtonProviderType) => { if (loginDisposer.current) { loginDisposer.current(); loginDisposer.current = void 0; } + const doLogin = (loginChannel: LoginButtonProviderType): void => { + switch (loginChannel) { + case "agora": { + loginDisposer.current = agoraLogin(async authData => { + globalStore.updateUserInfo(authData); + if (roomUUID) { + if (globalStore.isTurnOffDeviceTest) { + await joinRoomHandler(roomUUID, pushHistory); + } else { + pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); + } + } else { + pushHistory(RouteNameType.HomePage); + } + }); + return; + } + case "github": { + loginDisposer.current = githubLogin(async authData => { + globalStore.updateUserInfo(authData); + if (roomUUID) { + if (globalStore.isTurnOffDeviceTest) { + await joinRoomHandler(roomUUID, pushHistory); + } else { + pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); + } + } else { + pushHistory(RouteNameType.HomePage); + } + }); + return; + } + case "wechat": { + setWeChatLogin(true); + return; + } + default: { + return; + } + } + }; if (agreement) { doLogin(loginChannel); } else { void message.info(i18n.t("agree-terms")); } }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [agreement], + [agreement, globalStore, i18n, pushHistory, roomUUID], ); const privacyURL = i18n.language.startsWith("zh") ? PRIVACY_URL_CN : PRIVACY_URL; @@ -101,16 +99,6 @@ export const LoginPage = observer(function LoginPage() { if (utm_source === "agora") { return ( <> - - Date: Thu, 27 Jan 2022 16:45:41 +0800 Subject: [PATCH 04/10] Update packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx Co-authored-by: Black-Hole <158blackhole@gmail.com> --- .../LoginPage/LoginPanel.stories.tsx | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx index 636ade444c2..e0465983c33 100644 --- a/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginPanel.stories.tsx @@ -43,22 +43,23 @@ export const PlayableExample: Story = () => { function renderButtonList(): React.ReactNode { const handleLogin = (loginChannel: LoginButtonProviderType): void => { - if (agreement) { - switch (loginChannel) { - case "wechat": { - setWeChatLogin(true); - return; - } - case "github": { - Modal.info({ content: "This is Github Login" }); - return; - } - default: { - return; - } - } - } else { + if (!agreement) { void message.info(i18n.t("agree-terms")); + return; + } + + switch (loginChannel) { + case "wechat": { + setWeChatLogin(true); + break; + } + case "github": { + Modal.info("need i18n"); + break; + } + default: { + break; + } } }; From 2325cb2e6347101ebe1374d49f93251d89072f26 Mon Sep 17 00:00:00 2001 From: matrixbirds <9990676+Matrixbirds@users.noreply.github.com> Date: Thu, 27 Jan 2022 16:45:46 +0800 Subject: [PATCH 05/10] Update packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx Co-authored-by: Black-Hole <158blackhole@gmail.com> --- .../components/LoginPage/LoginContent/LoginContent.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx index e6864f73b81..b695f41719d 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx @@ -26,9 +26,6 @@ export const Overview: Story = () => { agreement === false && void message.info(i18n.t("agree-terms")); }, [agreement, i18n]); - const handleHideQRCode = (): void => { - updateShowQRCode(!showQRCode); - }; const { t } = useTranslation(); From 3803f01affc82229f2144dc1023362a277dfbeb1 Mon Sep 17 00:00:00 2001 From: matrixbirds <9990676+Matrixbirds@users.noreply.github.com> Date: Thu, 27 Jan 2022 16:45:51 +0800 Subject: [PATCH 06/10] Update packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx Co-authored-by: Black-Hole <158blackhole@gmail.com> --- .../components/LoginPage/LoginContent/LoginContent.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx b/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx index b695f41719d..047dd012623 100644 --- a/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx +++ b/packages/flat-components/src/components/LoginPage/LoginContent/LoginContent.stories.tsx @@ -42,7 +42,7 @@ export const Overview: Story = () => {
updateAgreement(!agreement)} handleHideQRCode={handleHideQRCode} renderButtonList={renderButtonList} showQRCode={showQRCode} From 4864d50cf2c66c59380458834a93af4cbb37cbaf Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Thu, 27 Jan 2022 16:53:35 +0800 Subject: [PATCH 07/10] refactor(web): doLogin --- web/flat-web/src/pages/LoginPage/index.tsx | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/web/flat-web/src/pages/LoginPage/index.tsx b/web/flat-web/src/pages/LoginPage/index.tsx index be6ca07dffb..ec55a5d06f4 100644 --- a/web/flat-web/src/pages/LoginPage/index.tsx +++ b/web/flat-web/src/pages/LoginPage/index.tsx @@ -47,14 +47,14 @@ export const LoginPage = observer(function LoginPage() { case "agora": { loginDisposer.current = agoraLogin(async authData => { globalStore.updateUserInfo(authData); - if (roomUUID) { - if (globalStore.isTurnOffDeviceTest) { - await joinRoomHandler(roomUUID, pushHistory); - } else { - pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); - } - } else { + if (!roomUUID) { pushHistory(RouteNameType.HomePage); + return; + } + if (globalStore.isTurnOffDeviceTest) { + await joinRoomHandler(roomUUID, pushHistory); + } else { + pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); } }); return; @@ -62,14 +62,14 @@ export const LoginPage = observer(function LoginPage() { case "github": { loginDisposer.current = githubLogin(async authData => { globalStore.updateUserInfo(authData); - if (roomUUID) { - if (globalStore.isTurnOffDeviceTest) { - await joinRoomHandler(roomUUID, pushHistory); - } else { - pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); - } - } else { + if (!roomUUID) { pushHistory(RouteNameType.HomePage); + return; + } + if (globalStore.isTurnOffDeviceTest) { + await joinRoomHandler(roomUUID, pushHistory); + } else { + pushHistory(RouteNameType.DevicesTestPage, { roomUUID }); } }); return; From c215bf6dd91d918c6d44255650d412f29cadbe6a Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Thu, 27 Jan 2022 17:17:27 +0800 Subject: [PATCH 08/10] fix(web): add dom iterable for tsconfig --- web/flat-web/src/utils/routes.ts | 6 +++--- web/flat-web/tsconfig.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/web/flat-web/src/utils/routes.ts b/web/flat-web/src/utils/routes.ts index 60b69dca55d..ac99817d536 100644 --- a/web/flat-web/src/utils/routes.ts +++ b/web/flat-web/src/utils/routes.ts @@ -81,11 +81,11 @@ export function useReplaceHistory(): ( /** * get url parameters */ -export function useURLParams(): Record { - const urlSearchParams: Record = new URLSearchParams(window.location.search); +export function useURLParams(): Record { + const urlSearchParams = new URLSearchParams(window.location.search); const params = useMemo(() => { - const res: Record = {}; + const res: Record = {}; for (const [key, value] of urlSearchParams.entries()) { res[key] = value; } diff --git a/web/flat-web/tsconfig.json b/web/flat-web/tsconfig.json index c26a2597e3a..2e6c85a16dd 100644 --- a/web/flat-web/tsconfig.json +++ b/web/flat-web/tsconfig.json @@ -3,7 +3,7 @@ "compilerOptions": { "target": "ESNext", "jsx": "react", - "lib": ["DOM", "ESNext"], + "lib": ["DOM", "DOM.Iterable", "ESNext"], "module": "ESNext", "baseUrl": ".", "paths": { From 7a09ad85c4fd7bc4d93c59afcd44a819e1519b1d Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Thu, 27 Jan 2022 17:19:53 +0800 Subject: [PATCH 09/10] fix(component): add newline --- .../src/components/LoginPage/LoginButton/index.less | 2 +- packages/flat-components/src/components/LoginPage/index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/flat-components/src/components/LoginPage/LoginButton/index.less b/packages/flat-components/src/components/LoginPage/LoginButton/index.less index 3cb728a119c..d8c37505c38 100644 --- a/packages/flat-components/src/components/LoginPage/LoginButton/index.less +++ b/packages/flat-components/src/components/LoginPage/LoginButton/index.less @@ -63,4 +63,4 @@ background: #1b1f22; } } -} \ No newline at end of file +} diff --git a/packages/flat-components/src/components/LoginPage/index.less b/packages/flat-components/src/components/LoginPage/index.less index a29ab8c5704..98b60fcb3d3 100644 --- a/packages/flat-components/src/components/LoginPage/index.less +++ b/packages/flat-components/src/components/LoginPage/index.less @@ -46,4 +46,4 @@ .login-panel-inner-content-container { margin-top: 178px; -} \ No newline at end of file +} From 6942ec68813b250cf633986c35640d8854336af5 Mon Sep 17 00:00:00 2001 From: matrixbirds Date: Fri, 28 Jan 2022 10:40:31 +0800 Subject: [PATCH 10/10] feat(web): add comment to customize hook --- web/flat-web/src/utils/routes.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/flat-web/src/utils/routes.ts b/web/flat-web/src/utils/routes.ts index ac99817d536..4569614d415 100644 --- a/web/flat-web/src/utils/routes.ts +++ b/web/flat-web/src/utils/routes.ts @@ -79,7 +79,8 @@ export function useReplaceHistory(): ( } /** - * get url parameters + * Get url parameters + * This facility not involves react-router, so you can use it simply. */ export function useURLParams(): Record { const urlSearchParams = new URLSearchParams(window.location.search);