nail login transition

js/components/ascribe_slides_container/slides_container.js

@@ -58,7 +58,7 @@ let SlidesContainer = React.createClass({
     // We let every one from the outsite set the page number of the slider,
     // though only if the slideNum is actually in the range of our children-list.
     setSlideNum(slideNum) {
-        if(slideNum > 0 && slideNum < React.Children.count(this.props.children)) {
+        if(slideNum < 0 || slideNum < React.Children.count(this.props.children)) {
 
             this.transitionTo(this.getPathname(), null, {slide_num: slideNum});
             this.setState({

js/components/login_container.js

@@ -7,6 +7,7 @@ import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import UserStore from '../stores/user_store';
+import UserActions from '../actions/user_actions';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
@@ -17,8 +18,22 @@ import AppConstants from '../constants/application_constants';
 let Link = Router.Link;
 
 let LoginContainer = React.createClass({
+    propTypes: {
+        message: React.PropTypes.string,
+        redirectOnLoggedIn: React.PropTypes.bool,
+        redirectOnLoginSuccess: React.PropTypes.bool
+    },
+
     mixins: [Router.Navigation],
 
+    getDefaultProps() {
+        return {
+            message: 'Log in to ascribe...',
+            redirectOnLoggedIn: true,
+            redirectOnLoginSuccess: true
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -35,7 +50,7 @@ let LoginContainer = React.createClass({
         this.setState(state);
 
         // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email) {
+        if(this.state.currentUser && this.state.currentUser.email && this.props.redirectOnLoggedIn) {
             this.transitionTo('pieces');
         }
     },
@@ -45,7 +60,7 @@ let LoginContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <br/>
                 <div className="ascribe-login-text ascribe-login-header">
-                    Log in to ascribe...
+                    {this.props.message}
                 </div>
                 <LoginForm />
             </div>
@@ -55,18 +70,31 @@ let LoginContainer = React.createClass({
 
 
 let LoginForm = React.createClass({
+    propTypes: {
+        redirectOnLoginSuccess: React.PropTypes.bool
+    },
+
     handleSuccess(){
         let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        /*Taken from http://stackoverflow.com/a/14916411 */
+        // register_piece is waiting for a login success as login_container and it is wrapped
+        // in a slides_container component.
+        // The easiest way to check if the user was successfully logged in is to fetch the user
+        // in the user store (which is obviously only possible if the user is logged in), since
+        // register_piece is listening to the changes of the user_store.
+        UserActions.fetchCurrentUser();
+
+        /* Taken from http://stackoverflow.com/a/14916411 */
         /*
         We actually have to trick the Browser into showing the "save password" dialog
         as Chrome expects the login page to be reloaded after the login.
         Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
         Until then, we redirect the HARD way, but reloading the whole page using window.location
         */
-        window.location = AppConstants.baseUrl + 'collection';
+        if(this.props.redirectOnLoginSuccess) {
+            window.location = AppConstants.baseUrl + 'collection';
+        }
     },
 
     render() {

js/components/register_piece.js

@@ -12,6 +12,8 @@ import LicenseStore from '../stores/license_store';
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
 
+import UserStore from '../stores/user_store';
+
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
@@ -35,12 +37,13 @@ let RegisterPiece = React.createClass( {
     getInitialState(){
         return mergeOptions(
             LicenseStore.getState(),
+            UserStore.getState(),
             PieceListStore.getState(),
             {
                 digitalWorkKey: null,
                 uploadStatus: false,
                 selectedLicense: 0,
-                isLoginShown: false
+                isFineUploaderEditable: false
             });
     },
 
@@ -48,15 +51,28 @@ let RegisterPiece = React.createClass( {
         LicenseActions.fetchLicense();
         LicenseStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         LicenseStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
+
+        // once the currentUser object from UserStore is defined (eventually the user was transitioned
+        // to the login form via the slider and successfully logged in), we can direct him back to the
+        // register_piece slide
+        if(state.currentUser && state.currentUser.email) {
+            this.refs.slidesContainer.setSlideNum(0);
+            // we should also make the fineuploader component editable again
+            this.setState({
+                isFineUploaderEditable: true
+            });
+        }
     },
 
     handleSuccess(response){
@@ -131,14 +147,20 @@ let RegisterPiece = React.createClass( {
         return null;
     },
 
-    changePage() {
-        this.refs.slidesContainer.setSlideNum(1);
+    changeSlide() {
+        // only transition to the login store, if user is not logged in
+        // ergo the currentUser object is not properly defined
+        if(!this.state.currentUser.email) {
+            this.refs.slidesContainer.setSlideNum(1);
+        }
     },
 
     render() {
         return (
             <SlidesContainer ref="slidesContainer">
-                <div>
+                <div 
+                    onClick={this.changeSlide} 
+                    onFocus={this.changeSlide}>
                     <h3 style={{'marginTop': 0}} onClick={this.changePage}>Lock down title</h3>
                     <Form
                         ref='form'
@@ -160,7 +182,8 @@ let RegisterPiece = React.createClass( {
                             <FileUploader
                                 submitKey={this.submitKey}
                                 setIsUploadReady={this.setIsUploadReady}
-                                isReadyForFormSubmission={this.isReadyForFormSubmission}/>
+                                isReadyForFormSubmission={this.isReadyForFormSubmission}
+                                editable={this.state.isFineUploaderEditable}/>
                         </Property>
                         <Property
                             name='artist_name'
@@ -201,7 +224,10 @@ let RegisterPiece = React.createClass( {
                     </Form>
                 </div>
                 <div>
-                    <LoginContainer/>
+                    <LoginContainer
+                        message="Please login before ascribing your piece..."
+                        redirectOnLoggedIn={false}
+                        redirectOnLoginSuccess={false}/>
                 </div>
             </SlidesContainer>
         );
@@ -213,12 +239,18 @@ let FileUploader = React.createClass({
     propTypes: {
         setIsUploadReady: React.PropTypes.func,
         submitKey: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func
+        isReadyForFormSubmission: React.PropTypes.func,
+        onClick: React.PropTypes.func,
+        // editable is used to lock react fine uploader in case
+        // a user is actually not logged in already to prevent him from droping files
+        // before login in
+        editable: React.PropTypes.bool
     },
 
     render() {
         return (
             <ReactS3FineUploader
+                onClick={this.props.onClick}
                 keyRoutine={{
                     url: AppConstants.serverUrl + 's3/key/',
                     fileClass: 'digitalwork'
@@ -234,7 +266,7 @@ let FileUploader = React.createClass({
                 setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                 areAssetsDownloadable={false}
-                areAssetsEditable={true}/>
+                areAssetsEditable={this.props.editable}/>
         );
     }
 });