feat(user): add forgot password form

src/components/ForgotPasswordForm/ForgotPasswordForm.module.scss

@@ -0,0 +1,36 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.title {
+  margin: 24px 0;
+  font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  font-size: 26px;
+}
+
+.text {
+  margin-bottom: 24px;
+  font-family: theme.$body-alt-font-family;
+  font-size: 16px;
+}
+
+.button {
+  margin: 16px 0;
+}
+
+.notSure {
+  font-family: theme.$body-alt-font-family;
+  font-size: 16px;
+}
+
+.link {
+  margin-bottom: 24px;
+  margin-left: 6px;
+  color: var(--primary-color);
+  font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}

src/components/ForgotPasswordForm/ForgotPasswordForm.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import ForgotPasswordForm from './ForgotPasswordForm';
+
+describe('<ForgotPasswordForm>', () => {
+  test('renders and matches snapshot type forgot', () => {
+    const { container } = render(
+      <ForgotPasswordForm type="forgot" submitting={false} onSubmit={jest.fn()} onChange={jest.fn()} value={{ email: '' }} errors={{}} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders and matches snapshot type confirmation', () => {
+    const { container } = render(
+      <ForgotPasswordForm type="confirmation" submitting={false} onSubmit={jest.fn()} onChange={jest.fn()} value={{ email: '' }} errors={{}} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useHistory, Link } from 'react-router-dom';
+
+import Button from '../Button/Button';
+import TextField from '../TextField/TextField';
+import type { FormErrors } from '../../../types/form';
+import type { EmailField } from '../../../types/account';
+import FormFeedback from '../FormFeedback/FormFeedback';
+import { addQueryParam } from '../../utils/history';
+
+import styles from './ForgotPasswordForm.module.scss';
+
+type Props = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  error?: string;
+  errors: FormErrors<EmailField>;
+  value: EmailField;
+  submitting: boolean;
+  type: string;
+};
+
+const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors, submitting, type }: Props) => {
+  const { t } = useTranslation('account');
+  const history = useHistory();
+
+  const onBackToLogin = () => {
+    history.push(addQueryParam(history, 'u', 'login'));
+  };
+
+  if (type === 'confirmation') {
+    return (
+      <div className={styles.forgotPasswordForm}>
+        <h2 className={styles.title}>{t('reset.link_sent')}</h2>
+        <p className={styles.text}>{t('reset.link_sent_text', { email: value.email })}</p>
+        <Button onClick={onBackToLogin} className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.back_login')} />
+        <span className={styles.notSure}>{t('reset.not_sure')}</span>
+        <Link className={styles.link} to={addQueryParam(history, 'u', 'forgot-password')}>
+          {t('reset.try_again')}
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={onSubmit} data-testid="forgot-password-form" noValidate className={styles.forgotPasswordForm}>
+      <h2 className={styles.title}>{t('reset.forgot_password')}</h2>
+      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
+      <p className={styles.text}>{t('reset.forgot_text')}</p>
+      <TextField
+        value={value.email}
+        onChange={onChange}
+        label={t('reset.email')}
+        placeholder={t('reset.email')}
+        error={!!errors.email || !!errors.form}
+        helperText={errors.email}
+        required
+        name="email"
+        type="email"
+      />
+      <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.email_me')} />
+    </form>
+  );
+};
+
+export default ForgotPasswordForm;

src/components/ForgotPasswordForm/__snapshots__/ForgotPasswordForm.test.tsx.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ForgotPasswordForm> renders and matches snapshot type confirmation 1`] = `
+<div>
+  <div>
+    <h2
+      class="title"
+    >
+      reset.link_sent
+    </h2>
+    <p
+      class="text"
+    >
+      reset.link_sent_text
+    </p>
+    <button
+      aria-disabled="false"
+      class="button button primary outlined fullWidth"
+    >
+      <span>
+        reset.back_login
+      </span>
+    </button>
+    <span
+      class="notSure"
+    >
+      reset.not_sure
+    </span>
+    <a
+      class="link"
+      href="/?u=forgot-password"
+    >
+      reset.try_again
+    </a>
+  </div>
+</div>
+`;
+
+exports[`<ForgotPasswordForm> renders and matches snapshot type forgot 1`] = `
+<div>
+  <form
+    data-testid="forgot-password-form"
+    novalidate=""
+  >
+    <h2
+      class="title"
+    >
+      reset.forgot_password
+    </h2>
+    <p
+      class="text"
+    >
+      reset.forgot_text
+    </p>
+    <div
+      class="textField"
+    >
+      <label
+        class="label"
+        for="text-field_1235_email"
+      >
+        reset.email
+      </label>
+      <div
+        class="container"
+      >
+        <input
+          class="input"
+          id="text-field_1235_email"
+          name="email"
+          placeholder="reset.email"
+          required=""
+          type="email"
+          value=""
+        />
+      </div>
+    </div>
+    <button
+      aria-disabled="false"
+      class="button button primary outlined fullWidth"
+      type="submit"
+    >
+      <span>
+        reset.email_me
+      </span>
+    </button>
+  </form>
+</div>
+`;