Merge pull request #734 from sharetribe/form-autofill

Ensure proper form prefill values
This commit is contained in:
Kimmo Puputti 2018-03-06 11:54:01 +02:00 committed by GitHub
commit c7e522a51a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 53 additions and 18 deletions

View file

@ -145,8 +145,8 @@ class EditListingWizard extends Component {
handlePayoutSubmit(values) {
const {
firstName,
lastName,
fname: firstName,
lname: lastName,
birthDate,
country,
streetAddress,

View file

@ -129,6 +129,12 @@ export class AuthenticationPageComponent extends Component {
},
];
const handleSubmitSignup = values => {
const { fname, lname, ...rest } = values;
const params = { firstName: fname, lastName: lname, ...rest };
submitSignup(params);
};
const formContent = (
<div className={css.content}>
<LinkTabNavHorizontal className={css.tabs} tabs={tabs} />
@ -138,7 +144,7 @@ export class AuthenticationPageComponent extends Component {
) : (
<SignupForm
className={css.form}
onSubmit={submitSignup}
onSubmit={handleSubmitSignup}
inProgress={authInProgress}
onOpenTermsOfService={() => this.setState({ tosModalOpen: true })}
/>

View file

@ -233,6 +233,7 @@ class ContactDetailsFormComponent extends Component {
type="password"
name="currentPassword"
id={`${form}.currentPassword`}
autoComplete="current-password"
label={passwordLabel}
placeholder={passwordPlaceholder}
validate={[passwordRequired, passwordMinLength]}

View file

@ -65,6 +65,7 @@ const LoginFormComponent = props => {
<TextInputField
type="email"
name="email"
autoComplete="email"
id={`${form}.email`}
label={emailLabel}
placeholder={emailPlaceholder}
@ -74,6 +75,7 @@ const LoginFormComponent = props => {
className={css.password}
type="password"
name="password"
autoComplete="current-password"
id={`${form}.password`}
label={passwordLabel}
placeholder={passwordPlaceholder}

View file

@ -17,6 +17,7 @@ exports[`LoginForm matches snapshot 1`] = `
LoginForm.emailLabel
</label>
<input
autoComplete="email"
className=""
id="LoginForm.email"
name="email"
@ -39,6 +40,7 @@ exports[`LoginForm matches snapshot 1`] = `
LoginForm.passwordLabel
</label>
<input
autoComplete="current-password"
className=""
id="LoginForm.password"
name="password"

View file

@ -134,6 +134,7 @@ class PasswordChangeFormComponent extends Component {
<TextInputField
type="password"
name="newPassword"
autoComplete="new-password"
id={`${form}.newPassword`}
label={newPasswordLabel}
placeholder={newPasswordPlaceholder}
@ -153,6 +154,7 @@ class PasswordChangeFormComponent extends Component {
className={css.password}
type="password"
name="currentPassword"
autoComplete="current-password"
id={`${form}.currentPassword`}
label={passwordLabel}
placeholder={passwordPlaceholder}

View file

@ -68,6 +68,7 @@ const PasswordRecoveryFormComponent = props => {
className={css.email}
type="email"
name="email"
autoComplete="email"
id={`${form}.email`}
label={emailLabel}
placeholder={emailPlaceholder}

View file

@ -68,6 +68,7 @@ const PasswordResetFormComponent = props => {
className={css.password}
type="password"
name="password"
autoComplete="new-password"
id={`${form}.password`}
label={passwordLabel}
placeholder={passwordPlaceholder}

View file

@ -140,6 +140,7 @@ const PayoutDetailsFormComponent = props => {
className={css.field}
type="text"
name="streetAddress"
autoComplete="street-address"
id={`${form}.streetAddress`}
label={streetAddressLabel}
placeholder={streetAddressPlaceholder}
@ -152,6 +153,7 @@ const PayoutDetailsFormComponent = props => {
className={css.postalCode}
type="text"
name="postalCode"
autoComplete="postal-code"
id={`${form}.postalCode`}
label={postalCodeLabel}
placeholder={postalCodePlaceholder}
@ -163,6 +165,7 @@ const PayoutDetailsFormComponent = props => {
className={css.city}
type="text"
name="city"
autoComplete="address-level2"
id={`${form}.city`}
label={cityLabel}
placeholder={cityPlaceholder}
@ -227,8 +230,9 @@ const PayoutDetailsFormComponent = props => {
disabled={disabled}
className={css.firstName}
type="text"
name="firstName"
id={`${form}.firstName`}
name="fname"
autoComplete="given-name"
id={`${form}.fname`}
label={firstNameLabel}
placeholder={firstNamePlaceholder}
validate={firstNameRequired}
@ -237,8 +241,9 @@ const PayoutDetailsFormComponent = props => {
disabled={disabled}
className={css.lastName}
type="text"
name="lastName"
id={`${form}.lastName`}
name="lname"
autoComplete="family-name"
id={`${form}.lname`}
label={lastNameLabel}
placeholder={lastNamePlaceholder}
validate={lastNameRequired}
@ -265,6 +270,7 @@ const PayoutDetailsFormComponent = props => {
disabled={disabled}
className={css.selectCountry}
name="country"
autoComplete="country"
id={`${form}.country`}
label={countryLabel}
validate={countryRequired}

View file

@ -75,6 +75,12 @@ export const PayoutPreferencesPageComponent = props => {
message = <FormattedMessage id="PayoutPreferencesPage.stripeNotConnected" />;
}
const handlePayoutDetailsSubmit = values => {
const { fname, lname, ...rest } = values;
const params = { firstName: fname, lastName: lname, ...rest };
onPayoutDetailsFormSubmit(params);
};
const showForm =
currentUserLoaded && (payoutDetailsSaveInProgress || payoutDetailsSaved || !stripeConnected);
const form = showForm ? (
@ -85,7 +91,7 @@ export const PayoutPreferencesPageComponent = props => {
submitButtonText={intl.formatMessage({ id: 'PayoutPreferencesPage.submitButtonText' })}
createStripeAccountError={createStripeAccountError}
onChange={onPayoutDetailsFormChange}
onSubmit={onPayoutDetailsFormSubmit}
onSubmit={handlePayoutDetailsSubmit}
/>
) : null;

View file

@ -129,6 +129,7 @@ const SignupFormComponent = props => {
<TextInputField
type="email"
name="email"
autoComplete="email"
id={`${form}.email`}
label={emailLabel}
placeholder={emailPlaceholder}
@ -138,8 +139,9 @@ const SignupFormComponent = props => {
<TextInputField
className={css.firstNameRoot}
type="text"
name="firstName"
id={`${form}.firstName`}
name="fname"
autoComplete="given-name"
id={`${form}.fname`}
label={firstNameLabel}
placeholder={firstNamePlaceholder}
validate={firstNameRequired}
@ -147,8 +149,9 @@ const SignupFormComponent = props => {
<TextInputField
className={css.lastNameRoot}
type="text"
name="lastName"
id={`${form}.lastName`}
name="lname"
autoComplete="family-name"
id={`${form}.lname`}
label={lastNameLabel}
placeholder={lastNamePlaceholder}
validate={lastNameRequired}
@ -158,6 +161,7 @@ const SignupFormComponent = props => {
className={css.password}
type="password"
name="password"
autoComplete="new-password"
id={`${form}.password`}
label={passwordLabel}
placeholder={passwordPlaceholder}

View file

@ -17,6 +17,7 @@ exports[`SignupForm matches snapshot 1`] = `
SignupForm.emailLabel
</label>
<input
autoComplete="email"
className=""
id="SignupForm.email"
name="email"
@ -37,14 +38,15 @@ exports[`SignupForm matches snapshot 1`] = `
className=""
>
<label
htmlFor="SignupForm.firstName"
htmlFor="SignupForm.fname"
>
SignupForm.firstNameLabel
</label>
<input
autoComplete="given-name"
className=""
id="SignupForm.firstName"
name="firstName"
id="SignupForm.fname"
name="fname"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
@ -59,14 +61,15 @@ exports[`SignupForm matches snapshot 1`] = `
className=""
>
<label
htmlFor="SignupForm.lastName"
htmlFor="SignupForm.lname"
>
SignupForm.lastNameLabel
</label>
<input
autoComplete="family-name"
className=""
id="SignupForm.lastName"
name="lastName"
id="SignupForm.lname"
name="lname"
onBlur={[Function]}
onChange={[Function]}
onDragStart={[Function]}
@ -87,6 +90,7 @@ exports[`SignupForm matches snapshot 1`] = `
SignupForm.passwordLabel
</label>
<input
autoComplete="new-password"
className=""
id="SignupForm.password"
name="password"