fix: fix all frontend warnings (#983)

* fix:fix all frontend warnings

* fix:fix all frontend warnings

* fix:fix all frontend warnings

* fix:fix all frontend warnings

* fix:fix all frontend warnings

* fix:fix all frontend warnings

object/token.go

@@ -703,13 +703,16 @@ func GetWechatMiniProgramToken(application *Application, code string, host strin
 			Avatar:            avatar,
 			SignupApplication: application.Name,
 			WeChat:            openId,
-			WeChatUnionId:     unionId,
 			Type:              "normal-user",
 			CreatedTime:       util.GetCurrentTime(),
 			IsAdmin:           false,
 			IsGlobalAdmin:     false,
 			IsForbidden:       false,
 			IsDeleted:         false,
+			Properties: map[string]string{
+				USER_PROPERTIES_WECHAT_OPEN_ID:  openId,
+				USER_PROPERTIES_WECHAT_UNION_ID: unionId,
+			},
 		}
 		AddUser(user)
 	}

object/user.go

@@ -24,6 +24,11 @@ import (
 	"xorm.io/core"
 )
 
+const (
+	USER_PROPERTIES_WECHAT_UNION_ID = "wechatUnionId"
+	USER_PROPERTIES_WECHAT_OPEN_ID  = "wechatOpenId"
+)
+
 type User struct {
 	Owner       string `xorm:"varchar(100) notnull pk" json:"owner"`
 	Name        string `xorm:"varchar(100) notnull pk" json:"name"`
@@ -73,32 +78,31 @@ type User struct {
 	LastSigninTime string `xorm:"varchar(100)" json:"lastSigninTime"`
 	LastSigninIp   string `xorm:"varchar(100)" json:"lastSigninIp"`
 
-	GitHub        string `xorm:"github varchar(100)" json:"github"`
-	Google        string `xorm:"varchar(100)" json:"google"`
-	QQ            string `xorm:"qq varchar(100)" json:"qq"`
-	WeChat        string `xorm:"wechat varchar(100)" json:"wechat"`
-	WeChatUnionId string `xorm:"varchar(100)" json:"unionId"`
-	Facebook      string `xorm:"facebook varchar(100)" json:"facebook"`
-	DingTalk      string `xorm:"dingtalk varchar(100)" json:"dingtalk"`
-	Weibo         string `xorm:"weibo varchar(100)" json:"weibo"`
-	Gitee         string `xorm:"gitee varchar(100)" json:"gitee"`
-	LinkedIn      string `xorm:"linkedin varchar(100)" json:"linkedin"`
-	Wecom         string `xorm:"wecom varchar(100)" json:"wecom"`
-	Lark          string `xorm:"lark varchar(100)" json:"lark"`
-	Gitlab        string `xorm:"gitlab varchar(100)" json:"gitlab"`
-	Adfs          string `xorm:"adfs varchar(100)" json:"adfs"`
-	Baidu         string `xorm:"baidu varchar(100)" json:"baidu"`
-	Alipay        string `xorm:"alipay varchar(100)" json:"alipay"`
-	Casdoor       string `xorm:"casdoor varchar(100)" json:"casdoor"`
-	Infoflow      string `xorm:"infoflow varchar(100)" json:"infoflow"`
-	Apple         string `xorm:"apple varchar(100)" json:"apple"`
-	AzureAD       string `xorm:"azuread varchar(100)" json:"azuread"`
-	Slack         string `xorm:"slack varchar(100)" json:"slack"`
-	Steam         string `xorm:"steam varchar(100)" json:"steam"`
-	Bilibili      string `xorm:"bilibili varchar(100)" json:"bilibili"`
-	Okta          string `xorm:"okta varchar(100)" json:"okta"`
-	Douyin        string `xorm:"douyin varchar(100)" json:"douyin"`
-	Custom        string `xorm:"custom varchar(100)" json:"custom"`
+	GitHub   string `xorm:"github varchar(100)" json:"github"`
+	Google   string `xorm:"varchar(100)" json:"google"`
+	QQ       string `xorm:"qq varchar(100)" json:"qq"`
+	WeChat   string `xorm:"wechat varchar(100)" json:"wechat"`
+	Facebook string `xorm:"facebook varchar(100)" json:"facebook"`
+	DingTalk string `xorm:"dingtalk varchar(100)" json:"dingtalk"`
+	Weibo    string `xorm:"weibo varchar(100)" json:"weibo"`
+	Gitee    string `xorm:"gitee varchar(100)" json:"gitee"`
+	LinkedIn string `xorm:"linkedin varchar(100)" json:"linkedin"`
+	Wecom    string `xorm:"wecom varchar(100)" json:"wecom"`
+	Lark     string `xorm:"lark varchar(100)" json:"lark"`
+	Gitlab   string `xorm:"gitlab varchar(100)" json:"gitlab"`
+	Adfs     string `xorm:"adfs varchar(100)" json:"adfs"`
+	Baidu    string `xorm:"baidu varchar(100)" json:"baidu"`
+	Alipay   string `xorm:"alipay varchar(100)" json:"alipay"`
+	Casdoor  string `xorm:"casdoor varchar(100)" json:"casdoor"`
+	Infoflow string `xorm:"infoflow varchar(100)" json:"infoflow"`
+	Apple    string `xorm:"apple varchar(100)" json:"apple"`
+	AzureAD  string `xorm:"azuread varchar(100)" json:"azuread"`
+	Slack    string `xorm:"slack varchar(100)" json:"slack"`
+	Steam    string `xorm:"steam varchar(100)" json:"steam"`
+	Bilibili string `xorm:"bilibili varchar(100)" json:"bilibili"`
+	Okta     string `xorm:"okta varchar(100)" json:"okta"`
+	Douyin   string `xorm:"douyin varchar(100)" json:"douyin"`
+	Custom   string `xorm:"custom varchar(100)" json:"custom"`
 
 	WebauthnCredentials []webauthn.Credential `xorm:"webauthnCredentials blob" json:"webauthnCredentials"`
 
@@ -243,7 +247,7 @@ func getUserByWechatId(wechatOpenId string, wechatUnionId string) *User {
 		wechatUnionId = wechatOpenId
 	}
 	user := &User{}
-	existed, err := adapter.Engine.Where("wechat = ? OR wechat = ? OR unionid = ?", wechatOpenId, wechatUnionId, wechatUnionId).Get(user)
+	existed, err := adapter.Engine.Where("wechat = ? OR wechat = ?", wechatOpenId, wechatUnionId).Get(user)
 	if err != nil {
 		panic(err)
 	}

web/.eslintrc

@@ -42,7 +42,13 @@
     "space-before-function-paren": ["error", "never"],
     "no-trailing-spaces": ["error", { "ignoreComments": true }],
     "eol-last": ["error", "always"],
-    // "no-var": ["error"],
+    "no-var": ["error"],
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "all"
+      }
+    ],
     "curly": ["error", "all"],
     "brace-style": ["error", "1tbs", { "allowSingleLine": true }],
     "no-mixed-spaces-and-tabs": "error",
@@ -89,7 +95,7 @@
     // don't use strict mod now, otherwise there are a lot of errors in the codebase
     "no-unused-vars": "off",
     "react/no-deprecated": "warn",
-    "no-case-declarations": "warn",
+    "no-case-declarations": "off",
     "react/jsx-key": "warn"
   }
 }

web/src/AccountTable.js

@@ -38,7 +38,7 @@ class AccountTable extends React.Component {
   }
 
   addRow(table) {
-    let row = {name: Setting.getNewRowNameForTable(table, "Please select an account item"), visible: true, viewRule: "Public", modifyRule: "Self"};
+    const row = {name: Setting.getNewRowNameForTable(table, "Please select an account item"), visible: true, viewRule: "Public", modifyRule: "Self"};
     if (table === undefined) {
       table = [];
     }
@@ -141,7 +141,7 @@ class AccountTable extends React.Component {
             return null;
           }
 
-          let options = [
+          const options = [
             {id: "Public", name: "Public"},
             {id: "Self", name: "Self"},
             {id: "Admin", name: "Admin"},

web/src/App.js

@@ -182,7 +182,7 @@ class App extends Component {
   }
 
   setLanguage(account) {
-    let language = account?.language;
+    const language = account?.language;
     if (language !== "" && language !== i18next.language) {
       Setting.setLanguage(language);
     }
@@ -242,7 +242,7 @@ class App extends Component {
           });
 
           Setting.showMessage("success", "Logged out successfully");
-          let redirectUri = res.data2;
+          const redirectUri = res.data2;
           if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
             Setting.goToLink(redirectUri);
           } else if (owner !== "built-in") {
@@ -322,7 +322,7 @@ class App extends Component {
   }
 
   renderAccount() {
-    let res = [];
+    const res = [];
 
     if (this.state.account === undefined) {
       return null;
@@ -349,7 +349,7 @@ class App extends Component {
   }
 
   renderMenu() {
-    let res = [];
+    const res = [];
 
     if (this.state.account === null || this.state.account === undefined) {
       return [];

web/src/ApplicationEditPage.js

@@ -120,7 +120,7 @@ class ApplicationEditPage extends React.Component {
   updateApplicationField(key, value) {
     value = this.parseApplicationField(key, value);
 
-    let application = this.state.application;
+    const application = this.state.application;
     application[key] = value;
     this.setState({
       application: application,
@@ -566,8 +566,8 @@ class ApplicationEditPage extends React.Component {
 
   renderSignupSigninPreview() {
     let signUpUrl = `/signup/${this.state.application.name}`;
-    let signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
-    let maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
+    const signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
+    const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
     if (!this.state.application.enablePassword) {
       signUpUrl = signInUrl.replace("/login/oauth/authorize", "/signup/oauth/authorize");
     }
@@ -613,8 +613,8 @@ class ApplicationEditPage extends React.Component {
   }
 
   renderPromptPreview() {
-    let promptUrl = `/prompt/${this.state.application.name}`;
-    let maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
+    const promptUrl = `/prompt/${this.state.application.name}`;
+    const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
     return (
       <Col span={11}>
         <Button style={{marginBottom: "10px"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
@@ -634,7 +634,7 @@ class ApplicationEditPage extends React.Component {
   }
 
   submitApplicationEdit(willExist) {
-    let application = Setting.deepCopy(this.state.application);
+    const application = Setting.deepCopy(this.state.application);
     ApplicationBackend.updateApplication(this.state.application.owner, this.state.applicationName, application)
       .then((res) => {
         if (res.msg === "") {

web/src/ApplicationListPage.js

@@ -250,8 +250,8 @@ class ApplicationListPage extends BaseListPage {
   }
 
   fetch = (params = {}) => {
-    let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     this.setState({loading: true});
     ApplicationBackend.getApplications("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {

web/src/CertEditPage.js

@@ -57,7 +57,7 @@ class CertEditPage extends React.Component {
   updateCertField(key, value) {
     value = this.parseCertField(key, value);
 
-    let cert = this.state.cert;
+    const cert = this.state.cert;
     cert[key] = value;
     this.setState({
       cert: cert,
@@ -214,7 +214,7 @@ class CertEditPage extends React.Component {
   }
 
   submitCertEdit(willExist) {
-    let cert = Setting.deepCopy(this.state.cert);
+    const cert = Setting.deepCopy(this.state.cert);
     CertBackend.updateCert(this.state.cert.owner, this.state.certName, cert)
       .then((res) => {
         if (res.msg === "") {

web/src/CertListPage.js

@@ -198,7 +198,7 @@ class CertListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.category !== undefined && params.category !== null) {
       field = "category";
       value = params.category;

web/src/CropperDiv.js

@@ -103,7 +103,7 @@ export const CropperDiv = (props) => {
         onCancel={handleCancel}
         width={600}
         footer={
-          [<Button block type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
+          [<Button block key="submit" type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
         }
       >
         <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>

web/src/LdapSyncPage.js

@@ -35,7 +35,7 @@ class LdapSyncPage extends React.Component {
   }
 
   syncUsers() {
-    let selectedUsers = this.state.selectedUsers;
+    const selectedUsers = this.state.selectedUsers;
     if (selectedUsers === null || selectedUsers.length === 0) {
       Setting.showMessage("error", "Please select al least 1 user first");
       return;
@@ -44,10 +44,10 @@ class LdapSyncPage extends React.Component {
     LdapBackend.syncUsers(this.state.ldap.owner, this.state.ldap.id, selectedUsers)
       .then((res => {
         if (res.status === "ok") {
-          let exist = res.data.exist;
-          let failed = res.data.failed;
-          let existUser = [];
-          let failedUser = [];
+          const exist = res.data.exist;
+          const failed = res.data.failed;
+          const existUser = [];
+          const failedUser = [];
 
           if ((!exist || exist.length === 0) && (!failed || failed.length === 0)) {
             Setting.goToLink(`/organizations/${this.state.ldap.owner}/users`);
@@ -103,7 +103,7 @@ class LdapSyncPage extends React.Component {
   }
 
   getExistUsers(owner, users) {
-    let uuidArray = [];
+    const uuidArray = [];
     users.forEach(elem => {
       uuidArray.push(elem.uuid);
     });
@@ -119,11 +119,11 @@ class LdapSyncPage extends React.Component {
   }
 
   buildValArray(data, key) {
-    let valTypesArray = [];
+    const valTypesArray = [];
 
     if (data !== null && data.length > 0) {
       data.forEach(elem => {
-        let val = elem[key];
+        const val = elem[key];
         if (!valTypesArray.includes(val)) {
           valTypesArray.push(val);
         }
@@ -133,10 +133,10 @@ class LdapSyncPage extends React.Component {
   }
 
   buildFilter(data, key) {
-    let filterArray = [];
+    const filterArray = [];
 
     if (data !== null && data.length > 0) {
-      let valArray = this.buildValArray(data, key);
+      const valArray = this.buildValArray(data, key);
       valArray.forEach(elem => {
         filterArray.push({
           text: elem,

web/src/ModelEditPage.js

@@ -81,7 +81,7 @@ class ModelEditPage extends React.Component {
   updateModelField(key, value) {
     value = this.parseModelField(key, value);
 
-    let model = this.state.model;
+    const model = this.state.model;
     model[key] = value;
     this.setState({
       model: model,
@@ -155,7 +155,7 @@ class ModelEditPage extends React.Component {
   }
 
   submitModelEdit(willExist) {
-    let model = Setting.deepCopy(this.state.model);
+    const model = Setting.deepCopy(this.state.model);
     ModelBackend.updateModel(this.state.organizationName, this.state.modelName, model)
       .then((res) => {
         if (res.msg === "") {

web/src/ModelListPage.js

@@ -174,7 +174,7 @@ class ModelListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.type !== undefined && params.type !== null) {
       field = "type";
       value = params.type;

web/src/OrganizationEditPage.js

@@ -75,7 +75,7 @@ class OrganizationEditPage extends React.Component {
   updateOrganizationField(key, value) {
     value = this.parseOrganizationField(key, value);
 
-    let organization = this.state.organization;
+    const organization = this.state.organization;
     organization[key] = value;
     this.setState({
       organization: organization,
@@ -283,7 +283,7 @@ class OrganizationEditPage extends React.Component {
   }
 
   submitOrganizationEdit(willExist) {
-    let organization = Setting.deepCopy(this.state.organization);
+    const organization = Setting.deepCopy(this.state.organization);
     OrganizationBackend.updateOrganization(this.state.organization.owner, this.state.organizationName, organization)
       .then((res) => {
         if (res.msg === "") {

web/src/OrganizationListPage.js

@@ -266,7 +266,7 @@ class OrganizationListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.passwordType !== undefined && params.passwordType !== null) {
       field = "passwordType";
       value = params.passwordType;

web/src/PasswordModal.js

@@ -54,7 +54,7 @@ export const PasswordModal = (props) => {
     });
   };
 
-  let hasOldPassword = user.password !== "";
+  const hasOldPassword = user.password !== "";
 
   return (
     <Row>

web/src/PaymentEditPage.js

@@ -60,7 +60,7 @@ class PaymentEditPage extends React.Component {
   updatePaymentField(key, value) {
     value = this.parsePaymentField(key, value);
 
-    let payment = this.state.payment;
+    const payment = this.state.payment;
     payment[key] = value;
     this.setState({
       payment: payment,
@@ -440,7 +440,7 @@ class PaymentEditPage extends React.Component {
       return;
     }
 
-    let payment = Setting.deepCopy(this.state.payment);
+    const payment = Setting.deepCopy(this.state.payment);
     PaymentBackend.updatePayment(this.state.payment.owner, this.state.paymentName, payment)
       .then((res) => {
         if (res.msg === "") {

web/src/PaymentListPage.js

@@ -250,7 +250,7 @@ class PaymentListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.type !== undefined && params.type !== null) {
       field = "type";
       value = params.type;

web/src/PaymentResultPage.js

@@ -83,7 +83,7 @@ class PaymentResultPage extends React.Component {
             title={`${i18next.t("payment:The payment is still under processing")}: ${payment.productDisplayName}, ${i18next.t("payment:the current state is")}: ${payment.state}, ${i18next.t("payment:please wait for a few seconds...")}`}
             subTitle={i18next.t("payment:Please click the below button to return to the original website")}
             extra={[
-              <Spin size="large" tip={i18next.t("payment:Processing...")} />,
+              <Spin key="returnUrl" size="large" tip={i18next.t("payment:Processing...")} />,
             ]}
           />
         </div>

web/src/PermissionEditPage.js

@@ -116,7 +116,7 @@ class PermissionEditPage extends React.Component {
   updatePermissionField(key, value) {
     value = this.parsePermissionField(key, value);
 
-    let permission = this.state.permission;
+    const permission = this.state.permission;
     permission[key] = value;
     this.setState({
       permission: permission,
@@ -288,7 +288,7 @@ class PermissionEditPage extends React.Component {
   }
 
   submitPermissionEdit(willExist) {
-    let permission = Setting.deepCopy(this.state.permission);
+    const permission = Setting.deepCopy(this.state.permission);
     PermissionBackend.updatePermission(this.state.organizationName, this.state.permissionName, permission)
       .then((res) => {
         if (res.msg === "") {

web/src/PermissionListPage.js

@@ -243,7 +243,7 @@ class PermissionListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.type !== undefined && params.type !== null) {
       field = "type";
       value = params.type;

web/src/ProductEditPage.js

@@ -69,7 +69,7 @@ class ProductEditPage extends React.Component {
   updateProductField(key, value) {
     value = this.parseProductField(key, value);
 
-    let product = this.state.product;
+    const product = this.state.product;
     product[key] = value;
     this.setState({
       product: product,
@@ -252,7 +252,7 @@ class ProductEditPage extends React.Component {
   }
 
   renderPreview() {
-    let buyUrl = `/products/${this.state.product.name}/buy`;
+    const buyUrl = `/products/${this.state.product.name}/buy`;
     return (
       <Col span={22} style={{display: "flex", flexDirection: "column"}}>
         <a style={{marginBottom: "10px", display: "flex"}} target="_blank" rel="noreferrer" href={buyUrl}>
@@ -268,7 +268,7 @@ class ProductEditPage extends React.Component {
   }
 
   submitProductEdit(willExist) {
-    let product = Setting.deepCopy(this.state.product);
+    const product = Setting.deepCopy(this.state.product);
     ProductBackend.updateProduct(this.state.product.owner, this.state.productName, product)
       .then((res) => {
         if (res.msg === "") {

web/src/ProductListPage.js

@@ -269,7 +269,7 @@ class ProductListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.type !== undefined && params.type !== null) {
       field = "type";
       value = params.type;

web/src/ProviderEditPage.js

@@ -61,7 +61,7 @@ class ProviderEditPage extends React.Component {
   updateProviderField(key, value) {
     value = this.parseProviderField(key, value);
 
-    let provider = this.state.provider;
+    const provider = this.state.provider;
     provider[key] = value;
     this.setState({
       provider: provider,
@@ -148,11 +148,11 @@ class ProviderEditPage extends React.Component {
   }
 
   loadSamlConfiguration() {
-    var parser = new DOMParser();
-    var xmlDoc = parser.parseFromString(this.state.provider.metadata, "text/xml");
-    var cert = xmlDoc.getElementsByTagName("ds:X509Certificate")[0].childNodes[0].nodeValue;
-    var endpoint = xmlDoc.getElementsByTagName("md:SingleSignOnService")[0].getAttribute("Location");
-    var issuerUrl = xmlDoc.getElementsByTagName("md:EntityDescriptor")[0].getAttribute("entityID");
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(this.state.provider.metadata, "text/xml");
+    const cert = xmlDoc.getElementsByTagName("ds:X509Certificate")[0].childNodes[0].nodeValue;
+    const endpoint = xmlDoc.getElementsByTagName("md:SingleSignOnService")[0].getAttribute("Location");
+    const issuerUrl = xmlDoc.getElementsByTagName("md:EntityDescriptor")[0].getAttribute("entityID");
     this.updateProviderField("idP", cert);
     this.updateProviderField("endpoint", endpoint);
     this.updateProviderField("issuerUrl", issuerUrl);
@@ -717,7 +717,7 @@ class ProviderEditPage extends React.Component {
   }
 
   submitProviderEdit(willExist) {
-    let provider = Setting.deepCopy(this.state.provider);
+    const provider = Setting.deepCopy(this.state.provider);
     ProviderBackend.updateProvider(this.state.provider.owner, this.state.providerName, provider)
       .then((res) => {
         if (res.msg === "") {

web/src/ProviderListPage.js

@@ -215,7 +215,7 @@ class ProviderListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.category !== undefined && params.category !== null) {
       field = "category";
       value = params.category;

web/src/ProviderTable.js

@@ -39,7 +39,7 @@ class ProviderTable extends React.Component {
   }
 
   addRow(table) {
-    let row = {name: Setting.getNewRowNameForTable(table, "Please select a provider"), canSignUp: true, canSignIn: true, canUnlink: true, alertType: "None"};
+    const row = {name: Setting.getNewRowNameForTable(table, "Please select a provider"), canSignUp: true, canSignIn: true, canUnlink: true, alertType: "None"};
     if (table === undefined) {
       table = [];
     }

web/src/RecordListPage.js

@@ -199,7 +199,7 @@ class RecordListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.method !== undefined && params.method !== null) {
       field = "method";
       value = params.method;

web/src/ResourceListPage.js

@@ -291,8 +291,8 @@ class ResourceListPage extends BaseListPage {
   }
 
   fetch = (params = {}) => {
-    let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     this.setState({loading: true});
     ResourceBackend.getResources(this.props.account.owner, this.props.account.name, params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {

web/src/RoleEditPage.js

@@ -91,7 +91,7 @@ class RoleEditPage extends React.Component {
   updateRoleField(key, value) {
     value = this.parseRoleField(key, value);
 
-    let role = this.state.role;
+    const role = this.state.role;
     role[key] = value;
     this.setState({
       role: role,
@@ -179,7 +179,7 @@ class RoleEditPage extends React.Component {
   }
 
   submitRoleEdit(willExist) {
-    let role = Setting.deepCopy(this.state.role);
+    const role = Setting.deepCopy(this.state.role);
     RoleBackend.updateRole(this.state.organizationName, this.state.roleName, role)
       .then((res) => {
         if (res.msg === "") {

web/src/RoleListPage.js

@@ -194,7 +194,7 @@ class RoleListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.type !== undefined && params.type !== null) {
       field = "type";
       value = params.type;

web/src/Setting.js

@@ -23,7 +23,7 @@ import {authConfig} from "./auth/Auth";
 import {Helmet} from "react-helmet";
 import * as Conf from "./Conf";
 
-export let ServerUrl = "";
+export const ServerUrl = "";
 
 // export const StaticBaseUrl = "https://cdn.jsdelivr.net/gh/casbin/static";
 export const StaticBaseUrl = "https://cdn.casbin.org";
@@ -136,11 +136,11 @@ export function getCountryRegionData() {
     language = Conf.DefaultLanguage;
   }
 
-  var countries = require("i18n-iso-countries");
+  const countries = require("i18n-iso-countries");
   countries.registerLocale(require("i18n-iso-countries/langs/" + language + ".json"));
-  var data = countries.getNames(language, {select: "official"});
-  var result = [];
-  for (var i in data) {result.push({code: i, name: data[i]});}
+  const data = countries.getNames(language, {select: "official"});
+  const result = [];
+  for (const i in data) {result.push({code: i, name: data[i]});}
   return result;
 }
 
@@ -335,7 +335,7 @@ export function openLink(link) {
 export function openLinkSafe(link) {
   // Javascript window.open issue in safari
   // https://stackoverflow.com/questions/45569893/javascript-window-open-issue-in-safari
-  let a = document.createElement("a");
+  const a = document.createElement("a");
   a.href = link;
   a.setAttribute("target", "_blank");
   a.click();
@@ -445,9 +445,9 @@ export function getFriendlyFileSize(size) {
     return size + " B";
   }
 
-  let i = Math.floor(Math.log(size) / Math.log(1024));
+  const i = Math.floor(Math.log(size) / Math.log(1024));
   let num = (size / Math.pow(1024, i));
-  let round = Math.round(num);
+  const round = Math.round(num);
   num = round < 10 ? num.toFixed(2) : round < 100 ? num.toFixed(1) : round;
   return `${num} ${"KMGTPEZY"[i - 1]}B`;
 }
@@ -456,7 +456,7 @@ function getRandomInt(s) {
   let hash = 0;
   if (s.length !== 0) {
     for (let i = 0; i < s.length; i++) {
-      let char = s.charCodeAt(i);
+      const char = s.charCodeAt(i);
       hash = ((hash << 5) - hash) + char;
       hash = hash & hash;
     }
@@ -772,7 +772,7 @@ export function getMaskedEmail(email) {
   username = maskString(username);
 
   const domain = tokens[1];
-  let domainTokens = domain.split(".");
+  const domainTokens = domain.split(".");
   domainTokens[domainTokens.length - 2] = maskString(domainTokens[domainTokens.length - 2]);
 
   return `${username}@${domainTokens.join(".")}`;
@@ -802,7 +802,7 @@ export function getTagColor(s) {
 }
 
 export function getTags(tags) {
-  let res = [];
+  const res = [];
   if (!tags) {return res;}
   tags.forEach((tag, i) => {
     res.push(
@@ -840,7 +840,7 @@ export function getFromLink() {
 
 export function scrollToDiv(divId) {
   if (divId) {
-    let ele = document.getElementById(divId);
+    const ele = document.getElementById(divId);
     if (ele) {
       ele.scrollIntoView({behavior: "smooth"});
     }

web/src/SignupTable.js

@@ -38,7 +38,7 @@ class SignupTable extends React.Component {
   }
 
   addRow(table) {
-    let row = {name: Setting.getNewRowNameForTable(table, "Please select a signup item"), visible: true, required: true, rule: "None"};
+    const row = {name: Setting.getNewRowNameForTable(table, "Please select a signup item"), visible: true, required: true, rule: "None"};
     if (table === undefined) {
       table = [];
     }

web/src/SyncerEditPage.js

@@ -73,7 +73,7 @@ class SyncerEditPage extends React.Component {
   updateSyncerField(key, value) {
     value = this.parseSyncerField(key, value);
 
-    let syncer = this.state.syncer;
+    const syncer = this.state.syncer;
     syncer[key] = value;
     this.setState({
       syncer: syncer,
@@ -119,7 +119,7 @@ class SyncerEditPage extends React.Component {
           <Col span={22} >
             <Select virtual={false} style={{width: "100%"}} value={this.state.syncer.type} onChange={(value => {
               this.updateSyncerField("type", value);
-              let syncer = this.state.syncer;
+              const syncer = this.state.syncer;
               syncer["tableColumns"] = Setting.getSyncerTableColumns(this.state.syncer);
               syncer.table = (value === "Keycloak") ? "user_entity" : this.state.syncer.table;
               this.setState({
@@ -295,7 +295,7 @@ class SyncerEditPage extends React.Component {
   }
 
   submitSyncerEdit(willExist) {
-    let syncer = Setting.deepCopy(this.state.syncer);
+    const syncer = Setting.deepCopy(this.state.syncer);
     SyncerBackend.updateSyncer(this.state.syncer.owner, this.state.syncerName, syncer)
       .then((res) => {
         if (res.msg === "") {

web/src/SyncerListPage.js

@@ -262,7 +262,7 @@ class SyncerListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.type !== undefined && params.type !== null) {
       field = "type";
       value = params.type;

web/src/SyncerTableColumnTable.js

@@ -38,7 +38,7 @@ class SyncerTableColumnTable extends React.Component {
   }
 
   addRow(table) {
-    let row = {name: `column${table.length}`, type: "string", values: []};
+    const row = {name: `column${table.length}`, type: "string", values: []};
     if (table === undefined) {
       table = [];
     }

web/src/TestEmailWidget.js

@@ -43,7 +43,7 @@ export function connectSmtpServer(provider) {
 }
 
 function testEmailProvider(provider, email = "") {
-  let emailForm = {
+  const emailForm = {
     title: provider.title,
     content: provider.content,
     sender: provider.displayName,

web/src/TokenEditPage.js

@@ -52,7 +52,7 @@ class TokenEditPage extends React.Component {
   updateTokenField(key, value) {
     value = this.parseTokenField(key, value);
 
-    let token = this.state.token;
+    const token = this.state.token;
     token[key] = value;
     this.setState({
       token: token,
@@ -164,7 +164,7 @@ class TokenEditPage extends React.Component {
   }
 
   submitTokenEdit(willExist) {
-    let token = Setting.deepCopy(this.state.token);
+    const token = Setting.deepCopy(this.state.token);
     TokenBackend.updateToken(this.state.token.owner, this.state.tokenName, token)
       .then((res) => {
         if (res.msg === "") {

web/src/TokenListPage.js

@@ -230,8 +230,8 @@ class TokenListPage extends BaseListPage {
   }
 
   fetch = (params = {}) => {
-    let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     this.setState({loading: true});
     TokenBackend.getTokens("admin", params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)
       .then((res) => {

web/src/UrlTable.js

@@ -36,7 +36,7 @@ class UrlTable extends React.Component {
   }
 
   addRow(table) {
-    let row = "";
+    const row = "";
     if (table === undefined) {
       table = [];
     }

web/src/UserEditPage.js

@@ -110,7 +110,7 @@ class UserEditPage extends React.Component {
   updateUserField(key, value) {
     value = this.parseUserField(key, value);
 
-    let user = this.state.user;
+    const user = this.state.user;
     user[key] = value;
     this.setState({
       user: user,
@@ -583,7 +583,7 @@ class UserEditPage extends React.Component {
   }
 
   submitUserEdit(willExist) {
-    let user = Setting.deepCopy(this.state.user);
+    const user = Setting.deepCopy(this.state.user);
     UserBackend.updateUser(this.state.organizationName, this.state.userName, user)
       .then((res) => {
         if (res.msg === "") {

web/src/UserListPage.js

@@ -131,9 +131,9 @@ class UserListPage extends BaseListPage {
 
   renderTable(users) {
     // transfer country code to name based on selected language
-    var countries = require("i18n-iso-countries");
+    const countries = require("i18n-iso-countries");
     countries.registerLocale(require("i18n-iso-countries/langs/" + i18next.language + ".json"));
-    for (var index in users) {
+    for (const index in users) {
       users[index].region = countries.getName(users[index].region, i18next.language, {select: "official"});
     }
 
@@ -368,8 +368,8 @@ class UserListPage extends BaseListPage {
   }
 
   fetch = (params = {}) => {
-    let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const field = params.searchedColumn, value = params.searchText;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     this.setState({loading: true});
     if (this.state.organizationName === undefined) {
       UserBackend.getGlobalUsers(params.pagination.current, params.pagination.pageSize, field, value, sortField, sortOrder)

web/src/WebhookEditPage.js

@@ -133,7 +133,7 @@ class WebhookEditPage extends React.Component {
   updateWebhookField(key, value) {
     value = this.parseWebhookField(key, value);
 
-    let webhook = this.state.webhook;
+    const webhook = this.state.webhook;
     webhook[key] = value;
     this.setState({
       webhook: webhook,
@@ -141,7 +141,7 @@ class WebhookEditPage extends React.Component {
   }
 
   renderWebhook() {
-    let preview = Setting.deepCopy(previewTemplate);
+    const preview = Setting.deepCopy(previewTemplate);
     if (this.state.webhook.isUserExtended) {
       preview["extendedUser"] = userTemplate;
     }
@@ -293,7 +293,7 @@ class WebhookEditPage extends React.Component {
   }
 
   submitWebhookEdit(willExist) {
-    let webhook = Setting.deepCopy(this.state.webhook);
+    const webhook = Setting.deepCopy(this.state.webhook);
     WebhookBackend.updateWebhook(this.state.webhook.owner, this.state.webhookName, webhook)
       .then((res) => {
         if (res.msg === "") {

web/src/WebhookHeaderTable.js

@@ -36,7 +36,7 @@ class WebhookHeaderTable extends React.Component {
   }
 
   addRow(table) {
-    let row = {name: `header-${table.length}`, value: `value-${table.length}`};
+    const row = {name: `header-${table.length}`, value: `value-${table.length}`};
     if (table === undefined) {
       table = [];
     }

web/src/WebhookListPage.js

@@ -227,7 +227,7 @@ class WebhookListPage extends BaseListPage {
 
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
-    let sortField = params.sortField, sortOrder = params.sortOrder;
+    const sortField = params.sortField, sortOrder = params.sortOrder;
     if (params.contentType !== undefined && params.contentType !== null) {
       field = "contentType";
       value = params.contentType;

web/src/auth/AuthCallback.js

@@ -77,7 +77,7 @@ class AuthCallback extends React.Component {
 
   UNSAFE_componentWillMount() {
     const params = new URLSearchParams(this.props.location.search);
-    let isSteam = params.get("openid.mode");
+    const isSteam = params.get("openid.mode");
     let code = params.get("code");
     // WeCom returns "auth_code=xxx" instead of "code=xxx"
     if (code === null) {
@@ -98,7 +98,7 @@ class AuthCallback extends React.Component {
     const method = innerParams.get("method");
     const samlRequest = innerParams.get("SAMLRequest");
 
-    let redirectUri = `${window.location.origin}/callback`;
+    const redirectUri = `${window.location.origin}/callback`;
 
     const body = {
       type: this.getResponseType(),

web/src/auth/CasLogout.js

@@ -40,7 +40,7 @@ class CasLogout extends React.Component {
         if (res.status === "ok") {
           Setting.showMessage("success", "Logged out successfully");
           this.props.clearAccount();
-          let redirectUri = res.data2;
+          const redirectUri = res.data2;
           if (redirectUri !== null && redirectUri !== undefined && redirectUri !== "") {
             Setting.goToLink(redirectUri);
           } else if (params.has("service")) {

web/src/auth/ForgetPage.js

@@ -176,7 +176,7 @@ class ForgetPage extends React.Component {
   onFinishFailed(values, errorFields) {}
 
   renderOptions() {
-    let options = [];
+    const options = [];
 
     if (this.state.phone !== "") {
       options.push(

web/src/auth/LoginPage.js

@@ -152,8 +152,8 @@ class LoginPage extends React.Component {
           Util.showMessage("success", msg);
 
           if (casParams.service !== "") {
-            let st = res.data;
-            let newUrl = new URL(casParams.service);
+            const st = res.data;
+            const newUrl = new URL(casParams.service);
             newUrl.searchParams.append("ticket", st);
             window.location.href = newUrl.toString();
           }
@@ -250,12 +250,12 @@ class LoginPage extends React.Component {
 
   getSamlUrl(provider) {
     const params = new URLSearchParams(this.props.location.search);
-    let clientId = params.get("client_id");
-    let application = params.get("state");
-    let realRedirectUri = params.get("redirect_uri");
-    let redirectUri = `${window.location.origin}/callback/saml`;
-    let providerName = provider.name;
-    let relayState = `${clientId}&${application}&${providerName}&${realRedirectUri}&${redirectUri}`;
+    const clientId = params.get("client_id");
+    const application = params.get("state");
+    const realRedirectUri = params.get("redirect_uri");
+    const redirectUri = `${window.location.origin}/callback/saml`;
+    const providerName = provider.name;
+    const relayState = `${clientId}&${application}&${providerName}&${realRedirectUri}&${redirectUri}`;
     AuthBackend.getSamlLogin(`${provider.owner}/${providerName}`, btoa(relayState)).then((res) => {
       if (res.data2 === "POST") {
         document.write(res.data);
@@ -285,7 +285,7 @@ class LoginPage extends React.Component {
           title="Sign Up Error"
           subTitle={"The application does not allow to sign up new account"}
           extra={[
-            <Link onClick={() => {
+            <Link key="login" onClick={() => {
               Setting.goToLogin(this, application);
             }}>
               <Button type="primary" key="signin">
@@ -507,20 +507,20 @@ class LoginPage extends React.Component {
     if (this.props.account === undefined || this.props.account === null) {
       return null;
     }
-    let application = this.getApplicationObj();
+    const application = this.getApplicationObj();
     if (this.props.account.owner !== application.organization) {
       return null;
     }
 
     const params = new URLSearchParams(this.props.location.search);
-    let silentSignin = params.get("silentSignin");
+    const silentSignin = params.get("silentSignin");
     if (silentSignin !== null) {
       if (window !== window.parent) {
         const message = {tag: "Casdoor", type: "SilentSignin", data: "signing-in"};
         window.parent.postMessage(message, "*");
       }
 
-      let values = {};
+      const values = {};
       values["application"] = this.state.application.name;
       this.onFinish(values);
     }
@@ -535,7 +535,7 @@ class LoginPage extends React.Component {
         </div>
         <br />
         <SelfLoginButton account={this.props.account} onClick={() => {
-          let values = {};
+          const values = {};
           values["application"] = this.state.application.name;
           this.onFinish(values);
         }} />
@@ -554,7 +554,7 @@ class LoginPage extends React.Component {
       return;
     }
 
-    let application = this.getApplicationObj();
+    const application = this.getApplicationObj();
     return fetch(`${Setting.ServerUrl}/api/webauthn/signin/begin?owner=${application.organization}&name=${username}`, {
       method: "GET",
       credentials: "include",
@@ -576,11 +576,11 @@ class LoginPage extends React.Component {
         });
       })
       .then((assertion) => {
-        let authData = assertion.response.authenticatorData;
-        let clientDataJSON = assertion.response.clientDataJSON;
-        let rawId = assertion.rawId;
-        let sig = assertion.response.signature;
-        let userHandle = assertion.response.userHandle;
+        const authData = assertion.response.authenticatorData;
+        const clientDataJSON = assertion.response.clientDataJSON;
+        const rawId = assertion.rawId;
+        const sig = assertion.response.signature;
+        const userHandle = assertion.response.userHandle;
         return fetch(`${Setting.ServerUrl}/api/webauthn/signin/finish`, {
           method: "POST",
           credentials: "include",
@@ -611,7 +611,7 @@ class LoginPage extends React.Component {
   }
 
   renderPasswordOrCodeInput() {
-    let application = this.getApplicationObj();
+    const application = this.getApplicationObj();
     if (this.state.loginMethod === "password") {
       return this.state.isCodeSignin ? (
         <Form.Item
@@ -640,7 +640,7 @@ class LoginPage extends React.Component {
   }
 
   renderMethodChoiceBox() {
-    let application = this.getApplicationObj();
+    const application = this.getApplicationObj();
     if (application.enableWebAuthn) {
       return (
         <div>

web/src/auth/OidcDiscoveryPage.js

@@ -16,7 +16,7 @@ import React from "react";
 import * as Setting from "../Setting";
 
 class OdicDiscoveryPage extends React.Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (Setting.isLocalhost()) {
       Setting.goToLink(`${Setting.ServerUrl}/.well-known/openid-configuration`);
     }

web/src/auth/PromptPage.js

@@ -81,7 +81,7 @@ class PromptPage extends React.Component {
   updateUserField(key, value) {
     value = this.parseUserField(key, value);
 
-    let user = this.state.user;
+    const user = this.state.user;
     user[key] = value;
     this.setState({
       user: user,
@@ -163,7 +163,7 @@ class PromptPage extends React.Component {
   }
 
   submitUserEdit(isFinal) {
-    let user = Setting.deepCopy(this.state.user);
+    const user = Setting.deepCopy(this.state.user);
     UserBackend.updateUser(this.state.user.owner, this.state.user.name, user)
       .then((res) => {
         if (res.msg === "") {

web/src/auth/ResultPage.js

@@ -65,7 +65,7 @@ class ResultPage extends React.Component {
           subTitle={i18next.t("signup:Please click the below button to sign in")}
           extra={[
             <Button type="primary" key="login" onClick={() => {
-              let linkInStorage = sessionStorage.getItem("signinUrl");
+              const linkInStorage = sessionStorage.getItem("signinUrl");
               if (linkInStorage !== null && linkInStorage !== "") {
                 Setting.goToLink(linkInStorage);
               } else {

web/src/auth/SamlCallback.js

@@ -47,8 +47,8 @@ class SamlCallback extends React.Component {
 
   UNSAFE_componentWillMount() {
     const params = new URLSearchParams(this.props.location.search);
-    let relayState = params.get("relayState");
-    let samlResponse = params.get("samlResponse");
+    const relayState = params.get("relayState");
+    const samlResponse = params.get("samlResponse");
     const messages = atob(relayState).split("&");
     const clientId = messages[0];
     const applicationName = messages[1] === "null" ? "app-built-in" : messages[1];

web/src/auth/SignupPage.js

@@ -581,7 +581,7 @@ class SignupPage extends React.Component {
           </Button>
           &nbsp;&nbsp;{i18next.t("signup:Have account?")}&nbsp;
           <a onClick={() => {
-            let linkInStorage = sessionStorage.getItem("signinUrl");
+            const linkInStorage = sessionStorage.getItem("signinUrl");
             if(linkInStorage != null) {
               Setting.goToLink(linkInStorage);
             }else{

web/src/backend/ApplicationBackend.js

@@ -43,7 +43,7 @@ export function getUserApplication(owner, name) {
 }
 
 export function updateApplication(owner, name, application) {
-  let newApplication = Setting.deepCopy(application);
+  const newApplication = Setting.deepCopy(application);
   return fetch(`${Setting.ServerUrl}/api/update-application?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -52,7 +52,7 @@ export function updateApplication(owner, name, application) {
 }
 
 export function addApplication(application) {
-  let newApplication = Setting.deepCopy(application);
+  const newApplication = Setting.deepCopy(application);
   newApplication.organization = "built-in";
   return fetch(`${Setting.ServerUrl}/api/add-application`, {
     method: "POST",
@@ -62,7 +62,7 @@ export function addApplication(application) {
 }
 
 export function deleteApplication(application) {
-  let newApplication = Setting.deepCopy(application);
+  const newApplication = Setting.deepCopy(application);
   return fetch(`${Setting.ServerUrl}/api/delete-application`, {
     method: "POST",
     credentials: "include",

web/src/backend/CertBackend.js

@@ -29,7 +29,7 @@ export function getCert(owner, name) {
 }
 
 export function updateCert(owner, name, cert) {
-  let newCert = Setting.deepCopy(cert);
+  const newCert = Setting.deepCopy(cert);
   return fetch(`${Setting.ServerUrl}/api/update-cert?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateCert(owner, name, cert) {
 }
 
 export function addCert(cert) {
-  let newCert = Setting.deepCopy(cert);
+  const newCert = Setting.deepCopy(cert);
   return fetch(`${Setting.ServerUrl}/api/add-cert`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addCert(cert) {
 }
 
 export function deleteCert(cert) {
-  let newCert = Setting.deepCopy(cert);
+  const newCert = Setting.deepCopy(cert);
   return fetch(`${Setting.ServerUrl}/api/delete-cert`, {
     method: "POST",
     credentials: "include",

web/src/backend/ModelBackend.js

@@ -29,7 +29,7 @@ export function getModel(owner, name) {
 }
 
 export function updateModel(owner, name, model) {
-  let newModel = Setting.deepCopy(model);
+  const newModel = Setting.deepCopy(model);
   return fetch(`${Setting.ServerUrl}/api/update-model?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateModel(owner, name, model) {
 }
 
 export function addModel(model) {
-  let newModel = Setting.deepCopy(model);
+  const newModel = Setting.deepCopy(model);
   return fetch(`${Setting.ServerUrl}/api/add-model`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addModel(model) {
 }
 
 export function deleteModel(model) {
-  let newModel = Setting.deepCopy(model);
+  const newModel = Setting.deepCopy(model);
   return fetch(`${Setting.ServerUrl}/api/delete-model`, {
     method: "POST",
     credentials: "include",

web/src/backend/OrganizationBackend.js

@@ -29,7 +29,7 @@ export function getOrganization(owner, name) {
 }
 
 export function updateOrganization(owner, name, organization) {
-  let newOrganization = Setting.deepCopy(organization);
+  const newOrganization = Setting.deepCopy(organization);
   return fetch(`${Setting.ServerUrl}/api/update-organization?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateOrganization(owner, name, organization) {
 }
 
 export function addOrganization(organization) {
-  let newOrganization = Setting.deepCopy(organization);
+  const newOrganization = Setting.deepCopy(organization);
   return fetch(`${Setting.ServerUrl}/api/add-organization`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addOrganization(organization) {
 }
 
 export function deleteOrganization(organization) {
-  let newOrganization = Setting.deepCopy(organization);
+  const newOrganization = Setting.deepCopy(organization);
   return fetch(`${Setting.ServerUrl}/api/delete-organization`, {
     method: "POST",
     credentials: "include",

web/src/backend/PaymentBackend.js

@@ -29,7 +29,7 @@ export function getPayment(owner, name) {
 }
 
 export function updatePayment(owner, name, payment) {
-  let newPayment = Setting.deepCopy(payment);
+  const newPayment = Setting.deepCopy(payment);
   return fetch(`${Setting.ServerUrl}/api/update-payment?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updatePayment(owner, name, payment) {
 }
 
 export function addPayment(payment) {
-  let newPayment = Setting.deepCopy(payment);
+  const newPayment = Setting.deepCopy(payment);
   return fetch(`${Setting.ServerUrl}/api/add-payment`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addPayment(payment) {
 }
 
 export function deletePayment(payment) {
-  let newPayment = Setting.deepCopy(payment);
+  const newPayment = Setting.deepCopy(payment);
   return fetch(`${Setting.ServerUrl}/api/delete-payment`, {
     method: "POST",
     credentials: "include",

web/src/backend/PermissionBackend.js

@@ -29,7 +29,7 @@ export function getPermission(owner, name) {
 }
 
 export function updatePermission(owner, name, permission) {
-  let newPermission = Setting.deepCopy(permission);
+  const newPermission = Setting.deepCopy(permission);
   return fetch(`${Setting.ServerUrl}/api/update-permission?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updatePermission(owner, name, permission) {
 }
 
 export function addPermission(permission) {
-  let newPermission = Setting.deepCopy(permission);
+  const newPermission = Setting.deepCopy(permission);
   return fetch(`${Setting.ServerUrl}/api/add-permission`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addPermission(permission) {
 }
 
 export function deletePermission(permission) {
-  let newPermission = Setting.deepCopy(permission);
+  const newPermission = Setting.deepCopy(permission);
   return fetch(`${Setting.ServerUrl}/api/delete-permission`, {
     method: "POST",
     credentials: "include",

web/src/backend/ProductBackend.js

@@ -29,7 +29,7 @@ export function getProduct(owner, name) {
 }
 
 export function updateProduct(owner, name, product) {
-  let newProduct = Setting.deepCopy(product);
+  const newProduct = Setting.deepCopy(product);
   return fetch(`${Setting.ServerUrl}/api/update-product?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateProduct(owner, name, product) {
 }
 
 export function addProduct(product) {
-  let newProduct = Setting.deepCopy(product);
+  const newProduct = Setting.deepCopy(product);
   return fetch(`${Setting.ServerUrl}/api/add-product`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addProduct(product) {
 }
 
 export function deleteProduct(product) {
-  let newProduct = Setting.deepCopy(product);
+  const newProduct = Setting.deepCopy(product);
   return fetch(`${Setting.ServerUrl}/api/delete-product`, {
     method: "POST",
     credentials: "include",

web/src/backend/ProviderBackend.js

@@ -29,7 +29,7 @@ export function getProvider(owner, name) {
 }
 
 export function updateProvider(owner, name, provider) {
-  let newProvider = Setting.deepCopy(provider);
+  const newProvider = Setting.deepCopy(provider);
   return fetch(`${Setting.ServerUrl}/api/update-provider?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateProvider(owner, name, provider) {
 }
 
 export function addProvider(provider) {
-  let newProvider = Setting.deepCopy(provider);
+  const newProvider = Setting.deepCopy(provider);
   return fetch(`${Setting.ServerUrl}/api/add-provider`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addProvider(provider) {
 }
 
 export function deleteProvider(provider) {
-  let newProvider = Setting.deepCopy(provider);
+  const newProvider = Setting.deepCopy(provider);
   return fetch(`${Setting.ServerUrl}/api/delete-provider`, {
     method: "POST",
     credentials: "include",

web/src/backend/ResourceBackend.js

@@ -29,7 +29,7 @@ export function getResource(owner, name) {
 }
 
 export function updateResource(owner, name, resource) {
-  let newResource = Setting.deepCopy(resource);
+  const newResource = Setting.deepCopy(resource);
   return fetch(`${Setting.ServerUrl}/api/update-resource?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateResource(owner, name, resource) {
 }
 
 export function addResource(resource) {
-  let newResource = Setting.deepCopy(resource);
+  const newResource = Setting.deepCopy(resource);
   return fetch(`${Setting.ServerUrl}/api/add-resource`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addResource(resource) {
 }
 
 export function deleteResource(resource, provider = "") {
-  let newResource = Setting.deepCopy(resource);
+  const newResource = Setting.deepCopy(resource);
   return fetch(`${Setting.ServerUrl}/api/delete-resource?provider=${provider}`, {
     method: "POST",
     credentials: "include",
@@ -57,7 +57,7 @@ export function deleteResource(resource, provider = "") {
 
 export function uploadResource(owner, user, tag, parent, fullFilePath, file, provider = "") {
   const application = "app-built-in";
-  let formData = new FormData();
+  const formData = new FormData();
   formData.append("file", file);
   return fetch(`${Setting.ServerUrl}/api/upload-resource?owner=${owner}&user=${user}&application=${application}&tag=${tag}&parent=${parent}&fullFilePath=${encodeURIComponent(fullFilePath)}&provider=${provider}`, {
     body: formData,

web/src/backend/RoleBackend.js

@@ -29,7 +29,7 @@ export function getRole(owner, name) {
 }
 
 export function updateRole(owner, name, role) {
-  let newRole = Setting.deepCopy(role);
+  const newRole = Setting.deepCopy(role);
   return fetch(`${Setting.ServerUrl}/api/update-role?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateRole(owner, name, role) {
 }
 
 export function addRole(role) {
-  let newRole = Setting.deepCopy(role);
+  const newRole = Setting.deepCopy(role);
   return fetch(`${Setting.ServerUrl}/api/add-role`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addRole(role) {
 }
 
 export function deleteRole(role) {
-  let newRole = Setting.deepCopy(role);
+  const newRole = Setting.deepCopy(role);
   return fetch(`${Setting.ServerUrl}/api/delete-role`, {
     method: "POST",
     credentials: "include",

web/src/backend/SyncerBackend.js

@@ -29,7 +29,7 @@ export function getSyncer(owner, name) {
 }
 
 export function updateSyncer(owner, name, syncer) {
-  let newSyncer = Setting.deepCopy(syncer);
+  const newSyncer = Setting.deepCopy(syncer);
   return fetch(`${Setting.ServerUrl}/api/update-syncer?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateSyncer(owner, name, syncer) {
 }
 
 export function addSyncer(syncer) {
-  let newSyncer = Setting.deepCopy(syncer);
+  const newSyncer = Setting.deepCopy(syncer);
   return fetch(`${Setting.ServerUrl}/api/add-syncer`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addSyncer(syncer) {
 }
 
 export function deleteSyncer(syncer) {
-  let newSyncer = Setting.deepCopy(syncer);
+  const newSyncer = Setting.deepCopy(syncer);
   return fetch(`${Setting.ServerUrl}/api/delete-syncer`, {
     method: "POST",
     credentials: "include",

web/src/backend/TokenBackend.js

@@ -29,7 +29,7 @@ export function getToken(owner, name) {
 }
 
 export function updateToken(owner, name, token) {
-  let newToken = Setting.deepCopy(token);
+  const newToken = Setting.deepCopy(token);
   return fetch(`${Setting.ServerUrl}/api/update-token?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateToken(owner, name, token) {
 }
 
 export function addToken(token) {
-  let newToken = Setting.deepCopy(token);
+  const newToken = Setting.deepCopy(token);
   return fetch(`${Setting.ServerUrl}/api/add-token`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addToken(token) {
 }
 
 export function deleteToken(token) {
-  let newToken = Setting.deepCopy(token);
+  const newToken = Setting.deepCopy(token);
   return fetch(`${Setting.ServerUrl}/api/delete-token`, {
     method: "POST",
     credentials: "include",

web/src/backend/UserBackend.js

@@ -37,7 +37,7 @@ export function getUser(owner, name) {
 }
 
 export function updateUser(owner, name, user) {
-  let newUser = Setting.deepCopy(user);
+  const newUser = Setting.deepCopy(user);
   return fetch(`${Setting.ServerUrl}/api/update-user?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -46,7 +46,7 @@ export function updateUser(owner, name, user) {
 }
 
 export function addUser(user) {
-  let newUser = Setting.deepCopy(user);
+  const newUser = Setting.deepCopy(user);
   return fetch(`${Setting.ServerUrl}/api/add-user`, {
     method: "POST",
     credentials: "include",
@@ -55,7 +55,7 @@ export function addUser(user) {
 }
 
 export function deleteUser(user) {
-  let newUser = Setting.deepCopy(user);
+  const newUser = Setting.deepCopy(user);
   return fetch(`${Setting.ServerUrl}/api/delete-user`, {
     method: "POST",
     credentials: "include",
@@ -76,7 +76,7 @@ export function getAffiliationOptions(url, code) {
 }
 
 export function setPassword(userOwner, userName, oldPassword, newPassword) {
-  let formData = new FormData();
+  const formData = new FormData();
   formData.append("userOwner", userOwner);
   formData.append("userName", userName);
   formData.append("oldPassword", oldPassword);
@@ -89,7 +89,7 @@ export function setPassword(userOwner, userName, oldPassword, newPassword) {
 }
 
 export function sendCode(checkType, checkId, checkKey, dest, type, applicationId, checkUser) {
-  let formData = new FormData();
+  const formData = new FormData();
   formData.append("checkType", checkType);
   formData.append("checkId", checkId);
   formData.append("checkKey", checkKey);
@@ -113,7 +113,7 @@ export function sendCode(checkType, checkId, checkKey, dest, type, applicationId
 }
 
 export function verifyCaptcha(captchaType, captchaToken, clientSecret) {
-  let formData = new FormData();
+  const formData = new FormData();
   formData.append("captchaType", captchaType);
   formData.append("captchaToken", captchaToken);
   formData.append("clientSecret", clientSecret);
@@ -137,7 +137,7 @@ export function verifyCaptcha(captchaType, captchaToken, clientSecret) {
 }
 
 export function resetEmailOrPhone(dest, type, code) {
-  let formData = new FormData();
+  const formData = new FormData();
   formData.append("dest", dest);
   formData.append("type", type);
   formData.append("code", code);

web/src/backend/UserWebauthnBackend.js

@@ -24,7 +24,7 @@ export function registerWebauthnCredential() {
       credentialCreationOptions.publicKey.challenge = webAuthnBufferDecode(credentialCreationOptions.publicKey.challenge);
       credentialCreationOptions.publicKey.user.id = webAuthnBufferDecode(credentialCreationOptions.publicKey.user.id);
       if (credentialCreationOptions.publicKey.excludeCredentials) {
-        for (var i = 0; i < credentialCreationOptions.publicKey.excludeCredentials.length; i++) {
+        for (let i = 0; i < credentialCreationOptions.publicKey.excludeCredentials.length; i++) {
           credentialCreationOptions.publicKey.excludeCredentials[i].id = webAuthnBufferDecode(credentialCreationOptions.publicKey.excludeCredentials[i].id);
         }
       }
@@ -33,9 +33,9 @@ export function registerWebauthnCredential() {
       });
     })
     .then((credential) => {
-      let attestationObject = credential.response.attestationObject;
-      let clientDataJSON = credential.response.clientDataJSON;
-      let rawId = credential.rawId;
+      const attestationObject = credential.response.attestationObject;
+      const clientDataJSON = credential.response.clientDataJSON;
+      const rawId = credential.rawId;
       return fetch(`${Setting.ServerUrl}/api/webauthn/signup/finish`, {
         method: "POST",
         credentials: "include",
@@ -54,7 +54,7 @@ export function registerWebauthnCredential() {
 }
 
 export function deleteUserWebAuthnCredential(credentialID) {
-  let form = new FormData();
+  const form = new FormData();
   form.append("credentialID", credentialID);
 
   return fetch(`${Setting.ServerUrl}/api/webauthn/delete-credential`, {

web/src/backend/WebhookBackend.js

@@ -29,7 +29,7 @@ export function getWebhook(owner, name) {
 }
 
 export function updateWebhook(owner, name, webhook) {
-  let newWebhook = Setting.deepCopy(webhook);
+  const newWebhook = Setting.deepCopy(webhook);
   return fetch(`${Setting.ServerUrl}/api/update-webhook?id=${owner}/${encodeURIComponent(name)}`, {
     method: "POST",
     credentials: "include",
@@ -38,7 +38,7 @@ export function updateWebhook(owner, name, webhook) {
 }
 
 export function addWebhook(webhook) {
-  let newWebhook = Setting.deepCopy(webhook);
+  const newWebhook = Setting.deepCopy(webhook);
   return fetch(`${Setting.ServerUrl}/api/add-webhook`, {
     method: "POST",
     credentials: "include",
@@ -47,7 +47,7 @@ export function addWebhook(webhook) {
 }
 
 export function deleteWebhook(webhook) {
-  let newWebhook = Setting.deepCopy(webhook);
+  const newWebhook = Setting.deepCopy(webhook);
   return fetch(`${Setting.ServerUrl}/api/delete-webhook`, {
     method: "POST",
     credentials: "include",

web/src/basic/HomePage.js

@@ -84,7 +84,7 @@ class HomePage extends React.Component {
           {
             items.map(item => {
               return (
-                <SingleCard logo={item.logo} link={item.link} title={item.name} desc={item.organizer} isSingle={items.length === 1} />
+                <SingleCard key={item.link} logo={item.logo} link={item.link} title={item.name} desc={item.organizer} isSingle={items.length === 1} />
               );
             })
           }

web/src/common/AffiliationSelect.js

@@ -30,7 +30,7 @@ class AffiliationSelect extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getAddressOptions(this.props.application);
     this.getAffiliationOptions(this.props.application, this.props.user);
   }

web/src/common/CaptchaWidget.js

@@ -16,10 +16,10 @@ import React, {useEffect} from "react";
 
 export const CaptchaWidget = ({captchaType, subType, siteKey, clientSecret, onChange, clientId2, clientSecret2}) => {
   const loadScript = (src) => {
-    var tag = document.createElement("script");
+    const tag = document.createElement("script");
     tag.async = false;
     tag.src = src;
-    var body = document.getElementsByTagName("body")[0];
+    const body = document.getElementsByTagName("body")[0];
     body.appendChild(tag);
   };
 

web/src/common/OAuthWidget.js

@@ -30,7 +30,7 @@ class OAuthWidget extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getAddressOptions(this.props.application);
     this.getAffiliationOptions(this.props.application, this.props.user);
   }

web/src/i18n.js

@@ -39,8 +39,7 @@ function initLanguage() {
     if (Conf.ForceLanguage !== "") {
       language = Conf.ForceLanguage;
     } else {
-      let userLanguage;
-      userLanguage = navigator.language;
+      const userLanguage = navigator.language;
       switch (userLanguage) {
       case "zh-CN":
         language = "zh";