From d769dc5199fe1b62d947773039a017f18e3935d3 Mon Sep 17 00:00:00 2001
From: okatu-loli <CN_QianShi@hotmail.com>
Date: Tue, 24 Sep 2024 17:40:38 +0800
Subject: [PATCH] feat: support more field in signup page

---
 controllers/account.go       |   3 +
 form/auth.go                 |   3 +
 web/src/auth/SignupPage.js   | 171 +++++++++++++++++++++++++++++++++++
 web/src/table/SignupTable.js |   3 +
 4 files changed, 180 insertions(+)

diff --git a/controllers/account.go b/controllers/account.go
index bc648649..a0939b0c 100644
--- a/controllers/account.go
+++ b/controllers/account.go
@@ -201,6 +201,9 @@ func (c *ApiController) Signup() {
 		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,
diff --git a/form/auth.go b/form/auth.go
index 9f1a7f2c..ca704223 100644
--- a/form/auth.go
+++ b/form/auth.go
@@ -27,6 +27,9 @@ type AuthForm struct {
 	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"`
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 13f35917..17186e72 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -202,6 +202,18 @@ class SignupPage extends React.Component {
       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");
@@ -734,6 +746,165 @@ class SignupPage extends React.Component {
           </Form.Item>
         );
       }
+    } else if (signupItem.name === "Bio") {
+      if (!signupItem.type || signupItem === "") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      }
+      if (!signupItem.type || signupItem.type === "Input") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Select
+              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+              placeholder={signupItem.placeholder}
+              showSearch={false}
+              options={signupItem.options.map(option => ({label: option, value: option}))}
+            />
+          </Form.Item>
+        );
+      }
+    } else if (signupItem.name === "Tag") {
+      if (!signupItem.type) {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      }
+      if (!signupItem.type || signupItem.type === "Input") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Select
+              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+              placeholder={signupItem.placeholder}
+              showSearch={false}
+              options={signupItem.options.map(option => ({label: option, value: option}))}
+            />
+          </Form.Item>
+        );
+      }
+    } else if (signupItem.name === "Education") {
+      if (!signupItem.type) {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      }
+      if (!signupItem.type || signupItem.type === "Input") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`signup:Please input your ${signupItem.label}!`),
+              },
+            ]}
+          >
+            <Input placeholder={signupItem.placeholder} />
+          </Form.Item>
+        );
+      } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+        return (
+          <Form.Item
+            name={signupItem.name.toLowerCase()}
+            label={signupItem.label ? signupItem.label : signupItem.name}
+            rules={[
+              {
+                required: signupItem.required,
+                message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
+              },
+            ]}
+          >
+            <Select
+              mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+              placeholder={signupItem.placeholder}
+              showSearch={false}
+              options={signupItem.options.map(option => ({label: option, value: option}))}
+            />
+          </Form.Item>
+        );
+      }
     }
   }
 
diff --git a/web/src/table/SignupTable.js b/web/src/table/SignupTable.js
index 3c7ce99f..917b8c29 100644
--- a/web/src/table/SignupTable.js
+++ b/web/src/table/SignupTable.js
@@ -101,6 +101,9 @@ class SignupTable extends React.Component {
             {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")},