feat: support enableErrorMask2 config

* feat: add custom signup field

* feat: support more field in signup page

* feat: support more field in signup page

* feat: support more field in signup page

* feat: Reduce code duplication in form item rendering

* feat: Simplify gender and info checks using includes

* feat: update translate

* Revert "feat: update translate"

This reverts commit 669334c716.

* feat: address feedback from hsluoyz

README.md

@@ -13,7 +13,7 @@
   <a href="https://github.com/casdoor/casdoor/releases/latest">
     <img alt="GitHub Release" src="https://img.shields.io/github/v/release/casdoor/casdoor.svg">
   </a>
-  <a href="https://hub.docker.com/repository/docker/casbin/casdoor">
+  <a href="https://hub.docker.com/r/casbin/casdoor">
     <img alt="Docker Image Version (latest semver)" src="https://img.shields.io/badge/Docker%20Hub-latest-brightgreen">
   </a>
 </p>

controllers/account.go

@@ -200,6 +200,10 @@ func (c *ApiController) Signup() {
 		Type:              userType,
 		Password:          authForm.Password,
 		DisplayName:       authForm.Name,
+		Gender:            authForm.Gender,
+		Bio:               authForm.Bio,
+		Tag:               authForm.Tag,
+		Education:         authForm.Education,
 		Avatar:            organization.DefaultAvatar,
 		Email:             authForm.Email,
 		Phone:             authForm.Phone,

controllers/organization.go

@@ -65,7 +65,7 @@ func (c *ApiController) GetOrganizations() {
 			c.ResponseOk(organizations)
 		} else {
 			limit := util.ParseInt(limit)
-			count, err := object.GetOrganizationCount(owner, field, value)
+			count, err := object.GetOrganizationCount(owner, organizationName, field, value)
 			if err != nil {
 				c.ResponseError(err.Error())
 				return
@@ -138,7 +138,7 @@ func (c *ApiController) AddOrganization() {
 		return
 	}
 
-	count, err := object.GetOrganizationCount("", "", "")
+	count, err := object.GetOrganizationCount("", "", "", "")
 	if err != nil {
 		c.ResponseError(err.Error())
 		return

controllers/user.go

@@ -410,6 +410,12 @@ func (c *ApiController) GetEmailAndPhone() {
 	organization := c.Ctx.Request.Form.Get("organization")
 	username := c.Ctx.Request.Form.Get("username")
 
+	enableErrorMask2 := conf.GetConfigBool("enableErrorMask2")
+	if enableErrorMask2 {
+		c.ResponseError("Error")
+		return
+	}
+
 	user, err := object.GetUserByFields(organization, username)
 	if err != nil {
 		c.ResponseError(err.Error())

controllers/util.go

@@ -45,6 +45,15 @@ func (c *ApiController) ResponseOk(data ...interface{}) {
 
 // ResponseError ...
 func (c *ApiController) ResponseError(error string, data ...interface{}) {
+	enableErrorMask2 := conf.GetConfigBool("enableErrorMask2")
+	if enableErrorMask2 {
+		error = c.T("subscription:Error")
+
+		resp := &Response{Status: "error", Msg: error}
+		c.ResponseJsonData(resp, data...)
+		return
+	}
+
 	enableErrorMask := conf.GetConfigBool("enableErrorMask")
 	if enableErrorMask {
 		if strings.HasPrefix(error, "The user: ") && strings.HasSuffix(error, " doesn't exist") || strings.HasPrefix(error, "用户: ") && strings.HasSuffix(error, "不存在") {

form/auth.go

@@ -26,6 +26,10 @@ type AuthForm struct {
 	Name           string `json:"name"`
 	FirstName      string `json:"firstName"`
 	LastName       string `json:"lastName"`
+	Gender         string `json:"gender"`
+	Bio            string `json:"bio"`
+	Tag            string `json:"tag"`
+	Education      string `json:"education"`
 	Email          string `json:"email"`
 	Phone          string `json:"phone"`
 	Affiliation    string `json:"affiliation"`

main.go

@@ -71,6 +71,7 @@ func main() {
 		beego.BConfig.WebConfig.Session.SessionProviderConfig = conf.GetConfigString("redisEndpoint")
 	}
 	beego.BConfig.WebConfig.Session.SessionCookieLifeTime = 3600 * 24 * 30
+	beego.BConfig.WebConfig.Session.SessionGCMaxLifetime = 3600 * 24 * 30
 	// beego.BConfig.WebConfig.Session.SessionCookieSameSite = http.SameSiteNoneMode
 
 	err := logs.SetLogger(logs.AdapterFile, conf.GetConfigString("logConfig"))

object/application.go

@@ -31,15 +31,17 @@ type SigninMethod struct {
 }
 
 type SignupItem struct {
-	Name        string `json:"name"`
-	Visible     bool   `json:"visible"`
-	Required    bool   `json:"required"`
-	Prompted    bool   `json:"prompted"`
-	CustomCss   string `json:"customCss"`
-	Label       string `json:"label"`
-	Placeholder string `json:"placeholder"`
-	Regex       string `json:"regex"`
-	Rule        string `json:"rule"`
+	Name        string   `json:"name"`
+	Visible     bool     `json:"visible"`
+	Required    bool     `json:"required"`
+	Prompted    bool     `json:"prompted"`
+	Type        string   `json:"type"`
+	CustomCss   string   `json:"customCss"`
+	Label       string   `json:"label"`
+	Placeholder string   `json:"placeholder"`
+	Options     []string `json:"options"`
+	Regex       string   `json:"regex"`
+	Rule        string   `json:"rule"`
 }
 
 type SigninItem struct {
@@ -78,13 +80,14 @@ type Application struct {
 	EnableSamlCompress    bool            `json:"enableSamlCompress"`
 	EnableSamlC14n10      bool            `json:"enableSamlC14n10"`
 	EnableSamlPostBinding bool            `json:"enableSamlPostBinding"`
+	UseEmailAsSamlNameId  bool            `json:"useEmailAsSamlNameId"`
 	EnableWebAuthn        bool            `json:"enableWebAuthn"`
 	EnableLinkWithEmail   bool            `json:"enableLinkWithEmail"`
 	OrgChoiceMode         string          `json:"orgChoiceMode"`
 	SamlReplyUrl          string          `xorm:"varchar(100)" json:"samlReplyUrl"`
 	Providers             []*ProviderItem `xorm:"mediumtext" json:"providers"`
 	SigninMethods         []*SigninMethod `xorm:"varchar(2000)" json:"signinMethods"`
-	SignupItems           []*SignupItem   `xorm:"varchar(2000)" json:"signupItems"`
+	SignupItems           []*SignupItem   `xorm:"varchar(3000)" json:"signupItems"`
 	SigninItems           []*SigninItem   `xorm:"mediumtext" json:"signinItems"`
 	GrantTypes            []string        `xorm:"varchar(1000)" json:"grantTypes"`
 	OrganizationObj       *Organization   `xorm:"-" json:"organizationObj"`

object/organization.go

@@ -79,9 +79,9 @@ type Organization struct {
 	AccountItems []*AccountItem `xorm:"varchar(5000)" json:"accountItems"`
 }
 
-func GetOrganizationCount(owner, field, value string) (int64, error) {
+func GetOrganizationCount(owner, name, field, value string) (int64, error) {
 	session := GetSession(owner, -1, -1, field, value, "", "")
-	return session.Count(&Organization{})
+	return session.Count(&Organization{Name: name})
 }
 
 func GetOrganizations(owner string, name ...string) ([]*Organization, error) {

object/saml_idp.go

@@ -65,7 +65,11 @@ func NewSamlResponse(application *Application, user *User, host string, certific
 	assertion.CreateAttr("IssueInstant", now)
 	assertion.CreateElement("saml:Issuer").SetText(host)
 	subject := assertion.CreateElement("saml:Subject")
-	subject.CreateElement("saml:NameID").SetText(user.Name)
+	nameIDValue := user.Name
+	if application.UseEmailAsSamlNameId {
+		nameIDValue = user.Email
+	}
+	subject.CreateElement("saml:NameID").SetText(nameIDValue)
 	subjectConfirmation := subject.CreateElement("saml:SubjectConfirmation")
 	subjectConfirmation.CreateAttr("Method", "urn:oasis:names:tc:SAML:2.0:cm:bearer")
 	subjectConfirmationData := subjectConfirmation.CreateElement("saml:SubjectConfirmationData")
@@ -184,17 +188,17 @@ type NameIDFormat struct {
 }
 
 type SingleSignOnService struct {
-	XMLName  xml.Name
+	// XMLName  xml.Name
 	Binding  string `xml:"Binding,attr"`
 	Location string `xml:"Location,attr"`
 }
 
 type Attribute struct {
 	// XMLName      xml.Name
+	Xmlns        string   `xml:"xmlns,attr"`
 	Name         string   `xml:"Name,attr"`
 	NameFormat   string   `xml:"NameFormat,attr"`
 	FriendlyName string   `xml:"FriendlyName,attr"`
-	Xmlns        string   `xml:"xmlns,attr"`
 	Values       []string `xml:"AttributeValue"`
 }
 
@@ -386,7 +390,7 @@ func GetSamlResponse(application *Application, user *User, samlRequest string, h
 }
 
 // NewSamlResponse11 return a saml1.1 response(not 2.0)
-func NewSamlResponse11(user *User, requestID string, host string) (*etree.Element, error) {
+func NewSamlResponse11(application *Application, user *User, requestID string, host string) (*etree.Element, error) {
 	samlResponse := &etree.Element{
 		Space: "samlp",
 		Tag:   "Response",
@@ -430,7 +434,11 @@ func NewSamlResponse11(user *User, requestID string, host string) (*etree.Elemen
 	// nameIdentifier inside subject
 	nameIdentifier := subject.CreateElement("saml:NameIdentifier")
 	// nameIdentifier.CreateAttr("Format", "urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress")
-	nameIdentifier.SetText(user.Name)
+	if application.UseEmailAsSamlNameId {
+		nameIdentifier.SetText(user.Email)
+	} else {
+		nameIdentifier.SetText(user.Name)
+	}
 
 	// subjectConfirmation inside subject
 	subjectConfirmation := subject.CreateElement("saml:SubjectConfirmation")
@@ -439,7 +447,11 @@ func NewSamlResponse11(user *User, requestID string, host string) (*etree.Elemen
 	attributeStatement := assertion.CreateElement("saml:AttributeStatement")
 	subjectInAttribute := attributeStatement.CreateElement("saml:Subject")
 	nameIdentifierInAttribute := subjectInAttribute.CreateElement("saml:NameIdentifier")
-	nameIdentifierInAttribute.SetText(user.Name)
+	if application.UseEmailAsSamlNameId {
+		nameIdentifierInAttribute.SetText(user.Email)
+	} else {
+		nameIdentifierInAttribute.SetText(user.Name)
+	}
 
 	subjectConfirmationInAttribute := subjectInAttribute.CreateElement("saml:SubjectConfirmation")
 	subjectConfirmationInAttribute.CreateElement("saml:ConfirmationMethod").SetText("urn:oasis:names:tc:SAML:1.0:cm:artifact")

object/token_cas.go

@@ -281,7 +281,7 @@ func GetValidationBySaml(samlRequest string, host string) (string, string, error
 		return "", "", fmt.Errorf("the application for user %s is not found", userId)
 	}
 
-	samlResponse, err := NewSamlResponse11(user, request.RequestID, host)
+	samlResponse, err := NewSamlResponse11(application, user, request.RequestID, host)
 	if err != nil {
 		return "", "", err
 	}

routers/static_filter.go

@@ -43,6 +43,10 @@ func getWebBuildFolder() string {
 		return path
 	}
 
+	if util.FileExist(filepath.Join(frontendBaseDir, "index.html")) {
+		return frontendBaseDir
+	}
+
 	path = filepath.Join(frontendBaseDir, "web/build")
 	return path
 }

web/src/ApplicationEditPage.js

@@ -703,6 +703,16 @@ class ApplicationEditPage extends React.Component {
             }} />
           </Col>
         </Row>
+        <Row style={{marginTop: "20px"}}>
+          <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
+            {Setting.getLabel(i18next.t("application:Use Email as NameID"), i18next.t("application:Use Email as NameID - Tooltip"))} :
+          </Col>
+          <Col span={1}>
+            <Switch checked={this.state.application.useEmailAsSamlNameId} onChange={checked => {
+              this.updateApplicationField("useEmailAsSamlNameId", checked);
+            }} />
+          </Col>
+        </Row>
         <Row style={{marginTop: "20px"}} >
           <Col style={{marginTop: "5px"}} span={(Setting.isMobile()) ? 19 : 2}>
             {Setting.getLabel(i18next.t("application:Enable SAML POST binding"), i18next.t("application:Enable SAML POST binding - Tooltip"))} :

web/src/CasbinEditor.js

@@ -0,0 +1,97 @@
+// Copyright 2024 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, {useCallback, useEffect, useRef, useState} from "react";
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/properties/properties";
+import * as Setting from "./Setting";
+import IframeEditor from "./IframeEditor";
+import {Tabs} from "antd";
+
+const {TabPane} = Tabs;
+
+const CasbinEditor = ({model, onModelTextChange}) => {
+  const [activeKey, setActiveKey] = useState("advanced");
+  const iframeRef = useRef(null);
+  const [localModelText, setLocalModelText] = useState(model.modelText);
+
+  const handleModelTextChange = useCallback((newModelText) => {
+    if (!Setting.builtInObject(model)) {
+      setLocalModelText(newModelText);
+      onModelTextChange(newModelText);
+    }
+  }, [model, onModelTextChange]);
+
+  const syncModelText = useCallback(() => {
+    return new Promise((resolve) => {
+      if (activeKey === "advanced" && iframeRef.current) {
+        const handleSyncMessage = (event) => {
+          if (event.data.type === "modelUpdate") {
+            window.removeEventListener("message", handleSyncMessage);
+            handleModelTextChange(event.data.modelText);
+            resolve();
+          }
+        };
+        window.addEventListener("message", handleSyncMessage);
+        iframeRef.current.getModelText();
+      } else {
+        resolve();
+      }
+    });
+  }, [activeKey, handleModelTextChange]);
+
+  const handleTabChange = (key) => {
+    syncModelText().then(() => {
+      setActiveKey(key);
+      if (key === "advanced" && iframeRef.current) {
+        iframeRef.current.updateModelText(localModelText);
+      }
+    });
+  };
+
+  useEffect(() => {
+    setLocalModelText(model.modelText);
+  }, [model.modelText]);
+
+  return (
+    <div style={{height: "100%", width: "100%", display: "flex", flexDirection: "column"}}>
+      <Tabs activeKey={activeKey} onChange={handleTabChange} style={{flex: "0 0 auto", marginTop: "-10px"}}>
+        <TabPane tab="Basic Editor" key="basic" />
+        <TabPane tab="Advanced Editor" key="advanced" />
+      </Tabs>
+      <div style={{flex: "1 1 auto", overflow: "hidden"}}>
+        {activeKey === "advanced" ? (
+          <IframeEditor
+            ref={iframeRef}
+            initialModelText={localModelText}
+            onModelTextChange={handleModelTextChange}
+            style={{width: "100%", height: "100%"}}
+          />
+        ) : (
+          <CodeMirror
+            value={localModelText}
+            className="full-height-editor no-horizontal-scroll-editor"
+            options={{mode: "properties", theme: "default"}}
+            onBeforeChange={(editor, data, value) => {
+              handleModelTextChange(value);
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CasbinEditor;

web/src/IframeEditor.js

@@ -0,0 +1,66 @@
+// Copyright 2024 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, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
+
+const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) => {
+  const iframeRef = useRef(null);
+  const [iframeReady, setIframeReady] = useState(false);
+
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.origin !== "https://editor.casbin.org") {return;}
+
+      if (event.data.type === "modelUpdate") {
+        onModelTextChange(event.data.modelText);
+      } else if (event.data.type === "iframeReady") {
+        setIframeReady(true);
+        iframeRef.current?.contentWindow.postMessage({
+          type: "initializeModel",
+          modelText: initialModelText,
+        }, "*");
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onModelTextChange, initialModelText]);
+
+  useImperativeHandle(ref, () => ({
+    getModelText: () => {
+      iframeRef.current?.contentWindow.postMessage({type: "getModelText"}, "*");
+    },
+    updateModelText: (newModelText) => {
+      if (iframeReady) {
+        iframeRef.current?.contentWindow.postMessage({
+          type: "updateModelText",
+          modelText: newModelText,
+        }, "*");
+      }
+    },
+  }));
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src="https://editor.casbin.org/model-editor"
+      frameBorder="0"
+      width="100%"
+      height="500px"
+      title="Casbin Model Editor"
+    />
+  );
+});
+
+export default IframeEditor;

web/src/ModelEditPage.js

@@ -18,11 +18,7 @@ import * as ModelBackend from "./backend/ModelBackend";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
 import * as Setting from "./Setting";
 import i18next from "i18next";
-
-import {Controlled as CodeMirror} from "react-codemirror2";
-import "codemirror/lib/codemirror.css";
-
-require("codemirror/mode/properties/properties");
+import ModelEditor from "./CasbinEditor";
 
 const {Option} = Select;
 
@@ -147,16 +143,10 @@ class ModelEditPage extends React.Component {
             {Setting.getLabel(i18next.t("model:Model text"), i18next.t("model:Model text - Tooltip"))} :
           </Col>
           <Col span={22}>
-            <div style={{width: "100%"}} >
-              <CodeMirror
-                value={this.state.model.modelText}
-                options={{mode: "properties", theme: "default"}}
-                onBeforeChange={(editor, data, value) => {
-                  if (Setting.builtInObject(this.state.model)) {
-                    return;
-                  }
-                  this.updateModelField("modelText", value);
-                }}
+            <div style={{position: "relative", height: "500px"}} >
+              <ModelEditor
+                model={this.state.model}
+                onModelTextChange={(value) => this.updateModelField("modelText", value)}
               />
             </div>
           </Col>

web/src/UserEditPage.js

@@ -1050,12 +1050,7 @@ class UserEditPage extends React.Component {
             <MfaAccountTable
               title={i18next.t("user:MFA accounts")}
               table={this.state.user.mfaAccounts}
-              qrUrl={
-                "casdoor-app://login/into?serverUrl=" + window.location.origin +
-                "&clientId=" + this.state.application.clientId +
-                "&organizationName=" + this.state.organizationName +
-                "&appName=" + this.state.user.signupApplication
-              }
+              accessToken={this.props.account?.accessToken}
               icon={this.state.user.avatar}
               onUpdateTable={(table) => {this.updateUserField("mfaAccounts", table);}}
             />

web/src/auth/LoginPage.js

@@ -938,7 +938,7 @@ class LoginPage extends React.Component {
             signinItem.label ? Setting.renderSignupLink(application, signinItem.label) :
               (
                 <React.Fragment>
-                  {i18next.t("login:No account?")}
+                  {i18next.t("login:No account?")}&nbsp;
                   {
                     Setting.renderSignupLink(application, i18next.t("login:sign up now"))
                   }

web/src/auth/SignupPage.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from "react";
-import {Button, Form, Input, Radio, Result, Row, message} from "antd";
+import {Button, Form, Input, Radio, Result, Row, Select, message} from "antd";
 import * as Setting from "../Setting";
 import * as AuthBackend from "./AuthBackend";
 import * as ProviderButton from "./ProviderButton";
@@ -50,6 +50,38 @@ const formItemLayout = {
   },
 };
 
+const renderFormItem = (signupItem) => {
+  const commonProps = {
+    name: signupItem.name.toLowerCase(),
+    label: signupItem.label || signupItem.name,
+    rules: [
+      {
+        required: signupItem.required,
+        message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
+      },
+    ],
+  };
+
+  if (!signupItem.type || signupItem.type === "Input") {
+    return (
+      <Form.Item {...commonProps}>
+        <Input placeholder={signupItem.placeholder} />
+      </Form.Item>
+    );
+  } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+    return (
+      <Form.Item {...commonProps}>
+        <Select
+          mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+          placeholder={signupItem.placeholder}
+          showSearch={false}
+          options={signupItem.options.map(option => ({label: option, value: option}))}
+        />
+      </Form.Item>
+    );
+  }
+};
+
 export const tailFormItemLayout = {
   wrapperCol: {
     xs: {
@@ -198,6 +230,22 @@ class SignupPage extends React.Component {
   onFinish(values) {
     const application = this.getApplicationObj();
 
+    if (Array.isArray(values.gender)) {
+      values.gender = values.gender.join(", ");
+    }
+
+    if (Array.isArray(values.bio)) {
+      values.bio = values.bio.join(", ");
+    }
+
+    if (Array.isArray(values.tag)) {
+      values.tag = values.tag.join(", ");
+    }
+
+    if (Array.isArray(values.education)) {
+      values.education = values.education.join(", ");
+    }
+
     const params = new URLSearchParams(window.location.search);
     values.plan = params.get("plan");
     values.pricing = params.get("pricing");
@@ -238,6 +286,7 @@ class SignupPage extends React.Component {
   }
 
   renderFormItem(application, signupItem) {
+    const validItems = ["Gender", "Bio", "Tag", "Education"];
     if (!signupItem.visible) {
       return null;
     }
@@ -366,7 +415,9 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <RegionSelect className="signup-region-select" onChange={(value) => {this.setState({region: value});}} />
+          <RegionSelect className="signup-region-select" onChange={(value) => {
+            this.setState({region: value});
+          }} />
         </Form.Item>
       );
     } else if (signupItem.name === "Email" || signupItem.name === "Phone" || signupItem.name === "Email or Phone" || signupItem.name === "Phone or Email") {
@@ -669,8 +720,9 @@ class SignupPage extends React.Component {
             </span>
           );
         })
-
       );
+    } else if (validItems.includes(signupItem.name)) {
+      return renderFormItem(signupItem);
     }
   }
 

web/src/index.css

@@ -51,3 +51,19 @@ code {
 .custom-link:hover {
   color: rgb(64 64 64) !important;
 }
+
+.full-height-editor {
+  height: 100%;
+}
+
+.full-height-editor [class*="CodeMirror"] {
+  height: 100%;
+}
+
+.no-horizontal-scroll-editor [class*="CodeMirror-hscrollbar"] {
+  display: none !important;
+}
+
+.no-horizontal-scroll-editor [class*="CodeMirror-scroll"] {
+  overflow-x: hidden !important;
+}

web/src/table/MfaAccountTable.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
-import {Button, Col, Image, Input, Popover, QRCode, Row, Table, Tooltip} from "antd";
+import {Alert, Button, Col, Image, Input, Popover, QRCode, Row, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import i18next from "i18next";
 
@@ -23,7 +23,6 @@ class MfaAccountTable extends React.Component {
     super(props);
     this.state = {
       classes: props,
-      qrUrl: this.props.qrUrl,
       icon: this.props.icon,
       mfaAccounts: this.props.table !== null ? this.props.table.map((item, index) => {
         item.key = index;
@@ -77,6 +76,42 @@ class MfaAccountTable extends React.Component {
     this.updateTable(table);
   }
 
+  getQrUrl() {
+    const {accessToken} = this.props;
+    let qrUrl = `casdoor-app://login?serverUrl=${window.location.origin}&accessToken=${accessToken}`;
+    let error = null;
+
+    if (!accessToken) {
+      qrUrl = "";
+      error = i18next.t("general:Access token is empty");
+    }
+
+    if (qrUrl.length >= 2000) {
+      qrUrl = "";
+      error = i18next.t("general:QR code is too large");
+    }
+
+    return {qrUrl, error};
+  }
+
+  renderQrCode() {
+    const {qrUrl, error} = this.getQrUrl();
+
+    if (error) {
+      return <Alert message={error} type="error" showIcon />;
+    } else {
+      return (
+        <QRCode
+          value={qrUrl}
+          icon={this.state.icon}
+          errorLevel="M"
+          size={230}
+          bordered={false}
+        />
+      );
+    }
+  }
+
   renderTable(table) {
     const columns = [
       {
@@ -159,14 +194,9 @@ class MfaAccountTable extends React.Component {
         title={() => (
           <div>
             {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
-            <Button style={{marginRight: "5px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
-            <Popover trigger="focus" content={
-              <QRCode
-                value={this.state.qrUrl}
-                icon={this.state.icon}
-                bordered={false}
-              />
-            }>
+            <Button style={{marginRight: "10px"}} type="primary" size="small" onClick={() => this.addRow(table)}>{i18next.t("general:Add")}</Button>
+            <Popover trigger="focus" overlayInnerStyle={{padding: 0}}
+              content={this.renderQrCode()}>
               <Button style={{marginLeft: "5px"}} type="primary" size="small">{i18next.t("general:QR Code")}</Button>
             </Popover>
           </div>

web/src/table/SignupTable.js

@@ -65,7 +65,7 @@ class SignupTable extends React.Component {
   }
 
   addRow(table) {
-    const row = {name: Setting.getNewRowNameForTable(table, "Please select a signup item"), visible: true, required: true, rule: "None", customCss: ""};
+    const row = {name: Setting.getNewRowNameForTable(table, "Please select a signup item"), visible: true, required: true, options: [], rule: "None", customCss: ""};
     if (table === undefined) {
       table = [];
     }
@@ -100,6 +100,10 @@ class SignupTable extends React.Component {
             {name: "ID", displayName: i18next.t("general:ID")},
             {name: "Display name", displayName: i18next.t("general:Display name")},
             {name: "Affiliation", displayName: i18next.t("user:Affiliation")},
+            {name: "Gender", displayName: i18next.t("user:Gender")},
+            {name: "Bio", displayName: i18next.t("user:Bio")},
+            {name: "Tag", displayName: i18next.t("user:Tag")},
+            {name: "Education", displayName: i18next.t("user:Education")},
             {name: "Country/Region", displayName: i18next.t("user:Country/Region")},
             {name: "ID card", displayName: i18next.t("user:ID card")},
             {name: "Password", displayName: i18next.t("general:Password")},
@@ -201,6 +205,25 @@ class SignupTable extends React.Component {
           );
         },
       },
+      {
+        title: i18next.t("provider:Type"),
+        dataIndex: "type",
+        key: "type",
+        width: "160px",
+        render: (text, record, index) => {
+          const options = [
+            {id: "Input", name: i18next.t("application:Input")},
+            {id: "Single Choice", name: i18next.t("application:Single Choice")},
+            {id: "Multiple Choices", name: i18next.t("application:Multiple Choices")},
+          ];
+
+          return (
+            <Select virtual={false} style={{width: "100%"}} value={text} onChange={(value => {
+              this.updateField(table, index, "type", value);
+            })} options={options.map(item => Setting.getOption(item.name, item.id))} />
+          );
+        },
+      },
       {
         title: i18next.t("signup:Label"),
         dataIndex: "label",
@@ -261,7 +284,7 @@ class SignupTable extends React.Component {
         title: i18next.t("signup:Placeholder"),
         dataIndex: "placeholder",
         key: "placeholder",
-        width: "200px",
+        width: "110px",
         render: (text, record, index) => {
           if (record.name.startsWith("Text ")) {
             return null;
@@ -274,6 +297,26 @@ class SignupTable extends React.Component {
           );
         },
       },
+      {
+        title: i18next.t("signup:Options"),
+        dataIndex: "options",
+        key: "options",
+        width: "180px",
+        render: (text, record, index) => {
+          if (record.type !== "Single Choice" && record.type !== "Multiple Choices") {
+            return null;
+          }
+
+          return (
+            <Select virtual={false} mode="tags" style={{width: "100%"}} value={text}
+              onChange={(value => {
+                this.updateField(table, index, "options", value);
+              })}
+              options={text?.map((option) => Setting.getOption(option, option))}
+            />
+          );
+        },
+      },
       {
         title: i18next.t("signup:Regex"),
         dataIndex: "regex",