From 2456e55905e8be7eb3b4962bebd7e564c4f3d482 Mon Sep 17 00:00:00 2001
From: okatu-loli <CN_QianShi@hotmail.com>
Date: Tue, 24 Sep 2024 12:58:17 +0800
Subject: [PATCH] feat: add custom signup field

---
 object/application.go      |  2 +-
 web/src/auth/SignupPage.js | 42 ++++++++++++++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/object/application.go b/object/application.go
index 53037dfa..8915886d 100644
--- a/object/application.go
+++ b/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"`
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 8d6b3d8c..0ba675f7 100644
--- a/web/src/auth/SignupPage.js
+++ b/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";
@@ -624,9 +624,43 @@ class SignupPage extends React.Component {
     } else if (signupItem.name === "Agreement") {
       return AgreementModal.renderAgreementFormItem(application, required, tailFormItemLayout, this);
     } else if (signupItem.name.startsWith("Text ")) {
-      return (
-        <div dangerouslySetInnerHTML={{__html: signupItem.label}} />
-      );
+      if (signupItem.type) {
+        if (!signupItem.type || signupItem.type === "Input") {
+          return (
+            <Form.Item
+              name={signupItem.name.toLowerCase().replace(" ", "_")}
+              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().replace(" ", "_")}
+              label={signupItem.label ? signupItem.label : signupItem.name}
+              rules={[
+                {
+                  required: signupItem.required,
+                  message: i18next.t(`Please select your ${signupItem.label}!`),
+                },
+              ]}
+            >
+              <Select
+                mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+                placeholder={signupItem.placeholder}
+                options={signupItem.options.map(option => ({label: option, value: option}))}
+              />
+            </Form.Item>
+          );
+        }
+      }
     } else if (signupItem.name === "Signup button") {
       return (
         <Form.Item {...tailFormItemLayout}>