maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 03:43:28 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Migrate EmailVerificationForm to Final Form

Browse source
This commit is contained in:
Hannu Lyytikainen 2018-05-18 17:04:55 +03:00
parent 4a0db248cd
commit 3d172412f3
1 changed files with 74 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
src/forms/EmailVerificationForm/EmailVerificationForm.js
View file

@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { bool } from 'prop-types';
import { compose } from 'redux';
import { FormattedMessage, injectIntl } from 'react-intl';
import { reduxForm, Field, propTypes as formPropTypes } from 'redux-form';
import { Form as FinalForm, Field } from 'react-final-form';
import {
Form,
NamedLink,
@ -14,79 +14,84 @@ import { propTypes } from '../../util/types';
import css from './EmailVerificationForm.css';
const EmailVerificationFormComponent = props => {
const { currentUser, inProgress, handleSubmit, verificationError } = props;
const EmailVerificationFormComponent = props => (
<FinalForm
{...props}
render={fieldRenderProps => {
const { currentUser, inProgress, handleSubmit, verificationError } = fieldRenderProps;
const { email, emailVerified, pendingEmail, profile } = currentUser.attributes;
const emailToVerify = <strong>{pendingEmail || email}</strong>;
const name = profile.firstName;
const { email, emailVerified, pendingEmail, profile } = currentUser.attributes;
const emailToVerify = <strong>{pendingEmail || email}</strong>;
const name = profile.firstName;
const errorMessage = (
<div className={css.error}>
<FormattedMessage id="EmailVerificationForm.verificationFailed" />
</div>
);
const submitInProgress = inProgress;
const submitDisabled = submitInProgress;
const verifyEmail = (
<div className={css.root}>
<div>
<IconEmailAttention className={css.modalIcon} />
<h1 className={css.modalTitle}>
<FormattedMessage id="EmailVerificationForm.verifyEmailAddress" />
</h1>
<p className={css.modalMessage}>
<FormattedMessage
id="EmailVerificationForm.finishAccountSetup"
values={{ email: emailToVerify }}
/>
</p>
{verificationError ? errorMessage : null}
</div>
<Form onSubmit={handleSubmit}>
<Field component="input" type="hidden" name="verificationToken" />
<div className={css.bottomWrapper}>
<PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
{inProgress ? (
<FormattedMessage id="EmailVerificationForm.verifying" />
) : (
<FormattedMessage id="EmailVerificationForm.verify" />
)}
</PrimaryButton>
const errorMessage = (
<div className={css.error}>
<FormattedMessage id="EmailVerificationForm.verificationFailed" />
</div>
</Form>
</div>
);
);
const alreadyVerified = (
<div className={css.root}>
<div>
<IconEmailSuccess className={css.modalIcon} />
<h1 className={css.modalTitle}>
<FormattedMessage id="EmailVerificationForm.successTitle" values={{ name }} />
</h1>
const submitInProgress = inProgress;
const submitDisabled = submitInProgress;
<p className={css.modalMessage}>
<FormattedMessage id="EmailVerificationForm.successText" />
</p>
</div>
const verifyEmail = (
<div className={css.root}>
<div>
<IconEmailAttention className={css.modalIcon} />
<h1 className={css.modalTitle}>
<FormattedMessage id="EmailVerificationForm.verifyEmailAddress" />
</h1>
<div className={css.bottomWrapper}>
<NamedLink className={css.submitButton} name="LandingPage">
<FormattedMessage id="EmailVerificationForm.successButtonText" />
</NamedLink>
</div>
</div>
);
<p className={css.modalMessage}>
<FormattedMessage
id="EmailVerificationForm.finishAccountSetup"
values={{ email: emailToVerify }}
/>
</p>
return emailVerified && !pendingEmail ? alreadyVerified : verifyEmail;
};
{verificationError ? errorMessage : null}
</div>
<Form onSubmit={handleSubmit}>
<Field component="input" type="hidden" name="verificationToken" />
<div className={css.bottomWrapper}>
<PrimaryButton type="submit" inProgress={submitInProgress} disabled={submitDisabled}>
{inProgress ? (
<FormattedMessage id="EmailVerificationForm.verifying" />
) : (
<FormattedMessage id="EmailVerificationForm.verify" />
)}
</PrimaryButton>
</div>
</Form>
</div>
);
const alreadyVerified = (
<div className={css.root}>
<div>
<IconEmailSuccess className={css.modalIcon} />
<h1 className={css.modalTitle}>
<FormattedMessage id="EmailVerificationForm.successTitle" values={{ name }} />
</h1>
<p className={css.modalMessage}>
<FormattedMessage id="EmailVerificationForm.successText" />
</p>
</div>
<div className={css.bottomWrapper}>
<NamedLink className={css.submitButton} name="LandingPage">
<FormattedMessage id="EmailVerificationForm.successButtonText" />
</NamedLink>
</div>
</div>
);
return emailVerified && !pendingEmail ? alreadyVerified : verifyEmail;
}}
/>
);
EmailVerificationFormComponent.defaultProps = {
currentUser: null,
@ -94,19 +99,12 @@ EmailVerificationFormComponent.defaultProps = {
verificationError: null,
};
const { bool } = PropTypes;
EmailVerificationFormComponent.propTypes = {
...formPropTypes,
inProgress: bool,
currentUser: propTypes.currentUser.isRequired,
verificationError: propTypes.error,
};
const defaultFormName = 'EmailVerificationForm';
const EmailVerificationForm = compose(reduxForm({ form: defaultFormName }), injectIntl)(
EmailVerificationFormComponent
);
const EmailVerificationForm = compose(injectIntl)(EmailVerificationFormComponent);
export default EmailVerificationForm;