mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-29 05:00:43 +10:00
Merge pull request #734 from sharetribe/form-autofill
Ensure proper form prefill values
This commit is contained in:
commit
c7e522a51a
12 changed files with 53 additions and 18 deletions
|
|
@ -145,8 +145,8 @@ class EditListingWizard extends Component {
|
|||
|
||||
handlePayoutSubmit(values) {
|
||||
const {
|
||||
firstName,
|
||||
lastName,
|
||||
fname: firstName,
|
||||
lname: lastName,
|
||||
birthDate,
|
||||
country,
|
||||
streetAddress,
|
||||
|
|
|
|||
|
|
@ -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 })}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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]}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ const PasswordRecoveryFormComponent = props => {
|
|||
className={css.email}
|
||||
type="email"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
id={`${form}.email`}
|
||||
label={emailLabel}
|
||||
placeholder={emailPlaceholder}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ const PasswordResetFormComponent = props => {
|
|||
className={css.password}
|
||||
type="password"
|
||||
name="password"
|
||||
autoComplete="new-password"
|
||||
id={`${form}.password`}
|
||||
label={passwordLabel}
|
||||
placeholder={passwordPlaceholder}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue