From a080b2b64f995af65185667b55a99b8bb81fbf52 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Thu, 24 Mar 2016 12:46:07 -0400 Subject: [PATCH 01/55] wip --- src/components/formcard/formcard.jsx | 55 +++++++++++++++++++++++++++ src/components/formcard/formcard.scss | 17 +++++++++ 2 files changed, 72 insertions(+) create mode 100644 src/components/formcard/formcard.jsx create mode 100644 src/components/formcard/formcard.scss diff --git a/src/components/formcard/formcard.jsx b/src/components/formcard/formcard.jsx new file mode 100644 index 000000000..092563dc3 --- /dev/null +++ b/src/components/formcard/formcard.jsx @@ -0,0 +1,55 @@ +var React = require('react'); +var classNames = require('classnames'); + +require('./formcard.scss'); + + +var CounterIndicator = React.createClass({ + type: 'CounterIndicator', + propTypes: { + selected: false, + active: false + }, + render: function () { + var classes = classNames( + 'counterIndicator', + { + 'selected': this.props.selected, + 'active': this.props.selected + }, + this.props.className + ); + return ( +
+ ); + } +}) + +var FormCard = React.createClass({ + type: 'FormCard', + propTypes: { + + }, + render: function () { + var classes = classNames( + 'formcard', + this.props.className + ); + return ( +
+ +

+ {this.props.description} +

+
+ {for (var i = 0; i < this.props.counterMax; i++) { + + }} +
+ {this.props.children} +
+ ); + } +}); + +module.exports = FormCard; diff --git a/src/components/formcard/formcard.scss b/src/components/formcard/formcard.scss new file mode 100644 index 000000000..156be2c10 --- /dev/null +++ b/src/components/formcard/formcard.scss @@ -0,0 +1,17 @@ +@import "colors"; + +.counterindicator { + display: inline-block; + + &.active { + background-color: $ui-blue; + } + + &.selected { + border: 2px solid $ui-blue; + } +} + +.formcard { + width: 100px; +} From 144d6e375417bf85aa87d719acd25259fad10ee8 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Tue, 29 Mar 2016 10:07:23 -0400 Subject: [PATCH 02/55] wip --- src/components/formcard/formcard.jsx | 55 -------- src/components/formcard/formcard.scss | 17 --- src/components/formset/formset.jsx | 85 ++++++++++++ src/components/formset/formset.scss | 15 ++ .../stepnavigation/stepnavigation.jsx | 44 ++++++ src/routes.json | 6 + .../teacherregistration.jsx | 129 ++++++++++++++++++ 7 files changed, 279 insertions(+), 72 deletions(-) delete mode 100644 src/components/formcard/formcard.jsx delete mode 100644 src/components/formcard/formcard.scss create mode 100644 src/components/formset/formset.jsx create mode 100644 src/components/formset/formset.scss create mode 100644 src/components/stepnavigation/stepnavigation.jsx create mode 100644 src/views/teacherregistration/teacherregistration.jsx diff --git a/src/components/formcard/formcard.jsx b/src/components/formcard/formcard.jsx deleted file mode 100644 index 092563dc3..000000000 --- a/src/components/formcard/formcard.jsx +++ /dev/null @@ -1,55 +0,0 @@ -var React = require('react'); -var classNames = require('classnames'); - -require('./formcard.scss'); - - -var CounterIndicator = React.createClass({ - type: 'CounterIndicator', - propTypes: { - selected: false, - active: false - }, - render: function () { - var classes = classNames( - 'counterIndicator', - { - 'selected': this.props.selected, - 'active': this.props.selected - }, - this.props.className - ); - return ( -
- ); - } -}) - -var FormCard = React.createClass({ - type: 'FormCard', - propTypes: { - - }, - render: function () { - var classes = classNames( - 'formcard', - this.props.className - ); - return ( -
- -

- {this.props.description} -

-
- {for (var i = 0; i < this.props.counterMax; i++) { - - }} -
- {this.props.children} -
- ); - } -}); - -module.exports = FormCard; diff --git a/src/components/formcard/formcard.scss b/src/components/formcard/formcard.scss deleted file mode 100644 index 156be2c10..000000000 --- a/src/components/formcard/formcard.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import "colors"; - -.counterindicator { - display: inline-block; - - &.active { - background-color: $ui-blue; - } - - &.selected { - border: 2px solid $ui-blue; - } -} - -.formcard { - width: 100px; -} diff --git a/src/components/formset/formset.jsx b/src/components/formset/formset.jsx new file mode 100644 index 000000000..5b353ac10 --- /dev/null +++ b/src/components/formset/formset.jsx @@ -0,0 +1,85 @@ +var React = require('react'); +var classNames = require('classnames'); + +var StepNavigationComponents = require('../stepnavigation/stepnavigation.jsx'); +var StepNavigation = StepNavigationComponents.StepNavigation; +var StepNavigationIndicator = StepNavigationComponents.StepNavigationIndicator; + +require('./formset.scss'); + + +module.exports = { + FormStep: React.createClass({ + type: 'FormStep', + propTypes: { + + }, + getDefaultProps: function () { + return { + navigation: null + } + }, + render: function () { + var classes = classNames( + 'step', + this.props.className + ); + return ( +
+ + {this.props.description} + {this.props.navigation} + {this.props.children} +
+ ); + } + }), + FormSet: React.createClass({ + type: 'FormSet', + propTypes: { + step: function(props, propName, componentName) { + var stepValidator = function (props, propName) { + if (props[propName] > -1 && props[propName] < props.children.length) { + return null; + } else { + return new Error('Prop `step` out of range'); + } + } + return ( + React.PropTypes.number.isRequired(props, propName, componentName) || + stepValidator(props, propName, componentName) + ); + } + }, + getDefaultProps: function () { + return { + step: 0 + }; + }, + render: function () { + var classes = classNames( + 'formset', + this.props.className + ); + var navigation = ( + + {this.props.children.map(function (child, id) { + return ( + + ); + }.bind(this))} + ); + return ( +
+ {this.props.children.map(function (child, id) { + if (id === this.props.step) { + return child; + } + }.bind(this))} +
+ ); + } + }) +}; diff --git a/src/components/formset/formset.scss b/src/components/formset/formset.scss new file mode 100644 index 000000000..17df75100 --- /dev/null +++ b/src/components/formset/formset.scss @@ -0,0 +1,15 @@ +@import "../../colors"; + +.formset { + .counterindicator { + display: inline-block; + + &.active { + background-color: $ui-blue; + } + + &.selected { + border: 2px solid $ui-blue; + } + } +} diff --git a/src/components/stepnavigation/stepnavigation.jsx b/src/components/stepnavigation/stepnavigation.jsx new file mode 100644 index 000000000..978f066c8 --- /dev/null +++ b/src/components/stepnavigation/stepnavigation.jsx @@ -0,0 +1,44 @@ +var classNames = require('classnames'); +var React = require('react'); + +module.exports = { + StepNavigationIndicator: React.createClass({ + type: 'StepNavigationIndicator', + propTypes: { + selected: React.PropTypes.bool, + active: React.PropTypes.bool + }, + getDefaultProps: function () { + return { + selected: false, + active: false + }; + }, + render: function () { + var classes = classNames( + 'indicator', + { + 'selected': this.props.selected, + 'active': this.props.selected + }, + this.props.className + ); + return ( +
  • + ); + } + }), + StepNavigation: React.createClass({ + type: 'Navigation', + render: function () { + var classes = classNames( + 'step-navigation', + this.props.className); + return ( +
      + {this.props.children} +
    + ); + } + }) +}; diff --git a/src/routes.json b/src/routes.json index a573354f8..4d5bae599 100644 --- a/src/routes.json +++ b/src/routes.json @@ -67,6 +67,12 @@ "view": "jobs/jobs", "title": "Jobs" }, + { + "name": "teacherregistration", + "pattern": "^/register-teacher/?$", + "view": "teacherregistration/teacherregistration", + "title": "Teacher Registration" + }, { "name": "wedo2", "pattern": "^/wedo/?$", diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx new file mode 100644 index 000000000..2ad2ccb44 --- /dev/null +++ b/src/views/teacherregistration/teacherregistration.jsx @@ -0,0 +1,129 @@ +var classNames = require('classnames'); +var React = require('react'); + +var render = require('../../lib/render.jsx'); + +var formset = require('../../components/formset/formset.jsx'); + var FormSet = formset.FormSet; + var FormStep = formset.FormStep; +var Page = require('../../components/page/www/page.jsx'); + +var TeacherRegistration = React.createClass({ + type: 'TeacherRegistration', + getInitialState: function () { + return { + step: 0 + } + }, + setStep: function (step) { + this.setState({step: step}); + }, + render: function () { + var classes = classNames( + 'teacher-registration', + this.props.className); + return ( + + + Creating a Teacher Account requires additional information + for review. + The approval process can take up to 24 hours +

    } + key="step1"> +
    + + + + + + +
    +     + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    } + key="step2"> +
    + Lipsum +
    +     + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    } + key="step3"> +
    + Lipsum +
    +     + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    } + key="step4"> +
    + Lipsum +
    +     + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    } + key="step5"> +
    + Lipsum +
    +     + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    } + key="step6"> +
    + Lipsum +
    +     + + Tell us a little how you plan to use Scratch. + Why do we ask for this information ? +

    } + key="step7"> +
    + Lipsum +
    +     + + We will send you a confirmation email that will + allow you to access your Scratch Teacher Account. +

    } + key="step8"> +
    + Lipsum +
    +     +     + ); + } +}); + +render(, document.getElementById('app')); From 68d49a84dcd781f7a8f255ccc26ea071c4f57b2d Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 6 Apr 2016 09:58:38 -0400 Subject: [PATCH 03/55] Update FormSet to advance steps onSubmit --- src/components/formset/formset.jsx | 22 ++++++++---- .../teacherregistration.jsx | 34 +++++++++++++++++++ 2 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/components/formset/formset.jsx b/src/components/formset/formset.jsx index 5b353ac10..dec795256 100644 --- a/src/components/formset/formset.jsx +++ b/src/components/formset/formset.jsx @@ -19,6 +19,10 @@ module.exports = { navigation: null } }, + onSubmit: function (e) { + e.preventDefault(); + this.props.onNextStep(); + }, render: function () { var classes = classNames( 'step', @@ -29,7 +33,11 @@ module.exports = { {this.props.description} {this.props.navigation} - {this.props.children} + {React.Children.map(this.props.children, function (child){ + if (child.type === 'form') { + return React.cloneElement(child, {onSubmit: this.onSubmit}); + } + }, this)}
    • ); } @@ -63,21 +71,23 @@ module.exports = { ); var navigation = ( - {this.props.children.map(function (child, id) { + {React.Children.map(this.props.children, function (child, id) { return ( ); - }.bind(this))} + }, this)} ); return (
    - {this.props.children.map(function (child, id) { + {React.Children.map(this.props.children, function (child, id) { if (id === this.props.step) { - return child; + return React.cloneElement(child, {onNextStep: function () { + this.props.onSetStep(this.props.step + 1); + }.bind(this)}); } - }.bind(this))} + }, this)}
    ); } diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx index 2ad2ccb44..5d0819900 100644 --- a/src/views/teacherregistration/teacherregistration.jsx +++ b/src/views/teacherregistration/teacherregistration.jsx @@ -42,6 +42,7 @@ var TeacherRegistration = React.createClass({ +
    Lipsum +
    Lipsum +
    Lipsum +
    Lipsum +
    Lipsum +
    Lipsum +
    Lipsum +
    + + Lorem ipsum dolor sit amet +

    } + key="step8"> +
    +

    Confirm Your Email

    +

    + Click the link in the confirmation email that we + sent to the following address:
    + {this.state.email} +

    + +
    +
    +

    Wait for Approval

    +

    + Your information is being reviewed. Please be + patient, the approval process can take up to 24hrs. +

    +
    +     ); } From 17a3f1ebcb10b0427d3d4a6bb65eb618a97456c7 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 6 Apr 2016 09:59:13 -0400 Subject: [PATCH 04/55] Add initial form data --- src/views/teacherregistration/countries.json | 249 ++++++++++++++++++ .../teacherregistration.jsx | 88 ++++++- 2 files changed, 330 insertions(+), 7 deletions(-) create mode 100644 src/views/teacherregistration/countries.json diff --git a/src/views/teacherregistration/countries.json b/src/views/teacherregistration/countries.json new file mode 100644 index 000000000..11a6035c3 --- /dev/null +++ b/src/views/teacherregistration/countries.json @@ -0,0 +1,249 @@ +{ + "US": "United States", + "AF": "Afghanistan", + "AX": "Aland Islands", + "AL": "Albania", + "DZ": "Algeria", + "AS": "American Samoa", + "AD": "Andorra", + "AO": "Angola", + "AI": "Anguilla", + "AQ": "Antarctica", + "AG": "Antigua and Barbuda", + "AR": "Argentina", + "AM": "Armenia", + "AW": "Aruba", + "AU": "Australia", + "AT": "Austria", + "AZ": "Azerbaijan", + "BS": "Bahamas", + "BQ": "Bonaire, Sint Eustatius and Saba", + "BH": "Bahrain", + "BD": "Bangladesh", + "BB": "Barbados", + "BY": "Belarus", + "BE": "Belgium", + "BZ": "Belize", + "BJ": "Benin", + "BM": "Bermuda", + "BT": "Bhutan", + "BO": "Bolivia", + "BA": "Bosnia and Herzegovina", + "BW": "Botswana", + "BV": "Bouvet Island", + "BR": "Brazil", + "IO": "British Indian Ocean Territory", + "BN": "Brunei", + "BG": "Bulgaria", + "BF": "Burkina Faso", + "BI": "Burundi", + "KH": "Cambodia", + "CM": "Cameroon", + "CA": "Canada", + "CV": "Cape Verde", + "KY": "Cayman Islands", + "CF": "Central African Republic", + "TD": "Chad", + "CL": "Chile", + "CN": "China", + "CX": "Christmas Island", + "CC": "Cocos (Keeling) Islands", + "CO": "Colombia", + "KM": "Comoros", + "CG": "Congo", + "CD": "Congo, The Democratic Republic of the", + "CK": "Cook Islands", + "CR": "Costa Rica", + "CI": "Cote d'Ivoire", + "HR": "Croatia", + "CU": "Cuba", + "CY": "Cyprus", + "CZ": "Czech Republic", + "DK": "Denmark", + "DJ": "Djibouti", + "DM": "Dominica", + "DO": "Dominican Republic", + "EC": "Ecuador", + "EG": "Egypt", + "SV": "El Salvador", + "GQ": "Equatorial Guinea", + "ER": "Eritrea", + "EE": "Estonia", + "ET": "Ethiopia", + "FK": "Falkland Islands (Malvinas)", + "FO": "Faroe Islands", + "FJ": "Fiji", + "FI": "Finland", + "FR": "France", + "GF": "French Guiana", + "PF": "French Polynesia", + "TF": "French Southern Territories", + "GA": "Gabon", + "GM": "Gambia", + "GE": "Georgia", + "DE": "Germany", + "GH": "Ghana", + "GI": "Gibraltar", + "GR": "Greece", + "GL": "Greenland", + "GD": "Grenada", + "GP": "Guadeloupe", + "GU": "Guam", + "GT": "Guatemala", + "GG": "Guernsey", + "GN": "Guinea", + "GW": "Guinea-Bissau", + "GY": "Guyana", + "HT": "Haiti", + "HM": "Heard Island and McDonald Islands", + "VA": "Vatican City", + "HN": "Honduras", + "HK": "Hong Kong", + "HU": "Hungary", + "IS": "Iceland", + "IN": "India", + "ID": "Indonesia", + "IR": "Iran", + "IQ": "Iraq", + "IE": "Ireland", + "IM": "Isle of Man", + "IL": "Israel", + "IT": "Italy", + "JM": "Jamaica", + "JP": "Japan", + "JE": "Jersey", + "JO": "Jordan", + "KZ": "Kazakhstan", + "KE": "Kenya", + "KI": "Kiribati", + "KP": "North Korea", + "KR": "South Korea", + "KW": "Kuwait", + "KG": "Kyrgyzstan", + "LA": "Laos", + "LV": "Latvia", + "LB": "Lebanon", + "LS": "Lesotho", + "LR": "Liberia", + "LY": "Libya", + "LI": "Liechtenstein", + "LT": "Lithuania", + "LU": "Luxembourg", + "MO": "Macao", + "MK": "Macedonia, The Former Yugoslav Republic of", + "MG": "Madagascar", + "MW": "Malawi", + "MY": "Malaysia", + "MV": "Maldives", + "ML": "Mali", + "MT": "Malta", + "MH": "Marshall Islands", + "MQ": "Martinique", + "MR": "Mauritania", + "MU": "Mauritius", + "YT": "Mayotte", + "MX": "Mexico", + "FM": "Micronesia, Federated States of", + "MD": "Moldova", + "MC": "Monaco", + "MN": "Mongolia", + "ME": "Montenegro", + "MS": "Montserrat", + "MA": "Morocco", + "MZ": "Mozambique", + "MM": "Myanmar", + "NA": "Namibia", + "NR": "Nauru", + "NP": "Nepal", + "NL": "Netherlands", + "AN": "Netherlands Antilles", + "NC": "New Caledonia", + "NZ": "New Zealand", + "NI": "Nicaragua", + "NE": "Niger", + "NG": "Nigeria", + "NU": "Niue", + "NF": "Norfolk Island", + "MP": "Northern Mariana Islands", + "NO": "Norway", + "OM": "Oman", + "PK": "Pakistan", + "PW": "Palau", + "PS": "Palestine, State of", + "PA": "Panama", + "PG": "Papua New Guinea", + "PY": "Paraguay", + "PE": "Peru", + "PH": "Philippines", + "PN": "Pitcairn", + "PL": "Poland", + "PT": "Portugal", + "PR": "Puerto Rico", + "QA": "Qatar", + "RE": "Reunion", + "RO": "Romania", + "RU": "Russia", + "RW": "Rwanda", + "BL": "Saint Barthelemy", + "SH": "Saint Helena", + "KN": "Saint Kitts and Nevis", + "LC": "Saint Lucia", + "MF": "Saint Martin", + "PM": "Saint Pierre and Miquelon", + "VC": "Saint Vincent and the Grenadines", + "WS": "Samoa", + "SM": "San Marino", + "ST": "Sao Tome and Principe", + "SA": "Saudi Arabia", + "SN": "Senegal", + "RS": "Serbia", + "SC": "Seychelles", + "SL": "Sierra Leone", + "SG": "Singapore", + "SK": "Slovakia", + "SI": "Slovenia", + "SB": "Solomon Islands", + "SO": "Somalia", + "ZA": "South Africa", + "GS": "South Georgia and the South Sandwich Islands", + "ES": "Spain", + "LK": "Sri Lanka", + "SD": "Sudan", + "SR": "Suriname", + "SJ": "Svalbard and Jan Mayen", + "SZ": "Swaziland", + "SE": "Sweden", + "CH": "Switzerland", + "SY": "Syria", + "TW": "Taiwan", + "TJ": "Tajikistan", + "TZ": "Tanzania", + "TH": "Thailand", + "TL": "Timor-Leste", + "TG": "Togo", + "TK": "Tokelau", + "TO": "Tonga", + "TT": "Trinidad and Tobago", + "TN": "Tunisia", + "TR": "Turkey", + "TM": "Turkmenistan", + "TC": "Turks and Caicos Islands", + "TV": "Tuvalu", + "UG": "Uganda", + "UA": "Ukraine", + "AE": "United Arab Emirates", + "GB": "United Kingdom", + "UM": "United States Minor Outlying Islands", + "UY": "Uruguay", + "UZ": "Uzbekistan", + "VU": "Vanuatu", + "VE": "Venezuela", + "VN": "Vietnam", + "VG": "Virgin Islands, British", + "VI": "Virgin Islands, U.S.", + "WF": "Wallis and Futuna", + "EH": "Western Sahara", + "YE": "Yemen", + "ZM": "Zambia", + "ZW": "Zimbabwe" +} \ No newline at end of file diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx index 5d0819900..35a07a033 100644 --- a/src/views/teacherregistration/teacherregistration.jsx +++ b/src/views/teacherregistration/teacherregistration.jsx @@ -19,6 +19,10 @@ var TeacherRegistration = React.createClass({ this.setState({step: step}); }, render: function () { + var months = [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', + 'August', 'September', 'October', 'November', 'December']; + var countries = require('./countries.json'); var classes = classNames( 'teacher-registration', this.props.className); @@ -53,7 +57,29 @@ var TeacherRegistration = React.createClass({

    } key="step2">
    - Lipsum + + + + + + + + + + + @@ -65,7 +91,10 @@ var TeacherRegistration = React.createClass({

    } key="step3">
    - Lipsum + + + +
    @@ -77,7 +106,13 @@ var TeacherRegistration = React.createClass({

    } key="step4">
    - Lipsum + + + + @@ -89,7 +124,27 @@ var TeacherRegistration = React.createClass({

    } key="step5">
    - Lipsum + + + + + + {['Elementary School', 'Middle School', + 'High School', 'University / College', + 'Museum', 'Library', 'Camp'].map(function (type, id) { + var typeId = 'organizationType' + id; + return [ + , + + ]; + })} + + + +
    @@ -101,7 +156,26 @@ var TeacherRegistration = React.createClass({

    } key="step6">
    - Lipsum + + + + + + + + + + + +
    @@ -113,7 +187,6 @@ var TeacherRegistration = React.createClass({

    } key="step7">
    - Lipsum
    @@ -125,7 +198,8 @@ var TeacherRegistration = React.createClass({

    } key="step8">
    - Lipsum + + + ); + } +}); + +module.exports = TextArea; diff --git a/src/components/forms/textarea.scss b/src/components/forms/textarea.scss new file mode 100644 index 000000000..24d0fc3f6 --- /dev/null +++ b/src/components/forms/textarea.scss @@ -0,0 +1,34 @@ +@import "../../colors"; + +$base-bg: $ui-white; +$focus-bg: lighten($ui-blue, 35%); +$fail-bg: lighten($ui-orange, 35%); +$pass-bg: lighten($ui-aqua, 35%); + +.textarea { + transition: all 1s ease; + margin: .5em 0; + border: 1px solid $active-gray; + border-radius: 5px; + background-color: $base-bg; + padding: .75em 1em; + color: $type-gray; + font-size: .8rem; + + &:focus { + transition: all 1s ease; + outline: none; + border: 1px solid $active-dark-gray; + background-color: $focus-bg; + } + + &.fail { + border: 1px solid $active-dark-gray; + background-color: $fail-bg; + } + + &.pass { + border: 1px solid $active-dark-gray; + background-color: $pass-bg; + } +} diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx index edde1913c..2cf985bc1 100644 --- a/src/views/teacherregistration/teacherregistration.jsx +++ b/src/views/teacherregistration/teacherregistration.jsx @@ -3,10 +3,14 @@ var React = require('react'); var render = require('../../lib/render.jsx'); +var Button = require('../../components/forms/button.jsx'); var formset = require('../../components/forms/formset.jsx'); var FormSet = formset.FormSet; var FormStep = formset.FormStep; +var Input = require('../../components/forms/input.jsx'); var Page = require('../../components/page/www/page.jsx'); +var Select = require('../../components/forms/select.jsx'); +var TextArea = require('../../components/forms/textarea.jsx'); var TeacherRegistration = React.createClass({ type: 'TeacherRegistration', @@ -41,12 +45,12 @@ var TeacherRegistration = React.createClass({ key="step1"> - + - + - - + +
    - {months.map(function (name, id) { return (); })} - + - {Array.apply(null, Array(100)).map(function (v, id) { return (); })} - - - - - - + + + + + + + + - {Object.keys(countries).map(function (code, id) { return (); })} - - + +
    - + - - + +
    - - + + - +
    - + - + {['Elementary School', 'Middle School', 'High School', 'University / College', 'Museum', 'Library', 'Camp'].map(function (type, id) { var typeId = 'organizationType' + id; return [ - , ]; })} - - + + - - + +
    } key="step6">
    - - {Object.keys(countries).map(function (code, id) { return (); })} - - - - - - - - - - - + + + + + + + + + + - + +
    } key="step7">
    - + + + ); } }); diff --git a/src/components/forms/validateMixin.jsx b/src/components/forms/validateMixin.jsx new file mode 100644 index 000000000..72bcdc557 --- /dev/null +++ b/src/components/forms/validateMixin.jsx @@ -0,0 +1,24 @@ +var defaults = require('lodash.defaultsdeep'); +var React = require('react'); + +var validateMixin = function (Component) { + var ValidatedComponent = React.createClass({ + getDefaultValidationErrors: function () { + return { + isDefaultRequiredValue: 'This field is required' + }; + }, + render: function () { + var validationErrors = defaults( + this.getDefaultValidationErrors(), + this.props.validationErrors + ); + return ( + + ); + } + }); + return ValidatedComponent; +}; + +module.exports = validateMixin; diff --git a/src/components/forms/validations.js b/src/components/forms/validations.js new file mode 100644 index 000000000..38985788c --- /dev/null +++ b/src/components/forms/validations.js @@ -0,0 +1,10 @@ +var Validations = { + notEquals: function (values, value, neq) { + return value !== neq; + }, + notEqualsField: function (values, value, field) { + return value !== values[field]; + } +}; + +module.exports = Validations; diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx index e7b49a21a..2ddccecf9 100644 --- a/src/views/teacherregistration/teacherregistration.jsx +++ b/src/views/teacherregistration/teacherregistration.jsx @@ -1,35 +1,337 @@ var classNames = require('classnames'); +var defaults = require('lodash.defaultsdeep'); var React = require('react'); var render = require('../../lib/render.jsx'); var Button = require('../../components/forms/button.jsx'); +var Checkbox = require('../../components/forms/checkbox.jsx'); +var CheckboxGroup = require('../../components/forms/checkbox-group.jsx'); +var Form = require('../../components/forms/form.jsx'); var formset = require('../../components/forms/formset.jsx'); var FormSet = formset.FormSet; var FormStep = formset.FormStep; var Input = require('../../components/forms/input.jsx'); var Label = require('../../components/forms/label.jsx'); var Page = require('../../components/page/www/page.jsx'); +var RadioGroup = require('../../components/forms/radio-group.jsx'); var Select = require('../../components/forms/select.jsx'); var TextArea = require('../../components/forms/textarea.jsx'); +var COUNTRIES = require('./countries.json'); require('./teacherregistration.scss'); + +var UsernameStep = React.createClass({ + render: function () { + return ( + + Creating a Teacher Account requires additional information + for review. + The approval process can take up to 24 hours +

    }> + + + + + + +     + ); + } +}); +var DemographicsStep = React.createClass({ + onSubmit: function () { + this.props.onNextStep(); + }, + render: function () { + var countryOptions = Object.keys(COUNTRIES).map(function (code) { + return {value: code, label: COUNTRIES[code]}; + }); + var monthOptions = [ + 'January', 'February', 'March', 'April', 'May', 'June', 'July', + 'August', 'September', 'October', 'November', 'December' + ].map(function (label, id) { + return {value: id+1, label: label}; + }); + var yearOptions = Array.apply(null, Array(100)).map(function (v, id) { + var year = 2016 - id; + return {value: year, label: year}; + }); + return ( + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    }> +
    + + + + + + + + +
    + ); + } +}); +var PhoneNumberStep = React.createClass({ + onSubmit: function () { + this.props.onNextStep(); + }, + render: function () { + return ( + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    }> +
    + + + + + + +
    + ); + } +}); +var OrganizationStep = React.createClass({ + onSubmit: function () { + this.props.onNextStep(); + }, + render: function () { + var organizationOptions = [ + 'Elementary School', 'Middle School', 'High School', 'University / College', + 'Museum', 'Library', 'Camp' + ].map(function (type) { return {value: type, label: type}; }); + return ( + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    }> +
    + + + + + + + + + + + +
    + ); + } +}); +var AddressStep = React.createClass({ + onSubmit: function () { + this.props.onNextStep(); + }, + render: function () { + var countryOptions = Object.keys(COUNTRIES).map(function (code) { + return {value: code, label: COUNTRIES[code]}; + }); + var stateOptions = ['every','state','in','the','world'].map(function (name) { + return {value: name, label: name}; + }); + return ( + + Your responses to these questions will be kept private. + Why do we ask for this information ? +

    }> +
    + + + + + + + + + +