Add PasswordResetForm component

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;
+}

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',
+};

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 (
+    <form className={classes} onSubmit={handleSubmit}>
+      <TextInputField
+        className={css.passwordInput}
+        type="password"
+        name="password"
+        id={`${form}.password`}
+        label={passwordLabel}
+        placeholder={passwordPlaceholder}
+        validate={passwordRequired}
+      />
+      <PrimaryButton className={css.submitButton} type="submit" disabled={submitDisabled}>
+        <FormattedMessage id="PasswordResetForm.submitButtonText" />
+      </PrimaryButton>
+    </form>
+  );
+};
+
+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;

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,

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,

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