Skip to content

GitLab

S
scratch-www
Commit 1910d38b authored by Matthew Taylor's avatar Matthew Taylor
Browse files
Options

Merge branch 'feature/teacher-registration-flow' of... 

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
parents 8fb16bf3 93ed60cd
Show whitespace changes
Inline Side-by-side
Showing with 117 additions and 46 deletions
src/views/teacherregistration/steps.jsx → src/components/registration/steps.jsx
View file @ 1910d38b
...@@ -301,10 +301,7 @@ module.exports = { ...@@ -301,10 +301,7 @@ module.exports = {
<Form onValidSubmit={this.props.onNextStep}> <Form onValidSubmit={this.props.onNextStep}>
<PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})} <PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})}
name="phone" name="phone"
defaultCountry={ defaultCountry={this.props.defaultCountry}
(this.props.formData.user && this.props.formData.user.country) ||
this.props.defaultCountry
}
required /> required />
<Checkbox label={formatMessage({id: 'teacherRegistration.phoneConsent'})} <Checkbox label={formatMessage({id: 'teacherRegistration.phoneConsent'})}
name="phoneConsent" name="phoneConsent"
...@@ -420,10 +417,7 @@ module.exports = { ...@@ -420,10 +417,7 @@ module.exports = {
}, },
getInitialState: function () { getInitialState: function () {
return { return {
countryChoice: ( countryChoice: this.props.defaultCountry,
(this.props.formData.user && this.props.formData.user.country) ||
this.props.defaultCountry
),
waiting: false waiting: false
}; };
}, },
...@@ -644,33 +638,47 @@ module.exports = { ...@@ -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 () { render: function () {
return ( return (
<Slide className="last-step"> <Slide className="last-step">
<h2> <h2>
<intl.FormattedMessage id="teacherRegistration.lastStepTitle" /> <intl.FormattedMessage id="registration.lastStepTitle" />
</h2> </h2>
<p className="description"> <p className="description">
<intl.FormattedMessage id="teacherRegistration.lastStepDescription" /> <intl.FormattedMessage id="registration.lastStepDescription" />
</p> </p>
<Card className="confirm"> {this.props.confirmed || !this.props.email ?
<h4><intl.FormattedMessage id="teacherRegistration.confirmYourEmail" /></h4> []
:
(<Card className="confirm">
<h4><intl.FormattedMessage id="registration.confirmYourEmail" /></h4>
<p> <p>
<intl.FormattedMessage id="teacherRegistration.confirmYourEmailDescription" /><br /> <intl.FormattedMessage id="registration.confirmYourEmailDescription" /><br />
<strong>{this.props.formData.user && this.props.formData.user.email}</strong> <strong>{this.props.email}</strong>
</p> </p>
</Card> </Card>)
}
{this.props.invited ?
<Card className="wait"> <Card className="wait">
<h4><intl.FormattedMessage id="teacherRegistration.waitForApproval" /></h4> <h4><intl.FormattedMessage id="registration.waitForApproval" /></h4>
<p> <p>
<intl.FormattedMessage id="teacherRegistration.waitForApprovalDescription" /> <intl.FormattedMessage id="registration.waitForApprovalDescription" />
</p> </p>
</Card> </Card>
:
[]
}
<Card className="resources"> <Card className="resources">
<h4><intl.FormattedMessage id="teacherRegistration.checkOutResources" /></h4> <h4><intl.FormattedMessage id="registration.checkOutResources" /></h4>
<p> <p>
<intl.FormattedHTMLMessage id="teacherRegistration.checkOutResourcesDescription" /> <intl.FormattedHTMLMessage id="registration.checkOutResourcesDescription" />
</p> </p>
</Card> </Card>
</Slide> </Slide>
......
src/l10n.json
View file @ 1910d38b
...@@ -103,5 +103,15 @@ ...@@ -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.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.FaqAgeRangeQ": "What is the age range for Scratch?",
"parents.FaqResourcesQ": "What resources are available for learning 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>."
} }
src/routes.json
View file @ 1910d38b
...@@ -93,10 +93,16 @@ ...@@ -93,10 +93,16 @@
}, },
{ {
"name": "teacherregistration", "name": "teacherregistration",
"pattern": "^/register-teacher/?$", "pattern": "^/educators/register$",
"view": "teacherregistration/teacherregistration", "view": "teacherregistration/teacherregistration",
"title": "Teacher Registration" "title": "Teacher Registration"
}, },
{
"name": "teacherwaitingroom",
"pattern": "^/educators/waiting",
"view": "teacherwaitingroom/teacherwaitingroom",
"title": "Thank you for requesting a Scratch Teacher Account"
},
{ {
"name": "wedo2", "name": "wedo2",
"pattern": "^/wedo/?$", "pattern": "^/wedo/?$",
......
src/views/teacherregistration/l10n.json
View file @ 1910d38b
...@@ -52,13 +52,5 @@ ...@@ -52,13 +52,5 @@
"teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?", "teacherRegistration.howUseScratch": "How do you plan to use Scratch at your organization?",
"teacherRegistration.emailStepTitle": "Email Address", "teacherRegistration.emailStepTitle": "Email Address",
"teacherRegistration.emailStepDescription": "We will send you a confirmation email that will allow you to access your Scratch Teacher Account.", "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.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>."
} }
src/views/teacherregistration/teacherregistration.jsx
View file @ 1910d38b
...@@ -6,7 +6,7 @@ var api = require('../../lib/api'); ...@@ -6,7 +6,7 @@ var api = require('../../lib/api');
var Deck = require('../../components/deck/deck.jsx'); var Deck = require('../../components/deck/deck.jsx');
var Progression = require('../../components/progression/progression.jsx'); var Progression = require('../../components/progression/progression.jsx');
var Steps = require('./steps.jsx'); var Steps = require('../../components/registration/steps.jsx');
require('./teacherregistration.scss'); require('./teacherregistration.scss');
...@@ -79,14 +79,29 @@ var TeacherRegistration = React.createClass({ ...@@ -79,14 +79,29 @@ var TeacherRegistration = React.createClass({
<Steps.RegistrationError {... this.state} /> <Steps.RegistrationError {... this.state} />
: :
<Progression {... this.state}> <Progression {... this.state}>
<Steps.DemographicsStep {... this.state} onNextStep={this.advanceStep} /> <Steps.UsernameStep onNextStep={this.advanceStep}
<Steps.NameStep {... this.state} onNextStep={this.advanceStep} /> waiting={this.state.waiting} />
<Steps.PhoneNumberStep {... this.state} onNextStep={this.advanceStep} /> <Steps.DemographicsStep onNextStep={this.advanceStep}
<Steps.OrganizationStep {... this.state} onNextStep={this.advanceStep} /> waiting={this.state.waiting} />
<Steps.AddressStep {... this.state} onNextStep={this.advanceStep} /> <Steps.NameStep onNextStep={this.advanceStep}
<Steps.UseScratchStep {... this.state} onNextStep={this.advanceStep} /> waiting={this.state.waiting} />
<Steps.EmailStep {... this.state} onNextStep={this.register} /> <Steps.PhoneNumberStep onNextStep={this.advanceStep}
<Steps.LastStep {... this.state} /> 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> </Progression>
} }
</Deck> </Deck>
......
src/views/teacherwaitingroom/teacherwaitingroom.jsx 0 → 100644
View file @ 1910d38b
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'));
src/views/teacherwaitingroom/teacherwaitingroom.scss 0 → 100644
View file @ 1910d38b
@import "../../colors";
.teacher-waitingroom {
background-color: $ui-purple;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment