Initial placeholders for onboard fields

This commit is contained in:
Eric Schultz 2018-07-06 15:51:58 -05:00
parent 61920994d8
commit c8205a1225
5 changed files with 67 additions and 36 deletions

View file

@ -148,19 +148,41 @@ en:
nonprofit: "Nonprofit" nonprofit: "Nonprofit"
contact: "Contact" contact: "Contact"
nonprofit: nonprofit:
name: "Organization Name" name:
website: "Website URL" label: "Organization Name"
email: "Org Email (public)" placeholder: "Ending Poverty in the Fox Valley Inc."
phone: "Org Phone (public)" website:
city: "City" label: "Website URL"
state: "State" placeholder: "http://www.endpovertyinthefoxvalleyinc.org"
zip: "Zip Code" email:
label: "Org Email (public)"
placeholder: "contact@endpovertyinthefoxvalleyinc.org"
phone:
label: "Org Phone (public)"
placeholder: "(555) 555-5555"
city:
label: "City"
placeholder: "Appleton"
state:
label: "State"
placeholder: "WI"
zip:
label: "Zip Code"
placeholder: "54915"
contact: contact:
name: "Your Name" name:
email: "Your Email (used for login)" label: "Your Name"
password: "New Password" placeholder: "Penelope Schultz"
password_confirmation: "Retype Password" email:
phone: "Your Phone (for account recovery)" label: "Your Email (used for login)"
placeholder: "penelope@endpovertyinthefoxvalleyinc.org"
password:
label: "New Password"
password_confirmation:
label: "Retype Password"
phone:
label: "Your Phone (for account recovery)"
placeholder: "(555) 555-5555"
save_and_finish: "Save & Finish" save_and_finish: "Save & Finish"
saving: "Saving..." saving: "Saving..."
next: "Next" next: "Next"

View file

@ -14,6 +14,6 @@ export const BasicField = injectIntl(observer((props:{field:Field, intl?:Injecte
inStickyError={field.hasServerError} stickyError={field.serverError} inStickyError={field.hasServerError} stickyError={field.serverError}
className={props.wrapperClassName} > className={props.wrapperClassName} >
<input {...props.field.bind()} className="form-control"/> <input {...props.field.bind()} placeholder={field.placeholder ? props.intl.formatMessage({id:field.placeholder}) : undefined} className="form-control"/>
</LabeledFieldComponent> </LabeledFieldComponent>
})) }))

View file

@ -17,40 +17,47 @@ export interface NonprofitInfoFormProps
export const FieldDefinitions : Array<FieldDefinition> = [ export const FieldDefinitions : Array<FieldDefinition> = [
{ {
name: 'organization_name', name: 'organization_name',
label: 'registration.wizard.nonprofit.name', label: 'registration.wizard.nonprofit.name.label',
placeholder: 'registration.wizard.nonprofit.name.placeholder',
type: 'text', type: 'text',
validators: [Validations.isFilled] validators: [Validations.isFilled]
}, },
{ {
name: 'website', name: 'website',
label: 'registration.wizard.nonprofit.website', label: 'registration.wizard.nonprofit.website.label',
placeholder: 'registration.wizard.nonprofit.website.placeholder',
validators: [Validations.optional(Validations.isUrl)] validators: [Validations.optional(Validations.isUrl)]
}, },
{ {
name: 'org_email', name: 'org_email',
label: 'registration.wizard.nonprofit.email', label: 'registration.wizard.nonprofit.email.label',
placeholder: 'registration.wizard.nonprofit.email.placeholder',
validators: [Validations.optional(Validations.isEmail)] validators: [Validations.optional(Validations.isEmail)]
}, },
{ {
name: 'org_phone', name: 'org_phone',
label: 'registration.wizard.nonprofit.phone', label: 'registration.wizard.nonprofit.phone.label',
placeholder: 'registration.wizard.nonprofit.phone.placeholder',
type: "tel" type: "tel"
}, },
{ {
name: 'city', name: 'city',
label: 'registration.wizard.nonprofit.city', label: 'registration.wizard.nonprofit.city.label',
placeholder: 'registration.wizard.nonprofit.city.placeholder',
validators: [Validations.isFilled] validators: [Validations.isFilled]
}, },
{ {
name: 'state', name: 'state',
label: 'registration.wizard.nonprofit.state', label: 'registration.wizard.nonprofit.state.label',
placeholder: 'registration.wizard.nonprofit.state.placeholder',
type: 'text', type: 'text',
validators: [Validations.isFilled] validators: [Validations.isFilled]
}, },
{ {
name: 'zip', name: 'zip',
label: 'registration.wizard.nonprofit.zip', label: 'registration.wizard.nonprofit.zip.label',
placeholder: 'registration.wizard.nonprofit.zip.placeholder',
validators: [Validations.isFilled] validators: [Validations.isFilled]
} }
] ]

View file

@ -177,17 +177,17 @@ export class InnerRegistrationWizard extends React.Component<RegistrationWizardP
//set up labels //set up labels
let label: {[props:string]: string} = { let label: {[props:string]: string} = {
'nonprofitTab[organization_name]': "registration.wizard.nonprofit.name", 'nonprofitTab[organization_name]': "registration.wizard.nonprofit.name.label",
"nonprofitTab[website]": 'registration.wizard.nonprofit.website', "nonprofitTab[website]": 'registration.wizard.nonprofit.website.label',
"nonprofitTab[org_email]": 'registration.wizard.nonprofit.email', "nonprofitTab[org_email]": 'registration.wizard.nonprofit.email.label',
'nonprofitTab[org_phone]': 'registration.wizard.nonprofit.phone', 'nonprofitTab[org_phone]': 'registration.wizard.nonprofit.phone.label',
'nonprofitTab[city]': 'registration.wizard.nonprofit.city', 'nonprofitTab[city]': 'registration.wizard.nonprofit.city.label',
'nonprofitTab[state]': 'registration.wizard.nonprofit.state', 'nonprofitTab[state]': 'registration.wizard.nonprofit.state.label',
'nonprofitTab[zip]': 'registration.wizard.nonprofit.zip', 'nonprofitTab[zip]': 'registration.wizard.nonprofit.zip.label',
'userTab[name]': 'registration.wizard.contact.name', 'userTab[name]': 'registration.wizard.contact.name.label',
'userTab[email]': 'registration.wizard.contact.email', 'userTab[email]': 'registration.wizard.contact.email.label',
'userTab[password]': 'registration.wizard.contact.password', 'userTab[password]': 'registration.wizard.contact.password.label',
'userTab[password_confirmation]': 'registration.wizard.contact.password_confirmation' 'userTab[password_confirmation]': 'registration.wizard.contact.password_confirmation.label'
} }
for (let key in label){ for (let key in label){
this.form.$(key).set('label', this.props.intl.formatMessage({id: label[key]})) this.form.$(key).set('label', this.props.intl.formatMessage({id: label[key]}))

View file

@ -12,24 +12,26 @@ import {areWeOrAnyParentSubmitting} from "../../lib/houdini_form";
export const FieldDefinitions : Array<FieldDefinition> = [ export const FieldDefinitions : Array<FieldDefinition> = [
{ {
name: 'name', name: 'name',
label: 'registration.wizard.contact.name', label: 'registration.wizard.contact.name.label',
placeholder: 'registration.wizard.contact.name.placeholder',
validators: [Validations.isFilled] validators: [Validations.isFilled]
}, },
{ {
name: 'email', name: 'email',
label: 'registration.wizard.contact.email', label: 'registration.wizard.contact.email.label',
placeholder: 'registration.wizard.contact.email.placeholder',
validators: [Validations.isEmail] validators: [Validations.isEmail]
}, },
{ {
name: 'password', name: 'password',
label: 'registration.wizard.contact.password', label: 'registration.wizard.contact.password.label',
type: 'password', type: 'password',
validators: [Validations.isFilled], validators: [Validations.isFilled],
related: ['userTab.password_confirmation'] related: ['userTab.password_confirmation']
}, },
{ {
name: 'password_confirmation', name: 'password_confirmation',
label: 'registration.wizard.contact.password_confirmation', label: 'registration.wizard.contact.password_confirmation.label',
type: 'password', type: 'password',
validators: [Validations.shouldBeEqualTo("userTab.password")] validators: [Validations.shouldBeEqualTo("userTab.password")]
} }