feat(web): add cross region user information authorize confirm (#2155)

* feat(web): add cross region user information authorize confirm * feat: modify CN service domain * feat: add agreement about collect privacy has changed
netless-io · Sep 10, 2024 · bc104b7 · bc104b7
1 parent a7f8525
commit bc104b7
Show file tree

Hide file tree

Showing 16 changed files with 263 additions and 20 deletions.
diff --git a/.github/workflows/deploy-web-dev-cn.yml b/.github/workflows/deploy-web-dev-cn.yml
@@ -29,7 +29,10 @@ jobs:
           cache: "pnpm"
 
       - name: Install dependencies
+        env:
+            FLAT_AGREEMENT_URL: ${{ vars.FLAT_AGREEMENT_URL }}
         run: |
+          echo "FLAT_AGREEMENT_URL=$FLAT_AGREEMENT_URL" >> config/CN/.env.development
           node ./scripts/ci/remove-workspace-packages.js web
           node ./scripts/ci/remove-package-scripts-hooks.js
           # failure automatically retries 3 times

diff --git a/.github/workflows/deploy-web-prod-cn.yml b/.github/workflows/deploy-web-prod-cn.yml
@@ -23,7 +23,10 @@ jobs:
           version: latest
 
       - name: Install dependencies
+        env:
+              FLAT_AGREEMENT_URL: ${{ vars.FLAT_AGREEMENT_URL }}
         run: |
+          echo "FLAT_AGREEMENT_URL=$FLAT_AGREEMENT_URL" >> config/CN/.env.production
           node ./scripts/ci/remove-workspace-packages.js web
           node ./scripts/ci/remove-package-scripts-hooks.js
           # failure automatically retries 3 times

diff --git a/config/CN/.env.development b/config/CN/.env.development
@@ -2,7 +2,7 @@ FLAT_SERVER_DOMAIN=flat-api-dev.whiteboard.agora.io
 UPDATE_DOMAIN=https://flat-storage.oss-cn-hangzhou.aliyuncs.com/versions
 FLAT_WEB_DOMAIN=flat-web-dev.whiteboard.agora.io
 
-FLAT_DOWNLOAD_URL=https://www.flat.shengwang.cn/#download
+FLAT_DOWNLOAD_URL=https://www.flat.apprtc.cn/#download
 FEEDBACK_URL=https://www.yuque.com/leooel/ec1kmm/vmsolg
 
 CLOUD_RECORDING_DEFAULT_AVATAR=https://flat-storage.oss-cn-hangzhou.aliyuncs.com/flat-resources/cloud-recording/default-avatar.jpg

diff --git a/config/CN/.env.production b/config/CN/.env.production
@@ -1,8 +1,8 @@
-FLAT_SERVER_DOMAIN=api.flat.shengwang.cn
+FLAT_SERVER_DOMAIN=api.flat.apprtc.cn
 UPDATE_DOMAIN=https://flat-storage.oss-cn-hangzhou.aliyuncs.com/versions
-FLAT_WEB_DOMAIN=web.flat.shengwang.cn
+FLAT_WEB_DOMAIN=web.flat.apprtc.cn
 
-FLAT_DOWNLOAD_URL=https://www.flat.shengwang.cn/#download
+FLAT_DOWNLOAD_URL=https://www.flat.apprtc.cn/#download
 FEEDBACK_URL=https://www.yuque.com/leooel/ec1kmm/vmsolg
 
 CLOUD_RECORDING_DEFAULT_AVATAR=https://flat-storage.oss-cn-hangzhou.aliyuncs.com/flat-resources/cloud-recording/default-avatar.jpg

diff --git a/desktop/renderer-app/src/constants/process.ts b/desktop/renderer-app/src/constants/process.ts
@@ -5,8 +5,8 @@ export const FLAT_WEB_DOMAIN = process.env.FLAT_WEB_DOMAIN;
 
 export const FLAT_WEB_BASE_URL = `https://${FLAT_WEB_DOMAIN}`;
 
-export const PRIVACY_URL_CN = "https://www.flat.shengwang.cn/privacy.html";
+export const PRIVACY_URL_CN = "https://www.flat.apprtc.cn/privacy.html";
 export const PRIVACY_URL_EN = "https://flat.whiteboard.agora.io/en/privacy.html";
 
-export const SERVICE_URL_CN = "https://www.flat.shengwang.cn/service.html";
+export const SERVICE_URL_CN = "https://www.flat.apprtc.cn/service.html";
 export const SERVICE_URL_EN = "https://flat.whiteboard.agora.io/en/service.html";
diff --git a/packages/flat-components/src/components/LoginPage/LoginWithCode/index.tsx b/packages/flat-components/src/components/LoginPage/LoginWithCode/index.tsx
@@ -14,6 +14,7 @@ import { LoginAccount, PasswordLoginType, defaultCountryCode } from "../LoginAcc
 import { LoginSendCode } from "../LoginSendCode";
 import { phoneValidator } from "../LoginWithPassword/validators";
 import { codeValidator } from "./validators";
+import { FLAT_AGREEMENT_URL } from "@netless/flat-server-api/src/constants";
 export * from "../LoginButtons";
 export * from "./validators";
 
@@ -197,7 +198,15 @@ export const LoginWithCode: React.FC<LoginWithCodeProps> = ({
                         checked={agreed}
                         privacyURL={privacyURL}
                         serviceURL={serviceURL}
-                        onChange={setAgreed}
+                        onChange={checked => {
+                            if (checked) {
+                                requestAgreement({ t, privacyURL, serviceURL }).then(agreed => {
+                                    setAgreed(agreed);
+                                });
+                            } else {
+                                setAgreed(false);
+                            }
+                        }}
                     />
                     <Button
                         className="login-big-button"
@@ -223,12 +232,65 @@ export interface RequestAgreementParams {
     serviceURL?: string;
     t: FlatI18nTFunction;
 }
-
-export function requestAgreement({
+export interface PrivacyAgreementData {
+    title: string;
+    content: string;
+}
+export async function getPrivacy(props: {
+    privacyURL: string;
+    serviceURL: string;
+}): Promise<PrivacyAgreementData | undefined> {
+    const { privacyURL, serviceURL } = props;
+    if (FLAT_AGREEMENT_URL) {
+        const data = await fetch(FLAT_AGREEMENT_URL).then(response => {
+            return response.json();
+        });
+        if (data.content) {
+            data.content = data.content
+                .replace(/{{serviceURL}}/g, serviceURL)
+                .replace(/{{privacyURL}}/g, privacyURL);
+        }
+        return data;
+    }
+    return undefined;
+}
+export async function requestAgreement({
     t,
     privacyURL,
     serviceURL,
 }: RequestAgreementParams): Promise<boolean> {
+    if (privacyURL && serviceURL) {
+        const data = await getPrivacy({ privacyURL, serviceURL });
+        if (data) {
+            return await new Promise<boolean>(resolve => {
+                Modal.confirm({
+                    title: (
+                        <div
+                            style={{
+                                borderBottom: "1px solid #EEEEEE",
+                                textAlign: "center",
+                                lineHeight: "30px",
+                            }}
+                        >
+                            {data.title}
+                        </div>
+                    ),
+                    icon: null,
+                    content: (
+                        <div
+                            dangerouslySetInnerHTML={{
+                                __html: data.content,
+                            }}
+                        ></div>
+                    ),
+                    okText: t("cross-region-auth.agree"),
+                    cancelText: t("cross-region-auth.disagree"),
+                    onOk: () => resolve(true),
+                    onCancel: () => resolve(false),
+                });
+            });
+        }
+    }
     return new Promise<boolean>(resolve =>
         Modal.confirm({
             content: (
@@ -243,6 +305,7 @@ export function requestAgreement({
                     </a>
                 </div>
             ),
+            icon: null,
             onOk: () => resolve(true),
             onCancel: () => resolve(false),
         }),

diff --git a/packages/flat-components/src/components/LoginPage/LoginWithPassword/index.tsx b/packages/flat-components/src/components/LoginPage/LoginWithPassword/index.tsx
@@ -268,7 +268,15 @@ export const LoginWithPassword: React.FC<LoginWithPasswordProps> = ({
                         checked={agreed}
                         privacyURL={privacyURL}
                         serviceURL={serviceURL}
-                        onChange={setAgreed}
+                        onChange={checked => {
+                            if (checked) {
+                                requestAgreement({ t, privacyURL, serviceURL }).then(agreed => {
+                                    setAgreed(agreed);
+                                });
+                            } else {
+                                setAgreed(false);
+                            }
+                        }}
                     />
 
                     <Button

diff --git a/packages/flat-components/src/components/RegisterModal/index.tsx b/packages/flat-components/src/components/RegisterModal/index.tsx
@@ -194,7 +194,15 @@ export const RegisterModal: React.FC<RegisterProps> = ({
                         checked={agreed}
                         privacyURL={privacyURL}
                         serviceURL={serviceURL}
-                        onChange={setAgreed}
+                        onChange={checked => {
+                            if (checked) {
+                                requestAgreement({ t, privacyURL, serviceURL }).then(agreed => {
+                                    setAgreed(agreed);
+                                });
+                            } else {
+                                setAgreed(false);
+                            }
+                        }}
                     />
 
                     <Button

diff --git a/packages/flat-components/src/index.ts b/packages/flat-components/src/index.ts
@@ -35,4 +35,4 @@ export * from "./components/Pmi";
 export * from "./containers/CloudStorageContainer";
 export * from "./theme/antd.mod";
 
-export { message } from "antd";
+export { message, Modal } from "antd";
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -766,5 +766,16 @@
   "drop-to-board": "Drop file to whiteboard",
   "mirror": "Mirror",
   "mirror-mode": "Mirror Mode",
-  "edit-success": "Updated successfully"
+  "edit-success": "Updated successfully",
+  "cross-region-auth": {
+    "title":"Cross-border data exit authorization",
+    "desc":"Please note that you are joining a room created by Agora Flat Overseas users. We will strictly comply with applicable laws and regulations to conduct data exit security assessment, and adopt reasonable physical isolation and security protection measures to ensure that your data is only used under your authorization. See the {{serviceAgreement}} and {{privacyPolicy}} for details",
+    "serviceAgreement": "service agreement",
+    "privacyPolicy": "Privacy Policy",
+    "agree": "agree",
+    "disagree": "disagree"
+  },
+  "collect-media-options": "Audio and video data acquisition",
+  "collect-media-turn-on": "Turn on",
+  "collect-media-turn-off": "Turn off"
 }
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -766,5 +766,16 @@
   "drop-to-board": "拖拽文件到白板",
   "mirror": "镜像",
   "mirror-mode": "镜像模式",
-  "edit-success": "修改成功"
+  "edit-success": "修改成功",
+  "cross-region-auth": {
+    "title":"跨境数据出镜授权",
+    "desc":"请注意，您正在加入 Agora Flat 海外版用户创建的房间。我们将严格遵守适用的法律法规要求进行数据出境安全评估，采用合理的物理隔离和安全防护措施，确保您的数据仅在您的授权许可下使用。具体内容参见{{serviceAgreement}}与{{privacyPolicy}}",
+    "serviceAgreement": "服务协议",
+    "privacyPolicy": "隐私政策",
+    "agree": "同意",
+    "disagree": "取消"
+  },
+  "collect-media-options": "音视频数据采集",
+  "collect-media-turn-on": "开启",
+  "collect-media-turn-off": "关闭"
 }
diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/index.tsx
@@ -23,9 +23,11 @@ import {
     LoginPlatform,
     deleteAccount,
     deleteAccountValidate,
+    getCollectionAgreement,
     loginCheck,
     removeBinding,
     rename,
+    setCollectionAgreement,
 } from "@netless/flat-server-api";
 
 import { PreferencesStoreContext, GlobalStoreContext } from "../../components/StoreProvider";
@@ -43,12 +45,45 @@ import { BindGitHub } from "./binding/GitHub";
 import { BindGoogle } from "./binding/Google";
 import { BindingField } from "./BindingField";
 import { useBindingList } from "./binding";
+import { Region } from "../../utils/join-room-handler";
 
 enum SelectLanguage {
     Chinese,
     English,
 }
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const CollectionAgreement = () => {
+    const [isAgree, setAgree] = useState(true);
+    const t = useTranslate();
+    const sp = useSafePromise();
+    useEffect(() => {
+        sp(getCollectionAgreement()).then(res => {
+            setAgree(res.isAgree);
+        });
+    }, [sp]);
+    async function changeCollectMediaState(event: CheckboxChangeEvent): Promise<void> {
+        const isAgree = Boolean(event.target.value);
+        await sp(setCollectionAgreement(isAgree));
+        setAgree(isAgree);
+    }
+    return (
+        <div className="general-setting-item">
+            <div className="general-setting-item-title">{t("collect-media-options")}</div>
+            <div className="join-room-settings">
+                <Radio.Group value={isAgree} onChange={changeCollectMediaState}>
+                    <Radio value={true}>
+                        <span className="radio-item-inner">{t("collect-media-turn-on")}</span>
+                    </Radio>
+                    <Radio value={false}>
+                        <span className="radio-item-inner">{t("collect-media-turn-off")}</span>
+                    </Radio>
+                </Radio.Group>
+            </div>
+        </div>
+    );
+};
+
 export const GeneralSettingPage = observer(function GeneralSettingPage() {
     const globalStore = useContext(GlobalStoreContext);
     const preferencesStore = useContext(PreferencesStoreContext);
@@ -73,7 +108,10 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
         () => `${FLAT_WEB_BASE_URL}/join/${globalStore.pmi}`,
         [globalStore.pmi],
     );
-
+    const serverRegion = useMemo(
+        () => globalStore.serverRegionConfig?.server.region,
+        [globalStore.serverRegionConfig?.server.region],
+    );
     const loginButtons = useMemo(
         () => process.env.LOGIN_METHODS.split(",") as LoginButtonProviderType[],
         [],
@@ -107,7 +145,6 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
             throw error;
         }
     }
-
     function changeLanguage(event: CheckboxChangeEvent): void {
         const language: SelectLanguage = event.target.value;
         void FlatI18n.changeLanguage(language === SelectLanguage.Chinese ? "zh-CN" : "en");
@@ -403,6 +440,13 @@ export const GeneralSettingPage = observer(function GeneralSettingPage() {
                     </div>
                 </div>
                 <hr />
+                {serverRegion === Region.CN_HZ && (
+                    <>
+                        <CollectionAgreement />
+                        <hr />
+                    </>
+                )}
+
                 <div className="general-setting-item">
                     <span className="general-setting-item-title">{t("delete-account")}</span>
 

diff --git a/packages/flat-pages/src/constants/process.ts b/packages/flat-pages/src/constants/process.ts
@@ -2,10 +2,10 @@ export const NODE_ENV = process.env.NODE_ENV;
 
 export const FLAT_DOWNLOAD_URL = process.env.FLAT_DOWNLOAD_URL;
 
-export const PRIVACY_URL_CN = "https://www.flat.shengwang.cn/privacy.html";
+export const PRIVACY_URL_CN = "https://www.flat.apprtc.cn/privacy.html";
 export const PRIVACY_URL = "https://flat.whiteboard.agora.io/en/privacy.html";
 
-export const SERVICE_URL_CN = "https://www.flat.shengwang.cn/service.html";
+export const SERVICE_URL_CN = "https://www.flat.apprtc.cn/service.html";
 export const SERVICE_URL = "https://flat.whiteboard.agora.io/en/service.html";
 
 export const FLAT_WEB_BASE_URL = `https://${process.env.FLAT_WEB_DOMAIN}`;