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,10 +70,21 @@ 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);
 
+        // 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
@@ -66,7 +92,9 @@ let LoginForm = React.createClass({
         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
         */
+        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() {
+    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}/>
         );
     }
 });