Merge pull request #765 from rschamp/bugfix/752

Redesign invite step, add option to log out

src/components/registration/steps.jsx

@@ -6,7 +6,6 @@ var intl = require('../../lib/intl.jsx');
 var log = require('../../lib/log');
 var smartyStreets = require('../../lib/smarty-streets');
 
-var Avatar = require('../../components/avatar/avatar.jsx');
 var Button = require('../../components/forms/button.jsx');
 var Card = require('../../components/card/card.jsx');
 var CharCount = require('../../components/forms/charcount.jsx');
@@ -809,6 +808,9 @@ module.exports = {
     ClassInviteStep: intl.injectIntl(React.createClass({
         getDefaultProps: function () {
             return {
+                classroom: null,
+                onHandleLogOut: function () {},
+                studentUsername: null,
                 waiting: false
             };
         },
@@ -822,9 +824,7 @@ module.exports = {
                     {this.props.waiting ? [
                         <Spinner />
                     ] : [
-                        <Avatar className="invite-avatar"
+                        <h2>{this.props.studentUsername}</h2>,
-                                src={this.props.classroom.educator.profile.images['50x50']} />,
-                        <h2>{this.props.classroom.educator.username}</h2>,
                         <p className="description">
                             {formatMessage({id: 'registration.classroomInviteStepDescription'})}
                         </p>,
@@ -832,11 +832,14 @@ module.exports = {
                             <div className="contents">
                                 <h3>{this.props.classroom.title}</h3>
                                 <img className="class-image" src={this.props.classroom.images['250x150']} />
+                                <p>{formatMessage({id: 'registration.invitedBy'})}</p>
+                                <p><strong>{this.props.classroom.educator.username}</strong></p>
                             </div>
                             <NextStepButton onClick={this.onNextStep}
                                             waiting={this.props.waiting}
                                             text={formatMessage({id: 'general.getStarted'})} />
                         </Card>,
+                        <p><a onClick={this.props.onHandleLogOut}>{formatMessage({id: 'registration.notYou'})}</a></p>,
                         <StepNavigation steps={this.props.totalSteps - 1} active={this.props.activeStep} />
                     ]}
                 </Slide>

src/components/registration/steps.scss

@@ -29,6 +29,15 @@
         color: $ui-dark-gray;
     }
 
+    &.class-invite-step {
+        text-align: center;
+
+        > p a {
+            text-decoration: underline;
+            color: $ui-white;
+            font-weight: inherit;
+        }
+    }
 
     &.class-invite-step,
     &.class-welcome-step {

src/l10n.json

@@ -111,17 +111,19 @@
     "registration.choosePasswordStepDescription": "Type in a new password for your account. You will use this password the next time you log into Scratch.",
     "registration.choosePasswordStepTitle": "Create a password",
     "registration.choosePasswordStepTooltip": "Don't use your name or anything that's easy for someone else to guess.",
-    "registration.classroomInviteStepDescription": "has invited you to join the class:",
+    "registration.classroomInviteStepDescription": "you have been invited to join the class:",
     "registration.confirmYourEmail": "Confirm Your Email",
     "registration.confirmYourEmailDescription": "If you haven't already, please click the link in the confirmation email sent to:",
     "registration.createUsername": "Create a Username",
     "registration.goToClass": "Go to Class",
+    "registration.invitedBy": "invited by",
     "registration.lastStepTitle": "Thank you for requesting a Scratch Teacher Account",
     "registration.lastStepDescription": "We are currently processing your application. ",
     "registration.mustBeNewStudent": "You must be a new student to complete your registration",
     "registration.nameStepTooltip": "This information is used for verification and to aggregate usage statistics.",
     "registration.newPassword": "New Password",
     "registration.nextStep": "Next Step",
+    "registration.notYou": "Not you? Log in as another user",
     "registration.personalStepTitle": "Personal Information",
     "registration.personalStepDescription": "Your individual responses will not be displayed publicly, and will be kept confidential and secure",
     "registration.studentPersonalStepDescription": "This information will not appear on the Scratch website.",

src/views/studentcompleteregistration/studentcompleteregistration.jsx

@@ -6,6 +6,7 @@ var render = require('../../lib/render.jsx');
 var sessionStatus = require('../../redux/session').Status;
 var api = require('../../lib/api');
 var intl = require('../../lib/intl.jsx');
+var log = require('../../lib/log.js');
 
 var Deck = require('../../components/deck/deck.jsx');
 var Progression = require('../../components/progression/progression.jsx');
@@ -53,6 +54,18 @@ var StudentCompleteRegistration = intl.injectIntl(React.createClass({
             }.bind(this));
         }
     },
+    handleLogOut: function (e) {
+        e.preventDefault();
+        api({
+            host: '',
+            method: 'post',
+            uri: '/accounts/logout/',
+            useCsrf: true
+        }, function (err) {
+            if (err) return log.error(err);
+            window.location = '/';
+        }.bind(this));
+    },
     register: function (formData) {
         this.setState({waiting: true});
         formData = defaults({}, formData || {}, this.state.formData);
@@ -119,8 +132,9 @@ var StudentCompleteRegistration = intl.injectIntl(React.createClass({
                     ) : (
                         <Progression {... this.state}>
                             <Steps.ClassInviteStep classroom={this.state.classroom}
-                                                   messages={this.props.messages}
+                                                   onHandleLogOut={this.handleLogOut}
                                                    onNextStep={this.advanceStep}
+                                                   studentUsername={this.props.session.session.user.username}
                                                    waiting={this.state.waiting} />
                             {this.props.session.session.flags.must_reset_password ?
                                 <Steps.ChoosePasswordStep onNextStep={this.advanceStep}