diff --git a/src/containers/PasswordResetForm/PasswordResetForm.css b/src/containers/PasswordResetForm/PasswordResetForm.css new file mode 100644 index 00000000..4377786e --- /dev/null +++ b/src/containers/PasswordResetForm/PasswordResetForm.css @@ -0,0 +1,15 @@ +.root { + +} + +.passwordInput { + /* Leave space between the input and the button below when the + viewport height is small */ + margin-bottom: 24px; +} + +.submitButton { + /* In a flexbox context, this makes the button position itself to the + bottom */ + margin-top: auto; +} diff --git a/src/containers/PasswordResetForm/PasswordResetForm.example.js b/src/containers/PasswordResetForm/PasswordResetForm.example.js new file mode 100644 index 00000000..a4da189a --- /dev/null +++ b/src/containers/PasswordResetForm/PasswordResetForm.example.js @@ -0,0 +1,12 @@ +/* eslint-disable no-console */ +import PasswordResetForm from './PasswordResetForm'; + +export const Empty = { + component: PasswordResetForm, + props: { + onSubmit(values) { + console.log('submit with values:', values); + }, + }, + group: 'forms', +}; diff --git a/src/containers/PasswordResetForm/PasswordResetForm.js b/src/containers/PasswordResetForm/PasswordResetForm.js new file mode 100644 index 00000000..2f762bd8 --- /dev/null +++ b/src/containers/PasswordResetForm/PasswordResetForm.js @@ -0,0 +1,78 @@ +import React, { PropTypes } from 'react'; +import { compose } from 'redux'; +import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; +import { reduxForm, propTypes as formPropTypes } from 'redux-form'; +import classNames from 'classnames'; +import { PrimaryButton, TextInputField } from '../../components'; +import * as validators from '../../util/validators'; + +import css from './PasswordResetForm.css'; + +const PasswordResetFormComponent = props => { + const { + rootClassName, + className, + form, + handleSubmit, + submitting, + inProgress, + intl, + invalid, + } = props; + + // password + const passwordLabel = intl.formatMessage({ + id: 'PasswordResetForm.passwordLabel', + }); + const passwordPlaceholder = intl.formatMessage({ + id: 'PasswordResetForm.passwordPlaceholder', + }); + const passwordRequiredMessage = intl.formatMessage({ + id: 'PasswordResetForm.passwordRequired', + }); + const passwordRequired = validators.required(passwordRequiredMessage); + + const classes = classNames(rootClassName || css.root, className); + const submitDisabled = invalid || submitting || inProgress; + + return ( +
+ + + + + + ); +}; + +PasswordResetFormComponent.defaultProps = { + rootClassName: null, + className: null, + inProgress: false, +}; + +const { string, bool } = PropTypes; + +PasswordResetFormComponent.propTypes = { + ...formPropTypes, + rootClassName: string, + className: string, + inProgress: bool, + intl: intlShape.isRequired, +}; + +const defaultFormName = 'PasswordResetForm'; + +const PasswordResetForm = compose(reduxForm({ form: defaultFormName }), injectIntl)( + PasswordResetFormComponent +); + +export default PasswordResetForm; diff --git a/src/containers/index.js b/src/containers/index.js index 1f55c1b7..2ede665f 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -8,8 +8,8 @@ import EditListingLocationForm from './EditListingLocationForm/EditListingLocati import EditListingPage from './EditListingPage/EditListingPage'; import EditListingPhotosForm from './EditListingPhotosForm/EditListingPhotosForm'; import EditListingPricingForm from './EditListingPricingForm/EditListingPricingForm'; -import EmailVerificationPage from './EmailVerificationPage/EmailVerificationPage'; import EmailVerificationForm from './EmailVerificationForm/EmailVerificationForm'; +import EmailVerificationPage from './EmailVerificationPage/EmailVerificationPage'; import InboxPage from './InboxPage/InboxPage'; import LandingPage from './LandingPage/LandingPage'; import ListingPage from './ListingPage/ListingPage'; @@ -20,6 +20,7 @@ import NotFoundPage from './NotFoundPage/NotFoundPage'; import OrderPage from './OrderPage/OrderPage'; import PasswordForgottenForm from './PasswordForgottenForm/PasswordForgottenForm'; import PasswordForgottenPage from './PasswordForgottenPage/PasswordForgottenPage'; +import PasswordResetForm from './PasswordResetForm/PasswordResetForm'; import PasswordResetPage from './PasswordResetPage/PasswordResetPage'; import PayoutDetailsForm from './PayoutDetailsForm/PayoutDetailsForm'; import PayoutPreferencesPage from './PayoutPreferencesPage/PayoutPreferencesPage'; @@ -45,8 +46,8 @@ export { EditListingPage, EditListingPhotosForm, EditListingPricingForm, - EmailVerificationPage, EmailVerificationForm, + EmailVerificationPage, InboxPage, LandingPage, ListingPage, @@ -57,6 +58,7 @@ export { OrderPage, PasswordForgottenForm, PasswordForgottenPage, + PasswordResetForm, PasswordResetPage, PayoutDetailsForm, PayoutPreferencesPage, diff --git a/src/examples.js b/src/examples.js index 0481fe55..5425c9cd 100644 --- a/src/examples.js +++ b/src/examples.js @@ -44,6 +44,7 @@ import * as EditListingPricingForm import * as LoginForm from './containers/LoginForm/LoginForm.example'; import * as PasswordForgottenForm from './containers/PasswordForgottenForm/PasswordForgottenForm.example'; +import * as PasswordResetForm from './containers/PasswordResetForm/PasswordResetForm.example'; import * as PayoutDetailsForm from './containers/PayoutDetailsForm/PayoutDetailsForm.example'; import * as SignupForm from './containers/SignupForm/SignupForm.example'; import * as StripePaymentForm from './containers/StripePaymentForm/StripePaymentForm.example'; @@ -78,6 +79,7 @@ export { NamedLink, PaginationLinks, PasswordForgottenForm, + PasswordResetForm, PayoutDetailsForm, ResponsiveImage, SelectField, diff --git a/src/translations/en.json b/src/translations/en.json index 4f44146c..acaa752f 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -205,6 +205,10 @@ "PaginationLinks.next": "Next page", "PaginationLinks.previous": "Previous page", "PaginationLinks.toPage": "Go to page {page}", + "PasswordResetForm.passwordLabel": "Your new password", + "PasswordResetForm.passwordPlaceholder": "Enter your new password...", + "PasswordResetForm.passwordRequired": "This field is required", + "PasswordResetForm.submitButtonText": "Reset password", "PasswordResetPage.title": "Reset password", "PayoutDetailsForm.addressTitle": "Address", "PayoutDetailsForm.bankDetails": "Bank details",