Limit field patterns and lengths

Author: balthild

README.md

@@ -17,10 +17,10 @@ $ yarn start # default http://localhost:3000
 
 ## Todo List
 
-- [ ] 表单管理和修改(Index, Google id(short), Agent name, Faction, Area, Telegram username, Marked(Group invited), Other comment, Ban, Delete）
+- [ ] 表单备注
+- [ ] 地区管理员
 - [ ] 个人页面和设置（Avatar(Google account avatar as default), Bio(Words Limit 256)，Connect to telegram，Account Rebind, Account destory）
 - [ ] 权限管理和修改(Index, Google id(short), Telegram username, Area, Notification(Email or Telegram echo bot), Delete)
-- [ ] 地区管理员
 - [ ] 文章驳回状态
 - [ ] 考虑替换地图服务
 - [ ] 通知 Bot 定时请求人员信息

src/components/Join.tsx

@@ -179,23 +179,29 @@ class Join extends React.Component<JoinProps, JoinState> {
 
                                 <Form.Item label="特工代号">
                                     <Input
-                                        prefix={<Icon type="user" />}
+                                        addonBefore={<Icon type="user" />}
                                         name="agentName"
                                         value={this.state.agentName}
                                         placeholder="Agent Name"
                                         onChange={this.handleChange}
+                                        maxLength={16}
+                                        pattern="[0-9A-Za-z_]+"
+                                        title="只能由英文字母、数字与下划线构成"
                                     />
                                 </Form.Item>
 
                                 <Form.Item label="Telegram 用户名">
                                     <p><i>(什么是 <a href="https://telegram.org" target="_blank">Telegram</a>?)</i></p>
                                     <p>请注意，Telegram 的 Name 与 Username 不是同一个概念，请填写 Username</p>
                                     <Input
-                                        prefix={<Icon type="user" />}
+                                        addonBefore="@"
                                         name="telegram"
                                         value={this.state.telegram}
-                                        placeholder="Telegram Username (不带 @)"
+                                        placeholder="Telegram Username"
                                         onChange={this.handleChange}
+                                        maxLength={40}
+                                        pattern="[0-9A-Za-z_]+"
+                                        title="只能由英文字母、数字与下划线构成"
                                     />
                                 </Form.Item>
 
@@ -214,6 +220,7 @@ class Join extends React.Component<JoinProps, JoinState> {
                                         value={this.state.other}
                                         autosize={{ minRows: 4, maxRows: 10 }}
                                         onChange={this.handleChange}
+                                        maxLength={512}
                                     />
                                 </Form.Item>