feat(user): add edit password form

src/components/EditPasswordForm/EditPasswordForm.module.scss

@@ -0,0 +1,22 @@
+@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-bottom: 8px;
+}
+.link {
+  margin-bottom: 24px;
+}

src/components/EditPasswordForm/EditPasswordForm.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import EditPasswordForm from './EditPasswordForm';
+
+describe('<EditPasswordForm>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(
+      <EditPasswordForm submitting={false} onSubmit={jest.fn()} onChange={jest.fn()} value={{ password: '' }} errors={{}} />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/EditPasswordForm/EditPasswordForm.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { FormErrors } from '../../../types/form';
+import type { PasswordField } from '../../../types/account';
+import FormFeedback from '../FormFeedback/FormFeedback';
+import TextField from '../TextField/TextField';
+import Button from '../Button/Button';
+import IconButton from '../IconButton/IconButton';
+import Visibility from '../../icons/Visibility';
+import VisibilityOff from '../../icons/VisibilityOff';
+import useToggle from '../../hooks/useToggle';
+import PasswordStrength from '../PasswordStrength/PasswordStrength';
+
+import styles from './EditPasswordForm.module.scss';
+
+type Props = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  error?: string;
+  errors: FormErrors<PasswordField>;
+  value: PasswordField;
+  submitting: boolean;
+};
+
+const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors, submitting }: Props) => {
+  const { t } = useTranslation('account');
+  const [viewPassword, toggleViewPassword] = useToggle();
+
+  return (
+    <form onSubmit={onSubmit} data-testid="forgot-password-form" noValidate className={styles.forgotPasswordForm}>
+      <h2 className={styles.title}>{t('reset.password_reset')}</h2>
+      {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
+      <TextField
+        value={value.password}
+        onChange={onChange}
+        label={t('reset.password')}
+        placeholder={t('reset.password')}
+        error={!!errors.password || !!errors.form}
+        helperText={errors.password}
+        name="password"
+        type={viewPassword ? 'text' : 'password'}
+        rightControl={
+          <IconButton aria-label={viewPassword ? t('reset.hide_password') : t('reset.view_password')} onClick={() => toggleViewPassword()}>
+            {viewPassword ? <Visibility /> : <VisibilityOff />}
+          </IconButton>
+        }
+        required
+      />
+      <PasswordStrength password={value.password} />
+      <Button type="submit" className={styles.button} fullWidth color="primary" disabled={submitting} label={t('reset.confirm')} />
+    </form>
+  );
+};
+
+export default EditPasswordForm;

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

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EditPasswordForm> renders and matches snapshot 1`] = `
+<div>
+  <form
+    data-testid="forgot-password-form"
+    novalidate=""
+  >
+    <h2
+      class="title"
+    >
+      reset.password_reset
+    </h2>
+    <div
+      class="textField rightControl"
+    >
+      <label
+        class="label"
+        for="text-field_1235_password"
+      >
+        reset.password
+      </label>
+      <div
+        class="container"
+      >
+        <input
+          class="input"
+          id="text-field_1235_password"
+          name="password"
+          placeholder="reset.password"
+          required=""
+          type="password"
+          value=""
+        />
+        <div
+          class="control"
+        >
+          <div
+            aria-label="reset.view_password"
+            class="iconButton"
+            role="button"
+            tabindex="0"
+          >
+            <svg
+              aria-hidden="true"
+              class="icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g>
+                <path
+                  d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z"
+                />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="passwordStrength"
+    >
+      <div
+        class="passwordStrengthBar"
+      >
+        <div
+          class="passwordStrengthFill"
+          data-strength="0"
+        />
+      </div>
+      <span>
+        registration.password_strength
+      </span>
+    </div>
+    <button
+      aria-disabled="false"
+      class="button button primary outlined fullWidth"
+      type="submit"
+    >
+      <span>
+        reset.confirm
+      </span>
+    </button>
+  </form>
+</div>
+`;