accounts-frontend/packages/app/components/profile/changePassword/ChangePassword.tsx

import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet-async';
import {
  Input,
  Button,
  Checkbox,
  Form,
  FormModel,
} from 'app/components/ui/form';

import { BackButton } from '../ProfileForm';
import styles from '../profileForm.scss';
import messages from './ChangePassword.intl.json';

interface Props {
  form: FormModel;
  onSubmit: (form: FormModel) => Promise<void>;
}

export default class ChangePassword extends React.Component<Props> {
  static get defaultProps(): Partial<Props> {
    return {
      form: new FormModel(),
    };
  }

  render() {
    const { form } = this.props;

    return (
      <Form onSubmit={this.onFormSubmit} form={form}>
        <div className={styles.contentWithBackButton}>
          <BackButton />

          <div className={styles.form}>
            <div className={styles.formBody}>
              <Message {...messages.changePasswordTitle}>
                {pageTitle => (
                  <h3 className={styles.title}>
                    <Helmet title={pageTitle as string} />
                    {pageTitle}
                  </h3>
                )}
              </Message>

              <div className={styles.formRow}>
                <p className={styles.description}>
                  <Message {...messages.changePasswordDescription} />
                  <br />
                  <b>
                    <Message {...messages.achievementLossWarning} />
                  </b>
                </p>
              </div>

              <div className={styles.formRow}>
                <Input
                  {...form.bindField('newPassword')}
                  type="password"
                  required
                  skin="light"
                  label={messages.newPasswordLabel}
                />
              </div>

              <div className={styles.formRow}>
                <p className={styles.description}>
                  <Message {...messages.passwordRequirements} />
                </p>
              </div>

              <div className={styles.formRow}>
                <Input
                  {...form.bindField('newRePassword')}
                  type="password"
                  required
                  skin="light"
                  label={messages.repeatNewPasswordLabel}
                />
              </div>

              <div className={styles.formRow}>
                <Checkbox
                  {...form.bindField('logoutAll')}
                  defaultChecked
                  skin="light"
                  label={messages.logoutOnAllDevices}
                />
              </div>
            </div>

            <Button
              color="green"
              block
              label={messages.changePasswordButton}
              type="submit"
            />
          </div>
        </div>
      </Form>
    );
  }

  onFormSubmit = () => {
    const { form } = this.props;

    this.props.onSubmit(form).catch(resp => {
      if (resp.errors) {
        form.setErrors(resp.errors);
      } else {
        return Promise.reject(resp);
      }
    });
  };
}