feat: update antd from 5.2.3 to 5.24.1 (#3593)

Signed-off-by: WindSpiritSR <simon343riley@gmail.com>

controllers/account.go

@@ -458,6 +458,10 @@ func (c *ApiController) GetAccount() {
 		return
 	}
 
+	if organization != nil && len(organization.CountryCodes) == 1 && u != nil && u.CountryCode == "" {
+		u.CountryCode = organization.CountryCodes[0]
+	}
+
 	accessToken := c.GetSessionToken()
 	if accessToken == "" {
 		accessToken, err = object.GetAccessTokenByUser(user, c.Ctx.Request.Host)

controllers/auth.go

@@ -54,6 +54,11 @@ func tokenToResponse(token *object.Token) *Response {
 
 // HandleLoggedIn ...
 func (c *ApiController) HandleLoggedIn(application *object.Application, user *object.User, form *form.AuthForm) (resp *Response) {
+	if user.IsForbidden {
+		c.ResponseError(c.T("check:The user is forbidden to sign in, please contact the administrator"))
+		return
+	}
+
 	userId := user.GetId()
 
 	clientIp := util.GetClientIpFromRequest(c.Ctx.Request)
@@ -678,10 +683,6 @@ func (c *ApiController) Login() {
 
 			if user != nil && !user.IsDeleted {
 				// Sign in via OAuth (want to sign up but already have account)
-
-				if user.IsForbidden {
-					c.ResponseError(c.T("check:The user is forbidden to sign in, please contact the administrator"))
-				}
 				// sync info from 3rd-party if possible
 				_, err = object.SetUserOAuthProperties(organization, user, provider.Type, userInfo)
 				if err != nil {

email/provider.go

@@ -24,7 +24,7 @@ func GetEmailProvider(typ string, clientId string, clientSecret string, host str
 	} else if typ == "Custom HTTP Email" {
 		return NewHttpEmailProvider(endpoint, method)
 	} else if typ == "SendGrid" {
-		return NewSendgridEmailProvider(clientSecret)
+		return NewSendgridEmailProvider(clientSecret, host, endpoint)
 	} else {
 		return NewSmtpEmailProvider(clientId, clientSecret, host, port, typ, disableSsl)
 	}

email/sendgrid.go

@@ -17,14 +17,16 @@ package email
 import (
 	"encoding/json"
 	"fmt"
-	"strings"
+	"net/http"
 
 	"github.com/sendgrid/sendgrid-go"
 	"github.com/sendgrid/sendgrid-go/helpers/mail"
 )
 
 type SendgridEmailProvider struct {
-	ApiKey string
+	ApiKey   string
+	Host     string
+	Endpoint string
 }
 
 type SendgridResponseBody struct {
@@ -35,23 +37,25 @@ type SendgridResponseBody struct {
 	} `json:"errors"`
 }
 
-func NewSendgridEmailProvider(apiKey string) *SendgridEmailProvider {
-	return &SendgridEmailProvider{ApiKey: apiKey}
+func NewSendgridEmailProvider(apiKey string, host string, endpoint string) *SendgridEmailProvider {
+	return &SendgridEmailProvider{ApiKey: apiKey, Host: host, Endpoint: endpoint}
 }
 
-func (s *SendgridEmailProvider) Send(fromAddress string, fromName, toAddress string, subject string, content string) error {
+func (s *SendgridEmailProvider) Send(fromAddress string, fromName string, toAddress string, subject string, content string) error {
+	client := s.initSendgridClient()
+
 	from := mail.NewEmail(fromName, fromAddress)
 	to := mail.NewEmail("", toAddress)
 	message := mail.NewSingleEmail(from, subject, to, "", content)
-	client := sendgrid.NewSendClient(s.ApiKey)
-	response, err := client.Send(message)
+
+	resp, err := client.Send(message)
 	if err != nil {
 		return err
 	}
 
-	if response.StatusCode >= 300 {
+	if resp.StatusCode >= 300 {
 		var responseBody SendgridResponseBody
-		err = json.Unmarshal([]byte(response.Body), &responseBody)
+		err = json.Unmarshal([]byte(resp.Body), &responseBody)
 		if err != nil {
 			return err
 		}
@@ -61,8 +65,23 @@ func (s *SendgridEmailProvider) Send(fromAddress string, fromName, toAddress str
 			messages = append(messages, sendgridError.Message)
 		}
 
-		return fmt.Errorf("SendGrid status code: %d, error message: %s", response.StatusCode, strings.Join(messages, " | "))
+		return fmt.Errorf("status code: %d, error message: %s", resp.StatusCode, messages)
+	}
+
+	if resp.StatusCode != http.StatusAccepted {
+		return fmt.Errorf("status code: %d", resp.StatusCode)
 	}
 
 	return nil
 }
+
+func (s *SendgridEmailProvider) initSendgridClient() *sendgrid.Client {
+	if s.Host == "" || s.Endpoint == "" {
+		return sendgrid.NewSendClient(s.ApiKey)
+	}
+
+	request := sendgrid.GetRequest(s.ApiKey, s.Endpoint, s.Host)
+	request.Method = "POST"
+
+	return &sendgrid.Client{Request: request}
+}

object/check.go

@@ -252,7 +252,7 @@ func CheckPassword(user *User, password string, lang string, options ...bool) er
 	credManager := cred.GetCredManager(passwordType)
 	if credManager != nil {
 		if organization.MasterPassword != "" {
-			if credManager.IsPasswordCorrect(password, organization.MasterPassword, "", organization.PasswordSalt) {
+			if password == organization.MasterPassword || credManager.IsPasswordCorrect(password, organization.MasterPassword, "", organization.PasswordSalt) {
 				return resetUserSigninErrorTimes(user)
 			}
 		}

object/check_password_complexity.go

@@ -74,7 +74,7 @@ func checkPasswordComplexity(password string, options []string) string {
 	}
 
 	if len(options) == 0 {
-		options = []string{"AtLeast6"}
+		return ""
 	}
 
 	checkers := map[string]ValidatorFunc{

object/get-dashboard.go

@@ -17,6 +17,8 @@ package object
 import (
 	"sync"
 	"time"
+
+	"github.com/casdoor/casdoor/conf"
 )
 
 type DashboardDateItem struct {
@@ -40,11 +42,12 @@ func GetDashboard(owner string) (*map[string][]int64, error) {
 	time30day := time.Now().AddDate(0, 0, -30)
 	var wg sync.WaitGroup
 	var err error
+	tableNamePrefix := conf.GetConfigString("tableNamePrefix")
 	wg.Add(len(tableNames))
 	ch := make(chan error, len(tableNames))
 	for _, tableName := range tableNames {
 		dashboard[tableName+"Counts"] = make([]int64, 31)
-		tableName := tableName
+		tableFullName := tableNamePrefix + tableName
 		go func(ch chan error) {
 			defer wg.Done()
 			dashboardDateItems := []DashboardDateItem{}
@@ -58,16 +61,16 @@ func GetDashboard(owner string) (*map[string][]int64, error) {
 				dbQueryBefore = dbQueryBefore.And("owner = ?", owner)
 			}
 
-			if countResult, err = dbQueryBefore.And("created_time < ?", time30day).Table(tableName).Count(); err != nil {
+			if countResult, err = dbQueryBefore.And("created_time < ?", time30day).Table(tableFullName).Count(); err != nil {
 				ch <- err
 				return
 			}
-			if err = dbQueryAfter.And("created_time >= ?", time30day).Table(tableName).Find(&dashboardDateItems); err != nil {
+			if err = dbQueryAfter.And("created_time >= ?", time30day).Table(tableFullName).Find(&dashboardDateItems); err != nil {
 				ch <- err
 				return
 			}
 
-			dashboardMap.Store(tableName, DashboardMapItem{
+			dashboardMap.Store(tableFullName, DashboardMapItem{
 				dashboardDateItems: dashboardDateItems,
 				itemCount:          countResult,
 			})

object/token_jwt.go

@@ -30,6 +30,8 @@ type Claims struct {
 	Nonce     string `json:"nonce,omitempty"`
 	Tag       string `json:"tag"`
 	Scope     string `json:"scope,omitempty"`
+	// the `azp` (Authorized Party) claim. Optional. See https://openid.net/specs/openid-connect-core-1_0.html#IDToken
+	Azp string `json:"azp,omitempty"`
 	jwt.RegisteredClaims
 }
 
@@ -137,6 +139,7 @@ type ClaimsShort struct {
 	TokenType string `json:"tokenType,omitempty"`
 	Nonce     string `json:"nonce,omitempty"`
 	Scope     string `json:"scope,omitempty"`
+	Azp       string `json:"azp,omitempty"`
 	jwt.RegisteredClaims
 }
 
@@ -155,6 +158,7 @@ type ClaimsWithoutThirdIdp struct {
 	Nonce     string `json:"nonce,omitempty"`
 	Tag       string `json:"tag"`
 	Scope     string `json:"scope,omitempty"`
+	Azp       string `json:"azp,omitempty"`
 	jwt.RegisteredClaims
 }
 
@@ -269,6 +273,7 @@ func getShortClaims(claims Claims) ClaimsShort {
 		Nonce:            claims.Nonce,
 		Scope:            claims.Scope,
 		RegisteredClaims: claims.RegisteredClaims,
+		Azp:              claims.Azp,
 	}
 	return res
 }
@@ -281,6 +286,7 @@ func getClaimsWithoutThirdIdp(claims Claims) ClaimsWithoutThirdIdp {
 		Tag:                 claims.Tag,
 		Scope:               claims.Scope,
 		RegisteredClaims:    claims.RegisteredClaims,
+		Azp:                 claims.Azp,
 	}
 	return res
 }
@@ -301,6 +307,7 @@ func getClaimsCustom(claims Claims, tokenField []string) jwt.MapClaims {
 	res["nonce"] = claims.Nonce
 	res["tag"] = claims.Tag
 	res["scope"] = claims.Scope
+	res["azp"] = claims.Azp
 
 	for _, field := range tokenField {
 		userField := userValue.FieldByName(field)
@@ -357,6 +364,7 @@ func generateJwtToken(application *Application, user *User, nonce string, scope
 		// FIXME: A workaround for custom claim by reusing `tag` in user info
 		Tag:   user.Tag,
 		Scope: scope,
+		Azp:   application.ClientId,
 		RegisteredClaims: jwt.RegisteredClaims{
 			Issuer:    originBackend,
 			Subject:   user.Id,

object/token_standard_jwt.go

@@ -32,6 +32,7 @@ type ClaimsStandard struct {
 	Nonce               string      `json:"nonce,omitempty"`
 	Scope               string      `json:"scope,omitempty"`
 	Address             OIDCAddress `json:"address,omitempty"`
+	Azp                 string      `json:"azp,omitempty"`
 
 	jwt.RegisteredClaims
 }
@@ -52,6 +53,7 @@ func getStandardClaims(claims Claims) ClaimsStandard {
 		Nonce:            claims.Nonce,
 		Scope:            claims.Scope,
 		RegisteredClaims: claims.RegisteredClaims,
+		Azp:              claims.Azp,
 	}
 
 	res.Phone = ""

object/verification.go

@@ -86,9 +86,9 @@ func SendVerificationCodeToEmail(organization *Organization, user *User, provide
 	title := provider.Title
 
 	code := getRandomCode(6)
-	if organization.MasterVerificationCode != "" {
-		code = organization.MasterVerificationCode
-	}
+	// if organization.MasterVerificationCode != "" {
+	//	code = organization.MasterVerificationCode
+	// }
 
 	// "You have requested a verification code at Casdoor. Here is your code: %s, please enter in 5 minutes."
 	content := strings.Replace(provider.Content, "%s", code, 1)
@@ -124,9 +124,9 @@ func SendVerificationCodeToPhone(organization *Organization, user *User, provide
 	}
 
 	code := getRandomCode(6)
-	if organization.MasterVerificationCode != "" {
-		code = organization.MasterVerificationCode
-	}
+	// if organization.MasterVerificationCode != "" {
+	//	code = organization.MasterVerificationCode
+	// }
 
 	err = SendSms(provider, code, dest)
 	if err != nil {

web/package.json

@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/cssinjs": "^1.10.1",
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/cssinjs": "^1.23.0",
+    "@ant-design/icons": "^5.6.1",
     "@craco/craco": "^6.4.5",
     "@crowdin/cli": "^3.7.10",
     "@ctrl/tinycolor": "^3.5.0",
     "@emotion/react": "^11.10.5",
     "@metamask/eth-sig-util": "^6.0.0",
+    "@uiw/codemirror-extensions-langs": "^4.23.8",
+    "@uiw/codemirror-theme-material": "^4.23.8",
+    "@uiw/react-codemirror": "^4.23.8",
     "@web3-onboard/coinbase": "^2.2.5",
     "@web3-onboard/core": "^2.20.5",
     "@web3-onboard/frontier": "^2.0.4",
@@ -20,10 +23,10 @@
     "@web3-onboard/sequence": "^2.0.8",
     "@web3-onboard/taho": "^2.0.5",
     "@web3-onboard/trust": "^2.0.4",
-    "antd": "5.2.3",
-    "antd-token-previewer": "^1.1.0-22",
+    "antd": "5.24.1",
+    "antd-token-previewer": "^2.0.8",
     "buffer": "^6.0.3",
-    "codemirror": "^5.61.1",
+    "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.25.0",
     "craco-less": "^2.0.0",
@@ -40,7 +43,6 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
-    "react-codemirror2": "^7.2.1",
     "react-cropper": "^2.1.7",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",

web/src/App.js

@@ -327,7 +327,7 @@ class App extends Component {
             isAiAssistantOpen: false,
           });
         }}
-        visible={this.state.isAiAssistantOpen}
+        open={this.state.isAiAssistantOpen}
       >
         <iframe id="iframeHelper" title={"iframeHelper"} src={`${Conf.AiAssistantUrl}/?isRaw=1`} width="100%" height="100%" scrolling="no" frameBorder="no" />
       </Drawer>

web/src/App.less

@@ -58,6 +58,16 @@ img {
   }
 }
 
+.org-select {
+  display: flex;
+  position: relative;
+  transform: translateY(50%);
+  margin: 0 10px !important;
+  float: right;
+  min-width: 120px;
+  max-width: 180px;
+}
+
 .rightDropDown {
   display: flex;
   align-items: center;

web/src/ApplicationEditPage.js

@@ -34,14 +34,8 @@ import PromptPage from "./auth/PromptPage";
 import copy from "copy-to-clipboard";
 import ThemeEditor from "./common/theme/ThemeEditor";
 
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
 import SigninTable from "./table/SigninTable";
-
-require("codemirror/theme/material-darker.css");
-require("codemirror/mode/htmlmixed/htmlmixed");
-require("codemirror/mode/xml/xml");
-require("codemirror/mode/css/css");
+import Editor from "./common/Editor";
 
 const {Option} = Select;
 
@@ -629,13 +623,9 @@ class ApplicationEditPage extends React.Component {
           <Col span={22} >
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror
-                  value={this.state.application.signupHtml}
-                  options={{mode: "htmlmixed", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
-                    this.updateApplicationField("signupHtml", value);
-                  }}
-                />
+                <Editor value={this.state.application.signupHtml} lang="html" fillHeight dark onChange={value => {
+                  this.updateApplicationField("signupHtml", value);
+                }} />
               </div>
             } title={i18next.t("provider:Signup HTML - Edit")} trigger="click">
               <Input value={this.state.application.signupHtml} style={{marginBottom: "10px"}} onChange={e => {
@@ -651,13 +641,9 @@ class ApplicationEditPage extends React.Component {
           <Col span={22} >
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror
-                  value={this.state.application.signinHtml}
-                  options={{mode: "htmlmixed", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
-                    this.updateApplicationField("signinHtml", value);
-                  }}
-                />
+                <Editor value={this.state.application.signinHtml} lang="html" fillHeight dark onChange={value => {
+                  this.updateApplicationField("signinHtml", value);
+                }} />
               </div>
             } title={i18next.t("provider:Signin HTML - Edit")} trigger="click">
               <Input value={this.state.application.signinHtml} style={{marginBottom: "10px"}} onChange={e => {
@@ -758,11 +744,7 @@ class ApplicationEditPage extends React.Component {
             {Setting.getLabel(i18next.t("application:SAML metadata"), i18next.t("application:SAML metadata - Tooltip"))} :
           </Col>
           <Col span={22}>
-            <CodeMirror
-              value={this.state.samlMetadata}
-              options={{mode: "xml", theme: "default"}}
-              onBeforeChange={(editor, data, value) => {}}
-            />
+            <Editor value={this.state.samlMetadata?.toString() ?? ""} lang="xml" readOnly />
             <br />
             <Button style={{marginBottom: "10px"}} type="primary" shape="round" icon={<CopyOutlined />} onClick={() => {
               copy(`${window.location.origin}/api/saml/metadata?application=admin/${encodeURIComponent(this.state.applicationName)}&enablePostBinding=${this.state.application.enableSamlPostBinding}`);
@@ -829,9 +811,12 @@ class ApplicationEditPage extends React.Component {
           <Col span={22}>
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror value={this.state.application.formCss === "" ? template : this.state.application.formCss}
-                  options={{mode: "css", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
+                <Editor
+                  value={this.state.application.formCss === "" ? template : this.state.application.formCss}
+                  lang="css"
+                  fillHeight
+                  dark
+                  onChange={value => {
                     this.updateApplicationField("formCss", value);
                   }}
                 />
@@ -850,9 +835,12 @@ class ApplicationEditPage extends React.Component {
           <Col span={22}>
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror value={this.state.application.formCssMobile === "" ? template : this.state.application.formCssMobile}
-                  options={{mode: "css", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
+                <Editor
+                  value={this.state.application.formCssMobile === "" ? template : this.state.application.formCssMobile}
+                  lang="css"
+                  fillHeight
+                  dark
+                  onChange={value => {
                     this.updateApplicationField("formCssMobile", value);
                   }}
                 />
@@ -887,9 +875,12 @@ class ApplicationEditPage extends React.Component {
                 <Col span={21} >
                   <Popover placement="right" content={
                     <div style={{width: "900px", height: "300px"}} >
-                      <CodeMirror value={this.state.application.formSideHtml === "" ? sideTemplate : this.state.application.formSideHtml}
-                        options={{mode: "htmlmixed", theme: "material-darker"}}
-                        onBeforeChange={(editor, data, value) => {
+                      <Editor
+                        value={this.state.application.formSideHtml === "" ? sideTemplate : this.state.application.formSideHtml}
+                        lang="html"
+                        fillHeight
+                        dark
+                        onChange={value => {
                           this.updateApplicationField("formSideHtml", value);
                         }}
                       />
@@ -936,10 +927,12 @@ class ApplicationEditPage extends React.Component {
           <Col span={22} >
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror
+                <Editor
                   value={this.state.application.headerHtml}
-                  options={{mode: "htmlmixed", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
+                  lang="html"
+                  fillHeight
+                  dark
+                  onChange={value => {
                     this.updateApplicationField("headerHtml", value);
                   }}
                 />
@@ -958,10 +951,12 @@ class ApplicationEditPage extends React.Component {
           <Col span={22} >
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}} >
-                <CodeMirror
+                <Editor
                   value={this.state.application.footerHtml}
-                  options={{mode: "htmlmixed", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
+                  lang="html"
+                  fillHeight
+                  dark
+                  onChange={value => {
                     this.updateApplicationField("footerHtml", value);
                   }}
                 />

web/src/BaseListPage.js

@@ -73,7 +73,7 @@ class BaseListPage extends React.Component {
     this.fetch({pagination});
   }
 
-  getColumnSearchProps = dataIndex => ({
+  getColumnSearchProps = (dataIndex, customRender = null) => ({
     filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
       <div style={{padding: 8}}>
         <Input
@@ -121,13 +121,15 @@ class BaseListPage extends React.Component {
       record[dataIndex]
         ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
         : "",
-    onFilterDropdownOpenChange: visible => {
-      if (visible) {
-        setTimeout(() => this.searchInput.select(), 100);
-      }
+    filterDropdownProps: {
+      onOpenChange: visible => {
+        if (visible) {
+          setTimeout(() => this.searchInput.select(), 100);
+        }
+      },
     },
-    render: text =>
-      this.state.searchedColumn === dataIndex ? (
+    render: (text, record, index) => {
+      const highlightContent = this.state.searchedColumn === dataIndex ? (
         <Highlighter
           highlightStyle={{backgroundColor: "#ffc069", padding: 0}}
           searchWords={[this.state.searchText]}
@@ -136,7 +138,10 @@ class BaseListPage extends React.Component {
         />
       ) : (
         text
-      ),
+      );
+
+      return customRender ? customRender({text, record, index}, highlightContent) : highlightContent;
+    },
   });
 
   handleSearch = (selectedKeys, confirm, dataIndex) => {
@@ -170,7 +175,7 @@ class BaseListPage extends React.Component {
     const steps = TourConfig.getSteps();
     steps.map((item, index) => {
       if (!index) {
-        item.target = () => document.querySelector("table");
+        item.target = () => document.querySelector(".ant-table");
       } else {
         item.target = () => document.getElementById(item.id) || null;
       }

web/src/CasbinEditor.js

@@ -13,15 +13,11 @@
 // limitations under the License.
 
 import React, {useCallback, useEffect, useRef, useState} from "react";
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-import "codemirror/mode/properties/properties";
 import * as Setting from "./Setting";
 import IframeEditor from "./IframeEditor";
 import {Tabs} from "antd";
 import i18next from "i18next";
-
-const {TabPane} = Tabs;
+import Editor from "./common/Editor";
 
 const CasbinEditor = ({model, onModelTextChange}) => {
   const [activeKey, setActiveKey] = useState("advanced");
@@ -68,10 +64,15 @@ const CasbinEditor = ({model, onModelTextChange}) => {
 
   return (
     <div style={{height: "100%", width: "100%", display: "flex", flexDirection: "column"}}>
-      <Tabs activeKey={activeKey} onChange={handleTabChange} style={{flex: "0 0 auto", marginTop: "-10px"}}>
-        <TabPane tab={i18next.t("model:Basic Editor")} key="basic" />
-        <TabPane tab={i18next.t("model:Advanced Editor")} key="advanced" />
-      </Tabs>
+      <Tabs
+        activeKey={activeKey}
+        onChange={handleTabChange}
+        style={{flex: "0 0 auto", marginTop: "-10px"}}
+        items={[
+          {key: "basic", label: i18next.t("model:Basic Editor")},
+          {key: "advanced", label: i18next.t("model:Advanced Editor")},
+        ]}
+      />
       <div style={{flex: "1 1 auto", overflow: "hidden"}}>
         {activeKey === "advanced" ? (
           <IframeEditor
@@ -81,11 +82,10 @@ const CasbinEditor = ({model, onModelTextChange}) => {
             style={{width: "100%", height: "100%"}}
           />
         ) : (
-          <CodeMirror
+          <Editor
             value={localModelText}
-            className="full-height-editor no-horizontal-scroll-editor"
-            options={{mode: "properties", theme: "default"}}
-            onBeforeChange={(editor, data, value) => {
+            readOnly={Setting.builtInObject(model)}
+            onChange={value => {
               handleModelTextChange(value);
             }}
           />

web/src/ManagementPage.js

@@ -206,11 +206,11 @@ function ManagementPage(props) {
                         <OrganizationSelect
                           initValue={Setting.getOrganization()}
                           withAll={true}
-                          style={{marginRight: "20px", width: "180px", display: !Setting.isMobile() ? "flex" : "none"}}
+                          className="org-select"
+                          style={{display: Setting.isMobile() ? "none" : "flex"}}
                           onChange={(value) => {
                             Setting.setOrganization(value);
                           }}
-                          className="select-box"
                         />
           }
         </React.Fragment>
@@ -459,7 +459,7 @@ function ManagementPage(props) {
       <Header style={{padding: "0", marginBottom: "3px", backgroundColor: props.themeAlgorithm.includes("dark") ? "black" : "white"}} >
         {props.requiredEnableMfa || (Setting.isMobile() ?
           <React.Fragment>
-            <Drawer title={i18next.t("general:Close")} placement="left" visible={menuVisible} onClose={onClose}>
+            <Drawer title={i18next.t("general:Close")} placement="left" open={menuVisible} onClose={onClose}>
               <Menu
                 items={getMenuItems()}
                 mode={"inline"}

web/src/ModelListPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Controlled as CodeMirror} from "react-codemirror2";
+
 import {Link} from "react-router-dom";
 import {Button, Popover, Table} from "antd";
 import moment from "moment";
@@ -22,6 +22,7 @@ import * as ModelBackend from "./backend/ModelBackend";
 import i18next from "i18next";
 import BaseListPage from "./BaseListPage";
 import PopconfirmModal from "./common/modal/PopconfirmModal";
+import Editor from "./common/Editor";
 
 const rbacModel = `[request_definition]
 r = sub, obj, act
@@ -148,11 +149,7 @@ class ModelListPage extends BaseListPage {
           return (
             <Popover placement="topRight" content={() => {
               return (
-                <CodeMirror
-                  value={text}
-                  options={{mode: "properties", theme: "default"}}
-                  onBeforeChange={(editor, data, value) => {}}
-                />
+                <Editor value={text} />
               );
             }} title="" trigger="hover">
               {

web/src/OrganizationListPage.js

@@ -34,7 +34,7 @@ class OrganizationListPage extends BaseListPage {
       favicon: `${Setting.StaticBaseUrl}/img/favicon.png`,
       passwordType: "plain",
       PasswordSalt: "",
-      passwordOptions: [],
+      passwordOptions: ["AtLeast6"],
       passwordObfuscatorType: "Plain",
       passwordObfuscatorKey: "",
       passwordExpireDays: 0,

web/src/PermissionListPage.js

@@ -113,8 +113,8 @@ class PermissionListPage extends BaseListPage {
 
     return (
       <Upload {...props}>
-        <Button id="upload-button" type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        <Button icon={<UploadOutlined />} id="upload-button" type="primary" size="small">
+          {i18next.t("user:Upload (.xlsx)")}
         </Button></Upload>
     );
   }

web/src/ProviderEditPage.js

@@ -28,14 +28,7 @@ import copy from "copy-to-clipboard";
 import {CaptchaPreview} from "./common/CaptchaPreview";
 import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
 import * as Web3Auth from "./auth/Web3Auth";
-
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-
-require("codemirror/theme/material-darker.css");
-require("codemirror/mode/htmlmixed/htmlmixed");
-require("codemirror/mode/xml/xml");
-require("codemirror/mode/css/css");
+import Editor from "./common/Editor";
 
 const {Option} = Select;
 const {TextArea} = Input;
@@ -822,7 +815,7 @@ class ProviderEditPage extends React.Component {
                 </Col>
               </Row>
               {
-                (this.state.provider.type === "WeChat Pay" || this.state.provider.type === "CUCloud") || (this.state.provider.category === "Email" && (this.state.provider.type === "Azure ACS" || this.state.provider.type === "SendGrid")) ? null : (
+                (this.state.provider.type === "WeChat Pay" || this.state.provider.type === "CUCloud") || (this.state.provider.category === "Email" && (this.state.provider.type === "Azure ACS")) ? null : (
                   <Row style={{marginTop: "20px"}} >
                     <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
                       {this.getClientSecret2Label(this.state.provider)} :
@@ -908,7 +901,7 @@ class ProviderEditPage extends React.Component {
             </Row>
           )
         }
-        {this.state.provider.category === "Storage" || ["Custom HTTP SMS", "Custom HTTP Email", "CUCloud"].includes(this.state.provider.type) ? (
+        {this.state.provider.category === "Storage" || ["Custom HTTP SMS", "Custom HTTP Email", "SendGrid", "CUCloud"].includes(this.state.provider.type) ? (
           <div>
             {["Local File System", "CUCloud"].includes(this.state.provider.type) ? null : (
               <Row style={{marginTop: "20px"}} >
@@ -922,7 +915,7 @@ class ProviderEditPage extends React.Component {
                 </Col>
               </Row>
             )}
-            {["Custom HTTP SMS", "Local File System", "MinIO", "Tencent Cloud COS", "Google Cloud Storage", "Qiniu Cloud Kodo", "Synology", "Casdoor", "CUCloud"].includes(this.state.provider.type) ? null : (
+            {["Custom HTTP SMS", "SendGrid", "Local File System", "MinIO", "Tencent Cloud COS", "Google Cloud Storage", "Qiniu Cloud Kodo", "Synology", "Casdoor", "CUCloud"].includes(this.state.provider.type) ? null : (
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={2}>
                   {Setting.getLabel(i18next.t("provider:Endpoint (Intranet)"), i18next.t("provider:Region endpoint for Intranet"))} :
@@ -934,7 +927,7 @@ class ProviderEditPage extends React.Component {
                 </Col>
               </Row>
             )}
-            {["Custom HTTP SMS", "Local File System", "CUCloud"].includes(this.state.provider.type) ? null : (
+            {["Custom HTTP SMS", "SendGrid", "Local File System", "CUCloud"].includes(this.state.provider.type) ? null : (
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={2}>
                   {["Casdoor"].includes(this.state.provider.type) ?
@@ -948,7 +941,7 @@ class ProviderEditPage extends React.Component {
                 </Col>
               </Row>
             )}
-            {["Custom HTTP SMS", "CUCloud"].includes(this.state.provider.type) ? null : (
+            {["Custom HTTP SMS", "SendGrid", "CUCloud"].includes(this.state.provider.type) ? null : (
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={2}>
                   {Setting.getLabel(i18next.t("provider:Path prefix"), i18next.t("provider:Path prefix - Tooltip"))} :
@@ -960,7 +953,7 @@ class ProviderEditPage extends React.Component {
                 </Col>
               </Row>
             )}
-            {["Custom HTTP SMS", "Synology", "Casdoor", "CUCloud"].includes(this.state.provider.type) ? null : (
+            {["Custom HTTP SMS", "SendGrid", "Synology", "Casdoor", "CUCloud"].includes(this.state.provider.type) ? null : (
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={2}>
                   {Setting.getLabel(i18next.t("provider:Domain"), i18next.t("provider:Domain - Tooltip"))} :
@@ -1067,18 +1060,16 @@ class ProviderEditPage extends React.Component {
             </React.Fragment>
           ) : this.state.provider.category === "Email" ? (
             <React.Fragment>
-              {["SendGrid"].includes(this.state.provider.type) ? null : (
-                <Row style={{marginTop: "20px"}} >
-                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                    {Setting.getLabel(i18next.t("provider:Host"), i18next.t("provider:Host - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <Input prefix={<LinkOutlined />} value={this.state.provider.host} onChange={e => {
-                      this.updateProviderField("host", e.target.value);
-                    }} />
-                  </Col>
-                </Row>
-              )}
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Host"), i18next.t("provider:Host - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Input prefix={<LinkOutlined />} value={this.state.provider.host} onChange={e => {
+                    this.updateProviderField("host", e.target.value);
+                  }} />
+                </Col>
+              </Row>
               {["Azure ACS", "SendGrid"].includes(this.state.provider.type) ? null : (
                 <Row style={{marginTop: "20px"}} >
                   <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
@@ -1129,10 +1120,12 @@ class ProviderEditPage extends React.Component {
                   <Row>
                     <Col span={Setting.isMobile() ? 22 : 11}>
                       <div style={{height: "300px", margin: "10px"}}>
-                        <CodeMirror
+                        <Editor
                           value={this.state.provider.content}
-                          options={{mode: "htmlmixed", theme: "material-darker"}}
-                          onBeforeChange={(editor, data, value) => {
+                          fillHeight
+                          dark
+                          lang="html"
+                          onChange={value => {
                             this.updateProviderField("content", value);
                           }}
                         />

web/src/RecordListPage.js

@@ -14,12 +14,12 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Switch, Table} from "antd";
+import {Button, Descriptions, Drawer, Switch, Table, Tooltip} from "antd";
 import * as Setting from "./Setting";
 import * as RecordBackend from "./backend/RecordBackend";
 import i18next from "i18next";
-import moment from "moment";
 import BaseListPage from "./BaseListPage";
+import Editor from "./common/Editor";
 
 class RecordListPage extends BaseListPage {
   UNSAFE_componentWillMount() {
@@ -28,21 +28,6 @@ class RecordListPage extends BaseListPage {
     this.fetch({pagination});
   }
 
-  newRecord() {
-    return {
-      owner: "built-in",
-      name: "1234",
-      id: "1234",
-      clientIp: "::1",
-      timestamp: moment().format(),
-      organization: "built-in",
-      username: "admin",
-      requestUri: "/api/get-account",
-      action: "login",
-      isTriggered: false,
-    };
-  }
-
   renderTable(records) {
     let columns = [
       {
@@ -65,16 +50,13 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("general:Client IP"),
         dataIndex: "clientIp",
         key: "clientIp",
-        width: "100px",
+        width: "120px",
         sorter: true,
-        ...this.getColumnSearchProps("clientIp"),
-        render: (text, record, index) => {
-          return (
-            <a target="_blank" rel="noreferrer" href={`https://db-ip.com/${text}`}>
-              {text}
-            </a>
-          );
-        },
+        ...this.getColumnSearchProps("clientIp", (row, highlightContent) => (
+          <a target="_blank" rel="noreferrer" href={`https://db-ip.com/${row.text}`}>
+            {highlightContent}
+          </a>
+        )),
       },
       {
         title: i18next.t("general:Timestamp"),
@@ -120,28 +102,28 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("general:Method"),
         dataIndex: "method",
         key: "method",
-        width: "110px",
+        width: "100px",
         sorter: true,
         filterMultiple: false,
         filters: [
-          {text: "GET", value: "GET"},
-          {text: "HEAD", value: "HEAD"},
-          {text: "POST", value: "POST"},
-          {text: "PUT", value: "PUT"},
-          {text: "DELETE", value: "DELETE"},
-          {text: "CONNECT", value: "CONNECT"},
-          {text: "OPTIONS", value: "OPTIONS"},
-          {text: "TRACE", value: "TRACE"},
-          {text: "PATCH", value: "PATCH"},
-        ],
+          "GET", "HEAD", "POST", "PUT", "DELETE",
+          "CONNECT", "OPTIONS", "TRACE", "PATCH",
+        ].map(el => ({text: el, value: el})),
       },
       {
         title: i18next.t("general:Request URI"),
         dataIndex: "requestUri",
         key: "requestUri",
-        // width: "300px",
+        width: "200px",
         sorter: true,
-        ...this.getColumnSearchProps("requestUri"),
+        ellipsis: {
+          showTitle: false,
+        },
+        ...this.getColumnSearchProps("requestUri", (row, highlightContent) => (
+          <Tooltip placement="topLeft" title={row.text}>
+            {highlightContent}
+          </Tooltip>
+        )),
       },
       {
         title: i18next.t("user:Language"),
@@ -155,7 +137,7 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("record:Status code"),
         dataIndex: "statusCode",
         key: "statusCode",
-        width: "90px",
+        width: "120px",
         sorter: true,
         ...this.getColumnSearchProps("statusCode"),
       },
@@ -163,16 +145,26 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("record:Response"),
         dataIndex: "response",
         key: "response",
-        width: "90px",
+        width: "220px",
         sorter: true,
-        ...this.getColumnSearchProps("response"),
+        ellipsis: {
+          showTitle: false,
+        },
+        ...this.getColumnSearchProps("response", (row, highlightContent) => (
+          <Tooltip placement="topLeft" title={row.text}>
+            {highlightContent}
+          </Tooltip>
+        )),
       },
       {
         title: i18next.t("record:Object"),
         dataIndex: "object",
         key: "object",
-        width: "90px",
+        width: "200px",
         sorter: true,
+        ellipsis: {
+          showTitle: false,
+        },
         ...this.getColumnSearchProps("object"),
       },
       {
@@ -191,7 +183,7 @@ class RecordListPage extends BaseListPage {
         title: i18next.t("record:Is triggered"),
         dataIndex: "isTriggered",
         key: "isTriggered",
-        width: "140px",
+        width: "120px",
         sorter: true,
         fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
@@ -204,6 +196,24 @@ class RecordListPage extends BaseListPage {
           );
         },
       },
+      {
+        title: i18next.t("general:Action"),
+        dataIndex: "action",
+        key: "action",
+        width: "80px",
+        sorter: true,
+        fixed: "right",
+        render: (text, record, index) => (
+          <Button type="link" onClick={() => {
+            this.setState({
+              detailRecord: record,
+              detailShow: true,
+            });
+          }}>
+            {i18next.t("general:Detail")}
+          </Button>
+        ),
+      },
     ];
 
     if (Setting.isLocalAdminUser(this.props.account)) {
@@ -220,7 +230,7 @@ class RecordListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "100%"}} columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -229,10 +239,79 @@ class RecordListPage extends BaseListPage {
           loading={this.state.loading}
           onChange={this.handleTableChange}
         />
+        {/* TODO: Should be packaged as a component after confirm it run correctly.*/}
+        <Drawer
+          title={i18next.t("general:Detail")}
+          width={Setting.isMobile() ? "100%" : 640}
+          placement="right"
+          destroyOnClose
+          onClose={() => this.setState({detailShow: false})}
+          open={this.state.detailShow}
+        >
+          <Descriptions bordered size="small" column={1} layout={Setting.isMobile() ? "vertical" : "horizontal"} style={{padding: "12px", height: "100%", overflowY: "auto"}}>
+            <Descriptions.Item label={i18next.t("general:ID")}>{this.getDetailField("id")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Client IP")}>{this.getDetailField("clientIp")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Timestamp")}>{this.getDetailField("createdTime")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Organization")}>
+              <Link to={`/organizations/${this.getDetailField("organization")}`}>
+                {this.getDetailField("organization")}
+              </Link>
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:User")}>
+              <Link to={`/users/${this.getDetailField("organization")}/${this.getDetailField("user")}`}>
+                {this.getDetailField("user")}
+              </Link>
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Method")}>{this.getDetailField("method")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Request URI")}>{this.getDetailField("requestUri")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("user:Language")}>{this.getDetailField("language")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("record:Status code")}>{this.getDetailField("statusCode")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("general:Action")}>{this.getDetailField("action")}</Descriptions.Item>
+            <Descriptions.Item label={i18next.t("record:Response")}>
+              <Editor
+                value={this.getDetailField("response")}
+                fillHeight
+                fillWidth
+                maxWidth={this.getEditorMaxWidth()}
+                dark
+                readOnly
+              />
+            </Descriptions.Item>
+            <Descriptions.Item label={i18next.t("record:Object")}>
+              <Editor
+                value={this.jsonStrFormatter(this.getDetailField("object"))}
+                lang="json"
+                fillHeight
+                fillWidth
+                maxWidth={this.getEditorMaxWidth()}
+                dark
+                readOnly
+              />
+            </Descriptions.Item>
+          </Descriptions>
+        </Drawer>
       </div>
     );
   }
 
+  getEditorMaxWidth = () => {
+    return Setting.isMobile() ? window.innerWidth - 60 : 475;
+  };
+
+  jsonStrFormatter = str => {
+    try {
+      return JSON.stringify(JSON.parse(str), null, 2);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+      return str;
+    }
+  };
+
+  getDetailField = dataIndex => {
+    return this.state.detailRecord ? this.state.detailRecord?.[dataIndex] ?? "" : "";
+  };
+
   fetch = (params = {}) => {
     let field = params.searchedColumn, value = params.searchText;
     const sortField = params.sortField, sortOrder = params.sortOrder;
@@ -255,6 +334,8 @@ class RecordListPage extends BaseListPage {
             },
             searchText: params.searchText,
             searchedColumn: params.searchedColumn,
+            detailShow: false,
+            detailRecord: null,
           });
         } else {
           if (res.data.includes("Please login first")) {

web/src/RoleListPage.js

@@ -106,8 +106,8 @@ class RoleListPage extends BaseListPage {
 
     return (
       <Upload {...props}>
-        <Button type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        <Button icon={<UploadOutlined />} type="primary" size="small">
+          {i18next.t("user:Upload (.xlsx)")}
         </Button>
       </Upload>
     );

web/src/SyncerEditPage.js

@@ -21,11 +21,8 @@ import * as Setting from "./Setting";
 import i18next from "i18next";
 import SyncerTableColumnTable from "./table/SyncerTableColumnTable";
 
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
 import * as CertBackend from "./backend/CertBackend";
-require("codemirror/theme/material-darker.css");
-require("codemirror/mode/javascript/javascript");
+import Editor from "./common/Editor";
 
 const {Option} = Select;
 
@@ -512,10 +509,13 @@ class SyncerEditPage extends React.Component {
           </Col>
           <Col span={22} >
             <div style={{width: "100%", height: "300px"}} >
-              <CodeMirror
+              <Editor
                 value={this.state.syncer.errorText}
-                options={{mode: "javascript", theme: "material-darker"}}
-                onBeforeChange={(editor, data, value) => {
+                fillHeight
+                readOnly
+                dark
+                lang="js"
+                onChange={value => {
                   this.updateSyncerField("errorText", value);
                 }}
               />

web/src/TokenListPage.js

@@ -153,7 +153,7 @@ class TokenListPage extends BaseListPage {
         title: i18next.t("token:Authorization code"),
         dataIndex: "code",
         key: "code",
-        // width: '150px',
+        width: "180px",
         sorter: true,
         ...this.getColumnSearchProps("code"),
         render: (text, record, index) => {
@@ -164,7 +164,7 @@ class TokenListPage extends BaseListPage {
         title: i18next.t("token:Access token"),
         dataIndex: "accessToken",
         key: "accessToken",
-        // width: '150px',
+        width: "220px",
         sorter: true,
         ellipsis: true,
         ...this.getColumnSearchProps("accessToken"),
@@ -225,7 +225,7 @@ class TokenListPage extends BaseListPage {
 
     return (
       <div>
-        <Table scroll={{x: "max-content"}} columns={columns} dataSource={tokens} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
+        <Table scroll={{x: "100%"}} columns={columns} dataSource={tokens} rowKey={(record) => `${record.owner}/${record.name}`} size="middle" bordered pagination={paginationProps}
           title={() => (
             <div>
               {i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp;

web/src/UserListPage.js

@@ -188,8 +188,8 @@ class UserListPage extends BaseListPage {
 
     return (
       <Upload {...props}>
-        <Button id="upload-button" type="primary" size="small">
-          <UploadOutlined /> {i18next.t("user:Upload (.xlsx)")}
+        <Button icon={<UploadOutlined />} id="upload-button" type="primary" size="small">
+          {i18next.t("user:Upload (.xlsx)")}
         </Button>
       </Upload>
     );
@@ -318,6 +318,14 @@ class UserListPage extends BaseListPage {
           return Setting.initCountries().getName(record.region, Setting.getLanguage(), {select: "official"});
         },
       },
+      {
+        title: i18next.t("general:User type"),
+        dataIndex: "type",
+        key: "type",
+        width: "120px",
+        sorter: true,
+        ...this.getColumnSearchProps("type"),
+      },
       {
         title: i18next.t("user:Tag"),
         dataIndex: "tag",
@@ -343,7 +351,7 @@ class UserListPage extends BaseListPage {
         title: i18next.t("user:Is admin"),
         dataIndex: "isAdmin",
         key: "isAdmin",
-        width: "110px",
+        width: "120px",
         sorter: true,
         render: (text, record, index) => {
           return (

web/src/WebhookEditPage.js

@@ -21,10 +21,7 @@ import * as Setting from "./Setting";
 import i18next from "i18next";
 import WebhookHeaderTable from "./table/WebhookHeaderTable";
 
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-require("codemirror/theme/material-darker.css");
-require("codemirror/mode/javascript/javascript");
+import Editor from "./common/Editor";
 
 const {Option} = Select;
 
@@ -304,11 +301,7 @@ class WebhookEditPage extends React.Component {
           </Col>
           <Col span={22} >
             <div style={{width: "900px", height: "300px"}} >
-              <CodeMirror
-                value={previewText}
-                options={{mode: "javascript", theme: "material-darker"}}
-                onBeforeChange={(editor, data, value) => {}}
-              />
+              <Editor value={previewText} lang="js" fillHeight readOnly dark />
             </div>
           </Col>
         </Row>

web/src/auth/ForgetPage.js

@@ -471,9 +471,12 @@ class ForgetPage extends React.Component {
       <React.Fragment>
         <CustomGithubCorner />
         <div className="forget-content" style={{padding: Setting.isMobile() ? "0" : null, boxShadow: Setting.isMobile() ? "none" : null}}>
-          <Button type="text" style={{position: "relative", left: Setting.isMobile() ? "10px" : "-90px", top: 0}} size={"large"} onClick={() => {this.stepBack();}}>
-            <ArrowLeftOutlined style={{fontSize: "24px"}} />
-          </Button>
+          <Button type="text"
+            style={{position: "relative", left: Setting.isMobile() ? "10px" : "-90px", top: 0}}
+            icon={<ArrowLeftOutlined style={{fontSize: "24px"}} />}
+            size={"large"}
+            onClick={() => {this.stepBack();}}
+          />
           <Row>
             <Col span={24} style={{justifyContent: "center"}}>
               <Row>

web/src/auth/LoginPage.js

@@ -68,7 +68,7 @@ class LoginPage extends React.Component {
       this.state.applicationName = props.match?.params?.casApplicationName;
     }
 
-    localStorage.setItem("signinUrl", window.location.href);
+    localStorage.setItem("signinUrl", window.location.pathname + window.location.search);
 
     this.form = React.createRef();
   }
@@ -314,7 +314,7 @@ class LoginPage extends React.Component {
     }
 
     if (resp.data2) {
-      sessionStorage.setItem("signinUrl", window.location.href);
+      sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
       Setting.goToLinkSoft(ths, `/forget/${application.name}`);
       return;
     }
@@ -454,7 +454,7 @@ class LoginPage extends React.Component {
 
             if (responseType === "login") {
               if (res.data2) {
-                sessionStorage.setItem("signinUrl", window.location.href);
+                sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
                 Setting.goToLink(this, `/forget/${this.state.applicationName}`);
               }
               Setting.showMessage("success", i18next.t("application:Logged in successfully"));
@@ -463,7 +463,7 @@ class LoginPage extends React.Component {
               this.postCodeLoginAction(res);
             } else if (responseType === "token" || responseType === "id_token") {
               if (res.data2) {
-                sessionStorage.setItem("signinUrl", window.location.href);
+                sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
                 Setting.goToLink(this, `/forget/${this.state.applicationName}`);
               }
               const amendatoryResponseType = responseType === "token" ? "access_token" : responseType;
@@ -475,7 +475,7 @@ class LoginPage extends React.Component {
                 return;
               }
               if (res.data2.needUpdatePassword) {
-                sessionStorage.setItem("signinUrl", window.location.href);
+                sessionStorage.setItem("signinUrl", window.location.pathname + window.location.search);
                 Setting.goToLink(this, `/forget/${this.state.applicationName}`);
               }
               if (res.data2.method === "POST") {
@@ -530,9 +530,11 @@ class LoginPage extends React.Component {
       return null;
     }
 
+    const resultItemKey = `${application.organization}_${application.name}_${signinItem.name}`;
+
     if (signinItem.name === "Logo") {
       return (
-        <div className="login-logo-box">
+        <div key={resultItemKey} className="login-logo-box">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {
             Setting.renderHelmet(application)
@@ -544,7 +546,7 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name === "Back button") {
       return (
-        <div className="back-button">
+        <div key={resultItemKey} className="back-button">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {
             this.renderBackButton()
@@ -562,14 +564,14 @@ class LoginPage extends React.Component {
       }
 
       return (
-        <div className="login-languages">
+        <div key={resultItemKey} className="login-languages">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <LanguageSelect languages={application.organizationObj.languages} />
         </div>
       );
     } else if (signinItem.name === "Signin methods") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {this.renderMethodChoiceBox()}
         </div>
@@ -577,7 +579,7 @@ class LoginPage extends React.Component {
       ;
     } else if (signinItem.name === "Username") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <Form.Item
             name="username"
@@ -654,14 +656,14 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name === "Password") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {this.renderPasswordOrCodeInput(signinItem)}
         </div>
       );
     } else if (signinItem.name === "Forgot password?") {
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <div className="login-forget-password">
             <Form.Item name="autoSignin" valuePropName="checked" noStyle>
@@ -679,7 +681,7 @@ class LoginPage extends React.Component {
       return AgreementModal.isAgreementRequired(application) ? AgreementModal.renderAgreementFormItem(application, true, {}, this) : null;
     } else if (signinItem.name === "Login button") {
       return (
-        <Form.Item className="login-button-box">
+        <Form.Item key={resultItemKey} className="login-button-box">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <Button
             type="primary"
@@ -723,13 +725,13 @@ class LoginPage extends React.Component {
       }
 
       return (
-        <div>
+        <div key={resultItemKey}>
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           <Form.Item>
             {
               application.providers.filter(providerItem => this.isProviderVisible(providerItem)).map((providerItem, id) => {
                 return (
-                  <span key ={id} onClick={(e) => {
+                  <span key={id} onClick={(e) => {
                     const agreementChecked = this.form.current.getFieldValue("agreement");
 
                     if (agreementChecked !== undefined && typeof agreementChecked === "boolean" && !agreementChecked) {
@@ -752,11 +754,11 @@ class LoginPage extends React.Component {
       );
     } else if (signinItem.name.startsWith("Text ") || signinItem?.isCustom) {
       return (
-        <div dangerouslySetInnerHTML={{__html: signinItem.customCss}} />
+        <div key={resultItemKey} dangerouslySetInnerHTML={{__html: signinItem.customCss}} />
       );
     } else if (signinItem.name === "Signup link") {
       return (
-        <div style={{width: "100%"}} className="login-signup-link">
+        <div key={resultItemKey} style={{width: "100%"}} className="login-signup-link">
           <div dangerouslySetInnerHTML={{__html: ("<style>" + signinItem.customCss?.replaceAll("<style>", "").replaceAll("</style>", "") + "</style>")}} />
           {this.renderFooter(application, signinItem)}
         </div>

web/src/basic/Dashboard.js

@@ -167,25 +167,35 @@ const Dashboard = (props) => {
     };
     myChart.setOption(option);
 
+    const cardStyles = {
+      body: {
+        width: Setting.isMobile() ? "340px" : "100%",
+        height: Setting.isMobile() ? "100px" : "150px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      },
+    };
+
     return (
       <Row id="statistic" gutter={80} justify={"center"}>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:Total users")} fontSize="100px" value={dashboardData.userCounts[30]} valueStyle={{fontSize: "30px"}} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:New users today")} fontSize="100px" value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 1]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:New users past 7 days")} value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 7]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>
         <Col span={50} style={{marginBottom: "10px"}}>
-          <Card bordered={false} bodyStyle={{width: Setting.isMobile() ? "340px" : "100%", height: Setting.isMobile() ? "100px" : "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
+          <Card variant="borderless" styles={cardStyles}>
             <Statistic title={i18next.t("home:New users past 30 days")} value={dashboardData.userCounts[30] - dashboardData.userCounts[30 - 30]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
           </Card>
         </Col>

web/src/basic/GridCards.js

@@ -31,7 +31,7 @@ const GridCards = (props) => {
 
   return (
     Setting.isMobile() ? (
-      <Card bodyStyle={{padding: 0}}>
+      <Card styles={{body: {padding: 0}}}>
         {items.map(item => <SingleCard key={item.link} logo={item.logo} link={item.link} title={item.name} desc={item.description} isSingle={items.length === 1} />)}
       </Card>
     ) : (

web/src/common/Editor.js

@@ -0,0 +1,83 @@
+// Copyright 2025 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 CodeMirror from "@uiw/react-codemirror";
+import {materialDark} from "@uiw/codemirror-theme-material";
+import {langs} from "@uiw/codemirror-extensions-langs";
+
+export const Editor = (props) => {
+  let style = {};
+  let height = props.height;
+  let width = props.width;
+  const copy2StyleProps = [
+    "width", "maxWidth", "minWidth",
+    "height", "maxHeight", "minHeight",
+  ];
+  if (props.fillHeight) {
+    height = "100%";
+    style = {...style, height: "100%"};
+  }
+  if (props.fillWidth) {
+    width = "100%";
+    style = {...style, width: "100%"};
+  }
+  /**
+   * @uiw/react-codemirror style props sucha as "height" "width"
+   * may need to be configured with "style" in some scenarios to take effect
+   */
+  copy2StyleProps.forEach(el => {
+    if (["number", "string"].includes(typeof props[el])) {
+      style = {...style, [el]: props[el]};
+    }
+  });
+  if (props.style) {
+    style = {...style, ...props.style};
+  }
+  let extensions = [];
+  switch (props.lang) {
+  case "javascript":
+  case "js":
+    extensions = [langs.javascript()];
+    break;
+  case "html":
+    extensions = [langs.html()];
+    break;
+  case "css":
+    extensions = [langs.css()];
+    break;
+  case "xml":
+    extensions = [langs.xml()];
+    break;
+  case "json":
+    extensions = [langs.json()];
+    break;
+  }
+
+  return (
+    <CodeMirror
+      value={props.value}
+      {...props}
+      width={width}
+      height={height}
+      style={style}
+      readOnly={props.readOnly}
+      theme={props.dark ? materialDark : "light"}
+      extensions={extensions}
+      onChange={props.onChange}
+    />
+  );
+};
+
+export default Editor;

web/src/common/PasswordChecker.js

@@ -58,7 +58,7 @@ export function checkPasswordComplexity(password, options) {
   }
 
   if (!options || options.length === 0) {
-    options = ["AtLeast6"];
+    return "";
   }
 
   const checkers = {

web/src/common/select/OrganizationSelect.js

@@ -70,6 +70,7 @@ function OrganizationSelect(props) {
     <Select
       options={getOrganizationItems()}
       virtual={false}
+      popupMatchSelectWidth={false}
       placeholder={i18next.t("login:Please select an organization")}
       value={value}
       onChange={handleOnChange}

web/src/locales/en/data.json

@@ -241,6 +241,7 @@
     "Delete": "Delete",
     "Description": "Description",
     "Description - Tooltip": "Detailed description information for reference, Casdoor itself will not use it",
+    "Detail": "Detail",
     "Disable": "Disable",
     "Display name": "Display name",
     "Display name - Tooltip": "A user-friendly, easily readable name displayed publicly in the UI",

web/src/locales/zh/data.json

@@ -241,6 +241,7 @@
     "Delete": "删除",
     "Description": "描述信息",
     "Description - Tooltip": "供人参考的详细描述信息，Casdoor平台本身不会使用",
+    "Detail": "详情",
     "Disable": "关闭",
     "Display name": "显示名称",
     "Display name - Tooltip": "在界面里公开显示的、易读的名称",

web/src/pricing/PricingPage.js

@@ -147,7 +147,7 @@ class PricingPage extends React.Component {
 
     if (Setting.isMobile()) {
       return (
-        <Card style={{border: "none"}} bodyStyle={{padding: 0}}>
+        <Card style={{border: "none"}} styles={{body: {padding: 0}}}>
           {
             this.state.plans.map(item => {
               return item.period === this.state.selectedPeriod ? (

web/src/table/SigninTable.js

@@ -17,12 +17,7 @@ import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Popover, Row, Select, Space, Switch, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import i18next from "i18next";
-
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-
-require("codemirror/theme/material-darker.css");
-require("codemirror/mode/htmlmixed/htmlmixed");
+import Editor from "../common/Editor";
 
 const {Option} = Select;
 
@@ -175,12 +170,9 @@ class SigninTable extends React.Component {
             return (
               <Popover placement="right" content={
                 <div style={{width: "900px", height: "300px"}} >
-                  <CodeMirror value={text}
-                    options={{mode: "htmlmixed", theme: "material-darker"}}
-                    onBeforeChange={(editor, data, value) => {
-                      this.updateField(table, index, "label", value);
-                    }}
-                  />
+                  <Editor value={text} lang="html" fillHeight dark onChange={value => {
+                    this.updateField(table, index, "label", value);
+                  }} />
                 </div>
               } title={i18next.t("signup:Label HTML")} trigger="click">
                 <Input value={text} style={{marginBottom: "10px"}} onChange={e => {
@@ -206,9 +198,12 @@ class SigninTable extends React.Component {
             return (
               <Popover placement="right" content={
                 <div style={{width: "900px", height: "300px"}} >
-                  <CodeMirror value={text?.replaceAll("<style>", "").replaceAll("</style>", "")}
-                    options={{mode: "css", theme: "material-darker"}}
-                    onBeforeChange={(editor, data, value) => {
+                  <Editor
+                    value={text?.replaceAll("<style>", "").replaceAll("</style>", "")}
+                    lang="css"
+                    fillHeight
+                    dark
+                    onChange={value => {
                       this.updateField(table, index, "customCss", value);
                     }}
                   />

web/src/table/SignupTable.js

@@ -17,12 +17,7 @@ import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
 import {Button, Col, Input, Popover, Row, Select, Switch, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import i18next from "i18next";
-
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-
-require("codemirror/theme/material-darker.css");
-require("codemirror/mode/htmlmixed/htmlmixed");
+import Editor from "../common/Editor";
 
 const EmailCss = ".signup-email{}\n.signup-email-input{}\n.signup-email-code{}\n.signup-email-code-input{}\n";
 const PhoneCss = ".signup-phone{}\n.signup-phone-input{}\n.phone-code{}\n.signup-phone-code-input{}";
@@ -234,12 +229,9 @@ class SignupTable extends React.Component {
             return (
               <Popover placement="right" content={
                 <div style={{width: "900px", height: "300px"}} >
-                  <CodeMirror value={text}
-                    options={{mode: "htmlmixed", theme: "material-darker"}}
-                    onBeforeChange={(editor, data, value) => {
-                      this.updateField(table, index, "label", value);
-                    }}
-                  />
+                  <Editor value={text} lang="html" fillHeight dark onChange={value => {
+                    this.updateField(table, index, "label", value);
+                  }} />
                 </div>
               } title={i18next.t("signup:Label HTML")} trigger="click">
                 <Input value={text} style={{marginBottom: "10px"}} onChange={e => {
@@ -265,9 +257,12 @@ class SignupTable extends React.Component {
           return (
             <Popover placement="right" content={
               <div style={{width: "900px", height: "300px"}}>
-                <CodeMirror value={text ? text : SignupTableDefaultCssMap[record.name]}
-                  options={{mode: "css", theme: "material-darker"}}
-                  onBeforeChange={(editor, data, value) => {
+                <Editor
+                  value={text ? text : SignupTableDefaultCssMap[record.name]}
+                  lang="css"
+                  fillHeight
+                  dark
+                  onChange={value => {
                     this.updateField(table, index, "customCss", value ? value : SignupTableDefaultCssMap[record.name]);
                   }}
                 />