- 调整注册页面
sin
parent
46f4b220c9
commit
ed476c671d
|
|
@ -63,10 +63,10 @@ class UserLayout extends Component {
|
|||
<div className={styles.header}>
|
||||
<Link to="/">
|
||||
<img alt="logo" className={styles.logo} src={logo} />
|
||||
<span className={styles.title}>Ant Design</span>
|
||||
<span className={styles.title}>后台管理系统</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>
|
||||
<div className={styles.desc}>TODO....</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,37 +3,13 @@ import { connect } from 'dva';
|
|||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||
import Link from 'umi/link';
|
||||
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';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Option } = Select;
|
||||
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 }) => ({
|
||||
register,
|
||||
submitting: loading.effects['register/submit'],
|
||||
|
|
@ -42,9 +18,6 @@ const passwordProgressMap = {
|
|||
class Register extends Component {
|
||||
state = {
|
||||
count: 0,
|
||||
confirmDirty: false,
|
||||
visible: false,
|
||||
help: '',
|
||||
prefix: '86',
|
||||
};
|
||||
|
||||
|
|
@ -77,24 +50,13 @@ class Register extends Component {
|
|||
}, 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 => {
|
||||
e.preventDefault();
|
||||
const { form, dispatch } = this.props;
|
||||
form.validateFields({ force: true }, (err, values) => {
|
||||
if (!err) {
|
||||
const { prefix } = this.state;
|
||||
console.log('123', values);
|
||||
dispatch({
|
||||
type: 'register/submit',
|
||||
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 => {
|
||||
this.setState({
|
||||
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() {
|
||||
const { form, submitting } = this.props;
|
||||
const { getFieldDecorator } = form;
|
||||
const { count, prefix, help, visible } = this.state;
|
||||
const { count, prefix } = this.state;
|
||||
return (
|
||||
<div className={styles.main}>
|
||||
<h3>
|
||||
<FormattedMessage id="app.register.register" />
|
||||
</h3>
|
||||
<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>
|
||||
<InputGroup compact>
|
||||
<Select
|
||||
|
|
@ -260,7 +95,7 @@ class Register extends Component {
|
|||
<Option value="86">+86</Option>
|
||||
<Option value="87">+87</Option>
|
||||
</Select>
|
||||
{getFieldDecorator('mobile', {
|
||||
{getFieldDecorator('username', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
|
|
@ -283,7 +118,7 @@ class Register extends Component {
|
|||
<FormItem>
|
||||
<Row gutter={8}>
|
||||
<Col span={16}>
|
||||
{getFieldDecorator('captcha', {
|
||||
{getFieldDecorator('password', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export default {
|
|||
|
||||
effects: {
|
||||
*submit({ payload }, { call, put }) {
|
||||
console.error(1);
|
||||
const response = yield call(fakeRegister, payload);
|
||||
yield put({
|
||||
type: 'registerHandle',
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export async function fakeAccountLogin(params) {
|
|||
}
|
||||
|
||||
export async function fakeRegister(params) {
|
||||
return request('/api/register', {
|
||||
return request(`/admin-api/admin/passport/login/?${stringify(params)}`, {
|
||||
method: 'POST',
|
||||
body: params,
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue