Skip to content

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

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

parent 4bd1fd78
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 188 deletions
i18n.json
View file @ ed5a975d
This diff is collapsed.
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,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
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,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
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 } });
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
View file @ ed5a975d
......@@ -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>
......
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