- 调整注册页面

This commit is contained in:
sin 2019-03-01 15:05:56 +08:00
parent 46f4b220c9
commit ed476c671d
4 changed files with 9 additions and 173 deletions

View File

@ -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>

View File

@ -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,

View File

@ -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',

View File

@ -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,
}); });