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

121 lines
4.9 KiB
TypeScript
Raw Normal View History

2019-12-30 14:17:29 +05:30
import React from 'react';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet-async';
2020-05-24 04:38:24 +05:30
import { Input, Button, Checkbox, Form, FormModel } from 'app/components/ui/form';
2019-12-30 14:17:29 +05:30
import { BackButton } from '../ProfileForm';
import styles from '../profileForm.scss';
const labels = defineMessages({
changePasswordButton: 'Change password',
newPasswordLabel: 'New password:',
repeatNewPasswordLabel: 'Repeat the password:',
logoutOnAllDevices: 'Logout on all devices',
});
2019-12-30 14:17:29 +05:30
interface Props {
2020-05-24 04:38:24 +05:30
form: FormModel;
onSubmit: (form: FormModel) => Promise<void>;
2019-12-30 14:17:29 +05:30
}
2019-12-30 14:17:29 +05:30
export default class ChangePassword extends React.Component<Props> {
2020-05-24 04:38:24 +05:30
static get defaultProps(): Partial<Props> {
return {
form: new FormModel(),
};
}
2020-05-24 04:38:24 +05:30
render() {
const { form } = this.props;
2020-05-24 04:38:24 +05:30
return (
<Form onSubmit={this.onFormSubmit} form={form}>
<div className={styles.contentWithBackButton}>
<BackButton />
2020-05-24 04:38:24 +05:30
<div className={styles.form}>
<div className={styles.formBody}>
<Message key="changePasswordTitle" defaultMessage="Change password">
2020-05-24 04:38:24 +05:30
{(pageTitle) => (
<h3 className={styles.title}>
<Helmet title={pageTitle as string} />
{pageTitle}
</h3>
)}
</Message>
2020-05-24 04:38:24 +05:30
<div className={styles.formRow}>
<p className={styles.description}>
<Message
key="changePasswordDescription"
defaultMessage="Please take a password, that will be different from your passwords on the other sites and will not be the same you are using to enter Minecraft game servers you are playing."
/>
2020-05-24 04:38:24 +05:30
<br />
<b>
<Message
key="achievementLossWarning"
defaultMessage="Are you cherish your game achievements, right?"
/>
2020-05-24 04:38:24 +05:30
</b>
</p>
</div>
2020-05-24 04:38:24 +05:30
<div className={styles.formRow}>
<Input
{...form.bindField('newPassword')}
type="password"
required
skin="light"
label={labels.newPasswordLabel}
2020-05-24 04:38:24 +05:30
/>
</div>
2020-05-24 04:38:24 +05:30
<div className={styles.formRow}>
<p className={styles.description}>
<Message
key="passwordRequirements"
defaultMessage="Password must contain at least 8 characters. It can be any symbols — do not limit yourself, create an unpredictable password!"
/>
2020-05-24 04:38:24 +05:30
</p>
</div>
2020-05-24 04:38:24 +05:30
<div className={styles.formRow}>
<Input
{...form.bindField('newRePassword')}
type="password"
required
skin="light"
label={labels.repeatNewPasswordLabel}
2020-05-24 04:38:24 +05:30
/>
</div>
2020-05-24 04:38:24 +05:30
<div className={styles.formRow}>
<Checkbox
{...form.bindField('logoutAll')}
defaultChecked
skin="light"
label={labels.logoutOnAllDevices}
2020-05-24 04:38:24 +05:30
/>
</div>
</div>
<Button color="green" block label={labels.changePasswordButton} type="submit" />
2020-05-24 04:38:24 +05:30
</div>
</div>
</Form>
);
}
2020-05-24 04:38:24 +05:30
onFormSubmit = () => {
const { form } = this.props;
2020-05-24 04:38:24 +05:30
this.props.onSubmit(form).catch((resp) => {
if (resp.errors) {
form.setErrors(resp.errors);
} else {
return Promise.reject(resp);
}
});
};
}