增加修改用户名/邮箱/密码的验证页面

i18n.json

@@ -192,7 +192,7 @@
     "Seconds": "秒后退出",
     "TemporaryPrompt": "改名已关闭。下次将在10月1日开启。",
     "ChangeSuccess": "修改成功，请重新登录生效。",
-    "EmailChangeSuccess":"请查看邮件完成修改",
+    "EmailChangeSuccess":"请查看邮件完成修改。",
     "没毛用": "防逗号报错,上线删"
   }
 }

src/components/PasswordForm.js

@@ -39,7 +39,7 @@ class EmailForm extends React.Component {
   };
   handleCountdown = () => {
     // 倒计时减1
-    this.setState((prevState) => ({ countdown: prevState.countdown - 1 }));
+    this.setState(prevState => ({ countdown: prevState.countdown - 1 }));
     if (this.state.countdown === 0) {
       // 清除倒计时
       clearInterval(this.countdownTimer);
@@ -142,12 +142,12 @@ class EmailForm extends React.Component {
     return (
       <div>
         {inCountdown ? (
-          <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh'}}>
-            <div style={{flex: 9 / 10, textAlign: 'center'}}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh' }}>
+            <div style={{ flex: 9 / 10, textAlign: 'center' }}>
               <h3>{ChangeSuccessText}</h3>
               <h3>
                 {loggingOutInText}
-                <span style={{ color: '#4da9ee', fontSize: '2em'}}>&nbsp;{`${countdown}`}</span>
+                <span style={{ color: '#4da9ee', fontSize: '2em' }}>&nbsp;{`${countdown}`}</span>
                 <span>&nbsp;{secondsText}</span>
               </h3>
               <br/>

src/components/UserNameForm.js

-import {Button, Form, Input} from 'antd';
+import { Button, Form, Input } from 'antd';
 import React from 'react';
-import {connect} from 'react-redux';
+import { connect } from 'react-redux';
 import SubmitButton from './SubmitButton';
 
 const FormItem = Form.Item;
 const formItemLayout = {
-  labelCol: {span: 4},
-  wrapperCol: {span: 15},
+  labelCol: { span: 4 },
+  wrapperCol: { span: 15 },
 };
 
 
@@ -16,7 +16,7 @@ class EmailForm extends React.Component {
     inCountdown: false, // Whether the countdown is active
   };
   onSubmit = (e) => {
-    const {form, dispatch, user: {id}} = this.props;
+    const { form, dispatch, user: { id } } = this.props;
 
     if (e) {
       e.preventDefault();
@@ -24,21 +24,21 @@ class EmailForm extends React.Component {
     form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
-        const {username, password} = values;
-        dispatch({type: 'user/updateAccount', payload: {username, password, user_id: id}});
-        this.setState({countdown: 5, inCountdown: true});
+        const { username, password } = values;
+        dispatch({ type: 'user/updateAccount', payload: { username, password, user_id: id } });
+        this.setState({ countdown: 5, inCountdown: true });
         this.countdownTimer = setInterval(this.handleCountdown, 1000);
       }
     });
   };
   handleCountdown = () => {
     // 倒计时减1
-    this.setState((prevState) => ({countdown: prevState.countdown - 1}));
+    this.setState(prevState => ({ countdown: prevState.countdown - 1 }));
     if (this.state.countdown === 0) {
       // 清除倒计时
       clearInterval(this.countdownTimer);
       // 设置倒计时状态为false
-      this.setState({inCountdown: false});
+      this.setState({ inCountdown: false });
       // 倒计时结束后调用退出
       this.handleLogout();
     }
@@ -55,12 +55,12 @@ class EmailForm extends React.Component {
   };
 
   handleLogoutNow = () => {
-    this.setState({countdown: 0}, () => {
+    this.setState({ countdown: 0 }, () => {
       this.handleLogout();
     });
   };
   checkPassword = (rule, value, callback) => {
-    const {form, messages} = this.props;
+    const { form, messages } = this.props;
     // const { intl: { messages } } = this.context;
     if (value && value !== form.getFieldValue('new_password')) {
       callback(messages['Incorrect-password.2']);
@@ -72,15 +72,15 @@ class EmailForm extends React.Component {
   checkConfirm = (rule, value, callback) => {
     const form = this.props.form;
     if (value) {
-      form.validateFields(['confirm'], {force: true});
+      form.validateFields(['confirm'], { force: true });
     }
     callback();
   };
 
   render() {
-    const {form, dispatch, user, checkUsername, isUserNameExists, messages} = this.props;
-    const {getFieldDecorator} = form;
-    const {id, username} = user;
+    const { form, dispatch, user, checkUsername, isUserNameExists, messages } = this.props;
+    const { getFieldDecorator } = form;
+    const { id, username } = user;
     const logoutNowText = this.props.messages.LogoutNow;
     const loggingOutInText = this.props.messages.LoggingOutIn;
     const secondsText = this.props.messages.Seconds;
@@ -99,7 +99,7 @@ class EmailForm extends React.Component {
       },
       input: {
         placeholder: messages.username,
-        onBlur: () => dispatch({type: 'auth/checkUsername', payload: {...form.getFieldsValue(), user_id: id}}),
+        onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
       },
     };
 
@@ -122,16 +122,16 @@ class EmailForm extends React.Component {
         type: 'password',
       },
     };
-    const {inCountdown, countdown} = this.state;
+    const { inCountdown, countdown } = this.state;
     return (
       <div>
         {inCountdown ? (
-          <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh'}}>
-            <div style={{flex: 9 / 10, textAlign: 'center'}}>
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh' }}>
+            <div style={{ flex: 9 / 10, textAlign: 'center' }}>
               <h3>{ChangeSuccessText}</h3>
               <h3>
                 {loggingOutInText}
-                <span style={{color: '#4da9ee', fontSize: '2em'}}>&nbsp;{`${countdown}`}</span>
+                <span style={{ color: '#4da9ee', fontSize: '2em' }}>&nbsp;{`${countdown}`}</span>
                 <span>&nbsp;{secondsText}</span>
               </h3>
               <br/>
@@ -143,17 +143,17 @@ class EmailForm extends React.Component {
         ) : (
           <Form onSubmit={this.onSubmit}>
             <FormItem {...usernameProps.fromItem}>
-              {getFieldDecorator('username', {...usernameProps.decorator})(
+              {getFieldDecorator('username', { ...usernameProps.decorator })(
                 <Input {...usernameProps.input} disabled/>,
               )}
               {
-                <div class="alert alert-warning" role="alert">{temporaryPromptText}</div>
+                <div className="alert alert-warning" role="alert">{temporaryPromptText}</div>
               }
 
             </FormItem>
 
             <FormItem {...passwordProps.fromItem}>
-              {getFieldDecorator('password', {...passwordProps.decorator})(
+              {getFieldDecorator('password', { ...passwordProps.decorator })(
                 <Input {...passwordProps.input} />,
               )}
             </FormItem>
@@ -170,9 +170,9 @@ class EmailForm extends React.Component {
 
 function mapStateToProps(state) {
   const {
-    user: {user},
-    auth: {isUserNameExists, checkUsername},
-    common: {messages},
+    user: { user },
+    auth: { isUserNameExists, checkUsername },
+    common: { messages },
   } = state;
   return {
     user,

src/routes/Profiles.js

@@ -107,7 +107,7 @@ class Profiles extends React.Component {
               <Form onSubmit={this.onUpdateSubmit}>
 
                 <FormItem style={{ display: 'flex', justifyContent: 'center' }}>
-                  <div style={{display: 'flex', flexDirection: 'column'}}>
+                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                     <Cropper
                       ref={(cropper) => {
                         this.cropper = cropper;
@@ -124,12 +124,12 @@ class Profiles extends React.Component {
                       style={{ height: '300px', width: '300px', display: !isUpload ? 'block' : 'none' }}
                       src={avatar || imageUrl || defaultAvatar}
                     />
-                    <Button type="primary" onClick={this.handleUpload} style={{display:isUpload ? 'inline-block' : 'none', marginTop: '2em'}}>
+                    <Button type="primary" onClick={this.handleUpload} style={{ display: isUpload ? 'inline-block' : 'none', marginTop: '2em' }}>
                       <Icon type="check"/> <Format id="Upload-Avatar"/>
                     </Button>
-                    <Button type="default" style={{marginTop: '2em'}}>
+                    <Button type="default" style={{ marginTop: '2em' }}>
                       <label style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                        <Icon type="plus" style={{marginRight: '0.5em'}} />
+                        <Icon type="plus" style={{ marginRight: '0.5em' }} />
                         {(!isUpload) && <Format id="Change-Avatar"/>}
                         {isUpload && <Format id="Reselect-Avatar"/>}
                         <input
@@ -147,7 +147,7 @@ class Profiles extends React.Component {
                     <Input {...nameProps.input} />,
                   )}
                   {
-                    <div class="alert alert-warning" role="alert"><Format id="Nickname-Hint"/></div>
+                    <div className="alert alert-warning" role="alert"><Format id="Nickname-Hint"/></div>
                   }
                 </FormItem>