Initial placeholders for onboard fields

config/locales/en.yml

@@ -148,19 +148,41 @@ en:
         nonprofit: "Nonprofit"
         contact: "Contact"
       nonprofit:
-         name: "Organization Name"
-         website: "Website URL"
-         email: "Org Email (public)"
-         phone: "Org Phone (public)"
-         city: "City"
-         state: "State"
-         zip: "Zip Code"
+        name:
+          label: "Organization Name"
+          placeholder: "Ending Poverty in the Fox Valley Inc."
+        website:
+          label: "Website URL"
+          placeholder: "http://www.endpovertyinthefoxvalleyinc.org"
+        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:
-        name: "Your Name"
-        email: "Your Email (used for login)"
-        password: "New Password"
-        password_confirmation: "Retype Password"
-        phone: "Your Phone (for account recovery)"
+        name:
+          label: "Your Name"
+          placeholder: "Penelope Schultz"
+        email:
+          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"
       saving: "Saving..."
       next: "Next"

javascripts/src/components/common/fields.tsx

@@ -14,6 +14,6 @@ export const BasicField = injectIntl(observer((props:{field:Field, intl?:Injecte
         inStickyError={field.hasServerError} stickyError={field.serverError}
         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>
 }))

javascripts/src/components/registration_page/NonprofitInfoForm.tsx

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

javascripts/src/components/registration_page/RegistrationWizard.tsx

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

javascripts/src/components/registration_page/UserInfoForm.tsx

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