ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

#145: add success state for feedback form

Browse Source
This commit is contained in:
SleepWalker
2016-06-18 14:23:30 +03:00
parent 187d4f12f4
commit 3f77144a53
1 changed files with 63 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/contact/ContactForm.jsx
View File

@@ -33,8 +33,8 @@ class ContactForm extends Component {
form = new FormModel();
render() {
const {onClose, user} = this.props;
const {form} = this;
const {isSuccessfullySent = false} = this.state || {};
const {onClose} = this.props;
return (
<div className={styles.contactForm}>
@@ -46,62 +46,74 @@ class ContactForm extends Component {
<span className={classNames(icons.close, popupStyles.close)} onClick={onClose} />
</div>
<Form form={form} onSubmit={this.onSubmit}>
<div className={popupStyles.body}>
<div className={styles.philosophicalThought}>
<Message {...messages.philosophicalThought} />
</div>
<div className={styles.formDisclaimer}>
<Message {...messages.disclaimer} /><br />
</div>
<div className={styles.pairInputRow}>
<div className={styles.pairInput}>
<Input
{...form.bindField('subject')}
required
label={messages.subject}
skin="light"
/>
</div>
<div className={styles.pairInput}>
<Input
{...form.bindField('email')}
required
label={messages.email}
type="email"
skin="light"
defaultValue={user.email}
/>
</div>
</div>
<div className={styles.formMargin}>
<Dropdown label={messages.whichQuestion} items={CONTACT_CATEGORIES} block />
</div>
<TextArea
{...form.bindField('message')}
required
label={messages.message}
skin="light"
/>
</div>
<div className={styles.footer}>
<Button label={messages.send} block />
</div>
</Form>
{isSuccessfullySent
? (<div>Hello world<Button onClick={onClose} label="Close" /></div>)
: this.renderForm()
}
</div>
</div>
);
}
renderForm() {
const {form} = this;
const {user} = this.props;
return (
<Form form={form} onSubmit={this.onSubmit}>
<div className={popupStyles.body}>
<div className={styles.philosophicalThought}>
<Message {...messages.philosophicalThought} />
</div>
<div className={styles.formDisclaimer}>
<Message {...messages.disclaimer} /><br />
</div>
<div className={styles.pairInputRow}>
<div className={styles.pairInput}>
<Input
{...form.bindField('subject')}
required
label={messages.subject}
skin="light"
/>
</div>
<div className={styles.pairInput}>
<Input
{...form.bindField('email')}
required
label={messages.email}
type="email"
skin="light"
defaultValue={user.email}
/>
</div>
</div>
<div className={styles.formMargin}>
<Dropdown label={messages.whichQuestion} items={CONTACT_CATEGORIES} block />
</div>
<TextArea
{...form.bindField('message')}
required
label={messages.message}
skin="light"
/>
</div>
<div className={styles.footer}>
<Button label={messages.send} block />
</div>
</Form>
);
}
onSubmit = () => {
feedback(this.form.serialize())
.then(this.props.onClose)
.then(() => this.setState({isSuccessfullySent: true}))
.catch((resp) => {
if (resp.errors) {
this.form.setErrors(resp.errors);