feat: support single-choice and multi-choices in signup page (#3234)

* 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

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,

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"`

object/application.go

@@ -87,7 +87,7 @@ type Application struct {
 	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"`

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/table/SignupTable.js

@@ -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")},