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

src/components/EmailForm.js

-import { Form, Input } from 'antd';
+import { Button, Form, Input } from 'antd';
 import React from 'react';
 import { connect } from 'react-redux';
 import SubmitButton from './SubmitButton';
@@ -11,13 +11,15 @@ const formItemLayout = {
 
 
 class EmailForm extends React.Component {
-
+  state = {
+    countdown: 0,
+    inCountdown: false, // Whether the countdown is active
+  };
   // static contextTypes = {
   //   intl: PropTypes.object.isRequired,
   // };
   onSubmit = (e) => {
     const { form, dispatch, user: { id } } = this.props;
-
     if (e) {
       e.preventDefault();
     }
@@ -28,17 +30,48 @@ class EmailForm extends React.Component {
         const { email, password } = values;
 
         dispatch({ type: 'user/updateEmail', payload: { email, 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 }));
+    if (this.state.countdown === 0) {
+      // 清除倒计时
+      clearInterval(this.countdownTimer);
+      // 设置倒计时状态为false
+      this.setState({ inCountdown: false });
+      // 倒计时结束后调用退出
+      this.handleLogout();
+    }
+  };
+  handleLogout = () => {
+    clearInterval(this.countdownTimer);
+    window.localStorage.removeItem('token');
+    if (window.ygopro) {
+      window.ygopro.logoutUser('YGOMobile萌卡已登出');
+    }
+    const url = new URL(window.location.href);
+    const redirect = url.searchParams.get('redirect') || '/';
+    window.location.href = redirect;
+  };
 
+  handleLogoutNow = () => {
+    this.setState({ countdown: 0 }, () => {
+      this.handleLogout();
+    });
+  };
   render() {
     const { form, dispatch, user, checkEmail, isEmailExists, messages } = this.props;
     const { getFieldDecorator } = form;
     const { id, email } = user;
     // const { intl: { messages } } = this.context;
-
-
+    const logoutNowText = this.props.messages.LogoutNow;
+    const loggingOutInText = this.props.messages.LoggingOutIn;
+    const secondsText = this.props.messages.Seconds;
+    const ChangeSuccessText = this.props.messages.EmailChangeSuccess;
     const emailProps = {
       fromItem: {
         label: messages.email,
@@ -74,28 +107,47 @@ class EmailForm extends React.Component {
         type: 'password',
       },
     };
-
+    const { inCountdown, countdown } = this.state;
     return (
-      <Form onSubmit={this.onSubmit}>
-        <FormItem {...emailProps.fromItem}>
-          {getFieldDecorator('email', { ...emailProps.decorator })(
-            <Input
-              {...emailProps.input}
-              onBlur={() => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), user_id: id } })}
-            />,
-          )}
-        </FormItem>
-
-        <FormItem {...passwordProps.fromItem}>
-          {getFieldDecorator('password', { ...passwordProps.decorator })(
-            <Input {...passwordProps.input} />,
-          )}
-        </FormItem>
-
-        <FormItem>
-          <SubmitButton />
-        </FormItem>
-      </Form>
+      <div>
+        {inCountdown ? (
+          <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>&nbsp;{secondsText}</span>
+              </h3>
+              <br/>
+              <Button type="link" onClick={this.handleLogoutNow}>
+                {logoutNowText}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Form onSubmit={this.onSubmit}>
+            <FormItem {...emailProps.fromItem}>
+              {getFieldDecorator('email', { ...emailProps.decorator })(
+                <Input
+                  {...emailProps.input}
+                  onBlur={() => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), user_id: id } })}
+                />,
+              )}
+            </FormItem>
+
+            <FormItem {...passwordProps.fromItem}>
+              {getFieldDecorator('password', { ...passwordProps.decorator })(
+                <Input {...passwordProps.input} />,
+              )}
+            </FormItem>
+
+            <FormItem>
+              <SubmitButton />
+            </FormItem>
+          </Form>
+        )}
+      </div>
     );
   }
 }

src/components/PasswordForm.js

-import { Form, Input } from 'antd';
+import { Form, Input, Button } from 'antd';
 import React from 'react';
 import { connect } from 'react-redux';
-
 import SubmitButton from './SubmitButton';
 
 const FormItem = Form.Item;
 
-
 const formItemLayout = {
   labelCol: { span: 4 },
   wrapperCol: { span: 15 },
@@ -14,7 +12,10 @@ const formItemLayout = {
 
 
 class EmailForm extends React.Component {
-
+  state = {
+    countdown: 0,
+    inCountdown: false, // 是否处于倒计时状态
+  };
   onSubmit = (e) => {
     const { form, dispatch, user: { id } } = this.props;
 
@@ -28,13 +29,47 @@ class EmailForm extends React.Component {
         const { new_password, password } = values;
 
         dispatch({ type: 'user/updateAccount', payload: { new_password, password, user_id: id } });
+
+        // 设置倒计时状态为5秒
+        this.setState({ countdown: 5, inCountdown: true });
+        // 启动倒计时
+        this.countdownTimer = setInterval(this.handleCountdown, 1000);
       }
     });
   };
+  handleCountdown = () => {
+    // 倒计时减1
+    this.setState((prevState) => ({ countdown: prevState.countdown - 1 }));
+    if (this.state.countdown === 0) {
+      // 清除倒计时
+      clearInterval(this.countdownTimer);
+      // 设置倒计时状态为false
+      this.setState({ inCountdown: false });
+      // 倒计时结束后调用退出
+      this.handleLogout();
+    }
+  };
+  handleLogout = () => {
+    clearInterval(this.countdownTimer);
+    window.localStorage.removeItem('token');
+    if (window.ygopro) {
+      window.ygopro.logoutUser('YGOMobile萌卡已登出');
+    }
+    const url = new URL(window.location.href);
+    const redirect = url.searchParams.get('redirect') || '/';
+    window.location.href = redirect;
+  };
+
+  handleLogoutNow = () => {
+    this.setState({ countdown: 0 }, () => {
+      this.handleLogout();
+    });
+  };
+
 
   checkPassword = (rule, value, callback) => {
     const { form, messages } = this.props;
-    //const { intl: { messages } } = this.context;
+    // const { intl: { messages } } = this.context;
     if (value && value !== form.getFieldValue('new_password')) {
       callback(messages['Incorrect-password.2']);
     } else {
@@ -54,7 +89,10 @@ class EmailForm extends React.Component {
   render() {
     const { form, messages } = this.props;
     const { getFieldDecorator } = form;
-
+    const logoutNowText = this.props.messages.LogoutNow;
+    const loggingOutInText = this.props.messages.LoggingOutIn;
+    const secondsText = this.props.messages.Seconds;
+    const ChangeSuccessText = this.props.messages.ChangeSuccess;
     const passwordProps = {
       fromItem: {
         label: messages['old-password'],
@@ -100,31 +138,50 @@ class EmailForm extends React.Component {
         type: 'password',
       },
     };
-
+    const { inCountdown, countdown } = this.state;
     return (
-      <Form onSubmit={this.onSubmit}>
-        <FormItem {...passwordProps.fromItem} label={messages['old-password']}>
-          {getFieldDecorator('password')(
-            <Input {...passwordProps.input} />,
-          )}
-        </FormItem>
-
-        <FormItem {...passwordProps.fromItem} label={messages['new-password']}>
-          {getFieldDecorator('new_password', { ...passwordProps.decorator })(
-            <Input {...passwordProps.input2} />,
-          )}
-        </FormItem>
-
-        <FormItem {...confirmProps.fromItem}>
-          {getFieldDecorator('confirm', { ...confirmProps.decorator })(
-            <Input {...confirmProps.input} />,
-          )}
-        </FormItem>
-
-        <FormItem>
-          <SubmitButton />
-        </FormItem>
-      </Form>
+      <div>
+        {inCountdown ? (
+          <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>&nbsp;{secondsText}</span>
+              </h3>
+              <br/>
+              <Button type="link" onClick={this.handleLogoutNow}>
+                {logoutNowText}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Form onSubmit={this.onSubmit}>
+            <FormItem {...passwordProps.fromItem} label={messages['old-password']}>
+              {getFieldDecorator('password')(
+                <Input {...passwordProps.input} />,
+              )}
+            </FormItem>
+
+            <FormItem {...passwordProps.fromItem} label={messages['new-password']}>
+              {getFieldDecorator('new_password', { ...passwordProps.decorator })(
+                <Input {...passwordProps.input2} />,
+              )}
+            </FormItem>
+
+            <FormItem {...confirmProps.fromItem}>
+              {getFieldDecorator('confirm', { ...confirmProps.decorator })(
+                <Input {...confirmProps.input} />,
+              )}
+            </FormItem>
+
+            <FormItem>
+              <SubmitButton />
+            </FormItem>
+          </Form>
+        )}
+      </div>
     );
   }
 }
@@ -135,6 +192,7 @@ function mapStateToProps(state) {
     user: { user },
     common: { messages },
   } = state;
+
   return {
     messages,
     user,

src/components/UserNameForm.js

-import { 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},
 };
 
 
 class EmailForm extends React.Component {
-
+  state = {
+    countdown: 0,
+    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();
@@ -21,19 +24,68 @@ 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 } });
+        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}));
+    if (this.state.countdown === 0) {
+      // 清除倒计时
+      clearInterval(this.countdownTimer);
+      // 设置倒计时状态为false
+      this.setState({inCountdown: false});
+      // 倒计时结束后调用退出
+      this.handleLogout();
+    }
+  };
+  handleLogout = () => {
+    clearInterval(this.countdownTimer);
+    window.localStorage.removeItem('token');
+    if (window.ygopro) {
+      window.ygopro.logoutUser('YGOMobile萌卡已登出');
+    }
+    const url = new URL(window.location.href);
+    const redirect = url.searchParams.get('redirect') || '/';
+    window.location.href = redirect;
+  };
 
-  render() {
-    const { form, dispatch, user, checkUsername, isUserNameExists, messages } = this.props;
-    const { getFieldDecorator } = form;
-    const { id, username } = user;
+  handleLogoutNow = () => {
+    this.setState({countdown: 0}, () => {
+      this.handleLogout();
+    });
+  };
+  checkPassword = (rule, value, callback) => {
+    const {form, messages} = this.props;
+    // const { intl: { messages } } = this.context;
+    if (value && value !== form.getFieldValue('new_password')) {
+      callback(messages['Incorrect-password.2']);
+    } else {
+      callback();
+    }
+  };
+
+  checkConfirm = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value) {
+      form.validateFields(['confirm'], {force: true});
+    }
+    callback();
+  };
 
+  render() {
+    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;
+    const temporaryPromptText = this.props.messages.TemporaryPrompt;
+    const ChangeSuccessText = this.props.messages.ChangeSuccess;
     const usernameProps = {
       fromItem: {
         label: messages.username,
@@ -47,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}}),
       },
     };
 
@@ -70,39 +122,57 @@ class EmailForm extends React.Component {
         type: 'password',
       },
     };
-
+    const {inCountdown, countdown} = this.state;
     return (
-      <Form onSubmit={this.onSubmit}>
-        <FormItem {...usernameProps.fromItem}>
-          {getFieldDecorator('username', { ...usernameProps.decorator })(
-            <Input {...usernameProps.input} disabled/>,
-          )}
-          {
-            <div class="alert alert-warning" role="alert">改名已关闭。下次将在10月1日开启。</div>
-          }
-
-        </FormItem>
-
-        <FormItem {...passwordProps.fromItem}>
-          {getFieldDecorator('password', { ...passwordProps.decorator })(
-            <Input {...passwordProps.input} />,
-          )}
-        </FormItem>
-
-        <FormItem>
-          <SubmitButton />
-        </FormItem>
-      </Form>
+      <div>
+        {inCountdown ? (
+          <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>&nbsp;{secondsText}</span>
+              </h3>
+              <br/>
+              <Button type="link" onClick={this.handleLogoutNow}>
+                {logoutNowText}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Form onSubmit={this.onSubmit}>
+            <FormItem {...usernameProps.fromItem}>
+              {getFieldDecorator('username', {...usernameProps.decorator})(
+                <Input {...usernameProps.input} disabled/>,
+              )}
+              {
+                <div class="alert alert-warning" role="alert">{temporaryPromptText}</div>
+              }
+
+            </FormItem>
+
+            <FormItem {...passwordProps.fromItem}>
+              {getFieldDecorator('password', {...passwordProps.decorator})(
+                <Input {...passwordProps.input} />,
+              )}
+            </FormItem>
+
+            <FormItem>
+              <SubmitButton/>
+            </FormItem>
+          </Form>
+        )}
+      </div>
     );
   }
 }
 
-
 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

@@ -134,8 +134,8 @@ class Profiles extends React.Component {
                         {isUpload && <Format id="Reselect-Avatar"/>}
                         <input
                           type="file" onChange={this.onGetFile} ref={(file) => {
-                            this.file = file;
-                          }} style={{ display: 'none' }}
+                          this.file = file;
+                        }} style={{ display: 'none' }}
                         />
                       </label>
                     </Button>