Fix code review issues: remove unused Checkbox import, fix Web3 value prop, improve SMS button logic, fix invitation preview

Co-authored-by: hsluoyz <3787410+hsluoyz@users.noreply.github.com>

README.md

@@ -1,5 +1,5 @@
 <h1 align="center" style="border-bottom: none;">📦⚡️ Casdoor</h1>
-<h3 align="center">An open-source UI-first Identity and Access Management (IAM) / Single-Sign-On (SSO) platform with web UI supporting OAuth 2.0, OIDC, SAML, CAS, LDAP, SCIM, WebAuthn, TOTP, MFA and RADIUS</h3>
+<h3 align="center">An open-source AI-first Identity and Access Management (IAM) /AI MCP gateway and auth server with web UI supporting MCP, A2A, OAuth 2.1, OIDC, SAML, CAS, LDAP, SCIM, WebAuthn, TOTP, MFA, Face ID, Google Workspace, Azure AD</h3>
 <p align="center">
   <a href="#badge">
     <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">

controllers/auth.go

@@ -739,7 +739,11 @@ func (c *ApiController) Login() {
 			}
 		} else if provider.Category == "OAuth" || provider.Category == "Web3" {
 			// OAuth
-			idpInfo := object.FromProviderToIdpInfo(c.Ctx, provider)
+			idpInfo, err := object.FromProviderToIdpInfo(c.Ctx, provider)
+			if err != nil {
+				c.ResponseError(err.Error())
+				return
+			}
 			idpInfo.CodeVerifier = authForm.CodeVerifier
 			var idProvider idp.IdProvider
 			idProvider, err = idp.GetIdProvider(idpInfo, authForm.RedirectUri)

idp/alipay.go

@@ -264,27 +264,31 @@ func rsaSignWithRSA256(signContent string, privateKey string) (string, error) {
 
 // privateKey in database is a string, format it to PEM style
 func formatPrivateKey(privateKey string) string {
-	// each line length is 64
-	preFmtPrivateKey := ""
-	for i := 0; ; {
-		if i+64 <= len(privateKey) {
-			preFmtPrivateKey = preFmtPrivateKey + privateKey[i:i+64] + "\n"
-			i += 64
-		} else {
-			preFmtPrivateKey = preFmtPrivateKey + privateKey[i:]
-			break
+	// Check if the key is already in PEM format
+	if strings.HasPrefix(privateKey, "-----BEGIN PRIVATE KEY-----") ||
+		strings.HasPrefix(privateKey, "-----BEGIN RSA PRIVATE KEY-----") {
+		// Key is already in PEM format, return as is
+		return privateKey
+	}
+
+	// Remove any whitespace from the key
+	privateKey = strings.ReplaceAll(privateKey, "\n", "")
+	privateKey = strings.ReplaceAll(privateKey, "\r", "")
+	privateKey = strings.ReplaceAll(privateKey, " ", "")
+
+	// Format the key with line breaks every 64 characters using strings.Builder
+	var builder strings.Builder
+	for i := 0; i < len(privateKey); i += 64 {
+		end := i + 64
+		if end > len(privateKey) {
+			end = len(privateKey)
+		}
+		builder.WriteString(privateKey[i:end])
+		if end < len(privateKey) {
+			builder.WriteString("\n")
 		}
 	}
-	privateKey = strings.Trim(preFmtPrivateKey, "\n")
 
 	// add pkcs#8 BEGIN and END
-	PemBegin := "-----BEGIN PRIVATE KEY-----\n"
-	PemEnd := "\n-----END PRIVATE KEY-----"
-	if !strings.HasPrefix(privateKey, PemBegin) {
-		privateKey = PemBegin + privateKey
-	}
-	if !strings.HasSuffix(privateKey, PemEnd) {
-		privateKey = privateKey + PemEnd
-	}
-	return privateKey
+	return "-----BEGIN PRIVATE KEY-----\n" + builder.String() + "\n-----END PRIVATE KEY-----"
 }

object/provider.go

@@ -564,7 +564,7 @@ func providerChangeTrigger(oldName string, newName string) error {
 	return session.Commit()
 }
 
-func FromProviderToIdpInfo(ctx *context.Context, provider *Provider) *idp.ProviderInfo {
+func FromProviderToIdpInfo(ctx *context.Context, provider *Provider) (*idp.ProviderInfo, error) {
 	providerInfo := &idp.ProviderInfo{
 		Type:          provider.Type,
 		SubType:       provider.SubType,
@@ -588,9 +588,19 @@ func FromProviderToIdpInfo(ctx *context.Context, provider *Provider) *idp.Provid
 		}
 	} else if provider.Type == "ADFS" || provider.Type == "AzureAD" || provider.Type == "AzureADB2C" || provider.Type == "Casdoor" || provider.Type == "Okta" {
 		providerInfo.HostUrl = provider.Domain
+	} else if provider.Type == "Alipay" && provider.Cert != "" {
+		// For Alipay with certificate mode, load private key from certificate
+		cert, err := GetCert(util.GetId(provider.Owner, provider.Cert))
+		if err != nil {
+			return nil, fmt.Errorf("failed to load certificate for Alipay provider %s: %w", provider.Name, err)
+		}
+		if cert == nil {
+			return nil, fmt.Errorf("certificate not found for Alipay provider %s", provider.Name)
+		}
+		providerInfo.ClientSecret = cert.PrivateKey
 	}
 
-	return providerInfo
+	return providerInfo, nil
 }
 
 func GetIdvProviderFromProvider(provider *Provider) idv.IdvProvider {

web/src/PaymentEditPage.js

@@ -18,7 +18,6 @@ import {InfoCircleTwoTone} from "@ant-design/icons";
 import * as PaymentBackend from "./backend/PaymentBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import * as ProductBackend from "./backend/ProductBackend";
 
 const {Option} = Select;
 
@@ -30,7 +29,6 @@ class PaymentEditPage extends React.Component {
       organizationName: props.organizationName !== undefined ? props.organizationName : props.match.params.organizationName,
       paymentName: props.match.params.paymentName,
       payment: null,
-      products: [],
       isModalVisible: false,
       isInvoiceLoading: false,
       mode: props.location.mode !== undefined ? props.location.mode : "edit",
@@ -39,7 +37,6 @@ class PaymentEditPage extends React.Component {
 
   UNSAFE_componentWillMount() {
     this.getPayment();
-    this.getProducts();
   }
 
   getPayment() {
@@ -58,19 +55,6 @@ class PaymentEditPage extends React.Component {
       });
   }
 
-  getProducts() {
-    ProductBackend.getProducts(this.state.organizationName)
-      .then((res) => {
-        if (res.status === "ok") {
-          this.setState({
-            products: res.data,
-          });
-        } else {
-          Setting.showMessage("error", `Failed to get products: ${res.msg}`);
-        }
-      });
-  }
-
   goToViewOrder() {
     const payment = this.state.payment;
     if (payment && payment.order) {
@@ -240,29 +224,6 @@ class PaymentEditPage extends React.Component {
             }} />
           </Col>
         </Row>
-        <Row style={{marginTop: "20px"}} >
-          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-            {Setting.getLabel(i18next.t("general:Products"), i18next.t("payment:Products - Tooltip"))} :
-          </Col>
-          <Col span={22} >
-            <Select
-              mode="multiple"
-              style={{width: "100%"}}
-              value={this.state.payment?.products || []}
-              disabled={isViewMode}
-              allowClear
-              options={(this.state.products || [])
-                .map((p) => ({
-                  label: Setting.getLanguageText(p?.displayName) || p?.name,
-                  value: p?.name,
-                }))
-                .filter((o) => o.value)}
-              onChange={(value) => {
-                this.updatePaymentField("products", value);
-              }}
-            />
-          </Col>
-        </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("order:Price"), i18next.t("plan:Price - Tooltip"))} :

web/src/PaymentListPage.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, List, Table, Tooltip} from "antd";
+import {Button, Col, List, Row, Table, Tooltip} from "antd";
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as PaymentBackend from "./backend/PaymentBackend";
@@ -195,21 +195,31 @@ class PaymentListPage extends BaseListPage {
                   paddingBottom: 8,
                 }}
                 renderItem={(productInfo, i) => {
-                  const price = productInfo.price * (productInfo.quantity || 1);
+                  const price = productInfo.price || 0;
+                  const number = productInfo.quantity || 1;
                   const currency = record.currency || "USD";
+                  const productName = productInfo.displayName || productInfo.name;
                   return (
                     <List.Item>
-                      <div style={{display: "inline"}}>
-                        <Tooltip placement="topLeft" title={i18next.t("general:Edit")}>
-                          <Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/products/${record.owner}/${productInfo.name}`)} />
-                        </Tooltip>
-                        <Link to={`/products/${record.owner}/${productInfo.name}`}>
-                          {productInfo.displayName || productInfo.name}
-                        </Link>
-                        <span style={{marginLeft: "8px", color: "#666"}}>
-                          {Setting.getPriceDisplay(price, currency)}
-                        </span>
-                      </div>
+                      <Row style={{width: "100%"}} wrap={false} gutter={[12, 0]}>
+                        <Col flex="auto" style={{minWidth: 0}}>
+                          <div style={{display: "flex", alignItems: "center", minWidth: 0}}>
+                            <Tooltip placement="topLeft" title={i18next.t("general:Edit")}>
+                              <Button style={{marginRight: "5px"}} icon={<EditOutlined />} size="small" onClick={() => Setting.goToLinkSoft(this, `/products/${record.owner}/${productInfo.name}`)} />
+                            </Tooltip>
+                            <Tooltip placement="topLeft" title={productName}>
+                              <Link to={`/products/${record.owner}/${productInfo.name}`} style={{display: "inline-block", maxWidth: "100%", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+                                {productName}
+                              </Link>
+                            </Tooltip>
+                          </div>
+                        </Col>
+                        <Col flex="none" style={{whiteSpace: "nowrap"}}>
+                          <span style={{color: "#666"}}>
+                            {Setting.getCurrencySymbol(currency)}{price} ({Setting.getCurrencyText(currency)}) × {number}
+                          </span>
+                        </Col>
+                      </Row>
                     </List.Item>
                   );
                 }}

web/src/ProviderEditPage.js

@@ -13,23 +13,23 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Card, Checkbox, Col, Input, InputNumber, Radio, Row, Select, Switch} from "antd";
+import {Button, Card, Col, Input, Radio, Row, Select, Switch} from "antd";
 import {LinkOutlined} from "@ant-design/icons";
 import * as ProviderBackend from "./backend/ProviderBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as CertBackend from "./backend/CertBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-import {authConfig} from "./auth/Auth";
-import * as ProviderEditTestEmail from "./common/TestEmailWidget";
-import * as ProviderNotification from "./common/TestNotificationWidget";
-import * as ProviderEditTestSms from "./common/TestSmsWidget";
-import copy from "copy-to-clipboard";
-import {CaptchaPreview} from "./common/CaptchaPreview";
-import {CountryCodeSelect} from "./common/select/CountryCodeSelect";
-import * as Web3Auth from "./auth/Web3Auth";
-import Editor from "./common/Editor";
-import HttpHeaderTable from "./table/HttpHeaderTable";
+import {renderNotificationProviderFields} from "./provider/NotificationProviderFields";
+import {renderEmailProviderFields} from "./provider/EmailProviderFields";
+import {renderSmsProviderFields} from "./provider/SmsProviderFields";
+import {renderMfaProviderFields} from "./provider/MfaProviderFields";
+import {renderSamlProviderFields} from "./provider/SamlProviderFields";
+import {renderOAuthProviderFields} from "./provider/OAuthProviderFields";
+import {renderCaptchaProviderFields} from "./provider/CaptchaProviderFields";
+import {renderPaymentProviderFields} from "./provider/PaymentProviderFields";
+import {renderWeb3ProviderFields} from "./provider/Web3ProviderFields";
+import {renderStorageProviderFields} from "./provider/StorageProviderFields";
 
 const {Option} = Select;
 const {TextArea} = Input;
@@ -852,114 +852,10 @@ class ProviderEditPage extends React.Component {
           )
         }
         {
-          this.state.provider.category === "OAuth" ? (
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                {Setting.getLabel(i18next.t("provider:Email regex"), i18next.t("provider:Email regex - Tooltip"))} :
-              </Col>
-              <Col span={22}>
-                <TextArea rows={4} value={this.state.provider.emailRegex} onChange={e => {
-                  this.updateProviderField("emailRegex", e.target.value);
-                }} />
-              </Col>
-            </Row>
-          ) : null
-        }
-        {
-          this.state.provider.type.startsWith("Custom") ? (
-            <React.Fragment>
-              {
-                this.state.provider.category === "OAuth" ? (
-                  <Col>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:Auth URL"), i18next.t("provider:Auth URL - Tooltip"))}
-                      </Col>
-                      <Col span={22} >
-                        <Input value={this.state.provider.customAuthUrl} onChange={e => {
-                          this.updateProviderField("customAuthUrl", e.target.value);
-                        }} />
-                      </Col>
-                    </Row>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:Token URL"), i18next.t("provider:Token URL - Tooltip"))}
-                      </Col>
-                      <Col span={22} >
-                        <Input value={this.state.provider.customTokenUrl} onChange={e => {
-                          this.updateProviderField("customTokenUrl", e.target.value);
-                        }} />
-                      </Col>
-                    </Row>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:Scope"), i18next.t("provider:Scope - Tooltip"))}
-                      </Col>
-                      <Col span={22} >
-                        <Input value={this.state.provider.scopes} onChange={e => {
-                          this.updateProviderField("scopes", e.target.value);
-                        }} />
-                      </Col>
-                    </Row>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:UserInfo URL"), i18next.t("provider:UserInfo URL - Tooltip"))}
-                      </Col>
-                      <Col span={22} >
-                        <Input value={this.state.provider.customUserInfoUrl} onChange={e => {
-                          this.updateProviderField("customUserInfoUrl", e.target.value);
-                        }} />
-                      </Col>
-                    </Row>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:Enable PKCE"), i18next.t("provider:Enable PKCE - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <Switch checked={this.state.provider.enablePkce} onChange={checked => {
-                          this.updateProviderField("enablePkce", checked);
-                        }} />
-                      </Col>
-                    </Row>
-                  </Col>
-                ) : null
-              }
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:User mapping"), i18next.t("provider:User mapping - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  {this.renderUserMappingInput()}
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("general:Favicon"), i18next.t("general:Favicon - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Row style={{marginTop: "20px"}} >
-                    <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
-                      {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
-                    </Col>
-                    <Col span={23} >
-                      <Input prefix={<LinkOutlined />} value={this.state.provider.customLogo} onChange={e => {
-                        this.updateProviderField("customLogo", e.target.value);
-                      }} />
-                    </Col>
-                  </Row>
-                  <Row style={{marginTop: "20px"}} >
-                    <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
-                      {i18next.t("general:Preview")}:
-                    </Col>
-                    <Col span={23} >
-                      <a target="_blank" rel="noreferrer" href={this.state.provider.customLogo}>
-                        <img src={this.state.provider.customLogo} alt={this.state.provider.customLogo} height={90} style={{marginBottom: "20px"}} />
-                      </a>
-                    </Col>
-                  </Row>
-                </Col>
-              </Row>
-            </React.Fragment>
+          this.state.provider.category === "OAuth" ? renderOAuthProviderFields(
+            this.state.provider,
+            this.updateProviderField.bind(this),
+            this.renderUserMappingInput.bind(this)
           ) : null
         }
         {
@@ -969,7 +865,7 @@ class ProviderEditPage extends React.Component {
           (this.state.provider.category === "Storage" && this.state.provider.type === "Local File System") ||
           (this.state.provider.category === "SMS" && this.state.provider.type === "Custom HTTP SMS") ||
           (this.state.provider.category === "Email" && this.state.provider.type === "Custom HTTP Email") ||
-          (this.state.provider.category === "Notification" && (this.state.provider.type === "Google Chat" || this.state.provider.type === "Custom HTTP") || this.state.provider.type === "Balance") ? null : (
+          (this.state.provider.category === "Notification" && (this.state.provider.type === "Google Chat" || this.state.provider.type === "Custom HTTP" || this.state.provider.type === "Balance")) ? null : (
               <React.Fragment>
                 {
                   (this.state.provider.category === "Storage" && this.state.provider.type === "Google Cloud Storage") ||
@@ -1097,7 +993,7 @@ class ProviderEditPage extends React.Component {
           )
         }
         {
-          this.state.provider.type !== "ADFS" && this.state.provider.type !== "AzureAD" && this.state.provider.type !== "AzureADB2C" && (this.state.provider.type !== "Casdoor" && this.state.category !== "Storage") && this.state.provider.type !== "Okta" && this.state.provider.type !== "Nextcloud" ? null : (
+          this.state.provider.type !== "ADFS" && this.state.provider.type !== "AzureAD" && this.state.provider.type !== "AzureADB2C" && (this.state.provider.type !== "Casdoor" && this.state.provider.category !== "Storage") && this.state.provider.type !== "Okta" && this.state.provider.type !== "Nextcloud" ? null : (
             <Row style={{marginTop: "20px"}} >
               <Col style={{marginTop: "5px"}} span={2}>
                 {this.getDomainLabel(this.state.provider)} :
@@ -1204,670 +1100,48 @@ class ProviderEditPage extends React.Component {
         ) : null}
         {this.getAppIdRow(this.state.provider)}
         {
-          this.state.provider.category === "Notification" ? (
-            <React.Fragment>
-              {["Custom HTTP"].includes(this.state.provider.type) ? (
-                <Row style={{marginTop: "20px"}} >
-                  <Col style={{marginTop: "5px"}} span={2}>
-                    {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <Select virtual={false} style={{width: "100%"}} value={this.state.provider.method} onChange={value => {
-                      this.updateProviderField("method", value);
-                    }}>
-                      {
-                        [
-                          {id: "GET", name: "GET"},
-                          {id: "POST", name: "POST"},
-                        ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
-                      }
-                    </Select>
-                  </Col>
-                </Row>
-              ) : null}
-              {["Custom HTTP", "CUCloud"].includes(this.state.provider.type) ? (
-                <Row style={{marginTop: "20px"}} >
-                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                    {Setting.getLabel(i18next.t("provider:Parameter"), i18next.t("provider:Parameter - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <Input value={this.state.provider.title} onChange={e => {
-                      this.updateProviderField("title", e.target.value);
-                    }} />
-                  </Col>
-                </Row>
-              ) : null}
-              {["Google Chat", "CUCloud"].includes(this.state.provider.type) ? (
-                <Row style={{marginTop: "20px"}} >
-                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                    {Setting.getLabel(i18next.t("provider:Metadata"), i18next.t("provider:Metadata - Tooltip"))} :
-                  </Col>
-                  <Col span={22}>
-                    <TextArea rows={4} value={this.state.provider.metadata} onChange={e => {
-                      this.updateProviderField("metadata", e.target.value);
-                    }} />
-                  </Col>
-                </Row>
-              ) : null}
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Content"), i18next.t("provider:Content - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <TextArea autoSize={{minRows: 3, maxRows: 100}} value={this.state.provider.content} onChange={e => {
-                    this.updateProviderField("content", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                {this.getReceiverRow(this.state.provider)}
-                <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
-                  onClick={() => ProviderNotification.sendTestNotification(this.state.provider, this.state.provider.receiver)} >
-                  {i18next.t("provider:Send Testing Notification")}
-                </Button>
-              </Row>
-            </React.Fragment>
-          ) : this.state.provider.category === "Email" ? (
-            <React.Fragment>
-              <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}>
-                    {Setting.getLabel(i18next.t("provider:Port"), i18next.t("provider:Port - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <InputNumber value={this.state.provider.port} onChange={value => {
-                      this.updateProviderField("port", 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}>
-                    {Setting.getLabel(i18next.t("provider:SSL mode"), i18next.t("provider:SSL mode - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <Select virtual={false} style={{width: "200px"}} value={this.state.provider.sslMode || "Auto"} onChange={value => {
-                      this.updateProviderField("sslMode", value);
-                    }}>
-                      <Option value="Auto">{i18next.t("general:Auto")}</Option>
-                      <Option value="Enable">{i18next.t("general:Enable")}</Option>
-                      <Option value="Disable">{i18next.t("general:Disable")}</Option>
-                    </Select>
-                  </Col>
-                </Row>
-              )}
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Enable proxy"), i18next.t("provider:Enable proxy - Tooltip"))} :
-                </Col>
-                <Col span={1} >
-                  <Switch checked={this.state.provider.enableProxy} onChange={checked => {
-                    this.updateProviderField("enableProxy", checked);
-                  }} />
-                </Col>
-              </Row>
-              {
-                !["Custom HTTP Email"].includes(this.state.provider.type) ? null : (
-                  <React.Fragment>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={2}>
-                        {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <Select virtual={false} style={{width: "100%"}} value={this.state.provider.method} onChange={value => {
-                          this.updateProviderField("method", value);
-                        }}>
-                          {
-                            [
-                              {id: "GET", name: "GET"},
-                              {id: "POST", name: "POST"},
-                              {id: "PUT", name: "PUT"},
-                              {id: "DELETE", name: "DELETE"},
-                            ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
-                          }
-                        </Select>
-                      </Col>
-                    </Row>
-                    {
-                      this.state.provider.method !== "GET" ? (<Row style={{marginTop: "20px"}} >
-                        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                          {Setting.getLabel(i18next.t("webhook:Content type"), i18next.t("webhook:Content type - Tooltip"))} :
-                        </Col>
-                        <Col span={22} >
-                          <Select virtual={false} style={{width: "100%"}} value={this.state.provider.issuerUrl === "" ? "application/x-www-form-urlencoded" : this.state.provider.issuerUrl} onChange={value => {
-                            this.updateProviderField("issuerUrl", value);
-                          }}>
-                            {
-                              [
-                                {id: "application/json", name: "application/json"},
-                                {id: "application/x-www-form-urlencoded", name: "application/x-www-form-urlencoded"},
-                              ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
-                            }
-                          </Select>
-                        </Col>
-                      </Row>) : null
-                    }
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:HTTP header"), i18next.t("provider:HTTP header - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <HttpHeaderTable httpHeaders={this.state.provider.httpHeaders} onUpdateTable={(value) => {this.updateProviderField("httpHeaders", value);}} />
-                      </Col>
-                    </Row>
-                    {this.state.provider.method !== "GET" ? <Row style={{marginTop: "20px"}}>
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:HTTP body mapping"), i18next.t("provider:HTTP body mapping - Tooltip"))} :
-                      </Col>
-                      <Col span={22}>
-                        {this.renderEmailMappingInput()}
-                      </Col>
-                    </Row> : null}
-                  </React.Fragment>
-                )
-              }
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Email title"), i18next.t("provider:Email title - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Input value={this.state.provider.title} onChange={e => {
-                    this.updateProviderField("title", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Email content"), i18next.t("provider:Email content - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Row style={{marginTop: "20px"}} >
-                    <Button style={{marginLeft: "10px", marginBottom: "5px"}} onClick={() => this.updateProviderField("content", "You have requested a verification code at Casdoor. Here is your code: %s, please enter in 5 minutes. <reset-link>Or click %link to reset</reset-link>")} >
-                      {i18next.t("general:Reset to Default")}
-                    </Button>
-                    <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => this.updateProviderField("content", Setting.getDefaultHtmlEmailContent())} >
-                      {i18next.t("general:Reset to Default")}
-                    </Button>
-                  </Row>
-                  <Row>
-                    <Col span={Setting.isMobile() ? 22 : 11}>
-                      <div style={{height: "300px", margin: "10px"}}>
-                        <Editor
-                          value={this.state.provider.content}
-                          fillHeight
-                          dark
-                          lang="html"
-                          onChange={value => {
-                            this.updateProviderField("content", value);
-                          }}
-                        />
-                      </div>
-                    </Col>
-                    <Col span={1} />
-                    <Col span={Setting.isMobile() ? 22 : 11}>
-                      <div style={{margin: "10px"}}>
-                        <div dangerouslySetInnerHTML={{__html: this.state.provider.content.replace("%s", "123456").replace("%{user.friendlyName}", Setting.getFriendlyUserName(this.props.account))}} />
-                      </div>
-                    </Col>
-                  </Row>
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(`${i18next.t("provider:Email content")}-${i18next.t("general:Invitations")}`, i18next.t("provider:Email content - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Row style={{marginTop: "20px"}} >
-                    <Button style={{marginLeft: "10px", marginBottom: "5px"}} onClick={() => this.updateProviderField("metadata", "You have invited to join Casdoor. Here is your invitation code: %s, please enter in 5 minutes. Or click %link to signup")} >
-                      {i18next.t("general:Reset to Default")}
-                    </Button>
-                    <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => this.updateProviderField("metadata", Setting.getDefaultInvitationHtmlEmailContent())} >
-                      {i18next.t("general:Reset to Default")}
-                    </Button>
-                  </Row>
-                  <Row>
-                    <Col span={Setting.isMobile() ? 22 : 11}>
-                      <div style={{height: "300px", margin: "10px"}}>
-                        <Editor
-                          value={this.state.provider.metadata}
-                          fillHeight
-                          dark
-                          lang="html"
-                          onChange={value => {
-                            this.updateProviderField("metadata", value);
-                          }}
-                        />
-                      </div>
-                    </Col>
-                    <Col span={1} />
-                    <Col span={Setting.isMobile() ? 22 : 11}>
-                      <div style={{margin: "10px"}}>
-                        <div dangerouslySetInnerHTML={{__html: this.state.provider.metadata.replace("%code", "123456")}} />
-                      </div>
-                    </Col>
-                  </Row>
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}}>
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Test Email"), i18next.t("provider:Test Email - Tooltip"))} :
-                </Col>
-                <Col span={4}>
-                  <Input value={this.state.provider.receiver} placeholder={i18next.t("user:Input your email")}
-                    onChange={e => {
-                      this.updateProviderField("receiver", e.target.value);
-                    }} />
-                </Col>
-                {["Azure ACS", "SendGrid"].includes(this.state.provider.type) ? null : (
-                  <Button style={{marginLeft: "10px", marginBottom: "5px"}} onClick={() => ProviderEditTestEmail.connectSmtpServer(this.state.provider)} >
-                    {i18next.t("provider:Test SMTP Connection")}
-                  </Button>
-                )}
-                <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
-                  disabled={!Setting.isValidEmail(this.state.provider.receiver)}
-                  onClick={() => ProviderEditTestEmail.sendTestEmail(this.state.provider, this.state.provider.receiver)} >
-                  {i18next.t("provider:Send Testing Email")}
-                </Button>
-              </Row>
-            </React.Fragment>
-          ) : ["SMS"].includes(this.state.provider.category) ? (
-            <React.Fragment>
-              {["Custom HTTP SMS", "Twilio SMS", "Amazon SNS", "Azure ACS", "Msg91 SMS", "Infobip SMS"].includes(this.state.provider.type) ?
-                null :
-                (<Row style={{marginTop: "20px"}} >
-                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                    {Setting.getLabel(i18next.t("provider:Sign Name"), i18next.t("provider:Sign Name - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <Input value={this.state.provider.signName} onChange={e => {
-                      this.updateProviderField("signName", e.target.value);
-                    }} />
-                  </Col>
-                </Row>
-                )
-              }
-              {["Infobip SMS"].includes(this.state.provider.type) ?
-                null :
-                (<Row style={{marginTop: "20px"}} >
-                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                    {Setting.getLabel(i18next.t("provider:Template code"), i18next.t("provider:Template code - Tooltip"))} :
-                  </Col>
-                  <Col span={22} >
-                    <Input value={this.state.provider.templateCode} onChange={e => {
-                      this.updateProviderField("templateCode", e.target.value);
-                    }} />
-                  </Col>
-                </Row>
-                )
-              }
-              {
-                this.state.provider.type !== "Custom HTTP SMS" ? null : (
-                  <React.Fragment>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={2}>
-                        {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <Select virtual={false} style={{width: "100%"}} value={this.state.provider.method} onChange={value => {
-                          this.updateProviderField("method", value);
-                        }}>
-                          {
-                            [
-                              {id: "GET", name: "GET"},
-                              {id: "POST", name: "POST"},
-                              {id: "PUT", name: "PUT"},
-                              {id: "DELETE", name: "DELETE"},
-                            ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
-                          }
-                        </Select>
-                      </Col>
-                    </Row>
-                    {
-                      this.state.provider.method !== "GET" ? (<Row style={{marginTop: "20px"}} >
-                        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                          {Setting.getLabel(i18next.t("webhook:Content type"), i18next.t("webhook:Content type - Tooltip"))} :
-                        </Col>
-                        <Col span={22} >
-                          <Select virtual={false} style={{width: "100%"}} value={this.state.provider.issuerUrl === "" ? "application/x-www-form-urlencoded" : this.state.provider.issuerUrl} onChange={value => {
-                            this.updateProviderField("issuerUrl", value);
-                          }}>
-                            {
-                              [
-                                {id: "application/json", name: "application/json"},
-                                {id: "application/x-www-form-urlencoded", name: "application/x-www-form-urlencoded"},
-                              ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
-                            }
-                          </Select>
-                        </Col>
-                      </Row>) : null
-                    }
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:HTTP header"), i18next.t("provider:HTTP header - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <HttpHeaderTable httpHeaders={this.state.provider.httpHeaders} onUpdateTable={(value) => {this.updateProviderField("httpHeaders", value);}} />
-                      </Col>
-                    </Row>
-                    {this.state.provider.method !== "GET" ? <Row style={{marginTop: "20px"}}>
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:HTTP body mapping"), i18next.t("provider:HTTP body mapping - Tooltip"))} :
-                      </Col>
-                      <Col span={22}>
-                        {this.renderSmsMappingInput()}
-                      </Col>
-                    </Row> : null}
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:Parameter"), i18next.t("provider:Parameter - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <Input value={this.state.provider.title} onChange={e => {
-                          this.updateProviderField("title", e.target.value);
-                        }} />
-                      </Col>
-                    </Row>
-                  </React.Fragment>
-                )
-              }
-              {
-                this.state.provider.type !== "Custom HTTP Email" ? null : (
-                  <React.Fragment>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={2}>
-                        {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <Select virtual={false} style={{width: "100%"}} value={this.state.provider.method} onChange={value => {
-                          this.updateProviderField("method", value);
-                        }}>
-                          {
-                            [
-                              {id: "GET", name: "GET"},
-                              {id: "POST", name: "POST"},
-                            ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
-                          }
-                        </Select>
-                      </Col>
-                    </Row>
-                    <Row style={{marginTop: "20px"}} >
-                      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                        {Setting.getLabel(i18next.t("provider:Parameter"), i18next.t("provider:Parameter - Tooltip"))} :
-                      </Col>
-                      <Col span={22} >
-                        <Input value={this.state.provider.title} onChange={e => {
-                          this.updateProviderField("title", e.target.value);
-                        }} />
-                      </Col>
-                    </Row>
-                  </React.Fragment>
-                )
-              }
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Enable proxy"), i18next.t("provider:Enable proxy - Tooltip"))} :
-                </Col>
-                <Col span={1} >
-                  <Switch checked={this.state.provider.enableProxy} onChange={checked => {
-                    this.updateProviderField("enableProxy", checked);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:SMS Test"), i18next.t("provider:SMS Test - Tooltip"))} :
-                </Col>
-                <Col span={4} >
-                  <Input.Group compact>
-                    <CountryCodeSelect
-                      style={{width: "90px"}}
-                      initValue={this.state.provider.content}
-                      onChange={(value) => {
-                        this.updateProviderField("content", value);
-                      }}
-                      countryCodes={this.props.account.organization.countryCodes}
-                    />
-                    <Input value={this.state.provider.receiver}
-                      style={{width: "150px"}}
-                      placeholder = {i18next.t("user:Input your phone number")}
-                      onChange={e => {
-                        this.updateProviderField("receiver", e.target.value);
-                      }} />
-                  </Input.Group>
-                </Col>
-                <Col span={2} >
-                  <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
-                    disabled={!Setting.isValidPhone(this.state.provider.receiver) && (this.state.provider.type !== "Custom HTTP SMS" || this.state.provider.endpoint === "")}
-                    onClick={() => ProviderEditTestSms.sendTestSms(this.state.provider, "+" + Setting.getCountryCode(this.state.provider.content) + this.state.provider.receiver)} >
-                    {i18next.t("provider:Send Testing SMS")}
-                  </Button>
-                </Col>
-              </Row>
-            </React.Fragment>
-          ) : this.state.provider.category === "MFA" ? (
-            <React.Fragment>
-              <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} placeholder="10.10.10.10" 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:Port"), i18next.t("provider:Port - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <InputNumber value={this.state.provider.port} onChange={value => {
-                    this.updateProviderField("port", value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:RADIUS Shared Secret - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Input value={this.state.provider.clientSecret} placeholder="Shared secret" onChange={e => {
-                    this.updateProviderField("clientSecret", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-            </React.Fragment>
-          ) : this.state.provider.category === "SAML" ? (
-            <React.Fragment>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Sign request"), i18next.t("provider:Sign request - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Switch checked={this.state.provider.enableSignAuthnRequest} onChange={checked => {
-                    this.updateProviderField("enableSignAuthnRequest", checked);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Metadata url"), i18next.t("provider:Metadata url - Tooltip"))} :
-                </Col>
-                <Col span={6} >
-                  <Input value={this.state.requestUrl} onChange={e => {
-                    this.setState({
-                      requestUrl: e.target.value,
-                    });
-                  }} />
-                </Col>
-                <Col span={16} >
-                  <Button style={{marginLeft: "10px"}} type="primary" loading={this.state.metadataLoading} onClick={() => {this.fetchSamlMetadata();}}>{i18next.t("general:Request")}</Button>
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Metadata"), i18next.t("provider:Metadata - Tooltip"))} :
-                </Col>
-                <Col span={22}>
-                  <TextArea rows={4} value={this.state.provider.metadata} onChange={e => {
-                    this.updateProviderField("metadata", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}}>
-                <Col style={{marginTop: "5px"}} span={2} />
-                <Col span={2}>
-                  <Button type="primary" onClick={() => {this.parseSamlMetadata();}}>
-                    {i18next.t("provider:Parse")}
-                  </Button>
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Endpoint"), i18next.t("provider:SAML 2.0 Endpoint (HTTP)"))} :
-                </Col>
-                <Col span={22} >
-                  <Input value={this.state.provider.endpoint} onChange={e => {
-                    this.updateProviderField("endpoint", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:IdP"), i18next.t("provider:IdP certificate"))} :
-                </Col>
-                <Col span={22} >
-                  <Input value={this.state.provider.idP} onChange={e => {
-                    this.updateProviderField("idP", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:Issuer URL"), i18next.t("provider:Issuer URL - Tooltip"))} :
-                </Col>
-                <Col span={22} >
-                  <Input value={this.state.provider.issuerUrl} onChange={e => {
-                    this.updateProviderField("issuerUrl", e.target.value);
-                  }} />
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:SP ACS URL"), i18next.t("provider:SP ACS URL - Tooltip"))} :
-                </Col>
-                <Col span={21} >
-                  <Input value={`${authConfig.serverUrl}/api/acs`} readOnly="readonly" />
-                </Col>
-                <Col span={1}>
-                  <Button type="primary" onClick={() => {
-                    copy(`${authConfig.serverUrl}/api/acs`);
-                    Setting.showMessage("success", i18next.t("general:Copied to clipboard successfully"));
-                  }}>
-                    {i18next.t("general:Copy")}
-                  </Button>
-                </Col>
-              </Row>
-              <Row style={{marginTop: "20px"}} >
-                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                  {Setting.getLabel(i18next.t("provider:SP Entity ID"), i18next.t("provider:SP ACS URL - Tooltip"))} :
-                </Col>
-                <Col span={21} >
-                  <Input value={`${authConfig.serverUrl}/api/acs`} readOnly="readonly" />
-                </Col>
-                <Col span={1}>
-                  <Button type="primary" onClick={() => {
-                    copy(`${authConfig.serverUrl}/api/acs`);
-                    Setting.showMessage("success", i18next.t("general:Copied to clipboard successfully"));
-                  }}>
-                    {i18next.t("general:Copy")}
-                  </Button>
-                </Col>
-              </Row>
-            </React.Fragment>
-          ) : null
-        }
-        {
-          (this.state.provider.type === "Alipay" || this.state.provider.type === "WeChat Pay" || this.state.provider.type === "Casdoor") ? (
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                {Setting.getLabel(i18next.t("general:Cert"), i18next.t("general:Cert - Tooltip"))} :
-              </Col>
-              <Col span={22} >
-                <Select virtual={false} style={{width: "100%"}} value={this.state.provider.cert} onChange={(value => {this.updateProviderField("cert", value);})}>
-                  {
-                    this.state.certs.map((cert, index) => <Option key={index} value={cert.name}>{cert.name}</Option>)
-                  }
-                </Select>
-              </Col>
-            </Row>
-          ) : null
-        }
-        {
-          (this.state.provider.type === "Alipay") ? (
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                {Setting.getLabel(i18next.t("general:Root cert"), i18next.t("general:Root cert - Tooltip"))} :
-              </Col>
-              <Col span={22} >
-                <Select virtual={false} style={{width: "100%"}} value={this.state.provider.metadata} onChange={(value => {this.updateProviderField("metadata", value);})}>
-                  {
-                    this.state.certs.map((cert, index) => <Option key={index} value={cert.name}>{cert.name}</Option>)
-                  }
-                </Select>
-              </Col>
-            </Row>
-          ) : null
-        }
-        {
-          this.state.provider.type === "Web3Onboard" ? (
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                {Setting.getLabel(i18next.t("provider:Wallets"), i18next.t("provider:Wallets - Tooltip"))} :
-              </Col>
-              <Col span={22}>
-                <Checkbox.Group
-                  options={Web3Auth.getWeb3OnboardWalletsOptions()}
-                  value={() => {
-                    try {
-                      return JSON.parse(this.state.provider.metadata);
-                    } catch {
-                      return ["injected"];
-                    }
-                  }}
-                  onChange={options => {
-                    this.updateProviderField("metadata", JSON.stringify(options));
-                  }}
-                />
-              </Col>
-            </Row>
-          ) : null
-        }
-        {
-          (this.state.provider.type === "GC" || this.state.provider.type === "FastSpring") ? (
-            <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>
+          this.state.provider.category === "Notification" ? renderNotificationProviderFields(
+            this.state.provider,
+            this.updateProviderField.bind(this),
+            this.getReceiverRow.bind(this)
+          ) : this.state.provider.category === "Email" ? renderEmailProviderFields(
+            this.state.provider,
+            this.updateProviderField.bind(this),
+            this.renderEmailMappingInput.bind(this),
+            this.props.account
+          ) : ["SMS"].includes(this.state.provider.category) ? renderSmsProviderFields(
+            this.state.provider,
+            this.updateProviderField.bind(this),
+            this.renderSmsMappingInput.bind(this),
+            this.props.account
+          ) : this.state.provider.category === "MFA" ? renderMfaProviderFields(
+            this.state.provider,
+            this.updateProviderField.bind(this)
+          ) : this.state.provider.category === "SAML" ? renderSamlProviderFields(
+            this.state.provider,
+            this.updateProviderField.bind(this),
+            {
+              requestUrl: this.state.requestUrl,
+              setRequestUrl: (value) => this.setState({requestUrl: value}),
+              metadataLoading: this.state.metadataLoading,
+              fetchSamlMetadata: this.fetchSamlMetadata.bind(this),
+              parseSamlMetadata: this.parseSamlMetadata.bind(this),
+            }
           ) : null
         }
+        {this.state.provider.category === "Payment" ? renderPaymentProviderFields(
+          this.state.provider,
+          this.updateProviderField.bind(this),
+          this.state.certs
+        ) : null}
+        {this.state.provider.category === "Web3" ? renderWeb3ProviderFields(
+          this.state.provider,
+          this.updateProviderField.bind(this)
+        ) : null}
+        {this.state.provider.category === "Storage" ? renderStorageProviderFields(
+          this.state.provider,
+          this.updateProviderField.bind(this)
+        ) : null}
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
             {Setting.getLabel(i18next.t("provider:Provider URL"), i18next.t("provider:Provider URL - Tooltip"))} :
@@ -1879,28 +1153,10 @@ class ProviderEditPage extends React.Component {
           </Col>
         </Row>
         {
-          this.state.provider.category !== "Captcha" ? null : (
-            <Row style={{marginTop: "20px"}} >
-              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
-                {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
-              </Col>
-              <Col span={22} >
-                <CaptchaPreview
-                  owner={this.state.provider.owner}
-                  name={this.state.provider.name}
-                  provider={this.state.provider}
-                  providerName={this.state.providerName}
-                  captchaType={this.state.provider.type}
-                  subType={this.state.provider.subType}
-                  clientId={this.state.provider.clientId}
-                  clientSecret={this.state.provider.clientSecret}
-                  clientId2={this.state.provider.clientId2}
-                  clientSecret2={this.state.provider.clientSecret2}
-                  providerUrl={this.state.provider.providerUrl}
-                />
-              </Col>
-            </Row>
-          )
+          this.state.provider.category === "Captcha" ? renderCaptchaProviderFields(
+            this.state.provider,
+            this.state.providerName
+          ) : null
         }
       </Card>
     );

web/src/auth/Provider.js

@@ -44,20 +44,15 @@ function generateCodeChallenge(verifier) {
 }
 
 function storeCodeVerifier(state, verifier) {
-  localStorage.setItem("pkce_verifier", `${state}#${verifier}`);
+  localStorage.setItem(`pkce_verifier_${state}`, verifier);
 }
 
 export function getCodeVerifier(state) {
-  const verifierStore = localStorage.getItem("pkce_verifier");
-  const [storedState, verifier] = verifierStore ? verifierStore.split("#") : [null, null];
-  if (storedState !== state) {
-    return null;
-  }
-  return verifier;
+  return localStorage.getItem(`pkce_verifier_${state}`);
 }
 
 export function clearCodeVerifier(state) {
-  localStorage.removeItem("pkce_verifier");
+  localStorage.removeItem(`pkce_verifier_${state}`);
 }
 
 const authInfo = {

web/src/provider/CaptchaProviderFields.js

@@ -0,0 +1,44 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Col, Row} from "antd";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import {CaptchaPreview} from "../common/CaptchaPreview";
+
+export function renderCaptchaProviderFields(provider, providerName) {
+  return (
+    <Row style={{marginTop: "20px"}} >
+      <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+        {Setting.getLabel(i18next.t("general:Preview"), i18next.t("general:Preview - Tooltip"))} :
+      </Col>
+      <Col span={22} >
+        <CaptchaPreview
+          owner={provider.owner}
+          name={provider.name}
+          provider={provider}
+          providerName={providerName}
+          captchaType={provider.type}
+          subType={provider.subType}
+          clientId={provider.clientId}
+          clientSecret={provider.clientSecret}
+          clientId2={provider.clientId2}
+          clientSecret2={provider.clientSecret2}
+          providerUrl={provider.providerUrl}
+        />
+      </Col>
+    </Row>
+  );
+}

web/src/provider/EmailProviderFields.js

@@ -0,0 +1,242 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Col, Input, InputNumber, Row, Select, Switch} from "antd";
+import {LinkOutlined} from "@ant-design/icons";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import * as ProviderEditTestEmail from "../common/TestEmailWidget";
+import Editor from "../common/Editor";
+import HttpHeaderTable from "../table/HttpHeaderTable";
+
+const {Option} = Select;
+
+export function renderEmailProviderFields(provider, updateProviderField, renderEmailMappingInput, account) {
+  return (
+    <React.Fragment>
+      <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={provider.host} onChange={e => {
+            updateProviderField("host", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      {["Azure ACS", "SendGrid"].includes(provider.type) ? null : (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Port"), i18next.t("provider:Port - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <InputNumber value={provider.port} onChange={value => {
+              updateProviderField("port", value);
+            }} />
+          </Col>
+        </Row>
+      )}
+      {["Azure ACS", "SendGrid"].includes(provider.type) ? null : (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:SSL mode"), i18next.t("provider:SSL mode - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "200px"}} value={provider.sslMode || "Auto"} onChange={value => {
+              updateProviderField("sslMode", value);
+            }}>
+              <Option value="Auto">{i18next.t("general:Auto")}</Option>
+              <Option value="Enable">{i18next.t("general:Enable")}</Option>
+              <Option value="Disable">{i18next.t("general:Disable")}</Option>
+            </Select>
+          </Col>
+        </Row>
+      )}
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Enable proxy"), i18next.t("provider:Enable proxy - Tooltip"))} :
+        </Col>
+        <Col span={1} >
+          <Switch checked={provider.enableProxy} onChange={checked => {
+            updateProviderField("enableProxy", checked);
+          }} />
+        </Col>
+      </Row>
+      {
+        provider.type === "Custom HTTP Email" ? (
+          <React.Fragment>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Select virtual={false} style={{width: "100%"}} value={provider.method} onChange={value => {
+                  updateProviderField("method", value);
+                }}>
+                  {
+                    [
+                      {id: "GET", name: "GET"},
+                      {id: "POST", name: "POST"},
+                      {id: "PUT", name: "PUT"},
+                      {id: "DELETE", name: "DELETE"},
+                    ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+                  }
+                </Select>
+              </Col>
+            </Row>
+            {
+              provider.method !== "GET" ? (<Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("webhook:Content type"), i18next.t("webhook:Content type - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Select virtual={false} style={{width: "100%"}} value={provider.issuerUrl === "" ? "application/x-www-form-urlencoded" : provider.issuerUrl} onChange={value => {
+                    updateProviderField("issuerUrl", value);
+                  }}>
+                    {
+                      [
+                        {id: "application/json", name: "application/json"},
+                        {id: "application/x-www-form-urlencoded", name: "application/x-www-form-urlencoded"},
+                      ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+                    }
+                  </Select>
+                </Col>
+              </Row>) : null
+            }
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:HTTP header"), i18next.t("provider:HTTP header - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <HttpHeaderTable httpHeaders={provider.httpHeaders} onUpdateTable={(value) => {updateProviderField("httpHeaders", value);}} />
+              </Col>
+            </Row>
+            {provider.method !== "GET" ? <Row style={{marginTop: "20px"}}>
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:HTTP body mapping"), i18next.t("provider:HTTP body mapping - Tooltip"))} :
+              </Col>
+              <Col span={22}>
+                {renderEmailMappingInput()}
+              </Col>
+            </Row> : null}
+          </React.Fragment>
+        ) : null
+      }
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Email title"), i18next.t("provider:Email title - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <Input value={provider.title} onChange={e => {
+            updateProviderField("title", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Email content"), i18next.t("provider:Email content - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <Row style={{marginTop: "20px"}} >
+            <Button style={{marginLeft: "10px", marginBottom: "5px"}} onClick={() => updateProviderField("content", "You have requested a verification code at Casdoor. Here is your code: %s, please enter in 5 minutes. <reset-link>Or click %link to reset</reset-link>")} >
+              {i18next.t("general:Reset to Default")} (Text)
+            </Button>
+            <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => updateProviderField("content", Setting.getDefaultHtmlEmailContent())} >
+              {i18next.t("general:Reset to Default")} (HTML)
+            </Button>
+          </Row>
+          <Row>
+            <Col span={Setting.isMobile() ? 22 : 11}>
+              <div style={{height: "300px", margin: "10px"}}>
+                <Editor
+                  value={provider.content}
+                  fillHeight
+                  dark
+                  lang="html"
+                  onChange={value => {
+                    updateProviderField("content", value);
+                  }}
+                />
+              </div>
+            </Col>
+            <Col span={1} />
+            <Col span={Setting.isMobile() ? 22 : 11}>
+              <div style={{margin: "10px"}}>
+                <div dangerouslySetInnerHTML={{__html: provider.content.replace("%s", "123456").replace("%{user.friendlyName}", Setting.getFriendlyUserName(account))}} />
+              </div>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(`${i18next.t("provider:Email content")}-${i18next.t("general:Invitations")}`, i18next.t("provider:Email content - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <Row style={{marginTop: "20px"}} >
+            <Button style={{marginLeft: "10px", marginBottom: "5px"}} onClick={() => updateProviderField("metadata", "You have invited to join Casdoor. Here is your invitation code: %s, please enter in 5 minutes. Or click %link to signup")} >
+              {i18next.t("general:Reset to Default")} (Text)
+            </Button>
+            <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary" onClick={() => updateProviderField("metadata", Setting.getDefaultInvitationHtmlEmailContent())} >
+              {i18next.t("general:Reset to Default")} (HTML)
+            </Button>
+          </Row>
+          <Row>
+            <Col span={Setting.isMobile() ? 22 : 11}>
+              <div style={{height: "300px", margin: "10px"}}>
+                <Editor
+                  value={provider.metadata}
+                  fillHeight
+                  dark
+                  lang="html"
+                  onChange={value => {
+                    updateProviderField("metadata", value);
+                  }}
+                />
+              </div>
+            </Col>
+            <Col span={1} />
+            <Col span={Setting.isMobile() ? 22 : 11}>
+              <div style={{margin: "10px"}}>
+                <div dangerouslySetInnerHTML={{__html: provider.metadata.replace("%code", "123456").replace("%s", "123456")}} />
+              </div>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}}>
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Test Email"), i18next.t("provider:Test Email - Tooltip"))} :
+        </Col>
+        <Col span={4}>
+          <Input value={provider.receiver} placeholder={i18next.t("user:Input your email")}
+            onChange={e => {
+              updateProviderField("receiver", e.target.value);
+            }} />
+        </Col>
+        {["Azure ACS", "SendGrid"].includes(provider.type) ? null : (
+          <Button style={{marginLeft: "10px", marginBottom: "5px"}} onClick={() => ProviderEditTestEmail.connectSmtpServer(provider)} >
+            {i18next.t("provider:Test SMTP Connection")}
+          </Button>
+        )}
+        <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
+          disabled={!Setting.isValidEmail(provider.receiver)}
+          onClick={() => ProviderEditTestEmail.sendTestEmail(provider, provider.receiver)} >
+          {i18next.t("provider:Send Testing Email")}
+        </Button>
+      </Row>
+    </React.Fragment>
+  );
+}

web/src/provider/MfaProviderFields.js

@@ -0,0 +1,56 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Col, Input, InputNumber, Row} from "antd";
+import {LinkOutlined} from "@ant-design/icons";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+
+export function renderMfaProviderFields(provider, updateProviderField) {
+  return (
+    <React.Fragment>
+      <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={provider.host} placeholder="10.10.10.10" onChange={e => {
+            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:Port"), i18next.t("provider:Port - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <InputNumber value={provider.port} onChange={value => {
+            updateProviderField("port", value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Client secret"), i18next.t("provider:RADIUS Shared Secret - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <Input value={provider.clientSecret} placeholder="Shared secret" onChange={e => {
+            updateProviderField("clientSecret", e.target.value);
+          }} />
+        </Col>
+      </Row>
+    </React.Fragment>
+  );
+}

web/src/provider/NotificationProviderFields.js

@@ -0,0 +1,89 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Col, Input, Row, Select} from "antd";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import * as ProviderNotification from "../common/TestNotificationWidget";
+
+const {Option} = Select;
+const {TextArea} = Input;
+
+export function renderNotificationProviderFields(provider, updateProviderField, getReceiverRow) {
+  return (
+    <React.Fragment>
+      {["Custom HTTP"].includes(provider.type) ? (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Select virtual={false} style={{width: "100%"}} value={provider.method} onChange={value => {
+              updateProviderField("method", value);
+            }}>
+              {
+                [
+                  {id: "GET", name: "GET"},
+                  {id: "POST", name: "POST"},
+                ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+              }
+            </Select>
+          </Col>
+        </Row>
+      ) : null}
+      {["Custom HTTP", "CUCloud"].includes(provider.type) ? (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Parameter"), i18next.t("provider:Parameter - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={provider.title} onChange={e => {
+              updateProviderField("title", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      ) : null}
+      {["Google Chat", "CUCloud"].includes(provider.type) ? (
+        <Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Metadata"), i18next.t("provider:Metadata - Tooltip"))} :
+          </Col>
+          <Col span={22}>
+            <TextArea rows={4} value={provider.metadata} onChange={e => {
+              updateProviderField("metadata", e.target.value);
+            }} />
+          </Col>
+        </Row>
+      ) : null}
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Content"), i18next.t("provider:Content - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <TextArea autoSize={{minRows: 3, maxRows: 100}} value={provider.content} onChange={e => {
+            updateProviderField("content", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        {getReceiverRow(provider)}
+        <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
+          onClick={() => ProviderNotification.sendTestNotification(provider)} >
+          {i18next.t("provider:Send Testing Notification")}
+        </Button>
+      </Row>
+    </React.Fragment>
+  );
+}

web/src/provider/OAuthProviderFields.js

@@ -0,0 +1,131 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Col, Input, Row, Switch} from "antd";
+import {LinkOutlined} from "@ant-design/icons";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+
+const {TextArea} = Input;
+
+export function renderOAuthProviderFields(provider, updateProviderField, renderUserMappingInput) {
+  return (
+    <React.Fragment>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Email regex"), i18next.t("provider:Email regex - Tooltip"))} :
+        </Col>
+        <Col span={22}>
+          <TextArea rows={4} value={provider.emailRegex} onChange={e => {
+            updateProviderField("emailRegex", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      {
+        provider.type.startsWith("Custom") ? (
+          <React.Fragment>
+            <Col>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Auth URL"), i18next.t("provider:Auth URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={provider.customAuthUrl} onChange={e => {
+                    updateProviderField("customAuthUrl", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Token URL"), i18next.t("provider:Token URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={provider.customTokenUrl} onChange={e => {
+                    updateProviderField("customTokenUrl", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Scope"), i18next.t("provider:Scope - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={provider.scopes} onChange={e => {
+                    updateProviderField("scopes", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:UserInfo URL"), i18next.t("provider:UserInfo URL - Tooltip"))}
+                </Col>
+                <Col span={22} >
+                  <Input value={provider.customUserInfoUrl} onChange={e => {
+                    updateProviderField("customUserInfoUrl", e.target.value);
+                  }} />
+                </Col>
+              </Row>
+              <Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("provider:Enable PKCE"), i18next.t("provider:Enable PKCE - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Switch checked={provider.enablePkce} onChange={checked => {
+                    updateProviderField("enablePkce", checked);
+                  }} />
+                </Col>
+              </Row>
+            </Col>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:User mapping"), i18next.t("provider:User mapping - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                {renderUserMappingInput()}
+              </Col>
+            </Row>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("general:Favicon"), i18next.t("general:Favicon - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Row style={{marginTop: "20px"}} >
+                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
+                    {Setting.getLabel(i18next.t("general:URL"), i18next.t("general:URL - Tooltip"))} :
+                  </Col>
+                  <Col span={23} >
+                    <Input prefix={<LinkOutlined />} value={provider.customLogo} onChange={e => {
+                      updateProviderField("customLogo", e.target.value);
+                    }} />
+                  </Col>
+                </Row>
+                <Row style={{marginTop: "20px"}} >
+                  <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 1}>
+                    {i18next.t("general:Preview")}:
+                  </Col>
+                  <Col span={23} >
+                    <a target="_blank" rel="noreferrer" href={provider.customLogo}>
+                      <img src={provider.customLogo} alt={provider.customLogo} height={90} style={{marginBottom: "20px"}} />
+                    </a>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+          </React.Fragment>
+        ) : null
+      }
+    </React.Fragment>
+  );
+}

web/src/provider/PaymentProviderFields.js

@@ -0,0 +1,59 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Col, Row, Select} from "antd";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+
+const {Option} = Select;
+
+export function renderPaymentProviderFields(provider, updateProviderField, certs) {
+  return (
+    <React.Fragment>
+      {
+        (provider.type === "Alipay" || provider.type === "WeChat Pay" || provider.type === "Casdoor") ? (
+          <Row style={{marginTop: "20px"}} >
+            <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+              {Setting.getLabel(i18next.t("general:Cert"), i18next.t("general:Cert - Tooltip"))} :
+            </Col>
+            <Col span={22} >
+              <Select virtual={false} style={{width: "100%"}} value={provider.cert} onChange={(value => {updateProviderField("cert", value);})}>
+                {
+                  certs.map((cert, index) => <Option key={index} value={cert.name}>{cert.name}</Option>)
+                }
+              </Select>
+            </Col>
+          </Row>
+        ) : null
+      }
+      {
+        (provider.type === "Alipay") ? (
+          <Row style={{marginTop: "20px"}} >
+            <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+              {Setting.getLabel(i18next.t("general:Root cert"), i18next.t("general:Root cert - Tooltip"))} :
+            </Col>
+            <Col span={22} >
+              <Select virtual={false} style={{width: "100%"}} value={provider.metadata} onChange={(value => {updateProviderField("metadata", value);})}>
+                {
+                  certs.map((cert, index) => <Option key={index} value={cert.name}>{cert.name}</Option>)
+                }
+              </Select>
+            </Col>
+          </Row>
+        ) : null
+      }
+    </React.Fragment>
+  );
+}

web/src/provider/SamlProviderFields.js

@@ -0,0 +1,133 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Col, Input, Row, Switch} from "antd";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import {authConfig} from "../auth/Auth";
+import copy from "copy-to-clipboard";
+
+const {TextArea} = Input;
+
+export function renderSamlProviderFields(provider, updateProviderField, metadataConfig) {
+  const {requestUrl, setRequestUrl, metadataLoading, fetchSamlMetadata, parseSamlMetadata} = metadataConfig;
+  return (
+    <React.Fragment>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Sign request"), i18next.t("provider:Sign request - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <Switch checked={provider.enableSignAuthnRequest} onChange={checked => {
+            updateProviderField("enableSignAuthnRequest", checked);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Metadata url"), i18next.t("provider:Metadata url - Tooltip"))} :
+        </Col>
+        <Col span={6} >
+          <Input value={requestUrl} onChange={e => {
+            setRequestUrl(e.target.value);
+          }} />
+        </Col>
+        <Col span={16} >
+          <Button style={{marginLeft: "10px"}} type="primary" loading={metadataLoading} onClick={() => {fetchSamlMetadata();}}>{i18next.t("general:Request")}</Button>
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Metadata"), i18next.t("provider:Metadata - Tooltip"))} :
+        </Col>
+        <Col span={22}>
+          <TextArea rows={4} value={provider.metadata} onChange={e => {
+            updateProviderField("metadata", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}}>
+        <Col style={{marginTop: "5px"}} span={2} />
+        <Col span={2}>
+          <Button type="primary" onClick={() => {parseSamlMetadata();}}>
+            {i18next.t("provider:Parse")}
+          </Button>
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Endpoint"), i18next.t("provider:SAML 2.0 Endpoint (HTTP)"))} :
+        </Col>
+        <Col span={22} >
+          <Input value={provider.endpoint} onChange={e => {
+            updateProviderField("endpoint", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:IdP"), i18next.t("provider:IdP certificate"))} :
+        </Col>
+        <Col span={22} >
+          <Input value={provider.idP} onChange={e => {
+            updateProviderField("idP", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Issuer URL"), i18next.t("provider:Issuer URL - Tooltip"))} :
+        </Col>
+        <Col span={22} >
+          <Input value={provider.issuerUrl} onChange={e => {
+            updateProviderField("issuerUrl", e.target.value);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:SP ACS URL"), i18next.t("provider:SP ACS URL - Tooltip"))} :
+        </Col>
+        <Col span={21} >
+          <Input value={`${authConfig.serverUrl}/api/acs`} readOnly="readonly" />
+        </Col>
+        <Col span={1}>
+          <Button type="primary" onClick={() => {
+            copy(`${authConfig.serverUrl}/api/acs`);
+            Setting.showMessage("success", i18next.t("general:Copied to clipboard successfully"));
+          }}>
+            {i18next.t("general:Copy")}
+          </Button>
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:SP Entity ID"), i18next.t("provider:SP ACS URL - Tooltip"))} :
+        </Col>
+        <Col span={21} >
+          <Input value={`${authConfig.serverUrl}/api/acs`} readOnly="readonly" />
+        </Col>
+        <Col span={1}>
+          <Button type="primary" onClick={() => {
+            copy(`${authConfig.serverUrl}/api/acs`);
+            Setting.showMessage("success", i18next.t("general:Copied to clipboard successfully"));
+          }}>
+            {i18next.t("general:Copy")}
+          </Button>
+        </Col>
+      </Row>
+    </React.Fragment>
+  );
+}

web/src/provider/SmsProviderFields.js

@@ -0,0 +1,171 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Button, Col, Input, Row, Select, Switch} from "antd";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import * as ProviderEditTestSms from "../common/TestSmsWidget";
+import {CountryCodeSelect} from "../common/select/CountryCodeSelect";
+import HttpHeaderTable from "../table/HttpHeaderTable";
+
+const {Option} = Select;
+
+const SMS_PROVIDERS_WITHOUT_SIGN_NAME = ["Custom HTTP SMS", "Twilio SMS", "Amazon SNS", "Msg91 SMS", "Infobip SMS"];
+const SMS_PROVIDERS_WITHOUT_TEMPLATE_CODE = ["Infobip SMS", "Custom HTTP SMS"];
+
+export function renderSmsProviderFields(provider, updateProviderField, renderSmsMappingInput, account) {
+  return (
+    <React.Fragment>
+      {SMS_PROVIDERS_WITHOUT_SIGN_NAME.includes(provider.type) ?
+        null :
+        (<Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Sign Name"), i18next.t("provider:Sign Name - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={provider.signName} onChange={e => {
+              updateProviderField("signName", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        )
+      }
+      {SMS_PROVIDERS_WITHOUT_TEMPLATE_CODE.includes(provider.type) ?
+        null :
+        (<Row style={{marginTop: "20px"}} >
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+            {Setting.getLabel(i18next.t("provider:Template code"), i18next.t("provider:Template code - Tooltip"))} :
+          </Col>
+          <Col span={22} >
+            <Input value={provider.templateCode} onChange={e => {
+              updateProviderField("templateCode", e.target.value);
+            }} />
+          </Col>
+        </Row>
+        )
+      }
+      {
+        provider.type === "Custom HTTP SMS" ? (
+          <React.Fragment>
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("general:Method"), i18next.t("provider:Method - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Select virtual={false} style={{width: "100%"}} value={provider.method} onChange={value => {
+                  updateProviderField("method", value);
+                }}>
+                  {
+                    [
+                      {id: "GET", name: "GET"},
+                      {id: "POST", name: "POST"},
+                      {id: "PUT", name: "PUT"},
+                      {id: "DELETE", name: "DELETE"},
+                    ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+                  }
+                </Select>
+              </Col>
+            </Row>
+            {
+              provider.method !== "GET" ? (<Row style={{marginTop: "20px"}} >
+                <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                  {Setting.getLabel(i18next.t("webhook:Content type"), i18next.t("webhook:Content type - Tooltip"))} :
+                </Col>
+                <Col span={22} >
+                  <Select virtual={false} style={{width: "100%"}} value={provider.issuerUrl === "" ? "application/x-www-form-urlencoded" : provider.issuerUrl} onChange={value => {
+                    updateProviderField("issuerUrl", value);
+                  }}>
+                    {
+                      [
+                        {id: "application/json", name: "application/json"},
+                        {id: "application/x-www-form-urlencoded", name: "application/x-www-form-urlencoded"},
+                      ].map((method, index) => <Option key={index} value={method.id}>{method.name}</Option>)
+                    }
+                  </Select>
+                </Col>
+              </Row>) : null
+            }
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:HTTP header"), i18next.t("provider:HTTP header - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <HttpHeaderTable httpHeaders={provider.httpHeaders} onUpdateTable={(value) => {updateProviderField("httpHeaders", value);}} />
+              </Col>
+            </Row>
+            {provider.method !== "GET" ? <Row style={{marginTop: "20px"}}>
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:HTTP body mapping"), i18next.t("provider:HTTP body mapping - Tooltip"))} :
+              </Col>
+              <Col span={22}>
+                {renderSmsMappingInput()}
+              </Col>
+            </Row> : null}
+            <Row style={{marginTop: "20px"}} >
+              <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+                {Setting.getLabel(i18next.t("provider:Parameter"), i18next.t("provider:Parameter - Tooltip"))} :
+              </Col>
+              <Col span={22} >
+                <Input value={provider.title} onChange={e => {
+                  updateProviderField("title", e.target.value);
+                }} />
+              </Col>
+            </Row>
+          </React.Fragment>
+        ) : null
+      }
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Enable proxy"), i18next.t("provider:Enable proxy - Tooltip"))} :
+        </Col>
+        <Col span={1} >
+          <Switch checked={provider.enableProxy} onChange={checked => {
+            updateProviderField("enableProxy", checked);
+          }} />
+        </Col>
+      </Row>
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:SMS Test"), i18next.t("provider:SMS Test - Tooltip"))} :
+        </Col>
+        <Col span={4} >
+          <Input.Group compact>
+            <CountryCodeSelect
+              style={{width: "90px"}}
+              initValue={provider.content}
+              onChange={(value) => {
+                updateProviderField("content", value);
+              }}
+              countryCodes={account.organization.countryCodes}
+            />
+            <Input value={provider.receiver}
+              style={{width: "150px"}}
+              placeholder = {i18next.t("user:Input your phone number")}
+              onChange={e => {
+                updateProviderField("receiver", e.target.value);
+              }} />
+          </Input.Group>
+        </Col>
+        <Col span={2} >
+          <Button style={{marginLeft: "10px", marginBottom: "5px"}} type="primary"
+            disabled={!Setting.isValidPhone(provider.receiver) || (provider.type === "Custom HTTP SMS" && provider.endpoint === "")}
+            onClick={() => ProviderEditTestSms.sendTestSms(provider, "+" + Setting.getCountryCode(provider.content) + provider.receiver)} >
+            {i18next.t("provider:Send Testing SMS")}
+          </Button>
+        </Col>
+      </Row>
+    </React.Fragment>
+  );
+}

web/src/provider/StorageProviderFields.js

@@ -0,0 +1,36 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Col, Input, Row} from "antd";
+import {LinkOutlined} from "@ant-design/icons";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+
+export function renderStorageProviderFields(provider, updateProviderField) {
+  return (
+    (provider.type === "GC" || provider.type === "FastSpring") ? (
+      <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={provider.host} onChange={e => {
+            updateProviderField("host", e.target.value);
+          }} />
+        </Col>
+      </Row>
+    ) : null
+  );
+}

web/src/provider/Web3ProviderFields.js

@@ -0,0 +1,48 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from "react";
+import {Checkbox, Col, Row} from "antd";
+import * as Setting from "../Setting";
+import i18next from "i18next";
+import * as Web3Auth from "../auth/Web3Auth";
+
+export function renderWeb3ProviderFields(provider, updateProviderField) {
+  const getWalletValue = () => {
+    try {
+      return JSON.parse(provider.metadata);
+    } catch {
+      return ["injected"];
+    }
+  };
+
+  return (
+    provider.type === "Web3Onboard" ? (
+      <Row style={{marginTop: "20px"}} >
+        <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 22 : 2}>
+          {Setting.getLabel(i18next.t("provider:Wallets"), i18next.t("provider:Wallets - Tooltip"))} :
+        </Col>
+        <Col span={22}>
+          <Checkbox.Group
+            options={Web3Auth.getWeb3OnboardWalletsOptions()}
+            value={getWalletValue()}
+            onChange={options => {
+              updateProviderField("metadata", JSON.stringify(options));
+            }}
+          />
+        </Col>
+      </Row>
+    ) : null
+  );
+}