mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-30 02:56:20 -05:00
Merge branch 'feature/teacher-registration-flow' of https://github.com/rschamp/scratch-www into feature/teacher-registration-flow
* 'feature/teacher-registration-flow' of https://github.com/rschamp/scratch-www: Add teacher waiting room view Only pass necessary props to steps # Conflicts: # src/components/registration/steps.jsx # src/views/teacherregistration/teacherregistration.jsx
This commit is contained in:
Matthew Taylor
commit
1910d38bc6
7 changed files with 117 additions and 46 deletions
|
|
@ -301,10 +301,7 @@ module.exports = {
|
|||
<Form onValidSubmit={this.props.onNextStep}>
|
||||
<PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})}
|
||||
name="phone"
|
||||
defaultCountry={
|
||||
(this.props.formData.user && this.props.formData.user.country) ||
|
||||
this.props.defaultCountry
|
||||
}
|
||||
defaultCountry={this.props.defaultCountry}
|
||||
required />
|
||||
<Checkbox label={formatMessage({id: 'teacherRegistration.phoneConsent'})}
|
||||
name="phoneConsent"
|
||||
|
|
@ -420,10 +417,7 @@ module.exports = {
|
|||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
countryChoice: (
|
||||
(this.props.formData.user && this.props.formData.user.country) ||
|
||||
this.props.defaultCountry
|
||||
),
|
||||
countryChoice: this.props.defaultCountry,
|
||||
waiting: false
|
||||
};
|
||||
},
|
||||
|
|
@ -644,33 +638,47 @@ module.exports = {
|
|||
);
|
||||
}
|
||||
})),
|
||||
LastStep: intl.injectIntl(React.createClass({
|
||||
TeacherApprovalStep: intl.injectIntl(React.createClass({
|
||||
getDefaultProps: function () {
|
||||
return {
|
||||
email: null,
|
||||
invited: false
|
||||
};
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<Slide className="last-step">
|
||||
<h2>
|
||||
<intl.FormattedMessage id="teacherRegistration.lastStepTitle" />
|
||||
<intl.FormattedMessage id="registration.lastStepTitle" />
|
||||
</h2>
|
||||
<p className="description">
|
||||
<intl.FormattedMessage id="teacherRegistration.lastStepDescription" />
|
||||
<intl.FormattedMessage id="registration.lastStepDescription" />
|
||||
</p>
|
||||
<Card className="confirm">
|
||||
<h4><intl.FormattedMessage id="teacherRegistration.confirmYourEmail" /></h4>
|
||||
{this.props.confirmed || !this.props.email ?
|
||||
[]
|
||||
:
|
||||
(<Card className="confirm">
|
||||
<h4><intl.FormattedMessage id="registration.confirmYourEmail" /></h4>
|
||||
<p>
|
||||
<intl.FormattedMessage id="teacherRegistration.confirmYourEmailDescription" /><br />
|
||||
<strong>{this.props.formData.user && this.props.formData.user.email}</strong>
|
||||
<intl.FormattedMessage id="registration.confirmYourEmailDescription" /><br />
|
||||
<strong>{this.props.email}</strong>
|
||||
</p>
|
||||
</Card>
|
||||
</Card>)
|
||||
}
|
||||
{this.props.invited ?
|
||||
<Card className="wait">
|
||||
<h4><intl.FormattedMessage id="teacherRegistration.waitForApproval" /></h4>
|
||||
<h4><intl.FormattedMessage id="registration.waitForApproval" /></h4>
|
||||
<p>
|
||||
<intl.FormattedMessage id="teacherRegistration.waitForApprovalDescription" />
|
||||
<intl.FormattedMessage id="registration.waitForApprovalDescription" />
|
||||
</p>
|
||||
</Card>
|
||||
:
|
||||
[]
|
||||
}
|
||||
<Card className="resources">
|
||||
<h4><intl.FormattedMessage id="teacherRegistration.checkOutResources" /></h4>
|
||||
<h4><intl.FormattedMessage id="registration.checkOutResources" /></h4>
|
||||
<p>
|
||||
<intl.FormattedHTMLMessage id="teacherRegistration.checkOutResourcesDescription" />
|
||||
<intl.FormattedHTMLMessage id="registration.checkOutResourcesDescription" />
|
||||
</p>
|
||||
</Card>
|
||||
</Slide>
|
||||
|
|
@ -103,5 +103,15 @@
|
|||
"parents.FaqAgeRangeA": "While Scratch is primarily designed for 8 to 16 year olds, it is also used by people of all ages, including younger children with their parents.",
|
||||
"parents.FaqAgeRangeQ": "What is the age range for Scratch?",
|
||||
"parents.FaqResourcesQ": "What resources are available for learning Scratch?",
|
||||
"parents.introDescription": "Scratch is a programming language and an online community where children can program and share interactive media such as stories, games, and animation with people from all over the world. As children create with Scratch, they learn to think creatively, work collaboratively, and reason systematically. Scratch is designed and maintained by the Lifelong Kindergarten group at the MIT Media Lab."
|
||||
"parents.introDescription": "Scratch is a programming language and an online community where children can program and share interactive media such as stories, games, and animation with people from all over the world. As children create with Scratch, they learn to think creatively, work collaboratively, and reason systematically. Scratch is designed and maintained by the Lifelong Kindergarten group at the MIT Media Lab.",
|
||||
|
||||
"registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
|
||||
"registration.lastStepDescription": "We are currently processing your application. ",
|
||||
"registration.confirmYourEmail": "Confirm Your Email",
|
||||
"registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
|
||||
"registration.waitForApproval": "Wait for Approval",
|
||||
"registration.waitForApprovalDescription": "Your information is being reviewed. Please be patient, the approval process can take up to 24 hours. You will receive an email with your login information once your account has been created.",
|
||||
"registration.checkOutResources": "Get Started with Resources",
|
||||
"registration.checkOutResourcesDescription": "Explore materials for educators and facilitators written by the Scratch Team, including <a href='/educators#resources'>tips, tutorials, and guides</a>."
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,10 +93,16 @@
|
|||
},
|
||||
{
|
||||
"name": "teacherregistration",
|
||||
"pattern": "^/register-teacher/?$",
|
||||
"pattern": "^/educators/register$",
|
||||
"view": "teacherregistration/teacherregistration",
|
||||
"title": "Teacher Registration"
|
||||
},
|
||||
{
|
||||
"name": "teacherwaitingroom",
|
||||
"pattern": "^/educators/waiting",
|
||||
"view": "teacherwaitingroom/teacherwaitingroom",
|
||||
"title": "Thank you for requesting a Scratch Teacher Account"
|
||||
},
|
||||
{
|
||||
"name": "wedo2",
|
||||
"pattern": "^/wedo/?$",
|
||||
|
|
|
|||
|
|
@ -52,13 +52,5 @@
|
|||
"teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?",
|
||||
"teacherRegistration.emailStepTitle": "Email Address",
|
||||
"teacherRegistration.emailStepDescription": "We will send you a confirmation email that will allow you to access your Scratch Teacher Account.",
|
||||
"teacherRegistration.validationEmailMatch": "The emails do not match",
|
||||
"teacherRegistration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
|
||||
"teacherRegistration.lastStepDescription": "We are currently processing your application. ",
|
||||
"teacherRegistration.confirmYourEmail": "Confirm Your Email",
|
||||
"teacherRegistration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
|
||||
"teacherRegistration.waitForApproval": "Wait for Approval",
|
||||
"teacherRegistration.waitForApprovalDescription": "Your information is being reviewed. Please be patient, the approval process can take up to 24 hours. You will receive an email with your login information once your account has been created.",
|
||||
"teacherRegistration.checkOutResources": "Get Started with Resources",
|
||||
"teacherRegistration.checkOutResourcesDescription": "Explore materials for educators and facilitators written by the Scratch Team, including <a href='/educators#resources'>tips, tutorials, and guides</a>."
|
||||
"teacherRegistration.validationEmailMatch": "The emails do not match"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ var api = require('../../lib/api');
|
|||
|
||||
var Deck = require('../../components/deck/deck.jsx');
|
||||
var Progression = require('../../components/progression/progression.jsx');
|
||||
var Steps = require('./steps.jsx');
|
||||
var Steps = require('../../components/registration/steps.jsx');
|
||||
|
||||
require('./teacherregistration.scss');
|
||||
|
||||
|
|
@ -79,14 +79,29 @@ var TeacherRegistration = React.createClass({
|
|||
<Steps.RegistrationError {... this.state} />
|
||||
:
|
||||
<Progression {... this.state}>
|
||||
<Steps.DemographicsStep {... this.state} onNextStep={this.advanceStep} />
|
||||
<Steps.NameStep {... this.state} onNextStep={this.advanceStep} />
|
||||
<Steps.PhoneNumberStep {... this.state} onNextStep={this.advanceStep} />
|
||||
<Steps.OrganizationStep {... this.state} onNextStep={this.advanceStep} />
|
||||
<Steps.AddressStep {... this.state} onNextStep={this.advanceStep} />
|
||||
<Steps.UseScratchStep {... this.state} onNextStep={this.advanceStep} />
|
||||
<Steps.EmailStep {... this.state} onNextStep={this.register} />
|
||||
<Steps.LastStep {... this.state} />
|
||||
<Steps.UsernameStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.DemographicsStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.NameStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.PhoneNumberStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting}
|
||||
defaultCountry={
|
||||
this.state.formData.user && this.state.formData.user.country
|
||||
} />
|
||||
<Steps.OrganizationStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.AddressStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting}
|
||||
defaultCountry={
|
||||
this.state.formData.user && this.state.formData.user.country
|
||||
} />
|
||||
<Steps.UseScratchStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.EmailStep onNextStep={this.register}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.TeacherApprovalStep email={this.state.formData.user && this.state.formData.user.email} />
|
||||
</Progression>
|
||||
}
|
||||
</Deck>
|
||||
|
|
|
|||
35
src/views/teacherwaitingroom/teacherwaitingroom.jsx
Normal file
35
src/views/teacherwaitingroom/teacherwaitingroom.jsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
var classNames = require('classnames');
|
||||
var connect = require('react-redux').connect;
|
||||
var React = require('react');
|
||||
var render = require('../../lib/render.jsx');
|
||||
|
||||
var Deck = require ('../../components/deck/deck.jsx');
|
||||
var TeacherApprovalStep = require('../../components/registration/steps.jsx').TeacherApprovalStep;
|
||||
|
||||
require('./teacherwaitingroom.scss');
|
||||
|
||||
var TeacherWaitingRoom = React.createClass({
|
||||
displayName: 'TeacherWaitingRoom',
|
||||
render: function () {
|
||||
var permissions = this.props.session.permissions || {};
|
||||
var user = this.props.session.user || {};
|
||||
return (
|
||||
<Deck className={classNames('teacher-waitingroom', this.props.className)}>
|
||||
<TeacherApprovalStep confirmed={permissions.social}
|
||||
invited={permissions.educator_invitee}
|
||||
educator={permissions.educator}
|
||||
email={user.email} />
|
||||
</Deck>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var mapStateToProps = function (state) {
|
||||
return {
|
||||
session: state.session.session
|
||||
};
|
||||
};
|
||||
|
||||
var ConnectedTeacherWaitingRoom = connect(mapStateToProps)(TeacherWaitingRoom);
|
||||
|
||||
render(<ConnectedTeacherWaitingRoom />, document.getElementById('app'));
|
||||
5
src/views/teacherwaitingroom/teacherwaitingroom.scss
Normal file
5
src/views/teacherwaitingroom/teacherwaitingroom.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@import "../../colors";
|
||||
|
||||
.teacher-waitingroom {
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
Loading…
Reference in a new issue