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

hqer927 · web-flow · commit bc104b78942a · 2024-09-10T10:45:06.000+08:00
* feat(web): add cross region user information authorize confirm

* feat: modify CN service domain

* feat: add agreement about collect privacy has changed
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}`;
diff --git a/packages/flat-pages/src/utils/join-room-handler.tsx b/packages/flat-pages/src/utils/join-room-handler.tsx
diff --git a/packages/flat-server-api/src/constants.ts b/packages/flat-server-api/src/constants.ts
diff --git a/packages/flat-server-api/src/login.ts b/packages/flat-server-api/src/login.ts
