mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-07-08 07:50:19 +05:30
#41: integrate change-email with router
This commit is contained in:
parent
98211a7ecf
commit
fa5ba292cb
@ -22,21 +22,34 @@ export default class ChangeEmail extends Component {
|
|||||||
static displayName = 'ChangeEmail';
|
static displayName = 'ChangeEmail';
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
|
onChangeStep: PropTypes.func,
|
||||||
email: PropTypes.string.isRequired,
|
email: PropTypes.string.isRequired,
|
||||||
form: PropTypes.instanceOf(FormModel),
|
form: PropTypes.instanceOf(FormModel),
|
||||||
onSubmit: PropTypes.func.isRequired
|
onSubmit: PropTypes.func.isRequired,
|
||||||
|
step: PropTypes.oneOf([0, 1, 2]),
|
||||||
|
code: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
static get defaultProps() {
|
static get defaultProps() {
|
||||||
return {
|
return {
|
||||||
form: new FormModel()
|
form: new FormModel(),
|
||||||
|
onChangeStep() {},
|
||||||
|
step: 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
activeStep: 0
|
activeStep: this.props.step,
|
||||||
|
code: this.props.code || ''
|
||||||
};
|
};
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
this.setState({
|
||||||
|
activeStep: nextProps.step || this.state.activeStep,
|
||||||
|
code: nextProps.code || ''
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {form} = this.props;
|
const {form} = this.props;
|
||||||
const {activeStep} = this.state;
|
const {activeStep} = this.state;
|
||||||
@ -100,7 +113,8 @@ export default class ChangeEmail extends Component {
|
|||||||
|
|
||||||
renderStepForms() {
|
renderStepForms() {
|
||||||
const {form, email} = this.props;
|
const {form, email} = this.props;
|
||||||
const {activeStep} = this.state;
|
const {activeStep, code} = this.state;
|
||||||
|
const isCodeEntered = !!this.props.code;
|
||||||
|
|
||||||
const activeStepHeight = this.state[`step${activeStep}Height`] || 0;
|
const activeStepHeight = this.state[`step${activeStep}Height`] || 0;
|
||||||
|
|
||||||
@ -159,6 +173,9 @@ export default class ChangeEmail extends Component {
|
|||||||
<div className={styles.formRow}>
|
<div className={styles.formRow}>
|
||||||
<Input {...form.bindField('initializationCode')}
|
<Input {...form.bindField('initializationCode')}
|
||||||
required
|
required
|
||||||
|
disabled={isCodeEntered}
|
||||||
|
value={code}
|
||||||
|
onChange={this.onCodeInput}
|
||||||
skin="light"
|
skin="light"
|
||||||
color="violet"
|
color="violet"
|
||||||
placeholder={messages.codePlaceholder}
|
placeholder={messages.codePlaceholder}
|
||||||
@ -195,6 +212,9 @@ export default class ChangeEmail extends Component {
|
|||||||
<div className={styles.formRow}>
|
<div className={styles.formRow}>
|
||||||
<Input {...form.bindField('finalizationCode')}
|
<Input {...form.bindField('finalizationCode')}
|
||||||
required
|
required
|
||||||
|
disabled={isCodeEntered}
|
||||||
|
value={code}
|
||||||
|
onChange={this.onCodeInput}
|
||||||
skin="light"
|
skin="light"
|
||||||
color="violet"
|
color="violet"
|
||||||
placeholder={messages.codePlaceholder}
|
placeholder={messages.codePlaceholder}
|
||||||
@ -225,9 +245,19 @@ export default class ChangeEmail extends Component {
|
|||||||
this.setState({
|
this.setState({
|
||||||
activeStep: nextStep
|
activeStep: nextStep
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.props.onChangeStep(nextStep);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onCodeInput = (event) => {
|
||||||
|
const {value} = event.target;
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
code: this.props.code || value
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
isLastStep() {
|
isLastStep() {
|
||||||
return this.state.activeStep + 1 === STEPS_TOTAL;
|
return this.state.activeStep + 1 === STEPS_TOTAL;
|
||||||
}
|
}
|
||||||
|
@ -7,20 +7,49 @@ class ProfileChangeEmailPage extends Component {
|
|||||||
static displayName = 'ProfileChangeEmailPage';
|
static displayName = 'ProfileChangeEmailPage';
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
email: PropTypes.string.isRequired
|
email: PropTypes.string.isRequired,
|
||||||
|
params: PropTypes.shape({
|
||||||
|
step: PropTypes.oneOf(['step1', 'step2', 'step3']),
|
||||||
|
code: PropTypes.string
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
static contextTypes = {
|
||||||
|
router: PropTypes.shape({
|
||||||
|
push: PropTypes.func
|
||||||
|
}).isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
form = new FormModel();
|
form = new FormModel();
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
const step = this.props.params.step;
|
||||||
|
|
||||||
|
if (step && !/^step\d$/.test(step)) {
|
||||||
|
// wrong param value
|
||||||
|
// TODO: probably we should decide with something better here
|
||||||
|
this.context.router.push('/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const {params: {step, code}} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ChangeEmail form={this.form}
|
<ChangeEmail form={this.form}
|
||||||
onSubmit={this.onSubmit}
|
onSubmit={this.onSubmit}
|
||||||
email={this.props.email}
|
email={this.props.email}
|
||||||
|
step={step ? step.slice(-1) * 1 - 1 : step}
|
||||||
|
onChangeStep={this.onChangeStep}
|
||||||
|
code={code}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onChangeStep = (step) => {
|
||||||
|
this.context.router.push(`/profile/change-email/step${++step}`);
|
||||||
|
};
|
||||||
|
|
||||||
onSubmit = () => {
|
onSubmit = () => {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -61,7 +61,7 @@ export default function routesFactory(store) {
|
|||||||
<Route path="profile" component={ProfilePage} {...userOnly}>
|
<Route path="profile" component={ProfilePage} {...userOnly}>
|
||||||
<Route path="change-password" component={ProfileChangePasswordPage} />
|
<Route path="change-password" component={ProfileChangePasswordPage} />
|
||||||
<Route path="change-username" component={ProfileChangeUsernamePage} />
|
<Route path="change-username" component={ProfileChangeUsernamePage} />
|
||||||
<Route path="change-email" component={ProfileChangeEmailPage} />
|
<Route path="change-email(/:step)(/:code)" component={ProfileChangeEmailPage} />
|
||||||
</Route>
|
</Route>
|
||||||
</Route>
|
</Route>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user