From f3d4b45a0faee4acb6196a12e17edf7870676c64 Mon Sep 17 00:00:00 2001
From: Yang Luo <hsluoyz@qq.com>
Date: Sun, 15 Oct 2023 17:24:38 +0800
Subject: [PATCH] Add label and placeholder to app's signup table

---
 object/application.go        | 14 ++++++-----
 web/src/auth/SignupPage.js   | 49 ++++++++++++++++++------------------
 web/src/table/SignupTable.js | 28 ++++++++++++++++++++-
 3 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/object/application.go b/object/application.go
index f27c4af9..8a349722 100644
--- a/object/application.go
+++ b/object/application.go
@@ -25,11 +25,13 @@ import (
 )
 
 type SignupItem struct {
-	Name     string `json:"name"`
-	Visible  bool   `json:"visible"`
-	Required bool   `json:"required"`
-	Prompted bool   `json:"prompted"`
-	Rule     string `json:"rule"`
+	Name        string `json:"name"`
+	Visible     bool   `json:"visible"`
+	Required    bool   `json:"required"`
+	Prompted    bool   `json:"prompted"`
+	Label       string `json:"label"`
+	Placeholder string `json:"placeholder"`
+	Rule        string `json:"rule"`
 }
 
 type Application struct {
@@ -54,7 +56,7 @@ type Application struct {
 	OrgChoiceMode       string          `json:"orgChoiceMode"`
 	SamlReplyUrl        string          `xorm:"varchar(100)" json:"samlReplyUrl"`
 	Providers           []*ProviderItem `xorm:"mediumtext" json:"providers"`
-	SignupItems         []*SignupItem   `xorm:"varchar(1000)" json:"signupItems"`
+	SignupItems         []*SignupItem   `xorm:"varchar(2000)" json:"signupItems"`
 	GrantTypes          []string        `xorm:"varchar(1000)" json:"grantTypes"`
 	OrganizationObj     *Organization   `xorm:"-" json:"organizationObj"`
 	CertPublicKey       string          `xorm:"-" json:"certPublicKey"`
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index b3bc3353..72a9d9e3 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -226,7 +226,7 @@ class SignupPage extends React.Component {
       return (
         <Form.Item
           name="username"
-          label={i18next.t("signup:Username")}
+          label={signupItem.label ? signupItem.label : i18next.t("signup:Username")}
           rules={[
             {
               required: required,
@@ -235,7 +235,7 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <Input />
+          <Input placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "Display name") {
@@ -244,7 +244,7 @@ class SignupPage extends React.Component {
           <React.Fragment>
             <Form.Item
               name="firstName"
-              label={i18next.t("general:First name")}
+              label={signupItem.label ? signupItem.label : i18next.t("general:First name")}
               rules={[
                 {
                   required: required,
@@ -253,11 +253,11 @@ class SignupPage extends React.Component {
                 },
               ]}
             >
-              <Input />
+              <Input placeholder={signupItem.placeholder} />
             </Form.Item>
             <Form.Item
               name="lastName"
-              label={i18next.t("general:Last name")}
+              label={signupItem.label ? signupItem.label : i18next.t("general:Last name")}
               rules={[
                 {
                   required: required,
@@ -266,7 +266,7 @@ class SignupPage extends React.Component {
                 },
               ]}
             >
-              <Input />
+              <Input placeholder={signupItem.placeholder} />
             </Form.Item>
           </React.Fragment>
         );
@@ -275,7 +275,7 @@ class SignupPage extends React.Component {
       return (
         <Form.Item
           name="name"
-          label={(signupItem.rule === "Real name" || signupItem.rule === "First, last") ? i18next.t("general:Real name") : i18next.t("general:Display name")}
+          label={(signupItem.label ? signupItem.label : (signupItem.rule === "Real name" || signupItem.rule === "First, last") ? i18next.t("general:Real name") : i18next.t("general:Display name"))}
           rules={[
             {
               required: required,
@@ -284,14 +284,14 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <Input />
+          <Input placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "Affiliation") {
       return (
         <Form.Item
           name="affiliation"
-          label={i18next.t("user:Affiliation")}
+          label={signupItem.label ? signupItem.label : i18next.t("user:Affiliation")}
           rules={[
             {
               required: required,
@@ -300,14 +300,14 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <Input />
+          <Input placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "ID card") {
       return (
         <Form.Item
           name="idCard"
-          label={i18next.t("user:ID card")}
+          label={signupItem.label ? signupItem.label : i18next.t("user:ID card")}
           rules={[
             {
               required: required,
@@ -321,14 +321,14 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <Input />
+          <Input placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "Country/Region") {
       return (
         <Form.Item
           name="country_region"
-          label={i18next.t("user:Country/Region")}
+          label={signupItem.label ? signupItem.label : i18next.t("user:Country/Region")}
           rules={[
             {
               required: required,
@@ -344,7 +344,7 @@ class SignupPage extends React.Component {
         <React.Fragment>
           <Form.Item
             name="email"
-            label={i18next.t("general:Email")}
+            label={signupItem.label ? signupItem.label : i18next.t("general:Email")}
             rules={[
               {
                 required: required,
@@ -363,13 +363,13 @@ class SignupPage extends React.Component {
               },
             ]}
           >
-            <Input onChange={e => this.setState({email: e.target.value})} />
+            <Input placeholder={signupItem.placeholder} onChange={e => this.setState({email: e.target.value})} />
           </Form.Item>
           {
             signupItem.rule !== "No verification" &&
             <Form.Item
               name="emailCode"
-              label={i18next.t("code:Email code")}
+              label={signupItem.label ? signupItem.label : i18next.t("code:Email code")}
               rules={[{
                 required: required,
                 message: i18next.t("code:Please input your verification code!"),
@@ -388,7 +388,7 @@ class SignupPage extends React.Component {
     } else if (signupItem.name === "Phone") {
       return (
         <React.Fragment>
-          <Form.Item label={i18next.t("general:Phone")} required={required}>
+          <Form.Item label={signupItem.label ? signupItem.label : i18next.t("general:Phone")} required={required}>
             <Input.Group compact>
               <Form.Item
                 name="countryCode"
@@ -432,6 +432,7 @@ class SignupPage extends React.Component {
                 ]}
               >
                 <Input
+                  placeholder={signupItem.placeholder}
                   style={{width: "65%"}}
                   onChange={e => this.setState({phone: e.target.value})}
                 />
@@ -442,7 +443,7 @@ class SignupPage extends React.Component {
             signupItem.rule !== "No verification" &&
             <Form.Item
               name="phoneCode"
-              label={i18next.t("code:Phone code")}
+              label={signupItem.label ? signupItem.label : i18next.t("code:Phone code")}
               rules={[
                 {
                   required: required,
@@ -465,7 +466,7 @@ class SignupPage extends React.Component {
       return (
         <Form.Item
           name="password"
-          label={i18next.t("general:Password")}
+          label={signupItem.label ? signupItem.label : i18next.t("general:Password")}
           rules={[
             {
               required: required,
@@ -482,14 +483,14 @@ class SignupPage extends React.Component {
           ]}
           hasFeedback
         >
-          <Input.Password />
+          <Input.Password placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "Confirm password") {
       return (
         <Form.Item
           name="confirm"
-          label={i18next.t("signup:Confirm")}
+          label={signupItem.label ? signupItem.label : i18next.t("signup:Confirm")}
           dependencies={["password"]}
           hasFeedback
           rules={[
@@ -508,14 +509,14 @@ class SignupPage extends React.Component {
             }),
           ]}
         >
-          <Input.Password />
+          <Input.Password placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "Invitation code") {
       return (
         <Form.Item
           name="invitationCode"
-          label={i18next.t("application:Invitation code")}
+          label={signupItem.label ? signupItem.label : i18next.t("application:Invitation code")}
           rules={[
             {
               required: required,
@@ -523,7 +524,7 @@ class SignupPage extends React.Component {
             },
           ]}
         >
-          <Input />
+          <Input placeholder={signupItem.placeholder} />
         </Form.Item>
       );
     } else if (signupItem.name === "Agreement") {
diff --git a/web/src/table/SignupTable.js b/web/src/table/SignupTable.js
index 5df9b5f5..6146be25 100644
--- a/web/src/table/SignupTable.js
+++ b/web/src/table/SignupTable.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
-import {Button, Col, Row, Select, Switch, Table, Tooltip} from "antd";
+import {Button, Col, Input, Row, Select, Switch, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import i18next from "i18next";
 
@@ -164,6 +164,32 @@ class SignupTable extends React.Component {
           );
         },
       },
+      {
+        title: i18next.t("provider:Label"),
+        dataIndex: "label",
+        key: "label",
+        width: "150px",
+        render: (text, record, index) => {
+          return (
+            <Input value={text} onChange={e => {
+              this.updateField(table, index, "label", e.target.value);
+            }} />
+          );
+        },
+      },
+      {
+        title: i18next.t("provider:Placeholder"),
+        dataIndex: "placeholder",
+        key: "placeholder",
+        width: "150px",
+        render: (text, record, index) => {
+          return (
+            <Input value={text} onChange={e => {
+              this.updateField(table, index, "placeholder", e.target.value);
+            }} />
+          );
+        },
+      },
       {
         title: i18next.t("application:Rule"),
         dataIndex: "rule",