Skip to content

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

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

parent 4bd1fd78
Show whitespace changes
Inline Side-by-side
Showing with 365 additions and 186 deletions
i18n.json
View file @ ed5a975d
{
"en-US": {
"title":"MoeCube",
"Home":"Home",
"BBS":"BBS",
"DATABASE":"DataBase",
"title": "MoeCube",
"Home": "Home",
"BBS": "BBS",
"DATABASE": "DataBase",
"username": "User Name",
"email": "E-Mail",
"password": "Password",
"user-info": "User Info",
"reset-info": "Reset User Info",
"Change-Avatar" :"Change Avatar",
"Upload-Avatar" :"Confirm Upload Avatar",
"Reselect-Avatar":"Reselect Avatar",
"upload":"upload",
"Change-Avatar": "Change Avatar",
"Upload-Avatar": "Confirm Upload Avatar",
"Reselect-Avatar": "Reselect Avatar",
"upload": "upload",
"avatar": "Avatar",
"nickname": "Nickname",
"Nickname-Hint": "This nickname is only used in the forum.",
......@@ -28,17 +28,17 @@
"sign-up": "Sign Up",
"sign-in": "Sign In",
"sign-out": "Sign out",
"User-Center":"User Center",
"Please-sign-in":"Please sign In",
"User-Center": "User Center",
"Please-sign-in": "Please sign In",
"email-address-or-username": "E-Mail or Username",
"register-now": "register-now!",
"register":"register",
"register": "register",
"forgot-password": "Forgot Password",
"send-email": "Send Email",
"reset-success": "reset success",
"reset-fail": "reset fail",
"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.",
"User-name-can-not-be-empty.": "User name can not be empty.",
"You-can-not-use-this-username.": "You can not use this username.",
......@@ -61,55 +61,55 @@
"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.",
"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-Password!":"Please input your Password!",
"verify-email":"Verify Email",
"account-info":"Account Info",
"reset-username":"Reset Username",
"Reset-Email":"Reset Email",
"reset-password":"Reset Password",
"old-password":"old password",
"new-password":"new password",
"Password-length-must-be-between-8-and-24-characters.":"Password length must be between 8 and 24 characters.",
"email_exists":"email exists",
"Please input your account!": "Please input your email or username!",
"Please-input-your-Password!": "Please input your Password!",
"verify-email": "Verify Email",
"account-info": "Account Info",
"reset-username": "Reset Username",
"Reset-Email": "Reset Email",
"reset-password": "Reset Password",
"old-password": "old password",
"new-password": "new password",
"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!",
"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!",
"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": "Incorrect password. ",
"i_user_unexists":"User does not exisit.",
"i_email_exists":"email is exists",
"i_username_exists":"username is exists",
"i_username_exists_or_invalid":"username is exists or invalid",
"i_not_found":"user unexists",
"i_key_time_out":"url is time out",
"i_key_invalid":"url is invalid",
"没毛用":"防逗号报错,上线删"
"i_user_unexists": "User does not exisit.",
"i_email_exists": "email is exists",
"i_username_exists": "username is exists",
"i_username_exists_or_invalid": "username is exists or invalid",
"i_not_found": "user unexists",
"i_key_time_out": "url is time out",
"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": {
"title":"萌立方",
"Home":"主页",
"BBS":"社区",
"DATABASE":"数据库",
"title": "萌立方",
"Home": "主页",
"BBS": "社区",
"DATABASE": "数据库",
"username": "用户名",
"email": "邮箱",
"password": "密码",
"user-info": "用户信息",
"reset-info": "修改信息",
"Change-Avatar" :"修改头像",
"Upload-Avatar":"确认上传头像",
"Reselect-Avatar":"重新选择头像",
"upload":"上传",
"Change-Avatar": "修改头像",
"Upload-Avatar": "确认上传头像",
"Reselect-Avatar": "重新选择头像",
"upload": "上传",
"avatar": "头像",
"nickname": "昵称",
"Nickname-Hint": "昵称只在论坛显示，如需修改游戏和聊天室里显示的名字，请修改用户名",
......@@ -125,17 +125,17 @@
"sign-up": "注册",
"sign-in": "登录",
"sign-out": "登出",
"User-Center":"用户中心",
"Please-sign-in":"您尚未登录，请先登录",
"User-Center": "用户中心",
"Please-sign-in": "您尚未登录，请先登录",
"email-address-or-username": "邮箱或用户名",
"register-now": "现在注册",
"register":"注册",
"register": "注册",
"forgot-password": "忘记密码",
"send-email": "发送邮件",
"reset-success": "修改成功。请重新登录MC平台使更改生效，否则有可能无法进入游戏",
"reset-fail": "修改失败",
"reset-password2": "重置密码",
"remember-me":"记住我",
"remember-me": "记住我",
"Please-use-a-correct-E-Mail-address.": "请填写正确的邮箱地址",
"User-name-can-not-be-empty.": "用户名不能为空",
"You-can-not-use-this-username.": "用户名不合法",
......@@ -160,40 +160,39 @@
"didnt receive verification email 2": "获取验证邮件。",
"A verification email has been sent to you.": "已经向您发送了一封验证邮件，请您查看Email完成验证。",
"Your email has been updated.": "邮箱已经更新，您将会收到一封验证邮件，请您查看Email完成验证。",
"Please input your account!":"请填写你的邮箱或用户名!",
"Please-input-your-Password!":"请填写你的密码!",
"verify-email":"验证邮箱",
"account-info":"账户信息",
"reset-username":"修改用户名",
"Reset-Email":"修改邮箱",
"reset-password":"修改密码",
"old-password":"原密码",
"new-password":"新密码",
"Password-length-must-be-between-8-and-24-characters.":"密码必须为8-24位",
"email_exists":"邮箱已存在",
"Please input your account!": "请填写你的邮箱或用户名!",
"Please-input-your-Password!": "请填写你的密码!",
"verify-email": "验证邮箱",
"account-info": "账户信息",
"reset-username": "修改用户名",
"Reset-Email": "修改邮箱",
"reset-password": "修改密码",
"old-password": "原密码",
"new-password": "新密码",
"Password-length-must-be-between-8-and-24-characters.": "密码必须为8-24位",
"email_exists": "邮箱已存在",
"update_success": "修改成功。请重新登录MC平台使更改生效，否则有可能无法进入游戏",
"A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.":"一封验证邮件已经发送给您，请查看邮件完成修改。",
"Your-are-almost-done!":"即将完成邮箱验证",
"Thank-you!-This-is-the-last-step.":"恭喜，这是最后一步啦。",
"Please click the following button to confirm your email address":"请点击以下按钮确认在萌立方使用您的邮箱地址",
"Finish-Verification":"完成邮箱验证",
"After-verification,-you-can-sign-in-to-MoeCube-with-this-email-address.":"验证完成后，您就可以使用邮箱在萌立方客户端登录啦。",
"Welcome-to-MoeCube!":"欢迎加入萌立方这个大家庭！",
"A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.": "一封验证邮件已经发送给您，请查看邮件完成修改。",
"Your-are-almost-done!": "即将完成邮箱验证",
"Thank-you!-This-is-the-last-step.": "恭喜，这是最后一步啦。",
"Please click the following button to confirm your email address": "请点击以下按钮确认在萌立方使用您的邮箱地址",
"Finish-Verification": "完成邮箱验证",
"After-verification,-you-can-sign-in-to-MoeCube-with-this-email-address.": "验证完成后，您就可以使用邮箱在萌立方客户端登录啦。",
"Welcome-to-MoeCube!": "欢迎加入萌立方这个大家庭！",
"i_password_error": "密码错误",
"i_user_unexists":"用户不存在",
"i_email_exists":"邮箱已存在",
"i_username_exists":"用户名已存在",
"i_username_exists_or_invalid":"用户名已存在或格式有误",
"i_not_found":"用户不存在",
"i_key_time_out":"此链接已过期",
"i_key_invalid":"此链接已失效",
"没毛用":"防逗号报错,上线删"
"i_user_unexists": "用户不存在",
"i_email_exists": "邮箱已存在",
"i_username_exists": "用户名已存在",
"i_username_exists_or_invalid": "用户名已存在或格式有误",
"i_not_found": "用户不存在",
"i_key_time_out": "此链接已过期",
"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 { 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,8 +107,25 @@ class EmailForm extends React.Component {
type: 'password',
},
};
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' }}>
<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 })(
......@@ -96,6 +146,8 @@ class EmailForm extends React.Component {
<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 { 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,8 +138,25 @@ class EmailForm extends React.Component {
type: 'password',
},
};
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'}}>
<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')(
......@@ -125,6 +180,8 @@ class EmailForm extends React.Component {
<SubmitButton />
</FormItem>
</Form>
)}
</div>
);
}
}
......@@ -135,6 +192,7 @@ function mapStateToProps(state) {
user: { user },
common: { messages },
} = state;
return {
messages,
user,
......
src/components/UserNameForm.js
View file @ ed5a975d
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}});
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;
};
const { username, password } = values;
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();
}
};
dispatch({ type: 'user/updateAccount', payload: { username, password, user_id: id } });
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 {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 (
<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 })(
{getFieldDecorator('username', {...usernameProps.decorator})(
<Input {...usernameProps.input} disabled/>,
)}
{
<div class="alert alert-warning" role="alert">改名已关闭。下次将在10月1日开启。</div>
<div class="alert alert-warning" role="alert">{temporaryPromptText}</div>
}
</FormItem>
<FormItem {...passwordProps.fromItem}>
{getFieldDecorator('password', { ...passwordProps.decorator })(
{getFieldDecorator('password', {...passwordProps.decorator})(
<Input {...passwordProps.input} />,
)}
</FormItem>
<FormItem>
<SubmitButton />
<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,
......
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