From a8937d3046a934af991c442794a6f16b8428fe16 Mon Sep 17 00:00:00 2001
From: Yaodong Yu <2814461814@qq.com>
Date: Sun, 26 Mar 2023 18:44:47 +0800
Subject: [PATCH] feat: refactor agreement modal and create folders to classify
 components (#1686)

* refactor: refactor agreement modal and create folders to classify components

* fix: i18

* fix: i18

* fix: i18n
---
 web/src/AdapterEditPage.js                    |   2 +-
 web/src/App.js                                |  10 +-
 web/src/ApplicationEditPage.js                |   6 +-
 web/src/OrganizationEditPage.js               |   4 +-
 web/src/ProviderEditPage.js                   |  33 ++-
 web/src/Setting.js                            | 198 +--------------
 web/src/SyncerEditPage.js                     |  95 ++++++-
 web/src/UserEditPage.js                       |  22 +-
 web/src/WebhookEditPage.js                    |   2 +-
 web/src/auth/ForgetPage.js                    |   2 +-
 web/src/auth/LoginPage.js                     |  58 +----
 web/src/auth/PromptPage.js                    |   6 +-
 web/src/auth/SignupPage.js                    |  48 +---
 web/src/common/CaptchaPreview.js              |   2 +-
 web/src/{ => common}/CustomGithubCorner.js    |   2 +-
 web/src/common/SendCodeInput.js               |   2 +-
 web/src/{ => common}/TestEmailWidget.js       |   2 +-
 web/src/{ => common}/TestSmsWidget.js         |   2 +-
 web/src/common/modal/AgreementModal.js        | 126 ++++++++++
 web/src/common/{ => modal}/CaptchaModal.js    |   4 +-
 .../modal/CropperDivModal.js}                 |  10 +-
 web/src/{ => common/modal}/PasswordModal.js   |   4 +-
 web/src/{ => common/modal}/ResetModal.js      |   6 +-
 .../common/{ => select}/AffiliationSelect.js  | 238 +++++++++---------
 .../common/{ => select}/CountryCodeSelect.js  |   2 +-
 .../select/LanguageSelect.js}                 |   8 +-
 .../select/RegionSelect.js}                   |   6 +-
 .../select/ThemeSelect.js}                    |   8 +-
 web/src/locales/de/data.json                  |  16 ++
 web/src/locales/en/data.json                  |  16 ++
 web/src/locales/es/data.json                  |  16 ++
 web/src/locales/fr/data.json                  |  16 ++
 web/src/locales/id/data.json                  |  16 ++
 web/src/locales/ja/data.json                  |  16 ++
 web/src/locales/ko/data.json                  |  16 ++
 web/src/locales/ru/data.json                  |  16 ++
 web/src/locales/vi/data.json                  |  16 ++
 web/src/locales/zh/data.json                  |  16 ++
 web/src/{ => table}/AccountTable.js           |   2 +-
 web/src/{ => table}/LdapTable.js              |   6 +-
 web/src/{ => table}/ManagedAccountTable.js    |   2 +-
 web/src/{common => table}/PoliciyTable.js     |   0
 web/src/{ => table}/ProviderTable.js          |   4 +-
 web/src/{ => table}/SignupTable.js            |  22 +-
 web/src/{ => table}/SyncerTableColumnTable.js |   2 +-
 web/src/{ => table}/UrlTable.js               |   2 +-
 .../{ => table}/WebauthnCredentialTable.js    |   4 +-
 web/src/{ => table}/WebhookHeaderTable.js     |   2 +-
 web/src/{ => table}/propertyTable.js          |   2 +-
 49 files changed, 628 insertions(+), 488 deletions(-)
 rename web/src/{ => common}/CustomGithubCorner.js (96%)
 rename web/src/{ => common}/TestEmailWidget.js (98%)
 rename web/src/{ => common}/TestSmsWidget.js (97%)
 create mode 100644 web/src/common/modal/AgreementModal.js
 rename web/src/common/{ => modal}/CaptchaModal.js (97%)
 rename web/src/{CropperDiv.js => common/modal/CropperDivModal.js} (96%)
 rename web/src/{ => common/modal}/PasswordModal.js (97%)
 rename web/src/{ => common/modal}/ResetModal.js (96%)
 rename web/src/common/{ => select}/AffiliationSelect.js (94%)
 rename web/src/common/{ => select}/CountryCodeSelect.js (97%)
 rename web/src/{SelectLanguageBox.js => common/select/LanguageSelect.js} (93%)
 rename web/src/{SelectRegionBox.js => common/select/RegionSelect.js} (93%)
 rename web/src/{SelectThemeBox.js => common/select/ThemeSelect.js} (95%)
 rename web/src/{ => table}/AccountTable.js (99%)
 rename web/src/{ => table}/LdapTable.js (97%)
 rename web/src/{ => table}/ManagedAccountTable.js (99%)
 rename web/src/{common => table}/PoliciyTable.js (100%)
 rename web/src/{ => table}/ProviderTable.js (98%)
 rename web/src/{ => table}/SignupTable.js (90%)
 rename web/src/{ => table}/SyncerTableColumnTable.js (99%)
 rename web/src/{ => table}/UrlTable.js (98%)
 rename web/src/{ => table}/WebauthnCredentialTable.js (95%)
 rename web/src/{ => table}/WebhookHeaderTable.js (99%)
 rename web/src/{ => table}/propertyTable.js (98%)

diff --git a/web/src/AdapterEditPage.js b/web/src/AdapterEditPage.js
index 10fd2e5e..fbba5ae1 100644
--- a/web/src/AdapterEditPage.js
+++ b/web/src/AdapterEditPage.js
@@ -21,7 +21,7 @@ import i18next from "i18next";
 
 import "codemirror/lib/codemirror.css";
 import * as ModelBackend from "./backend/ModelBackend";
-import PolicyTable from "./common/PoliciyTable";
+import PolicyTable from "./table/PoliciyTable";
 require("codemirror/theme/material-darker.css");
 require("codemirror/mode/javascript/javascript");
 
diff --git a/web/src/App.js b/web/src/App.js
index c2eb6d9d..b79528f7 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -52,7 +52,7 @@ import PaymentEditPage from "./PaymentEditPage";
 import PaymentResultPage from "./PaymentResultPage";
 import AccountPage from "./account/AccountPage";
 import HomePage from "./basic/HomePage";
-import CustomGithubCorner from "./CustomGithubCorner";
+import CustomGithubCorner from "./common/CustomGithubCorner";
 import * as Conf from "./Conf";
 
 import * as Auth from "./auth/Auth";
@@ -60,7 +60,7 @@ import EntryPage from "./EntryPage";
 import ResultPage from "./auth/ResultPage";
 import * as AuthBackend from "./auth/AuthBackend";
 import AuthCallback from "./auth/AuthCallback";
-import SelectLanguageBox from "./SelectLanguageBox";
+import LanguageSelect from "./common/select/LanguageSelect";
 import i18next from "i18next";
 import OdicDiscoveryPage from "./auth/OidcDiscoveryPage";
 import SamlCallback from "./auth/SamlCallback";
@@ -70,7 +70,7 @@ import SystemInfo from "./SystemInfo";
 import AdapterListPage from "./AdapterListPage";
 import AdapterEditPage from "./AdapterEditPage";
 import {withTranslation} from "react-i18next";
-import SelectThemeBox from "./SelectThemeBox";
+import ThemeSelect from "./common/select/ThemeSelect";
 import SessionListPage from "./SessionListPage";
 
 const {Header, Footer, Content} = Layout;
@@ -352,7 +352,7 @@ class App extends Component {
       return (
         <React.Fragment>
           {this.renderRightDropdown()}
-          <SelectThemeBox
+          <ThemeSelect
             themeAlgorithm={this.state.themeAlgorithm}
             onChange={(nextThemeAlgorithm) => {
               this.setState({
@@ -360,7 +360,7 @@ class App extends Component {
                 logo: this.getLogo(nextThemeAlgorithm),
               });
             }} />
-          <SelectLanguageBox languages={this.state.account.organization.languages} />
+          <LanguageSelect languages={this.state.account.organization.languages} />
         </React.Fragment>
       );
     }
diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index afcc26a5..ff708685 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -25,9 +25,9 @@ import * as ResourceBackend from "./backend/ResourceBackend";
 import SignupPage from "./auth/SignupPage";
 import LoginPage from "./auth/LoginPage";
 import i18next from "i18next";
-import UrlTable from "./UrlTable";
-import ProviderTable from "./ProviderTable";
-import SignupTable from "./SignupTable";
+import UrlTable from "./table/UrlTable";
+import ProviderTable from "./table/ProviderTable";
+import SignupTable from "./table/SignupTable";
 import PromptPage from "./auth/PromptPage";
 import copy from "copy-to-clipboard";
 
diff --git a/web/src/OrganizationEditPage.js b/web/src/OrganizationEditPage.js
index ed12fb20..da8c5ba1 100644
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@@ -21,8 +21,8 @@ import * as Setting from "./Setting";
 import * as Conf from "./Conf";
 import i18next from "i18next";
 import {LinkOutlined} from "@ant-design/icons";
-import LdapTable from "./LdapTable";
-import AccountTable from "./AccountTable";
+import LdapTable from "./table/LdapTable";
+import AccountTable from "./table/AccountTable";
 import ThemeEditor from "./common/theme/ThemeEditor";
 
 const {Option} = Select;
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 0b5446fb..043efe50 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -19,12 +19,12 @@ import * as ProviderBackend from "./backend/ProviderBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
 import {authConfig} from "./auth/Auth";
-import * as ProviderEditTestEmail from "./TestEmailWidget";
-import * as ProviderEditTestSms from "./TestSmsWidget";
+import * as ProviderEditTestEmail from "./common/TestEmailWidget";
+import * as ProviderEditTestSms from "./common/TestSmsWidget";
 import copy from "copy-to-clipboard";
 import {CaptchaPreview} from "./common/CaptchaPreview";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
-import {CountryCodeSelect} from "./common/CountryCodeSelect";
+import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
 
 const {Option} = Select;
 const {TextArea} = Input;
@@ -110,7 +110,7 @@ class ProviderEditPage extends React.Component {
   getClientSecretLabel(provider) {
     switch (provider.category) {
     case "Email":
-      return Setting.getLabel(i18next.t("login:Password"), i18next.t("login:Password - Tooltip"));
+      return Setting.getLabel(i18next.t("general:Password"), i18next.t("general:Password - Tooltip"));
     case "SMS":
       if (provider.type === "Volc Engine SMS") {
         return Setting.getLabel(i18next.t("provider:Secret access key"), i18next.t("provider:Secret access key - Tooltip"));
@@ -130,6 +130,24 @@ class ProviderEditPage extends React.Component {
     }
   }
 
+  getProviderSubTypeOptions(type) {
+    if (type === "WeCom" || type === "Infoflow") {
+      return (
+        [
+          {id: "Internal", name: i18next.t("provider:Internal")},
+          {id: "Third-party", name: i18next.t("provider:Third-party")},
+        ]
+      );
+    } else if (type === "Aliyun Captcha") {
+      return [
+        {id: "nc", name: i18next.t("provider:Sliding Validation")},
+        {id: "ic", name: i18next.t("provider:Intelligent Validation")},
+      ];
+    } else {
+      return [];
+    }
+  }
+
   getAppIdRow(provider) {
     let text = "";
     let tooltip = "";
@@ -315,7 +333,7 @@ class ProviderEditPage extends React.Component {
                     this.updateProviderField("subType", value);
                   }}>
                     {
-                      Setting.getProviderSubTypeOptions(this.state.provider.type).map((providerSubType, index) => <Option key={index} value={providerSubType.id}>{providerSubType.name}</Option>)
+                      this.getProviderSubTypeOptions(this.state.provider.type).map((providerSubType, index) => <Option key={index} value={providerSubType.id}>{providerSubType.name}</Option>)
                     }
                   </Select>
                 </Col>
@@ -331,7 +349,10 @@ class ProviderEditPage extends React.Component {
                         this.updateProviderField("method", value);
                       }}>
                         {
-                          [{name: "Normal"}, {name: "Silent"}].map((method, index) => <Option key={index} value={method.name}>{method.name}</Option>)
+                          [
+                            {id: "Normal", name: i18next.t("provider:Normal")},
+                            {id: "Silent", name: i18next.t("provider:Silent")},
+                          ].map((method, index) => <Option key={index} value={method.name}>{method.name}</Option>)
                         }
                       </Select>
                     </Col>
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 10424134..189bf7a9 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Checkbox, Form, Modal, Select, Tag, Tooltip, message, theme} from "antd";
+import {Select, Tag, Tooltip, message, theme} from "antd";
 import {QuestionCircleTwoTone} from "@ant-design/icons";
 import {isMobile as isMobileDevice} from "react-device-detect";
 import "./i18n";
@@ -552,10 +552,6 @@ export function addRow(array, row, position = "end") {
   return position === "end" ? [...array, row] : [row, ...array];
 }
 
-export function prependRow(array, row) {
-  return [row, ...array];
-}
-
 export function deleteRow(array, i) {
   // return array = array.slice(0, i).concat(array.slice(i + 1));
   return [...array.slice(0, i), ...array.slice(i + 1)];
@@ -585,76 +581,6 @@ export function isMobile() {
   return isMobileDevice;
 }
 
-export function getTermsOfUseContent(url, setTermsOfUseContent) {
-  fetch(url, {
-    method: "GET",
-  }).then(r => {
-    r.text().then(setTermsOfUseContent);
-  });
-}
-
-export function isAgreementRequired(application) {
-  if (application) {
-    const agreementItem = application.signupItems.find(item => item.name === "Agreement");
-    if (!agreementItem || agreementItem.rule === "None" || !agreementItem.rule) {
-      return false;
-    }
-    if (agreementItem.required) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export function isDefaultTrue(application) {
-  const agreementItem = application.signupItems.find(item => item.name === "Agreement");
-
-  return isAgreementRequired(application) && agreementItem.rule === "Signin (Default True)";
-}
-
-export function renderAgreement(required, onClick, noStyle, layout, initialValue) {
-  return (
-    <Form.Item
-      name="agreement"
-      key="agreement"
-      valuePropName="checked"
-      rules={[
-        {
-          required: required,
-          message: i18next.t("signup:Please accept the agreement!"),
-        },
-      ]}
-      {...layout}
-      noStyle={noStyle}
-      initialValue={initialValue}
-    >
-      <Checkbox style={{float: "left"}}>
-        {i18next.t("signup:Accept")}&nbsp;
-        <a onClick={onClick}>
-          {i18next.t("signup:Terms of Use")}
-        </a>
-      </Checkbox>
-    </Form.Item>
-  );
-}
-
-export function renderModal(isOpen, onOk, onCancel, doc) {
-  return (
-    <Modal
-      title={i18next.t("signup:Terms of Use")}
-      open={isOpen}
-      width={"55vw"}
-      closable={false}
-      okText={i18next.t("signup:Accept")}
-      cancelText={i18next.t("signup:Decline")}
-      onOk={onOk}
-      onCancel={onCancel}
-    >
-      <iframe title={"terms"} style={{border: 0, width: "100%", height: "60vh"}} srcDoc={doc} />
-    </Modal>
-  );
-}
-
 export function getFormattedDate(date) {
   if (date === undefined) {
     return null;
@@ -731,14 +657,6 @@ export function getAvatarColor(s) {
   return colorList[hash % 4];
 }
 
-export function getLogo(theme) {
-  if (theme === "Dark") {
-    return `${StaticBaseUrl}/img/casdoor-logo_1185x256_dark.png`;
-  } else {
-    return `${StaticBaseUrl}/img/casdoor-logo_1185x256.png`;
-  }
-}
-
 export function getLanguageText(text) {
   if (!text.includes("|")) {
     return text;
@@ -763,11 +681,6 @@ export function setLanguage(language) {
   i18next.changeLanguage(language);
 }
 
-export function setTheme(themeKey) {
-  localStorage.setItem("theme", themeKey);
-  dispatchEvent(new Event("changeTheme"));
-}
-
 export function getAcceptLanguage() {
   if (i18next.language === null || i18next.language === "") {
     return "en;q=0.9,en;q=0.8";
@@ -948,24 +861,6 @@ export function getProviderTypeOptions(category) {
   }
 }
 
-export function getProviderSubTypeOptions(type) {
-  if (type === "WeCom" || type === "Infoflow") {
-    return (
-      [
-        {id: "Internal", name: "Internal"},
-        {id: "Third-party", name: "Third-party"},
-      ]
-    );
-  } else if (type === "Aliyun Captcha") {
-    return [
-      {id: "nc", name: "Sliding Validation"},
-      {id: "ic", name: "Intelligent Validation"},
-    ];
-  } else {
-    return [];
-  }
-}
-
 export function renderLogo(application) {
   if (application === null) {
     return null;
@@ -1239,94 +1134,3 @@ export function inIframe() {
     return true;
   }
 }
-
-export function getSyncerTableColumns(syncer) {
-  switch (syncer.type) {
-  case "Keycloak":
-    return [
-      {
-        "name": "ID",
-        "type": "string",
-        "casdoorName": "Id",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "USERNAME",
-        "type": "string",
-        "casdoorName": "Name",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "LAST_NAME+FIRST_NAME",
-        "type": "string",
-        "casdoorName": "DisplayName",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "EMAIL",
-        "type": "string",
-        "casdoorName": "Email",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "EMAIL_VERIFIED",
-        "type": "boolean",
-        "casdoorName": "EmailVerified",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "FIRST_NAME",
-        "type": "string",
-        "casdoorName": "FirstName",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "LAST_NAME",
-        "type": "string",
-        "casdoorName": "LastName",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "CREATED_TIMESTAMP",
-        "type": "string",
-        "casdoorName": "CreatedTime",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-      {
-        "name": "ENABLED",
-        "type": "boolean",
-        "casdoorName": "IsForbidden",
-        "isHashed": true,
-        "values": [
-
-        ],
-      },
-    ];
-  default:
-    return [];
-  }
-}
diff --git a/web/src/SyncerEditPage.js b/web/src/SyncerEditPage.js
index 6bc7c7ee..7d2eefc8 100644
--- a/web/src/SyncerEditPage.js
+++ b/web/src/SyncerEditPage.js
@@ -19,7 +19,7 @@ import * as SyncerBackend from "./backend/SyncerBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import SyncerTableColumnTable from "./SyncerTableColumnTable";
+import SyncerTableColumnTable from "./table/SyncerTableColumnTable";
 
 import {Controlled as CodeMirror} from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
@@ -80,6 +80,97 @@ class SyncerEditPage extends React.Component {
     });
   }
 
+  getSyncerTableColumns(syncer) {
+    switch (syncer.type) {
+    case "Keycloak":
+      return [
+        {
+          "name": "ID",
+          "type": "string",
+          "casdoorName": "Id",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "USERNAME",
+          "type": "string",
+          "casdoorName": "Name",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "LAST_NAME+FIRST_NAME",
+          "type": "string",
+          "casdoorName": "DisplayName",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "EMAIL",
+          "type": "string",
+          "casdoorName": "Email",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "EMAIL_VERIFIED",
+          "type": "boolean",
+          "casdoorName": "EmailVerified",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "FIRST_NAME",
+          "type": "string",
+          "casdoorName": "FirstName",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "LAST_NAME",
+          "type": "string",
+          "casdoorName": "LastName",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "CREATED_TIMESTAMP",
+          "type": "string",
+          "casdoorName": "CreatedTime",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+        {
+          "name": "ENABLED",
+          "type": "boolean",
+          "casdoorName": "IsForbidden",
+          "isHashed": true,
+          "values": [
+
+          ],
+        },
+      ];
+    default:
+      return [];
+    }
+  }
+
   renderSyncer() {
     return (
       <Card size="small" title={
@@ -120,7 +211,7 @@ class SyncerEditPage extends React.Component {
             <Select virtual={false} style={{width: "100%"}} value={this.state.syncer.type} onChange={(value => {
               this.updateSyncerField("type", value);
               const syncer = this.state.syncer;
-              syncer["tableColumns"] = Setting.getSyncerTableColumns(this.state.syncer);
+              syncer["tableColumns"] = this.getSyncerTableColumns(this.state.syncer);
               syncer.table = (value === "Keycloak") ? "user_entity" : this.state.syncer.table;
               this.setState({
                 syncer: syncer,
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 4e6082f1..03ec33ac 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -18,18 +18,18 @@ import * as UserBackend from "./backend/UserBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import CropperDiv from "./CropperDiv.js";
+import CropperDivModal from "./common/modal/CropperDivModal.js";
 import * as ApplicationBackend from "./backend/ApplicationBackend";
-import PasswordModal from "./PasswordModal";
-import ResetModal from "./ResetModal";
-import AffiliationSelect from "./common/AffiliationSelect";
+import PasswordModal from "./common/modal/PasswordModal";
+import ResetModal from "./common/modal/ResetModal";
+import AffiliationSelect from "./common/select/AffiliationSelect";
 import OAuthWidget from "./common/OAuthWidget";
 import SamlWidget from "./common/SamlWidget";
-import SelectRegionBox from "./SelectRegionBox";
-import WebAuthnCredentialTable from "./WebauthnCredentialTable";
-import ManagedAccountTable from "./ManagedAccountTable";
-import PropertyTable from "./propertyTable";
-import {CountryCodeSelect} from "./common/CountryCodeSelect";
+import RegionSelect from "./common/select/RegionSelect";
+import WebAuthnCredentialTable from "./table/WebauthnCredentialTable";
+import ManagedAccountTable from "./table/ManagedAccountTable";
+import PropertyTable from "./table/propertyTable";
+import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
 
 const {Option} = Select;
 
@@ -253,7 +253,7 @@ class UserEditPage extends React.Component {
               </Col>
             </Row>
             <Row style={{marginTop: "20px"}}>
-              <CropperDiv buttonText={`${i18next.t("user:Upload a photo")}...`} title={i18next.t("user:Upload a photo")} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} />
+              <CropperDivModal buttonText={`${i18next.t("user:Upload a photo")}...`} title={i18next.t("user:Upload a photo")} user={this.state.user} organization={this.state.organizations.find(organization => organization.name === this.state.organizationName)} />
             </Row>
           </Col>
         </Row>
@@ -341,7 +341,7 @@ class UserEditPage extends React.Component {
             {Setting.getLabel(i18next.t("user:Country/Region"), i18next.t("user:Country/Region - Tooltip"))} :
           </Col>
           <Col span={22} >
-            <SelectRegionBox defaultValue={this.state.user.region} onChange={(value) => {
+            <RegionSelect defaultValue={this.state.user.region} onChange={(value) => {
               this.updateUserField("region", value);
             }} />
           </Col>
diff --git a/web/src/WebhookEditPage.js b/web/src/WebhookEditPage.js
index fc7b5e82..1cdb6600 100644
--- a/web/src/WebhookEditPage.js
+++ b/web/src/WebhookEditPage.js
@@ -19,7 +19,7 @@ import * as WebhookBackend from "./backend/WebhookBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import WebhookHeaderTable from "./WebhookHeaderTable";
+import WebhookHeaderTable from "./table/WebhookHeaderTable";
 
 import {Controlled as CodeMirror} from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
diff --git a/web/src/auth/ForgetPage.js b/web/src/auth/ForgetPage.js
index e9548872..dedc27bc 100644
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@@ -22,7 +22,7 @@ import i18next from "i18next";
 import {SendCodeInput} from "../common/SendCodeInput";
 import * as UserBackend from "../backend/UserBackend";
 import {CheckCircleOutlined, KeyOutlined, LockOutlined, SolutionOutlined, UserOutlined} from "@ant-design/icons";
-import CustomGithubCorner from "../CustomGithubCorner";
+import CustomGithubCorner from "../common/CustomGithubCorner";
 import {withRouter} from "react-router-dom";
 const {Option} = Select;
 
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 970e1160..dba7fbb6 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -24,12 +24,13 @@ import * as Provider from "./Provider";
 import * as ProviderButton from "./ProviderButton";
 import * as Util from "./Util";
 import * as Setting from "../Setting";
+import * as AgreementModal from "../common/modal/AgreementModal";
 import SelfLoginButton from "./SelfLoginButton";
 import i18next from "i18next";
-import CustomGithubCorner from "../CustomGithubCorner";
+import CustomGithubCorner from "../common/CustomGithubCorner";
 import {SendCodeInput} from "../common/SendCodeInput";
-import SelectLanguageBox from "../SelectLanguageBox";
-import {CaptchaModal} from "../common/CaptchaModal";
+import LanguageSelect from "../common/select/LanguageSelect";
+import {CaptchaModal} from "../common/modal/CaptchaModal";
 import RedirectForm from "../common/RedirectForm";
 
 class LoginPage extends React.Component {
@@ -135,12 +136,6 @@ class LoginPage extends React.Component {
       ApplicationBackend.getApplication("admin", this.state.applicationName)
         .then((application) => {
           this.onUpdateApplication(application);
-
-          if (application !== null && application !== undefined) {
-            Setting.getTermsOfUseContent(application.termsOfUse, res => {
-              this.setState({termsOfUseContent: res});
-            });
-          }
         });
     } else {
       OrganizationBackend.getDefaultApplication("admin", this.state.owner)
@@ -151,12 +146,6 @@ class LoginPage extends React.Component {
             this.setState({
               applicationName: res.data.name,
             });
-
-            if (application !== null && application !== undefined) {
-              Setting.getTermsOfUseContent(application.termsOfUse, res => {
-                this.setState({termsOfUseContent: res});
-              });
-            }
           } else {
             this.onUpdateApplication(null);
             Setting.showMessage("error", res.msg);
@@ -470,25 +459,17 @@ class LoginPage extends React.Component {
               this.renderPasswordOrCodeInput()
             }
           </Row>
-          <Form.Item>
-            {
-              Setting.isAgreementRequired(application) ?
-                Setting.renderAgreement(true, () => {
-                  this.setState({
-                    isTermsOfUseVisible: true,
-                  });
-                }, true, {}, Setting.isDefaultTrue(application)) : (
-                  <Form.Item name="autoSignin" valuePropName="checked" noStyle>
-                    <Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
-                      {i18next.t("login:Auto sign in")}
-                    </Checkbox>
-                  </Form.Item>
-                )
-            }
+          <div style={{display: "inline-flex", justifyContent: "space-between", width: "320px", marginBottom: AgreementModal.isAgreementRequired(application) ? "5px" : "25px"}}>
+            <Form.Item name="autoSignin" valuePropName="checked" noStyle>
+              <Checkbox style={{float: "left"}} disabled={!application.enablePassword}>
+                {i18next.t("login:Auto sign in")}
+              </Checkbox>
+            </Form.Item>
             {
               Setting.renderForgetLink(application, i18next.t("login:Forgot password?"))
             }
-          </Form.Item>
+          </div>
+          {AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null}
           <Form.Item>
             <Button
               type="primary"
@@ -833,26 +814,13 @@ class LoginPage extends React.Component {
                   {
                     Setting.renderLogo(application)
                   }
-                  <SelectLanguageBox languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
+                  <LanguageSelect languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
                   {
                     this.renderSignedInBox()
                   }
                   {
                     this.renderForm(application)
                   }
-                  {
-                    Setting.renderModal(this.state.isTermsOfUseVisible, () => {
-                      this.form.current.setFieldsValue({agreement: true});
-                      this.setState({
-                        isTermsOfUseVisible: false,
-                      });
-                    }, () => {
-                      this.form.current.setFieldsValue({agreement: false});
-                      this.setState({
-                        isTermsOfUseVisible: false,
-                      });
-                    }, this.state.termsOfUseContent)
-                  }
                 </div>
               </div>
             </div>
diff --git a/web/src/auth/PromptPage.js b/web/src/auth/PromptPage.js
index 2833fe1e..128efcdf 100644
--- a/web/src/auth/PromptPage.js
+++ b/web/src/auth/PromptPage.js
@@ -19,9 +19,9 @@ import * as UserBackend from "../backend/UserBackend";
 import * as AuthBackend from "./AuthBackend";
 import * as Setting from "../Setting";
 import i18next from "i18next";
-import AffiliationSelect from "../common/AffiliationSelect";
+import AffiliationSelect from "../common/select/AffiliationSelect";
 import OAuthWidget from "../common/OAuthWidget";
-import SelectRegionBox from "../SelectRegionBox";
+import RegionSelect from "../common/select/RegionSelect";
 import {withRouter} from "react-router-dom";
 
 class PromptPage extends React.Component {
@@ -151,7 +151,7 @@ class PromptPage extends React.Component {
                       </span>
                     </Col>
                     <Col >
-                      <SelectRegionBox defaultValue={this.state.user.region} onChange={(value) => {
+                      <RegionSelect defaultValue={this.state.user.region} onChange={(value) => {
                         this.updateUserFieldWithoutSubmit("region", value);
                       }} />
                     </Col>
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index d422f1d8..f5d29ca8 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -21,12 +21,13 @@ import i18next from "i18next";
 import * as Util from "./Util";
 import {authConfig} from "./Auth";
 import * as ApplicationBackend from "../backend/ApplicationBackend";
+import * as AgreementModal from "../common/modal/AgreementModal";
 import {SendCodeInput} from "../common/SendCodeInput";
-import SelectRegionBox from "../SelectRegionBox";
-import CustomGithubCorner from "../CustomGithubCorner";
-import SelectLanguageBox from "../SelectLanguageBox";
+import RegionSelect from "../common/select/RegionSelect";
+import CustomGithubCorner from "../common/CustomGithubCorner";
+import LanguageSelect from "../common/select/LanguageSelect";
 import {withRouter} from "react-router-dom";
-import {CountryCodeSelect} from "../common/CountryCodeSelect";
+import {CountryCodeSelect} from "../common/select/CountryCodeSelect";
 
 const formItemLayout = {
   labelCol: {
@@ -47,7 +48,7 @@ const formItemLayout = {
   },
 };
 
-const tailFormItemLayout = {
+export const tailFormItemLayout = {
   wrapperCol: {
     xs: {
       span: 24,
@@ -105,12 +106,6 @@ class SignupPage extends React.Component {
     ApplicationBackend.getApplication("admin", applicationName)
       .then((application) => {
         this.onUpdateApplication(application);
-
-        if (application !== null && application !== undefined) {
-          Setting.getTermsOfUseContent(application.termsOfUse, res => {
-            this.setState({termsOfUseContent: res});
-          });
-        }
       });
   }
 
@@ -311,7 +306,7 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <SelectRegionBox onChange={(value) => {this.setState({region: value});}} />
+          <RegionSelect onChange={(value) => {this.setState({region: value});}} />
         </Form.Item>
       );
     } else if (signupItem.name === "Email") {
@@ -477,32 +472,10 @@ class SignupPage extends React.Component {
         </Form.Item>
       );
     } else if (signupItem.name === "Agreement") {
-      return (
-        Setting.renderAgreement(Setting.isAgreementRequired(application), () => {
-          this.setState({
-            isTermsOfUseVisible: true,
-          });
-        }, false, tailFormItemLayout, Setting.isDefaultTrue(application))
-      );
+      return AgreementModal.renderAgreementFormItem(application, required, tailFormItemLayout, this);
     }
   }
 
-  renderModal() {
-    return (
-      Setting.renderModal(this.state.isTermsOfUseVisible, () => {
-        this.form.current.setFieldsValue({agreement: true});
-        this.setState({
-          isTermsOfUseVisible: false,
-        });
-      }, () => {
-        this.form.current.setFieldsValue({agreement: false});
-        this.setState({
-          isTermsOfUseVisible: false,
-        });
-      }, this.state.termsOfUseContent)
-    );
-  }
-
   renderForm(application) {
     if (!application.enableSignUp) {
       return (
@@ -615,16 +588,13 @@ class SignupPage extends React.Component {
               {
                 Setting.renderLogo(application)
               }
-              <SelectLanguageBox languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
+              <LanguageSelect languages={application.organizationObj.languages} style={{top: "55px", right: "5px", position: "absolute"}} />
               {
                 this.renderForm(application)
               }
             </div>
           </div>
         </div>
-        {
-          this.renderModal()
-        }
       </React.Fragment>
     );
   }
diff --git a/web/src/common/CaptchaPreview.js b/web/src/common/CaptchaPreview.js
index 9d33c79a..6b382521 100644
--- a/web/src/common/CaptchaPreview.js
+++ b/web/src/common/CaptchaPreview.js
@@ -15,7 +15,7 @@
 import {Button} from "antd";
 import React from "react";
 import i18next from "i18next";
-import {CaptchaModal} from "./CaptchaModal";
+import {CaptchaModal} from "./modal/CaptchaModal";
 import * as UserBackend from "../backend/UserBackend";
 
 export const CaptchaPreview = (props) => {
diff --git a/web/src/CustomGithubCorner.js b/web/src/common/CustomGithubCorner.js
similarity index 96%
rename from web/src/CustomGithubCorner.js
rename to web/src/common/CustomGithubCorner.js
index be668547..f81729e9 100644
--- a/web/src/CustomGithubCorner.js
+++ b/web/src/common/CustomGithubCorner.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import * as Conf from "./Conf";
+import * as Conf from "../Conf";
 import GithubCorner from "react-github-corner";
 
 class CustomGithubCorner extends React.Component {
diff --git a/web/src/common/SendCodeInput.js b/web/src/common/SendCodeInput.js
index f71abf9e..166c9845 100644
--- a/web/src/common/SendCodeInput.js
+++ b/web/src/common/SendCodeInput.js
@@ -17,7 +17,7 @@ import React from "react";
 import i18next from "i18next";
 import * as UserBackend from "../backend/UserBackend";
 import {SafetyOutlined} from "@ant-design/icons";
-import {CaptchaModal} from "./CaptchaModal";
+import {CaptchaModal} from "./modal/CaptchaModal";
 
 const {Search} = Input;
 
diff --git a/web/src/TestEmailWidget.js b/web/src/common/TestEmailWidget.js
similarity index 98%
rename from web/src/TestEmailWidget.js
rename to web/src/common/TestEmailWidget.js
index 624856a3..95e3c34c 100644
--- a/web/src/TestEmailWidget.js
+++ b/web/src/common/TestEmailWidget.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 export function sendTestEmail(provider, email) {
diff --git a/web/src/TestSmsWidget.js b/web/src/common/TestSmsWidget.js
similarity index 97%
rename from web/src/TestSmsWidget.js
rename to web/src/common/TestSmsWidget.js
index 3803e79f..fe7fa050 100644
--- a/web/src/TestSmsWidget.js
+++ b/web/src/common/TestSmsWidget.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 export function sendTestSms(provider, phone) {
diff --git a/web/src/common/modal/AgreementModal.js b/web/src/common/modal/AgreementModal.js
new file mode 100644
index 00000000..6d40374f
--- /dev/null
+++ b/web/src/common/modal/AgreementModal.js
@@ -0,0 +1,126 @@
+// Copyright 2023 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {Checkbox, Form, Modal} from "antd";
+import i18next from "i18next";
+import React, {useEffect, useState} from "react";
+
+export const AgreementModal = (props) => {
+  const {open, onOk, onCancel, application} = props;
+  const [doc, setDoc] = useState("");
+
+  useEffect(() => {
+    getTermsOfUseContent(application.termsOfUseUrl).then((data) => {
+      setDoc(data);
+    });
+  }, []);
+
+  return (
+
+    <Modal
+      title={i18next.t("signup:Terms of Use")}
+      open={open}
+      width={"55vw"}
+      closable={false}
+      okText={i18next.t("signup:Accept")}
+      cancelText={i18next.t("signup:Decline")}
+      onOk={onOk}
+      onCancel={onCancel}
+    >
+      <iframe title={"terms"} style={{border: 0, width: "100%", height: "60vh"}} srcDoc={doc} />
+    </Modal>
+  );
+};
+
+function getTermsOfUseContent(url) {
+  return fetch(url, {
+    method: "GET",
+  }).then(r => r.text());
+}
+
+export function isAgreementRequired(application) {
+  if (application) {
+    const agreementItem = application.signupItems.find(item => item.name === "Agreement");
+    if (!agreementItem || agreementItem.rule === "None" || !agreementItem.rule) {
+      return false;
+    }
+    if (agreementItem.required) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function initDefaultValue(application) {
+  const agreementItem = application.signupItems.find(item => item.name === "Agreement");
+
+  return isAgreementRequired(application) && agreementItem.rule === "Signin (Default True)";
+}
+
+export function renderAgreementFormItem(application, required, layout, ths) {
+  return (<React.Fragment>
+    <Form.Item
+      name="agreement"
+      key="agreement"
+      valuePropName="checked"
+      rules={[
+        {
+          required: required,
+        },
+        () => ({
+          validator: (_, value) => {
+            if (!required) {
+              return Promise.resolve();
+            }
+
+            if (!value) {
+              return Promise.reject(i18next.t("signup:Please accept the agreement!"));
+            } else {
+              return Promise.resolve();
+            }
+          },
+        }),
+      ]
+      }
+      {...layout}
+      initialValue={initDefaultValue(application)}
+    >
+      <Checkbox style={{float: "left"}}>
+        {i18next.t("signup:Accept")}&nbsp;
+        <a onClick={() => {
+          ths.setState({
+            isTermsOfUseVisible: true,
+          });
+        }}
+        >
+          {i18next.t("signup:Terms of Use")}
+        </a>
+      </Checkbox>
+    </Form.Item>
+    <AgreementModal application={application} layout={layout} open={ths.state.isTermsOfUseVisible}
+      onOk={() => {
+        ths.form.current.setFieldsValue({agreement: true});
+        ths.setState({
+          isTermsOfUseVisible: false,
+        });
+      }}
+      onCancel={() => {
+        ths.form.current.setFieldsValue({agreement: false});
+        ths.setState({
+          isTermsOfUseVisible: false,
+        });
+      }} />
+  </React.Fragment>
+  );
+}
diff --git a/web/src/common/CaptchaModal.js b/web/src/common/modal/CaptchaModal.js
similarity index 97%
rename from web/src/common/CaptchaModal.js
rename to web/src/common/modal/CaptchaModal.js
index 6a7aa229..567faee3 100644
--- a/web/src/common/CaptchaModal.js
+++ b/web/src/common/modal/CaptchaModal.js
@@ -15,8 +15,8 @@
 import {Button, Col, Input, Modal, Row} from "antd";
 import i18next from "i18next";
 import React, {useEffect} from "react";
-import * as UserBackend from "../backend/UserBackend";
-import {CaptchaWidget} from "./CaptchaWidget";
+import * as UserBackend from "../../backend/UserBackend";
+import {CaptchaWidget} from "../CaptchaWidget";
 import {SafetyOutlined} from "@ant-design/icons";
 
 export const CaptchaModal = (props) => {
diff --git a/web/src/CropperDiv.js b/web/src/common/modal/CropperDivModal.js
similarity index 96%
rename from web/src/CropperDiv.js
rename to web/src/common/modal/CropperDivModal.js
index 46d8ad66..40dea7d6 100644
--- a/web/src/CropperDiv.js
+++ b/web/src/common/modal/CropperDivModal.js
@@ -15,12 +15,12 @@
 import React, {useEffect, useState} from "react";
 import Cropper from "react-cropper";
 import "cropperjs/dist/cropper.css";
-import * as Setting from "./Setting";
+import * as Setting from "../../Setting";
 import {Button, Col, Modal, Row, Select} from "antd";
 import i18next from "i18next";
-import * as ResourceBackend from "./backend/ResourceBackend";
+import * as ResourceBackend from "../../backend/ResourceBackend";
 
-export const CropperDiv = (props) => {
+export const CropperDivModal = (props) => {
   const [loading, setLoading] = useState(true);
   const [options, setOptions] = useState([]);
   const [image, setImage] = useState("");
@@ -60,7 +60,7 @@ export const CropperDiv = (props) => {
       // Setting.showMessage("success", "uploading...");
       const extension = image.substring(image.indexOf("/") + 1, image.indexOf(";base64"));
       const fullFilePath = `avatar/${user.owner}/${user.name}.${extension}`;
-      ResourceBackend.uploadResource(user.owner, user.name, "avatar", "CropperDiv", fullFilePath, blob)
+      ResourceBackend.uploadResource(user.owner, user.name, "avatar", "CropperDivModal", fullFilePath, blob)
         .then((res) => {
           if (res.status === "ok") {
             window.location.href = window.location.pathname;
@@ -187,4 +187,4 @@ export const CropperDiv = (props) => {
   );
 };
 
-export default CropperDiv;
+export default CropperDivModal;
diff --git a/web/src/PasswordModal.js b/web/src/common/modal/PasswordModal.js
similarity index 97%
rename from web/src/PasswordModal.js
rename to web/src/common/modal/PasswordModal.js
index f105654e..faa50f23 100644
--- a/web/src/PasswordModal.js
+++ b/web/src/common/modal/PasswordModal.js
@@ -15,8 +15,8 @@
 import {Button, Col, Input, Modal, Row} from "antd";
 import i18next from "i18next";
 import React from "react";
-import * as UserBackend from "./backend/UserBackend";
-import * as Setting from "./Setting";
+import * as UserBackend from "../../backend/UserBackend";
+import * as Setting from "../../Setting";
 
 export const PasswordModal = (props) => {
   const [visible, setVisible] = React.useState(false);
diff --git a/web/src/ResetModal.js b/web/src/common/modal/ResetModal.js
similarity index 96%
rename from web/src/ResetModal.js
rename to web/src/common/modal/ResetModal.js
index 098b413a..c30afb6c 100644
--- a/web/src/ResetModal.js
+++ b/web/src/common/modal/ResetModal.js
@@ -15,9 +15,9 @@
 import {Button, Col, Input, Modal, Row} from "antd";
 import i18next from "i18next";
 import React from "react";
-import * as Setting from "./Setting";
-import * as UserBackend from "./backend/UserBackend";
-import {SendCodeInput} from "./common/SendCodeInput";
+import * as Setting from "../../Setting";
+import * as UserBackend from "../../backend/UserBackend";
+import {SendCodeInput} from "../SendCodeInput";
 import {MailOutlined, PhoneOutlined} from "@ant-design/icons";
 
 export const ResetModal = (props) => {
diff --git a/web/src/common/AffiliationSelect.js b/web/src/common/select/AffiliationSelect.js
similarity index 94%
rename from web/src/common/AffiliationSelect.js
rename to web/src/common/select/AffiliationSelect.js
index 5e398161..f2cf9119 100644
--- a/web/src/common/AffiliationSelect.js
+++ b/web/src/common/select/AffiliationSelect.js
@@ -1,119 +1,119 @@
-// Copyright 2021 The Casdoor Authors. All Rights Reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import React from "react";
-import {Cascader, Col, Input, Row, Select} from "antd";
-import i18next from "i18next";
-import * as UserBackend from "../backend/UserBackend";
-import * as Setting from "../Setting";
-
-class AffiliationSelect extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      classes: props,
-      addressOptions: [],
-      affiliationOptions: [],
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    this.getAddressOptions(this.props.application);
-    this.getAffiliationOptions(this.props.application, this.props.user);
-  }
-
-  getAddressOptions(application) {
-    if (application.affiliationUrl === "") {
-      return;
-    }
-
-    const addressUrl = application.affiliationUrl.split("|")[0];
-    UserBackend.getAddressOptions(addressUrl)
-      .then((addressOptions) => {
-        this.setState({
-          addressOptions: addressOptions,
-        });
-      });
-  }
-
-  getAffiliationOptions(application, user) {
-    if (application.affiliationUrl === "") {
-      return;
-    }
-
-    const affiliationUrl = application.affiliationUrl.split("|")[1];
-    const code = user.address[user.address.length - 1];
-    UserBackend.getAffiliationOptions(affiliationUrl, code)
-      .then((affiliationOptions) => {
-        this.setState({
-          affiliationOptions: affiliationOptions,
-        });
-      });
-  }
-
-  updateUserField(key, value) {
-    this.props.onUpdateUserField(key, value);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        {
-          this.props.application?.affiliationUrl === "" ? null : (
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={this.props.labelSpan}>
-                {Setting.getLabel(i18next.t("user:Address"), i18next.t("user:Address - Tooltip"))} :
-              </Col>
-              <Col span={24 - this.props.labelSpan} >
-                <Cascader style={{width: "100%", maxWidth: "400px"}} value={this.props.user.address} options={this.state.addressOptions} onChange={value => {
-                  this.updateUserField("address", value);
-                  this.updateUserField("affiliation", "");
-                  this.updateUserField("score", 0);
-                  this.getAffiliationOptions(this.props.application, this.props.user);
-                }} placeholder={i18next.t("signup:Please input your address!")} />
-              </Col>
-            </Row>
-          )
-        }
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={this.props.labelSpan}>
-            {Setting.getLabel(i18next.t("user:Affiliation"), i18next.t("user:Affiliation - Tooltip"))} :
-          </Col>
-          <Col span={22} >
-            {
-              this.props.application?.affiliationUrl === "" ? (
-                <Input value={this.props.user.affiliation} onChange={e => {
-                  this.updateUserField("affiliation", e.target.value);
-                }} />
-              ) : (
-                <Select virtual={false} style={{width: "100%"}} value={this.props.user.affiliation}
-                  onChange={(value => {
-                    const name = value;
-                    const affiliationOption = Setting.getArrayItem(this.state.affiliationOptions, "name", name);
-                    const id = affiliationOption.id;
-                    this.updateUserField("affiliation", name);
-                    this.updateUserField("score", id);
-                  })}
-                  options={[Setting.getOption(`(${i18next.t("general:empty")})`, "")].concat(this.state.affiliationOptions.map((affiliationOption) => Setting.getOption(affiliationOption.name, affiliationOption.name))
-                  )} />
-              )
-            }
-          </Col>
-        </Row>
-      </React.Fragment>
-    );
-  }
-}
-
-export default AffiliationSelect;
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Cascader, Col, Input, Row, Select} from "antd";
+import i18next from "i18next";
+import * as UserBackend from "../../backend/UserBackend";
+import * as Setting from "../../Setting";
+
+class AffiliationSelect extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      addressOptions: [],
+      affiliationOptions: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getAddressOptions(this.props.application);
+    this.getAffiliationOptions(this.props.application, this.props.user);
+  }
+
+  getAddressOptions(application) {
+    if (application.affiliationUrl === "") {
+      return;
+    }
+
+    const addressUrl = application.affiliationUrl.split("|")[0];
+    UserBackend.getAddressOptions(addressUrl)
+      .then((addressOptions) => {
+        this.setState({
+          addressOptions: addressOptions,
+        });
+      });
+  }
+
+  getAffiliationOptions(application, user) {
+    if (application.affiliationUrl === "") {
+      return;
+    }
+
+    const affiliationUrl = application.affiliationUrl.split("|")[1];
+    const code = user.address[user.address.length - 1];
+    UserBackend.getAffiliationOptions(affiliationUrl, code)
+      .then((affiliationOptions) => {
+        this.setState({
+          affiliationOptions: affiliationOptions,
+        });
+      });
+  }
+
+  updateUserField(key, value) {
+    this.props.onUpdateUserField(key, value);
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {
+          this.props.application?.affiliationUrl === "" ? null : (
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={this.props.labelSpan}>
+                {Setting.getLabel(i18next.t("user:Address"), i18next.t("user:Address - Tooltip"))} :
+              </Col>
+              <Col span={24 - this.props.labelSpan} >
+                <Cascader style={{width: "100%", maxWidth: "400px"}} value={this.props.user.address} options={this.state.addressOptions} onChange={value => {
+                  this.updateUserField("address", value);
+                  this.updateUserField("affiliation", "");
+                  this.updateUserField("score", 0);
+                  this.getAffiliationOptions(this.props.application, this.props.user);
+                }} placeholder={i18next.t("signup:Please input your address!")} />
+              </Col>
+            </Row>
+          )
+        }
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={this.props.labelSpan}>
+            {Setting.getLabel(i18next.t("user:Affiliation"), i18next.t("user:Affiliation - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            {
+              this.props.application?.affiliationUrl === "" ? (
+                <Input value={this.props.user.affiliation} onChange={e => {
+                  this.updateUserField("affiliation", e.target.value);
+                }} />
+              ) : (
+                <Select virtual={false} style={{width: "100%"}} value={this.props.user.affiliation}
+                  onChange={(value => {
+                    const name = value;
+                    const affiliationOption = Setting.getArrayItem(this.state.affiliationOptions, "name", name);
+                    const id = affiliationOption.id;
+                    this.updateUserField("affiliation", name);
+                    this.updateUserField("score", id);
+                  })}
+                  options={[Setting.getOption(`(${i18next.t("general:empty")})`, "")].concat(this.state.affiliationOptions.map((affiliationOption) => Setting.getOption(affiliationOption.name, affiliationOption.name))
+                  )} />
+              )
+            }
+          </Col>
+        </Row>
+      </React.Fragment>
+    );
+  }
+}
+
+export default AffiliationSelect;
diff --git a/web/src/common/CountryCodeSelect.js b/web/src/common/select/CountryCodeSelect.js
similarity index 97%
rename from web/src/common/CountryCodeSelect.js
rename to web/src/common/select/CountryCodeSelect.js
index 8ddb4dd6..10da825f 100644
--- a/web/src/common/CountryCodeSelect.js
+++ b/web/src/common/select/CountryCodeSelect.js
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Select} from "antd";
-import * as Setting from "../Setting";
+import * as Setting from "../../Setting";
 import React from "react";
 
 export const CountryCodeSelect = (props) => {
diff --git a/web/src/SelectLanguageBox.js b/web/src/common/select/LanguageSelect.js
similarity index 93%
rename from web/src/SelectLanguageBox.js
rename to web/src/common/select/LanguageSelect.js
index 3d02875e..8b0634be 100644
--- a/web/src/SelectLanguageBox.js
+++ b/web/src/common/select/LanguageSelect.js
@@ -13,9 +13,9 @@
 // limitations under the License.
 
 import React from "react";
-import * as Setting from "./Setting";
+import * as Setting from "../../Setting";
 import {Dropdown} from "antd";
-import "./App.less";
+import "../../App.less";
 import {GlobalOutlined} from "@ant-design/icons";
 
 function flagIcon(country, alt) {
@@ -24,7 +24,7 @@ function flagIcon(country, alt) {
   );
 }
 
-class SelectLanguageBox extends React.Component {
+class LanguageSelect extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -63,4 +63,4 @@ class SelectLanguageBox extends React.Component {
   }
 }
 
-export default SelectLanguageBox;
+export default LanguageSelect;
diff --git a/web/src/SelectRegionBox.js b/web/src/common/select/RegionSelect.js
similarity index 93%
rename from web/src/SelectRegionBox.js
rename to web/src/common/select/RegionSelect.js
index eace0cec..be3c6c16 100644
--- a/web/src/SelectRegionBox.js
+++ b/web/src/common/select/RegionSelect.js
@@ -13,12 +13,12 @@
 // limitations under the License.
 
 import React from "react";
-import * as Setting from "./Setting";
+import * as Setting from "../../Setting";
 import {Select} from "antd";
 
 const {Option} = Select;
 
-class SelectRegionBox extends React.Component {
+class RegionSelect extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -59,4 +59,4 @@ class SelectRegionBox extends React.Component {
   }
 }
 
-export default SelectRegionBox;
+export default RegionSelect;
diff --git a/web/src/SelectThemeBox.js b/web/src/common/select/ThemeSelect.js
similarity index 95%
rename from web/src/SelectThemeBox.js
rename to web/src/common/select/ThemeSelect.js
index ea500786..bede994b 100644
--- a/web/src/SelectThemeBox.js
+++ b/web/src/common/select/ThemeSelect.js
@@ -13,9 +13,9 @@
 // limitations under the License.
 
 import React from "react";
-import * as Setting from "./Setting";
+import * as Setting from "../../Setting";
 import {Dropdown} from "antd";
-import "./App.less";
+import "../../App.less";
 import i18next from "i18next";
 import {CheckOutlined} from "@ant-design/icons";
 import {CompactTheme, DarkTheme, Light} from "antd-token-previewer/es/icons";
@@ -34,7 +34,7 @@ function getIcon(themeKey) {
   }
 }
 
-class SelectThemeBox extends React.Component {
+class ThemeSelect extends React.Component {
   constructor(props) {
     super(props);
   }
@@ -91,4 +91,4 @@ class SelectThemeBox extends React.Component {
   }
 }
 
-export default SelectThemeBox;
+export default ThemeSelect;
diff --git a/web/src/locales/de/data.json b/web/src/locales/de/data.json
index e445b626..036504f3 100644
--- a/web/src/locales/de/data.json
+++ b/web/src/locales/de/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Ob Benutzern erlaubt werden soll, ein neues Konto zu registrieren",
     "Failed to sign in": "Fehler bei der Anmeldung",
     "File uploaded successfully": "Datei erfolgreich hochgeladen",
+    "First, last": "First, last",
     "Follow organization theme": "Folge dem Thema der Organisation",
     "Form CSS": "Formular CSS",
     "Form CSS - Edit": "Formular CSS - Bearbeiten",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Ort der Anmelde-, Anmelde- und Passwort vergessen-Formulare",
     "Grant types": "Grant-Typen",
     "Grant types - Tooltip": "Wählen Sie aus, welche Förderarten im OAuth-Protokoll zulässig sind",
+    "Incremental": "Incremental",
     "Left": "Links",
     "Logged in successfully": "Erfolgreich eingeloggt",
     "Logged out successfully": "Erfolgreich ausgeloggt",
     "New Application": "Neue Anwendung",
+    "No verification": "No verification",
     "None": "kein",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "Bitte geben Sie Ihre Bewerbung ein!",
     "Please input your organization!": "Bitte geben Sie Ihre Organisation ein!",
     "Please select a HTML file": "Bitte wählen Sie eine HTML-Datei aus",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Die URL der Seite wurde erfolgreich in die Zwischenablage kopiert. Bitte fügen Sie sie in das Inkognito-Fenster oder einen anderen Browser ein",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Weiterleitungs-URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "Weiterleitungs-URL (Assertion Consumer Service POST Binding URL)",
     "Redirect URLs": "Weiterleitungs-URLs",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Seitenleisten HTML - Bearbeiten",
     "Side panel HTML - Tooltip": "Passen Sie den HTML-Code für das Seitenfeld der Login-Seite an",
     "Sign Up Error": "Registrierungsfehler",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Die URL der Anmeldeseite wurde erfolgreich in die Zwischenablage kopiert. Bitte fügen Sie sie in das Inkognito-Fenster oder einen anderen Browser ein",
     "Signin session": "Anmeldesitzung",
     "Signup items": "Anmeldungsartikel",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Name des Gastgebers",
     "IdP": "IdP",
     "IdP certificate": "IdP-Zertifikat",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "Emittenten-URL",
     "Issuer URL - Tooltip": "Emittenten-URL",
     "Link copied to clipboard successfully": "Link wurde erfolgreich in die Zwischenablage kopiert",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "SAML-Metadaten",
     "Method - Tooltip": "Anmeldeverfahren, QR-Code oder geräuschloser Login",
     "New Provider": "Neuer Anbieter",
+    "Normal": "Normal",
     "Parse": "parsen",
     "Parse metadata successfully": "Metadaten erfolgreich analysiert",
     "Path prefix": "Pfadpräfix",
@@ -555,8 +567,10 @@
     "Signup HTML": "Anmeldung HTML",
     "Signup HTML - Edit": "Registrierung HTML - Bearbeiten",
     "Signup HTML - Tooltip": "Benutzerdefiniertes HTML zur Ersetzung des Standard-Anmelde-Seitenstils",
+    "Silent": "Silent",
     "Site key": "Seitenschlüssel",
     "Site key - Tooltip": "Site-Schlüssel",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Untertyp",
     "Sub type - Tooltip": "Unterart",
     "Template code": "Vorlagen-Code",
@@ -564,6 +578,7 @@
     "Test Email": "Test E-Mail",
     "Test Email - Tooltip": "E-Mail-Adresse zum Empfangen von Test-E-Mails",
     "Test SMTP Connection": "Testen Sie die SMTP-Verbindung",
+    "Third-party": "Third-party",
     "Token URL": "Token-URL",
     "Token URL - Tooltip": "Token-URL",
     "Type": "Typ",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "Die Eingabe ist keine gültige E-Mail-Adresse!",
     "The input is not valid Phone!": "Die Eingabe ist kein gültiges Telefon!",
     "Username": "Benutzername",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "Ihr Konto wurde erstellt!",
     "Your confirmed password is inconsistent with the password!": "Dein bestätigtes Passwort stimmt nicht mit dem Passwort überein!",
     "sign in now": "Jetzt anmelden"
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
index 73be33bf..9f7ca921 100644
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Whether to allow users to register a new account",
     "Failed to sign in": "Failed to sign in",
     "File uploaded successfully": "File uploaded successfully",
+    "First, last": "First, last",
     "Follow organization theme": "Follow organization theme",
     "Form CSS": "Form CSS",
     "Form CSS - Edit": "Form CSS - Edit",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Location of the signup, signin and forget password forms",
     "Grant types": "Grant types",
     "Grant types - Tooltip": "Select which grant types are allowed in the OAuth protocol",
+    "Incremental": "Incremental",
     "Left": "Left",
     "Logged in successfully": "Logged in successfully",
     "Logged out successfully": "Logged out successfully",
     "New Application": "New Application",
+    "No verification": "No verification",
     "None": "None",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "Please input your application!",
     "Please input your organization!": "Please input your organization!",
     "Please select a HTML file": "Please select a HTML file",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Redirect URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "Redirect URL (Assertion Consumer Service POST Binding URL)",
     "Redirect URLs": "Redirect URLs",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Side panel HTML - Edit",
     "Side panel HTML - Tooltip": "Customize the HTML code for the side panel of the login page",
     "Sign Up Error": "Sign Up Error",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser",
     "Signin session": "Signin session",
     "Signup items": "Signup items",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Name of host",
     "IdP": "IdP",
     "IdP certificate": "IdP certificate",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "Issuer URL",
     "Issuer URL - Tooltip": "Issuer URL",
     "Link copied to clipboard successfully": "Link copied to clipboard successfully",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "SAML metadata",
     "Method - Tooltip": "Login method, QR code or silent login",
     "New Provider": "New Provider",
+    "Normal": "Normal",
     "Parse": "Parse",
     "Parse metadata successfully": "Parse metadata successfully",
     "Path prefix": "Path prefix",
@@ -555,8 +567,10 @@
     "Signup HTML": "Signup HTML",
     "Signup HTML - Edit": "Signup HTML - Edit",
     "Signup HTML - Tooltip": "Custom HTML for replacing the default signup page style",
+    "Silent": "Silent",
     "Site key": "Site key",
     "Site key - Tooltip": "Site key",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Sub type",
     "Sub type - Tooltip": "Sub type",
     "Template code": "Template code",
@@ -564,6 +578,7 @@
     "Test Email": "Test Email",
     "Test Email - Tooltip": "Email address to receive test mails",
     "Test SMTP Connection": "Test SMTP Connection",
+    "Third-party": "Third-party",
     "Token URL": "Token URL",
     "Token URL - Tooltip": "Token URL",
     "Type": "Type",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "The input is not valid Email!",
     "The input is not valid Phone!": "The input is not valid Phone!",
     "Username": "Username",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "Your account has been created!",
     "Your confirmed password is inconsistent with the password!": "Your confirmed password is inconsistent with the password!",
     "sign in now": "sign in now"
diff --git a/web/src/locales/es/data.json b/web/src/locales/es/data.json
index 6eb2a63d..0fb06cdb 100644
--- a/web/src/locales/es/data.json
+++ b/web/src/locales/es/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Ya sea permitir que los usuarios registren una nueva cuenta",
     "Failed to sign in": "Error al iniciar sesión",
     "File uploaded successfully": "Archivo subido exitosamente",
+    "First, last": "First, last",
     "Follow organization theme": "Seguir el tema de la organización",
     "Form CSS": "Formulario CSS",
     "Form CSS - Edit": "Formulario CSS - Editar",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Ubicación de los formularios de registro, inicio de sesión y olvido de contraseña",
     "Grant types": "Tipos de subvenciones",
     "Grant types - Tooltip": "Selecciona cuáles tipos de subvenciones están permitidas en el protocolo OAuth",
+    "Incremental": "Incremental",
     "Left": "Izquierda",
     "Logged in successfully": "Acceso satisfactorio",
     "Logged out successfully": "Cerró sesión exitosamente",
     "New Application": "Nueva aplicación",
+    "No verification": "No verification",
     "None": "Ninguno",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "¡Por favor, ingrese su solicitud!",
     "Please input your organization!": "¡Por favor, ingrese su organización!",
     "Please select a HTML file": "Por favor, seleccione un archivo HTML",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "URL de la página de acceso exitosamente copiada al portapapeles, por favor péguela en la ventana de incógnito o en otro navegador",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Redireccionar URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "URL de redireccionamiento (URL de enlace de publicación del servicio consumidor de afirmaciones)",
     "Redirect URLs": "Redireccionar URLs",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Panel lateral HTML - Editar",
     "Side panel HTML - Tooltip": "Personaliza el código HTML del panel lateral de la página de inicio de sesión",
     "Sign Up Error": "Error de registro",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "La URL de la página de inicio de sesión fue copiada al portapapeles exitosamente, por favor péguela en una ventana de incógnito o en otro navegador",
     "Signin session": "Sesión de inicio de sesión",
     "Signup items": "Artículos de registro",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Nombre del anfitrión",
     "IdP": "IdP = Proveedor de Identidad",
     "IdP certificate": "Certificado de proveedor de identidad (IdP)",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "URL del emisor",
     "Issuer URL - Tooltip": "URL del emisor",
     "Link copied to clipboard successfully": "Enlace copiado al portapapeles satisfactoriamente",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "Metadatos SAML",
     "Method - Tooltip": "Método de inicio de sesión, código QR o inicio de sesión silencioso",
     "New Provider": "Nuevo proveedor",
+    "Normal": "Normal",
     "Parse": "Analizar",
     "Parse metadata successfully": "Analizar los metadatos con éxito",
     "Path prefix": "Prefijo de ruta",
@@ -555,8 +567,10 @@
     "Signup HTML": "Registro HTML",
     "Signup HTML - Edit": "Registro HTML - Editar",
     "Signup HTML - Tooltip": "HTML personalizado para reemplazar el estilo predeterminado de la página de registro",
+    "Silent": "Silent",
     "Site key": "Clave del sitio",
     "Site key - Tooltip": "Clave del sitio",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Subtipo",
     "Sub type - Tooltip": "Subtipo",
     "Template code": "Código de plantilla",
@@ -564,6 +578,7 @@
     "Test Email": "Correo de prueba",
     "Test Email - Tooltip": "Dirección de correo electrónico para recibir mensajes de prueba",
     "Test SMTP Connection": "Prueba de conexión SMTP",
+    "Third-party": "Third-party",
     "Token URL": "Token URL",
     "Token URL - Tooltip": "URL de token",
     "Type": "Tipo",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "¡La entrada no es un correo electrónico válido!",
     "The input is not valid Phone!": "¡La entrada no es un número de teléfono válido!",
     "Username": "Nombre de usuario",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "¡Su cuenta ha sido creada!",
     "Your confirmed password is inconsistent with the password!": "¡Su contraseña confirmada no es coherente con la contraseña!",
     "sign in now": "Inicie sesión ahora"
diff --git a/web/src/locales/fr/data.json b/web/src/locales/fr/data.json
index 301443c7..ce125771 100644
--- a/web/src/locales/fr/data.json
+++ b/web/src/locales/fr/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Doit-on autoriser les utilisateurs à créer un nouveau compte ?",
     "Failed to sign in": "Échec de la connexion",
     "File uploaded successfully": "Fichier téléchargé avec succès",
+    "First, last": "First, last",
     "Follow organization theme": "Suivre le thème de l'organisation",
     "Form CSS": "Formulaire CSS",
     "Form CSS - Edit": "Form CSS - Modifier",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Emplacement des formulaires d'inscription, de connexion et de récupération de mot de passe",
     "Grant types": "Types de subventions",
     "Grant types - Tooltip": "Sélectionnez les types d'autorisations autorisés dans le protocole OAuth",
+    "Incremental": "Incremental",
     "Left": "gauche",
     "Logged in successfully": "Connecté avec succès",
     "Logged out successfully": "Déconnecté avec succès",
     "New Application": "Nouvelle application",
+    "No verification": "No verification",
     "None": "Aucun",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "Veuillez saisir votre demande d'application !",
     "Please input your organization!": "S'il vous plaît saisir votre organisation !",
     "Please select a HTML file": "S'il vous plaît sélectionnez un fichier HTML",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "URL de la page rapide copiée avec succès dans le presse-papiers, veuillez la coller dans la fenêtre de navigation privée ou dans un autre navigateur",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Rediriger l'URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "URL de redirection (URL de liaison POST du service consommateur d'assertions)",
     "Redirect URLs": "Rediriger les URL",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Panneau latéral HTML - Modifier",
     "Side panel HTML - Tooltip": "Personnalisez le code HTML du panneau latéral de la page de connexion",
     "Sign Up Error": "Erreur d'inscription",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "L'URL de la page de connexion a été copiée avec succès dans le presse-papiers, veuillez la coller dans la fenêtre de navigation privée ou dans un autre navigateur",
     "Signin session": "Session de connexion",
     "Signup items": "Les éléments d'inscription",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Nom d'hôte",
     "IdP": "IdP",
     "IdP certificate": "Certificat IdP",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "URL de l'émetteur",
     "Issuer URL - Tooltip": "URL de l'émetteur",
     "Link copied to clipboard successfully": "Lien copié avec succès dans le presse-papiers",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "Métadonnées SAML",
     "Method - Tooltip": "Méthode de connexion, code QR ou connexion silencieuse",
     "New Provider": "Nouveau fournisseur",
+    "Normal": "Normal",
     "Parse": "Parser",
     "Parse metadata successfully": "Parcourir les métadonnées avec succès",
     "Path prefix": "Préfixe de chemin",
@@ -555,8 +567,10 @@
     "Signup HTML": "Inscription HTML",
     "Signup HTML - Edit": "Inscription HTML - éditer",
     "Signup HTML - Tooltip": "HTML personnalisé pour remplacer le style par défaut de la page d'inscription",
+    "Silent": "Silent",
     "Site key": "Clé de site",
     "Site key - Tooltip": "Clé de site",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Sous-type",
     "Sub type - Tooltip": "Sous-type",
     "Template code": "Code modèle",
@@ -564,6 +578,7 @@
     "Test Email": "Courriel de test",
     "Test Email - Tooltip": "Adresse e-mail pour recevoir des courriels de test",
     "Test SMTP Connection": "Test de connexion SMTP",
+    "Third-party": "Third-party",
     "Token URL": "URL de jeton",
     "Token URL - Tooltip": "URL de jeton",
     "Type": "Type",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "L'entrée n'est pas un e-mail valide !",
     "The input is not valid Phone!": "L'entrée n'est pas un numéro de téléphone valide !",
     "Username": "Nom d'utilisateur",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "Votre compte a été créé !",
     "Your confirmed password is inconsistent with the password!": "Votre mot de passe confirmé est incompatible avec le mot de passe !",
     "sign in now": "Connectez-vous maintenant"
diff --git a/web/src/locales/id/data.json b/web/src/locales/id/data.json
index 4d069582..543af94a 100644
--- a/web/src/locales/id/data.json
+++ b/web/src/locales/id/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Apakah akan mengizinkan pengguna untuk mendaftar akun baru",
     "Failed to sign in": "Gagal masuk",
     "File uploaded successfully": "Berkas telah diunggah dengan sukses",
+    "First, last": "First, last",
     "Follow organization theme": "Ikuti tema organisasi",
     "Form CSS": "Formulir CSS",
     "Form CSS - Edit": "Formulir CSS - Edit",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Tempat pendaftaran, masuk, dan lupa kata sandi",
     "Grant types": "Jenis-jenis hibah",
     "Grant types - Tooltip": "Pilih jenis hibah apa yang diperbolehkan dalam protokol OAuth",
+    "Incremental": "Incremental",
     "Left": "Kiri",
     "Logged in successfully": "Berhasil masuk",
     "Logged out successfully": "Berhasil keluar dari sistem",
     "New Application": "Aplikasi Baru",
+    "No verification": "No verification",
     "None": "Tidak ada",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "Silakan masukkan aplikasi Anda!",
     "Please input your organization!": "Silakan masukkan organisasi Anda!",
     "Please select a HTML file": "Silahkan pilih file HTML",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Tautan halaman Prompt berhasil disalin ke papan klip, silakan tempelkan ke jendela penyamaran atau browser lainnya",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Mengalihkan URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "URL pengalihan (Penyanggah Konsumen Layanan Ikatan POST URL)",
     "Redirect URLs": "Mengarahkan URL",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Panel sisi HTML - Sunting",
     "Side panel HTML - Tooltip": "Menyesuaikan kode HTML untuk panel samping halaman login",
     "Sign Up Error": "Kesalahan Pendaftaran",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "URL halaman masuk berhasil disalin ke clipboard, silakan tempelkan di jendela penyamaran atau browser lainnya",
     "Signin session": "Sesi masuk",
     "Signup items": "Item pendaftaran",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Nama tuan rumah",
     "IdP": "IdP",
     "IdP certificate": "Sertifikat IdP",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "URL penerbit",
     "Issuer URL - Tooltip": "URL Penerbit",
     "Link copied to clipboard successfully": "Tautan berhasil disalin ke papan klip",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "Metadata SAML",
     "Method - Tooltip": "Metode login, kode QR atau login tanpa suara",
     "New Provider": "Penyedia Baru",
+    "Normal": "Normal",
     "Parse": "Parse: Memecah atau mengurai data atau teks menjadi bagian-bagian yang lebih kecil dan lebih mudah dipahami atau dimanipulasi",
     "Parse metadata successfully": "Berhasil mem-parse metadata",
     "Path prefix": "Awalan jalur",
@@ -555,8 +567,10 @@
     "Signup HTML": "Pendaftaran HTML",
     "Signup HTML - Edit": "Pendaftaran HTML - Sunting",
     "Signup HTML - Tooltip": "HTML khusus untuk mengganti gaya halaman pendaftaran bawaan",
+    "Silent": "Silent",
     "Site key": "Kunci situs",
     "Site key - Tooltip": "Kunci situs atau kunci halaman web",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Sub jenis",
     "Sub type - Tooltip": "Sub jenis",
     "Template code": "Kode template",
@@ -564,6 +578,7 @@
     "Test Email": "Email Uji Coba",
     "Test Email - Tooltip": "Alamat email untuk menerima email percobaan",
     "Test SMTP Connection": "Tes Koneksi SMTP",
+    "Third-party": "Third-party",
     "Token URL": "Token URL: Tautan Token",
     "Token URL - Tooltip": "Token URL: URL Token",
     "Type": "Jenis",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "Input yang dimasukkan bukan sesuai dengan format Email yang valid!",
     "The input is not valid Phone!": "Masukan ponsel tidak valid!",
     "Username": "Nama pengguna",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "Akun Anda telah dibuat!",
     "Your confirmed password is inconsistent with the password!": "Kata sandi yang dikonfirmasi tidak konsisten dengan kata sandi!",
     "sign in now": "Masuk sekarang"
diff --git a/web/src/locales/ja/data.json b/web/src/locales/ja/data.json
index d277b5a2..fe0d9d17 100644
--- a/web/src/locales/ja/data.json
+++ b/web/src/locales/ja/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "新しいアカウントの登録をユーザーに許可するかどうか",
     "Failed to sign in": "ログインに失敗しました",
     "File uploaded successfully": "ファイルが正常にアップロードされました",
+    "First, last": "First, last",
     "Follow organization theme": "組織のテーマに従ってください",
     "Form CSS": "フォームCSS",
     "Form CSS - Edit": "フォームのCSS - 編集",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "登録、ログイン、パスワード忘れフォームの位置",
     "Grant types": "グラント種類",
     "Grant types - Tooltip": "OAuthプロトコルで許可されているグラントタイプを選択してください",
+    "Incremental": "Incremental",
     "Left": "左",
     "Logged in successfully": "正常にログインしました",
     "Logged out successfully": "正常にログアウトしました",
     "New Application": "新しいアプリケーション",
+    "No verification": "No verification",
     "None": "なし",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "あなたの申請を入力してください！",
     "Please input your organization!": "あなたの組織を入力してください！",
     "Please select a HTML file": "HTMLファイルを選択してください",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "プロンプトページのURLが正常にクリップボードにコピーされました。インコグニートウィンドウまたは別のブラウザに貼り付けてください",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "リダイレクトURL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "リダイレクトURL（アサーションコンシューマサービスPOSTバインディングURL）",
     "Redirect URLs": "リダイレクトURL",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "サイドパネルのHTML - 編集",
     "Side panel HTML - Tooltip": "ログインページのサイドパネルに対するHTMLコードをカスタマイズしてください",
     "Sign Up Error": "サインアップエラー",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "サインインページのURLがクリップボードに正常にコピーされました。インコグニートウィンドウまたは別のブラウザに貼り付けてください",
     "Signin session": "サインインセッション",
     "Signup items": "サインアップアイテム",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "ホストの名前",
     "IdP": "IdP",
     "IdP certificate": "IdP証明書",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "発行者のURL",
     "Issuer URL - Tooltip": "発行者URL",
     "Link copied to clipboard successfully": "リンクがクリップボードに正常にコピーされました",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "SAMLのメタデータ",
     "Method - Tooltip": "ログイン方法、QRコードまたはサイレントログイン",
     "New Provider": "新しい提供者",
+    "Normal": "Normal",
     "Parse": "パースする",
     "Parse metadata successfully": "メタデータを正常に解析しました",
     "Path prefix": "パスプレフィックス",
@@ -555,8 +567,10 @@
     "Signup HTML": "サインアップ HTML",
     "Signup HTML - Edit": "サインアップ HTML - 編集",
     "Signup HTML - Tooltip": "デフォルトのサインアップページスタイルを置き換えるためのカスタムHTML",
+    "Silent": "Silent",
     "Site key": "サイトキー",
     "Site key - Tooltip": "サイトキー",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "サブタイプ",
     "Sub type - Tooltip": "サブタイプ",
     "Template code": "テンプレートコード",
@@ -564,6 +578,7 @@
     "Test Email": "テストメール",
     "Test Email - Tooltip": "テストメールを受け取るためのメールアドレス",
     "Test SMTP Connection": "SMTP接続をテストする",
+    "Third-party": "Third-party",
     "Token URL": "トークンのURL",
     "Token URL - Tooltip": "トークンURL",
     "Type": "タイプ",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "入力されたものは有効なメールではありません",
     "The input is not valid Phone!": "この入力は有効な電話番号ではありません！",
     "Username": "ユーザー名",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "あなたのアカウントが作成されました！",
     "Your confirmed password is inconsistent with the password!": "確認されたパスワードは、パスワードと矛盾しています！",
     "sign in now": "今すぐサインインしてください"
diff --git a/web/src/locales/ko/data.json b/web/src/locales/ko/data.json
index 12b32ad1..4e87ce40 100644
--- a/web/src/locales/ko/data.json
+++ b/web/src/locales/ko/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "사용자가 새로운 계정을 등록할지 여부",
     "Failed to sign in": "로그인 실패했습니다",
     "File uploaded successfully": "파일이 성공적으로 업로드되었습니다",
+    "First, last": "First, last",
     "Follow organization theme": "조직의 주제를 따르세요",
     "Form CSS": "CSS 양식",
     "Form CSS - Edit": "폼 CSS - 편집",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "가입, 로그인 및 비밀번호 재설정 양식의 위치",
     "Grant types": "Grant types: 부여 유형",
     "Grant types - Tooltip": "OAuth 프로토콜에서 허용되는 그란트 유형을 선택하십시오",
+    "Incremental": "Incremental",
     "Left": "왼쪽",
     "Logged in successfully": "성공적으로 로그인했습니다",
     "Logged out successfully": "로그아웃이 성공적으로 되었습니다",
     "New Application": "새로운 응용 프로그램",
+    "No verification": "No verification",
     "None": "없음",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "당신의 신청서를 입력해주세요!",
     "Please input your organization!": "귀하의 조직을 입력해 주세요!",
     "Please select a HTML file": "HTML 파일을 선택해 주세요",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "프롬프트 페이지 URL이 클립 보드에 성공적으로 복사되었습니다. 시크릿 모드 창이나 다른 브라우저에 붙여 넣으세요",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "리디렉트 URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "리디렉션 URL (단언 서비스 소비자 POST 바인딩 URL)",
     "Redirect URLs": "URL 리디렉트",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "사이드 패널 HTML - 편집",
     "Side panel HTML - Tooltip": "로그인 페이지의 측면 패널용 HTML 코드를 맞춤 설정하십시오",
     "Sign Up Error": "가입 오류",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "로그인 페이지 URL이 클립보드에 성공적으로 복사되었습니다. 익명 창이나 다른 브라우저에 붙여넣어주세요",
     "Signin session": "로그인 세션",
     "Signup items": "가입 항목",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "호스트의 이름",
     "IdP": "IdP",
     "IdP certificate": "IdP 인증서",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "발행자 URL",
     "Issuer URL - Tooltip": "발급자 URL",
     "Link copied to clipboard successfully": "링크가 클립보드에 성공적으로 복사되었습니다",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "SAML 메타데이터",
     "Method - Tooltip": "로그인 방법, QR 코드 또는 음성 로그인",
     "New Provider": "새로운 공급 업체",
+    "Normal": "Normal",
     "Parse": "파싱",
     "Parse metadata successfully": "메타데이터를 성공적으로 분석했습니다",
     "Path prefix": "경로 접두어",
@@ -555,8 +567,10 @@
     "Signup HTML": "가입 양식 HTML",
     "Signup HTML - Edit": "가입 HTML - 수정",
     "Signup HTML - Tooltip": "기본 가입 페이지 스타일을 바꾸기 위한 사용자 지정 HTML",
+    "Silent": "Silent",
     "Site key": "사이트 키",
     "Site key - Tooltip": "사이트 키",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "하위 유형",
     "Sub type - Tooltip": "서브 타입",
     "Template code": "템플릿 코드",
@@ -564,6 +578,7 @@
     "Test Email": "테스트 이메일",
     "Test Email - Tooltip": "테스트 메일을 받을 이메일 주소",
     "Test SMTP Connection": "테스트 SMTP 연결",
+    "Third-party": "Third-party",
     "Token URL": "토큰 URL",
     "Token URL - Tooltip": "토큰 URL",
     "Type": "타입",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "입력 값은 유효한 이메일이 아닙니다!",
     "The input is not valid Phone!": "입력이 유효한 전화번호가 아닙니다!",
     "Username": "사용자 이름",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "계정이 생성되었습니다!",
     "Your confirmed password is inconsistent with the password!": "확인된 비밀번호가 비밀번호와 일치하지 않습니다!",
     "sign in now": "지금 로그인하십시오"
diff --git a/web/src/locales/ru/data.json b/web/src/locales/ru/data.json
index 9bf6e4a6..5f9a2666 100644
--- a/web/src/locales/ru/data.json
+++ b/web/src/locales/ru/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Разрешить ли пользователям зарегистрировать новый аккаунт",
     "Failed to sign in": "Не удалось войти в систему",
     "File uploaded successfully": "Файл успешно загружен",
+    "First, last": "First, last",
     "Follow organization theme": "Cледуйте теме организации",
     "Form CSS": "Форма CSS",
     "Form CSS - Edit": "Форма CSS - Редактирование",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Местоположение форм регистрации, входа и восстановления пароля",
     "Grant types": "Типы грантов",
     "Grant types - Tooltip": "Выберите, какие типы грантов разрешены в протоколе OAuth",
+    "Incremental": "Incremental",
     "Left": "Левый",
     "Logged in successfully": "Успешный вход в систему",
     "Logged out successfully": "Успешный выход из системы",
     "New Application": "Новое приложение",
+    "No verification": "No verification",
     "None": "Никакой",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "Пожалуйста, введите свою заявку!",
     "Please input your organization!": "Пожалуйста, введите название вашей организации!",
     "Please select a HTML file": "Пожалуйста, выберите файл HTML",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "URL страницы успешно скопирован в буфер обмена, пожалуйста, вставьте его в режиме инкогнито или в другом браузере",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Перенаправление URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "Перенаправление URL (адрес сервиса потребителя утверждения POST-связывание)",
     "Redirect URLs": "Перенаправление URL-адресов",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Боковая панель HTML - Редактировать",
     "Side panel HTML - Tooltip": "Настроить HTML-код для боковой панели страницы входа в систему",
     "Sign Up Error": "Ошибка при регистрации",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "URL страницы входа скопирован успешно, пожалуйста, вставьте ее в инкогнито-окно или другой браузер",
     "Signin session": "Сессия входа в систему",
     "Signup items": "Элементы регистрации",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Имя хоста",
     "IdP": "IdP",
     "IdP certificate": "Сертификат IdP",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "URL выпускающего органа",
     "Issuer URL - Tooltip": "URL эмитента",
     "Link copied to clipboard successfully": "Ссылка успешно скопирована в буфер обмена",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "Метаданные SAML",
     "Method - Tooltip": "Метод входа, QR-код или беззвучный вход",
     "New Provider": "Новый провайдер",
+    "Normal": "Normal",
     "Parse": "Спарсить",
     "Parse metadata successfully": "Успешно обработана метаданные",
     "Path prefix": "Префикс пути",
@@ -555,8 +567,10 @@
     "Signup HTML": "Регистрационная форма HTML",
     "Signup HTML - Edit": "Регистрационная форма HTML - Редактировать",
     "Signup HTML - Tooltip": "Пользовательский HTML для замены стиля стандартной страницы регистрации",
+    "Silent": "Silent",
     "Site key": "Ключ сайта",
     "Site key - Tooltip": "Ключ сайта",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Подтип",
     "Sub type - Tooltip": "Подтип",
     "Template code": "Шаблонный код",
@@ -564,6 +578,7 @@
     "Test Email": "Тестовое письмо",
     "Test Email - Tooltip": "Адрес электронной почты для получения тестовых писем",
     "Test SMTP Connection": "Тестирование соединения SMTP",
+    "Third-party": "Third-party",
     "Token URL": "Токен URL (URL-адрес маркера)",
     "Token URL - Tooltip": "Токен URL",
     "Type": "Тип",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "Ввод не является действительным адресом электронной почты!",
     "The input is not valid Phone!": "Ввод не является действительным телефоном!",
     "Username": "Имя пользователя",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "Ваш аккаунт был создан!",
     "Your confirmed password is inconsistent with the password!": "Ваш подтвержденный пароль не соответствует паролю!",
     "sign in now": "войти сейчас"
diff --git a/web/src/locales/vi/data.json b/web/src/locales/vi/data.json
index 4291bbd1..7907e3ea 100644
--- a/web/src/locales/vi/data.json
+++ b/web/src/locales/vi/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "Có cho phép người dùng đăng ký tài khoản mới không?",
     "Failed to sign in": "Không đăng nhập được",
     "File uploaded successfully": "Tệp được tải lên thành công",
+    "First, last": "First, last",
     "Follow organization theme": "Theo chủ đề tổ chức",
     "Form CSS": "Mẫu CSS",
     "Form CSS - Edit": "Biểu mẫu CSS - Chỉnh sửa",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "Vị trí của các biểu mẫu đăng ký, đăng nhập và quên mật khẩu",
     "Grant types": "Loại hỗ trợ",
     "Grant types - Tooltip": "Chọn loại hỗ trợ được cho phép trong giao thức OAuth",
+    "Incremental": "Incremental",
     "Left": "Trái",
     "Logged in successfully": "Đăng nhập thành công",
     "Logged out successfully": "Đã đăng xuất thành công",
     "New Application": "Ứng dụng mới",
+    "No verification": "No verification",
     "None": "Không có gì",
+    "Normal": "Normal",
+    "Only signup": "Only signup",
     "Please input your application!": "Vui lòng nhập đơn của bạn!",
     "Please input your organization!": "Vui lòng nhập tên tổ chức của bạn!",
     "Please select a HTML file": "Vui lòng chọn tệp HTML",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Đã sao chép đường dẫn trang một cách thành công, hãy dán nó vào cửa sổ ẩn danh hoặc trình duyệt khác",
+    "Random": "Random",
+    "Real name": "Real name",
     "Redirect URL": "Chuyển hướng đường dẫn URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "Điều hướng URL (URL khung POST Dịch vụ Tiêu thụ Khẳng định)",
     "Redirect URLs": "Chuyển hướng URL",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "Bảng Panel Bên - Chỉnh sửa HTML",
     "Side panel HTML - Tooltip": "Tùy chỉnh mã HTML cho bảng điều khiển bên của trang đăng nhập",
     "Sign Up Error": "Lỗi đăng ký",
+    "Signin": "Signin",
+    "Signin (Default True)": "Signin (Default True)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "Đã sao chép thành công địa chỉ URL trang Đăng nhập vào clipboard, vui lòng dán nó vào cửa sổ ẩn danh hoặc trình duyệt khác",
     "Signin session": "Phiên đăng nhập",
     "Signup items": "Các mục đăng ký",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "Tên của người chủ chỗ ở",
     "IdP": "IdP",
     "IdP certificate": "Chứng chỉ IdP",
+    "Intelligent Validation": "Intelligent Validation",
+    "Internal": "Internal",
     "Issuer URL": "Địa chỉ URL của người phát hành",
     "Issuer URL - Tooltip": "Địa chỉ URL của nhà phát hành",
     "Link copied to clipboard successfully": "Đã sao chép liên kết vào bộ nhớ tạm thành công",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "SAML metadata: siêu dữ liệu SAML",
     "Method - Tooltip": "Phương thức đăng nhập, mã QR hoặc đăng nhập im lặng",
     "New Provider": "Nhà cung cấp mới",
+    "Normal": "Normal",
     "Parse": "Phân tích cú pháp",
     "Parse metadata successfully": "Phân tích siêu dữ liệu thành công",
     "Path prefix": "Tiền tố đường dẫn",
@@ -555,8 +567,10 @@
     "Signup HTML": "Đăng ký HTML",
     "Signup HTML - Edit": "Đăng ký HTML - Chỉnh sửa",
     "Signup HTML - Tooltip": "Trang HTML tùy chỉnh để thay thế phong cách trang đăng ký mặc định",
+    "Silent": "Silent",
     "Site key": "Khóa trang web",
     "Site key - Tooltip": "Khóa trang web",
+    "Sliding Validation": "Sliding Validation",
     "Sub type": "Loại phụ",
     "Sub type - Tooltip": "Loại phụ",
     "Template code": "Mã mẫu của template",
@@ -564,6 +578,7 @@
     "Test Email": "Thư Email kiểm tra",
     "Test Email - Tooltip": "Địa chỉ email để nhận thư kiểm tra",
     "Test SMTP Connection": "Kiểm tra kết nối SMTP",
+    "Third-party": "Third-party",
     "Token URL": "Đường dẫn Token",
     "Token URL - Tooltip": "Địa chỉ URL của Token",
     "Type": "Kiểu",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "Đầu vào không phải là địa chỉ Email hợp lệ!",
     "The input is not valid Phone!": "Đầu vào không hợp lệ! Số điện thoại không hợp lệ!",
     "Username": "Tên đăng nhập",
+    "Username - Tooltip": "Username - Tooltip",
     "Your account has been created!": "Tài khoản của bạn đã được tạo!",
     "Your confirmed password is inconsistent with the password!": "Mật khẩu xác nhận của bạn không khớp với mật khẩu đã nhập!",
     "sign in now": "Đăng nhập ngay bây giờ"
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
index 809855e3..7d1d16ca 100644
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@@ -41,6 +41,7 @@
     "Enable signup - Tooltip": "是否允许用户注册",
     "Failed to sign in": "登录失败",
     "File uploaded successfully": "文件上传成功",
+    "First, last": "名字, 姓氏",
     "Follow organization theme": "使用组织主题",
     "Form CSS": "表单CSS",
     "Form CSS - Edit": "编辑表单CSS",
@@ -49,15 +50,21 @@
     "Form position - Tooltip": "注册、登录、忘记密码等表单的位置",
     "Grant types": "OAuth授权类型",
     "Grant types - Tooltip": "选择允许哪些OAuth协议中的grant types",
+    "Incremental": "递增",
     "Left": "居左",
     "Logged in successfully": "登录成功",
     "Logged out successfully": "登出成功",
     "New Application": "添加应用",
+    "No verification": "不校验",
     "None": "关闭",
+    "Normal": "标准",
+    "Only signup": "仅注册",
     "Please input your application!": "请输入你的应用",
     "Please input your organization!": "请输入你的组织",
     "Please select a HTML file": "请选择一个HTML文件",
     "Prompt page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "提醒页面URL已成功复制到剪贴板，请粘贴到当前浏览器的隐身模式窗口或另一个浏览器访问",
+    "Random": "随机",
+    "Real name": "真实姓名",
     "Redirect URL": "重定向 URL",
     "Redirect URL (Assertion Consumer Service POST Binding URL) - Tooltip": "回复 URL (断言使用者服务 URL, 使用POST请求返回响应) - Tooltip",
     "Redirect URLs": "重定向 URLs",
@@ -74,6 +81,8 @@
     "Side panel HTML - Edit": "侧面板HTML - 编辑",
     "Side panel HTML - Tooltip": "自定义登录页面侧面板的HTML代码",
     "Sign Up Error": "注册错误",
+    "Signin": "登录",
+    "Signin (Default True)": "登录 (默认同意)",
     "Signin page URL copied to clipboard successfully, please paste it into the incognito window or another browser": "登录页面URL已成功复制到剪贴板，请粘贴到当前浏览器的隐身模式窗口或另一个浏览器访问",
     "Signin session": "保持登录会话",
     "Signup items": "注册项",
@@ -504,6 +513,8 @@
     "Host - Tooltip": "主机名",
     "IdP": "IdP",
     "IdP certificate": "IdP公钥证书",
+    "Intelligent Validation": "智能验证",
+    "Internal": "内部",
     "Issuer URL": "Issuer链接",
     "Issuer URL - Tooltip": "Issuer链接URL",
     "Link copied to clipboard successfully": "链接已成功复制到剪贴板",
@@ -511,6 +522,7 @@
     "Metadata - Tooltip": "SAML元数据",
     "Method - Tooltip": "登录方法，二维码或者静默授权登录",
     "New Provider": "添加提供商",
+    "Normal": "标准",
     "Parse": "解析",
     "Parse metadata successfully": "解析元数据成功",
     "Path prefix": "路径前缀",
@@ -555,8 +567,10 @@
     "Signup HTML": "注册页面HTML",
     "Signup HTML - Edit": "注册页面HTML - 编辑",
     "Signup HTML - Tooltip": "自定义HTML，用于替换默认的注册页面样式",
+    "Silent": "静默",
     "Site key": "Site key",
     "Site key - Tooltip": "Site key",
+    "Sliding Validation": "滑块验证",
     "Sub type": "子类型",
     "Sub type - Tooltip": "子类型",
     "Template code": "模板代码",
@@ -564,6 +578,7 @@
     "Test Email": "测试Email配置",
     "Test Email - Tooltip": "接收测试邮件的Email邮箱",
     "Test SMTP Connection": "测试SMTP连接",
+    "Third-party": "第三方",
     "Token URL": "Token URL",
     "Token URL - Tooltip": "自定义OAuth的Token URL",
     "Type": "类型",
@@ -621,6 +636,7 @@
     "The input is not valid Email!": "您输入的电子邮箱格式有误！",
     "The input is not valid Phone!": "您输入的手机号格式有误！",
     "Username": "用户名",
+    "Username - Tooltip": "用户名",
     "Your account has been created!": "您的账号已成功创建！",
     "Your confirmed password is inconsistent with the password!": "您两次输入的密码不一致！",
     "sign in now": "立即登录"
diff --git a/web/src/AccountTable.js b/web/src/table/AccountTable.js
similarity index 99%
rename from web/src/AccountTable.js
rename to web/src/table/AccountTable.js
index df147286..78be4a0c 100644
--- a/web/src/AccountTable.js
+++ b/web/src/table/AccountTable.js
@@ -15,7 +15,7 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Row, Select, Switch, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 const {Option} = Select;
diff --git a/web/src/LdapTable.js b/web/src/table/LdapTable.js
similarity index 97%
rename from web/src/LdapTable.js
rename to web/src/table/LdapTable.js
index 3ee25ae0..815baa69 100644
--- a/web/src/LdapTable.js
+++ b/web/src/table/LdapTable.js
@@ -14,11 +14,11 @@
 
 import React from "react";
 import {Button, Col, Row, Table} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
-import * as LdapBackend from "./backend/LdapBackend";
+import * as LdapBackend from "../backend/LdapBackend";
 import {Link} from "react-router-dom";
-import PopconfirmModal from "./PopconfirmModal";
+import PopconfirmModal from "../PopconfirmModal";
 
 class LdapTable extends React.Component {
   constructor(props) {
diff --git a/web/src/ManagedAccountTable.js b/web/src/table/ManagedAccountTable.js
similarity index 99%
rename from web/src/ManagedAccountTable.js
rename to web/src/table/ManagedAccountTable.js
index a526e7ea..3e7b5084 100644
--- a/web/src/ManagedAccountTable.js
+++ b/web/src/table/ManagedAccountTable.js
@@ -15,7 +15,7 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Row, Select, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 const {Option} = Select;
diff --git a/web/src/common/PoliciyTable.js b/web/src/table/PoliciyTable.js
similarity index 100%
rename from web/src/common/PoliciyTable.js
rename to web/src/table/PoliciyTable.js
diff --git a/web/src/ProviderTable.js b/web/src/table/ProviderTable.js
similarity index 98%
rename from web/src/ProviderTable.js
rename to web/src/table/ProviderTable.js
index cb9a61d2..c9a9296e 100644
--- a/web/src/ProviderTable.js
+++ b/web/src/table/ProviderTable.js
@@ -15,9 +15,9 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Row, Select, Switch, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
-import * as Provider from "./auth/Provider";
+import * as Provider from "../auth/Provider";
 
 const {Option} = Select;
 
diff --git a/web/src/SignupTable.js b/web/src/table/SignupTable.js
similarity index 90%
rename from web/src/SignupTable.js
rename to web/src/table/SignupTable.js
index 041f5637..1493dc01 100644
--- a/web/src/SignupTable.js
+++ b/web/src/table/SignupTable.js
@@ -15,7 +15,7 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Row, Select, Switch, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 const {Option} = Select;
@@ -172,25 +172,25 @@ class SignupTable extends React.Component {
           let options = [];
           if (record.name === "ID") {
             options = [
-              {id: "Random", name: "Random"},
-              {id: "Incremental", name: "Incremental"},
+              {id: "Random", name: i18next.t("application:Random")},
+              {id: "Incremental", name: i18next.t("application:Incremental")},
             ];
           } else if (record.name === "Display name") {
             options = [
-              {id: "None", name: "None"},
-              {id: "Real name", name: "Real name"},
-              {id: "First, last", name: "First, last"},
+              {id: "None", name: i18next.t("application:None")},
+              {id: "Real name", name: i18next.t("application:Real name")},
+              {id: "First, last", name: i18next.t("application:First, last")},
             ];
           } else if (record.name === "Email") {
             options = [
-              {id: "Normal", name: "Normal"},
-              {id: "No verification", name: "No verification"},
+              {id: "Normal", name: i18next.t("application:Normal")},
+              {id: "No verification", name: i18next.t("application:No verification")},
             ];
           } else if (record.name === "Agreement") {
             options = [
-              {id: "None", name: "None"},
-              {id: "Signin", name: "Signin"},
-              {id: "Signin (Default True)", name: "Signin (Default True)"},
+              {id: "None", name: i18next.t("application:Only signup")},
+              {id: "Signin", name: i18next.t("application:Signin")},
+              {id: "Signin (Default True)", name: i18next.t("application:Signin (Default True)")},
             ];
           }
 
diff --git a/web/src/SyncerTableColumnTable.js b/web/src/table/SyncerTableColumnTable.js
similarity index 99%
rename from web/src/SyncerTableColumnTable.js
rename to web/src/table/SyncerTableColumnTable.js
index afe6aa77..4d6f1259 100644
--- a/web/src/SyncerTableColumnTable.js
+++ b/web/src/table/SyncerTableColumnTable.js
@@ -15,7 +15,7 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Row, Select, Switch, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 const {Option} = Select;
diff --git a/web/src/UrlTable.js b/web/src/table/UrlTable.js
similarity index 98%
rename from web/src/UrlTable.js
rename to web/src/table/UrlTable.js
index 92e5d070..e537603d 100644
--- a/web/src/UrlTable.js
+++ b/web/src/table/UrlTable.js
@@ -15,7 +15,7 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, LinkOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Row, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 class UrlTable extends React.Component {
diff --git a/web/src/WebauthnCredentialTable.js b/web/src/table/WebauthnCredentialTable.js
similarity index 95%
rename from web/src/WebauthnCredentialTable.js
rename to web/src/table/WebauthnCredentialTable.js
index 901501da..e8686c7e 100644
--- a/web/src/WebauthnCredentialTable.js
+++ b/web/src/table/WebauthnCredentialTable.js
@@ -15,8 +15,8 @@
 import React from "react";
 import {Button, Table} from "antd";
 import i18next from "i18next";
-import * as UserWebauthnBackend from "./backend/UserWebauthnBackend";
-import * as Setting from "./Setting";
+import * as UserWebauthnBackend from "../backend/UserWebauthnBackend";
+import * as Setting from "../Setting";
 
 class WebAuthnCredentialTable extends React.Component {
   deleteRow(table, i) {
diff --git a/web/src/WebhookHeaderTable.js b/web/src/table/WebhookHeaderTable.js
similarity index 99%
rename from web/src/WebhookHeaderTable.js
rename to web/src/table/WebhookHeaderTable.js
index be493d56..63393649 100644
--- a/web/src/WebhookHeaderTable.js
+++ b/web/src/table/WebhookHeaderTable.js
@@ -15,7 +15,7 @@
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Row, Table, Tooltip} from "antd";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 import i18next from "i18next";
 
 class WebhookHeaderTable extends React.Component {
diff --git a/web/src/propertyTable.js b/web/src/table/propertyTable.js
similarity index 98%
rename from web/src/propertyTable.js
rename to web/src/table/propertyTable.js
index 85fb57b7..a587520a 100644
--- a/web/src/propertyTable.js
+++ b/web/src/table/propertyTable.js
@@ -16,7 +16,7 @@ import React from "react";
 import {Button, Input, Table} from "antd";
 import i18next from "i18next";
 import {DeleteOutlined} from "@ant-design/icons";
-import * as Setting from "./Setting";
+import * as Setting from "../Setting";
 
 class PropertyTable extends React.Component {
   constructor(props) {