Skip to content

M
Moecube Accounts Web
Commit ed5a975d authored by 铃兰's avatar 铃兰
Browse files
Options

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

parent 4bd1fd78
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 188 deletions
i18n.json
View file @ ed5a975d
{ {
"en-US": { "en-US": {
"title":"MoeCube", "title": "MoeCube",
"Home":"Home", "Home": "Home",
"BBS":"BBS", "BBS": "BBS",
"DATABASE":"DataBase", "DATABASE": "DataBase",
"username": "User Name", "username": "User Name",
"email": "E-Mail", "email": "E-Mail",
"password": "Password", "password": "Password",
"user-info": "User Info", "user-info": "User Info",
"reset-info": "Reset User Info", "reset-info": "Reset User Info",
"Change-Avatar" :"Change Avatar", "Change-Avatar": "Change Avatar",
"Upload-Avatar" :"Confirm Upload Avatar", "Upload-Avatar": "Confirm Upload Avatar",
"Reselect-Avatar":"Reselect Avatar", "Reselect-Avatar": "Reselect Avatar",
"upload":"upload", "upload": "upload",
"avatar": "Avatar", "avatar": "Avatar",
"nickname": "Nickname", "nickname": "Nickname",
"Nickname-Hint": "This nickname is only used in the forum.", "Nickname-Hint": "This nickname is only used in the forum.",
...@@ -28,17 +28,17 @@ ...@@ -28,17 +28,17 @@
"sign-up": "Sign Up", "sign-up": "Sign Up",
"sign-in": "Sign In", "sign-in": "Sign In",
"sign-out": "Sign out", "sign-out": "Sign out",
"User-Center":"User Center", "User-Center": "User Center",
"Please-sign-in":"Please sign In", "Please-sign-in": "Please sign In",
"email-address-or-username": "E-Mail or Username", "email-address-or-username": "E-Mail or Username",
"register-now": "register-now!", "register-now": "register-now!",
"register":"register", "register": "register",
"forgot-password": "Forgot Password", "forgot-password": "Forgot Password",
"send-email": "Send Email", "send-email": "Send Email",
"reset-success": "reset success", "reset-success": "reset success",
"reset-fail": "reset fail", "reset-fail": "reset fail",
"reset-password2": "Reset Password", "reset-password2": "Reset Password",
"remember-me":"Remember me", "remember-me": "Remember me",
"Please-use-a-correct-E-Mail-address.": "Please use a correct E-Mail address.", "Please-use-a-correct-E-Mail-address.": "Please use a correct E-Mail address.",
"User-name-can-not-be-empty.": "User name can not be empty.", "User-name-can-not-be-empty.": "User name can not be empty.",
"You-can-not-use-this-username.": "You can not use this username.", "You-can-not-use-this-username.": "You can not use this username.",
...@@ -61,55 +61,55 @@ ...@@ -61,55 +61,55 @@
"didnt receive verification email 2": "to resend it again.", "didnt receive verification email 2": "to resend it again.",
"A verification email has been sent to you.": "A verification email has been sent to you, please check your email to finish verification.", "A verification email has been sent to you.": "A verification email has been sent to you, please check your email to finish verification.",
"Your email has been updated.": "Your email has been updated. You will receive an verification email. Please check the mail to finish verification. ", "Your email has been updated.": "Your email has been updated. You will receive an verification email. Please check the mail to finish verification. ",
"Please input your account!": "Please input your email or username!",
"Please input your account!":"Please input your email or username!", "Please-input-your-Password!": "Please input your Password!",
"Please-input-your-Password!":"Please input your Password!", "verify-email": "Verify Email",
"account-info": "Account Info",
"verify-email":"Verify Email", "reset-username": "Reset Username",
"account-info":"Account Info", "Reset-Email": "Reset Email",
"reset-username":"Reset Username", "reset-password": "Reset Password",
"Reset-Email":"Reset Email", "old-password": "old password",
"reset-password":"Reset Password", "new-password": "new password",
"old-password":"old password", "Password-length-must-be-between-8-and-24-characters.": "Password length must be between 8 and 24 characters.",
"new-password":"new password", "email_exists": "email exists",
"Password-length-must-be-between-8-and-24-characters.":"Password length must be between 8 and 24 characters.",
"email_exists":"email exists",
"update_success": "Update Success!", "update_success": "Update Success!",
"A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.":"A verification email has been sent to you, please check the mail to complete.", "A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.": "A verification email has been sent to you, please check the mail to complete.",
"Your-are-almost-done!": "Your are almost done!",
"Your-are-almost-done!":"Your are almost done!", "Thank-you!-This-is-the-last-step.": "Thank you! This is the last step.",
"Thank-you!-This-is-the-last-step.":"Thank you! This is the last step.", "Please click the following button to confirm your email address": "Please click the following button to confirm your email address",
"Please click the following button to confirm your email address":"Please click the following button to confirm your email address", "Finish-Verification": "Finish Verification",
"Finish-Verification":"Finish Verification", "After-verification,-you-can-sign-in-to-MoeCube-with-this-email-address.": "After verification, you can sign in to MoeCube with this email address.",
"After-verification,-you-can-sign-in-to-MoeCube-with-this-email-address.":"After verification, you can sign in to MoeCube with this email address.", "Welcome-to-MoeCube!": "Welcome to MoeCube!",
"Welcome-to-MoeCube!":"Welcome to MoeCube!",
"i_password_error": "Incorrect password. ", "i_password_error": "Incorrect password. ",
"i_user_unexists":"User does not exisit.", "i_user_unexists": "User does not exisit.",
"i_email_exists":"email is exists", "i_email_exists": "email is exists",
"i_username_exists":"username is exists", "i_username_exists": "username is exists",
"i_username_exists_or_invalid":"username is exists or invalid", "i_username_exists_or_invalid": "username is exists or invalid",
"i_not_found":"user unexists", "i_not_found": "user unexists",
"i_key_time_out":"url is time out", "i_key_time_out": "url is time out",
"i_key_invalid":"url is invalid", "i_key_invalid": "url is invalid",
"LogoutNow": "Logout now",
"没毛用":"防逗号报错,上线删" "LoggingOutIn": "Logging out in",
"Seconds": "seconds",
"TemporaryPrompt": "You can change your username on the first week of Jan, Apr, Jul, Oct.",
"ChangeSuccess": "Change successful, please logout to apply the change.",
"EmailChangeSuccess":"Please check the email to continue.",
"没毛用": "防逗号报错,上线删"
}, },
"zh-CN": { "zh-CN": {
"title":"萌立方", "title": "萌立方",
"Home":"主页", "Home": "主页",
"BBS":"社区", "BBS": "社区",
"DATABASE":"数据库", "DATABASE": "数据库",
"username": "用户名", "username": "用户名",
"email": "邮箱", "email": "邮箱",
"password": "密码", "password": "密码",
"user-info": "用户信息", "user-info": "用户信息",
"reset-info": "修改信息", "reset-info": "修改信息",
"Change-Avatar" :"修改头像", "Change-Avatar": "修改头像",
"Upload-Avatar":"确认上传头像", "Upload-Avatar": "确认上传头像",
"Reselect-Avatar":"重新选择头像", "Reselect-Avatar": "重新选择头像",
"upload":"上传", "upload": "上传",
"avatar": "头像", "avatar": "头像",
"nickname": "昵称", "nickname": "昵称",
"Nickname-Hint": "昵称只在论坛显示，如需修改游戏和聊天室里显示的名字，请修改用户名", "Nickname-Hint": "昵称只在论坛显示，如需修改游戏和聊天室里显示的名字，请修改用户名",
...@@ -125,17 +125,17 @@ ...@@ -125,17 +125,17 @@
"sign-up": "注册", "sign-up": "注册",
"sign-in": "登录", "sign-in": "登录",
"sign-out": "登出", "sign-out": "登出",
"User-Center":"用户中心", "User-Center": "用户中心",
"Please-sign-in":"您尚未登录，请先登录", "Please-sign-in": "您尚未登录，请先登录",
"email-address-or-username": "邮箱或用户名", "email-address-or-username": "邮箱或用户名",
"register-now": "现在注册", "register-now": "现在注册",
"register":"注册", "register": "注册",
"forgot-password": "忘记密码", "forgot-password": "忘记密码",
"send-email": "发送邮件", "send-email": "发送邮件",
"reset-success": "修改成功。请重新登录MC平台使更改生效，否则有可能无法进入游戏", "reset-success": "修改成功。请重新登录MC平台使更改生效，否则有可能无法进入游戏",
"reset-fail": "修改失败", "reset-fail": "修改失败",
"reset-password2": "重置密码", "reset-password2": "重置密码",
"remember-me":"记住我", "remember-me": "记住我",
"Please-use-a-correct-E-Mail-address.": "请填写正确的邮箱地址", "Please-use-a-correct-E-Mail-address.": "请填写正确的邮箱地址",
"User-name-can-not-be-empty.": "用户名不能为空", "User-name-can-not-be-empty.": "用户名不能为空",
"You-can-not-use-this-username.": "用户名不合法", "You-can-not-use-this-username.": "用户名不合法",
...@@ -160,40 +160,39 @@ ...@@ -160,40 +160,39 @@
"didnt receive verification email 2": "获取验证邮件。", "didnt receive verification email 2": "获取验证邮件。",
"A verification email has been sent to you.": "已经向您发送了一封验证邮件，请您查看Email完成验证。", "A verification email has been sent to you.": "已经向您发送了一封验证邮件，请您查看Email完成验证。",
"Your email has been updated.": "邮箱已经更新，您将会收到一封验证邮件，请您查看Email完成验证。", "Your email has been updated.": "邮箱已经更新，您将会收到一封验证邮件，请您查看Email完成验证。",
"Please input your account!": "请填写你的邮箱或用户名!",
"Please input your account!":"请填写你的邮箱或用户名!", "Please-input-your-Password!": "请填写你的密码!",
"Please-input-your-Password!":"请填写你的密码!", "verify-email": "验证邮箱",
"account-info": "账户信息",
"verify-email":"验证邮箱", "reset-username": "修改用户名",
"account-info":"账户信息", "Reset-Email": "修改邮箱",
"reset-username":"修改用户名", "reset-password": "修改密码",
"Reset-Email":"修改邮箱", "old-password": "原密码",
"reset-password":"修改密码", "new-password": "新密码",
"old-password":"原密码", "Password-length-must-be-between-8-and-24-characters.": "密码必须为8-24位",
"new-password":"新密码", "email_exists": "邮箱已存在",
"Password-length-must-be-between-8-and-24-characters.":"密码必须为8-24位",
"email_exists":"邮箱已存在",
"update_success": "修改成功。请重新登录MC平台使更改生效，否则有可能无法进入游戏", "update_success": "修改成功。请重新登录MC平台使更改生效，否则有可能无法进入游戏",
"A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.":"一封验证邮件已经发送给您，请查看邮件完成修改。", "A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.": "一封验证邮件已经发送给您，请查看邮件完成修改。",
"Your-are-almost-done!": "即将完成邮箱验证",
"Your-are-almost-done!":"即将完成邮箱验证", "Thank-you!-This-is-the-last-step.": "恭喜，这是最后一步啦。",
"Thank-you!-This-is-the-last-step.":"恭喜，这是最后一步啦。", "Please click the following button to confirm your email address": "请点击以下按钮确认在萌立方使用您的邮箱地址",
"Please click the following button to confirm your email address":"请点击以下按钮确认在萌立方使用您的邮箱地址", "Finish-Verification": "完成邮箱验证",
"Finish-Verification":"完成邮箱验证", "After-verification,-you-can-sign-in-to-MoeCube-with-this-email-address.": "验证完成后，您就可以使用邮箱在萌立方客户端登录啦。",
"After-verification,-you-can-sign-in-to-MoeCube-with-this-email-address.":"验证完成后，您就可以使用邮箱在萌立方客户端登录啦。", "Welcome-to-MoeCube!": "欢迎加入萌立方这个大家庭！",
"Welcome-to-MoeCube!":"欢迎加入萌立方这个大家庭！",
"i_password_error": "密码错误", "i_password_error": "密码错误",
"i_user_unexists":"用户不存在", "i_user_unexists": "用户不存在",
"i_email_exists":"邮箱已存在", "i_email_exists": "邮箱已存在",
"i_username_exists":"用户名已存在", "i_username_exists": "用户名已存在",
"i_username_exists_or_invalid":"用户名已存在或格式有误", "i_username_exists_or_invalid": "用户名已存在或格式有误",
"i_not_found":"用户不存在", "i_not_found": "用户不存在",
"i_key_time_out":"此链接已过期", "i_key_time_out": "此链接已过期",
"i_key_invalid":"此链接已失效", "i_key_invalid": "此链接已失效",
"LogoutNow": "提前退出",
"LoggingOutIn": "即将在",
"没毛用":"防逗号报错,上线删" "Seconds": "秒后退出",
"TemporaryPrompt": "改名已关闭。下次将在10月1日开启。",
"ChangeSuccess": "修改成功，请重新登录生效。",
"EmailChangeSuccess":"请查看邮件完成修改",
"没毛用": "防逗号报错,上线删"
} }
} }
src/components/EmailForm.js
View file @ ed5a975d
import { Form, Input } from 'antd'; import { Button, Form, Input } from 'antd';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
...@@ -11,13 +11,15 @@ const formItemLayout = { ...@@ -11,13 +11,15 @@ const formItemLayout = {
class EmailForm extends React.Component { class EmailForm extends React.Component {
state = {
countdown: 0,
inCountdown: false, // Whether the countdown is active
};
// static contextTypes = { // static contextTypes = {
// intl: PropTypes.object.isRequired, // intl: PropTypes.object.isRequired,
// }; // };
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: { id } } = this.props; const { form, dispatch, user: { id } } = this.props;
if (e) { if (e) {
e.preventDefault(); e.preventDefault();
} }
...@@ -28,17 +30,48 @@ class EmailForm extends React.Component { ...@@ -28,17 +30,48 @@ class EmailForm extends React.Component {
const { email, password } = values; const { email, password } = values;
dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } }); 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() { render() {
const { form, dispatch, user, checkEmail, isEmailExists, messages } = this.props; const { form, dispatch, user, checkEmail, isEmailExists, messages } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { id, email } = user; const { id, email } = user;
// const { intl: { messages } } = this.context; // 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 = { const emailProps = {
fromItem: { fromItem: {
label: messages.email, label: messages.email,
...@@ -74,28 +107,47 @@ class EmailForm extends React.Component { ...@@ -74,28 +107,47 @@ class EmailForm extends React.Component {
type: 'password', type: 'password',
}, },
}; };
const { inCountdown, countdown } = this.state;
return ( return (
<Form onSubmit={this.onSubmit}> <div>
<FormItem {...emailProps.fromItem}> {inCountdown ? (
{getFieldDecorator('email', { ...emailProps.decorator })( <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh' }}>
<Input <div style={{ flex: 9 / 10, textAlign: 'center' }}>
{...emailProps.input} <h3>{ChangeSuccessText}</h3>
onBlur={() => dispatch({ type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), user_id: id } })} <h3>
/>, {loggingOutInText}
)} <span style={{ color: '#4da9ee', fontSize: '2em' }}>&nbsp;{`${countdown}`}</span>
</FormItem> <span>&nbsp;{secondsText}</span>
</h3>
<FormItem {...passwordProps.fromItem}> <br/>
{getFieldDecorator('password', { ...passwordProps.decorator })( <Button type="link" onClick={this.handleLogoutNow}>
<Input {...passwordProps.input} />, {logoutNowText}
)} </Button>
</FormItem> </div>
</div>
<FormItem> ) : (
<SubmitButton /> <Form onSubmit={this.onSubmit}>
</FormItem> <FormItem {...emailProps.fromItem}>
</Form> {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
View file @ ed5a975d
import { Form, Input } from 'antd'; import { Form, Input, Button } from 'antd';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
const FormItem = Form.Item; const FormItem = Form.Item;
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
wrapperCol: { span: 15 }, wrapperCol: { span: 15 },
...@@ -14,7 +12,10 @@ const formItemLayout = { ...@@ -14,7 +12,10 @@ const formItemLayout = {
class EmailForm extends React.Component { class EmailForm extends React.Component {
state = {
countdown: 0,
inCountdown: false, // 是否处于倒计时状态
};
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: { id } } = this.props; const { form, dispatch, user: { id } } = this.props;
...@@ -28,13 +29,47 @@ class EmailForm extends React.Component { ...@@ -28,13 +29,47 @@ class EmailForm extends React.Component {
const { new_password, password } = values; const { new_password, password } = values;
dispatch({ type: 'user/updateAccount', payload: { new_password, password, user_id: id } }); 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) => { checkPassword = (rule, value, callback) => {
const { form, messages } = this.props; const { form, messages } = this.props;
//const { intl: { messages } } = this.context; // const { intl: { messages } } = this.context;
if (value && value !== form.getFieldValue('new_password')) { if (value && value !== form.getFieldValue('new_password')) {
callback(messages['Incorrect-password.2']); callback(messages['Incorrect-password.2']);
} else { } else {
...@@ -54,7 +89,10 @@ class EmailForm extends React.Component { ...@@ -54,7 +89,10 @@ class EmailForm extends React.Component {
render() { render() {
const { form, messages } = this.props; const { form, messages } = this.props;
const { getFieldDecorator } = form; 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 = { const passwordProps = {
fromItem: { fromItem: {
label: messages['old-password'], label: messages['old-password'],
...@@ -100,31 +138,50 @@ class EmailForm extends React.Component { ...@@ -100,31 +138,50 @@ class EmailForm extends React.Component {
type: 'password', type: 'password',
}, },
}; };
const { inCountdown, countdown } = this.state;
return ( return (
<Form onSubmit={this.onSubmit}> <div>
<FormItem {...passwordProps.fromItem} label={messages['old-password']}> {inCountdown ? (
{getFieldDecorator('password')( <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh'}}>
<Input {...passwordProps.input} />, <div style={{flex: 9 / 10, textAlign: 'center'}}>
)} <h3>{ChangeSuccessText}</h3>
</FormItem> <h3>
{loggingOutInText}
<FormItem {...passwordProps.fromItem} label={messages['new-password']}> <span style={{ color: '#4da9ee', fontSize: '2em'}}>&nbsp;{`${countdown}`}</span>
{getFieldDecorator('new_password', { ...passwordProps.decorator })( <span>&nbsp;{secondsText}</span>
<Input {...passwordProps.input2} />, </h3>
)} <br/>
</FormItem> <Button type="link" onClick={this.handleLogoutNow}>
{logoutNowText}
<FormItem {...confirmProps.fromItem}> </Button>
{getFieldDecorator('confirm', { ...confirmProps.decorator })( </div>
<Input {...confirmProps.input} />, </div>
)} ) : (
</FormItem> <Form onSubmit={this.onSubmit}>
<FormItem {...passwordProps.fromItem} label={messages['old-password']}>
<FormItem> {getFieldDecorator('password')(
<SubmitButton /> <Input {...passwordProps.input} />,
</FormItem> )}
</Form> </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) { ...@@ -135,6 +192,7 @@ function mapStateToProps(state) {
user: { user }, user: { user },
common: { messages }, common: { messages },
} = state; } = state;
return { return {
messages, messages,
user, user,
......
src/components/UserNameForm.js
View file @ ed5a975d
import { Form, Input } from 'antd'; import {Button, Form, Input} from 'antd';
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
const FormItem = Form.Item; const FormItem = Form.Item;
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: {span: 4},
wrapperCol: { span: 15 }, wrapperCol: {span: 15},
}; };
class EmailForm extends React.Component { class EmailForm extends React.Component {
state = {
countdown: 0,
inCountdown: false, // Whether the countdown is active
};
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, user: { id } } = this.props; const {form, dispatch, user: {id}} = this.props;
if (e) { if (e) {
e.preventDefault(); e.preventDefault();
...@@ -21,19 +24,68 @@ class EmailForm extends React.Component { ...@@ -21,19 +24,68 @@ class EmailForm extends React.Component {
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const {username, password} = values;
const { username, password } = values; dispatch({type: 'user/updateAccount', payload: {username, password, user_id: id}});
this.setState({countdown: 5, inCountdown: true});
dispatch({ type: 'user/updateAccount', payload: { username, password, user_id: id } }); 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() { handleLogoutNow = () => {
const { form, dispatch, user, checkUsername, isUserNameExists, messages } = this.props; this.setState({countdown: 0}, () => {
const { getFieldDecorator } = form; this.handleLogout();
const { id, username } = user; });
};
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 = { const usernameProps = {
fromItem: { fromItem: {
label: messages.username, label: messages.username,
...@@ -47,7 +99,7 @@ class EmailForm extends React.Component { ...@@ -47,7 +99,7 @@ class EmailForm extends React.Component {
}, },
input: { input: {
placeholder: messages.username, 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 { ...@@ -70,39 +122,57 @@ class EmailForm extends React.Component {
type: 'password', type: 'password',
}, },
}; };
const {inCountdown, countdown} = this.state;
return ( return (
<Form onSubmit={this.onSubmit}> <div>
<FormItem {...usernameProps.fromItem}> {inCountdown ? (
{getFieldDecorator('username', { ...usernameProps.decorator })( <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100vh'}}>
<Input {...usernameProps.input} disabled/>, <div style={{flex: 9 / 10, textAlign: 'center'}}>
)} <h3>{ChangeSuccessText}</h3>
{ <h3>
<div class="alert alert-warning" role="alert">改名已关闭。下次将在10月1日开启。</div> {loggingOutInText}
} <span style={{color: '#4da9ee', fontSize: '2em'}}>&nbsp;{`${countdown}`}</span>
<span>&nbsp;{secondsText}</span>
</FormItem> </h3>
<br/>
<FormItem {...passwordProps.fromItem}> <Button type="link" onClick={this.handleLogoutNow}>
{getFieldDecorator('password', { ...passwordProps.decorator })( {logoutNowText}
<Input {...passwordProps.input} />, </Button>
)} </div>
</FormItem> </div>
) : (
<FormItem> <Form onSubmit={this.onSubmit}>
<SubmitButton /> <FormItem {...usernameProps.fromItem}>
</FormItem> {getFieldDecorator('username', {...usernameProps.decorator})(
</Form> <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) { function mapStateToProps(state) {
const { const {
user: { user }, user: {user},
auth: { isUserNameExists, checkUsername }, auth: {isUserNameExists, checkUsername},
common: { messages }, common: {messages},
} = state; } = state;
return { return {
user, user,
......
src/routes/Profiles.js
View file @ ed5a975d
...@@ -134,8 +134,8 @@ class Profiles extends React.Component { ...@@ -134,8 +134,8 @@ class Profiles extends React.Component {
{isUpload && <Format id="Reselect-Avatar"/>} {isUpload && <Format id="Reselect-Avatar"/>}
<input <input
type="file" onChange={this.onGetFile} ref={(file) => { type="file" onChange={this.onGetFile} ref={(file) => {
this.file = file; this.file = file;
}} style={{ display: 'none' }} }} style={{ display: 'none' }}
/> />
</label> </label>
</Button> </Button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment