Add text to app's signup table

web/src/ApplicationEditPage.js

@@ -30,10 +30,10 @@ import ProviderTable from "./table/ProviderTable";
 import SignupTable from "./table/SignupTable";
 import PromptPage from "./auth/PromptPage";
 import copy from "copy-to-clipboard";
+import ThemeEditor from "./common/theme/ThemeEditor";
 
 import {Controlled as CodeMirror} from "react-codemirror2";
 import "codemirror/lib/codemirror.css";
-import ThemeEditor from "./common/theme/ThemeEditor";
 
 require("codemirror/theme/material-darker.css");
 require("codemirror/mode/htmlmixed/htmlmixed");

web/src/auth/SignupPage.js

@@ -529,6 +529,10 @@ 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}} />
+      );
     }
   }
 

web/src/table/SignupTable.js

@@ -14,10 +14,16 @@
 
 import React from "react";
 import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
-import {Button, Col, Input, Row, Select, Switch, Table, Tooltip} from "antd";
+import {Button, Col, Input, Popover, Row, Select, Switch, Table, Tooltip} from "antd";
 import * as Setting from "../Setting";
 import i18next from "i18next";
 
+import {Controlled as CodeMirror} from "react-codemirror2";
+import "codemirror/lib/codemirror.css";
+
+require("codemirror/theme/material-darker.css");
+require("codemirror/mode/htmlmixed/htmlmixed");
+
 const {Option} = Select;
 
 class SignupTable extends React.Component {
@@ -81,6 +87,11 @@ class SignupTable extends React.Component {
             {name: "Phone", displayName: i18next.t("general:Phone")},
             {name: "Invitation code", displayName: i18next.t("application:Invitation code")},
             {name: "Agreement", displayName: i18next.t("signup:Agreement")},
+            {name: "Text 1", displayName: i18next.t("signup:Text 1")},
+            {name: "Text 2", displayName: i18next.t("signup:Text 2")},
+            {name: "Text 3", displayName: i18next.t("signup:Text 3")},
+            {name: "Text 4", displayName: i18next.t("signup:Text 4")},
+            {name: "Text 5", displayName: i18next.t("signup:Text 5")},
           ];
 
           const getItemDisplayName = (text) => {
@@ -165,11 +176,30 @@ class SignupTable extends React.Component {
         },
       },
       {
-        title: i18next.t("provider:Label"),
+        title: i18next.t("signup:Label"),
         dataIndex: "label",
         key: "label",
-        width: "150px",
+        width: "200px",
         render: (text, record, index) => {
+          if (record.name.startsWith("Text ")) {
+            return (
+              <Popover placement="right" content={
+                <div style={{width: "900px", height: "300px"}} >
+                  <CodeMirror value={text}
+                    options={{mode: "htmlmixed", theme: "material-darker"}}
+                    onBeforeChange={(editor, data, value) => {
+                      this.updateField(table, index, "label", value);
+                    }}
+                  />
+                </div>
+              } title={i18next.t("signup:Label HTML")} trigger="click">
+                <Input value={text} style={{marginBottom: "10px"}} onChange={e => {
+                  this.updateField(table, index, "label", e.target.value);
+                }} />
+              </Popover>
+            );
+          }
+
           return (
             <Input value={text} onChange={e => {
               this.updateField(table, index, "label", e.target.value);
@@ -178,11 +208,15 @@ class SignupTable extends React.Component {
         },
       },
       {
-        title: i18next.t("provider:Placeholder"),
+        title: i18next.t("signup:Placeholder"),
         dataIndex: "placeholder",
         key: "placeholder",
-        width: "150px",
+        width: "200px",
         render: (text, record, index) => {
+          if (record.name.startsWith("Text ")) {
+            return null;
+          }
+
           return (
             <Input value={text} onChange={e => {
               this.updateField(table, index, "placeholder", e.target.value);