scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-02 11:59:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Organize form data into objects

Browse source
This commit is contained in:
Ray Schamp 2016-06-02 15:53:51 -04:00
parent fe74208f32
commit 0f3485534b
1 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/views/teacherregistration/teacherregistration.jsx
View file

@ -35,7 +35,7 @@ var UsernameStep = React.createClass({
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<Input label="Username" <Input label="Username"
type="text" type="text"
name="username" name="user.username"
validations={{ validations={{
matchRegexp: /^[\w-]*$/, matchRegexp: /^[\w-]*$/,
minLength: 3, minLength: 3,
@ -49,11 +49,11 @@ var UsernameStep = React.createClass({
required /> required />
<Input label="Password" <Input label="Password"
type="password" type="password"
name="password" name="user.password"
validations={{ validations={{
minLength: 6, minLength: 6,
notEquals: 'password', notEquals: 'password',
notEqualsField: 'username' notEqualsField: 'user.username'
}} }}
validationErrors={{ validationErrors={{
minLength: 'Passwords must be at least six characters', minLength: 'Passwords must be at least six characters',
@ -64,7 +64,7 @@ var UsernameStep = React.createClass({
<Input label="Confirm Password" <Input label="Confirm Password"
type="password" type="password"
name="passwordConfirmation" name="passwordConfirmation"
validations="equalsField:password" validations="equalsField:user.password"
validationError="The passwords do not match" validationError="The passwords do not match"
required /> required />
<Button type="submit">Next Step</Button> <Button type="submit">Next Step</Button>
@ -102,10 +102,10 @@ var DemographicsStep = React.createClass({
Why do we ask for this information <a onClick={this.handle}>?</a> Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}> </p>}>
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<Select label="Birth Month" name="month" options={monthOptions} required /> <Select label="Birth Month" name="user.birth.month" options={monthOptions} required />
<Select label="Birth Yeah" name="year" options={yearOptions} required /> <Select label="Birth Yeah" name="user.birth.year" options={yearOptions} required />
<RadioGroup label="Gender" <RadioGroup label="Gender"
name="gender" name="user.gender"
onChange={this.onChooseGender} onChange={this.onChooseGender}
options={[ options={[
{value: 'female', label: 'Female'}, {value: 'female', label: 'Female'},
@ -113,9 +113,9 @@ var DemographicsStep = React.createClass({
{value: 'other', label: 'Other'} {value: 'other', label: 'Other'}
]} ]}
required /> required />
<Input disabled={this.state.otherDisabled} name="genderOther" type="text" /> <Input disabled={this.state.otherDisabled} name="user.genderOther" type="text" />
<Select label="Country" <Select label="Country"
name="country" name="user.country"
options={countryOptions} options={countryOptions}
value={countryOptions[0].value} value={countryOptions[0].value}
required /> required />
@ -135,8 +135,8 @@ var NameStep = React.createClass({
Why do we ask for this information <a onClick={this.handle}>?</a> Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}> </p>}>
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<Input label="First Name" type="text" name="first" required /> <Input label="First Name" type="text" name="user.name.first" required />
<Input label="Last Name" type="text" name="last" required /> <Input label="Last Name" type="text" name="user.name.last" required />
<Button type="submit">Next Step</Button> <Button type="submit">Next Step</Button>
</Form> </Form>
</FormStep> </FormStep>
@ -194,19 +194,19 @@ var OrganizationStep = React.createClass({
Why do we ask for this information <a onClick={this.handle}>?</a> Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}> </p>}>
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<Input label="Organization" type="text" name="organization" required /> <Input label="Organization" type="text" name="organization.name" required />
<Input label="Title / Position" type="text" name="title" required /> <Input label="Title / Position" type="text" name="organization.title" required />
<CheckboxGroup label="Type of Organization" <CheckboxGroup label="Type of Organization"
name="organizationType" name="organization.type"
value={[]} value={[]}
options={organizationOptions} options={organizationOptions}
onChange={this.onChooseOrganization} onChange={this.onChooseOrganization}
required /> required />
<Input type="text" <Input type="text"
name="organizationTypeOther" name="organization.other"
disabled={this.state.otherDisabled} disabled={this.state.otherDisabled}
required={!this.state.otherDisabled} /> required={!this.state.otherDisabled} />
<Input label="Website URL (not required)" type="url" name="website" /> <Input label="Website URL (not required)" type="organization.url" name="website" />
<Button type="submit">Next Step</Button> <Button type="submit">Next Step</Button>
</Form> </Form>
</FormStep> </FormStep>
@ -231,12 +231,12 @@ var AddressStep = React.createClass({
Why do we ask for this information <a onClick={this.handle}>?</a> Why do we ask for this information <a onClick={this.handle}>?</a>
</p>}> </p>}>
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<Select label="Country" name="addressCountry" options={countryOptions} required /> <Select label="Country" name="address.country" options={countryOptions} required />
<Input label="Address Line 1" type="text" name="addressLine1" required /> <Input label="Address Line 1" type="text" name="address.line1" required />
<Input label="Address Line 2" type="text" name="addressLine2" /> <Input label="Address Line 2" type="text" name="address.line2" />
<Input label="City" type="text" name="addressCity" required /> <Input label="City" type="text" name="address.city" required />
<Input label="ZIP Code" type="text" name="addressZip" required /> <Input label="ZIP Code" type="text" name="address.zip" required />
<Select label="State / Province" name="addressState" options={stateOptions} required /> <Select label="State / Province" name="address.state" options={stateOptions} required />
<Button type="submit">Next Step</Button> <Button type="submit">Next Step</Button>
</Form> </Form>
</FormStep> </FormStep>
@ -273,14 +273,14 @@ var EmailStep = React.createClass({
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<Input label="Email" <Input label="Email"
type="text" type="text"
name="email" name="user.email"
validations="isEmail" validations="isEmail"
validationError="Please enter a valid email address" validationError="Please enter a valid email address"
required /> required />
<Input label="Confirm Email" <Input label="Confirm Email"
type="text" type="text"
name="confirmEmail" name="confirmEmail"
validations="equalsField:email" validations="equalsField:user.email"
validationErrors={{ validationErrors={{
equalsField: 'The emails do not match' equalsField: 'The emails do not match'
}} }}
@ -304,7 +304,7 @@ var LastStep = React.createClass({
<p> <p>
Click the link in the confirmation email that we Click the link in the confirmation email that we
sent to the following address:<br /> sent to the following address:<br />
<strong>{this.props.formData.email}</strong> <strong>{this.props.formData.user.email}</strong>
</p> </p>
<div className="box-footer"> <div className="box-footer">
<a onClick="">Wrong email?</a> <a onClick="">Wrong email?</a>