accounts-frontend/packages/app/components/profile/changeUsername/ChangeUsername.tsx

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

import styles from '../profileForm.scss';
import messages from './ChangeUsername.intl.json';

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

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

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

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

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

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

                            <div className={styles.formRow}>
                                <Input
                                    {...form.bindField('username')}
                                    value={username}
                                    onChange={this.onUsernameChange}
                                    required
                                    skin="light"
                                />
                            </div>

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

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

    onUsernameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        this.props.onChange(event.target.value);
    };

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

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