mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-09-20 02:35:39 +05:30
68 lines
1.8 KiB
JavaScript
68 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
|
|
import clsx from 'clsx';
|
|
|
|
import { Form, Button, Input, FormModel } from 'app/components/ui/form';
|
|
import popupStyles from 'app/components/ui/popup/popup.scss';
|
|
import styles from './passwordRequestForm.scss';
|
|
|
|
import messages from './PasswordRequestForm.intl.json';
|
|
|
|
export default class PasswordRequestForm extends Component {
|
|
static displayName = 'PasswordRequestForm';
|
|
|
|
static propTypes = {
|
|
form: PropTypes.instanceOf(FormModel).isRequired,
|
|
onSubmit: PropTypes.func.isRequired,
|
|
};
|
|
|
|
render() {
|
|
const { form } = this.props;
|
|
|
|
return (
|
|
<div className={styles.requestPasswordForm}>
|
|
<div className={popupStyles.popup}>
|
|
<Form onSubmit={this.onFormSubmit} form={form}>
|
|
<div className={popupStyles.header}>
|
|
<h2 className={popupStyles.headerTitle}>
|
|
<Message {...messages.title} />
|
|
</h2>
|
|
</div>
|
|
|
|
<div className={clsx(popupStyles.body, styles.body)}>
|
|
<span className={styles.lockIcon} />
|
|
|
|
<div className={styles.description}>
|
|
<Message {...messages.description} />
|
|
</div>
|
|
|
|
<Input
|
|
{...form.bindField('password')}
|
|
type="password"
|
|
required
|
|
autoFocus
|
|
color="green"
|
|
skin="light"
|
|
center
|
|
/>
|
|
</div>
|
|
<Button
|
|
color="green"
|
|
label={messages.continue}
|
|
block
|
|
type="submit"
|
|
/>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
onFormSubmit = () => {
|
|
this.props.onSubmit(this.props.form);
|
|
};
|
|
}
|