Merge remote-tracking branch 'remotes/origin/master' into AD-504-revive-coa-for-new-frontend

README.md

@@ -91,6 +91,12 @@ Error: watch ENOSPC
 ```
 A: Use `npm dedupe` to remove duplicates in npm. This might fix that you're not [running out of watchers in your system (read the comments)](http://stackoverflow.com/a/17437601/1263876).
 
+Q: How can I use a local copy of SPOOL and Onion?
+A: Easily by starting the your gulp process with the following command:
+```
+ONION_BASE_URL='/' ONION_API_ENDPOINT='http://localhost:8000/api/' ONION_SERVER_URL='http://localhost:8000/' gulp serve
+```
+
 Reading list
 ============
 

gulpfile.js

@@ -69,7 +69,7 @@ gulp.task('js:build', function() {
     bundle(false);
 });
 
-gulp.task('serve', ['browser-sync', 'run-server', 'lint:watch', 'sass:build', 'sass:watch', 'copy'], function() {
+gulp.task('serve', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'copy'], function() {
     bundle(true);
 });
 

js/components/ascribe_forms/form.js

@@ -137,9 +137,12 @@ let Form = React.createClass({
         });
     },
     render() {
-
         return (
-            <form role="form" className="ascribe-form" onSubmit={this.submit} autoComplete="on">
+            <form 
+                role="form"
+                className="ascribe-form"
+                onSubmit={this.submit}
+                autoComplete="on">
                 {this.getErrors()}
                 {this.renderChildren()}
                 {this.getButtons()}

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -118,7 +118,7 @@ var ReactS3FineUploader = React.createClass({
     },
 
     getCookie(name) {
-        console.log(document.cookie);
+        //console.log(document);
         let value = '; ' + document.cookie;
         let parts = value.split('; ' + name + '=');
         if (parts.length === 2) {
@@ -126,31 +126,33 @@ var ReactS3FineUploader = React.createClass({
         }
     },
     requestKey(fileId) {
+        //console.log(this.getCookie('csrftoken'));
         let filename = this.state.uploader.getName(fileId);
-        let defer = new fineUploader.Promise();
-        fetch(this.props.keyRoutine.url, {
-            method: 'post',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json',
-                'X-CSRFToken': this.getCookie('csrftoken')
-            },
-            credentials: 'include',
-            body: JSON.stringify({
-                'filename': filename,
-                'file_class': 'digitalwork'
+        return new Promise((resolve, reject) => {
+            fetch(this.props.keyRoutine.url, {
+                method: 'post',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-CSRFToken': this.getCookie('csrftoken')
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    'filename': filename,
+                    'file_class': 'digitalwork'
+                })
             })
-        })
-        .then((res) => {
-            return res.json();
-        })
-        .then((res) =>{
-            defer.success(res.key);
-        })
-        .catch((err) => {
-            console.error(err);
+            .then((res) => {
+                return res.json();
+            })
+            .then((res) =>{
+                resolve(res.key);
+            })
+            .catch((err) => {
+                console.error(err);
+                reject(err);
+            });
         });
-        return defer;
     },
 
     /* FineUploader specific callback function handlers */

js/components/login_container.js

@@ -37,16 +37,27 @@ let LoginForm = React.createClass({
     handleSuccess(){
         let notification = new GlobalNotificationModel('Login successsful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.transitionTo('pieces');
 
+        /*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 = '/collection';
     },
+
     render() {
         return (
             <Form
+                ref="loginForm"
                 url={apiUrls.users_login}
                 handleSuccess={this.handleSuccess}
                 buttons={
-                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                    <button
+                        type="submit"
+                        className="btn ascribe-btn ascribe-btn-login">
                         Log in to ascribe
                     </button>}
                 spinner={
@@ -61,6 +72,7 @@ let LoginForm = React.createClass({
                         type="email"
                         placeholder="Enter your email"
                         autoComplete="on"
+                        name="username"
                         required/>
                 </Property>
                 <Property
@@ -70,6 +82,7 @@ let LoginForm = React.createClass({
                         type="password"
                         placeholder="Enter your password"
                         autoComplete="on"
+                        name="password"
                         required/>
                 </Property>
                 <hr />

sass/ascribe_react_s3_fineuploader.scss

@@ -0,0 +1,64 @@
+.file-drag-and-drop {
+    display: table-cell;
+    outline: 1px dashed #616161;
+    cursor: pointer;
+    vertical-align: middle;
+    text-align: center;
+    height:208px;
+    width: 672px;
+    background-color: #FAFAFA;
+    transition: .1s linear background-color;
+}
+
+.file-drag-and-drop:hover {
+    background-color: rgba(72, 218, 203, 0.2);
+}
+
+.file-drag-and-drop > span {
+    font-size: 1.5em;
+}
+
+.has-files {
+    text-align: left;
+    padding: 3em 0 0 0;
+}
+
+.file-drag-and-drop-position {
+    display: inline-block;
+    margin: 0 0 3em 3em;
+    float:left;
+}
+
+.file-drag-and-drop-preview-table-wrapper {
+    display: table;
+    height:94px;
+    width:104px;
+}
+
+.file-drag-and-drop-preview {
+    overflow:hidden;
+    cursor: default;
+    background-color: #EEEEEE;
+    border: 1px solid #616161;
+}
+
+.file-drag-and-drop-preview-image {
+    display: table;
+    height:104px;
+    width:104px;
+    overflow:hidden;
+    border: 1px solid #616161;
+}
+
+.file-drag-and-drop-preview-other {
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+
+}
+
+.file-drag-and-drop-preview-other span {
+    font-size: 1.1em;
+    display: block;
+    margin-top: -10px;
+}

sass/main.scss

@@ -22,6 +22,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_piece_register';
 @import 'offset_right';
 @import 'ascribe_settings';
+@import 'ascribe_react_s3_fineuploader';
 
 body {
     background-color: #FDFDFD;