mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-10 01:52:04 +05:30
94 lines
2.5 KiB
TypeScript
94 lines
2.5 KiB
TypeScript
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);
|
|
}
|
|
});
|
|
};
|
|
}
|