Improve signup page.

web/src/ApplicationListPage.js

@@ -53,6 +53,16 @@ class ApplicationListPage extends React.Component {
       enablePassword: true,
       enableSignUp: true,
       providers: [],
+      signupItems: [
+        {name: "ID", visible: false, required: true, rule: "Random"},
+        {name: "Username", visible: true, required: true, rule: "None"},
+        {name: "Display name", visible: true, required: true, rule: "None"},
+        {name: "Password", visible: true, required: true, rule: "None"},
+        {name: "Confirm password", visible: true, required: true, rule: "None"},
+        {name: "Email", visible: true, required: true, rule: "None"},
+        {name: "Phone", visible: true, required: true, rule: "None"},
+        {name: "Agreement", visible: true, required: true, rule: "None"},
+      ],
       redirectUris: ["http://localhost:9000/callback"],
       expireInHours: 24 * 7,
     }

web/src/SignupTable.js

@@ -82,7 +82,7 @@ class SignupTable extends React.Component {
                   {id: 'Affiliation', name: 'Affiliation'},
                   {id: 'Email', name: 'Email'},
                   {id: 'Password', name: 'Password'},
-                  {id: 'Confirm', name: 'Confirm'},
+                  {id: 'Confirm password', name: 'Confirm password'},
                   {id: 'Phone', name: 'Phone'},
                   {id: 'Agreement', name: 'Agreement'},
                 ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
@@ -139,6 +139,7 @@ class SignupTable extends React.Component {
                   {id: 'None', name: 'None'},
                   {id: 'Random', name: 'Random'},
                   {id: 'Incremental', name: 'Incremental'},
+                  {id: 'Personal', name: 'Personal'},
                 ].map((item, index) => <Option key={index} value={item.id}>{item.name}</Option>)
               }
             </Select>

web/src/auth/SignupPage.js

@@ -131,6 +131,8 @@ class SignupPage extends React.Component {
       return null;
     }
 
+    const required = signupItem.required;
+
     if (signupItem.name === "Username") {
       return (
         <Form.Item
@@ -138,7 +140,7 @@ class SignupPage extends React.Component {
           label={i18next.t("signup:Username")}
           rules={[
             {
-              required: true,
+              required: required,
               message: i18next.t("login:Please input your username!"),
               whitespace: true,
             },
@@ -151,11 +153,11 @@ class SignupPage extends React.Component {
       return (
         <Form.Item
           name="name"
-          label={i18next.t("general:Display name")}
+          label={signupItem.rule === "Personal" ? i18next.t("general:Personal name") : i18next.t("general:Display name")}
           rules={[
             {
-              required: true,
-              message: i18next.t("signup:Please input your display name!"),
+              required: required,
+              message: signupItem.rule === "Personal" ? i18next.t("signup:Please input your personal name!") : i18next.t("signup:Please input your display name!"),
               whitespace: true,
             },
           ]}
@@ -170,7 +172,7 @@ class SignupPage extends React.Component {
           label={i18next.t("user:Affiliation")}
           rules={[
             {
-              required: true,
+              required: required,
               message: i18next.t("signup:Please input your affiliation!"),
               whitespace: true,
             },
@@ -191,7 +193,7 @@ class SignupPage extends React.Component {
                 message: i18next.t("signup:The input is not valid Email!"),
               },
               {
-                required: true,
+                required: required,
                 message: i18next.t("signup:Please input your Email!"),
               },
             ]}
@@ -202,7 +204,7 @@ class SignupPage extends React.Component {
             name="emailCode"
             label={i18next.t("signup:Email code")}
             rules={[{
-              required: true,
+              required: required,
               message: i18next.t("signup:Please input your verification code!"),
             }]}
           >
@@ -217,44 +219,45 @@ class SignupPage extends React.Component {
       )
     } else if (signupItem.name === "Password") {
       return (
-        <React.Fragment>
-          <Form.Item
-            name="password"
-            label={i18next.t("general:Password")}
-            rules={[
-              {
-                required: true,
-                message: i18next.t("login:Please input your password!"),
-              },
-            ]}
-            hasFeedback
-          >
-            <Input.Password />
-          </Form.Item>
-          <Form.Item
-            name="confirm"
-            label={i18next.t("signup:Confirm")}
-            dependencies={['password']}
-            hasFeedback
-            rules={[
-              {
-                required: true,
-                message: i18next.t("signup:Please confirm your password!"),
-              },
-              ({ getFieldValue }) => ({
-                validator(rule, value) {
-                  if (!value || getFieldValue('password') === value) {
-                    return Promise.resolve();
-                  }
+        <Form.Item
+          name="password"
+          label={i18next.t("general:Password")}
+          rules={[
+            {
+              required: required,
+              message: i18next.t("login:Please input your password!"),
+            },
+          ]}
+          hasFeedback
+        >
+          <Input.Password />
+        </Form.Item>
+      )
+    } else if (signupItem.name === "Confirm password") {
+      return (
+        <Form.Item
+          name="confirm"
+          label={i18next.t("signup:Confirm")}
+          dependencies={['password']}
+          hasFeedback
+          rules={[
+            {
+              required: required,
+              message: i18next.t("signup:Please confirm your password!"),
+            },
+            ({ getFieldValue }) => ({
+              validator(rule, value) {
+                if (!value || getFieldValue('password') === value) {
+                  return Promise.resolve();
+                }
 
-                  return Promise.reject(i18next.t("signup:Your confirmed password is inconsistent with the password!"));
-                },
-              }),
-            ]}
-          >
-            <Input.Password />
-          </Form.Item>
-        </React.Fragment>
+                return Promise.reject(i18next.t("signup:Your confirmed password is inconsistent with the password!"));
+              },
+            }),
+          ]}
+        >
+          <Input.Password />
+        </Form.Item>
       )
     } else if (signupItem.name === "Phone") {
       return (
@@ -264,7 +267,7 @@ class SignupPage extends React.Component {
             label={i18next.t("general:Phone")}
             rules={[
               {
-                required: true,
+                required: required,
                 message: i18next.t("signup:Please input your phone number!"),
               },
             ]}
@@ -282,7 +285,7 @@ class SignupPage extends React.Component {
             label={i18next.t("signup:Phone code")}
             rules={[
               {
-                required: true,
+                required: required,
                 message: i18next.t("signup:Please input your phone verification code!"),
               },
             ]}
@@ -301,6 +304,12 @@ class SignupPage extends React.Component {
         <Form.Item
           name="agreement"
           valuePropName="checked"
+          rules={[
+            {
+              required: required,
+              message: i18next.t("signup:Please accept the agreement!"),
+            },
+          ]}
           {...tailFormItemLayout}
         >
           <Checkbox>

web/src/locales/en.json

@@ -17,6 +17,7 @@
     "Created time": "Created time",
     "Name": "Name",
     "Display name": "Display name",
+    "Personal name": "Personal name",
     "Avatar": "Avatar",
     "URL": "URL",
     "Preview": "Preview",
@@ -39,6 +40,7 @@
   {
     "Username": "Username",
     "Please input your display name!": "Please input your display name!",
+    "Please input your personal name!": "Please input your personal name!",
     "Please input your address!": "Please input your address!",
     "Please input your affiliation!": "Please input your affiliation!",
     "The input is not valid Email!": "The input is not valid Email!",

web/src/locales/zh.json

@@ -17,6 +17,7 @@
     "Created time": "创建时间",
     "Name": "名称",
     "Display name": "显示名称",
+    "Personal name": "姓名",
     "Avatar": "头像",
     "URL": "链接",
     "Preview": "预览",
@@ -38,7 +39,8 @@
   "signup":
   {
     "Username": "用户名",
-    "Please input your display name!": "请输入您的姓名！",
+    "Please input your display name!": "请输入您的显示名称！",
+    "Please input your personal name!": "请输入您的姓名！",
     "Please input your address!": "请输入您的地址！",
     "Please input your affiliation!": "请输入您所在的工作单位！",
     "The input is not valid Email!": "您输入的电子邮箱格式错误！",