mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 20:53:24 +10:00
Use InputField in login and signup forms
This commit is contained in:
Kimmo Puputti
parent
3933353821
commit
406866ffd5
4 changed files with 133 additions and 151 deletions
|
|
@ -1,65 +1,58 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import { compose } from 'redux';
|
||||
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
|
||||
import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
|
||||
import { Button } from '../../components';
|
||||
import { InputField, Button } from '../../components';
|
||||
import * as validators from '../../util/validators';
|
||||
import { enhancedField } from '../../util/forms';
|
||||
|
||||
import css from './LoginForm.css';
|
||||
|
||||
class LoginFormComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.EnhancedInput = enhancedField('input');
|
||||
}
|
||||
render() {
|
||||
const { handleSubmit, pristine, submitting, inProgress, intl } = this.props;
|
||||
const LoginFormComponent = props => {
|
||||
const { handleSubmit, pristine, submitting, inProgress, intl } = props;
|
||||
|
||||
// email
|
||||
const emailLabel = intl.formatMessage({
|
||||
id: 'LoginForm.emailLabel',
|
||||
});
|
||||
const emailRequiredMessage = intl.formatMessage({
|
||||
id: 'LoginForm.emailRequired',
|
||||
});
|
||||
const emailRequired = validators.required(emailRequiredMessage);
|
||||
// email
|
||||
const emailLabel = intl.formatMessage({
|
||||
id: 'LoginForm.emailLabel',
|
||||
});
|
||||
const emailRequiredMessage = intl.formatMessage({
|
||||
id: 'LoginForm.emailRequired',
|
||||
});
|
||||
const emailRequired = validators.required(emailRequiredMessage);
|
||||
|
||||
// password
|
||||
const passwordLabel = intl.formatMessage({
|
||||
id: 'LoginForm.passwordLabel',
|
||||
});
|
||||
const passwordRequiredMessage = intl.formatMessage({
|
||||
id: 'LoginForm.passwordRequired',
|
||||
});
|
||||
const passwordRequired = validators.required(passwordRequiredMessage);
|
||||
// password
|
||||
const passwordLabel = intl.formatMessage({
|
||||
id: 'LoginForm.passwordLabel',
|
||||
});
|
||||
const passwordRequiredMessage = intl.formatMessage({
|
||||
id: 'LoginForm.passwordRequired',
|
||||
});
|
||||
const passwordRequired = validators.required(passwordRequiredMessage);
|
||||
|
||||
const submitDisabled = pristine || submitting || inProgress;
|
||||
return (
|
||||
<form className={css.form} onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<Field
|
||||
name="email"
|
||||
type="email"
|
||||
label={emailLabel}
|
||||
component={this.EnhancedInput}
|
||||
validate={emailRequired}
|
||||
/>
|
||||
<Field
|
||||
name="password"
|
||||
type="password"
|
||||
label={passwordLabel}
|
||||
component={this.EnhancedInput}
|
||||
validate={passwordRequired}
|
||||
/>
|
||||
</div>
|
||||
<Button className={css.button} type="submit" disabled={submitDisabled}>
|
||||
<FormattedMessage id="LoginForm.logIn" />
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
const submitDisabled = pristine || submitting || inProgress;
|
||||
return (
|
||||
<form className={css.form} onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<Field
|
||||
name="email"
|
||||
type="email"
|
||||
label={emailLabel}
|
||||
component={InputField}
|
||||
validate={emailRequired}
|
||||
/>
|
||||
<Field
|
||||
name="password"
|
||||
type="password"
|
||||
label={passwordLabel}
|
||||
component={InputField}
|
||||
validate={passwordRequired}
|
||||
/>
|
||||
</div>
|
||||
<Button className={css.button} type="submit" disabled={submitDisabled}>
|
||||
<FormattedMessage id="LoginForm.logIn" />
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
LoginFormComponent.defaultProps = { inProgress: false };
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ exports[`LoginForm matches snapshot 1`] = `
|
|||
<div
|
||||
className="">
|
||||
<label
|
||||
className=""
|
||||
className={undefined}
|
||||
htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
|
|
@ -18,14 +18,14 @@ exports[`LoginForm matches snapshot 1`] = `
|
|||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
placeholder={null}
|
||||
type="email"
|
||||
value="" />
|
||||
</div>
|
||||
<div
|
||||
className="">
|
||||
<label
|
||||
className=""
|
||||
className={undefined}
|
||||
htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
|
|
@ -37,7 +37,7 @@ exports[`LoginForm matches snapshot 1`] = `
|
|||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
placeholder={null}
|
||||
type="password"
|
||||
value="" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,107 +1,96 @@
|
|||
import React, { Component, PropTypes } from 'react';
|
||||
import React, { PropTypes } from 'react';
|
||||
import { compose } from 'redux';
|
||||
import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
|
||||
import { Field, reduxForm, propTypes as formPropTypes } from 'redux-form';
|
||||
import { Button } from '../../components';
|
||||
import { InputField, Button } from '../../components';
|
||||
import * as validators from '../../util/validators';
|
||||
import { enhancedField } from '../../util/forms';
|
||||
|
||||
import css from './SignupForm.css';
|
||||
|
||||
class SignupFormComponent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.EnhancedInput = enhancedField('input');
|
||||
this.EnhancedFirstNameInput = enhancedField('input', {
|
||||
rootClassName: css.firstNameRoot,
|
||||
});
|
||||
this.EnhancedLastNameInput = enhancedField('input', {
|
||||
rootClassName: css.lastNameRoot,
|
||||
});
|
||||
}
|
||||
render() {
|
||||
const { handleSubmit, pristine, submitting, inProgress, intl } = this.props;
|
||||
const SignupFormComponent = props => {
|
||||
const { handleSubmit, pristine, submitting, inProgress, intl } = props;
|
||||
|
||||
// email
|
||||
const emailLabel = intl.formatMessage({
|
||||
id: 'SignupForm.emailLabel',
|
||||
});
|
||||
const emailRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.emailRequired',
|
||||
});
|
||||
const emailRequired = validators.required(emailRequiredMessage);
|
||||
// email
|
||||
const emailLabel = intl.formatMessage({
|
||||
id: 'SignupForm.emailLabel',
|
||||
});
|
||||
const emailRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.emailRequired',
|
||||
});
|
||||
const emailRequired = validators.required(emailRequiredMessage);
|
||||
|
||||
// password
|
||||
const passwordLabel = intl.formatMessage({
|
||||
id: 'SignupForm.passwordLabel',
|
||||
});
|
||||
const passwordRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.passwordRequired',
|
||||
});
|
||||
const passwordRequired = validators.required(passwordRequiredMessage);
|
||||
// password
|
||||
const passwordLabel = intl.formatMessage({
|
||||
id: 'SignupForm.passwordLabel',
|
||||
});
|
||||
const passwordRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.passwordRequired',
|
||||
});
|
||||
const passwordRequired = validators.required(passwordRequiredMessage);
|
||||
|
||||
// firstName
|
||||
const firstNameLabel = intl.formatMessage({
|
||||
id: 'SignupForm.firstNameLabel',
|
||||
});
|
||||
const firstNameRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.firstNameRequired',
|
||||
});
|
||||
const firstNameRequired = validators.required(firstNameRequiredMessage);
|
||||
// firstName
|
||||
const firstNameLabel = intl.formatMessage({
|
||||
id: 'SignupForm.firstNameLabel',
|
||||
});
|
||||
const firstNameRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.firstNameRequired',
|
||||
});
|
||||
const firstNameRequired = validators.required(firstNameRequiredMessage);
|
||||
|
||||
// lastName
|
||||
const lastNameLabel = intl.formatMessage({
|
||||
id: 'SignupForm.lastNameLabel',
|
||||
});
|
||||
const lastNameRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.lastNameRequired',
|
||||
});
|
||||
const lastNameRequired = validators.required(lastNameRequiredMessage);
|
||||
// lastName
|
||||
const lastNameLabel = intl.formatMessage({
|
||||
id: 'SignupForm.lastNameLabel',
|
||||
});
|
||||
const lastNameRequiredMessage = intl.formatMessage({
|
||||
id: 'SignupForm.lastNameRequired',
|
||||
});
|
||||
const lastNameRequired = validators.required(lastNameRequiredMessage);
|
||||
|
||||
const submitDisabled = pristine || submitting || inProgress;
|
||||
return (
|
||||
<form className={css.root} onSubmit={handleSubmit}>
|
||||
<div>
|
||||
const submitDisabled = pristine || submitting || inProgress;
|
||||
return (
|
||||
<form className={css.root} onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<Field
|
||||
name="email"
|
||||
type="email"
|
||||
label={emailLabel}
|
||||
validate={emailRequired}
|
||||
component={InputField}
|
||||
/>
|
||||
<div className={css.name}>
|
||||
<Field
|
||||
name="email"
|
||||
type="email"
|
||||
label={emailLabel}
|
||||
validate={emailRequired}
|
||||
component={this.EnhancedInput}
|
||||
className={css.firstNameRoot}
|
||||
name="firstName"
|
||||
type="text"
|
||||
label={firstNameLabel}
|
||||
validate={firstNameRequired}
|
||||
component={InputField}
|
||||
/>
|
||||
<div className={css.name}>
|
||||
<Field
|
||||
name="firstName"
|
||||
type="text"
|
||||
label={firstNameLabel}
|
||||
validate={firstNameRequired}
|
||||
component={this.EnhancedFirstNameInput}
|
||||
/>
|
||||
<Field
|
||||
name="lastName"
|
||||
type="text"
|
||||
label={lastNameLabel}
|
||||
validate={lastNameRequired}
|
||||
component={this.EnhancedLastNameInput}
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
name="password"
|
||||
type="password"
|
||||
label={passwordLabel}
|
||||
validate={passwordRequired}
|
||||
component={this.EnhancedInput}
|
||||
className={css.lastNameRoot}
|
||||
name="lastName"
|
||||
type="text"
|
||||
label={lastNameLabel}
|
||||
validate={lastNameRequired}
|
||||
component={InputField}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button className={css.button} type="submit" disabled={submitDisabled}>
|
||||
<FormattedMessage id="SignupForm.signUp" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
<Field
|
||||
name="password"
|
||||
type="password"
|
||||
label={passwordLabel}
|
||||
validate={passwordRequired}
|
||||
component={InputField}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Button className={css.button} type="submit" disabled={submitDisabled}>
|
||||
<FormattedMessage id="SignupForm.signUp" />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
SignupFormComponent.defaultProps = { inProgress: false };
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
<div
|
||||
className="">
|
||||
<label
|
||||
className=""
|
||||
className={undefined}
|
||||
htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
|
|
@ -18,7 +18,7 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
placeholder={null}
|
||||
type="email"
|
||||
value="" />
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
<div
|
||||
className="">
|
||||
<label
|
||||
className=""
|
||||
className={undefined}
|
||||
htmlFor="firstName">
|
||||
First name
|
||||
</label>
|
||||
|
|
@ -39,14 +39,14 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
placeholder={null}
|
||||
type="text"
|
||||
value="" />
|
||||
</div>
|
||||
<div
|
||||
className="">
|
||||
<label
|
||||
className=""
|
||||
className={undefined}
|
||||
htmlFor="lastName">
|
||||
Last name
|
||||
</label>
|
||||
|
|
@ -58,7 +58,7 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
placeholder={null}
|
||||
type="text"
|
||||
value="" />
|
||||
</div>
|
||||
|
|
@ -66,7 +66,7 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
<div
|
||||
className="">
|
||||
<label
|
||||
className=""
|
||||
className={undefined}
|
||||
htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
|
|
@ -78,7 +78,7 @@ exports[`SignupForm matches snapshot 1`] = `
|
|||
onDragStart={[Function]}
|
||||
onDrop={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
placeholder={null}
|
||||
type="password"
|
||||
value="" />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue