Add teacher waiting room view

This commit is contained in:
Ray Schamp 2016-06-22 13:35:38 -04:00
parent de8ac6c56a
commit 93ed60cd0d
7 changed files with 89 additions and 32 deletions

View file

@ -581,38 +581,47 @@ module.exports = {
);
}
})),
LastStep: intl.injectIntl(React.createClass({
TeacherApprovalStep: intl.injectIntl(React.createClass({
getDefaultProps: function () {
return {
email: null
email: null,
invited: false
};
},
render: function () {
return (
<Slide>
<h1>
<intl.FormattedMessage id="teacherRegistration.lastStepTitle" />
<intl.FormattedMessage id="registration.lastStepTitle" />
</h1>
<p className="description">
<intl.FormattedMessage id="teacherRegistration.lastStepDescription" />
<intl.FormattedMessage id="registration.lastStepDescription" />
</p>
<Card className="confirm">
<h2><intl.FormattedMessage id="teacherRegistration.confirmYourEmail" /></h2>
<p>
<intl.FormattedMessage id="teacherRegistration.confirmYourEmailDescription" /><br />
<strong>{this.props.email}</strong>
</p>
</Card>
<Card className="wait">
<h2><intl.FormattedMessage id="teacherRegistration.waitForApproval" /></h2>
<p>
<intl.FormattedMessage id="teacherRegistration.waitForApprovalDescription" />
</p>
</Card>
{this.props.confirmed || !this.props.email ?
[]
:
(<Card className="confirm">
<h2><intl.FormattedMessage id="registration.confirmYourEmail" /></h2>
<p>
<intl.FormattedMessage id="registration.confirmYourEmailDescription" /><br />
<strong>{this.props.email}</strong>
</p>
</Card>)
}
{this.props.invited ?
<Card className="wait">
<h2><intl.FormattedMessage id="registration.waitForApproval" /></h2>
<p>
<intl.FormattedMessage id="registration.waitForApprovalDescription" />
</p>
</Card>
:
[]
}
<Card className="resources">
<h2><intl.FormattedMessage id="teacherRegistration.checkOutResources" /></h2>
<h2><intl.FormattedMessage id="registration.checkOutResources" /></h2>
<p>
<intl.FormattedHTMLMessage id="teacherRegistration.checkOutResourcesDescription" />
<intl.FormattedHTMLMessage id="registration.checkOutResourcesDescription" />
</p>
</Card>
</Slide>

View file

@ -102,5 +102,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>."
}

View file

@ -69,10 +69,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/?$",

View file

@ -49,13 +49,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"
}

View file

@ -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');
@ -101,7 +101,7 @@ var TeacherRegistration = React.createClass({
waiting={this.state.waiting} />
<Steps.EmailStep onNextStep={this.register}
waiting={this.state.waiting} />
<Steps.LastStep email={this.state.formData.user && this.state.formData.user.email} />
<Steps.TeacherApprovalStep email={this.state.formData.user && this.state.formData.user.email} />
</Progression>
}
</Deck>

View 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'));

View file

@ -0,0 +1,5 @@
@import "../../colors";
.teacher-waitingroom {
background-color: $ui-purple;
}