- 调整注册页面
parent
46f4b220c9
commit
ed476c671d
|
@ -63,10 +63,10 @@ class UserLayout extends Component {
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
<Link to="/">
|
<Link to="/">
|
||||||
<img alt="logo" className={styles.logo} src={logo} />
|
<img alt="logo" className={styles.logo} src={logo} />
|
||||||
<span className={styles.title}>Ant Design</span>
|
<span className={styles.title}>后台管理系统</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
|
<div className={styles.desc}>TODO....</div>
|
||||||
</div>
|
</div>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,37 +3,13 @@ import { connect } from 'dva';
|
||||||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||||
import Link from 'umi/link';
|
import Link from 'umi/link';
|
||||||
import router from 'umi/router';
|
import router from 'umi/router';
|
||||||
import { Form, Input, Button, Select, Row, Col, Popover, Progress } from 'antd';
|
import { Form, Input, Button, Select, Row, Col } from 'antd';
|
||||||
import styles from './Register.less';
|
import styles from './Register.less';
|
||||||
|
|
||||||
const FormItem = Form.Item;
|
const FormItem = Form.Item;
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
const InputGroup = Input.Group;
|
const InputGroup = Input.Group;
|
||||||
|
|
||||||
const passwordStatusMap = {
|
|
||||||
ok: (
|
|
||||||
<div className={styles.success}>
|
|
||||||
<FormattedMessage id="validation.password.strength.strong" />
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
pass: (
|
|
||||||
<div className={styles.warning}>
|
|
||||||
<FormattedMessage id="validation.password.strength.medium" />
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
poor: (
|
|
||||||
<div className={styles.error}>
|
|
||||||
<FormattedMessage id="validation.password.strength.short" />
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
const passwordProgressMap = {
|
|
||||||
ok: 'success',
|
|
||||||
pass: 'normal',
|
|
||||||
poor: 'exception',
|
|
||||||
};
|
|
||||||
|
|
||||||
@connect(({ register, loading }) => ({
|
@connect(({ register, loading }) => ({
|
||||||
register,
|
register,
|
||||||
submitting: loading.effects['register/submit'],
|
submitting: loading.effects['register/submit'],
|
||||||
|
@ -42,9 +18,6 @@ const passwordProgressMap = {
|
||||||
class Register extends Component {
|
class Register extends Component {
|
||||||
state = {
|
state = {
|
||||||
count: 0,
|
count: 0,
|
||||||
confirmDirty: false,
|
|
||||||
visible: false,
|
|
||||||
help: '',
|
|
||||||
prefix: '86',
|
prefix: '86',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -77,24 +50,13 @@ class Register extends Component {
|
||||||
}, 1000);
|
}, 1000);
|
||||||
};
|
};
|
||||||
|
|
||||||
getPasswordStatus = () => {
|
|
||||||
const { form } = this.props;
|
|
||||||
const value = form.getFieldValue('password');
|
|
||||||
if (value && value.length > 9) {
|
|
||||||
return 'ok';
|
|
||||||
}
|
|
||||||
if (value && value.length > 5) {
|
|
||||||
return 'pass';
|
|
||||||
}
|
|
||||||
return 'poor';
|
|
||||||
};
|
|
||||||
|
|
||||||
handleSubmit = e => {
|
handleSubmit = e => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const { form, dispatch } = this.props;
|
const { form, dispatch } = this.props;
|
||||||
form.validateFields({ force: true }, (err, values) => {
|
form.validateFields({ force: true }, (err, values) => {
|
||||||
if (!err) {
|
if (!err) {
|
||||||
const { prefix } = this.state;
|
const { prefix } = this.state;
|
||||||
|
console.log('123', values);
|
||||||
dispatch({
|
dispatch({
|
||||||
type: 'register/submit',
|
type: 'register/submit',
|
||||||
payload: {
|
payload: {
|
||||||
|
@ -106,149 +68,22 @@ class Register extends Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleConfirmBlur = e => {
|
|
||||||
const { value } = e.target;
|
|
||||||
const { confirmDirty } = this.state;
|
|
||||||
this.setState({ confirmDirty: confirmDirty || !!value });
|
|
||||||
};
|
|
||||||
|
|
||||||
checkConfirm = (rule, value, callback) => {
|
|
||||||
const { form } = this.props;
|
|
||||||
if (value && value !== form.getFieldValue('password')) {
|
|
||||||
callback(formatMessage({ id: 'validation.password.twice' }));
|
|
||||||
} else {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
checkPassword = (rule, value, callback) => {
|
|
||||||
const { visible, confirmDirty } = this.state;
|
|
||||||
if (!value) {
|
|
||||||
this.setState({
|
|
||||||
help: formatMessage({ id: 'validation.password.required' }),
|
|
||||||
visible: !!value,
|
|
||||||
});
|
|
||||||
callback('error');
|
|
||||||
} else {
|
|
||||||
this.setState({
|
|
||||||
help: '',
|
|
||||||
});
|
|
||||||
if (!visible) {
|
|
||||||
this.setState({
|
|
||||||
visible: !!value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (value.length < 6) {
|
|
||||||
callback('error');
|
|
||||||
} else {
|
|
||||||
const { form } = this.props;
|
|
||||||
if (value && confirmDirty) {
|
|
||||||
form.validateFields(['confirm'], { force: true });
|
|
||||||
}
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
changePrefix = value => {
|
changePrefix = value => {
|
||||||
this.setState({
|
this.setState({
|
||||||
prefix: value,
|
prefix: value,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
renderPasswordProgress = () => {
|
|
||||||
const { form } = this.props;
|
|
||||||
const value = form.getFieldValue('password');
|
|
||||||
const passwordStatus = this.getPasswordStatus();
|
|
||||||
return value && value.length ? (
|
|
||||||
<div className={styles[`progress-${passwordStatus}`]}>
|
|
||||||
<Progress
|
|
||||||
status={passwordProgressMap[passwordStatus]}
|
|
||||||
className={styles.progress}
|
|
||||||
strokeWidth={6}
|
|
||||||
percent={value.length * 10 > 100 ? 100 : value.length * 10}
|
|
||||||
showInfo={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { form, submitting } = this.props;
|
const { form, submitting } = this.props;
|
||||||
const { getFieldDecorator } = form;
|
const { getFieldDecorator } = form;
|
||||||
const { count, prefix, help, visible } = this.state;
|
const { count, prefix } = this.state;
|
||||||
return (
|
return (
|
||||||
<div className={styles.main}>
|
<div className={styles.main}>
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage id="app.register.register" />
|
<FormattedMessage id="app.register.register" />
|
||||||
</h3>
|
</h3>
|
||||||
<Form onSubmit={this.handleSubmit}>
|
<Form onSubmit={this.handleSubmit}>
|
||||||
<FormItem>
|
|
||||||
{getFieldDecorator('mail', {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: formatMessage({ id: 'validation.email.required' }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'email',
|
|
||||||
message: formatMessage({ id: 'validation.email.wrong-format' }),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})(
|
|
||||||
<Input size="large" placeholder={formatMessage({ id: 'form.email.placeholder' })} />
|
|
||||||
)}
|
|
||||||
</FormItem>
|
|
||||||
<FormItem help={help}>
|
|
||||||
<Popover
|
|
||||||
getPopupContainer={node => node.parentNode}
|
|
||||||
content={
|
|
||||||
<div style={{ padding: '4px 0' }}>
|
|
||||||
{passwordStatusMap[this.getPasswordStatus()]}
|
|
||||||
{this.renderPasswordProgress()}
|
|
||||||
<div style={{ marginTop: 10 }}>
|
|
||||||
<FormattedMessage id="validation.password.strength.msg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
overlayStyle={{ width: 240 }}
|
|
||||||
placement="right"
|
|
||||||
visible={visible}
|
|
||||||
>
|
|
||||||
{getFieldDecorator('password', {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
validator: this.checkPassword,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})(
|
|
||||||
<Input
|
|
||||||
size="large"
|
|
||||||
type="password"
|
|
||||||
placeholder={formatMessage({ id: 'form.password.placeholder' })}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Popover>
|
|
||||||
</FormItem>
|
|
||||||
<FormItem>
|
|
||||||
{getFieldDecorator('confirm', {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: formatMessage({ id: 'validation.confirm-password.required' }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
validator: this.checkConfirm,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})(
|
|
||||||
<Input
|
|
||||||
size="large"
|
|
||||||
type="password"
|
|
||||||
placeholder={formatMessage({ id: 'form.confirm-password.placeholder' })}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</FormItem>
|
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<InputGroup compact>
|
<InputGroup compact>
|
||||||
<Select
|
<Select
|
||||||
|
@ -260,7 +95,7 @@ class Register extends Component {
|
||||||
<Option value="86">+86</Option>
|
<Option value="86">+86</Option>
|
||||||
<Option value="87">+87</Option>
|
<Option value="87">+87</Option>
|
||||||
</Select>
|
</Select>
|
||||||
{getFieldDecorator('mobile', {
|
{getFieldDecorator('username', {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -283,7 +118,7 @@ class Register extends Component {
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<Row gutter={8}>
|
<Row gutter={8}>
|
||||||
<Col span={16}>
|
<Col span={16}>
|
||||||
{getFieldDecorator('captcha', {
|
{getFieldDecorator('password', {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
|
|
|
@ -11,6 +11,7 @@ export default {
|
||||||
|
|
||||||
effects: {
|
effects: {
|
||||||
*submit({ payload }, { call, put }) {
|
*submit({ payload }, { call, put }) {
|
||||||
|
console.error(1);
|
||||||
const response = yield call(fakeRegister, payload);
|
const response = yield call(fakeRegister, payload);
|
||||||
yield put({
|
yield put({
|
||||||
type: 'registerHandle',
|
type: 'registerHandle',
|
||||||
|
|
|
@ -111,7 +111,7 @@ export async function fakeAccountLogin(params) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function fakeRegister(params) {
|
export async function fakeRegister(params) {
|
||||||
return request('/api/register', {
|
return request(`/admin-api/admin/passport/login/?${stringify(params)}`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: params,
|
body: params,
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue