From 3e28d6f4210aa508b36044ee40983cc0b0fed4d1 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 23 Nov 2015 17:12:47 +0100
Subject: [PATCH 001/197] Add functionality to match known errors

Implemented as part of AD-1360 and AD-1378 as a way to match an error
situation to a known class of errors so that we can modify behaviour or
show pretty text to the user.
---
 js/constants/error_constants.js | 205 ++++++++++++++++++++++++++++++++
 js/utils/error_utils.js         |   5 +-
 js/utils/general_utils.js       |  41 +++++++
 3 files changed, 247 insertions(+), 4 deletions(-)
 create mode 100644 js/constants/error_constants.js

diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
new file mode 100644
index 00000000..81e04f04
--- /dev/null
+++ b/js/constants/error_constants.js
@@ -0,0 +1,205 @@
+'use strict'
+
+import { deepMatchObject } from '../utils/general_utils';
+import { getLangText } from '../utils/lang_utils';
+
+/**
+ * ErrorClasses
+ * ============
+ * Known error classes based on groupings (ie. where they happened, which component, etc).
+ *
+ * Error classes have a test object that can be used to test whether or not an error
+ * object matches that specific class. Properties in the test object will be recursively
+ * checked in the error object, and the error object is only matched to the class if all
+ * tests succeed. See testErrorAgainstClass() below for the implementation of the matching.
+ *
+ * ErrorClasses.default.default is the generic error for errors not identified under any
+ * grouping and class.
+ *
+ * Format:
+ * ErrorClasses = {
+ *     'errorGrouping': {
+ *         'errorClassName': ErrorClass
+ *         ...
+ *      },
+ *      ...
+ *      'default': {
+ *          ...
+ *          'default': generic error for errors that don't fall under any grouping and class
+ *      }
+ * }
+ *
+ * Each class is of the format:
+ * ErrorClass = {
+ *     'name': name of the class
+ *     'group': grouping of the error,
+ *     'prettifiedText': prettified text for the class
+ *     'test': {
+ *         prop1: property in the error object to recursively match against using
+ *                either === or, if the property is a string, substring match
+ *                (ie. indexOf() >= 0)
+ *         ...
+ *     },
+ * }
+ *
+ * Test object examples
+ * ====================
+ * A class like this:
+ *
+ *     'errorClass': {
+ *         'test': {
+ *             'reason': 'Invalid server response',
+ *             'xhr': {
+ *                 'response': 'Internal error',
+ *                 'status': 500
+ *             }
+ *         }
+ *     }
+ *
+ * will match this error object:
+ *
+ *     error = {
+ *         'reason': 'Invalid server response',
+ *         'xhr': {  // Simplified version of the XMLHttpRequest object responsible for the failure
+ *             'response': 'Internal error',
+ *             'status': 500
+ *         }
+ *     }
+ *
+ * but will *NOT* match this error object:
+ *
+ *     error = {
+ *         'reason': 'Invalid server response',
+ *         'xhr': {
+ *             'response': 'Unauthorized',
+ *             'status': 401
+ *         }
+ *     }
+ *
+ * A common use case is for the test to just be against the error.reason string.
+ * In these cases, setting the test object to be just a string will enforce this test,
+ * so something like this:
+ *
+ *     'errorClass': {
+ *         'test': {
+ *             'reason': 'Invalid server response'
+ *         }
+ *     }
+ *
+ * is the same as:
+ *
+ *     'errorClass': {
+ *         'test': 'Invalid server response'
+ *     }
+ */
+const ErrorClasses = {
+    'upload': {
+        'requestTimeTooSkewed': {
+            'prettifiedText': getLangText('It appears that the time set on your computer is too ' +
+                                          'inaccurate compared to your current local time. As a security ' +
+                                          'measure, we check to make sure that our users are not falsifying ' +
+                                          "their registration times. Please synchronize your computer's " +
+                                          'clock and try again.'),
+            'test': {
+                'xhr': {
+                    'response': 'RequestTimeTooSkewed'
+                }
+            }
+        },
+        'chunkSignatureError': {
+            'prettifiedText': getLangText('We are experiencing some problems with uploads at the moment and ' +
+                                          'are working to resolve them. Please try again in a few hours.'),
+            'test': 'Problem signing the chunk'
+        },
+    },
+    'default': {
+        'default': {
+            'prettifiedText': getLangText("It looks like there's been a problem on our end. If you keep experiencing this error, please contact us.")
+        }
+    }
+};
+
+// Dynamically inject the name and group properties into the classes
+Object.keys(ErrorClasses).forEach((errorGroup) => {
+    Object.keys(ErrorClasses[errorGroup]).forEach((errorClass) => {
+        errorClass.name = errorClass;
+        errorClass.group = errorGroup;
+    });
+});
+
+/**
+ * Returns prettified text for a given error by trying to match it to
+ * a known error in ErrorClasses or the given class.
+ *
+ * One should provide a class (eg. ErrorClasses.upload.requestTimeTooSkewed)
+ * if they already have an error in mind that they want to match against rather
+ * than all the available error classes.
+ *
+ * @param  {object} error                  An error with the following:
+ * @param  {string} error.type                 Type of error
+ * @param  {string} error.reason               Reason of error
+ * @param  {(XMLHttpRequest)} error.xhr        XHR associated with the error
+ * @param  {(any)}  error.*                    Any other property as necessary
+ *
+ * @param  {(object)} errorClass           ErrorClass to match against the given error.
+ *                                         Signature should be similar to ErrorClasses' classes (see above).
+ * @param  {object|string} errorClass.test     Test object to recursively match against the given error
+ * @param  {string} errorClass.prettifiedText  Prettified text to return if the test matches
+ *
+ * @return {string}                        Prettified error string. Returns the default error string if no
+ *                                         error class was matched to the given error.
+ */
+function getPrettifiedError(error, errorClass) {
+    const matchedClass = errorClass ? testErrorAgainstClass(error, errorClass) : testErrorAgainstAll(error);
+    return (matchedClass && matchedClass.prettifiedText) || ErrorClasses.default.default.prettifiedText;
+}
+
+/**
+ * Tests the given error against all items in ErrorClasses and returns
+ * the matching class if available.
+ * See getPrettifiedError() for the signature of @param error.
+ * @return {(object)} Matched error class
+ */
+function testErrorAgainstAll(error) {
+    const type = error.type != null ? error.type : 'default';
+    const errorGroup = ErrorClasses[type];
+
+    return Object
+            .keys(errorGroup)
+            .reduce((result, key) => {
+                return result || testErrorAgainstClass(error, errorGroup[key]);
+            }, null);
+}
+
+/**
+ * Tests the error against the class by recursively testing the
+ * class's test object against the error.
+ * Implements the test matching behaviour described in ErrorClasses.
+ *
+ * See getPrettifiedError() for the signatures of @param error and @param errorClass.
+ * @return {(object)} Returns the given class if the test succeeds.
+ */
+function testErrorAgainstClass(error, errorClass) {
+    // Automatically fail classes if no tests present
+    if (!errorClass.test) {
+        return;
+    }
+
+    if (typeof errorClass.test === 'string') {
+        errorClass.test = {
+            reason: errorClass.test
+        };
+    }
+
+    return deepMatchObject(error, errorClass.test, (objProp, matchProp) => {
+        return (objProp === matchProp || (typeof objProp === 'string' && objProp.indexOf(matchProp) >= 0));
+    }) ? errorClass : null;
+}
+
+// Need to export with the clause syntax as we change ErrorClasses after its declaration.
+export {
+    ErrorClasses,
+    getPrettifiedError,
+    testErrorAgainstAll,
+    testErrorAgainstClass
+};
diff --git a/js/utils/error_utils.js b/js/utils/error_utils.js
index 4e9de6e2..e80819dc 100644
--- a/js/utils/error_utils.js
+++ b/js/utils/error_utils.js
@@ -4,7 +4,6 @@ import Raven from 'raven-js';
 
 import AppConstants from '../constants/application_constants';
 
-
 /**
  * Logs an error in to the console but also sends it to
  * Sentry.
@@ -14,7 +13,6 @@ import AppConstants from '../constants/application_constants';
  * @param  {string} comment  Will also be submitted to Sentry, but will not be logged
  */
 function logGlobal(error, ignoreSentry, comment) {
-
     console.error(error);
 
     if(!ignoreSentry) {
@@ -24,7 +22,6 @@ function logGlobal(error, ignoreSentry, comment) {
             Raven.captureException(error);
         }
     }
-    
 }
 
 export function initLogging() {
@@ -36,4 +33,4 @@ export function initLogging() {
     window.onerror = Raven.process;
 
     console.logGlobal = logGlobal;
-}
\ No newline at end of file
+}
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index e717fa75..d690929e 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -178,6 +178,47 @@ export function omitFromObject(obj, filter) {
     }
 }
 
+/**
+ * Recursively tests an object against a "match" object to see if the
+ * object is similar to the "match" object. In other words, this will
+ * deeply traverse the "match" object's properties and check them
+ * against the object by using the testFn.
+ *
+ * The object is considered a match if all primitive properties in the
+ * "match" object are found and accepted in the object by the testFn.
+ *
+ * @param  {object}     obj    Object to test
+ * @param  {object}     match  "Match" object to test against
+ * @param  {(function)} testFn Function to use on each property test.
+ *                             Return true to accept the match.
+ *                             By default, applies strict equality using ===
+ * @return {boolean}           True if obj matches the "match" object
+ */
+export function deepMatchObject(obj, match, testFn) {
+    if (typeof match !== 'object') {
+        throw new Error('Your specified match argument was not an object');
+    }
+
+    if (typeof testFn !== 'function') {
+        testFn = (objProp, matchProp) => {
+            return objProp === matchProp;
+        };
+    }
+
+    return Object
+            .keys(match)
+            .reduce((result, matchKey) => {
+                if (!result) { return false; }
+
+                const objProp = obj[matchKey];
+                const matchProp = match[matchKey];
+
+                return (typeof matchProp === 'object') ? testObjAgainstMatch(objProp, matchProp, testFn)
+                                                       : testFn(objProp, matchProp);
+
+            }, true);
+}
+
 /**
  * Takes a string and breaks it at the supplied index and replaces it
  * with a (potentially) short string that also has been provided

From dff180ff8758ca90b9f9a8e21f489ea332c8121b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 25 Nov 2015 16:27:32 +0100
Subject: [PATCH 002/197] Use FineUploader status constants as opposed to
 strings

---
 .../file_drag_and_drop.js                     | 13 +++++-
 .../file_drag_and_drop_preview.js             |  7 +--
 .../react_s3_fine_uploader.js                 | 44 ++++++++++++-------
 .../react_s3_fine_uploader_utils.js           |  9 +++-
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index cfca4d56..1efe301c 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -6,6 +6,7 @@ import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 import FileDragAndDropDialog from './file_drag_and_drop_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
+import { FileStatus } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
 
 
@@ -155,8 +156,16 @@ let FileDragAndDrop = React.createClass({
             areAssetsEditable,
             allowedExtensions } = this.props;
 
-        // has files only is true if there are files that do not have the status deleted or canceled
-        let hasFiles = filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1).length > 0;
+        // has files only is true if there are files that do not have the status deleted, canceled, or failed
+        let hasFiles = filesToUpload
+                        .filter((file) => {
+                            return file.status !== FileStatus.DELETED &&
+                                file.status !== FileStatus.CANCELED &&
+                                file.status !== FileStatus.UPLOAD_FAILED &&
+                                file.size !== -1;
+                        })
+                        .length > 0;
+
         let updatedClassName = hasFiles ? 'has-files ' : '';
         updatedClassName += dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
         updatedClassName += ' file-drag-and-drop';
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
index ca1be2d2..f5986786 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
@@ -5,6 +5,7 @@ import React from 'react';
 import FileDragAndDropPreviewImage from './file_drag_and_drop_preview_image';
 import FileDragAndDropPreviewOther from './file_drag_and_drop_preview_other';
 
+import { FileStatus } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
 import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 import { extractFileExtensionFromString } from '../../../utils/file_utils';
@@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     toggleUploadProcess() {
-        if(this.props.file.status === 'uploading') {
+        if(this.props.file.status === FileStatus.UPLOADING) {
             this.props.handlePauseFile(this.props.file.id);
-        } else if(this.props.file.status === 'paused') {
+        } else if(this.props.file.status === FileStatus.PAUSED) {
             this.props.handleResumeFile(this.props.file.id);
         }
     },
@@ -51,7 +52,7 @@ const FileDragAndDropPreview = React.createClass({
         // deleted using an HTTP DELETE request.
         if (handleDeleteFile &&
             file.progress === 100 &&
-            (file.status === 'upload successful' || file.status === 'online') &&
+            (file.status === FileStatus.UPLOAD_SUCCESSFUL || file.status === FileStatus.ONLINE) &&
             file.s3UrlSafe) {
             handleDeleteFile(file.id);
         } else if(handleCancelFile) {
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index c5d2cb1c..562f9449 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -13,8 +13,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import AppConstants from '../../constants/application_constants';
 
+import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { computeHashOfFile } from '../../utils/file_utils';
-import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
 
@@ -449,7 +449,7 @@ const ReactS3FineUploader = React.createClass({
 
             // Set the state of the completed file to 'upload successful' in order to
             // remove it from the GUI
-            files[id].status = 'upload successful';
+            files[id].status = FileStatus.UPLOAD_SUCCESSFUL;
             files[id].key = this.state.uploader.getKey(id);
 
             let filesToUpload = React.addons.update(this.state.filesToUpload, { $set: files });
@@ -536,7 +536,7 @@ const ReactS3FineUploader = React.createClass({
 
     onCancel(id) {
         // when a upload is canceled, we need to update this components file array
-        this.setStatusOfFile(id, 'canceled')
+        this.setStatusOfFile(id, FileStatus.CANCELED)
             .then(() => {
                 if(typeof this.props.handleChangedFile === 'function') {
                     this.props.handleChangedFile(this.state.filesToUpload[id]);
@@ -576,7 +576,7 @@ const ReactS3FineUploader = React.createClass({
             // fetch blobs for images
             response = response.map((file) => {
                 file.url = file.s3UrlSafe;
-                file.status = 'online';
+                file.status = FileStatus.ONLINE;
                 file.progress = 100;
                 return file;
             });
@@ -604,7 +604,7 @@ const ReactS3FineUploader = React.createClass({
 
     onDeleteComplete(id, xhr, isError) {
         if(isError) {
-            this.setStatusOfFile(id, 'online');
+            this.setStatusOfFile(id, FileStatus.ONLINE);
 
             let notification = new GlobalNotificationModel(getLangText('There was an error deleting your file.'), 'danger', 10000);
             GlobalNotificationActions.appendGlobalNotification(notification);
@@ -633,9 +633,9 @@ const ReactS3FineUploader = React.createClass({
         // We set the files state to 'deleted' immediately, so that the user is not confused with
         // the unresponsiveness of the UI
         //
-        // If there is an error during the deletion, we will just change the status back to 'online'
+        // If there is an error during the deletion, we will just change the status back to FileStatus.ONLINE
         // and display an error message
-        this.setStatusOfFile(fileId, 'deleted')
+        this.setStatusOfFile(fileId, FileStatus.DELETED)
             .then(() => {
                 if(typeof this.props.handleChangedFile === 'function') {
                     this.props.handleChangedFile(this.state.filesToUpload[fileId]);
@@ -651,7 +651,7 @@ const ReactS3FineUploader = React.createClass({
         //  To check which files are already uploaded from previous sessions we check their status.
         //  If they are, it is "online"
 
-        if(this.state.filesToUpload[fileId].status !== 'online') {
+        if(this.state.filesToUpload[fileId].status !== FileStatus.ONLINE) {
             // delete file from server
             this.state.uploader.deleteFile(fileId);
             // this is being continued in onDeleteFile, as
@@ -672,7 +672,7 @@ const ReactS3FineUploader = React.createClass({
 
     handlePauseFile(fileId) {
         if(this.state.uploader.pauseUpload(fileId)) {
-            this.setStatusOfFile(fileId, 'paused');
+            this.setStatusOfFile(fileId, FileStatus.PAUSED);
         } else {
             throw new Error(getLangText('File upload could not be paused.'));
         }
@@ -680,7 +680,7 @@ const ReactS3FineUploader = React.createClass({
 
     handleResumeFile(fileId) {
         if(this.state.uploader.continueUpload(fileId)) {
-            this.setStatusOfFile(fileId, 'uploading');
+            this.setStatusOfFile(fileId, FileStatus.UPLOADING);
         } else {
             throw new Error(getLangText('File upload could not be resumed.'));
         }
@@ -860,12 +860,12 @@ const ReactS3FineUploader = React.createClass({
                 //
                 // If the user deletes one of those files, then fineuploader will still keep it in his
                 // files array but with key, progress undefined and size === -1 but
-                // status === 'upload successful'.
+                // status === FileStatus.UPLOAD_SUCCESSFUL.
                 // This poses a problem as we depend on the amount of files that have
-                // status === 'upload successful', therefore once the file is synced,
-                // we need to tag its status as 'deleted' (which basically happens here)
+                // status === FileStatus.UPLOAD_SUCCESSFUL, therefore once the file is synced,
+                // we need to tag its status as FileStatus.DELETED (which basically happens here)
                 if(oldAndNewFiles[i].size === -1 && (!oldAndNewFiles[i].progress || oldAndNewFiles[i].progress === 0)) {
-                    oldAndNewFiles[i].status = 'deleted';
+                    oldAndNewFiles[i].status = FileStatus.DELETED;
                 }
 
                 if(oldAndNewFiles[i].originalName === oldFiles[j].name) {
@@ -901,7 +901,7 @@ const ReactS3FineUploader = React.createClass({
         return Q.Promise((resolve) => {
             let changeSet = {};
 
-            if(status === 'deleted' || status === 'canceled') {
+            if (status === FileStatus.DELETED || status === FileStatus.CANCELED || status === FileStatus.UPLOAD_FAILED) {
                 changeSet.progress = { $set: 0 };
             }
 
@@ -914,9 +914,19 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isDropzoneInactive() {
-        const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
+        const { areAssetsEditable, enableLocalHashing, multiple, showErrorStates, uploadMethod } = this.props;
+        const { errorState, filesToUpload } = this.state;
 
-        if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
+        const filesToDisplay = filesToUpload.filter((file) => {
+            return file.status !== FileStatus.DELETED &&
+                        file.status !== FileStatus.CANCELED &&
+                        file.status !== FileStatus.UPLOAD_FAILED &&
+                        file.size !== -1;
+        });
+
+        if ((enableLocalHashing && !uploadMethod) || !areAssetsEditable ||
+                (showErrorStates && errorState.errorClass) ||
+                (!multiple && filesToDisplay.length > 0)) {
             return true;
         } else {
             return false;
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
index ed76c5e8..2e0a046b 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
@@ -1,11 +1,18 @@
 'use strict';
 
+import fineUploader from 'fineUploader';
+// Re-export qq.status from FineUploader with an additional online
+// state that we use to keep track of files from S3.
+export const FileStatus = Object.assign(fineUploader.status, {
+    ONLINE: 'online'
+});
+
 export const formSubmissionValidation = {
     /**
      * Returns a boolean if there has been at least one file uploaded
      * successfully without it being deleted or canceled.
      * @param  {array of files}  files provided by react fine uploader
-     * @return {boolean}       
+     * @return {boolean}
      */
     atLeastOneUploadedFile(files) {
         files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');

From 01e3fd5fcdb96d3b7c1f19a0048664f01c309837 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 25 Nov 2015 16:30:17 +0100
Subject: [PATCH 003/197] Add error queue store
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allows errors to be queued for showing to the user, such as in the
uploader’s error states.
---
 js/actions/error_queue_actions.js | 13 ++++++++
 js/constants/error_constants.js   | 21 ++++++++++---
 js/stores/error_queue_store.js    | 52 +++++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 4 deletions(-)
 create mode 100644 js/actions/error_queue_actions.js
 create mode 100644 js/stores/error_queue_store.js

diff --git a/js/actions/error_queue_actions.js b/js/actions/error_queue_actions.js
new file mode 100644
index 00000000..92f77247
--- /dev/null
+++ b/js/actions/error_queue_actions.js
@@ -0,0 +1,13 @@
+'use strict';
+
+import { alt } from '../alt';
+
+class ErrorQueueActions {
+    constructor() {
+        this.generateActions(
+            'shiftErrorQueue'
+        );
+    }
+}
+
+export default alt.createActions(ErrorQueueActions);
diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index 81e04f04..6386892c 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -111,6 +111,17 @@ const ErrorClasses = {
                                           'are working to resolve them. Please try again in a few hours.'),
             'test': 'Problem signing the chunk'
         },
+
+        // Fallback error tips
+        'slowConnection': {
+            'prettifiedText': getLangText('Are you on a slow or unstable network? Uploading large files requires a fast Internet connection.')
+        },
+        'tryDifferentBrowser': {
+            'prettifiedText': getLangText("We still can't seem to upload your file. Maybe try another browser?")
+        },
+        'contactUs': {
+            'prettifiedText': getLangText("We're having a really hard time with your upload. Please contact us for more help.")
+        }
     },
     'default': {
         'default': {
@@ -120,10 +131,12 @@ const ErrorClasses = {
 };
 
 // Dynamically inject the name and group properties into the classes
-Object.keys(ErrorClasses).forEach((errorGroup) => {
-    Object.keys(ErrorClasses[errorGroup]).forEach((errorClass) => {
-        errorClass.name = errorClass;
-        errorClass.group = errorGroup;
+Object.keys(ErrorClasses).forEach((errorGroupKey) => {
+    const errorGroup = ErrorClasses[errorGroupKey];
+    Object.keys(errorGroup).forEach((errorClassKey) => {
+        const errorClass = errorGroup[errorClassKey];
+        errorClass.name = errorClassKey;
+        errorClass.group = errorGroupKey;
     });
 });
 
diff --git a/js/stores/error_queue_store.js b/js/stores/error_queue_store.js
new file mode 100644
index 00000000..8521ff61
--- /dev/null
+++ b/js/stores/error_queue_store.js
@@ -0,0 +1,52 @@
+'use strict';
+
+import { alt } from '../alt';
+
+import ErrorQueueActions from '../actions/error_queue_actions.js';
+
+import { ErrorClasses } from '../constants/error_constants.js';
+
+class ErrorQueueStore {
+    constructor() {
+        const { upload: { slowConnection, tryDifferentBrowser } } = ErrorClasses;
+
+        this.errorQueue = {
+            'upload': {
+                queue: [slowConnection, tryDifferentBrowser],
+                loop: true
+            }
+        };
+
+        // Add intial index to each error queue
+        Object
+            .keys(this.errorQueue)
+            .forEach((type) => {
+                this.errorQueue[type].index = 0;
+            });
+
+        this.exportPublicMethods({
+            getNextError: this.getNextError
+        });
+    }
+
+    getNextError(type) {
+        const errorQueue = this.errorQueues[type];
+        const { queue, index } = errorQueue;
+
+        ErrorQueueActions.shiftErrorQueue(type);
+        return queue[index];
+    }
+
+    onShiftQueue(type) {
+        const errorQueue = this.errorQueues[type];
+        const { queue, loop } = errorQueue;
+
+        ++errorQueue.index;
+        if (loop) {
+            // Loop back to the beginning if all errors have been exhausted
+            errorQueue.index %= queue.length;
+        }
+    }
+}
+
+export default alt.createStore(ErrorQueueStore, 'ErrorQueueStore');

From 4821e36189530546edb77ce3e6250f5037bdb848 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 25 Nov 2015 18:58:49 +0100
Subject: [PATCH 004/197] Update FineUploader utils to use FileStatus

---
 .../ascribe_forms/form_register_piece.js      |  4 +--
 .../react_s3_fine_uploader_utils.js           | 28 +++++++++++++------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 232ef444..9deed676 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -17,9 +17,7 @@ import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
-import { formSubmissionValidation,
-        displayValidFilesFilter,
-        displayRemovedFilesFilter } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
 
 let RegisterPieceForm = React.createClass({
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
index 2e0a046b..05fb565e 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
@@ -15,8 +15,13 @@ export const formSubmissionValidation = {
      * @return {boolean}
      */
     atLeastOneUploadedFile(files) {
-        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
-        if (files.length > 0 && files[0].status === 'upload successful') {
+        files = files.filter((file) => {
+            return file.status !== FileStatus.DELETED &&
+                    file.status !== FileStatus.CANCELED &&
+                    file.status != FileStatus.UPLOADED_FAILED
+        });
+
+        if (files.length > 0 && files[0].status === FileStatus.UPLOAD_SUCCESSFUL) {
             return true;
         } else {
             return false;
@@ -30,7 +35,7 @@ export const formSubmissionValidation = {
      * @return {boolean}       [description]
      */
     fileOptional(files) {
-        let uploadingFiles = files.filter((file) => file.status === 'submitting');
+        let uploadingFiles = files.filter((file) => file.status === FileStatus.SUBMITTING);
 
         if (uploadingFiles.length === 0) {
             return true;
@@ -41,21 +46,25 @@ export const formSubmissionValidation = {
 };
 
 /**
- * Filter function for filtering all deleted and canceled files
+ * Filter function for filtering all deleted, canceled, and failed files
  * @param  {object} file A file from filesToUpload that has status as a prop.
  * @return {boolean}
  */
 export function displayValidFilesFilter(file) {
-    return file.status !== 'deleted' && file.status !== 'canceled';
+    return file.status !== FileStatus.DELETED &&
+            file.status !== FileStatus.CANCELED &&
+            file.status !== FileStatus.UPLOAD_FAILED;
 }
 
 /**
- * Filter function for filtering all files except for deleted and canceled files
+ * Filter function for filtering all files except for deleted, canceled, and failed files
  * @param  {object} file A file from filesToUpload that has status as a prop.
  * @return {boolean}
  */
 export function displayRemovedFilesFilter(file) {
-    return file.status === 'deleted' || file.status === 'canceled';
+    return file.status === FileStatus.DELETED ||
+            file.status === FileStatus.CANCELED ||
+            file.status === FileStatus.UPLOAD_FAILED;
 }
 
 
@@ -65,7 +74,10 @@ export function displayRemovedFilesFilter(file) {
  * @return {boolean}
  */
 export function displayValidProgressFilesFilter(file) {
-    return file.status !== 'deleted' && file.status !== 'canceled' && file.status !== 'online';
+    return file.status !== FileStatus.DELETED &&
+            file.status !== FileStatus.CANCELED &&
+            file.status !== FileStatus.UPLOAD_FAILED &&
+            file.status !== FileStatus.ONLINE;
 }
 
 

From 0d6b3710f78a4272e117714a7d5dfec2764dd45d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 25 Nov 2015 18:58:56 +0100
Subject: [PATCH 005/197] Fix bugs in ErrorQueueStore and deepMatchObject()

---
 js/stores/error_queue_store.js | 9 ++++++---
 js/utils/general_utils.js      | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/js/stores/error_queue_store.js b/js/stores/error_queue_store.js
index 8521ff61..d08ed4c3 100644
--- a/js/stores/error_queue_store.js
+++ b/js/stores/error_queue_store.js
@@ -10,7 +10,7 @@ class ErrorQueueStore {
     constructor() {
         const { upload: { slowConnection, tryDifferentBrowser } } = ErrorClasses;
 
-        this.errorQueue = {
+        this.errorQueues = {
             'upload': {
                 queue: [slowConnection, tryDifferentBrowser],
                 loop: true
@@ -19,11 +19,14 @@ class ErrorQueueStore {
 
         // Add intial index to each error queue
         Object
-            .keys(this.errorQueue)
+            .keys(this.errorQueues)
             .forEach((type) => {
-                this.errorQueue[type].index = 0;
+                this.errorQueues[type].index = 0;
             });
 
+        // Bind the exported functions to this instance
+        this.getNextError = this.getNextError.bind(this);
+
         this.exportPublicMethods({
             getNextError: this.getNextError
         });
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index d690929e..f9e8cdc9 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -213,9 +213,12 @@ export function deepMatchObject(obj, match, testFn) {
                 const objProp = obj[matchKey];
                 const matchProp = match[matchKey];
 
-                return (typeof matchProp === 'object') ? testObjAgainstMatch(objProp, matchProp, testFn)
-                                                       : testFn(objProp, matchProp);
-
+                if (typeof matchProp === 'object') {
+                    return (typeof objProp === 'object') ? deepMatchObject(objProp, matchProp, testFn)
+                                                         : false;
+                } else {
+                    return testFn(objProp, matchProp);
+                }
             }, true);
 }
 

From 9b54a75e279b7034cf76b4f438057c9549cace49 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Sun, 29 Nov 2015 16:57:29 +0100
Subject: [PATCH 006/197] Bind ErrorQueueStore to ErrorQueueActions

---
 js/stores/error_queue_store.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/stores/error_queue_store.js b/js/stores/error_queue_store.js
index d08ed4c3..802b767d 100644
--- a/js/stores/error_queue_store.js
+++ b/js/stores/error_queue_store.js
@@ -30,6 +30,7 @@ class ErrorQueueStore {
         this.exportPublicMethods({
             getNextError: this.getNextError
         });
+        this.bindActions(ErrorQueueActions);
     }
 
     getNextError(type) {
@@ -40,7 +41,7 @@ class ErrorQueueStore {
         return queue[index];
     }
 
-    onShiftQueue(type) {
+    onShiftErrorQueue(type) {
         const errorQueue = this.errorQueues[type];
         const { queue, loop } = errorQueue;
 

From a0db6d3037547750914bd518d5301baad6fb80a8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 18:09:24 +0100
Subject: [PATCH 007/197] Shuffle uploader props to be more readable

---
 .../further_details_fileuploader.js           |  43 ++++---
 .../ascribe_forms/input_fineuploader.js       |  79 +++++++------
 .../file_drag_and_drop.js                     |  11 +-
 .../react_s3_fine_uploader.js                 | 106 ++++++++++--------
 4 files changed, 140 insertions(+), 99 deletions(-)

diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index 5c9a70d0..b660c80e 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -11,15 +11,21 @@ import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 
+
+const { func, bool, number, object, arrayOf } = React.PropTypes;
+
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.number,
-        otherData: React.PropTypes.arrayOf(React.PropTypes.object),
-        setIsUploadReady: React.PropTypes.func,
-        submitFile: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        editable: React.PropTypes.bool,
-        multiple: React.PropTypes.bool
+        pieceId: number,
+        otherData: arrayOf(object),
+        editable: bool,
+
+        // Props for ReactS3FineUploader
+        multiple: bool,
+        submitFile: func, // TODO: rename to onSubmitFile
+
+        setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
+        isReadyForFormSubmission: func
     },
 
     getDefaultProps() {
@@ -29,16 +35,25 @@ let FurtherDetailsFileuploader = React.createClass({
     },
 
     render() {
+        const {
+            editable,
+            isReadyForFormSubmission,
+            multiple,
+            otherData,
+            pieceId,
+            setIsUploadReady,
+            submitFile } = this.props;
+
         // Essentially there a three cases important to the fileuploader
         //
         // 1. there is no other_data => do not show the fileuploader at all (where otherData is now an array)
         // 2. there is other_data, but user has no edit rights => show fileuploader but without action buttons
         // 3. both other_data and editable are defined or true => show fileuploader with all action buttons
-        if (!this.props.editable && (!this.props.otherData || this.props.otherData.length === 0)) {
+        if (!editable && (!otherData || otherData.length === 0)) {
             return null;
         }
 
-        let otherDataIds = this.props.otherData ? this.props.otherData.map((data) => data.id).join() : null;
+        let otherDataIds = otherData ? otherData.map((data) => data.id).join() : null;
 
         return (
             <Property
@@ -48,16 +63,16 @@ let FurtherDetailsFileuploader = React.createClass({
                     keyRoutine={{
                         url: AppConstants.serverUrl + 's3/key/',
                         fileClass: 'otherdata',
-                        pieceId: this.props.pieceId
+                        pieceId: pieceId
                     }}
                     createBlobRoutine={{
                         url: ApiUrls.blob_otherdatas,
-                        pieceId: this.props.pieceId
+                        pieceId: pieceId
                     }}
                     validation={AppConstants.fineUploader.validation.additionalData}
-                    submitFile={this.props.submitFile}
-                    setIsUploadReady={this.props.setIsUploadReady}
-                    isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                    submitFile={submitFile}
+                    setIsUploadReady={setIsUploadReady}
+                    isReadyForFormSubmission={isReadyForFormSubmission}
                     session={{
                         endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
                         customHeaders: {
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index eb20fcd1..1b6544a8 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -10,49 +10,62 @@ import AppConstants from '../../constants/application_constants';
 import { getCookie } from '../../utils/fetch_api_utils';
 
 
-const { func, bool, shape, string, number, arrayOf } = React.PropTypes;
+const { func, bool, shape, string, number, element, oneOf, arrayOf } = React.PropTypes;
 
 const InputFineUploader = React.createClass({
     propTypes: {
-        setIsUploadReady: func,
-        isReadyForFormSubmission: func,
-        submitFile: func,
-        fileInputElement: func,
-
-        areAssetsDownloadable: bool,
-
-        keyRoutine: shape({
-            url: string,
-            fileClass: string
-        }),
-        createBlobRoutine: shape({
-            url: string
-        }),
-        validation: shape({
-            itemLimit: number,
-            sizeLimit: string,
-            allowedExtensions: arrayOf(string)
-        }),
-
         // isFineUploaderActive 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
         isFineUploaderActive: bool,
         onLoggedOut: func,
 
-        enableLocalHashing: bool,
-        uploadMethod: string,
-
         // provided by Property
         disabled: bool,
 
-        // A class of a file the user has to upload
-        // Needs to be defined both in singular as well as in plural
+        // Props for ReactS3FineUploader
+        areAssetsDownloadable: bool,
+
+        handleChangedFile: func, // TODO: rename to onChangedFile
+        submitFile: func, // TODO: rename to onSubmitFile
+
+        setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
+        isReadyForFormSubmission: func,
+
+        enableLocalHashing: bool,
+        uploadMethod: oneOf(['hash', 'upload']),
+
         fileClassToUpload: shape({
             singular: string,
             plural: string
         }),
-        handleChangedFile: func
+
+        fileInputElement: oneOfType([
+            func,
+            element
+        ]),
+
+        keyRoutine: shape({
+            url: string,
+            fileClass: string,
+            pieceId: oneOfType([
+                string,
+                number
+            ])
+        }),
+        createBlobRoutine: shape({
+            url: string,
+            pieceId: oneOfType([
+                string,
+                number
+            ])
+        }),
+
+        validation: shape({
+            itemLimit: number,
+            sizeLimit: string,
+            allowedExtensions: arrayOf(string)
+        })
     },
 
     getDefaultProps() {
@@ -101,18 +114,20 @@ const InputFineUploader = React.createClass({
                 validation,
                 setIsUploadReady,
                 isReadyForFormSubmission,
+                isFineUploaderActive,
                 areAssetsDownloadable,
                 onLoggedOut,
                 enableLocalHashing,
                 fileClassToUpload,
                 uploadMethod,
-                handleChangedFile } = this.props;
-        let editable = this.props.isFineUploaderActive;
+                handleChangedFile,
+                disabled } = this.props;
+        let editable = isFineUploaderActive;
 
         // if disabled is actually set by property, we want to override
         // isFineUploaderActive
-        if(typeof this.props.disabled !== 'undefined') {
-            editable = !this.props.disabled;
+        if(typeof disabled !== 'undefined') {
+            editable = !disabled;
         }
 
         return (
@@ -145,7 +160,7 @@ const InputFineUploader = React.createClass({
                 enableLocalHashing={enableLocalHashing}
                 uploadMethod={uploadMethod}
                 fileClassToUpload={fileClassToUpload}
-                handleChangedFile={handleChangedFile}/>
+                handleChangedFile={handleChangedFile} />
         );
     }
 });
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 1efe301c..cf3ac775 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -13,7 +13,12 @@ import { getLangText } from '../../../utils/lang_utils';
 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
 let FileDragAndDrop = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
+        areAssetsDownloadable: React.PropTypes.bool,
+        areAssetsEditable: React.PropTypes.bool,
+        multiple: React.PropTypes.bool,
+        dropzoneInactive: React.PropTypes.bool,
+        filesToUpload: React.PropTypes.array,
+
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
         onInactive: React.PropTypes.func,
@@ -22,10 +27,6 @@ let FileDragAndDrop = React.createClass({
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
         handleResumeFile: React.PropTypes.func,
-        multiple: React.PropTypes.bool,
-        dropzoneInactive: React.PropTypes.bool,
-        areAssetsDownloadable: React.PropTypes.bool,
-        areAssetsEditable: React.PropTypes.bool,
 
         enableLocalHashing: React.PropTypes.bool,
         uploadMethod: React.PropTypes.string,
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 562f9449..f75555a3 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -33,6 +33,47 @@ const { shape,
 
 const ReactS3FineUploader = React.createClass({
     propTypes: {
+        areAssetsDownloadable: bool,
+        areAssetsEditable: bool,
+
+        handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
+        submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
+        onInactive: func, // for when the user does something while the uploader's inactive
+
+        // Handle form validation
+        setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
+        isReadyForFormSubmission: func,
+
+        // We encountered some cases where people had difficulties to upload their
+        // works to ascribe due to a slow internet connection.
+        // One solution we found in the process of tackling this problem was to hash
+        // the file in the browser using md5 and then uploading the resulting text document instead
+        // of the actual file.
+        //
+        // This boolean and string essentially enable that behavior.
+        // Right now, we determine which upload method to use by appending a query parameter,
+        // which should be passed into 'uploadMethod':
+        //   'hash':   upload using the hash
+        //   'upload': upload full file (default if not specified)
+        enableLocalHashing: bool,
+        uploadMethod: oneOf(['hash', 'upload']),
+
+        // A class of a file the user has to upload
+        // Needs to be defined both in singular as well as in plural
+        fileClassToUpload: shape({
+            singular: string,
+            plural: string
+        }),
+
+        // Uploading functionality of react fineuploader is disconnected from its UI
+        // layer, which means that literally every (properly adjusted) react element
+        // can handle the UI handling.
+        fileInputElement: oneOfType([
+            func,
+            element
+        ]),
+
+        // S3 helpers
         keyRoutine: shape({
             url: string,
             fileClass: string,
@@ -48,10 +89,11 @@ const ReactS3FineUploader = React.createClass({
                 number
             ])
         }),
-        handleChangedFile: func, // is for when a file is dropped or selected
-        submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
+
+        // FineUploader options
         autoUpload: bool,
         debug: bool,
+        multiple: bool,
         objectProperties: shape({
             acl: string
         }),
@@ -103,45 +145,9 @@ const ReactS3FineUploader = React.createClass({
             unsupportedBrowser: string
         }),
         formatFileName: func,
-        multiple: bool,
         retry: shape({
             enableAuto: bool
-        }),
-        setIsUploadReady: func,
-        isReadyForFormSubmission: func,
-        areAssetsDownloadable: bool,
-        areAssetsEditable: bool,
-        defaultErrorMessage: string,
-        onInactive: func,
-
-        // We encountered some cases where people had difficulties to upload their
-        // works to ascribe due to a slow internet connection.
-        // One solution we found in the process of tackling this problem was to hash
-        // the file in the browser using md5 and then uploading the resulting text document instead
-        // of the actual file.
-        //
-        // This boolean and string essentially enable that behavior.
-        // Right now, we determine which upload method to use by appending a query parameter,
-        // which should be passed into 'uploadMethod':
-        //   'hash':   upload using the hash
-        //   'upload': upload full file (default if not specified)
-        enableLocalHashing: bool,
-        uploadMethod: oneOf(['hash', 'upload']),
-
-        // A class of a file the user has to upload
-        // Needs to be defined both in singular as well as in plural
-        fileClassToUpload: shape({
-            singular: string,
-            plural: string
-        }),
-
-        // Uploading functionality of react fineuploader is disconnected from its UI
-        // layer, which means that literally every (properly adjusted) react element
-        // can handle the UI handling.
-        fileInputElement: oneOfType([
-            func,
-            element
-        ])
+        })
     },
 
     getDefaultProps() {
@@ -945,14 +951,18 @@ const ReactS3FineUploader = React.createClass({
 
     render() {
         const {
-             multiple,
-             areAssetsDownloadable,
-             areAssetsEditable,
-             onInactive,
-             enableLocalHashing,
-             fileClassToUpload,
-             fileInputElement: FileInputElement,
-             uploadMethod } = this.props;
+            multiple,
+            areAssetsDownloadable,
+            areAssetsEditable,
+            onInactive,
+            enableLocalHashing,
+            fileClassToUpload,
+            fileInputElement: FileInputElement,
+            showErrorPrompt,
+            uploadMethod } = this.props;
+
+        // Only show the error state once all files are finished
+        const showError = !uploadInProgress && showErrorPrompt && errorClass;
 
         const props = {
             multiple,
@@ -962,8 +972,8 @@ const ReactS3FineUploader = React.createClass({
             enableLocalHashing,
             uploadMethod,
             fileClassToUpload,
+            filesToUpload,
             onDrop: this.handleUploadFile,
-            filesToUpload: this.state.filesToUpload,
             handleDeleteFile: this.handleDeleteFile,
             handleCancelFile: this.handleCancelFile,
             handlePauseFile: this.handlePauseFile,

From 04d7e6951a8feea5c294b846852521e265736870 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 18:16:11 +0100
Subject: [PATCH 008/197] Don't render fileDragAndDropDialog if it's not needed

---
 .../file_drag_and_drop.js                     |  96 +++++++-------
 .../file_drag_and_drop_dialog.js              | 120 +++++++++---------
 2 files changed, 109 insertions(+), 107 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index cf3ac775..983c0655 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -1,9 +1,11 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
 import FileDragAndDropDialog from './file_drag_and_drop_dialog';
+import FileDragAndDropErrorDialog from './file_drag_and_drop_error_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 import { FileStatus } from '../react_s3_fine_uploader_utils';
@@ -22,11 +24,11 @@ let FileDragAndDrop = React.createClass({
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
         onInactive: React.PropTypes.func,
-        filesToUpload: React.PropTypes.array,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
         handleResumeFile: React.PropTypes.func,
+        handleRetryFiles: React.PropTypes.func,
 
         enableLocalHashing: React.PropTypes.bool,
         uploadMethod: React.PropTypes.string,
@@ -142,73 +144,79 @@ let FileDragAndDrop = React.createClass({
         this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
     },
 
+    getPreviewIterator() {
+        const { areAssetsDownloadable, areAssetsEditable, filesToUpload } = this.props;
+
+        return (
+            <FileDragAndDropPreviewIterator
+                files={filesToUpload}
+                handleDeleteFile={this.handleDeleteFile}
+                handleCancelFile={this.handleCancelFile}
+                handlePauseFile={this.handlePauseFile}
+                handleResumeFile={this.handleResumeFile}
+                areAssetsDownloadable={areAssetsDownloadable}
+                areAssetsEditable={areAssetsEditable}/>
+        );
+    },
+
+    getUploadDialog() {
+        const { enableLocalHashing, fileClassToUpload, multiple, uploadMethod } = this.props;
+
+        return (
+            <FileDragAndDropDialog
+                multipleFiles={multiple}
+                onClick={this.handleOnClick}
+                enableLocalHashing={enableLocalHashing}
+                uploadMethod={uploadMethod}
+                fileClassToUpload={fileClassToUpload} />
+        );
+    },
+
     render: function () {
         const {
             filesToUpload,
             dropzoneInactive,
-            className,
             hashingProgress,
             handleCancelHashing,
             multiple,
-            enableLocalHashing,
-            uploadMethod,
             fileClassToUpload,
-            areAssetsDownloadable,
-            areAssetsEditable,
             allowedExtensions } = this.props;
 
         // has files only is true if there are files that do not have the status deleted, canceled, or failed
-        let hasFiles = filesToUpload
-                        .filter((file) => {
-                            return file.status !== FileStatus.DELETED &&
-                                file.status !== FileStatus.CANCELED &&
-                                file.status !== FileStatus.UPLOAD_FAILED &&
-                                file.size !== -1;
-                        })
-                        .length > 0;
+        const hasFiles = filesToUpload
+                            .filter((file) => {
+                                return file.status !== FileStatus.DELETED &&
+                                    file.status !== FileStatus.CANCELED &&
+                                    file.status !== FileStatus.UPLOAD_FAILED &&
+                                    file.size !== -1;
+                            })
+                            .length > 0;
 
-        let updatedClassName = hasFiles ? 'has-files ' : '';
-        updatedClassName += dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
-        updatedClassName += ' file-drag-and-drop';
+        const failedFiles = filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_FAILED);
+        let hasError = showError && errorClass && failedFiles.length > 0;
 
         // if !== -2: triggers a FileDragAndDrop-global spinner
         if(hashingProgress !== -2) {
             return (
-                <div className={className}>
-                    <div className="file-drag-and-drop-hashing-dialog">
-                        <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
-                        <p>
-                            <a onClick={handleCancelHashing}> {getLangText('Cancel hashing')}</a>
-                        </p>
-                        <ProgressBar
-                            now={Math.ceil(hashingProgress)}
-                            label="%(percent)s%"
-                            className="ascribe-progress-bar"/>
-                    </div>
+                <div className="file-drag-and-drop-hashing-dialog">
+                    <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
+                    <p>
+                        <a onClick={handleCancelHashing}> {getLangText('Cancel hashing')}</a>
+                    </p>
+                    <ProgressBar
+                        now={Math.ceil(hashingProgress)}
+                        label="%(percent)s%"
+                        className="ascribe-progress-bar"/>
                 </div>
             );
         } else {
             return (
                 <div
-                    className={updatedClassName}
+                    className={classNames('file-drag-and-drop', dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone', { 'has-files': hasFiles })}
                     onDrag={this.handleDrop}
                     onDragOver={this.handleDragOver}
                     onDrop={this.handleDrop}>
-                        <FileDragAndDropDialog
-                            multipleFiles={multiple}
-                            hasFiles={hasFiles}
-                            onClick={this.handleOnClick}
-                            enableLocalHashing={enableLocalHashing}
-                            uploadMethod={uploadMethod}
-                            fileClassToUpload={fileClassToUpload} />
-                        <FileDragAndDropPreviewIterator
-                            files={filesToUpload}
-                            handleDeleteFile={this.handleDeleteFile}
-                            handleCancelFile={this.handleCancelFile}
-                            handlePauseFile={this.handlePauseFile}
-                            handleResumeFile={this.handleResumeFile}
-                            areAssetsDownloadable={areAssetsDownloadable}
-                            areAssetsEditable={areAssetsEditable}/>
+                        {!hasFiles && !hasError ? this.getUploadDialog() : null}
                         {/*
                             Opera doesn't trigger simulated click events
                             if the targeted input has `display:none` set.
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
index 25552819..738fabcf 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
@@ -9,7 +9,6 @@ import { getCurrentQueryParams } from '../../../utils/url_utils';
 
 let FileDragAndDropDialog = React.createClass({
     propTypes: {
-        hasFiles: React.PropTypes.bool,
         multipleFiles: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
         uploadMethod: React.PropTypes.string,
@@ -36,80 +35,75 @@ let FileDragAndDropDialog = React.createClass({
 
     render() {
         const {
-            hasFiles,
             multipleFiles,
             enableLocalHashing,
             uploadMethod,
             fileClassToUpload,
             onClick } = this.props;
 
-        if (hasFiles) {
-            return null;
+        if (enableLocalHashing && !uploadMethod) {
+            const currentQueryParams = getCurrentQueryParams();
+
+            const queryParamsHash = Object.assign({}, currentQueryParams);
+            queryParamsHash.method = 'hash';
+
+            const queryParamsUpload = Object.assign({}, currentQueryParams);
+            queryParamsUpload.method = 'upload';
+
+            return (
+                <div className="file-drag-and-drop-dialog present-options">
+                    <p>{getLangText('Would you rather')}</p>
+                    {/*
+                        The frontend in live is hosted under /app,
+                        Since `Link` is appending that base url, if its defined
+                        by itself, we need to make sure to not set it at this point.
+                        Otherwise it will be appended twice.
+                    */}
+                    <Link
+                        to={`/${window.location.pathname.split('/').pop()}`}
+                        query={queryParamsHash}>
+                        <span className="btn btn-default btn-sm">
+                            {getLangText('Hash your work')}
+                        </span>
+                    </Link>
+
+                    <span> or </span>
+
+                   <Link
+                        to={`/${window.location.pathname.split('/').pop()}`}
+                        query={queryParamsUpload}>
+                        <span className="btn btn-default btn-sm">
+                            {getLangText('Upload and hash your work')}
+                        </span>
+                    </Link>
+                </div>
+            );
         } else {
-            if (enableLocalHashing && !uploadMethod) {
-                const currentQueryParams = getCurrentQueryParams();
-
-                const queryParamsHash = Object.assign({}, currentQueryParams);
-                queryParamsHash.method = 'hash';
-
-                const queryParamsUpload = Object.assign({}, currentQueryParams);
-                queryParamsUpload.method = 'upload';
-
+            if (multipleFiles) {
                 return (
-                    <div className="file-drag-and-drop-dialog present-options">
-                        <p>{getLangText('Would you rather')}</p>
-                        {/*
-                            The frontend in live is hosted under /app,
-                            Since `Link` is appending that base url, if its defined
-                            by itself, we need to make sure to not set it at this point.
-                            Otherwise it will be appended twice.
-                        */}
-                        <Link
-                            to={`/${window.location.pathname.split('/').pop()}`}
-                            query={queryParamsHash}>
-                            <span className="btn btn-default btn-sm">
-                                {getLangText('Hash your work')}
-                            </span>
-                        </Link>
-
-                        <span> or </span>
-
-                       <Link
-                            to={`/${window.location.pathname.split('/').pop()}`}
-                            query={queryParamsUpload}>
-                            <span className="btn btn-default btn-sm">
-                                {getLangText('Upload and hash your work')}
-                            </span>
-                        </Link>
-                    </div>
+                    <span className="file-drag-and-drop-dialog">
+                        {this.getDragDialog(fileClassToUpload.plural)}
+                        <span
+                            className="btn btn-default"
+                            onClick={onClick}>
+                                {getLangText('choose %s to upload', fileClassToUpload.plural)}
+                        </span>
+                    </span>
                 );
             } else {
-                if (multipleFiles) {
-                    return (
-                        <span className="file-drag-and-drop-dialog">
-                            {this.getDragDialog(fileClassToUpload.plural)}
-                            <span
-                                className="btn btn-default"
-                                onClick={onClick}>
-                                    {getLangText('choose %s to upload', fileClassToUpload.plural)}
-                            </span>
-                        </span>
-                    );
-                } else {
-                    const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
-                                                           : getLangText('choose a %s to upload', fileClassToUpload.singular);
+                const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
+                                                       : getLangText('choose a %s to upload', fileClassToUpload.singular);
 
-                    return (
-                        <span className="file-drag-and-drop-dialog">
-                            {this.getDragDialog(fileClassToUpload.singular)}
-                            <span
-                                className="btn btn-default"
-                                onClick={onClick}>
-                                    {dialog}
-                            </span>
+                return (
+                    <span className="file-drag-and-drop-dialog">
+                        {this.getDragDialog(fileClassToUpload.singular)}
+                        <span
+                            className="btn btn-default"
+                            onClick={onClick}>
+                                {dialog}
                         </span>
-                    );
-                }
+                    </span>
+                );
             }
         }
     }

From 79780cfb3ad819afa385a0062aa19a3953509002 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 18:22:11 +0100
Subject: [PATCH 009/197] Add FileDragAndDropError

---
 .../further_details_fileuploader.js           |   7 +-
 .../ascribe_forms/form_register_piece.js      |   6 +-
 .../ascribe_forms/input_fineuploader.js       |   3 +
 .../file_drag_and_drop.js                     |  20 ++
 .../file_drag_and_drop_error_dialog.js        |  86 ++++++
 .../react_s3_fine_uploader.js                 | 250 ++++++++++++------
 js/constants/error_constants.js               |   2 +-
 js/utils/general_utils.js                     |  43 ++-
 sass/ascribe_uploader.scss                    | 154 ++++++++++-
 9 files changed, 471 insertions(+), 100 deletions(-)
 create mode 100644 js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js

diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index b660c80e..f5593ab9 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -22,6 +22,7 @@ let FurtherDetailsFileuploader = React.createClass({
 
         // Props for ReactS3FineUploader
         multiple: bool,
+        showErrorPrompt: bool,
         submitFile: func, // TODO: rename to onSubmitFile
 
         setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
@@ -42,6 +43,7 @@ let FurtherDetailsFileuploader = React.createClass({
             otherData,
             pieceId,
             setIsUploadReady,
+            showErrorPrompt,
             submitFile } = this.props;
 
         // Essentially there a three cases important to the fileuploader
@@ -101,8 +103,9 @@ let FurtherDetailsFileuploader = React.createClass({
                         }
                     }}
                     areAssetsDownloadable={true}
-                    areAssetsEditable={this.props.editable}
-                    multiple={this.props.multiple} />
+                    areAssetsEditable={editable}
+                    multiple={multiple}
+                    showErrorPrompt={showErrorPrompt} />
             </Property>
         );
     }
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 9deed676..d711cd61 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -173,7 +173,8 @@ let RegisterPieceForm = React.createClass({
                         disabled={!isFineUploaderEditable}
                         enableLocalHashing={hashLocally}
                         uploadMethod={location.query.method}
-                        handleChangedFile={this.handleChangedDigitalWork}/>
+                        handleChangedFile={this.handleChangedDigitalWork}
+                        showErrorPrompt />
                 </Property>
                 <Property
                     name="thumbnail_file"
@@ -196,11 +197,10 @@ let RegisterPieceForm = React.createClass({
                             allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
-                        location={location}
                         fileClassToUpload={{
                             singular: getLangText('Select representative image'),
                             plural: getLangText('Select representative images')
-                        }}/>
+                        }} />
                 </Property>
                 <Property
                     name='artist_name'
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index 1b6544a8..a6028cf9 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -25,6 +25,7 @@ const InputFineUploader = React.createClass({
 
         // Props for ReactS3FineUploader
         areAssetsDownloadable: bool,
+        showErrorPrompt: bool,
 
         handleChangedFile: func, // TODO: rename to onChangedFile
         submitFile: func, // TODO: rename to onSubmitFile
@@ -121,6 +122,7 @@ const InputFineUploader = React.createClass({
                 fileClassToUpload,
                 uploadMethod,
                 handleChangedFile,
+                showErrorPrompt,
                 disabled } = this.props;
         let editable = isFineUploaderActive;
 
@@ -142,6 +144,7 @@ const InputFineUploader = React.createClass({
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}
                 areAssetsEditable={editable}
+                showErrorPrompt={showErrorPrompt}
                 signature={{
                     endpoint: AppConstants.serverUrl + 's3/signature/',
                     customHeaders: {
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 983c0655..3c993aea 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -39,6 +39,12 @@ let FileDragAndDrop = React.createClass({
         // to -1 which is code for: aborted
         handleCancelHashing: React.PropTypes.func,
 
+        showError: React.PropTypes.bool,
+        errorClass: React.PropTypes.shape({
+            name: React.PropTypes.string,
+            prettifiedText: React.PropTypes.string
+        }),
+
         // A class of a file the user has to upload
         // Needs to be defined both in singular as well as in plural
         fileClassToUpload: React.PropTypes.shape({
@@ -144,6 +150,17 @@ let FileDragAndDrop = React.createClass({
         this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
     },
 
+    getErrorDialog(failedFiles) {
+        const { errorClass } = this.props;
+
+        return (
+            <FileDragAndDropErrorDialog
+                errorClass={errorClass}
+                files={failedFiles}
+                handleRetryFiles={this.props.handleRetryFiles} />
+        );
+    },
+
     getPreviewIterator() {
         const { areAssetsDownloadable, areAssetsEditable, filesToUpload } = this.props;
 
@@ -179,6 +196,8 @@ let FileDragAndDrop = React.createClass({
             hashingProgress,
             handleCancelHashing,
             multiple,
+            showError,
+            errorClass,
             fileClassToUpload,
             allowedExtensions } = this.props;
 
@@ -216,6 +235,7 @@ let FileDragAndDrop = React.createClass({
                     onDrag={this.handleDrop}
                     onDragOver={this.handleDragOver}
                     onDrop={this.handleDrop}>
+                        {hasError ? this.getErrorDialog(failedFiles) : this.getPreviewIterator()}
                         {!hasFiles && !hasError ? this.getUploadDialog() : null}
                         {/*
                             Opera doesn't trigger simulated click events
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
new file mode 100644
index 00000000..326f727f
--- /dev/null
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
@@ -0,0 +1,86 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { ErrorClasses } from '../../../constants/error_constants';
+
+import { getLangText } from '../../../utils/lang_utils';
+
+let FileDragAndDropErrorDialog = React.createClass({
+    propTypes: {
+        errorClass: React.PropTypes.shape({
+            name: React.PropTypes.string,
+            prettifiedText: React.PropTypes.string
+        }).isRequired,
+        files: React.PropTypes.array.isRequired,
+        handleRetryFiles: React.PropTypes.func.isRequired
+    },
+
+    getRetryButton(text, openIntercom) {
+        return (
+            <button
+                type="button"
+                className='btn btn-default'
+                onClick={() => {
+                    if (openIntercom) {
+                        window.Intercom('showNewMessage', getLangText("I'm having trouble with uploading my file: "));
+                    }
+
+                    this.retryAllFiles()
+                }}>
+                {getLangText(text)}
+            </button>
+        );
+    },
+
+    getContactUsDetail() {
+        return (
+            <div className='file-drag-and-drop-error'>
+                <h4>Let us help you</h4>
+                <p>{getLangText('Still having problems? Give us a call!')}</p>
+                {this.getRetryButton('Contact us', true)}
+            </div>
+        );
+    },
+
+    getErrorDetail(multipleFiles) {
+        const { errorClass: { prettifiedText }, files } = this.props;
+
+        return (
+            <div className='file-drag-and-drop-error'>
+                <div className={classNames('file-drag-and-drop-error-detail', { 'file-drag-and-drop-error-detail-multiple-files': multipleFiles })}>
+                    <h4>{getLangText(multipleFiles ? 'Some files did not upload correctly'
+                                                   : 'Error uploading the file!')}
+                    </h4>
+                    <p>{prettifiedText}</p>
+                    {this.getRetryButton('Retry')}
+                </div>
+                <span className={classNames('file-drag-and-drop-error-icon-container', { 'file-drag-and-drop-error-icon-container-multiple-files': multipleFiles })}>
+                    <span className='file-drag-and-drop-error-icon'></span>
+                </span>
+                <div className='file-drag-and-drop-error-file-names'>
+                    <ul>
+                        {files.map((file) => (<li key={file.id} className='file-name'>{file.originalName}</li>))}
+                    </ul>
+                </div>
+            </div>
+        );
+    },
+
+    retryAllFiles() {
+        const { files, handleRetryFiles } = this.props;
+        handleRetryFiles(files.map(file => file.id));
+    },
+
+    render() {
+        const { errorClass: { name: errorName }, files } = this.props;
+
+        const multipleFiles = files.length > 1;
+        const contactUs = errorName === ErrorClasses.upload.contactUs.name;
+
+        return contactUs ? this.getContactUsDetail() : this.getErrorDetail(multipleFiles);
+    }
+});
+
+export default FileDragAndDropErrorDialog;
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index f75555a3..172940e6 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -35,6 +35,8 @@ const ReactS3FineUploader = React.createClass({
     propTypes: {
         areAssetsDownloadable: bool,
         areAssetsEditable: bool,
+        errorNotificationMessage: string,
+        showErrorPrompt: bool,
 
         handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
         submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
@@ -152,8 +154,18 @@ const ReactS3FineUploader = React.createClass({
 
     getDefaultProps() {
         return {
+            errorNotificationMessage: getLangText('Oops, we had a problem uploading your file. Please contact us if this happens repeatedly.'),
+            showErrorPrompt: false,
+            fileClassToUpload: {
+                singular: getLangText('file'),
+                plural: getLangText('files')
+            },
+            fileInputElement: FileDragAndDrop,
+
+            // FineUploader options
             autoUpload: true,
             debug: false,
+            multiple: false,
             objectProperties: {
                 acl: 'public-read',
                 bucket: 'ascribe0'
@@ -195,22 +207,20 @@ const ReactS3FineUploader = React.createClass({
                     name = name.slice(0, 15) + '...' + name.slice(-15);
                 }
                 return name;
-            },
-            multiple: false,
-            defaultErrorMessage: getLangText('Unexpected error. Please contact us if this happens repeatedly.'),
-            fileClassToUpload: {
-                singular: getLangText('file'),
-                plural: getLangText('files')
-            },
-            fileInputElement: FileDragAndDrop
+            }
         };
     },
 
     getInitialState() {
         return {
             filesToUpload: [],
-            uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
+            uploader: this.createNewFineUploader(),
             csrfToken: getCookie(AppConstants.csrftoken),
+            errorState: {
+                manualRetryAttempt: 0,
+                errorClass: undefined
+            },
+            uploadInProgress: false,
 
             // -1: aborted
             // -2: uninitialized
@@ -228,7 +238,7 @@ const ReactS3FineUploader = React.createClass({
         let potentiallyNewCSRFToken = getCookie(AppConstants.csrftoken);
         if(this.state.csrfToken !== potentiallyNewCSRFToken) {
             this.setState({
-                uploader: new fineUploader.s3.FineUploaderBasic(this.propsToConfig()),
+                uploader: this.createNewFineUploader(),
                 csrfToken: potentiallyNewCSRFToken
             });
         }
@@ -241,8 +251,12 @@ const ReactS3FineUploader = React.createClass({
         this.state.uploader.cancelAll();
     },
 
+    createNewFineUploader() {
+        return new fineUploader.s3.FineUploaderBasic(this.propsToConfig());
+    },
+
     propsToConfig() {
-        let objectProperties = this.props.objectProperties;
+        const objectProperties = Object.assign({}, this.props.objectProperties);
         objectProperties.key = this.requestKey;
 
         return {
@@ -263,6 +277,7 @@ const ReactS3FineUploader = React.createClass({
             multiple: this.props.multiple,
             retry: this.props.retry,
             callbacks: {
+                onAllComplete: this.onAllComplete,
                 onComplete: this.onComplete,
                 onCancel: this.onCancel,
                 onProgress: this.onProgress,
@@ -408,6 +423,65 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
+    checkFormSubmissionReady() {
+        const { isReadyForFormSubmission, setIsUploadReady } = this.props;
+
+        // since the form validation props isReadyForFormSubmission and setIsUploadReady
+        // are optional, we'll only trigger them when they're actually defined
+        if (typeof isReadyForFormSubmission === 'function' && typeof setIsUploadReady === 'function') {
+            // set uploadReady to true if the uploader's ready for submission
+            setIsUploadReady(isReadyForFormSubmission(this.state.filesToUpload));
+        } else {
+            console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
+        }
+    },
+
+    isFileValid(file) {
+        const { validation } = this.props;
+
+        if (validation && file.size > validation.sizeLimit) {
+            const fileSizeInMegaBytes = validation.sizeLimit / 1000000;
+
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            return false;
+        } else {
+            return true;
+        }
+    },
+
+    getUploadErrorClass({ type = 'upload', reason, xhr }) {
+        const { manualRetryAttempt } = this.state.errorState;
+        let matchedErrorClass;
+
+        // Use the contact us error class if they've retried a number of times
+        // and are still unsuccessful
+        if (manualRetryAttempt === RETRY_ATTEMPT_TO_SHOW_CONTACT_US) {
+            matchedErrorClass = ErrorClasses.upload.contactUs;
+        } else {
+            matchedErrorClass = testErrorAgainstAll({ type, reason, xhr });
+
+            // If none found, show the next error message
+            if (!matchedErrorClass) {
+                matchedErrorClass = ErrorQueueStore.getNextError('upload');
+            }
+        }
+
+        return matchedErrorClass;
+    },
+
+    getXhrErrorComment(xhr) {
+        if (xhr) {
+            return {
+                response: xhr.response,
+                url: xhr.responseURL,
+                status: xhr.status,
+                statusText: xhr.statusText
+            };
+        }
+    },
+
     /* FineUploader specific callback function handlers */
 
     onUploadChunk(id, name, chunkData) {
@@ -438,7 +512,14 @@ const ReactS3FineUploader = React.createClass({
 
             this.setState({ startedChunks });
         }
+    },
 
+    onAllComplete(succeed, failed) {
+        if (this.state.uploadInProgress) {
+            this.setState({
+                uploadInProgress: false
+            });
+        }
     },
 
     onComplete(id, name, res, xhr) {
@@ -464,29 +545,14 @@ const ReactS3FineUploader = React.createClass({
             // Only after the blob has been created server-side, we can make the form submittable.
             this.createBlob(files[id])
                 .then(() => {
-                    // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile
-                    // are optional, we'll only trigger them when they're actually defined
-                    if(this.props.submitFile) {
+                    if (typeof this.props.submitFile === 'function') {
                         this.props.submitFile(files[id]);
                     } else {
                         console.warn('You didn\'t define submitFile as a prop in react-s3-fine-uploader');
                     }
 
-                    // for explanation, check comment of if statement above
-                    if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
-                        // also, lets check if after the completion of this upload,
-                        // the form is ready for submission or not
-                        if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
-                            // if so, set uploadstatus to true
-                            this.props.setIsUploadReady(true);
-                        } else {
-                            this.props.setIsUploadReady(false);
-                        }
-                    } else {
-                        console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
-                    }
-                })
-                .catch(this.onErrorPromiseProxy);
+                    this.checkFormSubmissionReady();
+                });
         }
     },
 
@@ -502,42 +568,43 @@ const ReactS3FineUploader = React.createClass({
     },
 
     onError(id, name, errorReason, xhr) {
+        const { errorNotificationMessage, showErrorPrompt } = this.props;
+        const { chunks, filesToUpload } = this.state;
+
         console.logGlobal(errorReason, false, {
-            files: this.state.filesToUpload,
-            chunks: this.state.chunks,
+            files: filesToUpload,
+            chunks: chunks,
             xhr: this.getXhrErrorComment(xhr)
         });
 
-        this.props.setIsUploadReady(true);
-        this.cancelUploads();
+        let notificationMessage;
 
-        let notification = new GlobalNotificationModel(errorReason || this.props.defaultErrorMessage, 'danger', 5000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-    },
+        if (showErrorPrompt) {
+            notificationMessage = errorNotificationMessage;
 
-    getXhrErrorComment(xhr) {
-        if (xhr) {
-            return {
-                response: xhr.response,
-                url: xhr.responseURL,
-                status: xhr.status,
-                statusText: xhr.statusText
-            };
-        }
-    },
+            this.setStatusOfFile(id, FileStatus.UPLOAD_FAILED);
 
-    isFileValid(file) {
-        if(file.size > this.props.validation.sizeLimit) {
+            // If we've already found an error on this upload, just ignore other errors
+            // that pop up. They'll likely pop up again when the user retries.
+            if (!this.state.errorState.errorClass) {
+                const errorState = React.addons.update(this.state.errorState, {
+                    errorClass: {
+                        $set: this.getUploadErrorClass({
+                            reason: errorReason,
+                            xhr
+                        })
+                    }
+                });
 
-            let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
-
-            let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-
-            return false;
+                this.setState({ errorState });
+            }
         } else {
-            return true;
+            notificationMessage = errorReason || errorNotificationMessage;
+            this.cancelUploads();
         }
+
+        const notification = new GlobalNotificationModel(notificationMessage, 'danger', 5000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     onCancel(id) {
@@ -552,17 +619,18 @@ const ReactS3FineUploader = React.createClass({
         let notification = new GlobalNotificationModel(getLangText('File upload canceled'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile
-        // are optional, we'll only trigger them when they're actually defined
-        if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
-            if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
-                // if so, set uploadstatus to true
-                this.props.setIsUploadReady(true);
-            } else {
-                this.props.setIsUploadReady(false);
-            }
-        } else {
-            console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
+        this.checkFormSubmissionReady();
+
+        // FineUploader's onAllComplete event doesn't fire if all files are cancelled
+        // so we need to double check if this is the last file getting cancelled.
+        //
+        // Because we're calling FineUploader.getInProgress() in a cancel callback,
+        // the current file getting cancelled is still considered to be in progress
+        // so there will be one file left in progress when we're cancelling the last file.
+        if (this.state.uploader.getInProgress() === 1) {
+            this.setState({
+                uploadInProgress: false
+            });
         }
 
         return true;
@@ -619,20 +687,7 @@ const ReactS3FineUploader = React.createClass({
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
 
-        // since the form validation props isReadyForFormSubmission, setIsUploadReady and submitFile
-        // are optional, we'll only trigger them when they're actually defined
-        if(this.props.isReadyForFormSubmission && this.props.setIsUploadReady) {
-            // also, lets check if after the completion of this upload,
-            // the form is ready for submission or not
-            if(this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
-                // if so, set uploadstatus to true
-                this.props.setIsUploadReady(true);
-            } else {
-                this.props.setIsUploadReady(false);
-            }
-        } else {
-            console.warn('You didn\'t define the functions isReadyForFormSubmission and/or setIsUploadReady in as a prop in react-s3-fine-uploader');
-        }
+        this.checkFormSubmissionReady();
     },
 
     handleDeleteFile(fileId) {
@@ -692,6 +747,27 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
+    handleRetryFiles(fileIds) {
+        let filesToUpload = this.state.filesToUpload;
+
+        if (fileIds.constructor !== Array) {
+            fileIds = [ fileIds ];
+        }
+
+        fileIds.forEach((fileId) => {
+            this.state.uploader.retry(fileId);
+            filesToUpload = React.addons.update(filesToUpload, { [fileId]: { status: { $set: FileStatus.UPLOADING } } });
+        });
+
+        this.setState({
+            // Reset the error class along with the retry
+            errorState: {
+                manualRetryAttempt: this.state.errorState.manualRetryAttempt + 1
+            },
+            filesToUpload
+        });
+    },
+
     handleUploadFile(files) {
         // While files are being uploaded, the form cannot be ready
         // for submission
@@ -819,6 +895,9 @@ const ReactS3FineUploader = React.createClass({
             if(files.length > 0) {
                 this.state.uploader.addFiles(files);
                 this.synchronizeFileLists(files);
+                this.setState({
+                    uploadInProgress: true
+                });
             }
         }
     },
@@ -920,7 +999,7 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isDropzoneInactive() {
-        const { areAssetsEditable, enableLocalHashing, multiple, showErrorStates, uploadMethod } = this.props;
+        const { areAssetsEditable, enableLocalHashing, multiple, showErrorPrompt, uploadMethod } = this.props;
         const { errorState, filesToUpload } = this.state;
 
         const filesToDisplay = filesToUpload.filter((file) => {
@@ -931,7 +1010,7 @@ const ReactS3FineUploader = React.createClass({
         });
 
         if ((enableLocalHashing && !uploadMethod) || !areAssetsEditable ||
-                (showErrorStates && errorState.errorClass) ||
+                (showErrorPrompt && errorState.errorClass) ||
                 (!multiple && filesToDisplay.length > 0)) {
             return true;
         } else {
@@ -940,7 +1019,7 @@ const ReactS3FineUploader = React.createClass({
     },
 
     getAllowedExtensions() {
-        let { validation } = this.props;
+        const { validation } = this.props;
 
         if(validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
             return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions);
@@ -950,6 +1029,7 @@ const ReactS3FineUploader = React.createClass({
     },
 
     render() {
+        const { errorState: { errorClass }, filesToUpload, uploadInProgress } = this.state;
         const {
             multiple,
             areAssetsDownloadable,
@@ -973,11 +1053,15 @@ const ReactS3FineUploader = React.createClass({
             uploadMethod,
             fileClassToUpload,
             filesToUpload,
+            uploadInProgress,
+            errorClass,
+            showError,
             onDrop: this.handleUploadFile,
             handleDeleteFile: this.handleDeleteFile,
             handleCancelFile: this.handleCancelFile,
             handlePauseFile: this.handlePauseFile,
             handleResumeFile: this.handleResumeFile,
+            handleRetryFiles: this.handleRetryFiles,
             handleCancelHashing: this.handleCancelHashing,
             dropzoneInactive: this.isDropzoneInactive(),
             hashingProgress: this.state.hashingProgress,
diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index 6386892c..19e06c18 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -135,7 +135,7 @@ Object.keys(ErrorClasses).forEach((errorGroupKey) => {
     const errorGroup = ErrorClasses[errorGroupKey];
     Object.keys(errorGroup).forEach((errorClassKey) => {
         const errorClass = errorGroup[errorClassKey];
-        errorClass.name = errorClassKey;
+        errorClass.name = errorGroupKey + '-' + errorClassKey;
         errorClass.group = errorGroupKey;
     });
 });
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index f9e8cdc9..b15a0525 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -145,7 +145,7 @@ export function escapeHTML(s) {
  * Returns a copy of the given object's own and inherited enumerable
  * properties, omitting any keys that pass the given filter function.
  */
-function filterObjOnFn(obj, filterFn) {
+function applyFilterOnObject(obj, filterFn) {
     const filteredObj = {};
 
     for (let key in obj) {
@@ -158,6 +158,37 @@ function filterObjOnFn(obj, filterFn) {
     return filteredObj;
 }
 
+/**
+ * Abstraction for selectFromObject and omitFromObject
+ * for DRYness
+ * @param {boolean} isInclusion True if the filter should be for including the filtered items
+ *                              (ie. selecting only them vs omitting only them)
+ */
+function filterFromObject(obj, filter, { isInclusion = true } = {}) {
+    if (filter && filter.constructor === Array) {
+        return applyFilterOnObject(obj, isInclusion ? ((_, key) => filter.indexOf(key) < 0)
+                                                    : ((_, key) => filter.indexOf(key) >= 0));
+    } else if (filter && typeof filter === 'function') {
+        // Flip the filter fn's return if it's for inclusion
+        return applyFilterOnObject(obj, isInclusion ? (...args) => !filter(...args)
+                                                    : filter);
+    } else {
+        throw new Error('The given filter is not an array or function. Exclude aborted');
+    }
+}
+
+/**
+ * Similar to lodash's _.pick(), this returns a copy of the given object's
+ * own and inherited enumerable properties, selecting only the keys in
+ * the given array or whose value pass the given filter function.
+ * @param  {object}         obj    Source object
+ * @param  {array|function} filter Array of key names to select or function to invoke per iteration
+ * @return {object}                The new object
+*/
+export function selectFromObject(obj, filter) {
+    return filterFromObject(obj, filter);
+}
+
 /**
  * Similar to lodash's _.omit(), this returns a copy of the given object's
  * own and inherited enumerable properties, omitting any keys that are
@@ -167,15 +198,7 @@ function filterObjOnFn(obj, filterFn) {
  * @return {object}                The new object
 */
 export function omitFromObject(obj, filter) {
-    if (filter && filter.constructor === Array) {
-        return filterObjOnFn(obj, (_, key) => {
-            return filter.indexOf(key) >= 0;
-        });
-    } else if (filter && typeof filter === 'function') {
-        return filterObjOnFn(obj, filter);
-    } else {
-        throw new Error('The given filter is not an array or function. Exclude aborted');
-    }
+    return filterFromObject(obj, filter, { isInclusion: false });
 }
 
 /**
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 38f8400b..fa353ecd 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -169,6 +169,158 @@
     }
 }
 
+.file-drag-and-drop-error {
+    margin-bottom: 25px;
+    overflow: hidden;
+    text-align: center;
+
+    h4 {
+        margin-top: 0;
+        color: $ascribe-pink;
+    }
+
+    .btn {
+        padding-left: 45px;
+        padding-right: 45px;
+    }
+
+    /* Make button larger on mobile */
+    @media screen and (max-width: 625px) {
+        .btn {
+            padding: 10px 100px 10px 100px;
+            margin-bottom: 10px;
+            margin-top: 10px;
+        }
+    }
+}
+
+.file-drag-and-drop-error-detail {
+    float: left;
+    padding-right: 25px;
+    text-align: left;
+    width: 40%;
+
+    &.file-drag-and-drop-error-detail-multiple-files {
+        width: 45%;
+    }
+
+    /* Have detail fill up entire width on mobile */
+    @media screen and (max-width: 625px) {
+        text-align: center;
+        width: 100%;
+
+        &.file-drag-and-drop-error-detail-multiple-files {
+            width: 100%;
+        }
+    }
+}
+
+.file-drag-and-drop-error-file-names {
+    float: left;
+    height: 104px;
+    max-width: 35%;
+    padding-left: 25px;
+    position: relative;
+    text-align: left;
+
+    ul {
+        list-style: none;
+        padding-left: 0;
+        position: relative;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+
+        li {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    /* Drop down file names under the retry button on mobile */
+    @media screen and (max-width: 625px) {
+        height: auto;
+        max-width: none;
+        padding: 0;
+        text-align: center;
+        width: 100%;
+
+        ul {
+            margin-bottom: 0;
+            margin-top: 10px;
+            top: 0;
+            -webkit-transform: none;
+            -ms-transform: none;
+            transform: none;
+
+            li {
+                display: inline-block;
+                max-width: 25%;
+                padding-right: 10px;
+
+                &:not(:last-child)::after {
+                    content: ',';
+                }
+            }
+        }
+    }
+}
+
+.file-drag-and-drop-error-icon-container {
+    background-color: #eeeeee;
+    display: inline-block;
+    float: left;
+    height: 104px;
+    position: relative;
+    width: 104px;
+    vertical-align: top;
+
+    .file-drag-and-drop-error-icon {
+        position: absolute;
+    }
+
+    &.file-drag-and-drop-error-icon-container-multiple-files {
+        background-color: #d7d7d7;
+        left: -15px;
+        z-index: 1;
+
+        &::before {
+            content: '';
+            background-color: #e9e9e9;
+            display: block;
+            height: 104px;
+            left: 15px;
+            position: absolute;
+            top: 12px;
+            width: 104px;
+            z-index: 2;
+        }
+
+        &::after {
+            content: '';
+            background-color: #f5f5f5;
+            display: block;
+            height: 104px;
+            left: 30px;
+            position: absolute;
+            top: 24px;
+            width: 104px;
+            z-index: 3;
+        }
+
+        .file-drag-and-drop-error-icon {
+            z-index: 4;
+        }
+    }
+
+    /* Hide the icon when the screen is too small */
+    @media screen and (max-width: 625px) {
+        display: none;
+    }
+}
+
 .ascribe-progress-bar {
     margin-bottom: 0;
     > .progress-bar {
@@ -197,4 +349,4 @@
     span + .btn {
         margin-left: 1em;
     }
-}
\ No newline at end of file
+}

From 5bc447ecc8898e8c15613beaeefbc15818883f5c Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 18:23:02 +0100
Subject: [PATCH 010/197] Allow warnings to be set from inside properties to
 change appearance

---
 .../ascribe_forms/input_fineuploader.js       |  3 +++
 js/components/ascribe_forms/property.js       | 21 ++++++++++++-------
 .../react_s3_fine_uploader.js                 | 19 +++++++++++++++++
 sass/ascribe_property.scss                    |  7 +++++--
 4 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index a6028cf9..b25056a3 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -25,6 +25,7 @@ const InputFineUploader = React.createClass({
 
         // Props for ReactS3FineUploader
         areAssetsDownloadable: bool,
+        setWarning: func,
         showErrorPrompt: bool,
 
         handleChangedFile: func, // TODO: rename to onChangedFile
@@ -122,6 +123,7 @@ const InputFineUploader = React.createClass({
                 fileClassToUpload,
                 uploadMethod,
                 handleChangedFile,
+                setWarning,
                 showErrorPrompt,
                 disabled } = this.props;
         let editable = isFineUploaderActive;
@@ -144,6 +146,7 @@ const InputFineUploader = React.createClass({
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}
                 areAssetsEditable={editable}
+                setWarning={setWarning}
                 showErrorPrompt={showErrorPrompt}
                 signature={{
                     endpoint: AppConstants.serverUrl + 's3/signature/',
diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 063d27dd..7f2a34e2 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -71,7 +71,8 @@ const Property = React.createClass({
             initialValue: null,
             value: null,
             isFocused: false,
-            errors: null
+            errors: null,
+            hasWarning: false
         };
     },
 
@@ -209,17 +210,20 @@ const Property = React.createClass({
         this.setState({errors: null});
     },
 
+    setWarning(hasWarning) {
+        this.setState({ hasWarning });
+    },
+
     getClassName() {
-        if(!this.state.expanded && !this.props.checkboxLabel){
+        if (!this.state.expanded && !this.props.checkboxLabel) {
             return 'is-hidden';
-        }
-        if(!this.props.editable){
+        } else if (!this.props.editable) {
             return 'is-fixed';
-        }
-        if (this.state.errors){
+        } else if (this.state.errors) {
             return 'is-error';
-        }
-        if(this.state.isFocused) {
+        } else if (this.state.hasWarning) {
+            return 'is-warning';
+        } else if (this.state.isFocused) {
             return 'is-focused';
         } else {
             return '';
@@ -245,6 +249,7 @@ const Property = React.createClass({
                     onChange: this.handleChange,
                     onFocus: this.handleFocus,
                     onBlur: this.handleBlur,
+                    setWarning: this.setWarning,
                     disabled: !this.props.editable,
                     ref: 'input',
                     name: this.props.name
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 172940e6..b022fe27 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -8,10 +8,13 @@ import S3Fetcher from '../../fetchers/s3_fetcher';
 
 import FileDragAndDrop from './ascribe_file_drag_and_drop/file_drag_and_drop';
 
+import ErrorQueueStore from '../../stores/error_queue_store';
+
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import AppConstants from '../../constants/application_constants';
+import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants';
 
 import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { computeHashOfFile } from '../../utils/file_utils';
@@ -31,12 +34,16 @@ const { shape,
         element,
         arrayOf } = React.PropTypes;
 
+// After 5 manual retries, show the contact us prompt.
+const RETRY_ATTEMPT_TO_SHOW_CONTACT_US = 5;
+
 const ReactS3FineUploader = React.createClass({
     propTypes: {
         areAssetsDownloadable: bool,
         areAssetsEditable: bool,
         errorNotificationMessage: string,
         showErrorPrompt: bool,
+        setWarning: func, // for when the parent component wants to be notified of uploader warnings (ie. upload failed)
 
         handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
         submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
@@ -301,6 +308,9 @@ const ReactS3FineUploader = React.createClass({
         // proclaim that upload is not ready
         this.props.setIsUploadReady(false);
 
+        // reset any warnings propagated to parent
+        this.setWarning(false);
+
         // reset internal data structures of component
         this.setState(this.getInitialState());
     },
@@ -423,6 +433,12 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
+    setWarning(hasWarning) {
+        if (typeof this.props.setWarning === 'function') {
+            this.props.setWarning(hasWarning);
+        }
+    },
+
     checkFormSubmissionReady() {
         const { isReadyForFormSubmission, setIsUploadReady } = this.props;
 
@@ -597,6 +613,7 @@ const ReactS3FineUploader = React.createClass({
                 });
 
                 this.setState({ errorState });
+                this.setWarning(true);
             }
         } else {
             notificationMessage = errorReason || errorNotificationMessage;
@@ -766,6 +783,8 @@ const ReactS3FineUploader = React.createClass({
             },
             filesToUpload
         });
+
+        this.setWarning(false);
     },
 
     handleUploadFile(files) {
diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss
index d214c57e..e3a4c914 100644
--- a/sass/ascribe_property.scss
+++ b/sass/ascribe_property.scss
@@ -37,7 +37,6 @@ $ascribe-red-error: rgb(169, 68, 66);
                 margin-right: 1em;
             }
         }
-        
 
         > input,
         > textarea {
@@ -50,6 +49,10 @@ $ascribe-red-error: rgb(169, 68, 66);
     }
 }
 
+.is-warning {
+    border-left: 3px solid $ascribe-pink
+}
+
 .is-fixed {
     cursor: default;
 
@@ -233,4 +236,4 @@ $ascribe-red-error: rgb(169, 68, 66);
     > span > span {
         margin-top: 0;
     }
-}
\ No newline at end of file
+}

From 5250427ce06cef258bef8bf99b0699e087b28987 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 18:29:26 +0100
Subject: [PATCH 011/197] Use FileStatus in UploadButton, register form

---
 js/components/ascribe_forms/form_register_piece.js        | 7 +++++--
 js/components/ascribe_forms/input_fineuploader.js         | 2 +-
 .../ascribe_upload_button/upload_button.js                | 8 ++++----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index d711cd61..8e8b015c 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -11,9 +11,12 @@ import InputFineUploader from './input_fineuploader';
 import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
 import FormSubmitButton from '../ascribe_buttons/form_submit_button';
 
+import { FileStatus } from '../ascribe_uploader/react_s3_fine_uploader_utils';
+
+import AscribeSpinner from '../ascribe_spinner';
+
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
-import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
@@ -84,7 +87,7 @@ let RegisterPieceForm = React.createClass({
 
     handleChangedDigitalWork(digitalWorkFile) {
         if (digitalWorkFile &&
-            (digitalWorkFile.status === 'deleted' || digitalWorkFile.status === 'canceled')) {
+            (digitalWorkFile.status === FileStatus.DELETED || digitalWorkFile.status === FileStatus.CANCELED)) {
             this.refs.form.refs.thumbnail_file.reset();
             this.setState({ digitalWorkFile: null });
         } else {
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index b25056a3..6ee44113 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -10,7 +10,7 @@ import AppConstants from '../../constants/application_constants';
 import { getCookie } from '../../utils/fetch_api_utils';
 
 
-const { func, bool, shape, string, number, element, oneOf, arrayOf } = React.PropTypes;
+const { func, bool, shape, string, number, element, oneOf, oneOfType, arrayOf } = React.PropTypes;
 
 const InputFineUploader = React.createClass({
     propTypes: {
diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index 83aef402..aabf19d9 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
+import { displayValidProgressFilesFilter, FileStatus } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
 import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 
@@ -43,11 +43,11 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadingFiles() {
-            return this.props.filesToUpload.filter((file) => file.status === 'uploading');
+            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
         },
 
         getUploadedFile() {
-            return this.props.filesToUpload.filter((file) => file.status === 'upload successful')[0];
+            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0];
         },
 
         handleOnClick() {
@@ -144,4 +144,4 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             );
         }
     });
-}
\ No newline at end of file
+}

From edeec39548e3f5b581e6243f9ecdfe5026872ec9 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 20:25:18 +0100
Subject: [PATCH 012/197] Small fixes for upload error behaviour

* Change error dialog text slightly
* Only show global notification on first error
* Only create the S3 blob if the response is successful
---
 .../file_drag_and_drop_error_dialog.js             |  4 ++--
 .../ascribe_uploader/react_s3_fine_uploader.js     | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
index 326f727f..8696cc7f 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
@@ -24,7 +24,7 @@ let FileDragAndDropErrorDialog = React.createClass({
                 className='btn btn-default'
                 onClick={() => {
                     if (openIntercom) {
-                        window.Intercom('showNewMessage', getLangText("I'm having trouble with uploading my file: "));
+                        window.Intercom('showNewMessage', getLangText("I'm having trouble uploading my file."));
                     }
 
                     this.retryAllFiles()
@@ -38,7 +38,7 @@ let FileDragAndDropErrorDialog = React.createClass({
         return (
             <div className='file-drag-and-drop-error'>
                 <h4>Let us help you</h4>
-                <p>{getLangText('Still having problems? Give us a call!')}</p>
+                <p>{getLangText('Still having problems? Send us a message!')}</p>
                 {this.getRetryButton('Contact us', true)}
             </div>
         );
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index b022fe27..a9dd1039 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -547,7 +547,7 @@ const ReactS3FineUploader = React.createClass({
                 xhr: this.getXhrErrorComment(xhr)
             });
         // onError will catch any errors, so we can ignore them here
-        } else if (!res.error || res.success) {
+        } else if (!res.error && res.success) {
             let files = this.state.filesToUpload;
 
             // Set the state of the completed file to 'upload successful' in order to
@@ -596,13 +596,13 @@ const ReactS3FineUploader = React.createClass({
         let notificationMessage;
 
         if (showErrorPrompt) {
-            notificationMessage = errorNotificationMessage;
-
             this.setStatusOfFile(id, FileStatus.UPLOAD_FAILED);
 
             // If we've already found an error on this upload, just ignore other errors
             // that pop up. They'll likely pop up again when the user retries.
             if (!this.state.errorState.errorClass) {
+                notificationMessage = errorNotificationMessage;
+
                 const errorState = React.addons.update(this.state.errorState, {
                     errorClass: {
                         $set: this.getUploadErrorClass({
@@ -620,8 +620,10 @@ const ReactS3FineUploader = React.createClass({
             this.cancelUploads();
         }
 
-        const notification = new GlobalNotificationModel(notificationMessage, 'danger', 5000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
+        if (notificationMessage) {
+            const notification = new GlobalNotificationModel(notificationMessage, 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        }
     },
 
     onCancel(id) {
@@ -1061,7 +1063,7 @@ const ReactS3FineUploader = React.createClass({
             uploadMethod } = this.props;
 
         // Only show the error state once all files are finished
-        const showError = !uploadInProgress && showErrorPrompt && errorClass;
+        const showError = !uploadInProgress && showErrorPrompt && errorClass != null;
 
         const props = {
             multiple,

From e0b35e0a24d9fcb05448c6144acdece7b74bd27c Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 20:55:13 +0100
Subject: [PATCH 013/197] Merge with master

---
 README.md                                     |   1 +
 fonts/ascribe-font.eot                        | Bin 0 -> 3020 bytes
 fonts/{ascribe-logo.svg => ascribe-font.svg}  |   7 +-
 fonts/ascribe-font.ttf                        | Bin 0 -> 2836 bytes
 fonts/ascribe-font.woff                       | Bin 0 -> 2912 bytes
 fonts/ascribe-logo.eot                        | Bin 2856 -> 0 bytes
 fonts/ascribe-logo.ttf                        | Bin 2692 -> 0 bytes
 fonts/ascribe-logo.woff                       | Bin 2768 -> 0 bytes
 js/actions/contract_agreement_list_actions.js |  40 +-
 js/actions/edition_actions.js                 |   4 +-
 js/actions/global_notification_actions.js     |   6 +-
 js/actions/piece_actions.js                   |   4 +-
 js/actions/webhook_actions.js                 |  19 +
 .../accordion_list_item_edition_widget.js     |   3 +-
 .../accordion_list_item_piece.js              |  28 +-
 ...cordion_list_item_thumbnail_placeholder.js |  15 +
 .../accordion_list_item_wallet.js             |  23 +-
 .../ascribe_buttons/acl_button_list.js        |   2 +-
 .../ascribe_buttons/acls/acl_button.js        |   2 +-
 .../collapsible_paragraph.js                  |   4 +-
 .../ascribe_detail/detail_property.js         |   1 +
 js/components/ascribe_detail/edition.js       |  34 +-
 .../ascribe_detail/edition_action_panel.js    |  26 +-
 .../ascribe_detail/edition_container.js       |  33 +-
 .../ascribe_detail/further_details.js         |   6 +-
 .../further_details_fileuploader.js           |   6 +-
 js/components/ascribe_detail/piece.js         |   5 +-
 .../ascribe_detail/piece_container.js         |  55 ++-
 .../ascribe_forms/acl_form_factory.js         |  10 +-
 js/components/ascribe_forms/form.js           |  15 +-
 js/components/ascribe_forms/form_consign.js   |  72 +++-
 js/components/ascribe_forms/form_loan.js      | 248 ++++--------
 .../ascribe_forms/form_loan_request_answer.js |   6 +-
 .../ascribe_forms/form_register_piece.js      |  27 +-
 ...ent.js => form_send_contract_agreement.js} |   6 +-
 .../ascribe_forms/form_unconsign_request.js   |   4 +-
 .../input_contract_agreement_checkbox.js      | 206 ++++++++++
 .../ascribe_forms/input_fineuploader.js       |  35 +-
 .../ascribe_forms/input_textarea_toggable.js  |   6 +
 .../list_form_request_actions.js              |   4 +-
 js/components/ascribe_forms/property.js       |  44 +-
 .../piece_list_bulk_modal.js                  | 102 +----
 .../piece_list_toolbar_filter_widget.js       |  10 +-
 .../proxy_routes/auth_proxy_handler.js        |   6 +-
 .../ascribe_settings/settings_container.js    |   2 +
 .../ascribe_settings/webhook_settings.js      | 165 ++++++++
 .../slides_container.js                       |  14 +-
 .../facebook_share_button.js                  |  16 +-
 js/components/ascribe_spinner.js              |  18 +-
 .../file_drag_and_drop.js                     |  68 ++--
 .../ascribe_upload_button/upload_button.js    | 101 +++--
 .../react_s3_fine_uploader.js                 |  13 +-
 js/components/contract_notification.js        |  36 --
 js/components/error_not_found_page.js         |  12 +-
 js/components/footer.js                       |   1 +
 js/components/global_notification.js          |  95 ++---
 js/components/header.js                       |  22 +-
 js/components/piece_list.js                   | 205 ++++++++--
 js/components/piece_list_filter_display.js    |   2 +-
 js/components/register_piece.js               |  16 +-
 .../components/pr_login_container.js          |   0
 .../components/pr_register_piece.js           |   5 +
 .../ascribe_detail/prize_piece_container.js   |  17 +-
 ...cordion_list_item_thumbnail_placeholder.js |  15 +
 .../components/23vivi/23vivi_landing.js       |  78 ++++
 .../components/23vivi/23vivi_piece_list.js    |  24 ++
 .../ascribe_detail/wallet_piece_container.js  |   2 +-
 .../cyland_detail/cyland_piece_container.js   |   2 +-
 .../cyland_additional_data_form.js            |  16 +-
 .../components/cyland/cyland_landing.js       |   4 +-
 .../cyland/cyland_register_piece.js           |  21 +-
 .../ikonotv_detail/ikonotv_piece_container.js |   2 +-
 .../ikonotv_artist_details_form.js            |   8 +-
 .../ikonotv_artwork_details_form.js           |  12 +-
 .../ikonotv/ikonotv_register_piece.js         |  60 ++-
 .../components/lumenus/lumenus_landing.js     |  84 ++++
 .../market_buttons/market_acl_button_list.js  |  74 ++++
 .../market_buttons/market_submit_button.js    | 160 ++++++++
 .../market_detail/market_edition_container.js |  24 ++
 .../market_detail/market_further_details.js   |  23 ++
 .../market_detail/market_piece_container.js   |  21 +
 .../market_additional_data_form.js            | 235 +++++++++++
 .../components/market/market_piece_list.js    |  90 +++++
 .../market/market_register_piece.js           | 174 ++++++++
 .../wallet/constants/wallet_api_urls.js       |  16 +-
 js/components/whitelabel/wallet/wallet_app.js |   2 +-
 .../whitelabel/wallet/wallet_routes.js        |  89 ++++-
 js/constants/api_urls.js                      |   3 +
 js/constants/application_constants.js         |  21 +-
 js/mixins/react_error.js                      |  16 +
 js/models/errors.js                           |  31 ++
 js/sources/webhook_source.js                  |  46 +++
 js/stores/edition_list_store.js               |   2 +-
 js/stores/edition_store.js                    |   6 +
 js/stores/global_notification_store.js        |  57 ++-
 js/stores/piece_store.js                      |   6 +
 js/stores/webhook_store.js                    |  88 ++++
 js/utils/acl_utils.js                         |  22 +-
 js/utils/error_utils.js                       |   3 +-
 js/utils/file_utils.js                        |   7 +-
 js/utils/form_utils.js                        |   6 +
 js/utils/general_utils.js                     |   8 +-
 js/utils/inject_utils.js                      |  23 +-
 js/utils/regex_utils.js                       |   7 +
 js/utils/requests.js                          |  19 +-
 package.json                                  |   5 +-
 sass/ascribe-fonts/ascribe-fonts.scss         |  57 +--
 sass/ascribe_accordion_list.scss              |  32 +-
 sass/ascribe_acl_information.scss             |   2 +-
 sass/ascribe_custom_style.scss                |  64 +--
 sass/ascribe_notification_list.scss           |   7 +-
 sass/ascribe_notification_page.scss           |  11 +-
 sass/ascribe_panel.scss                       |   2 +-
 sass/ascribe_piece_list_toolbar.scss          |   4 +
 sass/ascribe_spinner.scss                     |  18 +-
 sass/ascribe_uploader.scss                    |   9 +-
 sass/main.scss                                |   2 +-
 .../wallet/23vivi/23vivi_custom_style.scss    | 377 ++++++++++++++++++
 .../whitelabel/wallet/cc/cc_custom_style.scss |  16 +
 .../wallet/cyland/cyland_custom_style.scss    | 108 +++--
 .../wallet/ikonotv/ikonotv_custom_style.scss  |  36 ++
 sass/whitelabel/wallet/index.scss             |   1 +
 122 files changed, 3342 insertions(+), 949 deletions(-)
 create mode 100755 fonts/ascribe-font.eot
 rename fonts/{ascribe-logo.svg => ascribe-font.svg} (90%)
 mode change 100644 => 100755
 create mode 100755 fonts/ascribe-font.ttf
 create mode 100755 fonts/ascribe-font.woff
 delete mode 100644 fonts/ascribe-logo.eot
 delete mode 100644 fonts/ascribe-logo.ttf
 delete mode 100644 fonts/ascribe-logo.woff
 create mode 100644 js/actions/webhook_actions.js
 create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
 rename js/components/ascribe_forms/{form_contract_agreement.js => form_send_contract_agreement.js} (97%)
 create mode 100644 js/components/ascribe_forms/input_contract_agreement_checkbox.js
 create mode 100644 js/components/ascribe_settings/webhook_settings.js
 delete mode 100644 js/components/contract_notification.js
 create mode 100644 js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js
 create mode 100644 js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
 create mode 100644 js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
 create mode 100644 js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
 create mode 100644 js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_detail/market_edition_container.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_detail/market_piece_container.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_piece_list.js
 create mode 100644 js/components/whitelabel/wallet/components/market/market_register_piece.js
 create mode 100644 js/mixins/react_error.js
 create mode 100644 js/models/errors.js
 create mode 100644 js/sources/webhook_source.js
 create mode 100644 js/stores/webhook_store.js
 create mode 100644 js/utils/regex_utils.js
 create mode 100644 sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

diff --git a/README.md b/README.md
index 36f47954..e07eca0d 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
 127.0.0.1   sluice.localhost.com
 127.0.0.1   lumenus.localhost.com
 127.0.0.1   portfolioreview.localhost.com
+127.0.0.1   23vivi.localhost.com
 ```
 
 
diff --git a/fonts/ascribe-font.eot b/fonts/ascribe-font.eot
new file mode 100755
index 0000000000000000000000000000000000000000..860c534b024e95a4fed9250ff21ac9b15619115e
GIT binary patch
literal 3020
zcma(TZA@F&^_=(o0fri!*w{40Ha5nAfU&Xh3*dmsh%vzsAb|pdB#vXi1TZmVgJr3b
zR8c3$luVmIRXathqG`XVCau#{st9%K{;W#1s?t`qk<zt4n5Js$)KzO6KkwY<=f-5+
zmiu(?J>MVq>z%iX0QA%mIN03~ZXu&Y`ghZrY_>i3>4V7QJOC3!VG&}Gf&`p}IMl-=
zBw-$wNK^}hM45t%FiTP?qLjffQBtIlkff~O0T;N5^S|s6n*~t>SAYli@e>V=C3{p}
zqP$N1Ol&T?uoKz&EeTZ+K0Xy)T%fs>@MW3{re;?rBYVn!Mfeo})t{#0(R2D2zV|$_
zMu_j9CW78xO7;qF5neStx3t{;bKD^OmxKpqld-7!2O1UOe<$2J7hPTe3)TV@k`J)X
zN9W>i)_!n~a5wpQV<EY?L~&Bne8%{|E55*6pakGv;NBw2&FqYS1uqsdxx9wV<gOM3
z*eT_=Gusg4sS_`^AxzB52FV-qSV6q(%u7-gppZ0*p@24AK{V@5;ZA8Loykag)*Z4f
zVVL>Iq%ex4oo}7_LXs`Xqtd|<nkAt}lK+>M*;W8W&rV*Y&aSI8RO-CCN(G4akZ8yI
zA-s<t;e8onp>eR0+2#|ZQvf>Ba;l92sTfgB>I}in8*AlJ+gaSAq5Q@gU%S3;oPKze
ze?5^No94G3b|#GL>tqKqzv0tl$3#aHl-Pz%J{M=VX*q-5%y}FA0tybBi)-?=5oRW;
zmb3F|@t(J(Be^j&w7$^Mv9LZga8tlWQ~Gw_>SQ1=x!TvaI@Q`bwc6*vM&af_PHJc)
z+0o(^@0s3aynNYgP9U#?3ibl*#l3<KD^ZIEotpPmI|&B7TKH?c`w+MT3dMKSJTLx?
zUlK3y+v&fE##gX~Go~|&VwL!A5?@kk6!@W7NxPpBGk1BBzYBV(1wXA;E{|MZO<$+m
zMu}4Tp8Rb<F}8WFr{~&cEVg+y61ln=n|W<*U|{XFnVGG%{{FSC88nN3vx#4!(uO+z
zrF==IX=5V!D&kY9lNDIrbWY^F^@Kbg3J3YB%oM*Z`Od{aGqdqA+~F&@4<0{5e8r>C
z@b|m?D!%qx0L5T~LuAIzdxc7)m*@AP-LdN+(8_r1Z1Z!A#um}TRrh=`){g4-(_jAh
z{OljOx&GCy^XIo#`*U+!*QGn-<99A~<z`-+e)0BgE-qffz2YbCd|9TGFUnMCeM(rI
zr7=3AHhK(4;1c`@Zo?hef<M4NKtwebVL3V}dO9R7wA)l_V;g!K%l4yM%jb@<!K+hi
ziCNv`^S7hHA;}U<az;VYGU&^UW;EzkB;-_^$pXt+=_WjP{$<fem&1wfYUZ%XPPfnJ
z7bL$%LGUpu8Keu;<WVywN~@`2_tV>yGyb0ox_i<69%t6Qv(in59BsUG2P@I8_6lC3
z*Qpka_TA3xQvBJ(3?BT<R<Zxv;jVd0g=Xql&(vn{bi2iRsLwT#&~<m0P4@QoMPjdV
zm)8O<Bc1-HZfl)mB6Rfo*K2C7j0IXJEMD`4(Yk@d4sJSe-ai_wavpiceQLr`uSq@I
zzBuCZoJ<9;r1sR{+tn8Dgf1L*6ch-qr!B?mcWkC|o2}erGj?_H4fO*{p`({wU0nw*
zhr>&Q^%2YAvF4VsfYllpYiS-kY~eBoBQtHmg%h5G#}`7Y&)Sw|{X+p8$0-!)uW+CL
zWT5qguUz~V_vXG4YuQAZZNyhy9eF<yi6mGrJJr!~iggSP4qGe->h!(>*YJo<&6yiJ
zYihc@`v(o9xcqKaf1l4AQ5OAFGuEd!_&kk1M^#;I!^z>{9<5e5+}0}8*LaSVyF>Ms
ziJEY%wKdx52$|g4Gw$J)W8Etwo>4;sexm8<_-^_-4i63$6}eQ((1#|wUCQ>)>FeAj
z@r|yPXBrQO@s)@D%b}ombR{H2!v_zBqr#zRxVAPNJ!B2e9k0)sJkvN>b!5ERTKbf&
z??|1iv)96Pzt`OS-t*C@E}LB<l1=VZ2i<dXW?O0I*VzA3i9#V7@l`Q#0jqgP1o37<
ze4qPQg1ra1H>H>m!C8oE5-mgl`7c!(kv<K6E)DoOA^b0tG)mwjj{G(;TagE!K6kn#
z@J}eBM}yisH(sRweRgKAt8_c50AT+UsgaKKPlnQ1Mx<gR#;ojWC0R>Z8dGC9^$mF@
zI3vpN$807WpzH)QgQcdS_uNdc);PQj_t1<%9K%iC$A|e@$y*5?U~dPtTvQSw4_eri
zV?uiUq!p7S)$l`^&J+Ep3@ZqJS%#JL##YI&is%U$*1*&7J60hm3W;JOP8Q~<(EEuD
z^F$wzVFkgPGOVQ1uR(@YM87D*8t}n`=wd9DI2*5@OwKR;w{mhgo?1*K=dB)>`<rXX
zCo%FQGK2A{i?h+x?$Y&16hjofbt*m|PeqsF=d5Q}tlhC>Z!$UWf{<JiTd5e1Q*q2n
k;3$>IaX1H7Dw|hm?4}|*3BA-=`Rt;-l4?kKH@{)}H*B4I5C8xG

literal 0
HcmV?d00001

diff --git a/fonts/ascribe-logo.svg b/fonts/ascribe-font.svg
old mode 100644
new mode 100755
similarity index 90%
rename from fonts/ascribe-logo.svg
rename to fonts/ascribe-font.svg
index 2a9bb79b..2628dfee
--- a/fonts/ascribe-logo.svg
+++ b/fonts/ascribe-font.svg
@@ -3,7 +3,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="icomoon" horiz-adv-x="1024">
+<font id="ascribe-font" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@@ -12,9 +12,10 @@
 <glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
 <glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
 <glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
-<glyph unicode="&#xe805;" glyph-name="uniE805" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
-<glyph unicode="&#xe806;" glyph-name="uniE806" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
+<glyph unicode="&#xe805;" glyph-name="add-blue" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
+<glyph unicode="&#xe806;" glyph-name="add-blue2" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
 <glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
 <glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
 <glyph unicode="&#xe809;" glyph-name="ok" horiz-adv-x="1348" d="M436.706-64l-406.588 399.059 112.941 105.412 293.647-293.647 768 760.471 105.412-105.412z" />
+<glyph unicode="&#xe810;" glyph-name="thin-cross" d="M1018.389 944.57l5.611 5.611-9.819 9.819-502.181-502.181-502.181 502.181-9.819-9.819 502.181-502.181-502.181-502.181 9.819-9.819 502.181 502.181 502.181-502.181 9.819 9.819-502.181 502.181z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/fonts/ascribe-font.ttf b/fonts/ascribe-font.ttf
new file mode 100755
index 0000000000000000000000000000000000000000..a66d8f04d7235861814ad5bb234306b9c4145e44
GIT binary patch
literal 2836
zcma(TZA@F&^_=(o0fri!U<?hhjg4_2U~Fvs0ytnYVoWduNT9$V$-^;V0+<+ggJr3b
zOi?GulvbTURXathqG`XVCau#{st9%K{%lIMs?t`qk=nICn5JqU>Z-MkpLg!_b7MMb
z%eC%1-=FW^^9%?8MQ{yxaGyTY)Le2v<0Z};v@b*##pS)o-fsY~is;E%ab=lcDbcG0
z3uYJAW+DeFe@XN;0L`D~V&cWJ7r*x`iN;9opCd+@y_EbFJV$iR++u3A^Jln4^e>1G
zEF_|$_J=wR(SIk}x+tzLg9YmW3MmFym&C=`TlF7YB-%|e-ds+sq$p2Xy3d##c-0s9
z9H;@f7rEaP=XMt2U%`uoOfPRCbGdH?0rpDy-OMfodD<jny~r)AjId~ISCK3Wd0DFp
zRI)`e6aYs!f_1NOuQZd+WMn(*9{H9j%zRv-GD&2e@14a$(k;p3asWcBtn^6p|MD`s
zDxmC($YHg?Zm2d^8@z^U6-f4wWXA^~e1IS01BGI#aj=!y<>O>i00y#hYE1%}m{3dR
zjKJ+%8<nDM8h7YXd255O-`q6KJv_<35l>Id@jDN@<EG6`@&lP)^J(%^0gV7^?7$YE
zi?iGGoUzQzd7J$L3J#l#Yw>juWhSnkv-4@`zPGI_u{AQXx!l#Yyg4#-TfpXu^qqnA
znLuD>ePCdHw!M9JeZYau!tJ4)*2q?(tIaFjuXvlu@^!N{fzk&J90WLs2L%IGqaKY0
zE$^#!5)OF1@K<>6A#g`js_$rdUivAYk}mVR>Ay&(SFw#Vr8BBxjr48;Usmf>_>oji
zZ$2Ys?(q_T56Yk({M4;n9l5$%zAm?e3Z?Qr`L6+`==P1iz8l-o==SwU<ob4W{`HNa
zp^ew)=XW*+2RC-+(JcMVCVho!8yfhR^EH{Jjj80DNKc?aF<^DmIZ^5^BjTH>aFB1x
zT=Bbd>|726nU7E4E?>oc@Xa&CS3OD%f448L>g%`#Pz*LWMsDo9SEx35dHxXE9s3Rf
zb;e_7FF)5b)<h3i+xNvpCu%#-fBC|tg+FqOgX=q&F72!j=3qz9mAjLZcdzv1Ag@oq
zbmtBilWyQa=~H*UF0;v3WhT_05|(Fal+LIPTrdV#;CZ+McVP$q0RIFDwOE9e=%noF
zkhsup(`Zc{=xr`Pj9NXPJH|$@L8~WWZHv#}iAIO4OE~G71lh`1R&Fw*u}nisPOX_d
zu$t9wqI2h8QGIkdoanA)0bA^J`+R;uj%yMGALEikx<D-+Efb>LO%1!B-j<y6|8D61
zru#k4Y<Oq2n;bbhc=--iqh0G2ye6+xE12y2gW2W$vxONw_?fNh@VCP~OO`6#?5V!l
z?cn)Ni}l!mYbtK&?Jb|_?;nUnU*oQB1lq>B{Vl!L2FFzB<o9pZ)m@tiv`<;Q=F8&^
zL&qK5T>O%MJXqsA@s#`Al(A8le5P|{%;!0q3|>nfsKd8wE#4_ZIP54W5L{1MinZ_9
zDk^QZ$_ksQr-yH997=^wUUl{K9Jv|}r-mCNmg5txZ4&{jH89cEI&s{>WsXMXJA%t+
zJV#G2ht{95r55}n0UO7uROzqqkpFC;{fw_t`WE-rp)qUuRJm=;S6dr-KOTw1*)BiV
z)pd?-3=NN3EJqs3d<Cx2F`Je%H+R?7^>_~t8^>|=-I~DxpEsf|`iX90pv>s=H2WMi
z4fRcDM@Regdf|9SyU<wYIaTQnHCm?X!qN72vD*=<aO*F)N7qjEu8n!djZOHeuB+?2
z>6<t@JW^ET(x^ipRoLxvwSP|E<gQ3>_N+bCd_0V=J{(*P1-;{IAwdiuJsK8;V`8|z
zJ}e%y1{Y5^=3HKA9<Dht*=j9)!ZvWC!PVVw;d<X|ZGG=qQ8Z+$i$}7>o$I1|ZqDqg
z&HM)YUaC<jL=(Oy#V=zm5Ah)0j!W-z|BkbHkeeyRL<r78)RJl;3dnz{(Mj~v;pg%L
zKPQ6!xtg9b`beV8Cgv;h;Xi(Gz9jH3D59Z3>z!LK(f2+J*>sg}C;b6n-xGO}jr>i9
z(r8AaKO0fzW#1~vddl*c8KY@$DUk4tq~M=0NIpQ_4Q7VROGoqEOjBzTUV-~)#vo4M
zHt*xZ{DK^<1dp)UK`WP)OehaMY%4h-O+UF~vZfY(r0{v-pHy%a;jbvTnr3W`f@_E$
zS8yFX3BP6k5LAW4sUS%f=RglXR&bv9Lkg}Ud|ScQP!3HBt|9)@3a$emd?>C&lkw?T
z<4j^H1tP3K6p|Em8e;U#o`D1`L25LXT!|-^tR9yeMoEw)wYV&@f``VY`*EB+j?Qpw
z_UQ#N3Bwd*mhxPnjFOLI7^3X0v$3UEQcT4zTBp~nz0pK}BC+IxP__oJlE)ZT!_pTa
dMeri=reTeqy;OAq`f0OzUG%QlKe_+0{sYPEW)lDa

literal 0
HcmV?d00001

diff --git a/fonts/ascribe-font.woff b/fonts/ascribe-font.woff
new file mode 100755
index 0000000000000000000000000000000000000000..7d18d089b2623098bedccc32e670483ffa0aad7e
GIT binary patch
literal 2912
zcma)8Z%kX)6+h=a{{ce{PHYSfv5k#!AYg2s;RP^YQesRn1W2I3Ac=7dm;ffmUBl8;
zO{S<5q)MwzpsJlBRcP8Ls(t7*l`2C0voD)ct*W$DO{8}12d1f-Hf`0~#?L$V`8k13
z+H$RP@9+FS=lZ_;-m|BIK|r8Ua2^We)tKcO-ak&Au5SRqJd&PgRCGWiL>D4UB%39E
zg3)ex_x+j3GLyYeJhNp~JTt#CO|stuX#T_~e4y;tv$4npQg4#JiIMTuAH6tBLXzDh
zzLJsAQ7p_Zq%H&G6AOMu9lykl`9zfL@)>Vqr2UCbvk<vVdGlEvvJ9+Pvlv;3k?c9j
z{Vt;qYVKWFN-U?S-@rpVo)EA4244m>0QV|KRl=?8ihl(G<<un04J^)~+!_GbE#`MJ
zI}qTBNQ^lZtu`6USqPPrj^T2enN>NcWRF7HDUL9LZ8v|nIFrs~WIx+3#g;kDd{L@0
zONyVYlqUov+aftyR>}d0&2kBk>iEC1%#I4EdO8JIVQ?5KOce&fP@w|J5tJNwKZy77
z3%svzEDr}8nH@e(K6zjuFPGLVl8YI&<jxq}y17;su}|SPO=UON_?q=~^X!8Y{5$dV
z_$<Hupet@(U#B>bd5=$1oKmO*P-8nb`rMquuIEff3nw%*i6}blZm!YSPMn3Ldd|V8
zrMp5)XJTV`czvm}b7_5e@Ro=TrRm%KtJ8k}^lE?q>P&0v%xb?A8^l|KIjiA~L}!a2
z-7Wo)>Gs-Ydje%2G;k2$ARZJASb=&p8MM5w%0(FPTK;eF&I90%s8m1H^1Sp5J|$h^
zchY~6%x_`~XHI8Sg&OJO1ir4;sqk~Dg3eb)%G}{4{tg(ShMjlJ^^xnV@nO5|)F`#@
z-TOD76y3Vs+k1U08r`}U4qw}f&b_@hIJoxq+}!rsz`)w}99pEm*`@DLZASzD`d&-s
zX=f&TU8E<_pg6F;>6|Ei8;SXTDIDx|Wuf>TId`rGT3L)QVUsWC?tT9Z@#T+7!{6=8
zt9qC>4+_B!$0&@07sLv)!1IUD;oNr+XlJ|*_UGp|jcuZrtLpt`yaTlz=f3^v#rZ#S
z3j?d$7cXwF4&>JM?kk%U6Ps7Mb1Sb;zjpgJ7n82zLFp^cUR&m~*Oa-?{uHq~i=%W#
z?cjz{xB{=hZP<iu_yha{B-CO7mZ6KPr$gdKhh3vJx1-Qdau~IGK6i{wf<db%WmTiE
zsRK<;*_JTbnMK*lWGpdT&}7t*kxOf#2&`wdhxpw2S4<y094_=!v4o8ddis1#qMX+(
ziasW#fb;-0dbLc6@@{I_^C>jug8%o1?%(t#uPdA0RpFsP&URjY1}o5^6-2=-xU{0#
zu|JtZu0PwD$&3HAmmmH?sC&^`uA4d8JF^uy*I~6C>vvDa4Lv<2(|vvY;pki3)ir<1
zXjfBXkFC}@89edajq2(b#{I36R>5*<tah-?$<4+uHjM=;UB{pHoSih)>5|WPERXuU
zXOe*zk_W2s!z!yVX$Xa!d3mDyNo%3@BYSC?-CkB|H+OgQ^>u@(;EAj5?(QR3L!s1A
zUD(<--rO?ox7qyTEzRR?RxWciJl7srI_*7rYALw-ygfDFH0-x?oJy7c4i7b*@wcA#
zl}S%=9~>IBl}wh{M}1XQ;ZNh?aGX)e+0M?hj4(JfVznNrHTv@0BcpaLXKCoFuI?5N
z51GdB^2e0}{XQYAF8H}_yx(Z@c^iDr%G#RxGb1CtdcD}z-YV8rdry{mf_2u(>QJ<`
zHPYn_mU{H(JtHe8dsarhW2SoiO4r%>Z2AU{3=J0)xHanF=cNvZ-0h#!H@GX(yWJ~K
zH?)QD%?AUQg8^Y|B`8KhM~{Xg;;~4mrY00QW(zEws>_8u-!N2pe4^P_{Di&#c&)pu
z&&u_D(%k&Xi;;*S+g&`IZSHI*J?ECpj@rVnvG=7K#e6j5TT=WIR`C!I;H|jyDfjO<
zyAN`AN+B_#D<8FFnvWv#-)eLc{dD-XJmJ^G@V`>iEW<|{<!)lJ!k_*9$LEUt|AGR#
zG-!Nu^EFLwWw)#Rbh7UadY{OHeB^gB6h|`>eS}0=lzpQp8!0PeZj2||P*%bjNx@&T
zm12Op3oH!FLr3?yg>J10cmwXD1p_#aTfC1C@$+)FB0R$G4jQ?tWJa0vu%*<5bo<FW
zCR=LZB}LAY{Dgv4gx^rGn(o+21#3tiSFjGAgx|6+1XVssN=cK&9O&U^3g$^Zs9+W0
zEd{Hg1nL#6A^9^3)`1T`i!4Wz@u^tdbYd|D5m<&OBq{3@#OR$p4GCC;)JQD398WCT
zylxMSkRnNDaam;pFI}6S#|iQ{Hbb$QXXYbG7@{OIROdWZlzbe=AXRUhi7m#GkyPx0
zZED5V6HW9b5{qsKW_th|MT}85to#V1XuUwPDOjPohq_Kc9}(-<P5%}9lKUUyKM-wc
A-~a#s

literal 0
HcmV?d00001

diff --git a/fonts/ascribe-logo.eot b/fonts/ascribe-logo.eot
deleted file mode 100644
index 039f93f5ee7157c3b1b51d3a5f0dfe90dad39a4c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2856
zcmai0drVvB6+h=*Kft60HyA@h?8`Og6>$8*mp3LO#suR42`;dZ#Bqo*0ZhQzU}>r(
zTDA!)CDSBOw@i^LRP8VNSEZ>`5o)!+Hl<rtZR#VMy7rGwQ#EPYq-}|>cfRZE#$?g<
zN#Fg>Ip6QRzSlhsB>>+y03dL%zaiX3CJB%1mosdxmGldrJUa(qge1fv1q;+uut)$S
zjKK^f;3~{R43<e!0a21H!wO*;MgTWB!KGlI)g~cxSOPbI2iM6{M?Ix4>W-1*UFzrK
z3$dlj=x^^5sG9iGiP*{#jb+5Mu_!UWc1ioa-$#gF1<>7{orzs6Pik6es)*+Ovm_|D
zmwAW}5MMjHkY4Tl1#S_4k@&XxR6M5tk?yC&-y`0-5L;aWD>f0&{0ob*g_+k+6h9{Z
zGxG6+rPNBA;-qF^`U3FUQoIXV0Pc0}Hzc`}8}TpT#bSmlXh>o2ZvlX>iut|l9t3#m
zG?`y~h7;IF@y0w>(_C)k6;w57ppE1PD5A~fNG5z$oXupjOo?bvXv}_5sUf{Wy9h|A
z(gGPB4yj#%JjMNAS$2;M@6pZy)|l+38gq@wYpT(JY!AwId=$h-_ys;vITjNKTiHE6
zNjgPfBCUG8MIsdo>Pek3xbxaZRZP5qyY#7gZG&&x+_cO-InKYE%uLPlyHEO)md#DF
z1KIca4B4rK762{wV5`r`*+nB~F1K=Ck6%K`Av(EMUk`Csk{UTXpOGJWJNi;v<Kvr4
zeSJ%t<D+*Z^i*c<N7gTObzNGIMAj3Xor(2`13l86(L8E=E7jNGl^<4qz~&0Extu^<
z2OS&)IEV)&6V{*+%_cqXtE(p(@MiHZ@xc?|8Z?^k=y_g#lTXW6_`S@ZWy@RG!C5j{
z%>kYKQ3~&A4I2DhuAyDe%Gn3J%s+r~XaYa2Rz8n>UajAx+e3*``tHJQKsmm1YiQ`!
zPCUMIGaSCT6Q6r$V{~-mow>Q)jggU!-8r<%e--7&s1?z~-z!8iO_4zgRpb}Yq$;qy
z>71x}mlN}BC>#{3GE@AX;yWJ$jm*ZEu+3L<pFMkq`0A&j;jj1k)qLZ(2o8YAZUEYO
zuT*34^86vRJN6v}S{b*UZGL{y*dn^Qx}kqf^`gG_+`oTvdHxUF!pQpW<;%P4Bl)ps
z;M(??Guzh&@*{7|{OtaHZbrU^2j#C_g;=Ij2xTg?KBX+qvN)Ylk)FN@xCTFl`>+kW
z@H_Y$$f(B>tipPVo(_o<?V?U^=|Qij;xOuseEt}ly(YbpChJ;#{$4aY6fDt%vq*}T
zxxB(+MRU21K=pbnSztM9UBu_lzY2YNIqK0>#~ilW>Gt{jlH%7QNj@eegLHvf-Fh~O
z%4+J^{q(lxjsN$8?q77jyFTZ>zQ#p{96h{p2W!x-_ex%iw_Yz<?E9VBmH2asncetz
zvHI}0Lj#MpYD410P+})=uGc2CMV!+~)8JsmrQzX7IQ}+weWR;mqTk;-C^S2!gU4UF
z-Pm|zs;hI_=Cxj#Y#!})aI?wF{>eaX{jrx_XQ$0AhUHg#S0;S!)60Py%P%(K2X!{@
zv?&yF6ctI%muv_0ABvS#qF7ZaS_TIAqb;N9;PLCufq{nWp-_6PC2Z@SYVVlp5`?a)
zj`pc;8<#y2p6dxLopK*JxfEP~RZP$O$Gb$1(`Yh}@sR&?SLZ2TmHaL4SBEBqis=e*
z!dF)p{xlg5Ct0sJ+t+uNbqtP0ZMKHya$k`%Iw9&gtEa!Qalm_c%sh#!AJvXTeBQ9O
z<mZN|NV(bP_V^sN%}qy7N25bVqtxBgDYZ1ZPgJ>rEw<^#P`tA<*6#>bx{T*t(X|tU
zYZLBC^HKcT(AW3f%x#R0jhB=-b=u(Pm3F(5?VmEYxoh%!18XmPx<mNZlabY6z&p7X
zlwzSHM?x{FEf#8O3dP!lz{1Ivyvg&PvD#y2+J&+g#K^H`XaBH`8~nJv{o^0TVy0Yn
z$#5>Yvwd{Wt=T=TmEU0hNi9mnXu-GT<Q1&rAsN6sN%>RmpGo!}DD4xWzvNtL*FT_y
zE<3dk(|>%FAK9y@+$#DZv;Tn7NKg5PLRma3Q*jW_TT<t#M9Epo@l1{J)VI`;=&Y>L
zU$T*GfVLm3iiUySU@N^eXW$KZh*k{X6z=doK18!DW+OJR`%Wz%k;14SBkZX0Am~Y!
z%aSAdyh`&#`&C*)^i`GC(z|F@X&uRjRN4S9!8-e=Yl=x?q?sJe5uH$Jp6G6s))4)Q
zN^7Y&6I5D9@-dY*fDg8l@zg>pwYa~+i_R>sBvXrm+v$3KS@&G6=L*MW5?AMA%lqra
z=OTlt#k7!^S)5sprDrY*7uJNqcxsqpb3#xlDbtiif{M&VrO=E)n#PMHy8vtS9aKux
QVYNhc(yFt{>3_8U0NQ3t`v3p{

diff --git a/fonts/ascribe-logo.ttf b/fonts/ascribe-logo.ttf
deleted file mode 100644
index 61cdce038efc5e33c752040e0e88b55930f8ae6f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2692
zcmai0eN0=|6+h=ae}G91ZZL+1_~RKvAmI25KfW;;u}v@zkU+r;NgT&9CV&Yz8!Szg
zM9MZnrDU1}YMUw2gr@yP|Ee^VDngs~*QRu<s!d%RO<ns(rm31VZPK>H&pY?|xiM{|
zUF*K{JKyKrckg`$1b_;-2|Tz?oj&HNd|7jxB=6I_kXVQ>)lUBI9st%8e<l@QSt43R
zJfmf)`L)aH@BJZ4{3?Lv-fS{{sXDD{Csi5g{j(&fwpV$G4-nrlyO3S&{yA<De~I{x
z`Aj0N{h{V9;_nl0UWl(Qff-wfXZfv*@rC4@C(EA_|0(78{!(ToOLfxFF@G!Y>Pox^
zY5?v{?zbelTcG$i@M1Z$D;Y>-?;inxC*}NJeh&gXO;WP8C=RO(ST;86Nmrn}Y*h~`
z=peZc%7CLEg7ryxK9|qSUe+fdW6XbEt0KSBxClsAl_fF`K<t!Fp4<IjS$>ZK@6nqB
zv>EIMo6%<Q8f+?%>_N$nkAwIaKgY)k$BN=$E5FC5$)^kq<kh4#iR5BJEx9uWciz~j
ziwhTVmmYO*Z163co2J=kC;0c%x!5ef`)n|6+T5f#kpC5*qd2wD2B5}1Z1*`iyP)Tc
z)n?A?@rx)r1Si+->m$xgQaxwqbJ8Pk*Fa`#Vq$Y?U|?x;V(hMnp4!}l==$ZJp3Cde
z=z6NVJGCBlphvtrR<xSf$_#XQrAM_NFkPu_p(jw*K?4T?4&p)4fHu^l(V*phjZK6B
zZ<YT7A3g)_h)VSxEze6o<FnFLelPb|$@C6(ai&~ebwDG1l)?LIoeDpbZ1l$SQvM+?
z@eiRITEI`MRqUhKSNm7(_EDqMzPt1_pp@9TJv@ASCz05>6^Y#1NzA>sF*dgG-rU^o
z#^~tA?i`w>zYEe+R10X}@0VIKPl1_~x=1gfL2+Px(>_u9t|sQ|rEpN{%0lsba_(Xc
zL|Ke4V4JV!KK=S0;_IK6hQHaDSM^oiGB^MNI{|3ty`s(J<@rNsckJ5;v@&ixd-=sh
zV~gnK8i)TA>ql+>`Tzd-%KRU>h0*ohD_3^cM~k#Cbbb5m+3oA0BIWhDw;w#<lG1HF
zD1GTFwPik~rp$%br;^oKm7qN;fD@+RI{XM8z&7l{@8KUHp%yE!4x6ZY+9Xc23mUDd
z551n6!>HBs#cgc#8nk*+Hn#ix{b+Q^wuH&fB+6dK>Kc<7jnx`5YSNl10_$1rBEGo)
z71QU3qX}J&EMdEyPM^;&%6Uzq=wng}NC&9htz}A-S5w2zr?<Tr{F@89f6@K!rb7BA
zn~MTD`gr*a+R(1`ie8hqNh_M{`;*z_`U{O2-S|(T{_wZMp+!r*E_HG^wG%ksZ?Sen
zoik~}&`{0gk&$R5@h*2`qo-?X(BD2}ZFS59PrP=gx%p<Sr+dcYHD8@>9qV;)v*|1T
z=|Dr%@mF2vW{hpR<=6XHrhM)*%YmEAFE`@{jTY~WAslv;m5I(*EC;k73bl2DP**FM
zLLvTG+gLVu;)XL6I&vc%&W^W5EWNSLu2_%N+7s*QjP+W${L#o<UtsC9`{=2q;QH%A
zcHTeHBXFEbm3xYZ{AYT)Py6bmZ*jjqG-a)ssS&1pjg65{(ve7-&6;xq1LxSp;P|A)
za-_A|SLU3Y611GzGuYf5@*W;HPUGrF4Wm(?H=?fii7pncHu~HipQE9*<=C0Y$zi=-
z?Ct9o+nU`c>s-M$%S>}P(cK*%bOdW%`U|efwUa|@Q|@WwG5k_DF!0^n9h@AWsHkvi
z)WOec?RL4_zvS+4*QH;E)?W4WhVh+eqpQJycX}--#=}RChT~#KJlxU}j(1oC3#ZzO
zAuo8w8;+mtv{t<&M31*R2S+U2(8ryfAO9d8Hx#-{M+(iI8=!M;&hM$s{093@s!=RQ
z6TT~@uVNz)=>XnMOP_H6PP6+!9)Ge9R-CWw`4?2sVW;t7_Ro)tl--K*siF@u`wqy1
z{N!&aR3-8f{W(Y!BPn_SeIZhTXKswAxusCTc}c-vFiJ5%JqTvmLq~V8nQof1@Kbn%
zW(;5qcX%HkCM~O3k4M;fr%|j(W|W5>c9eP$v?MEZ$q~MwV4kpF!79Sn6s)Fu(Wqbz
z$%hrJgI8dkebZItB+-+mfH}e`1@nY^6|5rsnu66(16BoVNItG$9r$27oyaU?GK-Lg
z1Y}@=W(F1~lglgV%%aupbipJfVHsA)fD{zRO?R8?g<dZdjwe&s=HtthG)aYCgL#O<
z@(V44nZ>L%m0V0N$Fs>x){AS_p+shcYI8zR&Yh*~DGIYFR}_aV(Mu$|2y65lk{cK)
PG(a`d1}S|d-^Bj|`x-nj

diff --git a/fonts/ascribe-logo.woff b/fonts/ascribe-logo.woff
deleted file mode 100644
index c563df56f6aa31dfe5d9ae9f0acce0d0273ecef8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2768
zcmai0du&tJ8UMa}{m6qlak1m11V66hyhx1Sm%MEj9EUh23B*k@0vKZ)ha?V(S;;6>
zL1UW|B$y^8>edNqil+UQ?w?9iQ=w>&zc$gXsy1~Un!5H6rm31VZPGUI^}cg`T}+F#
zV}0lRzVCd`bI-%CoCt>jfm+r3P%V$&V*T^liIayt09ZkD=NQ$zs5zQkOe~XZj`&lI
z>f`U<O(#~F>|NrSE~DD?!rDcW{R%*Hmy!CLzmLtO5*KKi*##IGGAjQZ2}yRF_$EdM
zd#z_~F?W?@KO_DKqn@AQ)<QPP^d1p!W~BYD<_C+3s}#4A#k0y}#`dMeVv1y~6#LtZ
z-Z)<QcsaY8qk5UYq8?9(SJ&WOPy=vpaK9z~PI1J)ffp-@FK<{|&M_PWcvQ*n74{&=
z6OjaoO3f+*ISQdhnq#<;dZyI~D!HyIS}Bfx2-ZiHg?ynPTUj50jIr=(y-Kl=C#XX}
z(yEcY6lENM*d>R48vp;w3VY;uk9~c#>Fs)((Wdw6Z7PuLVabjU!}t(C#fJ*V;&8B4
z*yA%~QvrIiYSEfRGBKf+%o&3_w>KIR!g<`KuHp6u-@dtNntO7Le>an#nd5h#3}#H5
zo8$)yzvT1erye>1)Yy-HpOdo-I?iY?b6!tCMA0EQIlr%;I5SCgoSn~054_!>?AGMu
z=5i>syg503M?_D3{$6bTVsG!o^;m2@-P4m^k2%mI-We}xO>SjF-CpTI{d;V#T(?*g
zDC?ks{Q&!Mzo<tW>d>gy^1kL4!hkm_e~$N`0N1KgeM8Ih(oguDbeZ4F|5Y-*h25Mf
zUr_DSNFQeLO?8zDKap&-uL@G(J}>e2!2s=SpJS<xQeFNp%I&8@seE_&XFw^rb8}?m
z=1wxXb0ZqPv6GyCXJdSP<DL2W-Hoxajoo=POMe%n$EX%i&%ar&$t(q?Qf?x>fO^G%
z)lK_EsoOxzms8=O+?2WE_vF~69B5=dK7(z(k^9q^_YmLsG&TIqGjUa4#I1mRAg~jF
zcHS%6OkSQpfOf|-8-Z5FZD$|9v}kM*-CXm?e`W?yJ8<^D-@ml*2X1j}efQF(-Sx53
z*gte_`}FDUYeS`x*X4hB?;e+uZsLCFb62@8vnf|)CbT{^EYI2`?NI@oFa_7(dvFi7
zVHbV}{{RWKSd9(XLfO+MaiU$&Xifd-_0%0it&T5kW20BE)zM_L-xnA_qeIpuOnN3!
zwlW&(OlCA1G^Es`HIoNcv)V;`Y5yy#PY*{6x|&%)znxB>FCfZsO`_;yQgTQK$nVy&
zNt9Pp!_KGIUvmD{1$}nW1MZe$_!gUs969=V`3&07uJwvulea}Hn(WU8v&;Dx3p2X$
zpF-oouSbTKER9v^<0I*v;MoC-^+?P)o6!#s*IgVPjYX4hbJsU|yQc;N{$Xo}V>W#3
z)mv?Cug~=M%v!wW%hMg>eGYCeb15(#Y-&0Bvg^#Ov9oIBwSm<spZnBG@b#4!+wi?+
zi+5HZi8v}MMCVJEecBI%`UXL0s25B_L;T^+@m%=Wb?4Af>-9(^H_;ij^v!g2&-7ZY
zy))fiGkq4Wa40(8A6!1^K6GL^y#AVyTL?_{3LK|W<sajLz^UGzlfDM&Yuv97Oj+w@
z>x3y^b940LOf;HdRCgv6I>QLV6LE{BwZq`6aK@(uEob%&wzUm;4^9}T@#=?7V=<pM
zs;>S~)lAG_^tnAgM^i`p;ZyPWh)yT=_4kOKZSLa@u5hPiwk?wE=}8Pa!u2lQIahq`
z`0(14d)jyyKd%afUdi9W_{3y&wNs-Ge^PI^%hmoRe~Y^&{bFeCWlvuO-+D53H5~L#
zuZ6`#<j|o=LOha)w6{kRN36lc6P+cO=R6ZlM^ATIYhMszM?0K@qZV%Xqpq%xzLQAk
zi`8YK#p2F{=$xAidulVk!QM$Vij`=>x24QwY~~>o#5)=3WA5J>b|1*?kJiEJvo*c{
zf@(VK)IP}l`C(~fx1xNi=n-e{fZWJVenX))S&-;YL$c&anFr7nJr#Lo#(1JFWh7jX
z6#N+*$p@$h<^Kru<kKB&rkmz8{1_gf8G|^3JG_sNkRr=jhpp_qQ!8a8GfJm}9VH(G
zEy;>ia)i$*m?s=iu!`^%1*_>^G%8p_@(~4B!Ar2t-gH$ZNpv(*#2n$Yf_cJy3RV$*
zRl#bg1FM2HB%e@l75HE~lgut=vrCYHBxGTcC<{yR)XHimyJU4cT@Z&9tiUQM&;<E$
z)7|EJuGMpe6RGr-g~SR4O;Ms(U;z@a@?6bub}45~r<PJHiCpS}_57N3IGG)#+?)`W
nW9KM(n%peO86_Y`;{}qPhc)Vl<pM^F1yGK(LCQbLSMmP<bs0fN

diff --git a/js/actions/contract_agreement_list_actions.js b/js/actions/contract_agreement_list_actions.js
index 4993b129..1eedf5b0 100644
--- a/js/actions/contract_agreement_list_actions.js
+++ b/js/actions/contract_agreement_list_actions.js
@@ -22,8 +22,7 @@ class ContractAgreementListActions {
                     if (contractAgreementList.count > 0) {
                         this.actions.updateContractAgreementList(contractAgreementList.results);
                         resolve(contractAgreementList.results);
-                    }
-                    else{
+                    } else {
                         resolve(null);
                     }
                 })
@@ -35,13 +34,13 @@ class ContractAgreementListActions {
         );
     }
 
-    fetchAvailableContractAgreementList(issuer, createContractAgreement) {
+    fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
                 .then((acceptedContractAgreementList) => {
                     // if there is at least an accepted contract agreement, we're going to
                     // use it
-                    if(acceptedContractAgreementList.count > 0) {
+                    if (acceptedContractAgreementList.count > 0) {
                         this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
                     } else {
                         // otherwise, we're looking for contract agreements that are still pending
@@ -50,15 +49,13 @@ class ContractAgreementListActions {
                         // overcomplicate the method
                         OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
                             .then((pendingContractAgreementList) => {
-                                if(pendingContractAgreementList.count > 0) {
+                                if (pendingContractAgreementList.count > 0) {
                                     this.actions.updateContractAgreementList(pendingContractAgreementList.results);
-                                } else {
+                                } else if (createPublicContractAgreement) {
                                     // if there was neither a pending nor an active contractAgreement
-                                    // found and createContractAgreement is set to true, we create a
-                                    // new contract agreement
-                                    if(createContractAgreement) {
-                                        this.actions.createContractAgreementFromPublicContract(issuer);
-                                    }
+                                    // found and createPublicContractAgreement is set to true, we create a
+                                    // new public contract agreement
+                                    this.actions.createContractAgreementFromPublicContract(issuer);
                                 }
                             })
                             .catch((err) => {
@@ -81,8 +78,7 @@ class ContractAgreementListActions {
                 // create an agreement with the public contract if there is one
                 if (publicContract && publicContract.length > 0) {
                     return this.actions.createContractAgreement(null, publicContract[0]);
-                }
-                else {
+                } else {
                     /*
                     contractAgreementList in the store is already set to null;
                      */
@@ -91,21 +87,17 @@ class ContractAgreementListActions {
                 if (publicContracAgreement) {
                     this.actions.updateContractAgreementList([publicContracAgreement]);
                 }
-            }).catch((err) => {
-                console.logGlobal(err);
-            });
+            }).catch(console.logGlobal);
     }
 
     createContractAgreement(issuer, contract){
         return Q.Promise((resolve, reject) => {
-            OwnershipFetcher.createContractAgreement(issuer, contract).then(
-                (contractAgreement) => {
-                    resolve(contractAgreement);
-                }
-            ).catch((err) => {
-                console.logGlobal(err);
-                reject(err);
-            });
+            OwnershipFetcher
+                .createContractAgreement(issuer, contract).then(resolve)
+                .catch((err) => {
+                    console.logGlobal(err);
+                    reject(err);
+                });
         });
     }
 }
diff --git a/js/actions/edition_actions.js b/js/actions/edition_actions.js
index 4bdf093a..3f659524 100644
--- a/js/actions/edition_actions.js
+++ b/js/actions/edition_actions.js
@@ -7,7 +7,8 @@ import EditionFetcher from '../fetchers/edition_fetcher';
 class EditionActions {
     constructor() {
         this.generateActions(
-            'updateEdition'
+            'updateEdition',
+            'editionFailed'
         );
     }
 
@@ -18,6 +19,7 @@ class EditionActions {
             })
             .catch((err) => {
                 console.logGlobal(err);
+                this.actions.editionFailed(err.json);
             });
     }
 }
diff --git a/js/actions/global_notification_actions.js b/js/actions/global_notification_actions.js
index 2bb8d6e6..73aa9815 100644
--- a/js/actions/global_notification_actions.js
+++ b/js/actions/global_notification_actions.js
@@ -2,13 +2,15 @@
 
 import { alt } from '../alt';
 
-
 class GlobalNotificationActions {
     constructor() {
         this.generateActions(
             'appendGlobalNotification',
+            'showNextGlobalNotification',
             'shiftGlobalNotification',
-            'emulateEmptyStore'
+            'cooldownGlobalNotifications',
+            'pauseGlobalNotifications',
+            'resumeGlobalNotifications'
         );
     }
 }
diff --git a/js/actions/piece_actions.js b/js/actions/piece_actions.js
index 7aed13fc..9002e8c5 100644
--- a/js/actions/piece_actions.js
+++ b/js/actions/piece_actions.js
@@ -8,7 +8,8 @@ class PieceActions {
     constructor() {
         this.generateActions(
             'updatePiece',
-            'updateProperty'
+            'updateProperty',
+            'pieceFailed'
         );
     }
 
@@ -19,6 +20,7 @@ class PieceActions {
             })
             .catch((err) => {
                 console.logGlobal(err);
+                this.actions.pieceFailed(err.json);
             });
     }
 }
diff --git a/js/actions/webhook_actions.js b/js/actions/webhook_actions.js
new file mode 100644
index 00000000..f9555ce7
--- /dev/null
+++ b/js/actions/webhook_actions.js
@@ -0,0 +1,19 @@
+'use strict';
+
+import { alt } from '../alt';
+
+
+class WebhookActions {
+    constructor() {
+        this.generateActions(
+            'fetchWebhooks',
+            'successFetchWebhooks',
+            'fetchWebhookEvents',
+            'successFetchWebhookEvents',
+            'removeWebhook',
+            'successRemoveWebhook'
+        );
+    }
+}
+
+export default alt.createActions(WebhookActions);
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
index 5d3e033f..8033f239 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
@@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
                 return (
                     <AscribeSpinner
                         size='sm'
-                        color='white'
                         classNames='pull-right margin-left-2px'/>
                 );
             } else {
@@ -137,4 +136,4 @@ let AccordionListItemEditionWidget = React.createClass({
     }
 });
 
-export default AccordionListItemEditionWidget;
\ No newline at end of file
+export default AccordionListItemEditionWidget;
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
index 4547ce3b..006479c5 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { Link } from 'react-router';
 
 import AccordionListItem from './accordion_list_item';
+import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -19,7 +20,14 @@ let AccordionListItemPiece = React.createClass({
         ]),
         subsubheading: React.PropTypes.object,
         buttons: React.PropTypes.object,
-        badge: React.PropTypes.object
+        badge: React.PropTypes.object,
+        thumbnailPlaceholder: React.PropTypes.func
+    },
+
+    getDefaultProps() {
+        return {
+            thumbnailPlaceholder: AccordionListItemThumbnailPlacholder
+        };
     },
 
     getLinkData() {
@@ -34,19 +42,23 @@ let AccordionListItemPiece = React.createClass({
     },
 
     render() {
-        const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props;
+        const {
+            artistName,
+            badge,
+            buttons,
+            children,
+            className,
+            piece,
+            subsubheading,
+            thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
         const { url, url_safe } = piece.thumbnail;
         let thumbnail;
 
         // Since we're going to refactor the thumbnail generation anyway at one point,
         // for not use the annoying ascribe_spiral.png, we're matching the url against
         // this name and replace it with a CSS version of the new logo.
-        if(url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
-            thumbnail = (
-                <span className="ascribe-logo-circle">
-                    <span>A</span>
-                </span>
-            );
+        if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
+            thumbnail = (<ThumbnailPlaceholder />);
         } else {
             thumbnail = (
                 <div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
new file mode 100644
index 00000000..37c98371
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
@@ -0,0 +1,15 @@
+'use strict'
+
+import React from 'react';
+
+let AccordionListItemThumbnailPlaceholder = React.createClass({
+    render() {
+        return (
+            <span className="ascribe-logo-circle">
+                <span>A</span>
+            </span>
+        );
+    }
+});
+
+export default AccordionListItemThumbnailPlaceholder;
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index da45d1e8..a8cab166 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -31,6 +31,7 @@ let AccordionListItemWallet = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
         content: React.PropTypes.object,
+        thumbnailPlaceholder: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -123,32 +124,36 @@ let AccordionListItemWallet = React.createClass({
     },
 
     render() {
+        const { children, className, content, thumbnailPlaceholder } = this.props;
 
         return (
             <AccordionListItemPiece
-                className={this.props.className}
-                piece={this.props.content}
+                className={className}
+                piece={content}
                 subsubheading={
                     <div className="pull-left">
-                        <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
                         {this.getLicences()}
-                    </div>}
+                    </div>
+                }
                 buttons={
                     <div>
                         <AclProxy
-                            aclObject={this.props.content.acl}
+                            aclObject={content.acl}
                             aclName="acl_view_editions">
                             <AccordionListItemEditionWidget
                                 className="pull-right"
-                                piece={this.props.content}
+                                piece={content}
                                 toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
                                 onPollingSuccess={this.onPollingSuccess}/>
                         </AclProxy>
-                    </div>}
-                    badge={this.getGlyphicon()}>
+                    </div>
+                }
+                badge={this.getGlyphicon()}
+                thumbnailPlaceholder={thumbnailPlaceholder}>
                 {this.getCreateEditionsDialog()}
                 {/* this.props.children is AccordionListItemTableEditions */}
-                {this.props.children}
+                {children}
             </AccordionListItemPiece>
         );
     }
diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js
index 42f86320..35e42c20 100644
--- a/js/components/ascribe_buttons/acl_button_list.js
+++ b/js/components/ascribe_buttons/acl_button_list.js
@@ -41,7 +41,7 @@ let AclButtonList = React.createClass({
 
     componentDidMount() {
         UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
+        UserActions.fetchCurrentUser.defer();
 
         window.addEventListener('resize', this.handleResize);
         window.dispatchEvent(new Event('resize'));
diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js
index 6a3df7b2..97f2e173 100644
--- a/js/components/ascribe_buttons/acls/acl_button.js
+++ b/js/components/ascribe_buttons/acls/acl_button.js
@@ -26,7 +26,7 @@ export default function ({ action, displayName, title, tooltip }) {
             availableAcls: React.PropTypes.object.isRequired,
             buttonAcceptName: React.PropTypes.string,
             buttonAcceptClassName: React.PropTypes.string,
-            currentUser: React.PropTypes.object.isRequired,
+            currentUser: React.PropTypes.object,
             email: React.PropTypes.string,
             pieceOrEditions: React.PropTypes.oneOfType([
                 React.PropTypes.object,
diff --git a/js/components/ascribe_collapsible/collapsible_paragraph.js b/js/components/ascribe_collapsible/collapsible_paragraph.js
index e146b42b..7ad8d0af 100644
--- a/js/components/ascribe_collapsible/collapsible_paragraph.js
+++ b/js/components/ascribe_collapsible/collapsible_paragraph.js
@@ -12,7 +12,9 @@ const CollapsibleParagraph = React.createClass({
             React.PropTypes.object,
             React.PropTypes.array
         ]),
-        iconName: React.PropTypes.string
+        iconName: React.PropTypes.string,
+        show: React.PropTypes.bool,
+        defaultExpanded: React.PropTypes.bool
     },
 
     getDefaultProps() {
diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js
index 9ea37285..8b0f50b5 100644
--- a/js/components/ascribe_detail/detail_property.js
+++ b/js/components/ascribe_detail/detail_property.js
@@ -7,6 +7,7 @@ let DetailProperty = React.createClass({
     propTypes: {
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
+            React.PropTypes.number,
             React.PropTypes.string,
             React.PropTypes.element
         ]),
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 6b38ddf8..bc2f0cfa 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -41,13 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let Edition = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
         edition: React.PropTypes.object,
-        loadEdition: React.PropTypes.func,
-        location: React.PropTypes.object
+        loadEdition: React.PropTypes.func
     },
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -75,6 +82,8 @@ let Edition = React.createClass({
     },
 
     render() {
+        let FurtherDetailsType = this.props.furtherDetailsType;
+
         return (
             <Row>
                 <Col md={6}>
@@ -90,6 +99,7 @@ let Edition = React.createClass({
                         <hr/>
                     </div>
                     <EditionSummary
+                        actionPanelButtonListType={this.props.actionPanelButtonListType}
                         edition={this.props.edition}
                         currentUser={this.state.currentUser}
                         handleSuccess={this.props.loadEdition}/>
@@ -137,7 +147,7 @@ let Edition = React.createClass({
                             currentUser={this.state.currentUser}/>
                         <Note
                             id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
-                            label={getLangText('Edition note (public)')}
+                            label={getLangText('Personal note (public)')}
                             defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={!!this.props.edition.acl.acl_edit}
@@ -151,13 +161,12 @@ let Edition = React.createClass({
                         show={this.props.edition.acl.acl_edit
                             || Object.keys(this.props.edition.extra_data).length > 0
                             || this.props.edition.other_data.length > 0}>
-                        <FurtherDetails
+                        <FurtherDetailsType
                             editable={this.props.edition.acl.acl_edit}
                             pieceId={this.props.edition.parent}
                             extraData={this.props.edition.extra_data}
                             otherData={this.props.edition.other_data}
-                            handleSuccess={this.props.loadEdition}
-                            location={this.props.location}/>
+                            handleSuccess={this.props.loadEdition} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('SPOOL Details')}>
@@ -173,6 +182,7 @@ let Edition = React.createClass({
 
 let EditionSummary = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -185,7 +195,7 @@ let EditionSummary = React.createClass({
     getStatus(){
         let status = null;
         if (this.props.edition.status.length > 0){
-            let statusStr = this.props.edition.status.join().replace(/_/, ' ');
+            let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
             status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
             if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
                 status = (
@@ -197,7 +207,7 @@ let EditionSummary = React.createClass({
     },
 
     render() {
-        let { edition, currentUser } = this.props;
+        let { actionPanelButtonListType, edition, currentUser } = this.props;
         return (
             <div className="ascribe-detail-header">
                 <EditionDetailProperty
@@ -212,10 +222,16 @@ let EditionSummary = React.createClass({
                     value={ edition.owner } />
                 <LicenseDetail license={edition.license_type}/>
                 {this.getStatus()}
-                <AclProxy show={currentUser && currentUser.email}>
+                {/*
+                    `acl_view` is always available in `edition.acl`, therefore if it has
+                    no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
+                    `AclInformation` would show up
+                */}
+                <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
                     <EditionDetailProperty
                         label={getLangText('ACTIONS')}>
                         <EditionActionPanel
+                            actionPanelButtonListType={actionPanelButtonListType}
                             edition={edition}
                             currentUser={currentUser}
                             handleSuccess={this.handleSuccess} />
diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js
index 162427d5..36a79e7c 100644
--- a/js/components/ascribe_detail/edition_action_panel.js
+++ b/js/components/ascribe_detail/edition_action_panel.js
@@ -36,6 +36,7 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let EditionActionPanel = React.createClass({
     propTypes: {
+        actionPanelButtonListType: React.PropTypes.func,
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
@@ -43,6 +44,12 @@ let EditionActionPanel = React.createClass({
 
     mixins: [History],
 
+    getDefaultProps() {
+        return {
+            actionPanelButtonListType: AclButtonList
+        };
+    },
+
     getInitialState() {
         return PieceListStore.getState();
     },
@@ -87,7 +94,10 @@ let EditionActionPanel = React.createClass({
     },
 
     render(){
-        let {edition, currentUser} = this.props;
+        const {
+            actionPanelButtonListType: ActionPanelButtonListType,
+            edition,
+            currentUser } = this.props;
 
         if (edition &&
             edition.notifications &&
@@ -104,7 +114,7 @@ let EditionActionPanel = React.createClass({
             return (
                 <Row>
                     <Col md={12}>
-                        <AclButtonList
+                        <ActionPanelButtonListType
                             className="ascribe-button-list"
                             availableAcls={edition.acl}
                             pieceOrEditions={[edition]}
@@ -121,8 +131,9 @@ let EditionActionPanel = React.createClass({
                                         name="bitcoin_id"
                                         expanded={false}>
                                         <input
-                                             type="text"
-                                             value={edition.bitcoin_id} />
+                                            type="text"
+                                            value={edition.bitcoin_id}
+                                            readOnly />
                                     </Property>
                                     <Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW TRANSFER')}
@@ -141,8 +152,9 @@ let EditionActionPanel = React.createClass({
                                         name="bitcoin_id"
                                         expanded={false}>
                                         <input
-                                             type="text"
-                                             value={edition.bitcoin_id} />
+                                            type="text"
+                                            value={edition.bitcoin_id}
+                                            readOnly />
                                     </Property>
                                     <Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
                                         {getLangText('WITHDRAW CONSIGN')}
@@ -164,7 +176,7 @@ let EditionActionPanel = React.createClass({
                                 aim="button"
                                 verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
                                 aclObject={edition.acl}/>
-                        </AclButtonList>
+                        </ActionPanelButtonListType>
                     </Col>
                 </Row>
             );
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index 2c479d24..0e74e38d 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -1,6 +1,10 @@
 'use strict';
 
 import React from 'react';
+import { History } from 'react-router';
+
+import ReactError from '../../mixins/react_error';
+import { ResourceNotFoundError } from '../../models/errors';
 
 import EditionActions from '../../actions/edition_actions';
 import EditionStore from '../../stores/edition_store';
@@ -9,6 +13,7 @@ import Edition from './edition';
 
 import AscribeSpinner from '../ascribe_spinner';
 
+import { getLangText } from '../../utils/lang_utils';
 import { setDocumentTitle } from '../../utils/dom_utils';
 
 
@@ -17,10 +22,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let EditionContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
-        location: React.PropTypes.object
+        actionPanelButtonListType: React.PropTypes.func,
+        furtherDetailsType: React.PropTypes.func,
+        params: React.PropTypes.object
     },
 
+    mixins: [History, ReactError],
+
     getInitialState() {
         return EditionStore.getState();
     },
@@ -28,11 +36,11 @@ let EditionContainer = React.createClass({
     componentDidMount() {
         EditionStore.listen(this.onChange);
 
-        // Every time we enter the edition detail page, just reset the edition
-        // store as it will otherwise display wrong/old data once the user loads
+        // Every time we're entering the edition detail page,
+        // just reset the edition that is saved in the edition store
+        // as it will otherwise display wrong/old data once the user loads
         // the edition detail a second time
         EditionActions.updateEdition({});
-
         this.loadEdition();
     },
 
@@ -45,6 +53,14 @@ let EditionContainer = React.createClass({
         }
     },
 
+    componentDidUpdate() {
+        const { editionError } = this.state;
+
+        if(editionError && editionError.status === 404) {
+            this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
+        }
+    },
+
     componentWillUnmount() {
         window.clearInterval(this.state.timerId);
         EditionStore.unlisten(this.onChange);
@@ -67,14 +83,15 @@ let EditionContainer = React.createClass({
     },
 
     render() {
-        if(this.state.edition && this.state.edition.title) {
+        if(this.state.edition && this.state.edition.id) {
             setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
 
             return (
                 <Edition
+                    actionPanelButtonListType={this.props.actionPanelButtonListType}
+                    furtherDetailsType={this.props.furtherDetailsType}
                     edition={this.state.edition}
-                    loadEdition={this.loadEdition}
-                    location={this.props.location}/>
+                    loadEdition={this.loadEdition} />
             );
         } else {
             return (
diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js
index 91ce87c5..c178fb93 100644
--- a/js/components/ascribe_detail/further_details.js
+++ b/js/components/ascribe_detail/further_details.js
@@ -23,8 +23,7 @@ let FurtherDetails = React.createClass({
         pieceId: React.PropTypes.number,
         extraData: React.PropTypes.object,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
-        handleSuccess: React.PropTypes.func,
-        location: React.PropTypes.object
+        handleSuccess: React.PropTypes.func
     },
 
     getInitialState() {
@@ -86,8 +85,7 @@ let FurtherDetails = React.createClass({
                             overrideForm={true}
                             pieceId={this.props.pieceId}
                             otherData={this.props.otherData}
-                            multiple={true}
-                            location={this.props.location}/>
+                            multiple={true} />
                     </Form>
                 </Col>
             </Row>
diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index f5593ab9..18050de9 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -10,12 +10,15 @@ import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
+import { getLangText } from '../../utils/lang_utils';
+
 
 
 const { func, bool, number, object, arrayOf } = React.PropTypes;
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        label: string,
         pieceId: number,
         otherData: arrayOf(object),
         editable: bool,
@@ -31,6 +34,7 @@ let FurtherDetailsFileuploader = React.createClass({
 
     getDefaultProps() {
         return {
+            label: getLangText('Additional files'),
             multiple: false
         };
     },
@@ -60,7 +64,7 @@ let FurtherDetailsFileuploader = React.createClass({
         return (
             <Property
                 name="other_data_key"
-                label="Additional files">
+                label={this.props.label}>
                 <ReactS3FineUploader
                     keyRoutine={{
                         url: AppConstants.serverUrl + 's3/key/',
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index ed312f5f..7481d1fb 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -20,7 +20,10 @@ let Piece = React.createClass({
         subheader: React.PropTypes.object,
         buttons: React.PropTypes.object,
         loadPiece: React.PropTypes.func,
-        children: React.PropTypes.object
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
 
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 8cd7df1c..74584ba3 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -4,6 +4,9 @@ import React from 'react';
 import { History } from 'react-router';
 import Moment from 'moment';
 
+import ReactError from '../../mixins/react_error';
+import { ResourceNotFoundError } from '../../models/errors';
+
 import PieceActions from '../../actions/piece_actions';
 import PieceStore from '../../stores/piece_store';
 
@@ -50,11 +53,17 @@ import { setDocumentTitle } from '../../utils/dom_utils';
  */
 let PieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
-        location: React.PropTypes.object
+        furtherDetailsType: React.PropTypes.func,
+        params: React.PropTypes.object
     },
 
-    mixins: [History],
+    mixins: [History, ReactError],
+
+    getDefaultProps() {
+        return {
+            furtherDetailsType: FurtherDetails
+        };
+    },
 
     getInitialState() {
         return mergeOptions(
@@ -70,15 +79,22 @@ let PieceContainer = React.createClass({
     componentDidMount() {
         UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PieceStore.listen(this.onChange);
 
         // Every time we enter the piece detail page, just reset the piece
         // store as it will otherwise display wrong/old data once the user loads
         // the piece detail a second time
         PieceActions.updatePiece({});
-
         this.loadPiece();
+        UserActions.fetchCurrentUser();
+    },
+
+    componentDidUpdate() {
+        const { pieceError } = this.state;
+
+        if(pieceError && pieceError.status === 404) {
+            this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
+        }
     },
 
     componentWillUnmount() {
@@ -89,7 +105,7 @@ let PieceContainer = React.createClass({
 
     onChange(state) {
         /*
-        
+
             ATTENTION:
             THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
             FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
@@ -103,7 +119,6 @@ let PieceContainer = React.createClass({
 
             let pieceState = mergeOptions({}, state.piece);
             pieceState.acl.acl_loan = false;
-
             this.setState({
                 piece: pieceState
             });
@@ -197,7 +212,12 @@ let PieceContainer = React.createClass({
         } else {
             return (
                 <AclProxy
-                    show={currentUser && currentUser.email}>
+                    show={currentUser && currentUser.email && Object.keys(piece.acl).length > 1}>
+                    {/*
+                        `acl_view` is always available in `edition.acl`, therefore if it has
+                        no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
+                        `AclInformation` would show up
+                    */}
                     <DetailProperty label={getLangText('ACTIONS')}>
                         <AclButtonList
                             className="ascribe-button-list"
@@ -226,7 +246,8 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if(this.state.piece && this.state.piece.title) {
+        if (this.state.piece && this.state.piece.id) {
+            let FurtherDetailsType = this.props.furtherDetailsType;
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
 
             return (
@@ -252,7 +273,6 @@ let PieceContainer = React.createClass({
                     }
                     buttons={this.getActions()}>
                     {this.getCreateEditionsDialog()}
-
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
                         show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
@@ -261,11 +281,14 @@ let PieceContainer = React.createClass({
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
+                        show={!!(this.state.currentUser.username
+                                || this.state.piece.acl.acl_edit
+                                || this.state.piece.public_note)}>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (private)')}
                             defaultValue={this.state.piece.private_note || null}
+                            show = {!!this.state.currentUser.username}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
@@ -273,11 +296,12 @@ let PieceContainer = React.createClass({
                             currentUser={this.state.currentUser}/>
                         <Note
                             id={this.getId}
-                            label={getLangText('Piece note (public)')}
+                            label={getLangText('Personal note (public)')}
                             defaultValue={this.state.piece.public_note || null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={!!this.state.piece.acl.acl_edit}
-                            successMessage={getLangText('Public piece note saved')}
+                            show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
+                            successMessage={getLangText('Public note saved')}
                             url={ApiUrls.note_public_piece}
                             currentUser={this.state.currentUser}/>
                     </CollapsibleParagraph>
@@ -287,13 +311,12 @@ let PieceContainer = React.createClass({
                             || Object.keys(this.state.piece.extra_data).length > 0
                             || this.state.piece.other_data.length > 0}
                         defaultExpanded={true}>
-                        <FurtherDetails
+                        <FurtherDetailsType
                             editable={this.state.piece.acl.acl_edit}
                             pieceId={this.state.piece.id}
                             extraData={this.state.piece.extra_data}
                             otherData={this.state.piece.other_data}
-                            handleSuccess={this.loadPiece}
-                            location={this.props.location}/>
+                            handleSuccess={this.loadPiece} />
                     </CollapsibleParagraph>
 
                 </Piece>
diff --git a/js/components/ascribe_forms/acl_form_factory.js b/js/components/ascribe_forms/acl_form_factory.js
index d5494c2d..9422a351 100644
--- a/js/components/ascribe_forms/acl_form_factory.js
+++ b/js/components/ascribe_forms/acl_form_factory.js
@@ -20,9 +20,11 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
 let AclFormFactory = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        currentUser: React.PropTypes.object.isRequired,
+        autoFocusProperty: React.PropTypes.string,
+        currentUser: React.PropTypes.object,
         email: React.PropTypes.string,
         message: React.PropTypes.string,
+        labels: React.PropTypes.object,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
@@ -53,10 +55,12 @@ let AclFormFactory = React.createClass({
     render() {
         const {
             action,
+            autoFocusProperty,
             pieceOrEditions,
             currentUser,
             email,
             message,
+            labels,
             handleSuccess,
             showNotification } = this.props;
 
@@ -64,14 +68,16 @@ let AclFormFactory = React.createClass({
             aclName: action,
             entities: pieceOrEditions,
             isPiece: this.isPiece(),
-            senderName: currentUser.username
+            senderName: currentUser && currentUser.username
         });
 
         if (action === 'acl_consign') {
             return (
                 <ConsignForm
+                    autoFocusProperty={autoFocusProperty}
                     email={email}
                     message={formMessage}
+                    labels={labels}
                     id={this.getFormDataId()}
                     url={ApiUrls.ownership_consigns}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index a0b2d251..a2b7b9bc 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -124,8 +124,18 @@ let Form = React.createClass({
     getFormData() {
         let data = {};
 
-        for (let ref in this.refs) {
-            data[this.refs[ref].props.name] = this.refs[ref].state.value;
+        for (let refName in this.refs) {
+            const ref = this.refs[refName];
+
+            if (ref.state && 'value' in ref.state) {
+                // An input can also provide an `Object` as a value
+                // which we're going to merge with `data` (overwrites)
+                if(ref.state.value && ref.state.value.constructor === Object) {
+                    Object.assign(data, ref.state.value);
+                } else {
+                    data[ref.props.name] = ref.state.value;
+                }
+            }
         }
 
         if (typeof this.props.getFormData === 'function') {
@@ -238,7 +248,6 @@ let Form = React.createClass({
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
             if (child) {
-
                 // Since refs will be overwritten by this functions return statement,
                 // we still want to be able to define refs for nested `Form` or `Property`
                 // children, which is why we're upfront simply invoking the callback-ref-
diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index da40f009..2f0ebf05 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -6,31 +6,70 @@ import Button from 'react-bootstrap/lib/Button';
 
 import Form from './form';
 import Property from './property';
+
+import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
 import InputTextAreaToggable from './input_textarea_toggable';
 
+
 import AscribeSpinner from '../ascribe_spinner';
-import { getLangText } from '../../utils/lang_utils.js';
+
 import AclInformation from '../ascribe_buttons/acl_information';
 
+import { getLangText } from '../../utils/lang_utils.js';
+
 let ConsignForm = React.createClass({
     propTypes: {
         url: React.PropTypes.string,
         id: React.PropTypes.object,
+        autoFocusProperty: React.PropTypes.string,
+        email: React.PropTypes.string,
         message: React.PropTypes.string,
+        labels: React.PropTypes.object,
+        createPublicContractAgreement: React.PropTypes.bool,
         handleSuccess: React.PropTypes.func
     },
 
-    getFormData(){
+    getDefaultProps() {
+        return {
+            labels: {}
+        };
+    },
+
+    getInitialState() {
+        return {
+            email: this.props.email || ''
+        };
+    },
+
+    getFormData() {
         return this.props.id;
     },
 
+    handleEmailOnChange(event) {
+        // event.target.value is the submitted email of the consignee
+        this.setState({
+            email: event && event.target && event.target.value || ''
+        });
+    },
+
     render() {
+        const { email } = this.state;
+        const {
+            autoFocusProperty,
+            createPublicContractAgreement,
+            email: defaultEmail,
+            handleSuccess,
+            id,
+            message,
+            labels,
+            url } = this.props;
+
         return (
             <Form
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 buttons={
                     <div className="modal-footer">
                         <p className="pull-right">
@@ -49,24 +88,39 @@ let ConsignForm = React.createClass({
                     </div>}>
                 <AclInformation aim={'form'} verbs={['acl_consign']}/>
                 <Property
+                    autoFocus={autoFocusProperty === 'email'}
                     name='consignee'
-                    label={getLangText('Email')}>
+                    label={labels.email || getLangText('Email')}
+                    editable={!defaultEmail}
+                    onChange={this.handleEmailOnChange}
+                    overrideForm={!!defaultEmail}>
                     <input
                         type="email"
+                        value={email}
                         placeholder={getLangText('Email of the consignee')}
                         required/>
                 </Property>
                 <Property
+                    autoFocus={autoFocusProperty === 'message'}
                     name='consign_message'
-                    label={getLangText('Personal Message')}
-                    editable={true}
-                    overrideForm={true}>
+                    label={labels.message || getLangText('Personal Message')}
+                    editable
+                    overrideForm>
                     <InputTextAreaToggable
                         rows={1}
-                        defaultValue={this.props.message}
+                        defaultValue={message}
                         placeholder={getLangText('Enter a message...')}
                         required />
                 </Property>
+                <Property
+                    name='contract_agreement'
+                    label={getLangText('Consign Contract')}
+                    className="ascribe-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputContractAgreementCheckbox
+                        createPublicContractAgreement={createPublicContractAgreement}
+                        email={email} />
+                </Property>
                 <Property
                     name='password'
                     label={getLangText('Password')}>
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index d6398a20..a204fb87 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -1,33 +1,34 @@
 'use strict';
 
 import React from 'react';
-
 import classnames from 'classnames';
 
 import Button from 'react-bootstrap/lib/Button';
 
+import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
+
 import Form from './form';
 import Property from './property';
-import InputTextAreaToggable from './input_textarea_toggable';
-import InputDate from './input_date';
-import InputCheckbox from './input_checkbox';
 
-import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
-import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
+import InputDate from './input_date';
+import InputTextAreaToggable from './input_textarea_toggable';
+import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
 
 import AscribeSpinner from '../ascribe_spinner';
 
-import { mergeOptions } from '../../utils/general_utils';
-import { getLangText } from '../../utils/lang_utils';
 import AclInformation from '../ascribe_buttons/acl_information';
 
+import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions } from '../../utils/general_utils';
+
+
 let LoanForm = React.createClass({
     propTypes: {
         loanHeading: React.PropTypes.string,
         email: React.PropTypes.string,
         gallery: React.PropTypes.string,
-        startdate: React.PropTypes.object,
-        enddate: React.PropTypes.object,
+        startDate: React.PropTypes.object,
+        endDate: React.PropTypes.object,
         showPersonalMessage: React.PropTypes.bool,
         showEndDate: React.PropTypes.bool,
         showStartDate: React.PropTypes.bool,
@@ -36,7 +37,11 @@ let LoanForm = React.createClass({
         id: React.PropTypes.object,
         message: React.PropTypes.string,
         createPublicContractAgreement: React.PropTypes.bool,
-        handleSuccess: React.PropTypes.func
+        handleSuccess: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.object,
+            React.PropTypes.array
+        ])
     },
 
     getDefaultProps() {
@@ -45,148 +50,33 @@ let LoanForm = React.createClass({
             showPersonalMessage: true,
             showEndDate: true,
             showStartDate: true,
-            showPassword: true,
-            createPublicContractAgreement: true
+            showPassword: true
         };
     },
 
     getInitialState() {
-        return ContractAgreementListStore.getState();
-    },
-
-    componentDidMount() {
-        ContractAgreementListStore.listen(this.onChange);
-        this.getContractAgreementsOrCreatePublic(this.props.email);
-    },
-
-    /**
-     * This method needs to be in form_loan as some whitelabel pages (Cyland) load
-     * the loanee's email async!
-     *
-     * SO LEAVE IT IN!
-     */
-    componentWillReceiveProps(nextProps) {
-        if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
-            this.getContractAgreementsOrCreatePublic(nextProps.email);
-        }
-    },
-
-    componentWillUnmount() {
-        ContractAgreementListStore.unlisten(this.onChange);
+        return {
+            email: this.props.email || ''
+        };
     },
 
     onChange(state) {
         this.setState(state);
     },
 
-    getContractAgreementsOrCreatePublic(email){
-        ContractAgreementListActions.flushContractAgreementList.defer();
-        if (email) {
-            // fetch the available contractagreements (pending/accepted)
-            ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
-        }
-    },
-
-    getFormData(){
-        return mergeOptions(
-            this.props.id,
-            this.getContractAgreementId()
-        );
-    },
-
-    handleOnChange(event) {
+    handleEmailOnChange(event) {
         // event.target.value is the submitted email of the loanee
-        if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
-            this.getContractAgreementsOrCreatePublic(event.target.value);
-        } else {
-            ContractAgreementListActions.flushContractAgreementList();
-        }
+        this.setState({
+            email: event && event.target && event.target.value || ''
+        });
     },
 
-    getContractAgreementId() {
-        if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            return {'contract_agreement_id': this.state.contractAgreementList[0].id};
-        }
-        return {};
+    handleReset() {
+        this.handleEmailOnChange();
     },
 
-    getContractCheckbox() {
-        if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            // we need to define a key on the InputCheckboxes as otherwise
-            // react is not rerendering them on a store switch and is keeping
-            // the default value of the component (which is in that case true)
-            let contractAgreement = this.state.contractAgreementList[0];
-            let contract = contractAgreement.contract;
-
-            if(contractAgreement.datetime_accepted) {
-                return (
-                    <Property
-                        name="terms"
-                        label={getLangText('Loan Contract')}
-                        expanded={true}
-                        className="notification-contract-pdf">
-                        <embed
-                            className="loan-form"
-                            src={contract.blob.url_safe}
-                            alt="pdf"
-                            pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
-                        <a href={contract.blob.url_safe} target="_blank">
-                            <span className="glyphicon glyphicon-download" aria-hidden="true"></span> {getLangText('Download contract')}
-                        </a>
-                        {/* We still need to send the server information that we're accepting */}
-                        <InputCheckbox
-                                style={{'display': 'none'}}
-                                key="terms_implicitly"
-                                defaultChecked={true} />
-                    </Property>
-                );
-            } else {
-                return (
-                    <Property
-                        name="terms"
-                        className="ascribe-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
-                        <InputCheckbox
-                            key="terms_explicitly"
-                            defaultChecked={false}>
-                            <span>
-                                {getLangText('I agree to the')}&nbsp;
-                                <a href={contract.blob.url_safe} target="_blank">
-                                    {getLangText('terms of ')} {contract.issuer}
-                                </a>
-                            </span>
-                        </InputCheckbox>
-                    </Property>
-                );
-            }
-        } else {
-            return (
-                <Property
-                    name="terms"
-                    style={{paddingBottom: 0}}
-                    expanded={false}>
-                    <InputCheckbox
-                        key="terms_implicitly"
-                        defaultChecked={true} />
-                </Property>
-            );
-        }
-    },
-
-    getAppendix() {
-        if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
-            let appendix = this.state.contractAgreementList[0].appendix;
-            if (appendix && appendix.default) {
-                return (
-                    <Property
-                        name='appendix'
-                        label={getLangText('Appendix')}>
-                        <pre className="ascribe-pre">{appendix.default}</pre>
-                    </Property>
-                );
-            }
-        }
-        return null;
+    getFormData() {
+        return this.props.id;
     },
 
     getButtons() {
@@ -214,14 +104,31 @@ let LoanForm = React.createClass({
     },
 
     render() {
+        const { email } = this.state;
+        const {
+            children,
+            createPublicContractAgreement,
+            email: defaultEmail,
+            handleSuccess,
+            gallery,
+            loanHeading,
+            message,
+            showPersonalMessage,
+            endDate,
+            startDate,
+            showEndDate,
+            showStartDate,
+            showPassword,
+            url } = this.props;
+
         return (
             <Form
-                className={classnames({'ascribe-form-bordered': this.props.loanHeading})}
+                className={classnames({'ascribe-form-bordered': loanHeading})}
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
-                onReset={this.handleOnChange}
-                handleSuccess={this.props.handleSuccess}
+                onReset={this.handleReset}
+                handleSuccess={handleSuccess}
                 buttons={this.getButtons()}
                 spinner={
                     <div className="modal-footer">
@@ -229,18 +136,18 @@ let LoanForm = React.createClass({
                             <AscribeSpinner color='dark-blue' size='md'/>
                         </p>
                     </div>}>
-                <div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
-                    <h3>{this.props.loanHeading}</h3>
+                <div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
+                    <h3>{loanHeading}</h3>
                 </div>
                 <AclInformation aim={'form'} verbs={['acl_loan']}/>
                 <Property
                     name='loanee'
                     label={getLangText('Loanee Email')}
-                    editable={!this.props.email}
-                    onChange={this.handleOnChange}
-                    overrideForm={!!this.props.email}>
+                    editable={!defaultEmail}
+                    onChange={this.handleEmailOnChange}
+                    overrideForm={!!defaultEmail}>
                     <input
-                        value={this.props.email}
+                        value={email}
                         type="email"
                         placeholder={getLangText('Email of the loanee')}
                         required/>
@@ -248,31 +155,31 @@ let LoanForm = React.createClass({
                 <Property
                     name='gallery'
                     label={getLangText('Gallery/exhibition (optional)')}
-                    editable={!this.props.gallery}
-                    overrideForm={!!this.props.gallery}>
+                    editable={!gallery}
+                    overrideForm={!!gallery}>
                     <input
-                        value={this.props.gallery}
+                        value={gallery}
                         type="text"
                         placeholder={getLangText('Gallery/exhibition (optional)')}/>
                 </Property>
                 <Property
                     name='startdate'
                     label={getLangText('Start date')}
-                    editable={!this.props.startdate}
-                    overrideForm={!!this.props.startdate}
-                    expanded={this.props.showStartDate}>
+                    editable={!startDate}
+                    overrideForm={!!startDate}
+                    expanded={showStartDate}>
                     <InputDate
-                        defaultValue={this.props.startdate}
+                        defaultValue={startDate}
                         placeholderText={getLangText('Loan start date')} />
                 </Property>
                 <Property
                     name='enddate'
-                    editable={!this.props.enddate}
-                    overrideForm={!!this.props.enddate}
+                    editable={!endDate}
+                    overrideForm={!!endDate}
                     label={getLangText('End date')}
-                    expanded={this.props.showEndDate}>
+                    expanded={showEndDate}>
                     <InputDate
-                        defaultValue={this.props.enddate}
+                        defaultValue={endDate}
                         placeholderText={getLangText('Loan end date')} />
                 </Property>
                 <Property
@@ -280,25 +187,32 @@ let LoanForm = React.createClass({
                     label={getLangText('Personal Message')}
                     editable={true}
                     overrideForm={true}
-                    expanded={this.props.showPersonalMessage}>
+                    expanded={showPersonalMessage}>
                     <InputTextAreaToggable
                         rows={1}
-                        defaultValue={this.props.message}
+                        defaultValue={message}
                         placeholder={getLangText('Enter a message...')}
-                        required={this.props.showPersonalMessage}/>
+                        required={showPersonalMessage}/>
+                </Property>
+                <Property
+                    name='contract_agreement'
+                    label={getLangText('Loan Contract')}
+                    className="ascribe-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputContractAgreementCheckbox
+                        createPublicContractAgreement={createPublicContractAgreement}
+                        email={email} />
                 </Property>
-                {this.getContractCheckbox()}
-                {this.getAppendix()}
                 <Property
                     name='password'
                     label={getLangText('Password')}
-                    expanded={this.props.showPassword}>
+                    expanded={showPassword}>
                     <input
                         type="password"
                         placeholder={getLangText('Enter your password')}
-                        required={this.props.showPassword ? 'required' : ''}/>
+                        required={showPassword}/>
                 </Property>
-                {this.props.children}
+                {children}
             </Form>
         );
     }
diff --git a/js/components/ascribe_forms/form_loan_request_answer.js b/js/components/ascribe_forms/form_loan_request_answer.js
index 1bfe90db..349b4efc 100644
--- a/js/components/ascribe_forms/form_loan_request_answer.js
+++ b/js/components/ascribe_forms/form_loan_request_answer.js
@@ -65,8 +65,8 @@ let LoanRequestAnswerForm = React.createClass({
                     url={this.props.url}
                     email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
                     gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
-                    startdate={startDate}
-                    enddate={endDate}
+                    startDate={startDate}
+                    endDate={endDate}
                     showPassword={true}
                     showPersonalMessage={false}
                     handleSuccess={this.props.handleSuccess}/>
@@ -76,4 +76,4 @@ let LoanRequestAnswerForm = React.createClass({
     }
 });
 
-export default LoanRequestAnswerForm;
\ No newline at end of file
+export default LoanRequestAnswerForm;
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 8e8b015c..f1c49191 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -31,7 +31,7 @@ let RegisterPieceForm = React.createClass({
         isFineUploaderActive: React.PropTypes.bool,
         isFineUploaderEditable: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
-        onLoggedOut: React.PropTypes.func,
+        enableSeparateThumbnail: React.PropTypes.bool,
 
         // For this form to work with SlideContainer, we sometimes have to disable it
         disabled: React.PropTypes.bool,
@@ -46,7 +46,8 @@ let RegisterPieceForm = React.createClass({
         return {
             headerMessage: getLangText('Register your work'),
             submitMessage: getLangText('Register work'),
-            enableLocalHashing: true
+            enableLocalHashing: true,
+            enableSeparateThumbnail: true
         };
     },
 
@@ -89,6 +90,11 @@ let RegisterPieceForm = React.createClass({
         if (digitalWorkFile &&
             (digitalWorkFile.status === FileStatus.DELETED || digitalWorkFile.status === FileStatus.CANCELED)) {
             this.refs.form.refs.thumbnail_file.reset();
+
+            // Manually we need to set the ready state for `thumbnailKeyReady` back
+            // to `true` as `ReactS3Fineuploader`'s `reset` method triggers
+            // `setIsUploadReady` with `false`
+            this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
             this.setState({ digitalWorkFile: null });
         } else {
             this.setState({ digitalWorkFile });
@@ -99,13 +105,18 @@ let RegisterPieceForm = React.createClass({
         const { digitalWorkFile } = this.state;
         const { fineuploader } = this.refs.digitalWorkFineUploader.refs;
 
-        fineuploader.setThumbnailForFileId(digitalWorkFile.id, thumbnailFile.url);
+        fineuploader.setThumbnailForFileId(
+            digitalWorkFile.id,
+            // if thumbnail was deleted, we delete it from the display as well
+            thumbnailFile.status !== FileStatus.DELETED ? thumbnailFile.url : null
+        );
     },
 
     isThumbnailDialogExpanded() {
+        const { enableSeparateThumbnail } = this.props;
         const { digitalWorkFile } = this.state;
 
-        if(digitalWorkFile) {
+        if(digitalWorkFile && enableSeparateThumbnail) {
             const { type: mimeType } = digitalWorkFile;
             const mimeSubType = mimeType && mimeType.split('/').length ? mimeType.split('/')[1]
                                                                        : 'unknown';
@@ -121,7 +132,6 @@ let RegisterPieceForm = React.createClass({
                 submitMessage,
                 headerMessage,
                 isFineUploaderActive,
-                onLoggedOut,
                 isFineUploaderEditable,
                 location,
                 children,
@@ -172,7 +182,6 @@ let RegisterPieceForm = React.createClass({
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
-                        onLoggedOut={onLoggedOut}
                         disabled={!isFineUploaderEditable}
                         enableLocalHashing={hashLocally}
                         uploadMethod={location.query.method}
@@ -189,7 +198,7 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
-                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'
@@ -203,7 +212,9 @@ let RegisterPieceForm = React.createClass({
                         fileClassToUpload={{
                             singular: getLangText('Select representative image'),
                             plural: getLangText('Select representative images')
-                        }} />
+                        }}
+                        isFineUploaderActive={isFineUploaderActive}
+                        disabled={!isFineUploaderEditable} />
                 </Property>
                 <Property
                     name='artist_name'
diff --git a/js/components/ascribe_forms/form_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js
similarity index 97%
rename from js/components/ascribe_forms/form_contract_agreement.js
rename to js/components/ascribe_forms/form_send_contract_agreement.js
index 1990f94b..74331e09 100644
--- a/js/components/ascribe_forms/form_contract_agreement.js
+++ b/js/components/ascribe_forms/form_send_contract_agreement.js
@@ -20,7 +20,7 @@ import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 
 
-let ContractAgreementForm = React.createClass({
+let SendContractAgreementForm = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func
     },
@@ -54,7 +54,7 @@ let ContractAgreementForm = React.createClass({
     },
 
     handleSubmitSuccess() {
-        let notification = 'Contract agreement send';
+        let notification = 'Contract agreement sent';
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
@@ -148,4 +148,4 @@ let ContractAgreementForm = React.createClass({
     }
 });
 
-export default ContractAgreementForm;
\ No newline at end of file
+export default SendContractAgreementForm;
diff --git a/js/components/ascribe_forms/form_unconsign_request.js b/js/components/ascribe_forms/form_unconsign_request.js
index 2cf6ba32..173649e1 100644
--- a/js/components/ascribe_forms/form_unconsign_request.js
+++ b/js/components/ascribe_forms/form_unconsign_request.js
@@ -57,7 +57,7 @@ let UnConsignRequestForm = React.createClass({
                         rows={1}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
-                        required="required"/>
+                        required />
                 </Property>
                 <hr />
             </Form>
@@ -65,4 +65,4 @@ let UnConsignRequestForm = React.createClass({
     }
 });
 
-export default UnConsignRequestForm;
\ No newline at end of file
+export default UnConsignRequestForm;
diff --git a/js/components/ascribe_forms/input_contract_agreement_checkbox.js b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
new file mode 100644
index 00000000..61235631
--- /dev/null
+++ b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
@@ -0,0 +1,206 @@
+'use strict';
+
+import React from 'react/addons';
+
+import InputCheckbox from './input_checkbox';
+
+import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
+import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
+
+import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions } from '../../utils/general_utils';
+import { isEmail } from '../../utils/regex_utils';
+
+
+const InputContractAgreementCheckbox = React.createClass({
+    propTypes: {
+        createPublicContractAgreement: React.PropTypes.bool,
+        email: React.PropTypes.string,
+
+        required: React.PropTypes.bool,
+
+        // provided by Property
+        disabled: React.PropTypes.bool,
+        onChange: React.PropTypes.func,
+        name: React.PropTypes.string,
+        setExpanded: React.PropTypes.func,
+
+        // can be used to style the component from the outside
+        style: React.PropTypes.object
+    },
+
+    getDefaultProps() {
+        return {
+            createPublicContractAgreement: true
+        };
+    },
+
+    getInitialState() {
+        return mergeOptions(
+            ContractAgreementListStore.getState(),
+            {
+                value: {
+                    terms: null,
+                    contract_agreement_id: null
+                }
+            }
+        );
+    },
+
+    componentDidMount() {
+        ContractAgreementListStore.listen(this.onStoreChange);
+        this.getContractAgreementsOrCreatePublic(this.props.email);
+    },
+
+    componentWillReceiveProps({ email: nextEmail }) {
+        if (this.props.email !== nextEmail) {
+            if (isEmail(nextEmail)) {
+                this.getContractAgreementsOrCreatePublic(nextEmail);
+            } else if (this.getContractAgreement()) {
+                ContractAgreementListActions.flushContractAgreementList();
+            }
+        }
+    },
+
+    componentWillUnmount() {
+        ContractAgreementListStore.unlisten(this.onStoreChange);
+    },
+
+    onStoreChange(state) {
+        const contractAgreement = this.getContractAgreement(state.contractAgreementList);
+
+        // If there is no contract available, hide this `Property` from the user
+        this.props.setExpanded(!!contractAgreement);
+
+        state = mergeOptions(state, {
+            value: {
+                // If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
+                // is either:
+                //
+                // - fetching a already existing contract agreement; or
+                // - trying to create a contract agreement
+                //
+                // If both attempts result in `contractAgreement` being not defined,
+                // it means that the receiver hasn't defined a contract, which means
+                // a contract agreement cannot be created, which means we don't have to
+                // specify `contract_agreement_id` when sending a request to the server.
+                contract_agreement_id: contractAgreement ? contractAgreement.id : null,
+                // If the receiver hasn't set a contract or the contract was
+                // previously accepted, we set the terms to `true`
+                // as we always need to at least give a boolean value for `terms`
+                // to the API endpoint
+                terms: !contractAgreement || !!contractAgreement.datetime_accepted
+            }
+        });
+
+        this.setState(state);
+    },
+
+    onChange(event) {
+        // Sync the value between our `InputCheckbox` and this component's `terms`
+        // so the parent `Property` is able to get the correct value of this component
+        // when the `Form` queries it.
+        this.setState({
+            value: React.addons.update(this.state.value, {
+                terms: { $set: event.target.value }
+            })
+        });
+
+        // Propagate change events from the checkbox up to the parent `Property`
+        this.props.onChange(event);
+    },
+
+    getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
+        if (contractAgreementList && contractAgreementList.length) {
+            return contractAgreementList[0];
+        }
+    },
+
+    getContractAgreementsOrCreatePublic(email) {
+        ContractAgreementListActions.flushContractAgreementList.defer();
+
+        if (email) {
+            // fetch the available contractagreements (pending/accepted)
+            ContractAgreementListActions.fetchAvailableContractAgreementList(email, this.props.createPublicContractAgreement);
+        }
+    },
+
+    getAppendix() {
+        const contractAgreement = this.getContractAgreement();
+
+        if (contractAgreement &&
+            contractAgreement.appendix &&
+            contractAgreement.appendix.default) {
+            return (
+                <div className="ascribe-property contract-appendix-form">
+                    <p><span>{getLangText('Appendix')}</span></p>
+                    <pre className="ascribe-pre">{contractAgreement.appendix.default}</pre>
+                </div>
+            );
+        }
+    },
+
+    getContractCheckbox() {
+        const contractAgreement = this.getContractAgreement();
+
+        if(contractAgreement) {
+            const {
+                datetime_accepted: datetimeAccepted,
+                contract: {
+                    issuer: contractIssuer,
+                    blob: { url_safe: contractUrl }
+                }
+            } = contractAgreement;
+
+            if(datetimeAccepted) {
+                return (
+                    <div
+                        className="notification-contract-pdf"
+                        style={{paddingBottom: '1em'}}>
+                        <embed
+                            className="embed-form"
+                            src={contractUrl}
+                            alt="pdf"
+                            pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
+                        <a href={contractUrl} target="_blank">
+                            <span className="glyphicon glyphicon-download" aria-hidden="true" /> {getLangText('Download contract')}
+                        </a>
+                    </div>
+                );
+            } else {
+                const {
+                    name,
+                    disabled,
+                    style } = this.props;
+
+                return (
+                    <InputCheckbox
+                        name={name}
+                        disabled={disabled}
+                        style={style}
+                        onChange={this.onChange}
+                        key="terms_explicitly"
+                        defaultChecked={false}>
+                        <span>
+                            {getLangText('I agree to the')}&nbsp;
+                            <a href={contractUrl} target="_blank">
+                                {getLangText('terms of ')} {contractIssuer}
+                            </a>
+                        </span>
+                    </InputCheckbox>
+                );
+            }
+        }
+    },
+
+    render() {
+        return (
+            <div>
+                {this.getContractCheckbox()}
+                {this.getAppendix()}
+            </div>
+        );
+    }
+});
+
+export default InputContractAgreementCheckbox;
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index 6ee44113..625ac2ff 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -18,10 +18,10 @@ const InputFineUploader = React.createClass({
         // a user is actually not logged in already to prevent him from droping files
         // before login in
         isFineUploaderActive: bool,
-        onLoggedOut: func,
 
         // provided by Property
         disabled: bool,
+        onChange: func,
 
         // Props for ReactS3FineUploader
         areAssetsDownloadable: bool,
@@ -110,22 +110,22 @@ const InputFineUploader = React.createClass({
     },
 
     render() {
-        const { fileInputElement,
-                keyRoutine,
-                createBlobRoutine,
-                validation,
-                setIsUploadReady,
-                isReadyForFormSubmission,
-                isFineUploaderActive,
-                areAssetsDownloadable,
-                onLoggedOut,
-                enableLocalHashing,
-                fileClassToUpload,
-                uploadMethod,
-                handleChangedFile,
-                setWarning,
-                showErrorPrompt,
-                disabled } = this.props;
+        const {
+            areAssetsDownloadable,
+            createBlobRoutine,
+            enableLocalHashing,
+            disabled,
+            fileClassToUpload,
+            fileInputElement,
+            handleChangedFile,
+            isFineUploaderActive,
+            isReadyForFormSubmission,
+            keyRoutine,
+            setIsUploadReady,
+            setWarning,
+            showErrorPrompt,
+            uploadMethod,
+            validation } = this.props;
         let editable = isFineUploaderActive;
 
         // if disabled is actually set by property, we want to override
@@ -162,7 +162,6 @@ const InputFineUploader = React.createClass({
                        'X-CSRFToken': getCookie(AppConstants.csrftoken)
                     }
                 }}
-                onInactive={onLoggedOut}
                 enableLocalHashing={enableLocalHashing}
                 uploadMethod={uploadMethod}
                 fileClassToUpload={fileClassToUpload}
diff --git a/js/components/ascribe_forms/input_textarea_toggable.js b/js/components/ascribe_forms/input_textarea_toggable.js
index c17a0e5a..0be8b87a 100644
--- a/js/components/ascribe_forms/input_textarea_toggable.js
+++ b/js/components/ascribe_forms/input_textarea_toggable.js
@@ -7,6 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 
 let InputTextAreaToggable = React.createClass({
     propTypes: {
+        autoFocus: React.PropTypes.bool,
         disabled: React.PropTypes.bool,
         rows: React.PropTypes.number.isRequired,
         required: React.PropTypes.bool,
@@ -23,6 +24,10 @@ let InputTextAreaToggable = React.createClass({
     },
 
     componentDidMount() {
+        if (this.props.autoFocus) {
+            this.refs.textarea.focus();
+        }
+
         this.setState({
             value: this.props.defaultValue
         });
@@ -51,6 +56,7 @@ let InputTextAreaToggable = React.createClass({
             className = className + ' ascribe-textarea-editable';
             textarea = (
                 <TextareaAutosize
+                    ref='textarea'
                     className={className}
                     value={this.state.value}
                     rows={this.props.rows}
diff --git a/js/components/ascribe_forms/list_form_request_actions.js b/js/components/ascribe_forms/list_form_request_actions.js
index 082ae8ef..4ec01b46 100644
--- a/js/components/ascribe_forms/list_form_request_actions.js
+++ b/js/components/ascribe_forms/list_form_request_actions.js
@@ -10,7 +10,7 @@ let ListRequestActions = React.createClass({
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        currentUser: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func.isRequired,
         notifications: React.PropTypes.array.isRequired
     },
@@ -33,4 +33,4 @@ let ListRequestActions = React.createClass({
     }
 });
 
-export default ListRequestActions;
\ No newline at end of file
+export default ListRequestActions;
diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 7f2a34e2..f6dd7e0c 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -42,7 +42,8 @@ const Property = React.createClass({
         ]),
         style: object,
         expanded: bool,
-        checkboxLabel: string
+        checkboxLabel: string,
+        autoFocus: bool
     },
 
     getDefaultProps() {
@@ -76,16 +77,24 @@ const Property = React.createClass({
         };
     },
 
+    componentDidMount() {
+        if(this.props.autoFocus) {
+            this.handleFocus();
+        }
+    },
+
     componentWillReceiveProps(nextProps) {
         let childInput = this.refs.input;
 
-        // For expanded there are actually two use cases:
+        // For expanded there are actually three use cases:
         //
         // 1. Control its value from the outside completely (do not define `checkboxLabel`)
         // 2. Let it be controlled from the inside (default value can be set though via `expanded`)
+        // 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
+        //    set from the outside as a prop then(!!!))
         //
-        // This handles case 1.
-        if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
+        // This handles case 1. and 3.
+        if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
             this.setState({ expanded: nextProps.expanded });
         }
 
@@ -230,12 +239,19 @@ const Property = React.createClass({
         }
     },
 
+    setExpanded(expanded) {
+        this.setState({ expanded });
+    },
+
+    handleCheckboxToggle() {
+        this.setExpanded(!this.state.expanded);
+    },
+
     renderChildren(style) {
         // Input's props should only be cloned and propagated down the tree,
         // if the component is actually being shown (!== 'expanded === false')
         if((this.state.expanded && this.props.checkboxLabel) || !this.props.checkboxLabel) {
             return ReactAddons.Children.map(this.props.children, (child) => {
-
                 // Since refs will be overriden by this functions return statement,
                 // we still want to be able to define refs for nested `Form` or `Property`
                 // children, which is why we're upfront simply invoking the callback-ref-
@@ -252,7 +268,8 @@ const Property = React.createClass({
                     setWarning: this.setWarning,
                     disabled: !this.props.editable,
                     ref: 'input',
-                    name: this.props.name
+                    name: this.props.name,
+                    setExpanded: this.setExpanded
                 });
             });
         }
@@ -271,10 +288,6 @@ const Property = React.createClass({
         }
     },
 
-    handleCheckboxToggle() {
-        this.setState({expanded: !this.state.expanded});
-    },
-
     getCheckbox() {
         const { checkboxLabel } = this.props;
 
@@ -298,23 +311,20 @@ const Property = React.createClass({
 
     render() {
         let footer = null;
-        let style = this.props.style ? mergeOptions({}, this.props.style) : {};
 
         if(this.props.footer){
             footer = (
                 <div className="ascribe-property-footer">
                     {this.props.footer}
-                </div>);
+                </div>
+            );
         }
 
-        style.paddingBottom = !this.state.expanded ? 0 : null;
-        style.cursor = !this.props.editable ? 'not-allowed' : null;
-
         return (
             <div
                 className={'ascribe-property-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
-                style={style}>
+                style={this.props.style}>
                 {this.getCheckbox()}
                 <Panel
                     collapsible
@@ -322,7 +332,7 @@ const Property = React.createClass({
                     className="bs-custom-panel">
                     <div className={'ascribe-property ' + this.props.className}>
                         {this.getLabelAndErrors()}
-                        {this.renderChildren(style)}
+                        {this.renderChildren(this.props.style)}
                         {footer}
                     </div>
                 </Panel>
diff --git a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
index 2eedbd4c..c9c7f9f4 100644
--- a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
+++ b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
@@ -4,77 +4,24 @@ import React from 'react';
 
 import { mergeOptions } from '../../utils/general_utils';
 
-import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
-import PieceListStore from '../../stores/piece_list_store';
-import PieceListActions from '../../actions/piece_list_actions';
-
 import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
-import AclButtonList from '../ascribe_buttons/acl_button_list';
-import DeleteButton from '../ascribe_buttons/delete_button';
 
-import { getAvailableAcls } from '../../utils/acl_utils';
 import { getLangText } from '../../utils/lang_utils.js';
 
 let PieceListBulkModal = React.createClass({
     propTypes: {
-        className: React.PropTypes.string
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            EditionListStore.getState(),
-            UserStore.getState(),
-            PieceListStore.getState()
-        );
-    },
-
-    
-
-    componentDidMount() {
-        EditionListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        PieceListStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-    },
-
-    componentWillUnmount() {
-        EditionListStore.unlisten(this.onChange);
-        PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    fetchSelectedPieceEditionList() {
-        let filteredPieceIdList = Object.keys(this.state.editionList)
-                                        .filter((pieceId) => {
-                                            return this.state.editionList[pieceId]
-                                                .filter((edition) => edition.selected).length > 0;
-                                        });
-        return filteredPieceIdList;
-    },
-
-    fetchSelectedEditionList() {
-        let selectedEditionList = [];
-
-        Object
-            .keys(this.state.editionList)
-            .forEach((pieceId) => {
-                let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
-                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
-            });
-
-        return selectedEditionList;
+        availableAcls: React.PropTypes.object.isRequired,
+        className: React.PropTypes.string,
+        selectedEditions: React.PropTypes.oneOfType([
+            React.PropTypes.object,
+            React.PropTypes.array
+        ]),
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
     },
 
     clearAllSelections() {
@@ -82,22 +29,8 @@ let PieceListBulkModal = React.createClass({
         EditionListActions.closeAllEditionLists();
     },
 
-    handleSuccess() {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-
-        this.fetchSelectedPieceEditionList()
-            .forEach((pieceId) => {
-                EditionListActions.refreshEditionList({pieceId, filterBy: {}});
-            });
-        EditionListActions.clearAllEditionSelections();
-    },
-
     render() {
-        let selectedEditions = this.fetchSelectedEditionList();
-        let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
-
-        if(Object.keys(availableAcls).length > 0) {
+        if (Object.keys(this.props.availableAcls).length) {
             return (
                 <div className={this.props.className}>
                     <div className="row no-margin">
@@ -106,7 +39,7 @@ let PieceListBulkModal = React.createClass({
                             <div className="row">
                                 <div className="text-center">
                                     <PieceListBulkModalSelectedEditionsWidget
-                                        numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
+                                        numberOfSelectedEditions={this.props.selectedEditions.length} />
                                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                     <span
                                         className="piece-list-bulk-modal-clear-all"
@@ -115,15 +48,7 @@ let PieceListBulkModal = React.createClass({
                             </div>
                             <p></p>
                             <div className="row-fluid">
-                                <AclButtonList
-                                    availableAcls={availableAcls}
-                                    pieceOrEditions={selectedEditions}
-                                    handleSuccess={this.handleSuccess}
-                                    className="text-center ascribe-button-list collapse-group">
-                                    <DeleteButton
-                                        handleSuccess={this.handleSuccess}
-                                        editions={selectedEditions}/>
-                                </AclButtonList>
+                                {this.props.children}
                             </div>
                         </div>
                     </div>
@@ -132,7 +57,6 @@ let PieceListBulkModal = React.createClass({
         } else {
             return null;
         }
-        
     }
 });
 
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index 38de2af6..c463330c 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -28,7 +28,7 @@ let PieceListToolbarFilterWidget = React.createClass({
     },
 
     generateFilterByStatement(param) {
-        let filterBy = this.props.filterBy;
+        const filterBy = Object.assign({}, this.props.filterBy);
 
         if(filterBy) {
             // we need hasOwnProperty since the values are all booleans
@@ -56,13 +56,13 @@ let PieceListToolbarFilterWidget = React.createClass({
      */
     filterBy(param) {
         return () => {
-            let filterBy = this.generateFilterByStatement(param);
+            const filterBy = this.generateFilterByStatement(param);
             this.props.applyFilterBy(filterBy);
         };
     },
 
     isFilterActive() {
-        let trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
+        const trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
 
         // We're hiding the star in that complicated matter so that,
         // the surrounding button is not resized up on appearance
@@ -74,7 +74,7 @@ let PieceListToolbarFilterWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        const filterIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
                 <span style={this.isFilterActive()}>*</span>
@@ -140,4 +140,4 @@ let PieceListToolbarFilterWidget = React.createClass({
     }
 });
 
-export default PieceListToolbarFilterWidget;
\ No newline at end of file
+export default PieceListToolbarFilterWidget;
diff --git a/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js b/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js
index b2d552a7..0eb4ad8f 100644
--- a/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js
+++ b/js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
+import { History, RouteContext } from 'react-router';
 
 import UserStore from '../../../stores/user_store';
 import UserActions from '../../../actions/user_actions';
@@ -37,7 +37,9 @@ export default function AuthProxyHandler({to, when}) {
                 location: object
             },
 
-            mixins: [History],
+            // We need insert `RouteContext` here in order to be able
+            // to use the `Lifecycle` widget in further down nested components
+            mixins: [History, RouteContext],
 
             getInitialState() {
                 return UserStore.getState();
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 5b05e708..35a6fbe5 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -11,6 +11,7 @@ import WhitelabelActions from '../../actions/whitelabel_actions';
 import AccountSettings from './account_settings';
 import BitcoinWalletSettings from './bitcoin_wallet_settings';
 import APISettings from './api_settings';
+import WebhookSettings from './webhook_settings';
 
 import AclProxy from '../acl_proxy';
 
@@ -70,6 +71,7 @@ let SettingsContainer = React.createClass({
                         aclName="acl_view_settings_api">
                         <APISettings />
                     </AclProxy>
+                    <WebhookSettings />
                     <AclProxy
                         aclObject={this.state.whitelabel}
                         aclName="acl_view_settings_bitcoin">
diff --git a/js/components/ascribe_settings/webhook_settings.js b/js/components/ascribe_settings/webhook_settings.js
new file mode 100644
index 00000000..9deecbcd
--- /dev/null
+++ b/js/components/ascribe_settings/webhook_settings.js
@@ -0,0 +1,165 @@
+'use strict';
+
+import React from 'react';
+
+import WebhookStore from '../../stores/webhook_store';
+import WebhookActions from '../../actions/webhook_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import AclProxy from '../acl_proxy';
+
+import ActionPanel from '../ascribe_panel/action_panel';
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import ApiUrls from '../../constants/api_urls';
+import AscribeSpinner from '../ascribe_spinner';
+
+import { getLangText } from '../../utils/lang_utils';
+
+
+let WebhookSettings = React.createClass({
+    propTypes: {
+        defaultExpanded: React.PropTypes.bool
+    },
+
+    getInitialState() {
+        return WebhookStore.getState();
+    },
+
+    componentDidMount() {
+        WebhookStore.listen(this.onChange);
+        WebhookActions.fetchWebhooks();
+        WebhookActions.fetchWebhookEvents();
+    },
+
+    componentWillUnmount() {
+        WebhookStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    onRemoveWebhook(webhookId) {
+        return (event) => {
+            WebhookActions.removeWebhook(webhookId);
+
+            let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        };
+    },
+
+    handleCreateSuccess() {
+        this.refs.webhookCreateForm.reset();
+        WebhookActions.fetchWebhooks(true);
+        let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    getWebhooks(){
+        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
+
+        if (this.state.webhooks) {
+            content = this.state.webhooks.map(function(webhook, i) {
+                const event = webhook.event.split('.')[0];
+                return (
+                    <ActionPanel
+                        name={webhook.event}
+                        key={i}
+                        content={
+                            <div>
+                                <div className='ascribe-panel-title'>
+                                    {event.toUpperCase()}
+                                </div>
+                                <div className="ascribe-panel-subtitle">
+                                    {webhook.target}
+                                </div>
+                            </div>
+                        }
+                        buttons={
+                            <div className="pull-right">
+                                <div className="pull-right">
+                                    <button
+                                        className="pull-right btn btn-tertiary btn-sm"
+                                        onClick={this.onRemoveWebhook(webhook.id)}>
+                                        {getLangText('DELETE')}
+                                    </button>
+                                </div>
+                            </div>
+                        }/>
+                    );
+            }, this);
+        }
+        return content;
+    },
+
+    getEvents() {
+        if (this.state.webhookEvents && this.state.webhookEvents.length) {
+            return (
+                <Property
+                    name='event'
+                    label={getLangText('Select the event to trigger a webhook', '...')}>
+                    <select name="events">
+                        {this.state.webhookEvents.map((event, i) => {
+                            return (
+                                <option
+                                    name={i}
+                                    key={i}
+                                    value={ event + '.webhook' }>
+                                    { event.toUpperCase() }
+                                </option>
+                            );
+                        })}
+                    </select>
+                </Property>);
+        }
+        return null;
+    },
+
+    
+    render() {
+        return (
+            <CollapsibleParagraph
+                title={getLangText('Webhooks')}
+                defaultExpanded={this.props.defaultExpanded}>
+                <div>
+                    <p>
+                        Webhooks allow external services to receive notifications from ascribe.
+                        Currently we support webhook notifications when someone transfers, consigns, loans or shares
+                        (by email) a work to you.
+                    </p>
+                    <p>
+                        To get started, simply choose the prefered action that you want to be notified upon and supply
+                        a target url.
+                    </p>
+                </div>
+                <AclProxy
+                    show={this.state.webhookEvents && this.state.webhookEvents.length}>
+                    <Form
+                        ref="webhookCreateForm"
+                        url={ApiUrls.webhooks}
+                        handleSuccess={this.handleCreateSuccess}>
+                        { this.getEvents() }
+                        <Property
+                            name='target'
+                            label={getLangText('Redirect Url')}>
+                            <input
+                                type="text"
+                                placeholder={getLangText('Enter the url to be triggered')}
+                                required/>
+                        </Property>
+                        <hr />
+                    </Form>
+                </AclProxy>
+                {this.getWebhooks()}
+            </CollapsibleParagraph>
+        );
+    }
+});
+
+export default WebhookSettings;
\ No newline at end of file
diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js
index 8ed66c1d..39d515a3 100644
--- a/js/components/ascribe_slides_container/slides_container.js
+++ b/js/components/ascribe_slides_container/slides_container.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react/addons';
-import { History } from 'react-router';
+import { History, Lifecycle } from 'react-router';
 
 import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
 
@@ -17,14 +17,16 @@ const SlidesContainer = React.createClass({
             pending: string,
             complete: string
         }),
-        location: object
+        location: object,
+        pageExitWarning: string
     },
 
-    mixins: [History],
+    mixins: [History, Lifecycle],
 
     getInitialState() {
         return {
-            containerWidth: 0
+            containerWidth: 0,
+            pageExitWarning: null
         };
     },
 
@@ -41,6 +43,10 @@ const SlidesContainer = React.createClass({
         window.removeEventListener('resize', this.handleContainerResize);
     },
 
+    routerWillLeave() {
+        return this.props.pageExitWarning;
+    },
+
     handleContainerResize() {
         this.setState({
             // +30 to get rid of the padding of the container which is 15px + 15px left and right
diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js
index 87a2aef6..aa0b6691 100644
--- a/js/components/ascribe_social_share/facebook_share_button.js
+++ b/js/components/ascribe_social_share/facebook_share_button.js
@@ -8,7 +8,6 @@ import { InjectInHeadUtils } from '../../utils/inject_utils';
 
 let FacebookShareButton = React.createClass({
     propTypes: {
-        url: React.PropTypes.string,
         type: React.PropTypes.string
     },
 
@@ -28,12 +27,14 @@ let FacebookShareButton = React.createClass({
          * To circumvent this, we always have the sdk parse the entire DOM on the initial load
          * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
          */
-        if (!InjectInHeadUtils.isPresent('script', AppConstants.facebook.sdkUrl)) {
-            InjectInHeadUtils.inject(AppConstants.facebook.sdkUrl);
-        } else {
-            // Parse() searches the children of the element we give it, not the element itself.
-            FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement);
-        }
+
+        InjectInHeadUtils
+            .inject(AppConstants.facebook.sdkUrl)
+            .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
+    },
+
+    shouldComponentUpdate(nextProps) {
+        return this.props.type !== nextProps.type;
     },
 
     render() {
@@ -41,7 +42,6 @@ let FacebookShareButton = React.createClass({
             <span
                 ref="fbShareButton"
                 className="fb-share-button btn btn-ascribe-social"
-                data-href={this.props.url}
                 data-layout={this.props.type}>
             </span>
         );
diff --git a/js/components/ascribe_spinner.js b/js/components/ascribe_spinner.js
index e1daf5b2..ad97d484 100644
--- a/js/components/ascribe_spinner.js
+++ b/js/components/ascribe_spinner.js
@@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
     propTypes: {
         classNames: React.PropTypes.string,
         size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
-        color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
+        color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
     },
 
     getDefaultProps() {
         return {
             inline: false,
-            size: 'md',
-            color: 'loop'
+            size: 'md'
         };
     },
 
     render() {
+        const { classNames: classes, color, size } = this.props;
+
         return (
             <div
-                className={
-                    classNames('spinner-wrapper-' + this.props.size,
-                    'spinner-wrapper-' + this.props.color,
-                    this.props.classNames)}>
-                    <div className={classNames('spinner-circle')}></div>
-                    <div className={classNames('spinner-inner')}>A</div>
+                className={classNames('spinner-wrapper-' + size,
+                                      color ? 'spinner-wrapper-' + color : null,
+                                      classes)}>
+                <div className='spinner-circle' />
+                <div className='spinner-inner'>A</div>
             </div>
         );
     }
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 3c993aea..9ad1facb 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -23,7 +23,6 @@ let FileDragAndDrop = React.createClass({
 
         onDrop: React.PropTypes.func.isRequired,
         onDragOver: React.PropTypes.func,
-        onInactive: React.PropTypes.func,
         handleDeleteFile: React.PropTypes.func,
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
@@ -70,28 +69,21 @@ let FileDragAndDrop = React.createClass({
     handleDrop(event) {
         event.preventDefault();
         event.stopPropagation();
-        let files;
 
-        if(this.props.dropzoneInactive) {
-            // if there is a handle function for doing stuff
-            // when the dropzone is inactive, then call it
-            if(this.props.onInactive) {
-                this.props.onInactive();
+        if (!this.props.dropzoneInactive) {
+            let files;
+
+            // handle Drag and Drop
+            if(event.dataTransfer && event.dataTransfer.files.length > 0) {
+                files = event.dataTransfer.files;
+            } else if(event.target.files) { // handle input type file
+                files = event.target.files;
             }
-            return;
-        }
 
-        // handle Drag and Drop
-        if(event.dataTransfer && event.dataTransfer.files.length > 0) {
-            files = event.dataTransfer.files;
-        } else if(event.target.files) { // handle input type file
-            files = event.target.files;
+            if(typeof this.props.onDrop === 'function' && files) {
+              this.props.onDrop(files);
+            }
         }
-
-        if(typeof this.props.onDrop === 'function' && files) {
-            this.props.onDrop(files);
-        }
-
     },
 
     handleDeleteFile(fileId) {
@@ -123,31 +115,25 @@ let FileDragAndDrop = React.createClass({
     },
 
     handleOnClick() {
-        let evt;
-        // when multiple is set to false and the user already uploaded a piece,
-        // do not propagate event
-        if(this.props.dropzoneInactive) {
-            // if there is a handle function for doing stuff
-            // when the dropzone is inactive, then call it
-            if(this.props.onInactive) {
-                this.props.onInactive();
+        // do not propagate event if the drop zone's inactive,
+        // for example when multiple is set to false and the user already uploaded a piece
+        if (!this.props.dropzoneInactive) {
+            let evt;
+
+            try {
+                evt = new MouseEvent('click', {
+                    view: window,
+                    bubbles: true,
+                    cancelable: true
+                });
+            } catch(e) {
+                // For browsers that do not support the new MouseEvent syntax
+                evt = document.createEvent('MouseEvents');
+                evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
             }
-            return;
-        }
 
-        try {
-            evt = new MouseEvent('click', {
-                view: window,
-                bubbles: true,
-                cancelable: true
-            });
-        } catch(e) {
-            // For browsers that do not support the new MouseEvent syntax
-            evt = document.createEvent('MouseEvents');
-            evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+            this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
         }
-
-        this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
     },
 
     getErrorDialog(failedFiles) {
diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index aabf19d9..94c85f4f 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -32,6 +32,20 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             handleDeleteFile: func
         },
 
+        getInitialState() {
+            return {
+                disabled: this.getUploadingFiles().length !== 0
+            };
+        },
+
+        componentWillReceiveProps(nextProps) {
+            if(this.props.filesToUpload !== nextProps.filesToUpload) {
+                this.setState({
+                    disabled: this.getUploadingFiles(nextProps.filesToUpload).length !== 0
+                });
+            }
+        },
+
         handleDrop(event) {
             event.preventDefault();
             event.stopPropagation();
@@ -42,43 +56,62 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
             }
         },
 
-        getUploadingFiles() {
-            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
+        getUploadingFiles(filesToUpload = this.props.filesToUpload) {
+            return filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
         },
 
         getUploadedFile() {
             return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0];
         },
 
+        clearSelection() {
+            this.refs.fileSelector.getDOMNode().value = '';
+        },
+
         handleOnClick() {
-            const uploadingFiles = this.getUploadingFiles();
-            const uploadedFile = this.getUploadedFile();
+            if(!this.state.disabled) {
+                let evt;
+                const uploadingFiles = this.getUploadingFiles();
+                const uploadedFile = this.getUploadedFile();
 
-            if(uploadedFile) {
-                this.props.handleCancelFile(uploadedFile.id);
-            }
-            if(uploadingFiles.length === 0) {
-                // We only want the button to be clickable if there are no files currently uploading
-
-                // Firefox only recognizes the simulated mouse click if bubbles is set to true,
-                // but since Google Chrome propagates the event much further than needed, we
-                // need to stop propagation as soon as the event is created
-                var evt = new MouseEvent('click', {
-                    view: window,
-                    bubbles: true,
-                    cancelable: true
-                });
+                this.clearSelection();
+                if(uploadingFiles.length) {
+                    this.props.handleCancelFile(uploadingFiles[0].id);
+                } else if(uploadedFile && !uploadedFile.s3UrlSafe) {
+                    this.props.handleCancelFile(uploadedFile.id);
+                } else if(uploadedFile && uploadedFile.s3UrlSafe) {
+                    this.props.handleDeleteFile(uploadedFile.id);
+                }
 
+                try {
+                    evt = new MouseEvent('click', {
+                        view: window,
+                        bubbles: true,
+                        cancelable: true
+                    });
+                } catch(e) {
+                    // For browsers that do not support the new MouseEvent syntax
+                    evt = document.createEvent('MouseEvents');
+                    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+                }
                 evt.stopPropagation();
-                this.refs.fileinput.getDOMNode().dispatchEvent(evt);
+                this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
             }
         },
 
+        onClickCancel() {
+            this.clearSelection();
+            const uploadingFile = this.getUploadingFiles()[0];
+            this.props.handleCancelFile(uploadingFile.id);
+        },
+
         onClickRemove() {
+            this.clearSelection();
             const uploadedFile = this.getUploadedFile();
             this.props.handleDeleteFile(uploadedFile.id);
         },
 
+
         getButtonLabel() {
             let { filesToUpload, fileClassToUpload } = this.props;
 
@@ -94,8 +127,16 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
 
         getUploadedFileLabel() {
             const uploadedFile = this.getUploadedFile();
+            const uploadingFiles = this.getUploadingFiles();
 
-            if(uploadedFile) {
+            if(uploadingFiles.length) {
+                return (
+                    <span>
+                        {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
+                        [<a onClick={this.onClickCancel}>{getLangText('cancel upload')}</a>]
+                    </span>
+                );
+            } else if(uploadedFile) {
                 return (
                     <span>
                         <span className='ascribe-icon icon-ascribe-ok'/>
@@ -111,8 +152,11 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         render() {
-            let { multiple,
-                 allowedExtensions } = this.props;
+            const {
+                multiple,
+                allowedExtensions } = this.props;
+            const { disabled } = this.state;
+
 
             /*
              * We do not want a button that submits here.
@@ -122,14 +166,19 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              */
             return (
                 <div className="upload-button-wrapper">
-                    <a
+                    {/*
+                        The button needs to be of `type="button"` as it would
+                        otherwise submit the form its in.
+                    */}
+                    <button
+                        type="button"
                         onClick={this.handleOnClick}
                         className={className}
-                        disabled={this.getUploadingFiles().length !== 0}>
+                        disabled={disabled}>
                         {this.getButtonLabel()}
                         <input
                             multiple={multiple}
-                            ref="fileinput"
+                            ref="fileSelector"
                             type="file"
                             style={{
                                 display: 'none',
@@ -138,7 +187,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
                             }}
                             onChange={this.handleDrop}
                             accept={allowedExtensions}/>
-                   </a>
+                   </button>
                    {this.getUploadedFileLabel()}
                 </div>
             );
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index a9dd1039..b11a877f 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -47,7 +47,6 @@ const ReactS3FineUploader = React.createClass({
 
         handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
         submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
-        onInactive: func, // for when the user does something while the uploader's inactive
 
         // Handle form validation
         setIsUploadReady: func,     //TODO: rename to setIsUploaderValidated
@@ -317,7 +316,7 @@ const ReactS3FineUploader = React.createClass({
 
     // Cancel uploads and clear previously selected files on the input element
     cancelUploads(id) {
-        !!id ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
+        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
 
         // Reset the file input element to clear the previously selected files so that
         // the user can reselect them again.
@@ -425,11 +424,13 @@ const ReactS3FineUploader = React.createClass({
 
         if(fileId < filesToUpload.length) {
             const changeSet = { $set: url };
-            const newFilesToUpload = React.addons.update(filesToUpload, { [fileId]: { thumbnailUrl: changeSet } });
+            const newFilesToUpload = React.addons.update(filesToUpload, {
+                [fileId]: { thumbnailUrl: changeSet }
+            });
 
             this.setState({ filesToUpload: newFilesToUpload });
         } else {
-            throw new Error("You're accessing an index out of range of filesToUpload");
+            throw new Error('Accessing an index out of range of filesToUpload');
         }
     },
 
@@ -1052,13 +1053,12 @@ const ReactS3FineUploader = React.createClass({
     render() {
         const { errorState: { errorClass }, filesToUpload, uploadInProgress } = this.state;
         const {
-            multiple,
             areAssetsDownloadable,
             areAssetsEditable,
-            onInactive,
             enableLocalHashing,
             fileClassToUpload,
             fileInputElement: FileInputElement,
+            multiple,
             showErrorPrompt,
             uploadMethod } = this.props;
 
@@ -1069,7 +1069,6 @@ const ReactS3FineUploader = React.createClass({
             multiple,
             areAssetsDownloadable,
             areAssetsEditable,
-            onInactive,
             enableLocalHashing,
             uploadMethod,
             fileClassToUpload,
diff --git a/js/components/contract_notification.js b/js/components/contract_notification.js
deleted file mode 100644
index cd6ceb53..00000000
--- a/js/components/contract_notification.js
+++ /dev/null
@@ -1,36 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import NotificationStore from '../stores/notification_store';
-
-import { mergeOptions } from '../utils/general_utils';
-
-let ContractNotification = React.createClass({
-    getInitialState() {
-        return mergeOptions(
-            NotificationStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        NotificationStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        NotificationStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    render() {
-
-        return (
-            null
-        );
-    }
-});
-
-export default ContractNotification;
\ No newline at end of file
diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js
index 61f83196..0e111ce7 100644
--- a/js/components/error_not_found_page.js
+++ b/js/components/error_not_found_page.js
@@ -6,6 +6,16 @@ import { getLangText } from '../utils/lang_utils';
 
 
 let ErrorNotFoundPage = React.createClass({
+    propTypes: {
+        message: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            message: getLangText("Oops, the page you are looking for doesn't exist.")
+        };
+    },
+
     render() {
         return (
             <div className="row">
@@ -13,7 +23,7 @@ let ErrorNotFoundPage = React.createClass({
                     <div className="error-wrapper">
                         <h1>404</h1>
                         <p>
-                            {getLangText('Ups, the page you are looking for does not exist.')}
+                            {this.props.message}
                         </p>
                     </div>
                 </div>
diff --git a/js/components/footer.js b/js/components/footer.js
index 65088ee2..31145d4b 100644
--- a/js/components/footer.js
+++ b/js/components/footer.js
@@ -11,6 +11,7 @@ let Footer = React.createClass({
                 <p className="ascribe-sub-sub-statement">
                   <br />
                   <a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |
+                  <a href="https://www.ascribe.io/faq/" target="_blank"> {getLangText('faq')}</a> |
                   <a href="https://www.ascribe.io/imprint/" target="_blank"> {getLangText('imprint')}</a> |
                   <a href="https://www.ascribe.io/terms/" target="_blank"> {getLangText('terms of service')}</a> |
                   <a href="https://www.ascribe.io/privacy/" target="_blank"> {getLangText('privacy')}</a>
diff --git a/js/components/global_notification.js b/js/components/global_notification.js
index 59663b28..c1477f67 100644
--- a/js/components/global_notification.js
+++ b/js/components/global_notification.js
@@ -1,7 +1,9 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
+import GlobalNotificationActions from '../actions/global_notification_actions';
 import GlobalNotificationStore from '../stores/global_notification_store';
 
 import Row from 'react-bootstrap/lib/Row';
@@ -9,14 +11,18 @@ import Col from 'react-bootstrap/lib/Col';
 
 import { mergeOptions } from '../utils/general_utils';
 
+const MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH = 768;
+
 let GlobalNotification = React.createClass({
 
     getInitialState() {
+        const notificationStore = GlobalNotificationStore.getState();
+
         return mergeOptions(
             {
                 containerWidth: 0
             },
-            this.extractFirstElem(GlobalNotificationStore.getState().notificationQue)
+            notificationStore
         );
     },
 
@@ -36,35 +42,8 @@ let GlobalNotification = React.createClass({
         window.removeEventListener('resize', this.handleContainerResize);
     },
 
-    extractFirstElem(l) {
-        if(l.length > 0) {
-            return {
-                show: true,
-                message: l[0]
-            };
-        } else {
-            return {
-                show: false,
-                message: ''
-            };
-        }
-    },
-
     onChange(state) {
-        let notification = this.extractFirstElem(state.notificationQue);
-
-        // error handling for notifications
-        if(notification.message && notification.type === 'danger') {
-            console.logGlobal(new Error(notification.message.message));
-        }
-
-        if(notification.show) {
-            this.setState(notification);
-        } else {
-            this.setState({
-                show: false
-            });
-        }
+        this.setState(state);
     },
 
     handleContainerResize() {
@@ -73,32 +52,31 @@ let GlobalNotification = React.createClass({
         });
     },
 
-    render() {
-        let notificationClass = 'ascribe-global-notification';
-        let textClass;
+    renderNotification() {
+        const {
+            notificationQueue: [notification],
+            notificationStatus,
+            notificationsPaused,
+            containerWidth } = this.state;
 
-        if(this.state.containerWidth > 768) {
-            notificationClass = 'ascribe-global-notification-bubble';
-
-            if(this.state.show) {
-                notificationClass += ' ascribe-global-notification-bubble-on';
-            } else {
-                notificationClass += ' ascribe-global-notification-bubble-off';
-            }
+        const notificationClasses = [];
 
+        if (this.state.containerWidth > 768) {
+            notificationClasses.push('ascribe-global-notification-bubble');
+            notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-bubble-on'
+                                                                   : 'ascribe-global-notification-bubble-off');
         } else {
-            notificationClass = 'ascribe-global-notification';
-
-            if(this.state.show) {
-                notificationClass += ' ascribe-global-notification-on';
-            } else {
-                notificationClass += ' ascribe-global-notification-off';
-            }
-
+            notificationClasses.push('ascribe-global-notification');
+            notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-on'
+                                                                   : 'ascribe-global-notification-off');
         }
 
-        if(this.state.message) {
-            switch(this.state.message.type) {
+        let textClass;
+        let message;
+        if (notification && !notificationsPaused) {
+            message = notification.message;
+
+            switch(notification.type) {
                 case 'success':
                     textClass = 'ascribe-global-notification-success';
                     break;
@@ -106,18 +84,23 @@ let GlobalNotification = React.createClass({
                     textClass = 'ascribe-global-notification-danger';
                     break;
                 default:
-                    console.warn('Could not find a matching type in global_notification.js');
+                    console.warn('Could not find a matching notification type in global_notification.js');
             }
         }
-        
 
+        return (
+            <div className={classNames(...notificationClasses)}>
+                <div className={textClass}>{message}</div>
+            </div>
+        );
+    },
+
+    render() {
         return (
             <div ref="notificationWrapper">
                 <Row>
                     <Col>
-                        <div className={notificationClass}>
-                            <div className={textClass}>{this.state.message.message}</div>
-                        </div>
+                        {this.renderNotification()}
                     </Col>
                 </Row>
             </div>
@@ -125,4 +108,4 @@ let GlobalNotification = React.createClass({
     }
 });
 
-export default GlobalNotification;
\ No newline at end of file
+export default GlobalNotification;
diff --git a/js/components/header.js b/js/components/header.js
index 51f91318..b3fd543e 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -1,9 +1,10 @@
 'use strict';
 
 import React from 'react';
-
 import { Link } from 'react-router';
 
+import history from '../history';
+
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@@ -58,11 +59,17 @@ let Header = React.createClass({
         UserStore.listen(this.onChange);
         WhitelabelActions.fetchWhitelabel();
         WhitelabelStore.listen(this.onChange);
+
+        // react-bootstrap 0.25.1 has a bug in which it doesn't
+        // close the mobile expanded navigation after a click by itself.
+        // To get rid of this, we set the state of the component ourselves.
+        history.listen(this.onRouteChange);
     },
 
     componentWillUnmount() {
         UserStore.unlisten(this.onChange);
         WhitelabelStore.unlisten(this.onChange);
+        //history.unlisten(this.onRouteChange);
     },
 
     getLogo() {
@@ -135,6 +142,13 @@ let Header = React.createClass({
         this.refs.dropdownbutton.setDropdownState(false);
     },
 
+    // On route change, close expanded navbar again since react-bootstrap doesn't close
+    // the collapsibleNav by itself on click. setState() isn't available on a ref so
+    // doing this explicitly is the only way for now.
+    onRouteChange() {
+        this.refs.navbar.state.navExpanded = false;
+    },
+
     render() {
         let account;
         let signup;
@@ -201,8 +215,10 @@ let Header = React.createClass({
                 <Navbar
                     brand={this.getLogo()}
                     toggleNavKey={0}
-                    fixedTop={true}>
-                    <CollapsibleNav eventKey={0}>
+                    fixedTop={true}
+                    ref="navbar">
+                    <CollapsibleNav
+                        eventKey={0}>
                         <Nav navbar left>
                             {this.getPoweredBy()}
                         </Nav>
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 3d4309f8..9424117c 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -13,6 +13,9 @@ import AccordionList from './ascribe_accordion_list/accordion_list';
 import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
 import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
 
+import AclButtonList from './ascribe_buttons/acl_button_list.js';
+import DeleteButton from './ascribe_buttons/delete_button';
+
 import Pagination from './ascribe_pagination/pagination';
 
 import PieceListFilterDisplay from './piece_list_filter_display';
@@ -22,7 +25,8 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 
 import AscribeSpinner from './ascribe_spinner';
 
-import { mergeOptions } from '../utils/general_utils';
+import { getAvailableAcls } from '../utils/acl_utils';
+import { mergeOptions, isShallowEqual } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
@@ -30,8 +34,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
 let PieceList = React.createClass({
     propTypes: {
         accordionListItemType: React.PropTypes.func,
+        bulkModalButtonListType: React.PropTypes.func,
+        canLoadPieceList: React.PropTypes.bool,
         redirectTo: React.PropTypes.string,
         customSubmitButton: React.PropTypes.element,
+        customThumbnailPlaceholder: React.PropTypes.func,
         filterParams: React.PropTypes.array,
         orderParams: React.PropTypes.array,
         orderBy: React.PropTypes.string,
@@ -43,6 +50,8 @@ let PieceList = React.createClass({
     getDefaultProps() {
         return {
             accordionListItemType: AccordionListItemWallet,
+            bulkModalButtonListType: AclButtonList,
+            canLoadPieceList: true,
             orderParams: ['artist_name', 'title'],
             filterParams: [{
                 label: getLangText('Show works I can'),
@@ -54,23 +63,53 @@ let PieceList = React.createClass({
             }]
         };
     },
+
     getInitialState() {
-        return mergeOptions(
-            PieceListStore.getState(),
-            EditionListStore.getState()
+        const pieceListStore = PieceListStore.getState();
+        const stores = mergeOptions(
+            pieceListStore,
+            EditionListStore.getState(),
+            {
+                isFilterDirty: false
+            }
         );
+
+        // Use the default filters but use the pieceListStore's settings if they're available
+        stores.filterBy = Object.assign(this.getDefaultFilterBy(), pieceListStore.filterBy);
+
+        return stores;
     },
 
     componentDidMount() {
-        let page = this.props.location.query.page || 1;
-        
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
 
-        let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
-        if (this.state.pieceList.length === 0 || this.state.page !== page){
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                            orderBy, this.state.orderAsc, this.state.filterBy);
+        let page = this.props.location.query.page || 1;
+        if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
+            this.loadPieceList({ page });
+        }
+    },
+
+    componentWillReceiveProps(nextProps) {
+        let filterBy;
+        let page = this.props.location.query.page || 1;
+
+        // If the user hasn't changed the filter and the new default filter is different
+        // than the current filter, apply the new default filter
+        if (!this.state.isFilterDirty) {
+            const newDefaultFilterBy = this.getDefaultFilterBy(nextProps);
+
+            // Only need to check shallowly since the filterBy shouldn't be nested
+            if (!isShallowEqual(this.state.filterBy, newDefaultFilterBy)) {
+                filterBy = newDefaultFilterBy;
+                page = 1;
+            }
+        }
+
+        // Only load if we are applying a new filter or if it's the first time we can
+        // load the piece list
+        if (nextProps.canLoadPieceList && (filterBy || !this.props.canLoadPieceList)) {
+            this.loadPieceList({ page, filterBy });
         }
     },
 
@@ -90,14 +129,29 @@ let PieceList = React.createClass({
         this.setState(state);
     },
 
+    getDefaultFilterBy(props = this.props) {
+        const { filterParams } = props;
+        const defaultFilterBy = {};
+
+        if (filterParams && typeof filterParams.forEach === 'function') {
+            filterParams.forEach(({ items }) => {
+                items.forEach((item) => {
+                    if (typeof item === 'object' && item.defaultValue) {
+                        defaultFilterBy[item.key] = true;
+                    }
+                });
+            });
+        }
+
+        return defaultFilterBy;
+    },
+
     paginationGoToPage(page) {
         return () => {
             // if the users clicks a pager of the pagination,
             // the site should go to the top
             document.body.scrollTop = document.documentElement.scrollTop = 0;
-            PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                            this.state.orderBy, this.state.orderAsc,
-                                            this.state.filterBy);
+            this.loadPieceList({ page });
         };
     },
 
@@ -116,29 +170,35 @@ let PieceList = React.createClass({
     },
 
     searchFor(searchTerm) {
-         PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
-                                        this.state.orderAsc, this.state.filterBy);
-         this.history.pushState(null, this.props.location.pathname, {page: 1});
+        this.loadPieceList({
+            page: 1,
+            search: searchTerm
+        });
+        this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
     applyFilterBy(filterBy){
-        // first we need to apply the filter on the piece list
-        PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, filterBy)
-                        .then(() => {
-                            // but also, we need to filter all the open edition lists
-                            this.state.pieceList
-                                .forEach((piece) => {
-                                    // but only if they're actually open
-                                    if(this.state.isEditionListOpenForPieceId[piece.id].show) {
-                                        EditionListActions.refreshEditionList({
-                                            pieceId: piece.id,
-                                            filterBy
-                                        });
-                                    }
+        this.setState({
+            isFilterDirty: true
+        });
 
-                                });
-                        });
+        // first we need to apply the filter on the piece list
+        this
+            .loadPieceList({ page: 1, filterBy })
+            .then(() => {
+                // but also, we need to filter all the open edition lists
+                this.state.pieceList
+                    .forEach((piece) => {
+                        // but only if they're actually open
+                        if(this.state.isEditionListOpenForPieceId[piece.id].show) {
+                            EditionListActions.refreshEditionList({
+                                pieceId: piece.id,
+                                filterBy
+                            });
+                        }
+
+                    });
+            });
 
         // we have to redirect the user always to page one as it could be that there is no page two
         // for filtered pieces
@@ -150,35 +210,97 @@ let PieceList = React.createClass({
                                         orderBy, this.state.orderAsc, this.state.filterBy);
     },
 
+    loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
+        const orderBy = this.state.orderBy || this.props.orderBy;
+
+        return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
+                                               orderBy, this.state.orderAsc, filterBy);
+    },
+
+    fetchSelectedPieceEditionList() {
+        let filteredPieceIdList = Object.keys(this.state.editionList)
+                                        .filter((pieceId) => {
+                                            return this.state.editionList[pieceId]
+                                                .filter((edition) => edition.selected).length > 0;
+                                        });
+        return filteredPieceIdList;
+    },
+
+    fetchSelectedEditionList() {
+        let selectedEditionList = [];
+
+        Object
+            .keys(this.state.editionList)
+            .forEach((pieceId) => {
+                let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
+                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
+            });
+
+        return selectedEditionList;
+    },
+
+    handleAclSuccess() {
+        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
+                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+
+        this.fetchSelectedPieceEditionList()
+            .forEach((pieceId) => {
+                EditionListActions.refreshEditionList({pieceId});
+            });
+        EditionListActions.clearAllEditionSelections();
+    },
+
     render() {
-        let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
-        let AccordionListItemType = this.props.accordionListItemType;
+        const {
+            accordionListItemType: AccordionListItemType,
+            bulkModalButtonListType: BulkModalButtonListType,
+            customSubmitButton,
+            customThumbnailPlaceholder,
+            filterParams,
+            orderParams } = this.props;
+
+        const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
+
+        const selectedEditions = this.fetchSelectedEditionList();
+        const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
 
         setDocumentTitle(getLangText('Collection'));
-
         return (
             <div>
                 <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor}
                     searchQuery={this.state.search}
-                    filterParams={this.props.filterParams}
-                    orderParams={this.props.orderParams}
+                    filterParams={filterParams}
+                    orderParams={orderParams}
                     filterBy={this.state.filterBy}
                     orderBy={this.state.orderBy}
                     applyFilterBy={this.applyFilterBy}
                     applyOrderBy={this.applyOrderBy}>
-                    {this.props.customSubmitButton ?
-                        this.props.customSubmitButton :
+                    {customSubmitButton ?
+                        customSubmitButton :
                         <button className="btn btn-default btn-ascribe-add">
                             <span className="icon-ascribe icon-ascribe-add" />
                         </button>
                     }
                 </PieceListToolbar>
-                <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
+                <PieceListBulkModal
+                    availableAcls={availableAcls}
+                    selectedEditions={selectedEditions}
+                    className="ascribe-piece-list-bulk-modal">
+                    <BulkModalButtonListType
+                        availableAcls={availableAcls}
+                        pieceOrEditions={selectedEditions}
+                        handleSuccess={this.handleAclSuccess}
+                        className="text-center ascribe-button-list collapse-group">
+                        <DeleteButton
+                            handleSuccess={this.handleAclSuccess}
+                            editions={selectedEditions}/>
+                    </BulkModalButtonListType>
+                </PieceListBulkModal>
                 <PieceListFilterDisplay
                     filterBy={this.state.filterBy}
-                    filterParams={this.props.filterParams}/>
+                    filterParams={filterParams}/>
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
@@ -196,6 +318,7 @@ let PieceList = React.createClass({
                             <AccordionListItemType
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={piece}
+                                thumbnailPlaceholder={customThumbnailPlaceholder}
                                 key={i}>
                                     <AccordionListItemTableEditions
                                         className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
diff --git a/js/components/piece_list_filter_display.js b/js/components/piece_list_filter_display.js
index 6ca5207a..b2d9db99 100644
--- a/js/components/piece_list_filter_display.js
+++ b/js/components/piece_list_filter_display.js
@@ -97,12 +97,12 @@ let PieceListFilterDisplay = React.createClass({
 
     render() {
         let { filterBy } = this.props;
-        let filtersWithLabel = this.transformFilterParamsItemsToBools();
 
         // do not show the FilterDisplay if there are no filters applied
         if(filterBy && Object.keys(filterBy).length === 0) {
             return null;
         } else {
+            const filtersWithLabel = this.transformFilterParamsItemsToBools();
             return (
                 <div className="row">
                     <div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 322b9934..8211e91e 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -44,11 +44,8 @@ let RegisterPiece = React.createClass( {
         return mergeOptions(
             UserStore.getState(),
             WhitelabelStore.getState(),
-            PieceListStore.getState(),
-            {
-                selectedLicense: 0,
-                isFineUploaderActive: false
-            });
+            PieceListStore.getState()
+        );
     },
 
     componentDidMount() {
@@ -66,13 +63,6 @@ let RegisterPiece = React.createClass( {
 
     onChange(state) {
         this.setState(state);
-
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // we should also make the fineuploader component editable again
-            this.setState({
-                isFineUploaderActive: true
-            });
-        }
     },
 
     handleSuccess(response){
@@ -118,7 +108,7 @@ let RegisterPiece = React.createClass( {
                 <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                     <RegisterPieceForm
                         {...this.props}
-                        isFineUploaderActive={this.state.isFineUploaderActive}
+                        isFineUploaderActive={true}
                         handleSuccess={this.handleSuccess}
                         location={this.props.location}>
                         {this.props.children}
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js b/js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js
new file mode 100644
index 00000000..e69de29b
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
index a2a70a97..0fbca419 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
@@ -63,6 +63,11 @@ const PRRegisterPiece = React.createClass({
                     <div className="register-piece--info">
                         <h1>Portfolio Review</h1>
                         <h2>{getLangText('Submission closing on %s', ' 22 Dec 2015')}</h2>
+                        <p>For more information, visit:&nbsp;
+                            <a href="http://www.portfolio-review.de/submission/" target="_blank">
+                                portfolio-review.de
+                            </a>
+                        </p>
                         <p style={{marginTop: '1em'}}>
                             {getLangText("You're submitting as %s. ", currentUser.email)}
                             <Link to="/logout">{getLangText('Change account?')}</Link>
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 93ca50f3..982af7b0 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -51,8 +51,7 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
  */
 let PieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
-        location: React.PropTypes.object
+        params: React.PropTypes.object
     },
 
     getInitialState() {
@@ -111,7 +110,7 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if(this.state.piece && this.state.piece.title) {
+        if(this.state.piece && this.state.piece.id) {
             /*
             
                 This really needs a refactor!
@@ -162,7 +161,7 @@ let PieceContainer = React.createClass({
                             piece={this.state.piece}
                             currentUser={this.state.currentUser}/>
                     }>
-                    <PrizePieceDetails piece={this.state.piece} location={this.props.location}/>
+                    <PrizePieceDetails piece={this.state.piece} />
                 </Piece>
             );
         } else {
@@ -292,8 +291,8 @@ let PrizePieceRatings = React.createClass({
                         url={ApiUrls.ownership_loans_pieces_request}
                         email={this.props.currentUser.email}
                         gallery={this.props.piece.prize.name}
-                        startdate={today}
-                        enddate={endDate}
+                        startDate={today}
+                        endDate={endDate}
                         showPersonalMessage={true}
                         showPassword={false}
                         handleSuccess={this.handleLoanSuccess} />
@@ -426,8 +425,7 @@ let PrizePieceRatings = React.createClass({
 
 let PrizePieceDetails = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
-        location: React.PropTypes.object
+        piece: React.PropTypes.object
     },
 
     render() {
@@ -464,8 +462,7 @@ let PrizePieceDetails = React.createClass({
                             overrideForm={true}
                             pieceId={this.props.piece.id}
                             otherData={this.props.piece.other_data}
-                            multiple={true}
-                            location={location}/>
+                            multiple={true} />
                     </Form>
                 </CollapsibleParagraph>
             );
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
new file mode 100644
index 00000000..f360c932
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
@@ -0,0 +1,15 @@
+'use strict'
+
+import React from 'react';
+
+let Vivi23AccordionListItemThumbnailPlaceholder = React.createClass({
+    render() {
+        return (
+            <span className="ascribe-thumbnail-placeholder">
+                23
+            </span>
+        );
+    }
+});
+
+export default Vivi23AccordionListItemThumbnailPlaceholder;
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
new file mode 100644
index 00000000..302495a0
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+let Vivi23Landing = React.createClass({
+    getInitialState() {
+        return WhitelabelStore.getState();
+    },
+
+    componentWillMount() {
+        setDocumentTitle('23VIVI Marketplace');
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper vivi23-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row vivi23-landing--header">
+                            <img className="vivi23-landing--header-logo" src={this.state.whitelabel.logo} />
+                            <div>
+                                {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '}
+                                <span className="icon-ascribe-logo" />
+                            </div>
+                        </div>
+                        <div className="row vivi23-landing--content">
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default Vivi23Landing;
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
new file mode 100644
index 00000000..0bfb8aa0
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
@@ -0,0 +1,24 @@
+'use strict'
+
+import React from 'react';
+
+import Vivi23AccordionListItemThumbnailPlaceholder from './23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder';
+
+import MarketPieceList from '../market/market_piece_list';
+
+let Vivi23PieceList = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
+    render() {
+        return (
+            <MarketPieceList
+                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder}
+                location={this.props.location} />
+        );
+    }
+
+});
+
+export default Vivi23PieceList;
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
index b263e517..26a186ca 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
@@ -30,7 +30,7 @@ let WalletPieceContainer = React.createClass({
 
     
     render() {
-        if(this.props.piece && this.props.piece.title) {
+        if(this.props.piece && this.props.piece.id) {
             return (
                 <Piece
                     piece={this.props.piece}
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
index 0fe5a025..d211d3e8 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
@@ -89,7 +89,7 @@ let CylandPieceContainer = React.createClass({
     },
 
     render() {
-        if(this.state.piece && this.state.piece.title) {
+        if(this.state.piece && this.state.piece.id) {
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
 
             return (
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
index 71f8d4f0..93cc515a 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
@@ -116,7 +116,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}
-                        expanded={!disabled && piece.extra_data.artist_bio}>
+                        expanded={!disabled || !!piece.extra_data.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_bio}
@@ -125,7 +125,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_contact_information'
                         label={getLangText('Artist Contact Information')}
-                        expanded={!disabled && piece.extra_data.artist_contact_information}>
+                        expanded={!disabled || !!piece.extra_data.artist_contact_information}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.artist_contact_information}
@@ -134,7 +134,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Conceptual Overview')}
-                        expanded={!disabled && piece.extra_data.conceptual_overview}>
+                        expanded={!disabled || !!piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.conceptual_overview}
@@ -143,7 +143,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium (technical specifications)')}
-                        expanded={!disabled && piece.extra_data.medium}>
+                        expanded={!disabled || !!piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.medium}
@@ -152,7 +152,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size / Duration')}
-                        expanded={!disabled && piece.extra_data.size_duration}>
+                        expanded={!disabled || !!piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.size_duration}
@@ -161,7 +161,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='display_instructions'
                         label={getLangText('Display instructions')}
-                        expanded={!disabled && piece.extra_data.display_instructions}>
+                        expanded={!disabled || !!piece.extra_data.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.display_instructions}
@@ -170,7 +170,7 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional details')}
-                        expanded={!disabled && piece.extra_data.additional_details}>
+                        expanded={!disabled || !!piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={piece.extra_data.additional_details}
@@ -178,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
                     </Property>
                     <FurtherDetailsFileuploader
                         label={getLangText('Additional files (e.g. still images, pdf)')}
-                        submitFile={this.submitFile}
+                        submitFile={function () {}}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         pieceId={piece.id}
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 63085fc9..dc6420f4 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -57,9 +57,9 @@ let CylandLanding = React.createClass({
         setDocumentTitle('CYLAND MediaArtLab');
 
         return (
-            <div className="container ascribe-form-wrapper">
+            <div className="container ascribe-form-wrapper cyland-landing">
                 <div className="row">
-                    <div className="col-xs-12 wp-landing-wrapper">
+                    <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
                             <img src={this.state.whitelabel.logo} width="400px"/>
                             <div style={{marginTop: '1em'}}>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index 470da761..42b7c1ad 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -53,8 +53,6 @@ let CylandRegisterPiece = React.createClass({
             PieceStore.getState(),
             WhitelabelStore.getState(),
             {
-                selectedLicense: 0,
-                isFineUploaderActive: false,
                 step: 0
             });
     },
@@ -90,13 +88,6 @@ let CylandRegisterPiece = React.createClass({
 
     onChange(state) {
         this.setState(state);
-
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // we should also make the fineuploader component editable again
-            this.setState({
-                isFineUploaderActive: true
-            });
-        }
     },
 
     handleRegisterSuccess(response){
@@ -167,11 +158,6 @@ let CylandRegisterPiece = React.createClass({
         }
     },
 
-    // basically redirects to the second slide (index: 1), when the user is not logged in
-    onLoggedOut() {
-        this.history.pushState(null, '/login');
-    },
-
     render() {
 
         let today = new Moment();
@@ -197,9 +183,8 @@ let CylandRegisterPiece = React.createClass({
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Submit to Cyland Archive')}
                                 submitMessage={getLangText('Submit')}
-                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut}
                                 location={this.props.location}/>
                         </Col>
                     </Row>
@@ -229,8 +214,8 @@ let CylandRegisterPiece = React.createClass({
                                 url={ApiUrls.ownership_loans_pieces}
                                 email={this.state.whitelabel.user}
                                 gallery="Cyland Archive"
-                                startdate={today}
-                                enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
+                                startDate={today}
+                                endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
                                 showStartDate={false}
                                 showEndDate={false}
                                 showPersonalMessage={false}
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
index 4e2f6a63..df58b7c7 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
@@ -123,7 +123,7 @@ let IkonotvPieceContainer = React.createClass({
             );
         }
 
-        if(this.state.piece && this.state.piece.title) {
+        if(this.state.piece && this.state.piece.id) {
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
             return (
                 <WalletPieceContainer
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
index 4bfae841..7aec7ff4 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
@@ -104,7 +104,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.artist_website}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.artist_website}
@@ -113,7 +113,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='gallery_website'
                         label={getLangText('Website of related Gallery, Museum, etc.')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.gallery_website}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.gallery_website}
@@ -122,7 +122,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='additional_websites'
                         label={getLangText('Additional Websites/Publications/Museums/Galleries')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.additional_websites}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.additional_websites}
@@ -131,7 +131,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Short text about the Artist')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.conceptual_overview}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.conceptual_overview}
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
index 91c80419..97b1adc7 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
@@ -103,7 +103,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.medium}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.medium}
@@ -112,7 +112,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='size_duration'
                         label={getLangText('Size/Duration')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.size_duration}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.size_duration}
@@ -121,7 +121,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='copyright'
                         label={getLangText('Copyright')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.copyright}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.copyright}
@@ -130,7 +130,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='courtesy_of'
                         label={getLangText('Courtesy of')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.courtesy_of}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.courtesy_of}
@@ -139,7 +139,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='copyright_of_photography'
                         label={getLangText('Copyright of Photography')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.copyright_of_photography}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.copyright_of_photography}
@@ -148,7 +148,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='additional_details'
                         label={getLangText('Additional Details about the artwork')}
-                        expanded={!this.props.disabled && this.props.piece.extra_data.additional_details}>
+                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
                             defaultValue={this.props.piece.extra_data.additional_details}
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index 98fe6715..c40d779d 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -16,6 +16,9 @@ import UserActions from '../../../../../actions/user_actions';
 import PieceStore from '../../../../../stores/piece_store';
 import PieceActions from '../../../../../actions/piece_actions';
 
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
@@ -32,6 +35,7 @@ import ApiUrls from '../../../../../constants/api_urls';
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
+
 let IkonotvRegisterPiece = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func,
@@ -46,8 +50,10 @@ let IkonotvRegisterPiece = React.createClass({
             UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
+            WhitelabelStore.getState(),
             {
-                step: 0
+                step: 0,
+                pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
             });
     },
 
@@ -55,7 +61,9 @@ let IkonotvRegisterPiece = React.createClass({
         PieceListStore.listen(this.onChange);
         UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
         UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
 
         // Before we load the new piece, we reset the piece store to delete old data that we do
         // not want to display to the user.
@@ -79,22 +87,15 @@ let IkonotvRegisterPiece = React.createClass({
         PieceListStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
+        WhitelabelStore.listen(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
-
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // we should also make the fineuploader component editable again
-            this.setState({
-                isFineUploaderActive: true
-            });
-        }
     },
 
 
     handleRegisterSuccess(response){
-
         this.refreshPieceList();
 
         // also start loading the piece for the next step
@@ -108,7 +109,6 @@ let IkonotvRegisterPiece = React.createClass({
             this.incrementStep();
             this.refs.slidesContainer.nextSlide();
         }
-
     },
 
     handleAdditionalDataSuccess() {
@@ -126,6 +126,8 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     handleLoanSuccess(response) {
+        this.setState({ pageExitWarning: null });
+
         let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
@@ -155,22 +157,10 @@ let IkonotvRegisterPiece = React.createClass({
         );
     },
 
-    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 && !this.state.currentUser.email) {
-            this.onLoggedOut();
-        }
-    },
-
-    // basically redirects to the second slide (index: 1), when the user is not logged in
-    onLoggedOut() {
-        this.history.pushState(null, '/login');
-    },
-
     canSubmit() {
         let currentUser = this.state.currentUser;
-        return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit;
+        let whitelabel = this.state.whitelabel;
+        return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
     },
 
     getSlideArtistDetails() {
@@ -209,20 +199,22 @@ let IkonotvRegisterPiece = React.createClass({
 
     getSlideLoan() {
         if (this.canSubmit()) {
+            const { piece, whitelabel } = this.state;
             let today = new Moment();
-            let enddate = new Moment();
-            enddate.add(2, 'years');
+            let endDate = new Moment();
+            endDate.add(2, 'years');
+
             return (
                 <div data-slide-title={getLangText('Loan')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <LoanForm
                                 loanHeading={getLangText('Loan to IkonoTV archive')}
-                                id={{piece_id: this.state.piece.id}}
+                                id={{piece_id: piece.id}}
                                 url={ApiUrls.ownership_loans_pieces}
-                                email="submissions@ikono.org"
-                                startdate={today}
-                                enddate={enddate}
+                                email={whitelabel.user}
+                                startDate={today}
+                                endDate={endDate}
                                 showStartDate={false}
                                 showEndDate={false}
                                 gallery="IkonoTV archive"
@@ -238,6 +230,8 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     render() {
+        const { pageExitWarning } = this.state;
+
         return (
             <SlidesContainer
                 ref="slidesContainer"
@@ -246,7 +240,8 @@ let IkonotvRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}
-                location={this.props.location}>
+                location={this.props.location}
+                pageExitWarning={pageExitWarning}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
@@ -255,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Register work')}
                                 submitMessage={getLangText('Register')}
-                                isFineUploaderActive={this.state.isFineUploaderActive}
+                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut}
                                 location={this.props.location}/>
                         </Col>
                     </Row>
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
new file mode 100644
index 00000000..e68b1781
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
@@ -0,0 +1,84 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+
+let LumenusLanding = React.createClass({
+
+    getInitialState() {
+        return mergeOptions(
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentWillMount() {
+        setDocumentTitle('Lumenus Marketplace');
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper">
+                <div className="row">
+                    <div className="col-xs-12 wp-landing-wrapper">
+                        <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
+                            <img src={this.state.whitelabel.logo} width="150px"/>
+                            <div style={{marginTop: '1em'}}>
+                                {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
+                                <span>
+                                    <span className="icon-ascribe-logo"></span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-sm-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default LumenusLanding;
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
new file mode 100644
index 00000000..1dcdd4e5
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
@@ -0,0 +1,74 @@
+'use strict';
+
+import React from 'react';
+
+import MarketSubmitButton from './market_submit_button';
+
+import DeleteButton from '../../../../../ascribe_buttons/delete_button';
+import EmailButton from '../../../../../ascribe_buttons/acls/email_button';
+import TransferButton from '../../../../../ascribe_buttons/acls/transfer_button';
+import UnconsignButton from '../../../../../ascribe_buttons/acls/unconsign_button';
+
+import UserActions from '../../../../../../actions/user_actions';
+import UserStore from '../../../../../../stores/user_store';
+
+let MarketAclButtonList = React.createClass({
+    propTypes: {
+        availableAcls: React.PropTypes.object.isRequired,
+        className: React.PropTypes.string,
+        pieceOrEditions: React.PropTypes.array,
+        handleSuccess: React.PropTypes.func,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ])
+    },
+
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        UserActions.fetchCurrentUser();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        let { availableAcls, className, pieceOrEditions, handleSuccess } = this.props;
+        return (
+            <div className={className}>
+                <MarketSubmitButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    editions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                <EmailButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    pieceOrEditions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                <TransferButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    pieceOrEditions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                <UnconsignButton
+                    availableAcls={availableAcls}
+                    currentUser={this.state.currentUser}
+                    pieceOrEditions={pieceOrEditions}
+                    handleSuccess={handleSuccess} />
+                {this.props.children}
+            </div>
+        );
+    }
+});
+
+export default MarketAclButtonList;
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
new file mode 100644
index 00000000..d8ef4c41
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
@@ -0,0 +1,160 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+
+import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
+
+import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
+import ConsignForm from '../../../../../ascribe_forms/form_consign';
+
+import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
+
+import AclProxy from '../../../../../acl_proxy';
+
+import PieceActions from '../../../../../../actions/piece_actions';
+import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../../stores/whitelabel_store';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+
+import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils';
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+let MarketSubmitButton = React.createClass({
+    propTypes: {
+        availableAcls: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object,
+        editions: React.PropTypes.array.isRequired,
+        handleSuccess: React.PropTypes.func.isRequired,
+        className: React.PropTypes.string,
+    },
+
+    getInitialState() {
+        return WhitelabelStore.getState();
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    canEditionBeSubmitted(edition) {
+        if (edition && edition.extra_data && edition.other_data) {
+            const { extra_data, other_data } = edition;
+
+            if (extra_data.artist_bio && extra_data.work_description &&
+                extra_data.technology_details && extra_data.display_instructions &&
+                other_data.length > 0) {
+                return true;
+            }
+        }
+
+        return false;
+    },
+
+    getFormDataId() {
+        return getAclFormDataId(false, this.props.editions);
+    },
+
+    getAggregateEditionDetails() {
+        const { editions } = this.props;
+
+        // Currently, we only care if all the given editions are from the same parent piece
+        // and if they can be submitted
+        return editions.reduce((details, curEdition) => {
+            return {
+                solePieceId: details.solePieceId === curEdition.parent ? details.solePieceId : null,
+                canSubmit: details.canSubmit && this.canEditionBeSubmitted(curEdition)
+            };
+        }, {
+            solePieceId: editions.length > 0 ? editions[0].parent : null,
+            canSubmit: this.canEditionBeSubmitted(editions[0])
+        });
+    },
+
+    handleAdditionalDataSuccess(pieceId) {
+        // Fetch newly updated piece to update the views
+        PieceActions.fetchOne(pieceId);
+
+        this.refs.consignModal.show();
+    },
+
+    render() {
+        const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
+        const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
+        const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
+        const message = getAclFormMessage({
+            aclName: 'acl_consign',
+            entities: editions,
+            isPiece: false,
+            additionalMessage: getLangText('Suggested price:'),
+            senderName: currentUser.username
+        });
+
+        const triggerButton = (
+            <button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
+                {getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
+            </button>
+        );
+        const consignForm = (
+            <AclFormFactory
+                action='acl_consign'
+                autoFocusProperty='message'
+                email={whitelabelAdminEmail}
+                message={message}
+                labels={{
+                    'message': getLangText('Message (also suggest a sales price if necessary)')
+                }}
+                pieceOrEditions={editions}
+                showNotification />
+        );
+
+        if (solePieceId && !canSubmit) {
+            return (
+                <AclProxy
+                    aclObject={availableAcls}
+                    aclName='acl_consign'>
+                    <ModalWrapper
+                        trigger={triggerButton}
+                        handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
+                        title={getLangText('Add additional information')}>
+                        <MarketAdditionalDataForm
+                            pieceId={solePieceId}
+                            submitLabel={getLangText('Continue to consignment')} />
+                    </ModalWrapper>
+
+                    <ModalWrapper
+                        ref="consignModal"
+                        handleSuccess={handleSuccess}
+                        title={getLangText('Consign artwork')}>
+                        {consignForm}
+                    </ModalWrapper>
+                </AclProxy>
+            );
+        } else {
+            return (
+                <AclProxy
+                    show={availableAcls.acl_consign && canSubmit}>
+                    <ModalWrapper
+                        trigger={triggerButton}
+                        handleSuccess={handleSuccess}
+                        title={getLangText('Consign artwork to %s', whitelabelName)}>
+                        {consignForm}
+                    </ModalWrapper>
+                </AclProxy>
+            );
+        }
+    }
+});
+
+export default MarketSubmitButton;
diff --git a/js/components/whitelabel/wallet/components/market/market_detail/market_edition_container.js b/js/components/whitelabel/wallet/components/market/market_detail/market_edition_container.js
new file mode 100644
index 00000000..97284dbc
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_detail/market_edition_container.js
@@ -0,0 +1,24 @@
+'use strict';
+
+import React from 'react';
+
+import MarketFurtherDetails from './market_further_details';
+
+import MarketAclButtonList from '../market_buttons/market_acl_button_list';
+
+import EditionContainer from '../../../../../ascribe_detail/edition_container';
+
+let MarketEditionContainer = React.createClass({
+    propTypes: EditionContainer.propTypes,
+
+    render() {
+        return (
+            <EditionContainer
+                {...this.props}
+                actionPanelButtonListType={MarketAclButtonList}
+                furtherDetailsType={MarketFurtherDetails} />
+        );
+    }
+});
+
+export default MarketEditionContainer;
diff --git a/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js b/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
new file mode 100644
index 00000000..4e1e3ee8
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
@@ -0,0 +1,23 @@
+'use strict';
+
+import React from 'react';
+
+import MarketAdditionalDataForm from '../market_forms/market_additional_data_form'
+
+let MarketFurtherDetails = React.createClass({
+    propTypes: {
+        pieceId: React.PropTypes.number,
+        handleSuccess: React.PropTypes.func,
+    },
+
+    render() {
+        return (
+            <MarketAdditionalDataForm
+                {...this.props}
+                isInline
+                showNotification />
+        );
+    }
+});
+
+export default MarketFurtherDetails;
diff --git a/js/components/whitelabel/wallet/components/market/market_detail/market_piece_container.js b/js/components/whitelabel/wallet/components/market/market_detail/market_piece_container.js
new file mode 100644
index 00000000..d41ade56
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_detail/market_piece_container.js
@@ -0,0 +1,21 @@
+'use strict';
+
+import React from 'react';
+
+import MarketFurtherDetails from './market_further_details';
+
+import PieceContainer from '../../../../../ascribe_detail/piece_container';
+
+let MarketPieceContainer = React.createClass({
+    propTypes: PieceContainer.propTypes,
+
+    render() {
+        return (
+            <PieceContainer
+                {...this.props}
+                furtherDetailsType={MarketFurtherDetails} />
+        );
+    }
+});
+
+export default MarketPieceContainer;
diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
new file mode 100644
index 00000000..d136c9cf
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
@@ -0,0 +1,235 @@
+'use strict';
+
+import React from 'react';
+
+import Form from '../../../../../ascribe_forms/form';
+import Property from '../../../../../ascribe_forms/property';
+
+import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
+
+import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
+import AscribeSpinner from '../../../../../ascribe_spinner';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
+import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
+
+import PieceActions from '../../../../../../actions/piece_actions';
+import PieceStore from '../../../../../../stores/piece_store';
+
+import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+
+import requests from '../../../../../../utils/requests';
+import { mergeOptions } from '../../../../../../utils/general_utils';
+import { getLangText } from '../../../../../../utils/lang_utils';
+
+
+let MarketAdditionalDataForm = React.createClass({
+    propTypes: {
+        pieceId: React.PropTypes.oneOfType([
+            React.PropTypes.number,
+            React.PropTypes.string
+        ]),
+        editable: React.PropTypes.bool,
+        isInline: React.PropTypes.bool,
+        showHeading: React.PropTypes.bool,
+        showNotification: React.PropTypes.bool,
+        submitLabel: React.PropTypes.string,
+        handleSuccess: React.PropTypes.func
+    },
+
+    getDefaultProps() {
+        return {
+            editable: true,
+            submitLabel: getLangText('Register work')
+        };
+    },
+
+    getInitialState() {
+        const pieceStore = PieceStore.getState();
+
+        return mergeOptions(
+            pieceStore,
+            {
+                // Allow the form to be submitted if there's already an additional image uploaded
+                isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
+                forceUpdateKey: 0
+            });
+    },
+
+    componentDidMount() {
+        PieceStore.listen(this.onChange);
+
+        if (this.props.pieceId) {
+            PieceActions.fetchOne(this.props.pieceId);
+        }
+    },
+
+    componentWillUnmount() {
+        PieceStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        Object.assign({}, state, {
+            // Allow the form to be submitted if the updated piece already has an additional image uploaded
+            isUploadReady: this.isUploadReadyOnChange(state.piece),
+
+            /**
+             * Increment the forceUpdateKey to force the form to rerender on each change
+             *
+             * THIS IS A HACK TO MAKE SURE THE FORM ALWAYS DISPLAYS THE MOST RECENT STATE
+             * BECAUSE SOME OF OUR FORM ELEMENTS DON'T UPDATE FROM PROP CHANGES (ie.
+             * InputTextAreaToggable).
+             */
+            forceUpdateKey: this.state.forceUpdateKey + 1
+        });
+
+        this.setState(state);
+    },
+
+    getFormData() {
+        let extradata = {};
+        let formRefs = this.refs.form.refs;
+
+        // Put additional fields in extra data object
+        Object
+            .keys(formRefs)
+            .forEach((fieldName) => {
+                extradata[fieldName] = formRefs[fieldName].state.value;
+            });
+
+        return {
+            extradata: extradata,
+            piece_id: this.state.piece.id
+        };
+    },
+
+    isUploadReadyOnChange(piece) {
+        return piece && piece.other_data && piece.other_data.length > 0;
+    },
+
+    handleSuccessWithNotification() {
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess();
+        }
+
+        let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    render() {
+        const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
+        const { piece } = this.state;
+        let buttons, heading;
+
+        let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
+
+        if (!isInline) {
+            buttons = (
+                <button
+                    type="submit"
+                    className="btn btn-default btn-wide"
+                    disabled={!this.state.isUploadReady}>
+                    {submitLabel}
+                </button>
+            );
+
+            spinner = (
+                <div className="modal-footer">
+                    <p className="pull-right">
+                        {spinner}
+                    </p>
+                </div>
+            );
+
+            heading = showHeading ? (
+                <div className="ascribe-form-header">
+                    <h3>
+                        {getLangText('Provide additional details')}
+                    </h3>
+                </div>
+            ) : null;
+        }
+
+        if (piece && piece.id) {
+            return (
+                <Form
+                    className="ascribe-form-bordered"
+                    ref='form'
+                    key={this.state.forceUpdateKey}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
+                    handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
+                    getFormData={this.getFormData}
+                    buttons={buttons}
+                    spinner={spinner}
+                    disabled={!this.props.editable || !piece.acl.acl_edit}>
+                    {heading}
+                    <FurtherDetailsFileuploader
+                        label={getLangText('Marketplace Thumbnail Image')}
+                        submitFile={function () {}}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+                        pieceId={piece.id}
+                        otherData={piece.other_data}
+                        editable={editable} />
+                    <Property
+                        name='artist_bio'
+                        label={getLangText('Artist Bio')}
+                        expanded={editable || !!piece.extra_data.artist_bio}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.artist_bio}
+                            placeholder={getLangText('Enter a biography of the artist...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='work_description'
+                        label={getLangText('Work Description')}
+                        expanded={editable || !!piece.extra_data.work_description}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.work_description}
+                            placeholder={getLangText('Enter a description of the work...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='technology_details'
+                        label={getLangText('Technology Details')}
+                        expanded={editable || !!piece.extra_data.technology_details}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.technology_details}
+                            placeholder={getLangText('Enter technological details about the work...')}
+                            required />
+                    </Property>
+                    <Property
+                        name='display_instructions'
+                        label={getLangText('Display Instructions')}
+                        expanded={editable || !!piece.extra_data.display_instructions}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            defaultValue={piece.extra_data.display_instructions}
+                            placeholder={getLangText('Enter instructions on how to best display the work...')}
+                            required />
+                    </Property>
+                </Form>
+            );
+        } else {
+            return (
+                <div className="ascribe-loading-position">
+                    {spinner}
+                </div>
+            );
+        }
+    }
+});
+
+export default MarketAdditionalDataForm;
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
new file mode 100644
index 00000000..1c74e6de
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -0,0 +1,90 @@
+'use strict';
+
+import React from 'react';
+
+import MarketAclButtonList from './market_buttons/market_acl_button_list';
+
+import PieceList from '../../../../piece_list';
+
+import UserActions from '../../../../../actions/user_actions';
+import UserStore from '../../../../../stores/user_store';
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+import { getLangText } from '../../../../../utils/lang_utils';
+
+let MarketPieceList = React.createClass({
+    propTypes: {
+        customThumbnailPlaceholder: React.PropTypes.func,
+        location: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentWillMount() {
+        setDocumentTitle(getLangText('Collection'));
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        const { customThumbnailPlaceholder, location } = this.props;
+        const {
+            currentUser: { email: userEmail },
+            whitelabel: {
+                name: whitelabelName = 'Market',
+                user: whitelabelAdminEmail
+            } } = this.state;
+
+        let filterParams = null;
+        let canLoadPieceList = false;
+
+        if (userEmail && whitelabelAdminEmail) {
+            canLoadPieceList = true;
+            const isUserAdmin = userEmail === whitelabelAdminEmail;
+
+            filterParams = [{
+                label: getLangText('Show works I can'),
+                items: [{
+                    key: isUserAdmin ? 'acl_transfer' : 'acl_consign',
+                    label: getLangText(isUserAdmin ? 'transfer' : 'consign to %s', whitelabelName),
+                    defaultValue: true
+                }]
+            }];
+        }
+
+        return (
+            <PieceList
+                canLoadPieceList={canLoadPieceList}
+                redirectTo="/register_piece?slide_num=0"
+                bulkModalButtonListType={MarketAclButtonList}
+                customThumbnailPlaceholder={customThumbnailPlaceholder}
+                filterParams={filterParams}
+                location={location} />
+        );
+    }
+});
+
+export default MarketPieceList;
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
new file mode 100644
index 00000000..387934f9
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -0,0 +1,174 @@
+'use strict';
+
+import React from 'react';
+import { History } from 'react-router';
+
+import Col from 'react-bootstrap/lib/Col';
+import Row from 'react-bootstrap/lib/Row';
+
+import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
+
+import Property from '../../../../ascribe_forms/property';
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+
+import PieceActions from '../../../../../actions/piece_actions';
+import PieceListStore from '../../../../../stores/piece_list_store';
+import PieceListActions from '../../../../../actions/piece_list_actions';
+import UserStore from '../../../../../stores/user_store';
+import UserActions from '../../../../../actions/user_actions';
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+import { mergeOptions } from '../../../../../utils/general_utils';
+
+let MarketRegisterPiece = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
+    mixins: [History],
+
+    getInitialState(){
+        return mergeOptions(
+            PieceListStore.getState(),
+            UserStore.getState(),
+            WhitelabelStore.getState(),
+            {
+                step: 0
+            });
+    },
+
+    componentDidMount() {
+        PieceListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+
+        // Reset the piece store to make sure that we don't display old data
+        // if the user repeatedly registers works
+        PieceActions.updatePiece({});
+    },
+
+    componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    handleRegisterSuccess(response) {
+        this.refreshPieceList();
+
+        // Use the response's piece for the next step if available
+        let pieceId = null;
+        if (response && response.piece) {
+            pieceId = response.piece.id;
+            PieceActions.updatePiece(response.piece);
+        }
+
+        this.incrementStep();
+        this.refs.slidesContainer.nextSlide({ piece_id: pieceId });
+    },
+
+    handleAdditionalDataSuccess() {
+        this.refreshPieceList();
+
+        this.history.pushState(null, '/collection');
+    },
+
+    // We need to increase the step to lock the forms that are already filled out
+    incrementStep() {
+        this.setState({
+            step: this.state.step + 1
+        });
+    },
+
+    getPieceFromQueryParam() {
+        const queryParams = this.props.location.query;
+
+        // Since every step of this register process is atomic,
+        // we may need to enter the process at step 1 or 2.
+        // If this is the case, we'll need the piece number to complete submission.
+        // It is encoded in the URL as a queryParam and we're checking for it here.
+        return queryParams && queryParams.piece_id;
+    },
+
+    refreshPieceList() {
+        PieceListActions.fetchPieceList(
+            this.state.page,
+            this.state.pageSize,
+            this.state.searchTerm,
+            this.state.orderBy,
+            this.state.orderAsc,
+            this.state.filterBy
+        );
+    },
+
+    render() {
+        const {
+            step,
+            whitelabel: {
+                name: whitelabelName = 'Market'
+            } } = this.state;
+
+        setDocumentTitle(getLangText('Register a new piece'));
+
+        return (
+            <SlidesContainer
+                ref="slidesContainer"
+                forwardProcess={true}
+                glyphiconClassNames={{
+                    pending: 'glyphicon glyphicon-chevron-right',
+                    completed: 'glyphicon glyphicon-lock'
+                }}
+                location={this.props.location}>
+                <div data-slide-title={getLangText('Register work')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <RegisterPieceForm
+                                disabled={step > 0}
+                                enableLocalHashing={false}
+                                headerMessage={getLangText('Consign to %s', whitelabelName)}
+                                submitMessage={getLangText('Proceed to additional details')}
+                                isFineUploaderActive={true}
+                                enableSeparateThumbnail={false}
+                                handleSuccess={this.handleRegisterSuccess}
+                                location={this.props.location}>
+                                <Property
+                                    name="num_editions"
+                                    label={getLangText('Specify editions')}>
+                                    <input
+                                        type="number"
+                                        placeholder="(e.g. 32)"
+                                        min={0}
+                                        required />
+                                </Property>
+                            </RegisterPieceForm>
+                        </Col>
+                    </Row>
+                </div>
+                <div data-slide-title={getLangText('Additional details')}>
+                    <Row className="no-margin">
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <MarketAdditionalDataForm
+                                handleSuccess={this.handleAdditionalDataSuccess}
+                                pieceId={this.getPieceFromQueryParam()}
+                                showHeading />
+                        </Col>
+                    </Row>
+                </div>
+            </SlidesContainer>
+        );
+    }
+});
+
+export default MarketRegisterPiece;
diff --git a/js/components/whitelabel/wallet/constants/wallet_api_urls.js b/js/components/whitelabel/wallet/constants/wallet_api_urls.js
index 2cdc0054..8ad2eb81 100644
--- a/js/components/whitelabel/wallet/constants/wallet_api_urls.js
+++ b/js/components/whitelabel/wallet/constants/wallet_api_urls.js
@@ -4,22 +4,30 @@ import walletConstants from './wallet_application_constants';
 
 // gets subdomain as a parameter
 function getWalletApiUrls(subdomain) {
-    if (subdomain === 'cyland'){
+    if (subdomain === 'cyland') {
         return {
             'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
-    }
-    else if (subdomain === 'ikonotv'){
+    } else if (subdomain === 'ikonotv') {
         return {
             'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
+    } else if (subdomain === 'lumenus' || subdomain === '23vivi') {
+        return {
+            'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
+            'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',
+            'pieces_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/',
+            'piece': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/',
+            'piece_extradata': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/extradata/',
+            'user': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/users/'
+        };
     }
     return {};
 }
 
-export default getWalletApiUrls;
\ No newline at end of file
+export default getWalletApiUrls;
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 5056716a..c2810fd0 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -32,7 +32,7 @@ let WalletApp = React.createClass({
 
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
-            && (['ikonotv']).indexOf(subdomain) > -1) {
+            && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
             header = <Header showAddWork={true} routes={routes} />;
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index 8e4d5197..0a4e3a58 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -16,6 +16,8 @@ import SettingsContainer from '../../../components/ascribe_settings/settings_con
 import ContractSettings from '../../../components/ascribe_settings/contract_settings';
 import ErrorNotFoundPage from '../../../components/error_not_found_page';
 
+import CCRegisterPiece from './components/cc/cc_register_piece';
+
 import CylandLanding from './components/cyland/cyland_landing';
 import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
 import CylandRegisterPiece from './components/cyland/cyland_register_piece';
@@ -23,12 +25,20 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
 
 import IkonotvLanding from './components/ikonotv/ikonotv_landing';
 import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
-import ContractAgreementForm from '../../../components/ascribe_forms/form_contract_agreement';
+import SendContractAgreementForm from '../../../components/ascribe_forms/form_send_contract_agreement';
 import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
 import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
 import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
 
-import CCRegisterPiece from './components/cc/cc_register_piece';
+import MarketPieceList from './components/market/market_piece_list';
+import MarketRegisterPiece from './components/market/market_register_piece';
+import MarketPieceContainer from './components/market/market_detail/market_piece_container';
+import MarketEditionContainer from './components/market/market_detail/market_edition_container';
+
+import LumenusLanding from './components/lumenus/lumenus_landing';
+
+import Vivi23Landing from './components/23vivi/23vivi_landing';
+import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
 
 import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler';
 
@@ -128,7 +138,7 @@ let ROUTES = {
                 component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
             <Route
                 path='request_loan'
-                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractAgreementForm)}
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SendContractAgreementForm)}
                 headerTitle='SEND NEW CONTRACT'
                 aclName='acl_create_contractagreement'/>
             <Route
@@ -148,10 +158,80 @@ let ROUTES = {
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
+    ),
+    'lumenus': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LumenusLanding)} />
+            <Route
+                path='login'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
+            <Route
+                path='logout'
+                component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
+            <Route
+                path='signup'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
+            <Route
+                path='contract_settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
+            <Route
+                path='register_piece'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'/>
+            <Route
+                path='collection'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketPieceList)}
+                headerTitle='COLLECTION'/>
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
+    ),
+    '23vivi': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(Vivi23Landing)} />
+            <Route
+                path='login'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
+            <Route
+                path='logout'
+                component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
+            <Route
+                path='signup'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
+            <Route
+                path='contract_settings'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
+            <Route
+                path='register_piece'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit'/>
+            <Route
+                path='collection'
+                component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(Vivi23PieceList)}
+                headerTitle='COLLECTION'/>
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
     )
 };
 
-
 function getRoutes(commonRoutes, subdomain) {
     if(subdomain in ROUTES) {
         return ROUTES[subdomain];
@@ -160,5 +240,4 @@ function getRoutes(commonRoutes, subdomain) {
     }
 }
 
-
 export default getRoutes;
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index a07f29b1..e7f11141 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -72,6 +72,9 @@ let ApiUrls = {
     'users_username': AppConstants.apiEndpoint + 'users/username/',
     'users_profile': AppConstants.apiEndpoint + 'users/profile/',
     'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
+    'webhook': AppConstants.apiEndpoint + 'webhooks/${webhook_id}/',
+    'webhooks': AppConstants.apiEndpoint + 'webhooks/',
+    'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
     'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
     'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
     'prize_list': AppConstants.apiEndpoint + 'prize/'
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 79d00747..74edc51b 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -51,6 +51,20 @@ const constants = {
             'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
+        {
+            'subdomain': 'lumenus',
+            'name': 'Lumenus',
+            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
+            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
+            'type': 'wallet'
+        },
+        {
+            'subdomain': '23vivi',
+            'name': '23VIVI',
+            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
+            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
+            'type': 'wallet'
+        },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',
@@ -124,7 +138,12 @@ const constants = {
     },
     'twitter': {
         'sdkUrl': 'https://platform.twitter.com/widgets.js'
-    }
+    },
+
+    'errorMessagesToIgnore': [
+        'Authentication credentials were not provided.',
+        'Informations d\'authentification non fournies.'
+    ]
 };
 
 export default constants;
diff --git a/js/mixins/react_error.js b/js/mixins/react_error.js
new file mode 100644
index 00000000..14f33a61
--- /dev/null
+++ b/js/mixins/react_error.js
@@ -0,0 +1,16 @@
+'use strict';
+
+import invariant from 'invariant';
+
+const ReactError = {
+    throws(err) {
+        if(!err.handler) {
+            invariant(err.handler, 'Error thrown to ReactError did not have a `handler` function');
+            console.logGlobal('Error thrown to ReactError did not have a `handler` function');
+        } else {
+            err.handler(this, err);
+        }
+    }
+};
+
+export default ReactError;
diff --git a/js/models/errors.js b/js/models/errors.js
new file mode 100644
index 00000000..4573afe4
--- /dev/null
+++ b/js/models/errors.js
@@ -0,0 +1,31 @@
+'use strict';
+
+import React from 'react';
+
+import ErrorNotFoundPage from '../components/error_not_found_page';
+
+
+export class ResourceNotFoundError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = this.constructor.name;
+        this.message = message;
+
+        // `captureStackTrace` might not be available in IE:
+        // - http://stackoverflow.com/a/8460753/1263876
+        if(Error.captureStackTrace) {
+            Error.captureStackTrace(this, this.constructor.name);
+        }
+    }
+
+    handler(component, err) {
+        const monkeyPatchedKey = `_${this.name}MonkeyPatched`;
+
+        if(!component.state[monkeyPatchedKey]) {
+            component.render = () => <ErrorNotFoundPage message={err.message} />;
+            component.setState({
+                [monkeyPatchedKey]: true
+            });
+        }
+    }
+}
diff --git a/js/sources/webhook_source.js b/js/sources/webhook_source.js
new file mode 100644
index 00000000..5351c89c
--- /dev/null
+++ b/js/sources/webhook_source.js
@@ -0,0 +1,46 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+import WebhookActions from '../actions/webhook_actions';
+
+
+const WebhookSource = {
+    lookupWebhooks: {
+        remote() {
+            return requests.get('webhooks');
+        },
+        local(state) {
+            return state.webhooks && !Object.keys(state.webhooks).length ? state : {};
+        },
+        success: WebhookActions.successFetchWebhooks,
+        error: WebhookActions.errorWebhooks,
+        shouldFetch(state) {
+            return state.webhookMeta.invalidateCache || state.webhooks && !Object.keys(state.webhooks).length;
+        }
+    },
+
+    lookupWebhookEvents: {
+        remote() {
+            return requests.get('webhooks_events');
+        },
+        local(state) {
+            return state.webhookEvents && !Object.keys(state.webhookEvents).length ? state : {};
+        },
+        success: WebhookActions.successFetchWebhookEvents,
+        error: WebhookActions.errorWebhookEvents,
+        shouldFetch(state) {
+            return state.webhookEventsMeta.invalidateCache || state.webhookEvents && !Object.keys(state.webhookEvents).length;
+        }
+    },
+
+    performRemoveWebhook: {
+        remote(state) {
+            return requests.delete('webhook', {'webhook_id': state.webhookMeta.idToDelete });
+        },
+        success: WebhookActions.successRemoveWebhook,
+        error: WebhookActions.errorWebhooks
+    }
+};
+
+export default WebhookSource;
\ No newline at end of file
diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js
index 4ccada4e..107f9af4 100644
--- a/js/stores/edition_list_store.js
+++ b/js/stores/edition_list_store.js
@@ -60,7 +60,7 @@ class EditionListStore {
      * We often just have to refresh the edition list for a certain pieceId,
      * this method provides exactly that functionality without any side effects
      */
-    onRefreshEditionList({pieceId, filterBy}) {
+    onRefreshEditionList({pieceId, filterBy = {}}) {
         // It may happen that the user enters the site logged in already
         // through /editions
         // If he then tries to delete a piece/edition and this method is called,
diff --git a/js/stores/edition_store.js b/js/stores/edition_store.js
index 14ee4fee..22e78d23 100644
--- a/js/stores/edition_store.js
+++ b/js/stores/edition_store.js
@@ -7,11 +7,17 @@ import EditionActions from '../actions/edition_actions';
 class EditionStore {
     constructor() {
         this.edition = {};
+        this.editionError = null;
         this.bindActions(EditionActions);
     }
 
     onUpdateEdition(edition) {
         this.edition = edition;
+        this.editionError = null;
+    }
+
+    onEditionFailed(error) {
+        this.editionError = error;
     }
 }
 
diff --git a/js/stores/global_notification_store.js b/js/stores/global_notification_store.js
index 5a23fe1b..7414812b 100644
--- a/js/stores/global_notification_store.js
+++ b/js/stores/global_notification_store.js
@@ -4,36 +4,63 @@ import { alt } from '../alt';
 
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
+const GLOBAL_NOTIFICATION_COOLDOWN = 400;
+
 class GlobalNotificationStore {
     constructor() {
-        this.notificationQue = [];
+        this.notificationQueue = [];
+        this.notificationStatus = 'ready';
+        this.notificationsPaused = false;
 
         this.bindActions(GlobalNotificationActions);
     }
 
     onAppendGlobalNotification(newNotification) {
-        let notificationDelay = 0;
-        for(let i = 0; i < this.notificationQue.length; i++) {
-            notificationDelay += this.notificationQue[i].dismissAfter;
-        }
+        this.notificationQueue.push(newNotification);
 
-        this.notificationQue.push(newNotification);
-        setTimeout(GlobalNotificationActions.emulateEmptyStore, notificationDelay + newNotification.dismissAfter);
+        if (!this.notificationsPaused && this.notificationStatus === 'ready') {
+            this.showNextNotification();
+        }
     }
 
-    onEmulateEmptyStore() {
-        let actualNotificitionQue = this.notificationQue.slice();
+    showNextNotification() {
+        this.notificationStatus = 'show';
 
-        this.notificationQue = [];
+        setTimeout(GlobalNotificationActions.cooldownGlobalNotifications, this.notificationQueue[0].dismissAfter);
+    }
 
-        setTimeout(() => {
-            this.notificationQue = actualNotificitionQue.slice();
-            GlobalNotificationActions.shiftGlobalNotification();
-        }, 400);
+    onCooldownGlobalNotifications() {
+        // When still paused on cooldown, don't shift the queue so we can repeat the current notification.
+        if (!this.notificationsPaused) {
+            this.notificationStatus = 'cooldown';
+
+            // Leave some time between consecutive notifications
+            setTimeout(GlobalNotificationActions.shiftGlobalNotification, GLOBAL_NOTIFICATION_COOLDOWN);
+        } else {
+            this.notificationStatus = 'ready';
+        }
     }
 
     onShiftGlobalNotification() {
-        this.notificationQue.shift();
+        this.notificationQueue.shift();
+
+        if (!this.notificationsPaused && this.notificationQueue.length > 0) {
+            this.showNextNotification();
+        } else {
+            this.notificationStatus = 'ready';
+        }
+    }
+
+    onPauseGlobalNotifications() {
+        this.notificationsPaused = true;
+    }
+
+    onResumeGlobalNotifications() {
+        this.notificationsPaused = false;
+
+        if (this.notificationStatus === 'ready' && this.notificationQueue.length > 0) {
+            this.showNextNotification();
+        }
     }
 }
 
diff --git a/js/stores/piece_store.js b/js/stores/piece_store.js
index ccef50b1..3b04736b 100644
--- a/js/stores/piece_store.js
+++ b/js/stores/piece_store.js
@@ -7,11 +7,13 @@ import PieceActions from '../actions/piece_actions';
 class PieceStore {
     constructor() {
         this.piece = {};
+        this.pieceError = null;
         this.bindActions(PieceActions);
     }
 
     onUpdatePiece(piece) {
         this.piece = piece;
+        this.pieceError = null;
     }
 
     onUpdateProperty({key, value}) {
@@ -21,6 +23,10 @@ class PieceStore {
             throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
         }
     }
+
+    onPieceFailed(err) {
+        this.pieceError = err;
+    }
 }
 
 export default alt.createStore(PieceStore, 'PieceStore');
diff --git a/js/stores/webhook_store.js b/js/stores/webhook_store.js
new file mode 100644
index 00000000..7dfcc61d
--- /dev/null
+++ b/js/stores/webhook_store.js
@@ -0,0 +1,88 @@
+'use strict';
+
+import { alt } from '../alt';
+import WebhookActions from '../actions/webhook_actions';
+
+import WebhookSource from '../sources/webhook_source';
+
+class WebhookStore {
+    constructor() {
+        this.webhooks = [];
+        this.webhookEvents = [];
+        this.webhookMeta = {
+            invalidateCache: false,
+            err: null,
+            idToDelete: null
+        };
+        this.webhookEventsMeta = {
+            invalidateCache: false,
+            err: null
+        };
+
+        this.bindActions(WebhookActions);
+        this.registerAsync(WebhookSource);
+    }
+
+    onFetchWebhooks(invalidateCache) {
+        this.webhookMeta.invalidateCache = invalidateCache;
+        this.getInstance().lookupWebhooks();
+    }
+
+    onSuccessFetchWebhooks({ webhooks }) {
+        this.webhookMeta.invalidateCache = false;
+        this.webhookMeta.err = null;
+        this.webhooks = webhooks;
+
+        this.webhookEventsMeta.invalidateCache = true;
+        this.getInstance().lookupWebhookEvents();
+    }
+
+    onFetchWebhookEvents(invalidateCache) {
+        this.webhookEventsMeta.invalidateCache = invalidateCache;
+        this.getInstance().lookupWebhookEvents();
+    }
+
+    onSuccessFetchWebhookEvents({ events }) {
+        this.webhookEventsMeta.invalidateCache = false;
+        this.webhookEventsMeta.err = null;
+
+        // remove all events that have already been used.
+        const usedEvents = this.webhooks
+                                .reduce((tempUsedEvents, webhook) => {
+                                    tempUsedEvents.push(webhook.event.split('.')[0]);
+                                    return tempUsedEvents;
+                                }, []);
+
+        this.webhookEvents = events.filter((event) => {
+            return usedEvents.indexOf(event) === -1;
+        });
+    }
+
+    onRemoveWebhook(id) {
+        this.webhookMeta.invalidateCache = true;
+        this.webhookMeta.idToDelete = id;
+
+        if(!this.getInstance().isLoading()) {
+            this.getInstance().performRemoveWebhook();
+        }
+    }
+
+    onSuccessRemoveWebhook() {
+        this.webhookMeta.idToDelete = null;
+        if(!this.getInstance().isLoading()) {
+            this.getInstance().lookupWebhooks();
+        }
+    }
+
+    onErrorWebhooks(err) {
+        console.logGlobal(err);
+        this.webhookMeta.err = err;
+    }
+
+    onErrorWebhookEvents(err) {
+        console.logGlobal(err);
+        this.webhookEventsMeta.err = err;
+    }
+}
+
+export default alt.createStore(WebhookStore, 'WebhookStore');
diff --git a/js/utils/acl_utils.js b/js/utils/acl_utils.js
index fc3987c1..dd39a380 100644
--- a/js/utils/acl_utils.js
+++ b/js/utils/acl_utils.js
@@ -4,7 +4,7 @@ import { sanitize, intersectLists } from './general_utils';
 
 export function getAvailableAcls(editions, filterFn) {
     let availableAcls = [];
-    if (!editions || editions.constructor !== Array){
+    if (!editions || editions.constructor !== Array) {
         return [];
     }
     // if you copy a javascript array of objects using slice, then
@@ -33,23 +33,23 @@ export function getAvailableAcls(editions, filterFn) {
     });
 
     // If no edition has been selected, availableActions is empty
-    // If only one edition has been selected, their actions are available
-    // If more than one editions have been selected, their acl properties are intersected
-    if(editionsCopy.length >= 1) {
+    // If only one edition has been selected, its actions are available
+    // If more than one editions have been selected, intersect all their acl properties
+    if (editionsCopy.length >= 1) {
         availableAcls = editionsCopy[0].acl;
-    }
-    if(editionsCopy.length >= 2) {
-        for(let i = 1; i < editionsCopy.length; i++) {
-            availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
+
+        if (editionsCopy.length >= 2) {
+            for (let i = 1; i < editionsCopy.length; i++) {
+                availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
+            }
         }
     }
 
     // convert acls back to key-value object
     let availableAclsObj = {};
-    for(let i = 0; i < availableAcls.length; i++) {
+    for (let i = 0; i < availableAcls.length; i++) {
         availableAclsObj[availableAcls[i]] = true;
     }
 
-
     return availableAclsObj;
-}
\ No newline at end of file
+}
diff --git a/js/utils/error_utils.js b/js/utils/error_utils.js
index e80819dc..a10f1268 100644
--- a/js/utils/error_utils.js
+++ b/js/utils/error_utils.js
@@ -12,7 +12,8 @@ import AppConstants from '../constants/application_constants';
  * @param  {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
  * @param  {string} comment  Will also be submitted to Sentry, but will not be logged
  */
-function logGlobal(error, ignoreSentry, comment) {
+function logGlobal(error, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1,
+                   comment) {
     console.error(error);
 
     if(!ignoreSentry) {
diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js
index f5d6ba99..9c1423b3 100644
--- a/js/utils/file_utils.js
+++ b/js/utils/file_utils.js
@@ -89,11 +89,16 @@ export function computeHashOfFile(file) {
 /**
  * Extracts a file extension from a string, by splitting by dot and taking
  * the last substring
+ *
+ * If a file without an extension is submitted (file), then
+ * this method just returns an empty string.
  * @param  {string} s file's name + extension
  * @return {string}   file extension
  *
  * Via: http://stackoverflow.com/a/190878/1263876
  */
 export function extractFileExtensionFromString(s) {
-    return s.split('.').pop();
+    const explodedFileName = s.split('.');
+    return explodedFileName.length > 1 ? explodedFileName.pop()
+                                       : '';
 }
\ No newline at end of file
diff --git a/js/utils/form_utils.js b/js/utils/form_utils.js
index c15eb067..8d12a8c1 100644
--- a/js/utils/form_utils.js
+++ b/js/utils/form_utils.js
@@ -2,6 +2,8 @@
 
 import { getLangText } from './lang_utils';
 
+import AppConstants from '../constants/application_constants';
+
 /**
  * Get the data ids of the given piece or editions.
  * @param  {boolean} isPiece                   Is the given entities parameter a piece? (False: array of editions)
@@ -70,6 +72,10 @@ export function getAclFormMessage(options) {
         throw new Error('Your specified aclName did not match a an acl class.');
     }
 
+    if (options.additionalMessage) {
+        message += '\n\n' + options.additionalMessage;
+    }
+
     if (options.senderName) {
         message += '\n\n';
         message += getLangText('Truly yours,');
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index b15a0525..a3336d80 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -1,5 +1,11 @@
 'use strict';
 
+/**
+ * Checks shallow equality
+ * Re-export of shallow from shallow-equals
+ */
+export { default as isShallowEqual } from 'shallow-equals';
+
 /**
  * Takes an object and returns a shallow copy without any keys
  * that fail the passed in filter function.
@@ -109,7 +115,7 @@ function _doesObjectListHaveDuplicates(l) {
 export function mergeOptions(...l) {
     // If the objects submitted in the list have duplicates,in their key names,
     // abort the merge and tell the function's user to check his objects.
-    if(_doesObjectListHaveDuplicates(l)) {
+    if (_doesObjectListHaveDuplicates(l)) {
         throw new Error('The objects you submitted for merging have duplicates. Merge aborted.');
     }
 
diff --git a/js/utils/inject_utils.js b/js/utils/inject_utils.js
index 174ac8b6..e9430a5e 100644
--- a/js/utils/inject_utils.js
+++ b/js/utils/inject_utils.js
@@ -12,16 +12,16 @@ let mapTag = {
     css: 'link'
 };
 
+let tags = {};
+
 function injectTag(tag, src) {
-    return Q.Promise((resolve, reject) => {
-        if (isPresent(tag, src)) {
-            resolve();
-        } else {
+    if(!tags[src]) {
+        tags[src] = Q.Promise((resolve, reject) => {
             let attr = mapAttr[tag];
             let element = document.createElement(tag);
             if (tag === 'script') {
-                element.onload = () => resolve();
-                element.onerror = () => reject();
+                element.onload = resolve;
+                element.onerror = reject;
             } else {
                 resolve();
             }
@@ -30,14 +30,10 @@ function injectTag(tag, src) {
             if (tag === 'link') {
                 element.rel = 'stylesheet';
             }
-        }
-    });
-}
+        });
+    }
 
-function isPresent(tag, src) {
-    let attr = mapAttr[tag];
-    let query = `head > ${tag}[${attr}="${src}"]`;
-    return document.querySelector(query);
+    return tags[src];
 }
 
 function injectStylesheet(src) {
@@ -65,7 +61,6 @@ export const InjectInHeadUtils = {
      * you don't want to embed everything inside the build file.
      */
 
-    isPresent,
     injectStylesheet,
     injectScript,
     inject
diff --git a/js/utils/regex_utils.js b/js/utils/regex_utils.js
new file mode 100644
index 00000000..af948b2b
--- /dev/null
+++ b/js/utils/regex_utils.js
@@ -0,0 +1,7 @@
+'use strict'
+
+export function isEmail(string) {
+    // This is a bit of a weak test for an email, but you really can't win them all
+    // http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address
+    return !!string && string.match(/.*@.*\..*/);
+}
diff --git a/js/utils/requests.js b/js/utils/requests.js
index a7300634..9195661d 100644
--- a/js/utils/requests.js
+++ b/js/utils/requests.js
@@ -30,6 +30,15 @@ class Requests {
                             reject(error);
                         } else if(body && body.detail) {
                             reject(new Error(body.detail));
+                        } else if(!body.success) {
+                            let error = new Error('Client Request Error');
+                            error.json = {
+                                status: response.status,
+                                statusText: response.statusText,
+                                type: response.type,
+                                url: response.url
+                            };
+                            reject(error);
                         } else {
                             resolve(body);
                         }
@@ -100,8 +109,7 @@ class Requests {
         return newUrl;
     }
 
-    request(verb, url, options) {
-        options = options || {};
+    request(verb, url, options = {}) {
         let merged = Object.assign({}, this.httpOptions, options);
         let csrftoken = getCookie(AppConstants.csrftoken);
         if (csrftoken) {
@@ -129,13 +137,10 @@ class Requests {
     }
 
     _putOrPost(url, paramsAndBody, method) {
-        let paramsCopy = Object.assign({}, paramsAndBody);
         let params = omitFromObject(paramsAndBody, ['body']);
         let newUrl = this.prepareUrl(url, params);
-        let body = null;
-        if (paramsCopy && paramsCopy.body) {
-            body = JSON.stringify(paramsCopy.body);
-        }
+        let body = paramsAndBody && paramsAndBody.body ? JSON.stringify(paramsAndBody.body)
+                                                       : null;
         return this.request(method, newUrl, { body });
     }
 
diff --git a/package.json b/package.json
index 63c6d1e0..be5c1202 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.4",
     "harmonize": "^1.4.2",
-    "history": "^1.11.1",
+    "history": "^1.13.1",
     "invariant": "^2.1.1",
     "isomorphic-fetch": "^2.0.2",
     "jest-cli": "^0.4.0",
@@ -80,11 +80,12 @@
     "react": "0.13.2",
     "react-bootstrap": "0.25.1",
     "react-datepicker": "^0.12.0",
-    "react-router": "^1.0.0-rc3",
+    "react-router": "1.0.0",
     "react-router-bootstrap": "^0.19.0",
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",
     "reactify": "^1.1.0",
+    "shallow-equals": "0.0.0",
     "shmui": "^0.1.0",
     "spark-md5": "~1.0.0",
     "uglifyjs": "^2.4.10",
diff --git a/sass/ascribe-fonts/ascribe-fonts.scss b/sass/ascribe-fonts/ascribe-fonts.scss
index 11b42851..6f95a616 100644
--- a/sass/ascribe-fonts/ascribe-fonts.scss
+++ b/sass/ascribe-fonts/ascribe-fonts.scss
@@ -1,24 +1,10 @@
-[class^="icon-ascribe-"], [class*=" icon-ascribe-"] {
-    font-family: 'ascribe-logo';
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
 /*
     These glyphs are generated using: https://icomoon.io
     Even though it seems radically complicated, check out the site,
     its fairly straight forward.
 
     If someone wants you to add a new glyph go to the site,
-    drop in the regular ascribe-logo font and select all icons.
+    drop in the regular ascribe-font font and select all icons.
     Then also add the new glyph, name and address it correctly and download
     the font again.
 
@@ -26,18 +12,19 @@
  */
 
 @font-face {
-    font-family: 'ascribe-logo';
-    src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae');
-    src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae#iefix') format('embedded-opentype'),
-      url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?q6qoae') format('truetype'),
-      url('#{$BASE_URL}static/fonts/ascribe-logo.woff?q6qoae') format('woff'),
-      url('#{$BASE_URL}static/fonts/ascribe-logo.svg?q6qoae#ascribe-logo') format('svg');
+    font-family: 'ascribe-font';
+    src:url('#{$BASE_URL}static/fonts/ascribe-font.eot?q6qoae');
+    src:url('#{$BASE_URL}static/fonts/ascribe-font.eot?q6qoae#iefix') format('embedded-opentype'),
+      url('#{$BASE_URL}static/fonts/ascribe-font.ttf?q6qoae') format('truetype'),
+      url('#{$BASE_URL}static/fonts/ascribe-font.woff?q6qoae') format('woff'),
+      url('#{$BASE_URL}static/fonts/ascribe-font.svg?q6qoae#ascribe-font') format('svg');
     font-weight: normal;
     font-style: normal;
 }
 
 [class^="icon-ascribe-"], [class*=" icon-ascribe-"] {
-    font-family: 'ascribe-logo';
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'ascribe-font' !important;
     speak: none;
     font-style: normal;
     font-weight: normal;
@@ -80,35 +67,15 @@
 .icon-ascribe-logo:before {
     content: "\e808";
 }
-
 .icon-ascribe-ok:before {
     content: "\e809";
     font-size: .7em;
 }
+.icon-ascribe-thin-cross:before {
+    content: "\e810";
+}
 
 .btn-glyph-ascribe {
     font-size: 18px;
     padding: 4px 12px 0 10px
 }
-
-.ascribe-logo-circle {
-    border: 6px solid #F6F6F6;
-    border-radius: 10em;
-    position: relative;
-    top: 10%;
-    left: 10%;
-
-    display: block;
-    width: 80%;
-    height: 80%;
-
-    > span {
-        color: #F6F6F6;
-        position: absolute;
-        top: -.29em;
-        left: .16em;
-
-        font-size: 5em;
-        font-weight: normal;
-    }
-}
\ No newline at end of file
diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss
index c0b81096..791743fc 100644
--- a/sass/ascribe_accordion_list.scss
+++ b/sass/ascribe_accordion_list.scss
@@ -60,6 +60,34 @@ $ascribe-accordion-list-item-height: 100px;
                 background-size: cover;
             }
 
+            .ascribe-logo-circle {
+                border: 6px solid #F6F6F6;
+                border-radius: 10em;
+                position: relative;
+                top: 10%;
+                left: 10%;
+
+                display: block;
+                width: 80%;
+                height: 80%;
+
+                > span {
+                    color: #F6F6F6;
+                    position: absolute;
+                    top: -.29em;
+                    left: .16em;
+
+                    font-size: 5em;
+                    font-weight: normal;
+                }
+            }
+
+            .ascribe-thumbnail-placeholder {
+                color: #F6F6F6;
+                font-size: 5em;
+                font-weight: normal;
+            }
+
             //&::before {
             //    content: ' ';
             //    display: inline-block;
@@ -211,10 +239,6 @@ $ascribe-accordion-list-item-height: 100px;
     -ms-user-select: none;
     -webkit-user-select: none;
 
-    &:hover {
-        color: $ascribe-dark-blue;
-    }
-
     .glyphicon {
         font-size: .8em;
         top: 1px !important;
diff --git a/sass/ascribe_acl_information.scss b/sass/ascribe_acl_information.scss
index 063c8ae6..5a4708f0 100644
--- a/sass/ascribe_acl_information.scss
+++ b/sass/ascribe_acl_information.scss
@@ -22,4 +22,4 @@
     .example {
         color: #616161;
     }
-}
\ No newline at end of file
+}
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index 98cce937..96b97783 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -68,10 +68,15 @@ hr {
     .dropdown-menu {
         background-color: $ascribe--nav-bg-color;
     }
+    .navbar-nav > li > .dropdown-menu {
+        padding: 0;
+    }
 
     .dropdown-menu > li > a {
         color:  $ascribe--nav-fg-prim-color;
         font-weight: $ascribe--font-weight-light;
+        padding-bottom: 9px;
+        padding-top: 9px;
     }
 
     .dropdown-menu > li > a:hover,
@@ -79,6 +84,10 @@ hr {
         background-color: rgba($ascribe--button-default-color, .05);
     }
 
+    .dropdown-menu > .divider {
+        margin: 0;
+    }
+
     .notification-menu {
         .dropdown-menu {
             background-color: white;
@@ -257,6 +266,24 @@ hr {
     font-weight: $ascribe--font-weight-light;
 }
 
+.btn-default {
+    background-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-default-color;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:hover,
+    &:active:focus,
+    &:active.focus,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        background-color: lighten($ascribe--button-default-color, 20%);
+        border-color: lighten($ascribe--button-default-color, 20%);
+    }
+}
+
 // disabled buttons
 .btn-default.disabled,
 .btn-default.disabled:hover,
@@ -280,9 +307,10 @@ fieldset[disabled] .btn-default.active {
     border-color: darken($ascribe--button-default-color, 20%);
 }
 
-.btn-default {
-    background-color: $ascribe--button-default-color;
-    border-color: $ascribe--button-default-color;
+.btn-secondary {
+    background-color: $ascribe--button-secondary-bg-color;
+    border-color: $ascribe--button-secondary-fg-color;
+    color: $ascribe--button-secondary-fg-color;
 
     &:hover,
     &:active,
@@ -293,8 +321,9 @@ fieldset[disabled] .btn-default.active {
     &.active:hover,
     &.active:focus,
     &.active.focus {
-        background-color: lighten($ascribe--button-default-color, 20%);
-        border-color: lighten($ascribe--button-default-color, 20%);
+        background-color: $ascribe--button-secondary-fg-color;
+        border-color: $ascribe--button-secondary-bg-color;
+        color: $ascribe--button-secondary-bg-color;
     }
 }
 
@@ -322,26 +351,6 @@ fieldset[disabled] .btn-secondary.active {
     color: darken($ascribe--button-secondary-fg-color, 20%);
 }
 
-.btn-secondary {
-    background-color: $ascribe--button-secondary-bg-color;
-    border-color: $ascribe--button-secondary-fg-color;
-    color: $ascribe--button-secondary-fg-color;
-
-    &:hover,
-    &:active,
-    &:focus,
-    &:active:hover,
-    &:active:focus,
-    &:active.focus,
-    &.active:hover,
-    &.active:focus,
-    &.active.focus {
-        background-color: $ascribe--button-secondary-fg-color;
-        border-color: $ascribe--button-secondary-bg-color;
-        color: $ascribe--button-secondary-bg-color;
-    }
-}
-
 .btn-tertiary {
     background-color: transparent;
     border-color: transparent;
@@ -580,11 +589,6 @@ fieldset[disabled] .btn-secondary.active {
     background-color: lighten($ascribe--button-default-color, 20%);
 }
 
-// uploader
-.ascribe-progress-bar > .progress-bar {
-    background-color: lighten($ascribe--button-default-color, 20%);
-}
-
 .action-file {
     text-shadow: -1px 0 black,
                   0 1px black,
diff --git a/sass/ascribe_notification_list.scss b/sass/ascribe_notification_list.scss
index a09f7049..b5f46a4c 100644
--- a/sass/ascribe_notification_list.scss
+++ b/sass/ascribe_notification_list.scss
@@ -2,8 +2,9 @@ $break-small: 764px;
 $break-medium: 991px;
 $break-medium: 1200px;
 
-.notification-header,.notification-wrapper {
-    width: 350px;
+.notification-header, .notification-wrapper {
+    min-width: 350px;
+    width: 100%;
 }
 
 .notification-header {
@@ -81,4 +82,4 @@ $break-medium: 1200px;
     border: 1px solid #cccccc;
     background-color: white;
     margin-top: 1px;
-}
\ No newline at end of file
+}
diff --git a/sass/ascribe_notification_page.scss b/sass/ascribe_notification_page.scss
index 955609d2..7bb37446 100644
--- a/sass/ascribe_notification_page.scss
+++ b/sass/ascribe_notification_page.scss
@@ -31,16 +31,11 @@
         margin-top: .5em;
         margin-bottom: 1em;
 
-        .loan-form {
-            margin-top: .5em;
+        &.embed-form {
             height: 45vh;
         }
     }
 
-    .loan-form {
-        height: 40vh;
-    }
-
     .notification-contract-pdf-download {
         text-align: left;
         margin-left: 1em;
@@ -69,4 +64,8 @@
         padding-left: 0;
         width: 100%;
     }
+}
+
+.ascribe-property.contract-appendix-form {
+    padding-left: 0;
 }
\ No newline at end of file
diff --git a/sass/ascribe_panel.scss b/sass/ascribe_panel.scss
index 0f675605..f4b70a80 100644
--- a/sass/ascribe_panel.scss
+++ b/sass/ascribe_panel.scss
@@ -31,7 +31,7 @@
         vertical-align: middle;
 
         &:first-child {
-            word-break: break-all;
+            word-break: break-word;
             font-size: .9em;
         }
     }
diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss
index f033ee81..06cbd1a7 100644
--- a/sass/ascribe_piece_list_toolbar.scss
+++ b/sass/ascribe_piece_list_toolbar.scss
@@ -81,4 +81,8 @@
             top: 2px;
         }
     }
+
+    .dropdown-menu {
+        min-width: 170px;
+    }
 }
diff --git a/sass/ascribe_spinner.scss b/sass/ascribe_spinner.scss
index 7f02a383..133cc6b8 100644
--- a/sass/ascribe_spinner.scss
+++ b/sass/ascribe_spinner.scss
@@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
     }
 }
 
+.spinner-wrapper-white {
+    color: $ascribe-white;
+    .spinner-circle {
+        border-color: $ascribe-white;
+    }
+}
+
 .spinner-wrapper-lg {
     width: $ascribe--spinner-size-lg;
     height: $ascribe--spinner-size-lg;
@@ -107,17 +114,20 @@ $ascribe--spinner-size-sm: 15px;
 }
 .spinner-wrapper-lg .spinner-inner {
     font-size: $ascribe--spinner-size-lg;
-    top: -64px;
+    line-height: $ascribe--spinner-size-lg;
+    top: -50px;
 }
 
 .spinner-wrapper-md .spinner-inner {
     font-size: $ascribe--spinner-size-md;
-    top: -38px;
+    line-height: $ascribe--spinner-size-md;
+    top: -30px;
 }
 
 .spinner-wrapper-sm .spinner-inner {
     font-size: $ascribe--spinner-size-sm;
-    top: -19px;
+    line-height: $ascribe--spinner-size-sm;
+    top: -15px;
 }
 
 @-webkit-keyframes spin {
@@ -146,4 +156,4 @@ $ascribe--spinner-size-sm: 15px;
     40% { color: $ascribe-blue; }
     60% { color: $ascribe-light-blue; }
     80% { color: $ascribe-pink; }
-}
\ No newline at end of file
+}
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index fa353ecd..ea02eb07 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -120,7 +120,7 @@
 
     &.icon-ascribe-ok, &.icon-ascribe-ok:hover {
         cursor: default;
-        color: lighten($ascribe--button-default-color, 20%);
+        color: $ascribe-dark-blue;
         font-size: 4.2em;
         top: .2em;
     }
@@ -328,9 +328,12 @@
     }
 
     span {
-        font-size: 1.25em;
+        font-size: 1.2em;
         color: white;
-        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+        text-shadow: -1px 0 $ascribe--button-default-color,
+                      0 1px $ascribe--button-default-color,
+                      1px 0 $ascribe--button-default-color,
+                      0 -1px $ascribe--button-default-color;
     }
 }
 
diff --git a/sass/main.scss b/sass/main.scss
index 8a732e96..5cc91e9a 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -350,7 +350,7 @@ hr {
 
     > span {
         font-size: 1.1em;
-        font-weight: 600;
+        font-weight: normal;
         color: #616161;
 
         padding-left: .3em;
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
new file mode 100644
index 00000000..a5026272
--- /dev/null
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -0,0 +1,377 @@
+/** Sass cannot use a number as the first character of a variable, so we'll have to settle with vivi23 **/
+$vivi23--fg-color: black;
+$vivi23--bg-color: white;
+$vivi23--nav-fg-prim-color: $vivi23--fg-color;
+$vivi23--nav-fg-sec-color: #3a3a3a;
+$vivi23--nav-bg-color: $vivi23--bg-color;
+$vivi23--nav-highlight-color: #f8f8f8;
+$vivi23--button-default-color: $vivi23--fg-color;
+$vivi23--highlight-color: #de2600;
+
+
+.client--23vivi {
+    /** Landing page **/
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .vivi23-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+
+        .vivi23-landing--header {
+            background-color: $vivi23--fg-color;
+            border: 1px solid $vivi23--fg-color;
+            color: $vivi23--bg-color;
+            padding: 2em;
+
+            .vivi23-landing--header-logo {
+                margin-top: 1em;
+                margin-bottom: 2em;
+                height: 75px;
+            }
+        }
+
+        .vivi23-landing--content {
+            border: 1px solid darken($vivi23--bg-color, 20%);
+            border-top: none;
+            padding: 2em;
+        }
+    }
+
+    /** Navbar **/
+    .navbar-default {
+        background-color: $vivi23--nav-fg-prim-color;
+
+        .navbar-brand .icon-ascribe-logo {
+            color: $vivi23--bg-color;
+            &:hover {
+                color: darken($vivi23--bg-color, 20%);
+            }
+        }
+
+    }
+
+    .navbar-nav > li > a,
+    .navbar-nav > li > a:focus,
+    .navbar-nav > li > .active a,
+    .navbar-nav > li > .active a:focus {
+        color: $vivi23--nav-bg-color;
+    }
+
+    .navbar-nav > li > a:hover {
+        color: darken($vivi23--nav-bg-color, 20%);
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        background-color: $vivi23--nav-fg-prim-color;
+        border-bottom-color: $vivi23--nav-bg-color;
+        color: $vivi23--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > li > a {
+        color: $vivi23--nav-fg-prim-color;
+        background-color: $vivi23--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus,
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($vivi23--nav-fg-prim-color, 20%);
+        background-color: $vivi23--nav-highlight-color;
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.collapse.in {
+        background-color: $vivi23--nav-bg-color;
+
+        .navbar-nav > .open > a,
+        .navbar-nav > .active > a {
+            background-color: $vivi23--nav-highlight-color;
+        }
+    }
+
+    .navbar-collapse.collapsing li a,
+    .navbar-collapse.collapse.in li a {
+        color: $vivi23--nav-fg-prim-color;
+    }
+    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
+        color: lighten($vivi23--nav-fg-prim-color, 20%);
+        background-color: $vivi23--nav-highlight-color;
+    }
+
+    .navbar-toggle {
+        border-color: $vivi23--highlight-color;
+
+        .icon-bar {
+            background-color: $vivi23--highlight-color;
+        }
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        border-color: lighten($vivi23--highlight-color, 10%);
+        background-color: $vivi23--nav-fg-prim-color;
+
+        .icon-bar {
+            background-color: lighten($vivi23--highlight-color, 10%);
+        }
+    }
+
+    .notification-menu {
+        .dropdown-menu {
+            background-color: $vivi23--nav-bg-color;
+        }
+
+        .notification-header {
+            background-color: $vivi23--nav-fg-sec-color;
+            border-top-width: 0;
+            color: $vivi23--nav-bg-color;
+        }
+
+        .notification-action {
+            color: $vivi23--highlight-color;
+        }
+    }
+
+    /** Buttons **/
+    // reset disabled button styling for btn-default
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: lighten($vivi23--button-default-color, 30%);
+        border-color: lighten($vivi23--button-default-color, 30%);
+    }
+
+    .btn-default {
+        background-color: $vivi23--button-default-color;
+        border-color: $vivi23--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($vivi23--button-default-color, 30%);
+            border-color: lighten($vivi23--button-default-color, 30%);
+        }
+    }
+
+    // disabled buttons
+    .btn-secondary.disabled,
+    .btn-secondary.disabled:hover,
+    .btn-secondary.disabled:focus,
+    .btn-secondary.disabled.focus,
+    .btn-secondary.disabled:active,
+    .btn-secondary.disabled.active,
+    .btn-secondary[disabled],
+    .btn-secondary[disabled]:hover,
+    .btn-secondary[disabled]:focus,
+    .btn-secondary[disabled].focus,
+    .btn-secondary[disabled]:active,
+    .btn-secondary[disabled].active,
+    fieldset[disabled] .btn-secondary,
+    fieldset[disabled] .btn-secondary:hover,
+    fieldset[disabled] .btn-secondary:focus,
+    fieldset[disabled] .btn-secondary.focus,
+    fieldset[disabled] .btn-secondary:active,
+    fieldset[disabled] .btn-secondary.active {
+        background-color: darken($vivi23--bg-color, 20%);
+        border-color: $vivi23--button-default-color;
+    }
+
+    .btn-secondary {
+        border-color: $vivi23--button-default-color;
+        color: $vivi23--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $vivi23--button-default-color;
+            border-color: $vivi23--button-default-color;
+            color: $vivi23--bg-color;
+        }
+    }
+
+    .btn-tertiary {
+        &:hover,
+        &:active,
+        &ctive:hover,
+        &.active:hover{
+            background-color: $vivi23--highlight-color;
+            border-color: $vivi23--highlight-color;
+            color: $vivi23--highlight-color;
+        }
+    }
+
+    /** Other components **/
+    .ascribe-piece-list-toolbar .btn-ascribe-add {
+        display: none;
+    }
+
+    .ascribe-footer {
+        display: none;
+    }
+
+    .ascribe-accordion-list-table-toggle:hover {
+        color: $vivi23--fg-color;
+    }
+
+    .request-action-badge {
+        color: $vivi23--fg-color;
+    }
+
+    .acl-information-dropdown-list .title {
+        color: $vivi23--fg-color;
+    }
+
+    // filter widget
+    .ascribe-piece-list-toolbar-filter-widget button {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: $vivi23--button-default-color !important;
+
+        &:hover,
+        &:active {
+            background-color: $vivi23--button-default-color !important;
+            border-color: $vivi23--button-default-color !important;
+            color: $vivi23--bg-color !important;
+        }
+    }
+
+    .icon-ascribe-search {
+        color: $vivi23--fg-color;
+    }
+
+    // forms
+    .ascribe-property-wrapper:hover {
+        border-left-color: rgba($vivi23--fg-color, 0.5);
+    }
+
+    .ascribe-property textarea,
+    .ascribe-property input,
+    .search-bar > .form-group > .input-group input {
+        &::-webkit-input-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+        &::-moz-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+        &:-ms-input-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+        &:-moz-placeholder {
+            color: rgba($vivi23--fg-color, 0.5);
+        }
+    }
+
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > p,
+        > p > span,
+        > textarea {
+            color: $vivi23--fg-color;
+        }
+    }
+
+    // global notification
+    .ascribe-global-notification-success {
+        background-color: lighten($vivi23--fg-color, 20%);
+    }
+
+    // uploader progress
+    .ascribe-progress-bar > .progress-bar {
+        background-color: lighten($vivi23--fg-color, 20%);
+    }
+
+    .ascribe-progress-bar span {
+        text-shadow: -1px 0 lighten($vivi23--fg-color, 20%),
+                     0 1px lighten($vivi23--fg-color, 20%),
+                     1px 0 lighten($vivi23--fg-color, 20%),
+                     0 -1px lighten($vivi23--fg-color, 20%);
+    }
+
+    .action-file.icon-ascribe-ok,
+    .action-file.icon-ascribe-ok:hover {
+        color: lighten($vivi23--fg-color, 20%);
+    }
+
+    // spinner
+    .spinner-circle {
+        border-color: $vivi23--fg-color;
+    }
+    .spinner-inner {
+        display: none;
+    }
+    .btn-secondary .spinner-circle {
+        border-color: $vivi23--bg-color;
+    }
+
+    // video player
+    .ascribe-media-player .vjs-default-skin {
+        .vjs-play-progress,
+        .vjs-volume-level {
+            background-color: $vivi23--highlight-color;
+        }
+    }
+
+    // pager
+    .pager li > a,
+    .pager li > span {
+        background-color: $vivi23--fg-color;
+        border-color: $vivi23--fg-color;
+    }
+    .pager .disabled > a,
+    .pager .disabled > span {
+        background-color: $vivi23--fg-color !important;
+        border-color: $vivi23--fg-color;
+    }
+
+    // intercom
+    #intercom-container .intercom-launcher-button {
+        background-color: $vivi23--button-default-color !important;
+        border-color: $vivi23--button-default-color !important;
+    }
+}
diff --git a/sass/whitelabel/wallet/cc/cc_custom_style.scss b/sass/whitelabel/wallet/cc/cc_custom_style.scss
index 44cb0dd1..774f5b27 100644
--- a/sass/whitelabel/wallet/cc/cc_custom_style.scss
+++ b/sass/whitelabel/wallet/cc/cc_custom_style.scss
@@ -207,4 +207,20 @@ $cc--button-color: $cc--nav-fg-prim-color;
 
 .client--cc .acl-information-dropdown-list .title {
     color: $cc--button-color;
+}
+
+.client--cc .action-file.icon-ascribe-ok,
+.client--cc .action-file.icon-ascribe-ok:hover {
+    color: $cc--button-color;
+}
+
+.client--cc .ascribe-progress-bar span {
+    text-shadow: -1px 0 $cc--button-color,
+                 0 1px $cc--button-color,
+                 1px 0 $cc--button-color,
+                 0 -1px $cc--button-color;
+}
+
+.client--cc  .upload-button-wrapper > span {
+    color: $cc--button-color;
 }
\ No newline at end of file
diff --git a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
index eaf45621..6c4223ac 100644
--- a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
+++ b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
@@ -59,40 +59,14 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     display: none;
 }
 
-
-.client--cyland .icon-ascribe-search{
+.client--cyland .icon-ascribe-search {
     color: $cyland--button-color;
 }
 
-.client--cyland .ascribe-piece-list-toolbar .btn-ascribe-add{
+.client--cyland .ascribe-piece-list-toolbar .btn-ascribe-add {
     display: none;
 }
 
-// disabled buttons
-.client--cyland {
-    .btn-default.disabled,
-    .btn-default.disabled:hover,
-    .btn-default.disabled:focus,
-    .btn-default.disabled.focus,
-    .btn-default.disabled:active,
-    .btn-default.disabled.active,
-    .btn-default[disabled],
-    .btn-default[disabled]:hover,
-    .btn-default[disabled]:focus,
-    .btn-default[disabled].focus,
-    .btn-default[disabled]:active,
-    .btn-default[disabled].active,
-    fieldset[disabled] .btn-default,
-    fieldset[disabled] .btn-default:hover,
-    fieldset[disabled] .btn-default:focus,
-    fieldset[disabled] .btn-default.focus,
-    fieldset[disabled] .btn-default:active,
-    fieldset[disabled] .btn-default.active {
-        background-color: darken($cyland--button-color, 20%);
-        border-color: darken($cyland--button-color, 20%);
-    }
-}
-
 // buttons!
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
@@ -129,6 +103,26 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
         }
     }
 
+    .btn-secondary {
+        background-color: white;
+        border-color: $cyland--button-color;
+        color: $cyland--button-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $cyland--button-color;
+            border-color: $cyland--button-color;
+            color: white;
+        }
+    }
+
     .open > .btn-default.dropdown-toggle:hover,
     .open > .btn-default.dropdown-toggle:focus,
     .open > .btn-default.dropdown-toggle.focus,
@@ -148,6 +142,48 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
     }
 }
 
+.client--ikonotv {
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: darken($cyland--button-color, 20%);
+        border-color: darken($cyland--button-color, 20%);
+    }
+}
+
+// landing page
+.client--cyland {
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .cyland-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+    }
+}
+
 // spinner!
 .client--cyland {
     .btn-spinner {
@@ -182,4 +218,20 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
 
 .client--cyland .acl-information-dropdown-list .title {
     color: $cyland--button-color;
+}
+
+.client--cyland .action-file.icon-ascribe-ok,
+.client--cyland .action-file.icon-ascribe-ok:hover {
+    color: $cyland--nav-fg-prim-color;
+}
+
+.client--cyland .ascribe-progress-bar span {
+    text-shadow: -1px 0 $cyland--nav-fg-prim-color,
+                 0 1px $cyland--nav-fg-prim-color,
+                 1px 0 $cyland--nav-fg-prim-color,
+                 0 -1px $cyland--nav-fg-prim-color;
+}
+
+.client--cyland  .upload-button-wrapper > span {
+    color: $cyland--button-color;
 }
\ No newline at end of file
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 70a5cd18..8f330911 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -411,6 +411,26 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
         }
     }
 
+    .btn-secondary {
+        background-color: white;
+        border-color: $ikono--button-color;
+        color: $ikono--button-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $ikono--button-color;
+            border-color: $ikono--button-color;
+            color: white;
+        }
+    }
+
     .open > .btn-default.dropdown-toggle:hover,
     .open > .btn-default.dropdown-toggle:focus,
     .open > .btn-default.dropdown-toggle.focus,
@@ -524,4 +544,20 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 
 .client--ikonotv .acl-information-dropdown-list .title {
     color: $ikono--button-color;
+}
+
+.client--ikonotv .action-file.icon-ascribe-ok,
+.client--ikonotv .action-file.icon-ascribe-ok:hover {
+    color: $ikono--button-color;
+}
+
+.client--ikonotv .ascribe-progress-bar span {
+    text-shadow: -1px 0 $ikono--button-color,
+                 0 1px $ikono--button-color,
+                 1px 0 $ikono--button-color,
+                 0 -1px $ikono--button-color;
+}
+
+.client--ikonotv  .upload-button-wrapper > span {
+    color: $ikono--button-color;
 }
\ No newline at end of file
diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss
index 024fb3cc..01c374d9 100644
--- a/sass/whitelabel/wallet/index.scss
+++ b/sass/whitelabel/wallet/index.scss
@@ -1,6 +1,7 @@
 @import 'cc/cc_custom_style';
 @import 'cyland/cyland_custom_style';
 @import 'ikonotv/ikonotv_custom_style';
+@import '23vivi/23vivi_custom_style';
 
 .ascribe-wallet-app {
     border-radius: 0;

From 511abc6a333b353f4fd381d38d6a969e24f7e672 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 20:57:40 +0100
Subject: [PATCH 014/197] Fix missing PropType

---
 js/components/ascribe_detail/further_details_fileuploader.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index 18050de9..40e40ff1 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -14,7 +14,7 @@ import { getLangText } from '../../utils/lang_utils';
 
 
 
-const { func, bool, number, object, arrayOf } = React.PropTypes;
+const { func, bool, number, object, string, arrayOf } = React.PropTypes;
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {

From 17a3ecbd44d9e57ce7730e2fa0f418e1aea5fd2b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 8 Dec 2015 20:48:39 +0100
Subject: [PATCH 015/197] Add thin cross icon to FileDragAndDropError

---
 .../file_drag_and_drop_error_dialog.js            |  2 +-
 .../ascribe_upload_button/upload_button.js        |  2 +-
 sass/ascribe_uploader.scss                        | 15 +++++++++++----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
index 8696cc7f..7f6d4460 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
@@ -57,7 +57,7 @@ let FileDragAndDropErrorDialog = React.createClass({
                     {this.getRetryButton('Retry')}
                 </div>
                 <span className={classNames('file-drag-and-drop-error-icon-container', { 'file-drag-and-drop-error-icon-container-multiple-files': multipleFiles })}>
-                    <span className='file-drag-and-drop-error-icon'></span>
+                    <span className='ascribe-icon icon-ascribe-thin-cross'></span>
                 </span>
                 <div className='file-drag-and-drop-error-file-names'>
                     <ul>
diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index 94c85f4f..50bae1ef 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -61,7 +61,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadedFile() {
-            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0];
+            return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCCESSFUL)[0];
         },
 
         clearSelection() {
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index ea02eb07..5ae4e1e1 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -170,6 +170,7 @@
 }
 
 .file-drag-and-drop-error {
+    color: #333333;
     margin-bottom: 25px;
     overflow: hidden;
     text-align: center;
@@ -270,20 +271,23 @@
 
 .file-drag-and-drop-error-icon-container {
     background-color: #eeeeee;
-    display: inline-block;
+    display: table;
     float: left;
     height: 104px;
     position: relative;
     width: 104px;
     vertical-align: top;
 
-    .file-drag-and-drop-error-icon {
-        position: absolute;
+    .icon-ascribe-thin-cross {
+        display: table-cell;
+        font-size: 5.5em;
+        vertical-align: middle;
     }
 
     &.file-drag-and-drop-error-icon-container-multiple-files {
         background-color: #d7d7d7;
         left: -15px;
+        margin-bottom: 24px;
         z-index: 1;
 
         &::before {
@@ -310,7 +314,10 @@
             z-index: 3;
         }
 
-        .file-drag-and-drop-error-icon {
+        .icon-ascribe-thin-cross {
+            left: 44px;
+            position: absolute;
+            top: 38px;
             z-index: 4;
         }
     }

From e7cf9a44a0ac4f27c5ba64690ef616dd3d49b9eb Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 9 Dec 2015 15:57:01 +0100
Subject: [PATCH 016/197] Add simple check for determining if user's offline
 while uploading

---
 js/components/ascribe_uploader/react_s3_fine_uploader.js | 8 ++++++--
 js/constants/error_constants.js                          | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index b11a877f..19705925 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -479,8 +479,12 @@ const ReactS3FineUploader = React.createClass({
         } else {
             matchedErrorClass = testErrorAgainstAll({ type, reason, xhr });
 
-            // If none found, show the next error message
-            if (!matchedErrorClass) {
+            // If none found, check the internet connection
+            // TODO: use a better mechanism for checking network state, ie. offline.js
+            if ('onLine' in window.navigator && !window.navigator.onLine) {
+                matchedErrorClass = ErrorClasses.upload.offline;
+            } else {
+                // Otherwise, show the next error message in the queue
                 matchedErrorClass = ErrorQueueStore.getNextError('upload');
             }
         }
diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index 19e06c18..d649e551 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -121,6 +121,9 @@ const ErrorClasses = {
         },
         'contactUs': {
             'prettifiedText': getLangText("We're having a really hard time with your upload. Please contact us for more help.")
+        },
+        'offline': {
+            'prettifiedText': getLangText('It looks like your Internet connection might have gone down during the upload. Please check your connection and try again.')
         }
     },
     'default': {

From 90c75ca4c547d7ec3779a95f5ce14fb290762e1f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 9 Dec 2015 17:08:47 +0100
Subject: [PATCH 017/197] Change uploader error text

---
 js/constants/error_constants.js | 21 ++++++++++++++-------
 js/stores/error_queue_store.js  |  4 ++--
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index d649e551..6ec0d70d 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -95,11 +95,10 @@ import { getLangText } from '../utils/lang_utils';
 const ErrorClasses = {
     'upload': {
         'requestTimeTooSkewed': {
-            'prettifiedText': getLangText('It appears that the time set on your computer is too ' +
-                                          'inaccurate compared to your current local time. As a security ' +
-                                          'measure, we check to make sure that our users are not falsifying ' +
-                                          "their registration times. Please synchronize your computer's " +
-                                          'clock and try again.'),
+            'prettifiedText': getLangText('Check your time and date preferences. Sometimes being off by even ' +
+                                          'a few minutes from our servers can cause a glitch preventing your ' +
+                                          'upload. For a quick fix, make sure that you have the “set date and ' +
+                                          'time automatically” option selected.'),
             'test': {
                 'xhr': {
                     'response': 'RequestTimeTooSkewed'
@@ -107,7 +106,7 @@ const ErrorClasses = {
             }
         },
         'chunkSignatureError': {
-            'prettifiedText': getLangText('We are experiencing some problems with uploads at the moment and ' +
+            'prettifiedText': getLangText("We're experiencing some problems with uploads at the moment and " +
                                           'are working to resolve them. Please try again in a few hours.'),
             'test': 'Problem signing the chunk'
         },
@@ -117,7 +116,15 @@ const ErrorClasses = {
             'prettifiedText': getLangText('Are you on a slow or unstable network? Uploading large files requires a fast Internet connection.')
         },
         'tryDifferentBrowser': {
-            'prettifiedText': getLangText("We still can't seem to upload your file. Maybe try another browser?")
+            'prettifiedText': getLangText("We're still having trouble uploading your file. It might be your " +
+                                          "browser; try a different browser or make sure you’re using the " +
+                                          'latest version.')
+        },
+        'largeFileSize': {
+            'prettifiedText': getLangText('We handle files up to 25GB but your Internet connection may not. ' +
+                                          'If your file is large and your bandwidth is limited, it may take ' +
+                                          'some time to complete. If your upload doesn’t seem to be in ' +
+                                          'progress at all, try restarting the process.')
         },
         'contactUs': {
             'prettifiedText': getLangText("We're having a really hard time with your upload. Please contact us for more help.")
diff --git a/js/stores/error_queue_store.js b/js/stores/error_queue_store.js
index 802b767d..c08f303e 100644
--- a/js/stores/error_queue_store.js
+++ b/js/stores/error_queue_store.js
@@ -8,11 +8,11 @@ import { ErrorClasses } from '../constants/error_constants.js';
 
 class ErrorQueueStore {
     constructor() {
-        const { upload: { slowConnection, tryDifferentBrowser } } = ErrorClasses;
+        const { upload: { largeFileSize, slowConnection, tryDifferentBrowser } } = ErrorClasses;
 
         this.errorQueues = {
             'upload': {
-                queue: [slowConnection, tryDifferentBrowser],
+                queue: [slowConnection, tryDifferentBrowser, largeFileSize],
                 loop: true
             }
         };

From 1ee9a4c7a142eff28904b0da8dc1a51a0a28c36a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 9 Dec 2015 18:29:43 +0100
Subject: [PATCH 018/197] Hide download button on the marketplace additional
 data form when it's not inline

---
 .../ascribe_detail/further_details_fileuploader.js          | 6 ++++--
 .../file_drag_and_drop_preview_image.js                     | 2 +-
 .../market/market_forms/market_additional_data_form.js      | 3 ++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index b044bbbc..60769598 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -22,11 +22,13 @@ let FurtherDetailsFileuploader = React.createClass({
         submitFile: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
         editable: React.PropTypes.bool,
-        multiple: React.PropTypes.bool
+        multiple: React.PropTypes.bool,
+        areAssetsDownloadable: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
+            areAssetsDownloadable: true,
             label: getLangText('Additional files'),
             multiple: false
         };
@@ -89,7 +91,7 @@ let FurtherDetailsFileuploader = React.createClass({
                            'X-CSRFToken': getCookie(AppConstants.csrftoken)
                         }
                     }}
-                    areAssetsDownloadable={true}
+                    areAssetsDownloadable={this.props.areAssetsDownloadable}
                     areAssetsEditable={this.props.editable}
                     multiple={this.props.multiple} />
             </Property>
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
index 927a5b22..0d8d366c 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
@@ -49,7 +49,7 @@ const FileDragAndDropPreviewImage = React.createClass({
         };
 
         let actionSymbol;
-        
+
         // only if assets are actually downloadable, there should be a download icon if the process is already at
         // 100%. If not, no actionSymbol should be displayed
         if(progress === 100 && areAssetsDownloadable) {
diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
index d136c9cf..2a22e743 100644
--- a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
@@ -173,12 +173,13 @@ let MarketAdditionalDataForm = React.createClass({
                     disabled={!this.props.editable || !piece.acl.acl_edit}>
                     {heading}
                     <FurtherDetailsFileuploader
+                        pieceId={piece.id}
                         label={getLangText('Marketplace Thumbnail Image')}
                         submitFile={function () {}}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                        pieceId={piece.id}
                         otherData={piece.other_data}
+                        areAssetsDownloadable={!!isInline}
                         editable={editable} />
                     <Property
                         name='artist_bio'

From 34153c2322b2cf120d52679360bce0011e8b46e7 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 10 Dec 2015 13:01:48 +0100
Subject: [PATCH 019/197] Avoid unauthorized attempts at fetching ratings if
 user isn't an admin, judge, or jury

---
 .../ascribe_detail/prize_piece_container.js   | 46 +++++++++++++------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 982af7b0..4f5c9107 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -112,7 +112,7 @@ let PieceContainer = React.createClass({
     render() {
         if(this.state.piece && this.state.piece.id) {
             /*
-            
+
                 This really needs a refactor!
 
                     - Tim
@@ -122,7 +122,7 @@ let PieceContainer = React.createClass({
             let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
                 (this.state.currentUser.is_judge && !this.state.piece.selected )) ?
                 null : this.state.piece.artist_name;
-            
+
             // Only show the artist email if you are a judge and the piece is shortlisted
             let artistEmail = (this.state.currentUser.is_judge && this.state.piece.selected ) ?
                 <DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> : null;
@@ -146,7 +146,7 @@ let PieceContainer = React.createClass({
                             <NavigationHeader
                                 piece={this.state.piece}
                                 currentUser={this.state.currentUser}/>
-                            
+
                             <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
                             <DetailProperty label={getLangText('BY')} value={artistName} />
                             <DetailProperty label={getLangText('DATE')} value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year()} />
@@ -176,8 +176,8 @@ let PieceContainer = React.createClass({
 
 let NavigationHeader = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
-        currentUser: React.PropTypes.object
+        piece: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired
     },
 
     render() {
@@ -213,9 +213,9 @@ let NavigationHeader = React.createClass({
 
 let PrizePieceRatings = React.createClass({
     propTypes: {
-        loadPiece: React.PropTypes.func,
-        piece: React.PropTypes.object,
-        currentUser: React.PropTypes.object
+        loadPiece: React.PropTypes.func.isRequired,
+        piece: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired
     },
 
     getInitialState() {
@@ -227,9 +227,15 @@ let PrizePieceRatings = React.createClass({
 
     componentDidMount() {
         PrizeRatingStore.listen(this.onChange);
-        PrizeRatingActions.fetchOne(this.props.piece.id);
-        PrizeRatingActions.fetchAverage(this.props.piece.id);
         PieceListStore.listen(this.onChange);
+
+        this.fetchRatingsIfAuthorized();
+    },
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.currentUser.email !== this.props.currentUser.email) {
+            this.fetchRatingsIfAuthorized();
+        }
     },
 
     componentWillUnmount() {
@@ -258,6 +264,21 @@ let PrizePieceRatings = React.createClass({
         }
     },
 
+    fetchRatingsIfAuthorized() {
+        const {
+            currentUser: {
+                is_admin: isAdmin,
+                is_judge: isJudge,
+                is_jury: isJury
+            },
+            piece: { id: pieceId } } = this.props;
+
+        if (isAdmin || isJudge || isJury) {
+            PrizeRatingActions.fetchOne(pieceId);
+            PrizeRatingActions.fetchAverage(pieceId);
+        }
+    },
+
     onRatingClick(event, args) {
         event.preventDefault();
         PrizeRatingActions.createRating(this.props.piece.id, args.rating).then(
@@ -425,12 +446,11 @@ let PrizePieceRatings = React.createClass({
 
 let PrizePieceDetails = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object
+        piece: React.PropTypes.object.isRequired
     },
 
     render() {
-        if (this.props.piece
-            && this.props.piece.prize
+        if (this.props.piece.prize
             && this.props.piece.prize.name
             && Object.keys(this.props.piece.extra_data).length !== 0){
             return (

From e96e7ffa2b5525319461a0429cfd57329a690c57 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 10 Dec 2015 18:04:46 +0100
Subject: [PATCH 020/197] Use `null` to denote an empty React element instead
 of `{}`

---
 js/components/ascribe_forms/form.js                    |  2 +-
 .../components/pr_forms/pr_register_piece_form.js      | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index a2b7b9bc..f126b532 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -208,7 +208,7 @@ let Form = React.createClass({
         if (this.state.submitted){
             return this.props.spinner;
         }
-        if (this.props.buttons){
+        if ('buttons' in this.props) {
             return this.props.buttons;
         }
         let buttons = null;
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index 41f2c25a..34ce2f04 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -183,7 +183,7 @@ const PRRegisterPieceForm = React.createClass({
         return (
             <div className="register-piece--form">
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered"
                     ref="registerPieceForm">
                     <Property
@@ -220,7 +220,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                 </Form>
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered"
                     ref="additionalDataForm">
                     <Property
@@ -246,7 +246,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                 </Form>
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered"
                     ref="uploadersForm">
                     <Property
@@ -349,7 +349,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                 </Form>
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered">
                     <Property
                         name="terms"
@@ -372,4 +372,4 @@ const PRRegisterPieceForm = React.createClass({
     }
 });
 
-export default PRRegisterPieceForm;
\ No newline at end of file
+export default PRRegisterPieceForm;

From 482fa51e9e6dcf8c228bc206cf4fdad95f03f246 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 10 Dec 2015 18:56:19 +0100
Subject: [PATCH 021/197] Finalize text changes

---
 .../file_drag_and_drop_error_dialog.js        |  2 +-
 js/constants/error_constants.js               | 19 +++++++------------
 js/stores/error_queue_store.js                |  4 ++--
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
index 7f6d4460..0e4bfaa2 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
@@ -38,7 +38,7 @@ let FileDragAndDropErrorDialog = React.createClass({
         return (
             <div className='file-drag-and-drop-error'>
                 <h4>Let us help you</h4>
-                <p>{getLangText('Still having problems? Send us a message!')}</p>
+                <p>{getLangText('Still having problems? Send us a message.')}</p>
                 {this.getRetryButton('Contact us', true)}
             </div>
         );
diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index 6ec0d70d..96d5f61f 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -95,10 +95,9 @@ import { getLangText } from '../utils/lang_utils';
 const ErrorClasses = {
     'upload': {
         'requestTimeTooSkewed': {
-            'prettifiedText': getLangText('Check your time and date preferences. Sometimes being off by even ' +
-                                          'a few minutes from our servers can cause a glitch preventing your ' +
-                                          'upload. For a quick fix, make sure that you have the “set date and ' +
-                                          'time automatically” option selected.'),
+            'prettifiedText': getLangText('Check your time and date preferences and select "set date and time ' +
+                                          'automatically." Being off by a few minutes from our servers can ' +
+                                          'prevent your upload.'),
             'test': {
                 'xhr': {
                     'response': 'RequestTimeTooSkewed'
@@ -112,20 +111,16 @@ const ErrorClasses = {
         },
 
         // Fallback error tips
-        'slowConnection': {
-            'prettifiedText': getLangText('Are you on a slow or unstable network? Uploading large files requires a fast Internet connection.')
+        'largeFileSize': {
+            'prettifiedText': getLangText('We handle files up to 25GB but your Internet connection may not. With ' +
+                                          'large files and limited bandwith, it may take some time to complete. If ' +
+                                          'it doesn’t seem to progress at all, try restarting the process.')
         },
         'tryDifferentBrowser': {
             'prettifiedText': getLangText("We're still having trouble uploading your file. It might be your " +
                                           "browser; try a different browser or make sure you’re using the " +
                                           'latest version.')
         },
-        'largeFileSize': {
-            'prettifiedText': getLangText('We handle files up to 25GB but your Internet connection may not. ' +
-                                          'If your file is large and your bandwidth is limited, it may take ' +
-                                          'some time to complete. If your upload doesn’t seem to be in ' +
-                                          'progress at all, try restarting the process.')
-        },
         'contactUs': {
             'prettifiedText': getLangText("We're having a really hard time with your upload. Please contact us for more help.")
         },
diff --git a/js/stores/error_queue_store.js b/js/stores/error_queue_store.js
index c08f303e..4e6413c1 100644
--- a/js/stores/error_queue_store.js
+++ b/js/stores/error_queue_store.js
@@ -8,11 +8,11 @@ import { ErrorClasses } from '../constants/error_constants.js';
 
 class ErrorQueueStore {
     constructor() {
-        const { upload: { largeFileSize, slowConnection, tryDifferentBrowser } } = ErrorClasses;
+        const { upload: { largeFileSize, tryDifferentBrowser } } = ErrorClasses;
 
         this.errorQueues = {
             'upload': {
-                queue: [slowConnection, tryDifferentBrowser, largeFileSize],
+                queue: [largeFileSize, tryDifferentBrowser],
                 loop: true
             }
         };

From 75fe89a0ff79ef06fc15e86ae1ed480619470908 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 16 Dec 2015 14:48:43 +0100
Subject: [PATCH 022/197] Limit edition creation to between 1-100

---
 js/components/ascribe_forms/create_editions_form.js | 7 ++++---
 js/components/register_piece.js                     | 5 +++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/js/components/ascribe_forms/create_editions_form.js b/js/components/ascribe_forms/create_editions_form.js
index 1e8ac23e..b2bf3c1c 100644
--- a/js/components/ascribe_forms/create_editions_form.js
+++ b/js/components/ascribe_forms/create_editions_form.js
@@ -19,7 +19,7 @@ let CreateEditionsForm = React.createClass({
         pieceId: React.PropTypes.number
     },
 
-    getFormData(){
+    getFormData() {
         return {
             piece_id: parseInt(this.props.pieceId, 10)
         };
@@ -58,11 +58,12 @@ let CreateEditionsForm = React.createClass({
                     <input
                         type="number"
                         placeholder="(e.g. 32)"
-                        min={1}/>
+                        min={1}
+                        max={100} />
                 </Property>
             </Form>
         );
     }
 });
 
-export default CreateEditionsForm;
\ No newline at end of file
+export default CreateEditionsForm;
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 8211e91e..50da9b02 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -65,7 +65,7 @@ let RegisterPiece = React.createClass( {
         this.setState(state);
     },
 
-    handleSuccess(response){
+    handleSuccess(response) {
         let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
@@ -94,7 +94,8 @@ let RegisterPiece = React.createClass( {
                     <input
                         type="number"
                         placeholder="(e.g. 32)"
-                        min={0}/>
+                        min={1}
+                        max={100} />
                 </Property>
             );
         }

From fb917f1a09d2d79819f97a2a8224d6bc4bae851c Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 16 Dec 2015 14:50:39 +0100
Subject: [PATCH 023/197] Reset the Property value when its checkbox is
 unselected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The user doesn’t want to apply the property, so it should reset to
whatever it is by default.
---
 js/components/ascribe_forms/property.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 432591bf..5b46aa1f 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -241,6 +241,9 @@ const Property = React.createClass({
 
     handleCheckboxToggle() {
         this.setExpanded(!this.state.expanded);
+        this.setState({
+            value: this.state.initialValue
+        });
     },
 
     renderChildren(style) {

From 9f553f973cda61afdf267251a1f5b267acef8322 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 16 Dec 2015 15:45:54 +0100
Subject: [PATCH 024/197] Check for the checkbox being unchecked before
 reseting value

---
 js/components/ascribe_forms/property.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 5b46aa1f..6d46a9d3 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -240,10 +240,17 @@ const Property = React.createClass({
     },
 
     handleCheckboxToggle() {
-        this.setExpanded(!this.state.expanded);
-        this.setState({
-            value: this.state.initialValue
-        });
+        const expanded = !this.state.expanded;
+
+        this.setExpanded(expanded);
+
+        // Reset the value to be the initial value when the checkbox is unticked since the
+        // user doesn't want to specify their own value.
+        if (!expanded) {
+            this.setState({
+                value: this.state.initialValue
+            });
+        }
     },
 
     renderChildren(style) {

From bf244e2bfaf8173b5552d36e7721d6e99040d4c5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 16 Dec 2015 19:03:01 +0100
Subject: [PATCH 025/197] Add padding-bottom to ascribe-property instead of
 ascribe-property-wrapper

Avoids having to style all the collapsible Properties with
`padding-bottom: 0` to center labels when collapsed.
---
 js/components/ascribe_forms/form_consign.js               | 3 +--
 js/components/ascribe_forms/form_copyright_association.js | 5 ++---
 js/components/ascribe_forms/form_loan.js                  | 3 +--
 .../ascribe_forms/form_send_contract_agreement.js         | 3 +--
 js/components/ascribe_forms/form_signup.js                | 5 ++---
 js/components/ascribe_forms/form_submit_to_prize.js       | 3 +--
 .../ascribe_forms/input_contract_agreement_checkbox.js    | 2 +-
 js/components/ascribe_settings/account_settings.js        | 5 ++---
 .../components/pr_forms/pr_register_piece_form.js         | 3 +--
 .../prize/simple_prize/components/prize_register_piece.js | 3 +--
 sass/ascribe_property.scss                                | 8 ++------
 11 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index 2f0ebf05..c92f4b6f 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -115,8 +115,7 @@ let ConsignForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Consign Contract')}
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />
diff --git a/js/components/ascribe_forms/form_copyright_association.js b/js/components/ascribe_forms/form_copyright_association.js
index c378ddba..124a980a 100644
--- a/js/components/ascribe_forms/form_copyright_association.js
+++ b/js/components/ascribe_forms/form_copyright_association.js
@@ -48,8 +48,7 @@ let CopyrightAssociationForm = React.createClass({
                     <Property
                         name="copyright_association"
                         className="ascribe-property-collapsible-toggle"
-                        label={getLangText('Copyright Association')}
-                        style={{paddingBottom: 0}}>
+                        label={getLangText('Copyright Association')}>
                         <select defaultValue={selectedState} name="contract">
                             <option
                                 name={0}
@@ -77,4 +76,4 @@ let CopyrightAssociationForm = React.createClass({
     }
 });
 
-export default CopyrightAssociationForm;
\ No newline at end of file
+export default CopyrightAssociationForm;
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 53a3bb80..15052f4a 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -202,8 +202,7 @@ let LoanForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Loan Contract')}
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />
diff --git a/js/components/ascribe_forms/form_send_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js
index 6f5f74d7..9703571f 100644
--- a/js/components/ascribe_forms/form_send_contract_agreement.js
+++ b/js/components/ascribe_forms/form_send_contract_agreement.js
@@ -128,8 +128,7 @@ let SendContractAgreementForm = React.createClass({
                     <Property
                         name='appendix'
                         checkboxLabel={getLangText('Add appendix to the contract')}
-                        expanded={false}
-                        style={{paddingBottom: 0}}>
+                        expanded={false}>
                         <span>{getLangText('Appendix')}</span>
                         {/* We're using disabled on a form here as PropertyCollapsible currently
                         does not support the disabled + overrideForm functionality */}
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 22f3e120..c0c8ef8d 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -57,7 +57,7 @@ let SignupForm = React.createClass({
         if (response.user) {
             let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
             GlobalNotificationActions.appendGlobalNotification(notification);
-            
+
             // Refactor this to its own component
             this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
         } else {
@@ -131,8 +131,7 @@ let SignupForm = React.createClass({
                 {this.props.children}
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service of ascribe') + ' '}
diff --git a/js/components/ascribe_forms/form_submit_to_prize.js b/js/components/ascribe_forms/form_submit_to_prize.js
index 5818a9ce..43f28e2a 100644
--- a/js/components/ascribe_forms/form_submit_to_prize.js
+++ b/js/components/ascribe_forms/form_submit_to_prize.js
@@ -66,8 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
diff --git a/js/components/ascribe_forms/input_contract_agreement_checkbox.js b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
index 61235631..7008fe31 100644
--- a/js/components/ascribe_forms/input_contract_agreement_checkbox.js
+++ b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
@@ -156,7 +156,7 @@ const InputContractAgreementCheckbox = React.createClass({
                 return (
                     <div
                         className="notification-contract-pdf"
-                        style={{paddingBottom: '1em'}}>
+                        style={{paddingBottom: '0.25em'}}>
                         <embed
                             className="embed-form"
                             src={contractUrl}
diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js
index c650358c..57d66171 100644
--- a/js/components/ascribe_settings/account_settings.js
+++ b/js/components/ascribe_settings/account_settings.js
@@ -35,7 +35,7 @@ let AccountSettings = React.createClass({
     getFormDataProfile(){
         return {'email': this.props.currentUser.email};
     },
-    
+
     render() {
         let content = <AscribeSpinner color='dark-blue' size='lg'/>;
         let profile = null;
@@ -78,8 +78,7 @@ let AccountSettings = React.createClass({
                         getFormData={this.getFormDataProfile}>
                         <Property
                             name="hash_locally"
-                            className="ascribe-property-collapsible-toggle"
-                            style={{paddingBottom: 0}}>
+                            className="ascribe-property-collapsible-toggle">
                             <InputCheckbox
                                 defaultChecked={this.props.currentUser.profile.hash_locally}>
                                 <span>
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index a8d946b5..e1f7023c 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -379,8 +379,7 @@ const PRRegisterPieceForm = React.createClass({
                     className="ascribe-form-bordered">
                     <Property
                         name="terms"
-                        className="ascribe-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
+                        className="ascribe-property-collapsible-toggle">
                         <span>
                             {getLangText('By submitting this form, you agree to the') + ' '}
                             <a
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
index ca4e8fa9..26d517c2 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
@@ -71,8 +71,7 @@ let PrizeRegisterPiece = React.createClass({
                         </Property>
                         <Property
                             name="terms"
-                            className="ascribe-property-collapsible-toggle"
-                            style={{paddingBottom: 0}}>
+                            className="ascribe-property-collapsible-toggle">
                             <InputCheckbox>
                                 <span>
                                     {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss
index d214c57e..ee12f413 100644
--- a/sass/ascribe_property.scss
+++ b/sass/ascribe_property.scss
@@ -3,7 +3,6 @@ $ascribe-red-error: rgb(169, 68, 66);
 .ascribe-property-wrapper {
     background-color: white;
     border-left: 3px solid rgba(0, 0, 0, 0);
-    padding-bottom: 1em;
     text-align: center;
     width: 100%;
 
@@ -37,7 +36,6 @@ $ascribe-red-error: rgb(169, 68, 66);
                 margin-right: 1em;
             }
         }
-        
 
         > input,
         > textarea {
@@ -74,9 +72,7 @@ $ascribe-red-error: rgb(169, 68, 66);
     border-top: 1px solid rgba(0, 0, 0, .05);
     cursor: pointer;
     display: inline-block;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    padding-top: 1em;
+    padding: 1em 1.5em;
     text-align: left;
     width: 100%;
 
@@ -233,4 +229,4 @@ $ascribe-red-error: rgb(169, 68, 66);
     > span > span {
         margin-top: 0;
     }
-}
\ No newline at end of file
+}

From 3cea407ae691a9dad2882a9485759d06f1e53627 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 17 Dec 2015 13:06:42 +0100
Subject: [PATCH 026/197] Use left alignment for global notification messages

---
 sass/ascribe_global_notification.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index 5286a32c..f07ce217 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -22,7 +22,7 @@
     display: table-cell;
     font-size: 1.25em;
     padding-right: 3em;
-    text-align: right;
+    text-align: left;
     vertical-align: middle;
 }
 

From e24cca1c1232c36bbe8bafcb37d3d2babdbff87f Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Thu, 17 Dec 2015 19:23:56 +0100
Subject: [PATCH 027/197] WIP on documentation and sample test

---
 .eslintrc           |  3 ++-
 package.json        |  6 +++++-
 tests/README.md     | 52 +++++++++++++++++++++++++++++++++++++++++++++
 tests/test-login.js | 34 +++++++++++++++++++++++++++++
 4 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 tests/README.md
 create mode 100644 tests/test-login.js

diff --git a/.eslintrc b/.eslintrc
index d41c0a2a..0ce24daa 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,7 +2,8 @@
     "parser": "babel-eslint",
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
+        "mocha": true
     },
     "rules": {
         "new-cap": [2, {newIsCap: true, capIsNew: false}],
diff --git a/package.json b/package.json
index be5c1202..efe9648e 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,11 @@
   "devDependencies": {
     "babel-eslint": "^3.1.11",
     "babel-jest": "^5.2.0",
-    "jest-cli": "^0.4.0"
+    "chai": "^3.4.1",
+    "chai-as-promised": "^5.1.0",
+    "jest-cli": "^0.4.0",
+    "mocha": "^2.3.4",
+    "wd": "^0.4.0"
   },
   "dependencies": {
     "alt": "^0.16.5",
diff --git a/tests/README.md b/tests/README.md
new file mode 100644
index 00000000..dfa6f8cf
--- /dev/null
+++ b/tests/README.md
@@ -0,0 +1,52 @@
+# Welcome to our test suite, let me be your guide
+
+Dear reader, first of all thanks for taking your time reading this document.
+The purpose of this document is to give you an overview on what we want to test
+and how we are doing it.
+
+
+# How it works (bird's-eye view)
+You will notice that the setup is a bit convoluted. This section will explain
+you why.  Testing single functions in JavaScript is not that hard (if you don't
+need to interact with the DOM), and can be easily achieved using frameworks
+like [Mocha](https://mochajs.org/). Integration and cross browser testing is,
+on the other side, a huge [PITA](https://saucelabs.com/selenium/selenium-grid).
+Moreover, "browser testing" includes also "mobile browser testing". Moreover,
+the same browser (type and version) can behave in a different way on different
+operating systems.
+
+To achieve that you can have your own cluster of machines with different
+operating systems and browsers or, if you don't want to spend the rest of your
+life configuring an average of 100 browsers for each different operating
+system, you can pay someone else to do that.
+
+We decided to use [saucelabs](https://saucelabs.com/) cloud (they support [over
+700 combinations](https://saucelabs.com/platforms/) of operating systems and
+browsers) to run our tests.
+
+
+## Components and tools
+
+The components involved are:
+ - **[Selenium WebDriver](https://www.npmjs.com/package/wd)**: it's a library
+   that can control a browser.  You can use the **WebDriver** to load new URLs,
+   click around, fill out forms, submit forms etc.  It's basically a way to
+   control remotely a browser. There are other implementations in Python, PHP,
+   Java, etc.
+
+ - **[Selenium Grid](https://github.com/SeleniumHQ/selenium/wiki/Grid2)**: it's
+   the controller for the cluster of machines/devices that can run browsers.
+   Selenium Grid is able to scale by distributing tests on several machines,
+   manage multiple environments from a central point, making it easy to run the
+   tests against a vast combination of browsers / OS, minimize the maintenance
+   time for the grid by allowing you to implement custom hooks to leverage
+   virtual infrastructure for instance.
+
+ - **[Saucelabs](https://saucelabs.com/)**: a private company providing a
+   cluster to run your tests on over 700 combinations of browsers/operating
+   systems. (They do other things, check out their websites).
+
+
+## Anatomy of a test
+A test is a `.js` file. We use [Mocha](https://mochajs.org/) and [Should](https://shouldjs.github.io/).
+
diff --git a/tests/test-login.js b/tests/test-login.js
new file mode 100644
index 00000000..07c3d1d7
--- /dev/null
+++ b/tests/test-login.js
@@ -0,0 +1,34 @@
+'use strict';
+
+const wd = require('wd');
+const chai = require("chai");
+const chaiAsPromised = require("chai-as-promised");
+chai.use(chaiAsPromised);
+chai.should();
+
+
+describe('Login logs users in', function() {
+    let browser;
+
+    before(function() {
+        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80,
+                                        process.env.ONION_SAUCELABS_USER || 'ascribe',
+                                        process.env.ONION_SAUCELABS_APIKEY || 'b072b4f2-6302-42f6-a25d-47162666ca66') 
+
+                                        return browser.init({ browserName: 'chrome' });
+    });
+
+    beforeEach(function() {
+        return browser.get('http://www.ascribe.ninja/app/login');
+    });
+
+    after(function() {
+        return browser.quit();
+    });
+
+    it('should contain "Log in" in the title', function() {
+        return browser.title().should.become('Log in');
+    });
+
+});
+

From 9a7dbb55ead7995611a29828aa600b2eac7d2bfb Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Fri, 18 Dec 2015 12:03:54 +0100
Subject: [PATCH 028/197] Add config

---
 .env-template       |  2 ++
 .eslintrc           |  1 -
 .gitignore          |  1 +
 package.json        |  1 +
 tests/.eslintrc     | 36 +++++++++++++++++++++++
 tests/README.md     | 69 +++++++++++++++++++++++++++++++++++++++++++--
 tests/test-login.js | 12 ++++----
 7 files changed, 114 insertions(+), 8 deletions(-)
 create mode 100644 .env-template
 create mode 100644 tests/.eslintrc

diff --git a/.env-template b/.env-template
new file mode 100644
index 00000000..593923ec
--- /dev/null
+++ b/.env-template
@@ -0,0 +1,2 @@
+ONION_SAUCELABS_USER=ascribe
+ONION_SAUCELABS_APIKEY=
diff --git a/.eslintrc b/.eslintrc
index 0ce24daa..5751f3ad 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -3,7 +3,6 @@
     "env": {
         "browser": true,
         "es6": true,
-        "mocha": true
     },
     "rules": {
         "new-cap": [2, {newIsCap: true, capIsNew: false}],
diff --git a/.gitignore b/.gitignore
index 30c9eae9..f5bf11e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ node_modules/*
 build
 
 .DS_Store
+.env
diff --git a/package.json b/package.json
index efe9648e..b2bbd68c 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "babel-jest": "^5.2.0",
     "chai": "^3.4.1",
     "chai-as-promised": "^5.1.0",
+    "dotenv": "^1.2.0",
     "jest-cli": "^0.4.0",
     "mocha": "^2.3.4",
     "wd": "^0.4.0"
diff --git a/tests/.eslintrc b/tests/.eslintrc
new file mode 100644
index 00000000..64f8d90a
--- /dev/null
+++ b/tests/.eslintrc
@@ -0,0 +1,36 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "mocha": true,
+        "node": true
+    },
+    "rules": {
+        "new-cap": [2, {newIsCap: true, capIsNew: false}],
+        "quotes": [2, "single"],
+        "eol-last": [0],
+        "no-mixed-requires": [0],
+        "no-underscore-dangle": [0],
+        "global-strict": [2, "always"],
+        "no-trailing-spaces": [2, { skipBlankLines: true }],
+        "no-console": 0,
+        "camelcase": [2, {"properties": "never"}],
+    },
+    "globals": {},
+    "plugins": [],
+    "ecmaFeatures": {
+        "modules": 1,
+        "arrowFunctions",
+        "classes": 1,
+        "blockBindings": 1,
+        "defaultParams": 1,
+        "destructuring": 1,
+        "objectLiteralComputedProperties": 1,
+        "objectLiteralDuplicateProperties": 0,
+        "objectLiteralShorthandMethods": 1,
+        "objectLiteralShorthandProperties": 1,
+        "restParams": 1,
+        "spread": 1,
+        "superInFunctions": 1,
+        "templateStrings": 1
+    }
+}
diff --git a/tests/README.md b/tests/README.md
index dfa6f8cf..458ba4cc 100644
--- a/tests/README.md
+++ b/tests/README.md
@@ -6,6 +6,7 @@ and how we are doing it.
 
 
 # How it works (bird's-eye view)
+
 You will notice that the setup is a bit convoluted. This section will explain
 you why.  Testing single functions in JavaScript is not that hard (if you don't
 need to interact with the DOM), and can be easily achieved using frameworks
@@ -27,12 +28,17 @@ browsers) to run our tests.
 
 ## Components and tools
 
+Right now we are just running the test locally, so no Continuous Integration™.
+
 The components involved are:
  - **[Selenium WebDriver](https://www.npmjs.com/package/wd)**: it's a library
    that can control a browser.  You can use the **WebDriver** to load new URLs,
    click around, fill out forms, submit forms etc.  It's basically a way to
    control remotely a browser. There are other implementations in Python, PHP,
-   Java, etc.
+   Java, etc. Also, a **WebDriver** can be initialized with a list of [desired
+   capabilities](https://code.google.com/p/selenium/wiki/DesiredCapabilities)
+   describing which features (like the platform, browser name and version) you
+   want to use to run your tests.
 
  - **[Selenium Grid](https://github.com/SeleniumHQ/selenium/wiki/Grid2)**: it's
    the controller for the cluster of machines/devices that can run browsers.
@@ -46,7 +52,66 @@ The components involved are:
    cluster to run your tests on over 700 combinations of browsers/operating
    systems. (They do other things, check out their websites).
 
+ - **[SauceConnect](https://wiki.saucelabs.com/display/DOCS/Setting+Up+Sauce+Connect)**:
+   it allows Saucelabs to connect to your `localhost` to test the app.  (There
+   is also a [Node.js wrapper](https://www.npmjs.com/package/sauce-connect), so
+   you can use it programmatically within your code for tests).
+
+
+On the JavaScript side, we use:
+ - [Mocha](https://mochajs.org/): a test framework running on Node.js.
+
+ - [chai](http://chaijs.com/): a BDD/TDD assertion library for node that can be
+   paired with any javascript testing framework.
+
+ - [chaiAsPromised](https://github.com/domenic/chai-as-promised/): an extension
+   for Chai with a fluent language for asserting facts about promises. The
+   extension is actually quite cool, we can do assertions on promises without
+   writing callbacks but just chaining operators. Check out their `README` on
+   GitHub to see an example.
+
+ - [dotenv](https://github.com/motdotla/dotenv): a super nice package to loads
+   environment variables from `.env` into `process.env`.
+
 
 ## Anatomy of a test
-A test is a `.js` file. We use [Mocha](https://mochajs.org/) and [Should](https://shouldjs.github.io/).
 
+```javascript
+'use strict';
+
+require('dotenv').load();
+
+const wd = require('wd');
+const chai = require('chai');
+const chaiAsPromised = require('chai-as-promised');
+chai.use(chaiAsPromised);
+chai.should();
+```
+
+
+```javascript
+describe('Login logs users in', function() {
+    let browser;
+
+    before(function() {
+        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80,
+                                        process.env.ONION_SAUCELABS_USER || 'ascribe',
+                                        process.env.ONION_SAUCELABS_APIKEY || 'b072b4f2-6302-42f6-a25d-47162666ca66');
+
+                                        return browser.init({ browserName: 'chrome' });
+    });
+
+    beforeEach(function() {
+        return browser.get('http://www.ascribe.ninja/app/login');
+    });
+
+    after(function() {
+        return browser.quit();
+    });
+
+    it('should contain "Log in" in the title', function() {
+        return browser.title().should.become('Log in');
+    });
+
+});
+```
diff --git a/tests/test-login.js b/tests/test-login.js
index 07c3d1d7..249a26c2 100644
--- a/tests/test-login.js
+++ b/tests/test-login.js
@@ -1,8 +1,10 @@
 'use strict';
 
+require('dotenv').load();
+
 const wd = require('wd');
-const chai = require("chai");
-const chaiAsPromised = require("chai-as-promised");
+const chai = require('chai');
+const chaiAsPromised = require('chai-as-promised');
 chai.use(chaiAsPromised);
 chai.should();
 
@@ -12,10 +14,10 @@ describe('Login logs users in', function() {
 
     before(function() {
         browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80,
-                                        process.env.ONION_SAUCELABS_USER || 'ascribe',
-                                        process.env.ONION_SAUCELABS_APIKEY || 'b072b4f2-6302-42f6-a25d-47162666ca66') 
+                                        process.env.ONION_SAUCELABS_USER,
+                                        process.env.ONION_SAUCELABS_APIKEY);
 
-                                        return browser.init({ browserName: 'chrome' });
+        return browser.init({ browserName: 'chrome' });
     });
 
     beforeEach(function() {

From e631f3374f0d33387faf6cd15af2059524293292 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Fri, 18 Dec 2015 12:05:49 +0100
Subject: [PATCH 029/197] update code in readme

---
 tests/README.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/tests/README.md b/tests/README.md
index 458ba4cc..b95df74c 100644
--- a/tests/README.md
+++ b/tests/README.md
@@ -95,10 +95,9 @@ describe('Login logs users in', function() {
 
     before(function() {
         browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80,
-                                        process.env.ONION_SAUCELABS_USER || 'ascribe',
-                                        process.env.ONION_SAUCELABS_APIKEY || 'b072b4f2-6302-42f6-a25d-47162666ca66');
-
-                                        return browser.init({ browserName: 'chrome' });
+                                        process.env.ONION_SAUCELABS_USER,
+                                        process.env.ONION_SAUCELABS_APIKEY,
+        return browser.init({ browserName: 'chrome' });
     });
 
     beforeEach(function() {

From db2b0276565436bf16022f321927d3d7d6631f5b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 18 Dec 2015 15:00:37 +0100
Subject: [PATCH 030/197] Fix defaultValue not being initially set for
 InputDate

---
 js/components/ascribe_forms/input_date.js | 31 ++++++++++++++---------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/js/components/ascribe_forms/input_date.js b/js/components/ascribe_forms/input_date.js
index 3e2892c0..d7e36b0d 100644
--- a/js/components/ascribe_forms/input_date.js
+++ b/js/components/ascribe_forms/input_date.js
@@ -17,10 +17,7 @@ let InputDate = React.createClass({
     },
 
     getInitialState() {
-        return {
-            value: null,
-            value_moment: null
-        };
+        return this.getStateFromMoment(this.props.defaultValue);
     },
 
     // InputDate needs to support setting a defaultValue from outside.
@@ -28,20 +25,30 @@ let InputDate = React.createClass({
     // to the outer Property
     componentWillReceiveProps(nextProps) {
         if(!this.state.value && !this.state.value_moment && nextProps.defaultValue) {
-            this.handleChange(this.props.defaultValue);
+            this.handleChange(nextProps.defaultValue);
         }
     },
 
-    handleChange(date) {
-        let formattedDate = date.format('YYYY-MM-DD');
-        this.setState({
-            value: formattedDate,
-            value_moment: date
-        });
+    getStateFromMoment(date) {
+        const state = {};
 
+        if (date) {
+            state.value = date.format('YYYY-MM-DD');
+            state.value_moment = date;
+        }
+
+        return state;
+    },
+
+    handleChange(date) {
+        const newState = this.getStateFromMoment(date);
+
+        this.setState(newState);
+
+        // Propagate change up by faking event
         this.props.onChange({
             target: {
-                value: formattedDate
+                value: newState.value
             }
         });
     },

From 614bc3f74bba65ade05c8446d2b125e2de8a9735 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 18 Dec 2015 15:00:52 +0100
Subject: [PATCH 031/197] Small form fixes

---
 js/components/ascribe_forms/form.js      | 2 +-
 js/components/ascribe_forms/form_loan.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index d4002e85..d015d58d 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -156,7 +156,7 @@ let Form = React.createClass({
 
         for(let ref in this.refs) {
             if(this.refs[ref] && typeof this.refs[ref].handleSuccess === 'function'){
-                this.refs[ref].handleSuccess();
+                this.refs[ref].handleSuccess(response);
             }
         }
         this.setState({
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 861806ae..e04eb209 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -171,7 +171,7 @@ let LoanForm = React.createClass({
                     editable={!gallery}
                     overrideForm={!!gallery}>
                     <input
-                        value={gallery}
+                        defaultValue={gallery}
                         type="text"
                         placeholder={getLangText('Gallery/exhibition (optional)')}/>
                 </Property>

From e8bdeffad868fc2aae6e99bbe1243695d7ec7e32 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Sat, 19 Dec 2015 17:40:53 +0100
Subject: [PATCH 032/197] Refactor, add setup.py

---
 .env-template                 |  4 +-
 package.json                  |  2 +
 {tests => test}/.eslintrc     |  0
 {tests => test}/README.md     | 90 ++++++++++++++++++++++++++++++++---
 test/setup.js                 | 33 +++++++++++++
 {tests => test}/test-login.js |  8 +---
 6 files changed, 122 insertions(+), 15 deletions(-)
 rename {tests => test}/.eslintrc (100%)
 rename {tests => test}/README.md (55%)
 create mode 100644 test/setup.js
 rename {tests => test}/test-login.js (78%)

diff --git a/.env-template b/.env-template
index 593923ec..a836e649 100644
--- a/.env-template
+++ b/.env-template
@@ -1,2 +1,2 @@
-ONION_SAUCELABS_USER=ascribe
-ONION_SAUCELABS_APIKEY=
+SAUCE_USERNAME=ascribe
+SAUCE_ACCESS_KEY=
diff --git a/package.json b/package.json
index b2bbd68c..ba8bfc45 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "scripts": {
     "lint": "eslint ./js",
+    "preinstall": "export SAUCE_CONNECT_DOWNLOAD_ON_INSTALL=true",
     "postinstall": "npm run build",
     "build": "gulp build --production",
     "start": "node server.js"
@@ -40,6 +41,7 @@
     "dotenv": "^1.2.0",
     "jest-cli": "^0.4.0",
     "mocha": "^2.3.4",
+    "sauce-connect-launcher": "^0.13.0",
     "wd": "^0.4.0"
   },
   "dependencies": {
diff --git a/tests/.eslintrc b/test/.eslintrc
similarity index 100%
rename from tests/.eslintrc
rename to test/.eslintrc
diff --git a/tests/README.md b/test/README.md
similarity index 55%
rename from tests/README.md
rename to test/README.md
index b95df74c..2c8d6d46 100644
--- a/tests/README.md
+++ b/test/README.md
@@ -34,7 +34,11 @@ The components involved are:
  - **[Selenium WebDriver](https://www.npmjs.com/package/wd)**: it's a library
    that can control a browser.  You can use the **WebDriver** to load new URLs,
    click around, fill out forms, submit forms etc.  It's basically a way to
-   control remotely a browser. There are other implementations in Python, PHP,
+   control remotely a browser. The protocol (language agnostic) is called
+   [JsonWire](https://code.google.com/p/selenium/wiki/JsonWireProtocol), `wd`
+   wraps it and gives you a nice
+   [API](https://github.com/admc/wd/blob/master/doc/jsonwire-full-mapping.md)
+   you can use in JavaScript. There are other implementations in Python, PHP,
    Java, etc. Also, a **WebDriver** can be initialized with a list of [desired
    capabilities](https://code.google.com/p/selenium/wiki/DesiredCapabilities)
    describing which features (like the platform, browser name and version) you
@@ -53,9 +57,12 @@ The components involved are:
    systems. (They do other things, check out their websites).
 
  - **[SauceConnect](https://wiki.saucelabs.com/display/DOCS/Setting+Up+Sauce+Connect)**:
-   it allows Saucelabs to connect to your `localhost` to test the app.  (There
-   is also a [Node.js wrapper](https://www.npmjs.com/package/sauce-connect), so
-   you can use it programmatically within your code for tests).
+   is a Java software by Saucelabs to connect to your `localhost` to test the
+   application. There is also a Node.js wrapper
+   [sauce-connect-launcher](https://www.npmjs.com/package/sauce-connect-launcher),
+   so you can use it programmatically within your code for tests. Please note
+   that this module is just a wrapper around the actual software. Running `npm
+   install` should install the additional Java software as well.
 
 
 On the JavaScript side, we use:
@@ -74,8 +81,49 @@ On the JavaScript side, we use:
    environment variables from `.env` into `process.env`.
 
 
+## How to set up your `.env` config file
+In the root of this repository there is a file called `.env-template`. Create a
+copy and call it `.env`. This file will store some values we need to connect to
+Saucelabs.
+
+There are two values to be set:
+ - `SAUCE_ACCESS_KEY`
+ - `SAUCE_USERNAME`
+
+The two keys are the [default
+ones](https://github.com/admc/wd#environment-variables-for-saucelabs) used by
+many products related to Saucelabs. This allow us to keep the configuration
+fairly straightforward and simple.
+
+After logging in to https://saucelabs.com/, you can find your **api key** under
+the **My Account**. Copy paste the value in your `.env` file.
+
+
 ## Anatomy of a test
 
+First, you need to learn how [Mocha](https://mochajs.org/) works. Brew a coffee
+(or tea, if coffee is not your cup of tea), sit down and read the docs.
+
+Done? Great, let's move on and analyze how a test is written.
+
+From a very high level, the flow of a test is the following:
+ 1. load a page with a specific URL
+ 2. do something on the page (click a button, submit a form, etc.)
+ 3. maybe wait some seconds, or wait if something has changed
+ 4. check if the new page contains some text you expect to be there
+
+This is not set in stone, so go crazy if you want. But keep in mind that we
+have a one page application, there might be some gotchas on how to wait for
+stuff to happen. I suggest you to read the section [Wait for
+something](https://github.com/admc/wd#waiting-for-something) to understand
+better which tools you have to solve this problem.
+Again, take a look to the [`wd` implementation of the JsonWire
+protocol](https://github.com/admc/wd/blob/master/doc/jsonwire-full-mapping.md)
+to know all the methods you can use to control the browser.
+
+
+Import the libraries we need.
+
 ```javascript
 'use strict';
 
@@ -84,33 +132,61 @@ require('dotenv').load();
 const wd = require('wd');
 const chai = require('chai');
 const chaiAsPromised = require('chai-as-promised');
+```
+
+
+Set up `chai` to use `chaiAsPromised`.
+
+```javascript
 chai.use(chaiAsPromised);
 chai.should();
 ```
 
+`browser` is the main object to interact with Saucelab "real" browsers. We will
+use this object a lot. It allow us to load pages, click around, check if a
+specific text is present etc.
 
 ```javascript
 describe('Login logs users in', function() {
     let browser;
+```
 
+Create the driver to control the browser.
+```javascript
     before(function() {
-        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80,
-                                        process.env.ONION_SAUCELABS_USER,
-                                        process.env.ONION_SAUCELABS_APIKEY,
+        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
         return browser.init({ browserName: 'chrome' });
     });
+```
 
+This function will be executed before each `it` function. Here we point the browser to a specific URL.
+
+```javascript
     beforeEach(function() {
         return browser.get('http://www.ascribe.ninja/app/login');
     });
+```
 
+While this function will be executed after each `it` function. `quit` will destroy the browser session.
+
+```javascript
     after(function() {
         return browser.quit();
     });
+```
 
+The actual test. We query the `browser` object to get the title of the page.
+Note that `.title()` returns a `promise` **but**, since we are using
+`chaiAsPromised`, we have some syntactic sugar to handle the promise in line,
+without writing new functions.
+
+```javascript
     it('should contain "Log in" in the title', function() {
         return browser.title().should.become('Log in');
     });
 
 });
 ```
+
+## How to run the test suite
+
diff --git a/test/setup.js b/test/setup.js
new file mode 100644
index 00000000..0313a4ae
--- /dev/null
+++ b/test/setup.js
@@ -0,0 +1,33 @@
+'use strict';
+
+require('dotenv').load();
+
+const sauceConnectLauncher = require('sauce-connect-launcher');
+let globalSauceProcess;
+
+
+if (process.env.SAUCE_AUTO_CONNECT) {
+    before(function(done) {
+        // Creating the tunnel takes a bit of time. For this case we can safely disable it.
+        this.timeout(0);
+
+        sauceConnectLauncher(function (err, sauceConnectProcess) {
+            if (err) {
+                console.error(err.message);
+                return;
+            }
+            globalSauceProcess = sauceConnectProcess;
+            done();
+        });
+    });
+
+
+    after(function (done) {
+        // Creating the tunnel takes a bit of time. For this case we can safely disable it.
+        this.timeout(0);
+
+        if (globalSauceProcess) {
+            globalSauceProcess.close(done);
+        }
+    });
+}
diff --git a/tests/test-login.js b/test/test-login.js
similarity index 78%
rename from tests/test-login.js
rename to test/test-login.js
index 249a26c2..82bdad9d 100644
--- a/tests/test-login.js
+++ b/test/test-login.js
@@ -1,7 +1,5 @@
 'use strict';
 
-require('dotenv').load();
-
 const wd = require('wd');
 const chai = require('chai');
 const chaiAsPromised = require('chai-as-promised');
@@ -10,13 +8,11 @@ chai.should();
 
 
 describe('Login logs users in', function() {
+    this.timeout(0);
     let browser;
 
     before(function() {
-        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80,
-                                        process.env.ONION_SAUCELABS_USER,
-                                        process.env.ONION_SAUCELABS_APIKEY);
-
+        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
         return browser.init({ browserName: 'chrome' });
     });
 

From 2e3e5d9a60b1e09718574a9e5adf9349337f7cb7 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Sat, 19 Dec 2015 17:54:28 +0100
Subject: [PATCH 033/197] Small updates to the readme

---
 test/README.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/test/README.md b/test/README.md
index 2c8d6d46..0aab26bd 100644
--- a/test/README.md
+++ b/test/README.md
@@ -11,15 +11,16 @@ You will notice that the setup is a bit convoluted. This section will explain
 you why.  Testing single functions in JavaScript is not that hard (if you don't
 need to interact with the DOM), and can be easily achieved using frameworks
 like [Mocha](https://mochajs.org/). Integration and cross browser testing is,
-on the other side, a huge [PITA](https://saucelabs.com/selenium/selenium-grid).
-Moreover, "browser testing" includes also "mobile browser testing". Moreover,
-the same browser (type and version) can behave in a different way on different
-operating systems.
+on the other side, a huge PITA.  Moreover, "browser testing" includes also
+"mobile browser testing". On the top of that the same browser (type and
+version) can behave in a different way on different operating systems.
 
 To achieve that you can have your own cluster of machines with different
 operating systems and browsers or, if you don't want to spend the rest of your
 life configuring an average of 100 browsers for each different operating
-system, you can pay someone else to do that.
+system, you can pay someone else to do that. Check out [this
+article](https://saucelabs.com/selenium/selenium-grid) if you want to know why
+using Selenium Grid is better than a DIY approach.
 
 We decided to use [saucelabs](https://saucelabs.com/) cloud (they support [over
 700 combinations](https://saucelabs.com/platforms/) of operating systems and
@@ -77,7 +78,7 @@ On the JavaScript side, we use:
    writing callbacks but just chaining operators. Check out their `README` on
    GitHub to see an example.
 
- - [dotenv](https://github.com/motdotla/dotenv): a super nice package to loads
+ - [dotenv](https://github.com/motdotla/dotenv): a super nice package to load
    environment variables from `.env` into `process.env`.
 
 

From 418022dff506025313bd315d6a6756dca08ffe08 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 21 Dec 2015 11:40:59 +0100
Subject: [PATCH 034/197] wip

---
 .../further_details_fileuploader.js             |  2 ++
 .../ascribe_forms/form_register_piece.js        | 10 ++++++++--
 .../ascribe_forms/input_fineuploader.js         |  3 +++
 .../ascribe_uploader/react_s3_fine_uploader.js  | 12 ++++++++----
 .../pr_forms/pr_register_piece_form.js          | 17 +++++++++++++----
 js/constants/application_constants.js           |  4 ++++
 6 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index b044bbbc..acdbe9e0 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -20,6 +20,7 @@ let FurtherDetailsFileuploader = React.createClass({
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
         setIsUploadReady: React.PropTypes.func,
         submitFile: React.PropTypes.func,
+        onValidationFailed: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
         editable: React.PropTypes.bool,
         multiple: React.PropTypes.bool
@@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({
                     }}
                     validation={AppConstants.fineUploader.validation.additionalData}
                     submitFile={this.props.submitFile}
+                    onValidationFailed={this.props.onValidationFailed}
                     setIsUploadReady={this.props.setIsUploadReady}
                     isReadyForFormSubmission={this.props.isReadyForFormSubmission}
                     session={{
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 83d38b50..596f8a56 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -109,6 +109,11 @@ let RegisterPieceForm = React.createClass({
         );
     },
 
+    handleThumbnailValidationFailed(thumbnailFile) {
+        // If the validation fails, set the thumbnail as submittable since its optional
+        this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
+    },
+
     isThumbnailDialogExpanded() {
         const { enableSeparateThumbnail } = this.props;
         const { digitalWorkFile } = this.state;
@@ -194,14 +199,15 @@ let RegisterPieceForm = React.createClass({
                             url: ApiUrls.blob_thumbnails
                         }}
                         handleChangedFile={this.handleChangedThumbnail}
+                        onValidationFailed={this.handleThumbnailValidationFailed}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                         keyRoutine={{
                             url: AppConstants.serverUrl + 's3/key/',
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
+                            sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
                             allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index db5bae05..fa9c72b6 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -52,6 +52,7 @@ const InputFineUploader = React.createClass({
             plural: string
         }),
         handleChangedFile: func,
+        onValidationFailed: func,
 
         // Provided by `Property`
         onChange: React.PropTypes.func
@@ -107,6 +108,7 @@ const InputFineUploader = React.createClass({
             isFineUploaderActive,
             isReadyForFormSubmission,
             keyRoutine,
+            onValidationFailed,
             setIsUploadReady,
             uploadMethod,
             validation,
@@ -127,6 +129,7 @@ const InputFineUploader = React.createClass({
                 createBlobRoutine={createBlobRoutine}
                 validation={validation}
                 submitFile={this.submitFile}
+                onValidationFailed={onValidationFailed}
                 setIsUploadReady={setIsUploadReady}
                 isReadyForFormSubmission={isReadyForFormSubmission}
                 areAssetsDownloadable={areAssetsDownloadable}
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index eb211504..877146a5 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -50,6 +50,7 @@ const ReactS3FineUploader = React.createClass({
         }),
         handleChangedFile: func, // is for when a file is dropped or selected
         submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
+        onValidationFailed: func,
         autoUpload: bool,
         debug: bool,
         objectProperties: shape({
@@ -523,13 +524,16 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isFileValid(file) {
-        if(file.size > this.props.validation.sizeLimit) {
+        if (file.size > this.props.validation.sizeLimit) {
+            const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
 
-            let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
-
-            let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
 
+            if (typeof this.props.onValidationFailed === 'function') {
+                this.props.onValidationFailed(file);
+            }
+
             return false;
         } else {
             return true;
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index a8d946b5..6b67467e 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -139,7 +139,7 @@ const PRRegisterPieceForm = React.createClass({
     },
 
     /**
-     * This method is overloaded so that we can track the ready-state
+     * These two methods are overloaded so that we can track the ready-state
      * of each uploader in the component
      * @param {string} uploaderKey Name of the uploader's key to track
      */
@@ -151,6 +151,14 @@ const PRRegisterPieceForm = React.createClass({
         };
     },
 
+    handleOptionalFileValidationFailed(uploaderKey) {
+        return () => {
+            this.setState({
+                [uploaderKey]: true
+            });
+        };
+    },
+
     getSubmitButton() {
         const { digitalWorkKeyReady,
                 thumbnailKeyReady,
@@ -303,7 +311,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={getLangText('Featured Cover photo')}>
+                        label={getLangText('Featured Cover photo (max 2MB)')}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{
@@ -316,8 +324,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'thumbnail'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
+                                sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
                                 allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
                             }}
                             location={location}
@@ -334,6 +342,7 @@ const PRRegisterPieceForm = React.createClass({
                             fileInputElement={UploadButton()}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                             setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
+                            onValidationFailed={this.handleOptionalFileValidationFailed('supportingMaterialsReady')}
                             createBlobRoutine={this.getCreateBlobRoutine()}
                             keyRoutine={{
                                 url: AppConstants.serverUrl + 's3/key/',
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 74edc51b..3c587b2b 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -91,6 +91,10 @@ const constants = {
             'registerWork': {
                 'itemLimit': 1,
                 'sizeLimit': '25000000000'
+            },
+            'workThumbnail': {
+                'itemLimit': 1,
+                'sizeLimit': '2000000'
             }
         }
     },

From 5a497bae5987e2933e622f4c32f2d502785a7d9a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 21 Dec 2015 11:44:13 +0100
Subject: [PATCH 035/197] Small cleanups and fixes for spacing, unused props,
 etc

---
 js/actions/contract_list_actions.js           | 16 ++---
 .../ascribe_settings/contract_settings.js     | 36 ++++------
 .../contract_settings_update_button.js        | 68 +++++++++----------
 js/fetchers/ownership_fetcher.js              | 14 ++--
 4 files changed, 61 insertions(+), 73 deletions(-)

diff --git a/js/actions/contract_list_actions.js b/js/actions/contract_list_actions.js
index 1c5c0913..d368ac73 100644
--- a/js/actions/contract_list_actions.js
+++ b/js/actions/contract_list_actions.js
@@ -28,12 +28,10 @@ class ContractListActions {
     }
 
 
-    changeContract(contract){
+    changeContract(contract) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.changeContract(contract)
-                .then((res) => {
-                    resolve(res);
-                })
+                .then(resolve)
                 .catch((err)=> {
                     console.logGlobal(err);
                     reject(err);
@@ -41,13 +39,11 @@ class ContractListActions {
         });
     }
 
-    removeContract(contractId){
-        return Q.Promise( (resolve, reject) => {
+    removeContract(contractId) {
+        return Q.Promise((resolve, reject) => {
             OwnershipFetcher.deleteContract(contractId)
-                .then((res) => {
-                    resolve(res);
-                })
-                .catch( (err) => {
+                .then(resolve)
+                .catch((err) => {
                     console.logGlobal(err);
                     reject(err);
                 });
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 71d97542..be723295 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -28,11 +28,7 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils
 
 
 let ContractSettings = React.createClass({
-    propTypes: {
-        location: React.PropTypes.object
-    },
-
-    getInitialState(){
+    getInitialState() {
         return mergeOptions(
             ContractListStore.getState(),
             UserStore.getState()
@@ -64,40 +60,39 @@ let ContractSettings = React.createClass({
             ContractListActions.removeContract(contract.id)
                 .then((response) => {
                     ContractListActions.fetchContractList(true);
-                    let notification = new GlobalNotificationModel(response.notification, 'success', 4000);
+                    const notification = new GlobalNotificationModel(response.notification, 'success', 4000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 })
                 .catch((err) => {
-                    let notification = new GlobalNotificationModel(err, 'danger', 10000);
+                    const notification = new GlobalNotificationModel(err, 'danger', 10000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 });
         };
     },
 
-    getPublicContracts(){
+    getPublicContracts() {
         return this.state.contractList.filter((contract) => contract.is_public);
     },
 
-    getPrivateContracts(){
+    getPrivateContracts() {
         return this.state.contractList.filter((contract) => !contract.is_public);
     },
 
     render() {
-        let publicContracts = this.getPublicContracts();
-        let privateContracts = this.getPrivateContracts();
+        const publicContracts = this.getPublicContracts();
+        const privateContracts = this.getPrivateContracts();
         let createPublicContractForm = null;
 
         setDocumentTitle(getLangText('Contracts settings'));
 
-        if(publicContracts.length === 0) {
+        if (publicContracts.length === 0) {
             createPublicContractForm = (
                 <CreateContractForm
                     isPublic={true}
                     fileClassToUpload={{
                         singular: 'new contract',
                         plural: 'new contracts'
-                    }}
-                    location={this.props.location}/>
+                    }} />
             );
         }
 
@@ -114,7 +109,7 @@ let ContractSettings = React.createClass({
                             {publicContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
@@ -123,8 +118,7 @@ let ContractSettings = React.createClass({
                                                     aclObject={this.state.whitelabel}
                                                     aclName="acl_update_public_contract">
                                                     <ContractSettingsUpdateButton
-                                                        contract={contract}
-                                                        location={this.props.location}/>
+                                                        contract={contract} />
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
@@ -154,12 +148,11 @@ let ContractSettings = React.createClass({
                             fileClassToUpload={{
                                 singular: getLangText('new contract'),
                                 plural: getLangText('new contracts')
-                            }}
-                            location={this.props.location}/>
+                            }} />
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
@@ -168,8 +161,7 @@ let ContractSettings = React.createClass({
                                                     aclObject={this.state.whitelabel}
                                                     aclName="acl_update_private_contract">
                                                     <ContractSettingsUpdateButton
-                                                        contract={contract}
-                                                        location={this.props.location}/>
+                                                        contract={contract} />
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js
index 7649e5b0..c09ba94f 100644
--- a/js/components/ascribe_settings/contract_settings_update_button.js
+++ b/js/components/ascribe_settings/contract_settings_update_button.js
@@ -55,40 +55,40 @@ let ContractSettingsUpdateButton = React.createClass({
     render() {
         return (
            <ReactS3FineUploader
-                fileInputElement={UploadButton()}
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'contract'
-                }}
-                createBlobRoutine={{
-                    url: ApiUrls.blob_contracts
-                }}
-                validation={{
-                    itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                    sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
-                    allowedExtensions: ['pdf']
-                }}
-                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                fileClassToUpload={{
-                    singular: getLangText('UPDATE'),
-                    plural: getLangText('UPDATE')
-                }}
-                isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                submitFile={this.submitFile} />
+               fileInputElement={UploadButton({ showLabel: false })}
+               keyRoutine={{
+                   url: AppConstants.serverUrl + 's3/key/',
+                   fileClass: 'contract'
+               }}
+               createBlobRoutine={{
+                   url: ApiUrls.blob_contracts
+               }}
+               validation={{
+                   itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
+                   sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                   allowedExtensions: ['pdf']
+               }}
+               setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+               signature={{
+                   endpoint: AppConstants.serverUrl + 's3/signature/',
+                   customHeaders: {
+                      'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                   }
+               }}
+               deleteFile={{
+                   enabled: true,
+                   method: 'DELETE',
+                   endpoint: AppConstants.serverUrl + 's3/delete',
+                   customHeaders: {
+                      'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                   }
+               }}
+               fileClassToUpload={{
+                   singular: getLangText('UPDATE'),
+                   plural: getLangText('UPDATE')
+               }}
+               isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+               submitFile={this.submitFile} />
         );
     }
 });
diff --git a/js/fetchers/ownership_fetcher.js b/js/fetchers/ownership_fetcher.js
index b0d88927..f498ffa1 100644
--- a/js/fetchers/ownership_fetcher.js
+++ b/js/fetchers/ownership_fetcher.js
@@ -15,7 +15,7 @@ let OwnershipFetcher = {
     /**
      * Fetch the contracts of the logged-in user from the API.
      */
-    fetchContractList(isActive, isPublic, issuer){
+    fetchContractList(isActive, isPublic, issuer) {
         let queryParams = {
             isActive,
             isPublic,
@@ -28,7 +28,7 @@ let OwnershipFetcher = {
     /**
      * Create a contractagreement between the logged-in user and the email from the API with contract.
      */
-    createContractAgreement(signee, contractObj){
+    createContractAgreement(signee, contractObj) {
         return requests.post(ApiUrls.ownership_contract_agreements, { body: {signee: signee, contract: contractObj.id }});
     },
 
@@ -44,23 +44,23 @@ let OwnershipFetcher = {
         return requests.get(ApiUrls.ownership_contract_agreements, queryParams);
     },
 
-    confirmContractAgreement(contractAgreement){
+    confirmContractAgreement(contractAgreement) {
         return requests.put(ApiUrls.ownership_contract_agreements_confirm, {contract_agreement_id: contractAgreement.id});
     },
 
-    denyContractAgreement(contractAgreement){
+    denyContractAgreement(contractAgreement) {
         return requests.put(ApiUrls.ownership_contract_agreements_deny, {contract_agreement_id: contractAgreement.id});
     },
 
-    fetchLoanPieceRequestList(){
+    fetchLoanPieceRequestList() {
         return requests.get(ApiUrls.ownership_loans_pieces_request);
     },
 
-    changeContract(contractObj){
+    changeContract(contractObj) {
         return requests.put(ApiUrls.ownership_contract, { body: contractObj, contract_id: contractObj.id });
     },
 
-    deleteContract(contractObjId){
+    deleteContract(contractObjId) {
         return requests.delete(ApiUrls.ownership_contract, {contract_id: contractObjId});
     }
 };

From 3467e9f526cdcbb4cb895656da34f6be31354287 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 21 Dec 2015 11:45:50 +0100
Subject: [PATCH 036/197] Make behaviour of ContractSettingsUpdateButton more
 robust
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also fixes the “Contract could not be updated” notification that would
occur after every attempt to update the contract.
---
 .../contract_settings_update_button.js        | 34 +++++++++++--------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js
index c09ba94f..f3e92c69 100644
--- a/js/components/ascribe_settings/contract_settings_update_button.js
+++ b/js/components/ascribe_settings/contract_settings_update_button.js
@@ -24,37 +24,41 @@ let ContractSettingsUpdateButton = React.createClass({
     },
 
     submitFile(file) {
-        let contract = this.props.contract;
-
         // override the blob with the key's value
-        contract.blob = file.key;
+        const contract = Object.assign(this.props.contract, { blob: file.key });
 
         // send it to the server
         ContractListActions
             .changeContract(contract)
             .then((res) => {
-
                 // Display feedback to the user
-                let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000);
+                const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000);
                 GlobalNotificationActions.appendGlobalNotification(notification);
 
                 // and refresh the contract list to get the updated contracs
-                return ContractListActions.fetchContractList(true);
-            })
-            .then(() => {
-                // Also, reset the fineuploader component so that the user can again 'update' his contract
-                this.refs.fineuploader.reset();
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-                let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000);
+                return ContractListActions
+                            .fetchContractList(true)
+                            // Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract
+                            .then(this.refs.fineuploader.reset)
+                            .catch((err) => {
+                                const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000);
+                                GlobalNotificationActions.appendGlobalNotification(notification);
+
+                                return Promise.reject(err);
+                            });
+            }, (err) => {
+                const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000);
                 GlobalNotificationActions.appendGlobalNotification(notification);
-            });
+
+                return Promise.reject(err);
+            })
+            .catch(console.logGlobal);
     },
 
     render() {
         return (
            <ReactS3FineUploader
+               ref='fineuploader'
                fileInputElement={UploadButton({ showLabel: false })}
                keyRoutine={{
                    url: AppConstants.serverUrl + 's3/key/',

From ebd575caa3c0aa73bd85607ace035c570010c463 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 21 Dec 2015 11:46:46 +0100
Subject: [PATCH 037/197] Add prop to hide label of UploadButton

---
 .../ascribe_upload_button/upload_button.js    | 47 ++++++++++---------
 sass/ascribe_uploader.scss                    | 23 +++++----
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index 6612f968..ffd26a13 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
@@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 const { func, array, bool, shape, string } = React.PropTypes;
 
 
-export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
+export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
     return React.createClass({
         displayName: 'UploadButton',
 
@@ -119,28 +120,28 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadedFileLabel() {
-            const uploadedFile = this.getUploadedFile();
-            const uploadingFiles = this.getUploadingFiles();
+            if (showLabel) {
+                const uploadedFile = this.getUploadedFile();
+                const uploadingFiles = this.getUploadingFiles();
 
-            if(uploadingFiles.length) {
-                return (
-                    <span>
-                        {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
-                        [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
-                    </span>
-                );
-            } else if(uploadedFile) {
-                return (
-                    <span>
-                        <span className='ascribe-icon icon-ascribe-ok'/>
-                        {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
-                        [<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
-                    </span>
-                );
-            } else {
-                return (
-                    <span>{getLangText('No file chosen')}</span>
-                );
+                if (uploadingFiles.length) {
+                    return (
+                        <span>
+                            {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
+                            [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
+                        </span>
+                    );
+                } else if (uploadedFile) {
+                    return (
+                        <span>
+                            <span className='ascribe-icon icon-ascribe-ok'/>
+                            {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
+                            [<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
+                        </span>
+                    );
+                } else {
+                    return <span>{getLangText('No file chosen')}</span>;
+                }
             }
         },
 
@@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
              */
             return (
-                <div className="upload-button-wrapper">
+                <div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
                     {/*
                         The button needs to be of `type="button"` as it would
                         otherwise submit the form its in.
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index e6dd66cc..e6228916 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -29,7 +29,7 @@
 
 .file-drag-and-drop-dialog {
     margin: 1.5em 0 1.5em 0;
-    
+
     > p:first-child {
         font-size: 1.5em !important;
         margin-bottom: 0;
@@ -189,15 +189,20 @@
     height: 12px;
 }
 
-.upload-button-wrapper {
+.ascribe-upload-button {
+    display: inline-block;
     text-align: left;
 
-    .btn {
-        font-size: 1em;
-        margin-right: 1em;
-    }
+    &.ascribe-upload-button-has-label {
+        display: block;
 
-    span + .btn {
-        margin-left: 1em;
+        .btn {
+            font-size: 1em;
+            margin-right: 1em;
+        }
+
+        span + .btn {
+            margin-left: 1em;
+        }
     }
-}
\ No newline at end of file
+}

From c335dd38826485dbe4a6906aadf7c5f670524316 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 4 Jan 2016 13:08:32 +0100
Subject: [PATCH 038/197] On subdomain get error, use the default subdomain
 settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also small cleanups and avoids adding `client—undefined` class to body
for default subdomain
---
 js/app.js                   | 32 ++++++++++++++------------------
 js/routes.js                | 12 ++++--------
 js/utils/constants_utils.js | 14 +++++++++-----
 3 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/js/app.js b/js/app.js
index dc8204cf..42ad1473 100644
--- a/js/app.js
+++ b/js/app.js
@@ -17,7 +17,7 @@ import getRoutes from './routes';
 import requests from './utils/requests';
 
 import { updateApiUrls } from './constants/api_urls';
-import { getSubdomainSettings } from './utils/constants_utils';
+import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils';
 import { initLogging } from './utils/error_utils';
 import { getSubdomain } from './utils/general_utils';
 
@@ -50,11 +50,10 @@ requests.defaults({
 
 class AppGateway {
     start() {
-        let settings;
-        let subdomain = getSubdomain();
-
         try {
-            settings = getSubdomainSettings(subdomain);
+            const subdomain = getSubdomain();
+            const settings = getSubdomainSettings(subdomain);
+
             AppConstants.whitelabel = settings;
             updateApiUrls(settings.type, subdomain);
             this.load(settings);
@@ -62,28 +61,25 @@ class AppGateway {
             // if there are no matching subdomains, we're routing
             // to the default frontend
             console.logGlobal(err);
-            this.load();
+            this.load(getDefaultSubdomainSettings());
         }
     }
 
     load(settings) {
-        let type = 'default';
-        let subdomain = 'www';
+        const { subdomain, type } = settings;
         let redirectRoute = (<Redirect from="/" to="/collection" />);
 
-        if (settings) {
-            type = settings.type;
-            subdomain = settings.subdomain;
-        }
+        if (subdomain) {
+            // Some whitelabels have landing pages so we should not automatically redirect from / to /collection.
+            // Only www and cc do not have a landing page.
+            if (subdomain !== 'cc') {
+                redirectRoute = null;
+            }
 
-        // www and cc do not have a landing page
-        if(subdomain && subdomain !== 'cc') {
-            redirectRoute = null;
+            // Adds a client specific class to the body for whitelabel styling
+            window.document.body.classList.add('client--' + subdomain);
         }
 
-        // Adds a client specific class to the body for whitelabel styling
-        window.document.body.classList.add('client--' + subdomain);
-
         // Send the applicationWillBoot event to the third-party stores
         EventActions.applicationWillBoot(settings);
 
diff --git a/js/routes.js b/js/routes.js
index 49a284af..025a0fb6 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -28,7 +28,7 @@ import RegisterPiece from './components/register_piece';
 import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_handler';
 
 
-let COMMON_ROUTES = (
+const COMMON_ROUTES = (
     <Route path='/' component={App}>
         <Route
             path='login'
@@ -65,17 +65,13 @@ let COMMON_ROUTES = (
 
 
 function getRoutes(type, subdomain) {
-    let routes = null;
-
     if (type === 'prize') {
-        routes = getPrizeRoutes(COMMON_ROUTES, subdomain);
+        return getPrizeRoutes(COMMON_ROUTES, subdomain);
     } else if(type === 'wallet') {
-        routes = getWalletRoutes(COMMON_ROUTES, subdomain);
+        return getWalletRoutes(COMMON_ROUTES, subdomain);
     } else {
-        routes = COMMON_ROUTES;
+        return COMMON_ROUTES;
     }
-
-    return routes;
 }
 
 
diff --git a/js/utils/constants_utils.js b/js/utils/constants_utils.js
index 8bf408d1..b42db817 100644
--- a/js/utils/constants_utils.js
+++ b/js/utils/constants_utils.js
@@ -1,15 +1,19 @@
 'use strict';
 
-import appConstants from '../constants/application_constants';
+import AppConstants from '../constants/application_constants';
+
+export function getDefaultSubdomainSettings() {
+    return AppConstants.defaultDomain;
+}
 
 export function getSubdomainSettings(subdomain) {
-    let settings = appConstants.subdomains.filter((sdSettings) => subdomain === sdSettings.subdomain);
+    const settings = AppConstants.subdomains.filter((sdSettings) => subdomain === sdSettings.subdomain);
 
-    if(settings.length === 1) {
+    if (settings.length === 1) {
         return settings[0];
-    } else if(settings.length === 0) {
+    } else if (settings.length === 0) {
         console.warn('There are no subdomain settings for the subdomain: ' + subdomain);
-        return appConstants.defaultDomain;
+        return AppConstants.defaultDomain;
     } else {
         throw new Error('Matched multiple subdomains. Adjust constants file.');
     }

From 4a3a368fc50b303db266d13f22ee92994cfd9b21 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 4 Jan 2016 13:09:03 +0100
Subject: [PATCH 039/197] Remove unused `logo` and `permissions` fields from
 subdomain constants

---
 js/constants/application_constants.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 824ed4b2..a230eb0c 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -24,52 +24,38 @@ const constants = {
         {
             'subdomain': 'cc',
             'name': 'Creative Commons France',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/public/creativecommons/cc.logo.sm.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet',
             'ga': 'UA-60614729-4'
         },
         {
             'subdomain': 'sluice',
             'name': 'Sluice Art Fair',
-            'logo': 'http://sluice.info/images/logo.gif',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'prize',
             'ga': 'UA-60614729-5'
         },
         {
             'subdomain': 'cyland',
             'name': 'Cyland media art lab',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/cyland/logo.gif',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': 'ikonotv',
             'name': 'IkonoTV',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono-logo-black.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': 'lumenus',
             'name': 'Lumenus',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': '23vivi',
             'name': '23VIVI',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',
-            'logo': 'http://notfoundlogo.de',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'prize'
         }
     ],

From 3c72ee331d847416d3f30dc924b48682ac99958c Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 4 Jan 2016 13:14:50 +0100
Subject: [PATCH 040/197] Convert AppGateway to be single instance

---
 js/app.js | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/js/app.js b/js/app.js
index 42ad1473..9118fbe3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -33,22 +33,8 @@ import NotificationsHandler from './third_party/notifications';
 import FacebookHandler from './third_party/facebook';
 /* eslint-enable */
 
-initLogging();
 
-let headers = {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json'
-};
-
-requests.defaults({
-    urlMap: ApiUrls,
-    http: {
-        headers: headers,
-        credentials: 'include'
-    }
-});
-
-class AppGateway {
+const AppGateway = {
     start() {
         try {
             const subdomain = getSubdomain();
@@ -63,7 +49,7 @@ class AppGateway {
             console.logGlobal(err);
             this.load(getDefaultSubdomainSettings());
         }
-    }
+    },
 
     load(settings) {
         const { subdomain, type } = settings;
@@ -97,8 +83,21 @@ class AppGateway {
         // Send the applicationDidBoot event to the third-party stores
         EventActions.applicationDidBoot(settings);
     }
-}
+};
 
-let ag = new AppGateway();
-ag.start();
+// Initialize pre-start components
+initLogging();
 
+requests.defaults({
+    urlMap: ApiUrls,
+    http: {
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        credentials: 'include'
+    }
+});
+
+// And bootstrap app
+AppGateway.start();

From 41c9a10c84c765f0c55bfe3e97cb6c82c479217f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 5 Jan 2016 17:28:45 +0100
Subject: [PATCH 041/197] Use a default shouldRedirect that just always returns
 true

---
 js/components/piece_list.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index de979e65..dfe30a9c 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -53,7 +53,6 @@ let PieceList = React.createClass({
             accordionListItemType: AccordionListItemWallet,
             bulkModalButtonListType: AclButtonList,
             canLoadPieceList: true,
-            orderParams: ['artist_name', 'title'],
             filterParams: [{
                 label: getLangText('Show works I can'),
                 items: [
@@ -61,7 +60,9 @@ let PieceList = React.createClass({
                     'acl_consign',
                     'acl_create_editions'
                 ]
-            }]
+            }],
+            orderParams: ['artist_name', 'title'],
+            shouldRedirect: () => true
         };
     },
 

From cf6dbb26f3e3f7a9179c9ed5dec9287d189e0c9c Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 6 Jan 2016 15:13:09 +0100
Subject: [PATCH 042/197] Fix loading of Facebook share button

---
 js/actions/facebook_actions.js                | 14 ++++++
 .../facebook_share_button.js                  | 50 +++++++++++++------
 js/third_party/facebook.js                    | 17 +++++--
 sass/ascribe_social_share.scss                |  4 ++
 4 files changed, 65 insertions(+), 20 deletions(-)
 create mode 100644 js/actions/facebook_actions.js

diff --git a/js/actions/facebook_actions.js b/js/actions/facebook_actions.js
new file mode 100644
index 00000000..2e784fba
--- /dev/null
+++ b/js/actions/facebook_actions.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import { altThirdParty } from '../alt';
+
+
+class FacebookActions {
+    constructor() {
+        this.generateActions(
+            'sdkReady'
+        );
+    }
+}
+
+export default altThirdParty.createActions(FacebookActions);
diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js
index aa0b6691..682bc6f1 100644
--- a/js/components/ascribe_social_share/facebook_share_button.js
+++ b/js/components/ascribe_social_share/facebook_share_button.js
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import FacebookHandler from '../../third_party/facebook';
+
 import AppConstants from '../../constants/application_constants';
 
 import { InjectInHeadUtils } from '../../utils/inject_utils';
@@ -17,24 +19,40 @@ let FacebookShareButton = React.createClass({
         };
     },
 
-    componentDidMount() {
-        /**
-         * Ideally we would only use FB.XFBML.parse() on the component that we're
-         * mounting, but doing this when we first load the FB sdk causes unpredictable behaviour.
-         * The button sometimes doesn't get initialized, likely because FB hasn't properly
-         * been initialized yet.
-         *
-         * To circumvent this, we always have the sdk parse the entire DOM on the initial load
-         * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
-         */
-
-        InjectInHeadUtils
-            .inject(AppConstants.facebook.sdkUrl)
-            .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
+    getInitialState() {
+        return FacebookHandler.getState();
     },
 
-    shouldComponentUpdate(nextProps) {
-        return this.props.type !== nextProps.type;
+    componentDidMount() {
+        FacebookHandler.listen(this.onChange);
+
+        this.loadFacebook();
+    },
+
+    shouldComponentUpdate(nextProps, nextState) {
+        // Don't update if the props haven't changed or the FB SDK loading status is still the same
+        return this.props.type !== nextProps.type || nextState.loaded !== this.state.loaded;
+    },
+
+    componentDidUpdate() {
+        // If the component changes, we need to reparse the share button's XFBML.
+        // To prevent cases where the Facebook SDK hasn't been loaded yet at this stage,
+        // let's make sure that it's injected before trying to reparse.
+        this.loadFacebook();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    loadFacebook() {
+        InjectInHeadUtils
+            .inject(AppConstants.facebook.sdkUrl)
+            .then(() => {
+                if (this.state.loaded) {
+                    FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent)
+                }
+            });
     },
 
     render() {
diff --git a/js/third_party/facebook.js b/js/third_party/facebook.js
index eab0b0e0..9e40e7ab 100644
--- a/js/third_party/facebook.js
+++ b/js/third_party/facebook.js
@@ -1,13 +1,18 @@
 'use strict';
 
 import { altThirdParty } from '../alt';
+
 import EventActions from '../actions/event_actions';
+import FacebookActions from '../actions/facebook_actions';
 
 import AppConstants from '../constants/application_constants'
 
 class FacebookHandler {
     constructor() {
+        this.loaded = false;
+
         this.bindActions(EventActions);
+        this.bindActions(FacebookActions);
     }
 
     onApplicationWillBoot(settings) {
@@ -16,15 +21,19 @@ class FacebookHandler {
         window.fbAsyncInit = () => {
             FB.init({
                 appId: AppConstants.facebook.appId,
-                // Force FB to parse everything on first load to make sure all the XFBML components are initialized.
-                // If we don't do this, we can run into issues with components on the first load who are not be
-                // initialized.
-                xfbml: true,
+                // Don't parse anything on the first load as we will parse all XFBML components as necessary.
+                xfbml: false,
                 version: 'v2.5',
                 cookie: false
             });
+
+            FacebookActions.sdkReady();
         };
     }
+
+    onSdkReady() {
+        this.loaded = true;
+    }
 }
 
 export default altThirdParty.createStore(FacebookHandler, 'FacebookHandler');
diff --git a/sass/ascribe_social_share.scss b/sass/ascribe_social_share.scss
index 0a577fb6..64e6e06b 100644
--- a/sass/ascribe_social_share.scss
+++ b/sass/ascribe_social_share.scss
@@ -7,4 +7,8 @@
     width: 56px;
     box-sizing: content-box;   /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */
     padding: 1px 0;
+
+    &:not(:first-child) {
+        margin-left: 1px;
+    }
 }

From 7f1e4ce0db150651b5c157b9b678abf09f473c1a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 6 Jan 2016 15:23:48 +0100
Subject: [PATCH 043/197] Rename third party handler files to match their
 declarations

---
 js/app.js                                       | 17 ++++++-----------
 js/third_party/{debug.js => debug_handler.js}   |  1 -
 .../{facebook.js => facebook_handler.js}        |  0
 js/third_party/{ga.js => ga_handler.js}         |  0
 .../{intercom.js => intercom_handler.js}        |  0
 ...otifications.js => notifications_handler.js} |  0
 js/third_party/{raven.js => raven_handler.js}   |  0
 7 files changed, 6 insertions(+), 12 deletions(-)
 rename js/third_party/{debug.js => debug_handler.js} (99%)
 rename js/third_party/{facebook.js => facebook_handler.js} (100%)
 rename js/third_party/{ga.js => ga_handler.js} (100%)
 rename js/third_party/{intercom.js => intercom_handler.js} (100%)
 rename js/third_party/{notifications.js => notifications_handler.js} (100%)
 rename js/third_party/{raven.js => raven_handler.js} (100%)

diff --git a/js/app.js b/js/app.js
index dc8204cf..c4645296 100644
--- a/js/app.js
+++ b/js/app.js
@@ -6,9 +6,7 @@ import React from 'react';
 import { Router, Redirect } from 'react-router';
 import history from './history';
 
-/* eslint-disable */
 import fetch from 'isomorphic-fetch';
-/* eslint-enable */
 
 import ApiUrls from './constants/api_urls';
 
@@ -23,15 +21,13 @@ import { getSubdomain } from './utils/general_utils';
 
 import EventActions from './actions/event_actions';
 
-/* eslint-disable */
 // You can comment out the modules you don't need
-// import DebugHandler from './third_party/debug';
-import GoogleAnalyticsHandler from './third_party/ga';
-import RavenHandler from './third_party/raven';
-import IntercomHandler from './third_party/intercom';
-import NotificationsHandler from './third_party/notifications';
-import FacebookHandler from './third_party/facebook';
-/* eslint-enable */
+// import DebugHandler from './third_party/debug_handler';
+import FacebookHandler from './third_party/facebook_handler';
+import GoogleAnalyticsHandler from './third_party/ga_handler';
+import IntercomHandler from './third_party/intercom_handler';
+import NotificationsHandler from './third_party/notifications_handler';
+import RavenHandler from './third_party/raven_handler';
 
 initLogging();
 
@@ -105,4 +101,3 @@ class AppGateway {
 
 let ag = new AppGateway();
 ag.start();
-
diff --git a/js/third_party/debug.js b/js/third_party/debug_handler.js
similarity index 99%
rename from js/third_party/debug.js
rename to js/third_party/debug_handler.js
index 23fe4d04..cd11bf72 100644
--- a/js/third_party/debug.js
+++ b/js/third_party/debug_handler.js
@@ -4,7 +4,6 @@ import { altThirdParty } from '../alt';
 import EventActions from '../actions/event_actions';
 
 
-
 class DebugHandler {
     constructor() {
         let symbols = [];
diff --git a/js/third_party/facebook.js b/js/third_party/facebook_handler.js
similarity index 100%
rename from js/third_party/facebook.js
rename to js/third_party/facebook_handler.js
diff --git a/js/third_party/ga.js b/js/third_party/ga_handler.js
similarity index 100%
rename from js/third_party/ga.js
rename to js/third_party/ga_handler.js
diff --git a/js/third_party/intercom.js b/js/third_party/intercom_handler.js
similarity index 100%
rename from js/third_party/intercom.js
rename to js/third_party/intercom_handler.js
diff --git a/js/third_party/notifications.js b/js/third_party/notifications_handler.js
similarity index 100%
rename from js/third_party/notifications.js
rename to js/third_party/notifications_handler.js
diff --git a/js/third_party/raven.js b/js/third_party/raven_handler.js
similarity index 100%
rename from js/third_party/raven.js
rename to js/third_party/raven_handler.js

From 74a587906b2ed9173c30dfe607468b061a22cab4 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 7 Jan 2016 18:29:55 +0100
Subject: [PATCH 044/197] Add anchorize utility to textareas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

And Tim thought this was going to be a piece of cake… next time he can
play with the url regex.
---
 .../ascribe_detail/further_details.js         | 34 ++++----
 .../ascribe_forms/form_piece_extradata.js     | 29 ++++---
 .../ascribe_forms/input_textarea_toggable.js  | 41 +++++-----
 js/utils/dom_utils.js                         | 82 +++++++++++++++++--
 js/utils/regex_utils.js                       | 53 +++++++++++-
 5 files changed, 181 insertions(+), 58 deletions(-)

diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js
index c178fb93..387398b5 100644
--- a/js/components/ascribe_detail/further_details.js
+++ b/js/components/ascribe_detail/further_details.js
@@ -32,13 +32,13 @@ let FurtherDetails = React.createClass({
         };
     },
 
-    showNotification(){
+    showNotification() {
         this.props.handleSuccess();
-        let notification = new GlobalNotificationModel('Details updated', 'success');
+        const notification = new GlobalNotificationModel('Details updated', 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    submitFile(file){
+    submitFile(file) {
         this.setState({
             otherDataKey: file.key
         });
@@ -51,6 +51,8 @@ let FurtherDetails = React.createClass({
     },
 
     render() {
+        const { editable, extraData, otherData, pieceId } = this.props;
+
         return (
             <Row>
                 <Col md={12} className="ascribe-edition-personal-note">
@@ -58,33 +60,33 @@ let FurtherDetails = React.createClass({
                         name='artist_contact_info'
                         title='Artist Contact Info'
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData}
-                        />
+                        editable={editable}
+                        pieceId={pieceId}
+                        extraData={extraData}
+                        convertLinks />
                     <PieceExtraDataForm
                         name='display_instructions'
                         title='Display Instructions'
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData} />
+                        editable={editable}
+                        pieceId={pieceId}
+                        extraData={extraData} />
                     <PieceExtraDataForm
                         name='technology_details'
                         title='Technology Details'
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData} />
+                        editable={editable}
+                        pieceId={pieceId}
+                        extraData={extraData} />
                     <Form>
                         <FurtherDetailsFileuploader
                             submitFile={this.submitFile}
                             setIsUploadReady={this.setIsUploadReady}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            editable={this.props.editable}
+                            editable={editable}
                             overrideForm={true}
-                            pieceId={this.props.pieceId}
-                            otherData={this.props.otherData}
+                            pieceId={pieceId}
+                            otherData={otherData}
                             multiple={true} />
                     </Form>
                 </Col>
diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js
index f6ee4177..3e45f509 100644
--- a/js/components/ascribe_forms/form_piece_extradata.js
+++ b/js/components/ascribe_forms/form_piece_extradata.js
@@ -18,38 +18,43 @@ let PieceExtraDataForm = React.createClass({
         handleSuccess: React.PropTypes.func,
         name: React.PropTypes.string,
         title: React.PropTypes.string,
+        convertLinks: React.PropTypes.bool,
         editable: React.PropTypes.bool
     },
 
     getFormData() {
-        let extradata = {};
-        extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
         return {
-            extradata: extradata,
+            extradata: {
+                [this.props.name]: this.refs.form.refs[this.props.name].state.value
+            },
             piece_id: this.props.pieceId
         };
     },
-    
+
     render() {
-        let defaultValue = this.props.extraData[this.props.name] || '';
-        if (defaultValue.length === 0 && !this.props.editable){
+        const { convertLinks, editable, extraData, handleSuccess, name, pieceId, title } = this.props;
+        const defaultValue = this.props.extraData[this.props.name] || '';
+
+        if (defaultValue.length === 0 && !editable){
             return null;
         }
-        let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId});
+
+        const url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: pieceId});
         return (
             <Form
                 ref='form'
                 url={url}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 getFormData={this.getFormData}
-                disabled={!this.props.editable}>
+                disabled={!editable}>
                 <Property
-                    name={this.props.name}
-                    label={this.props.title}>
+                    name={name}
+                    label={title}>
                     <InputTextAreaToggable
                         rows={1}
+                        convertLinks={convertLinks}
                         defaultValue={defaultValue}
-                        placeholder={getLangText('Fill in%s', ' ') + this.props.title}
+                        placeholder={getLangText('Fill in%s', ' ') + title}
                         required />
                 </Property>
                 <hr />
diff --git a/js/components/ascribe_forms/input_textarea_toggable.js b/js/components/ascribe_forms/input_textarea_toggable.js
index 0be8b87a..05a1f011 100644
--- a/js/components/ascribe_forms/input_textarea_toggable.js
+++ b/js/components/ascribe_forms/input_textarea_toggable.js
@@ -4,17 +4,20 @@ import React from 'react';
 
 import TextareaAutosize from 'react-textarea-autosize';
 
+import { anchorize } from '../../utils/dom_utils';
+
 
 let InputTextAreaToggable = React.createClass({
     propTypes: {
         autoFocus: React.PropTypes.bool,
-        disabled: React.PropTypes.bool,
-        rows: React.PropTypes.number.isRequired,
-        required: React.PropTypes.bool,
+        convertLinks: React.PropTypes.bool,
         defaultValue: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
+        disabled: React.PropTypes.bool,
         onBlur: React.PropTypes.func,
-        onChange: React.PropTypes.func
+        onChange: React.PropTypes.func,
+        placeholder: React.PropTypes.string,
+        required: React.PropTypes.bool,
+        rows: React.PropTypes.number.isRequired
     },
 
     getInitialState() {
@@ -36,7 +39,7 @@ let InputTextAreaToggable = React.createClass({
     componentDidUpdate() {
         // If the initial value of state.value is null, we want to set props.defaultValue
         // as a value. In all other cases TextareaAutosize.onChange is updating.handleChange already
-        if(this.state.value === null && this.props.defaultValue) {
+        if (this.state.value === null && this.props.defaultValue) {
             this.setState({
                 value: this.props.defaultValue
             });
@@ -49,28 +52,26 @@ let InputTextAreaToggable = React.createClass({
     },
 
     render() {
-        let className = 'form-control ascribe-textarea';
-        let textarea = null;
+        const { convertLinks, disabled, onBlur, placeholder, required, rows } = this.props;
+        const { value } = this.state;
 
-        if(!this.props.disabled) {
-            className = className + ' ascribe-textarea-editable';
-            textarea = (
+        if (!disabled) {
+            return (
                 <TextareaAutosize
                     ref='textarea'
-                    className={className}
-                    value={this.state.value}
-                    rows={this.props.rows}
+                    className='form-control ascribe-textarea ascribe-textarea-editable'
+                    value={value}
+                    rows={rows}
                     maxRows={10}
-                    required={this.props.required}
+                    required={required}
                     onChange={this.handleChange}
-                    onBlur={this.props.onBlur}
-                    placeholder={this.props.placeholder} />
+                    onBlur={onBlur}
+                    placeholder={placeholder} />
             );
         } else {
-            textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
+            // Can only convert links when not editable, as textarea does not support anchors
+            return <pre className="ascribe-pre">{convertLinks ? anchorize(value) : value}</pre>;
         }
-
-        return textarea;
     }
 });
 
diff --git a/js/utils/dom_utils.js b/js/utils/dom_utils.js
index d009f90f..f0cd852c 100644
--- a/js/utils/dom_utils.js
+++ b/js/utils/dom_utils.js
@@ -1,5 +1,9 @@
 'use strict';
 
+import React from 'react';
+
+import { getLinkRegex, isEmail } from './regex_utils';
+
 /**
  * Set the title in the browser window.
  */
@@ -13,21 +17,24 @@ export function setDocumentTitle(title) {
  * @param  {object} elementAttributes: hash table containing the attributes of the relevant element
  */
 function constructHeadElement(elementType, elementId, elementAttributes) {
-    let head = (document.head || document.getElementsByTagName('head')[0]);
-    let element = document.createElement(elementType);
-    let oldElement = document.getElementById(elementId);
+    const head = (document.head || document.getElementsByTagName('head')[0]);
+    const element = document.createElement(elementType);
+    const oldElement = document.getElementById(elementId);
+
     element.setAttribute('id', elementId);
-    for (let k in elementAttributes){
+
+    for (let k in elementAttributes) {
         try {
             element.setAttribute(k, elementAttributes[k]);
-        }
-        catch(e){
+        } catch(e) {
             console.warn(e.message);
         }
     }
+
     if (oldElement) {
         head.removeChild(oldElement);
     }
+
     head.appendChild(element);
 }
 
@@ -37,9 +44,68 @@ function constructHeadElement(elementType, elementId, elementAttributes) {
  */
 export function constructHead(headObject){
     for (let k in headObject){
-        let favicons = headObject[k];
+        const favicons = headObject[k];
         for (let f in favicons){
             constructHeadElement(k, f, favicons[f]);
         }
     }
-}
\ No newline at end of file
+}
+
+/**
+ * Replaces the links and emails in a given string with anchor elements.
+ *
+ * @param  {string} string          String to anchorize
+ * @param  {(object)} options       Options object for anchorizing
+ * @param  {(boolean)} emails         Whether or not to replace emails (default: true)
+ * @param  {(boolean)} links          Whether or not to replace links (default: true)
+ * @param  {(string)} target          Anchor target attribute (default: '_blank')
+ * @return {string|React.element[]} Anchorized string as usable react element, either as an array of
+ *                                  elements or just a string
+ */
+export function anchorize(string, { emails: replaceEmail = true, links: replaceLink = true, target = '_blank' } = {}) {
+    if (!replaceEmail && !replaceLink) {
+        return string;
+    }
+
+    const linkRegex = getLinkRegex();
+    const strWithAnchorElems = [];
+    let lastMatchIndex = 0;
+    let regexMatch;
+
+    while (regexMatch = linkRegex.exec(string)) {
+        const [ matchedStr, schemeName ] = regexMatch;
+        const matchedStrIsEmail = isEmail(matchedStr);
+
+        let anchorizedMatch;
+        if (matchedStrIsEmail && replaceEmail) {
+            anchorizedMatch = (<a href={`mailto:${matchedStr}`}>{matchedStr}</a>);
+        } else if (!matchedStrIsEmail && replaceLink) {
+            anchorizedMatch = (<a href={`${schemeName ? matchedStr : ('http://' + matchedStr)}`} target={target}>{matchedStr}</a>);
+        }
+
+        // We only need to add an element to the array and update the lastMatchIndex if we actually create an anchor
+        if (anchorizedMatch) {
+            // First add the string between the end of the last anchor text and the start of the current match
+            const currentMatchStartIndex = linkRegex.lastIndex - matchedStr.length;
+
+            if (lastMatchIndex !== currentMatchStartIndex) {
+                strWithAnchorElems.push(string.substring(lastMatchIndex, currentMatchStartIndex));
+            }
+
+            strWithAnchorElems.push(anchorizedMatch);
+
+            lastMatchIndex = linkRegex.lastIndex;
+        }
+    }
+
+    if (strWithAnchorElems.length) {
+        // Add the string between the end of the last anchor and the end of the string
+        if (lastMatchIndex !== string.length) {
+            strWithAnchorElems.push(string.substring(lastMatchIndex));
+        }
+
+        return strWithAnchorElems;
+    } else {
+        return string;
+    }
+}
diff --git a/js/utils/regex_utils.js b/js/utils/regex_utils.js
index af948b2b..49412d07 100644
--- a/js/utils/regex_utils.js
+++ b/js/utils/regex_utils.js
@@ -1,7 +1,56 @@
 'use strict'
 
-export function isEmail(string) {
+// TODO: Create Unittests that test all functions
+
+// We return new regexes everytime as opposed to using a constant regex because
+// regexes with the global flag maintain internal iterators that can cause problems:
+// http://bjorn.tipling.com/state-and-regular-expressions-in-javascript
+// http://www.2ality.com/2013/08/regexp-g.html
+export function getEmailRegex() {
     // This is a bit of a weak test for an email, but you really can't win them all
     // http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address
-    return !!string && string.match(/.*@.*\..*/);
+    return /.*@.*\..*/g;
+}
+
+export function getLinkRegex() {
+    // You really can't win them all with urls too (unless a 500 character regex that adheres
+    // to a strict interpretation of urls sounds like fun!)
+    // https://mathiasbynens.be/demo/url-regex
+    //
+    // This was initially based off of the one angular uses for its linky
+    // (https://github.com/angular/angular.js/blob/master/src/ngSanitize/filter/linky.js)...
+    // but then it evovled into its own thing to support capturing groups for filtering the
+    // hostname and other technically valid urls.
+    //
+    // Capturing groups:
+    //   1. URL scheme
+    //   2. URL without scheme
+    //   3. Host name
+    //   4. Path
+    //   5. Fragment
+    //
+    // Passes most tests of https://mathiasbynens.be/demo/url-regex, but provides a few false
+    // positives for some tests that are too strict (like `foo.com`). There are a few other
+    // false positives, such as `http://www.foo.bar./` but c'mon, that one's not my fault.
+    // I'd argue we would want to match that as a link anyway.
+    //
+    // Note: This also catches emails, as otherwise it would match the `ascribe.io` in `hi@ascribe.io`,
+    // producing (what I think is) more surprising behaviour than the alternative.
+    return /\b(https?:\/\/)?((?:www\.)?((?:[^\s.,;()\/]+\.)+[^\s$_!*()$&.,;=?+\/\#]+)((?:\/|\?|\/\?)[^\s#^`{}<>?"\[\]\/\|]+)*\/?(#[^\s#%^`{}<>?"\[\]\/\|]*)?)/g;
+}
+
+/**
+ * @param  {string} string String to check
+ * @return {boolean}       Whether string is an email or not
+ */
+export function isEmail(string) {
+    return !!string && string.match(getEmailRegex());
+}
+
+/**
+ * @param  {string} string String to check
+ * @return {boolean}       Whether string is an link or not
+ */
+export function isLink(string) {
+    return !!string && string.match(getLinkRegex());
 }

From d1a056b7d937aa9aec70a91ea2311462418d7cca Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 7 Jan 2016 18:30:27 +0100
Subject: [PATCH 045/197] Use left text align for ascribe-pre

---
 sass/ascribe_textarea.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sass/ascribe_textarea.scss b/sass/ascribe_textarea.scss
index bcd0502a..e241e442 100644
--- a/sass/ascribe_textarea.scss
+++ b/sass/ascribe_textarea.scss
@@ -14,7 +14,7 @@
     font-family: inherit;
     margin: 0;
     padding: 0;
-    text-align: justify;
+    text-align: left;
     white-space: -moz-pre-wrap;
     white-space: -o-pre-wrap;
     white-space: -pre-wrap;

From fce578e854c1bd9c02a9f5600451b8465f7211f0 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 8 Jan 2016 11:44:25 +0100
Subject: [PATCH 046/197] Decorate rackt/history with history of previous
 locations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Could be turned into a createHistory enhancer function
(https://github.com/rackt/history/blob/master/docs/Glossary.md#createhis
toryenhancer), but we’ll see what the guys at rackt/history say about
it…
---
 js/components/ascribe_app.js          | 28 +++++++++++++++++++++++----
 js/constants/application_constants.js |  2 ++
 js/history.js                         |  8 ++++++--
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index cda5637f..774395ae 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -1,11 +1,14 @@
 'use strict';
 
 import React from 'react';
+import { History } from 'react-router';
 
-import Header from '../components/header';
-import Footer from '../components/footer';
+import Header from './header';
+import Footer from './footer';
 import GlobalNotification from './global_notification';
 
+import AppConstants from '../constants/application_constants';
+
 
 let AscribeApp = React.createClass({
     propTypes: {
@@ -13,11 +16,28 @@ let AscribeApp = React.createClass({
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ]),
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        routes: React.PropTypes.arrayOf(React.PropTypes.object),
+        location: React.PropTypes.object
+    },
+
+    mixins: [History],
+
+    componentDidMount() {
+        this.history.locationQueue.push(this.props.location);
+    },
+
+    componentWillReceiveProps(nextProps) {
+        const { locationQueue } = this.history;
+        locationQueue.unshift(nextProps.location);
+
+        // Limit the number of locations to keep in memory to avoid too much memory usage
+        if (locationQueue.length > AppConstants.locationThreshold) {
+            locationQueue.length = AppConstants.locationThreshold;
+        }
     },
 
     render() {
-        let { children, routes } = this.props;
+        const { children, routes } = this.props;
 
         return (
             <div className="container ascribe-default-app">
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 824ed4b2..bfb758f0 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -104,6 +104,8 @@ const constants = {
         'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',
         'SPA', 'GESTOR', 'VISaRTA', 'RAO', 'LITA', 'DALRO', 'VeGaP', 'BUS', 'ProLitteris', 'AGADU', 'AUTORARTE', 'BUBEDRA', 'BBDA', 'BCDA', 'BURIDA', 'ADAVIS', 'BSDA'],
 
+    'locationThreshold': 10,
+
     'searchThreshold': 500,
 
     'supportedThumbnailFileFormats': [
diff --git a/js/history.js b/js/history.js
index 903f2b73..0683fcb3 100644
--- a/js/history.js
+++ b/js/history.js
@@ -6,8 +6,12 @@ import AppConstants from './constants/application_constants';
 
 
 // Remove the trailing slash if present
-let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
+const baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
 
-export default useBasename(createBrowserHistory)({
+const history = useBasename(createBrowserHistory)({
     basename: baseUrl
 });
+
+history.locationQueue = [];
+
+export default history;

From 7e77cb58dcfe036d762690f087926e608dc7c6d6 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 8 Jan 2016 11:45:01 +0100
Subject: [PATCH 047/197] Log the previous location if a 404 is encountered

---
 js/components/error_not_found_page.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js
index 0e111ce7..c42d2926 100644
--- a/js/components/error_not_found_page.js
+++ b/js/components/error_not_found_page.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import { History } from 'react-router';
 
 import { getLangText } from '../utils/lang_utils';
 
@@ -10,12 +11,25 @@ let ErrorNotFoundPage = React.createClass({
         message: React.PropTypes.string
     },
 
+    mixins: [History],
+
     getDefaultProps() {
         return {
             message: getLangText("Oops, the page you are looking for doesn't exist.")
         };
     },
 
+    componentDidMount() {
+        // The previous page, if any, is the second item in the locationQueue
+        const { locationQueue: [ _, previousPage ] } = this.history;
+
+        if (previousPage) {
+            console.logGlobal('Page not found', {
+                previousPath: previousPage.pathname
+            });
+        }
+    },
+
     render() {
         return (
             <div className="row">
@@ -32,4 +46,4 @@ let ErrorNotFoundPage = React.createClass({
     }
 });
 
-export default ErrorNotFoundPage;
\ No newline at end of file
+export default ErrorNotFoundPage;

From 2cedfd636e9aac237fae9b08d6c80992a0231e68 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 8 Jan 2016 14:49:39 +0100
Subject: [PATCH 048/197] Use Raven's `ignoreErrors` configuration option to
 ignore certain errors

---
 js/utils/error_utils.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/js/utils/error_utils.js b/js/utils/error_utils.js
index eefe40d8..a29f59a0 100644
--- a/js/utils/error_utils.js
+++ b/js/utils/error_utils.js
@@ -13,22 +13,19 @@ import AppConstants from '../constants/application_constants';
  * @param  {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
  * @param  {string} comment  Will also be submitted to Sentry, but will not be logged
  */
-function logGlobal(error, comment, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1) {
+function logGlobal(error, comment, ignoreSentry) {
     console.error(error);
 
-    if(!ignoreSentry) {
-        if(comment) {
-            Raven.captureException(error, {extra: { comment }});
-        } else {
-            Raven.captureException(error);
-        }
+    if (!ignoreSentry) {
+        Raven.captureException(error, comment ? { extra: { comment } } : undefined);
     }
 }
 
 export function initLogging() {
     // Initialize Raven for logging on Sentry
     Raven.config(AppConstants.raven.url, {
-        release: AppConstants.version
+        release: AppConstants.version,
+        ignoreErrors: AppConstants.errorMessagesToIgnore
     }).install();
 
     window.onerror = Raven.process;

From 19841ce6c4a61dcc686ab1a20a635f567a18d331 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 8 Jan 2016 14:59:45 +0100
Subject: [PATCH 049/197] Refactor EventActions and UserStore to more cleanly
 handle user authentication and log out events

---
 js/actions/event_actions.js                   |  5 ++--
 js/components/header.js                       | 17 ++-----------
 js/components/logout_container.js             |  7 ------
 .../prize/portfolioreview/pr_app.js           | 13 ----------
 js/stores/user_store.js                       | 25 ++++++++++++++++---
 js/third_party/intercom.js                    | 15 ++++++-----
 js/third_party/notifications.js               | 11 +++++---
 js/third_party/raven.js                       |  9 +++++--
 8 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/js/actions/event_actions.js b/js/actions/event_actions.js
index 6d8ee12f..24889f4e 100644
--- a/js/actions/event_actions.js
+++ b/js/actions/event_actions.js
@@ -8,9 +8,8 @@ class EventActions {
         this.generateActions(
             'applicationWillBoot',
             'applicationDidBoot',
-            'profileDidLoad',
-            //'userDidLogin',
-            //'userDidLogout',
+            'userDidAuthenticate',
+            'userDidLogout',
             'routeDidChange'
         );
     }
diff --git a/js/components/header.js b/js/components/header.js
index c16cba86..ed4a9a3d 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -59,19 +59,6 @@ let Header = React.createClass({
         // close the mobile expanded navigation after a click by itself.
         // To get rid of this, we set the state of the component ourselves.
         history.listen(this.onRouteChange);
-
-        if (this.state.currentUser && this.state.currentUser.email) {
-            EventActions.profileDidLoad.defer(this.state.currentUser);
-        }
-    },
-
-    componentWillUpdate(nextProps, nextState) {
-        const { currentUser: { email: curEmail } = {} } = this.state;
-        const { currentUser: { email: nextEmail } = {} } = nextState;
-
-        if (nextEmail && curEmail !== nextEmail) {
-            EventActions.profileDidLoad.defer(nextState.currentUser);
-        }
     },
 
     componentWillUnmount() {
@@ -81,7 +68,7 @@ let Header = React.createClass({
     },
 
     getLogo() {
-        let { whitelabel } = this.state;
+        const { whitelabel } = this.state;
 
         if (whitelabel.head) {
             constructHead(whitelabel.head);
@@ -102,7 +89,7 @@ let Header = React.createClass({
         );
     },
 
-    getPoweredBy(){
+    getPoweredBy() {
         return (
             <AclProxy
                 aclObject={this.state.whitelabel}
diff --git a/js/components/logout_container.js b/js/components/logout_container.js
index 41bd9a1f..b4132612 100644
--- a/js/components/logout_container.js
+++ b/js/components/logout_container.js
@@ -6,7 +6,6 @@ import { History } from 'react-router';
 import AscribeSpinner from './ascribe_spinner';
 
 import UserActions from '../actions/user_actions';
-import { alt, altWhitelabel, altUser, altThirdParty } from '../alt';
 
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
@@ -17,12 +16,6 @@ let LogoutContainer = React.createClass({
 
     componentDidMount() {
         UserActions.logoutCurrentUser();
-        alt.flush();
-        altWhitelabel.flush();
-        altUser.flush();
-        altThirdParty.flush();
-        // kill intercom (with fire)
-        window.Intercom('shutdown');
     },
 
     render() {
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index c672bdf5..30e5ee75 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -32,19 +32,6 @@ let PRApp = React.createClass({
     componentDidMount() {
         UserStore.listen(this.onChange);
         UserActions.fetchCurrentUser();
-
-        if (this.state.currentUser && this.state.currentUser.email) {
-            EventActions.profileDidLoad.defer(this.state.currentUser);
-        }
-    },
-
-    componentWillUpdate(nextProps, nextState) {
-        const { currentUser: { email: curEmail } = {} } = this.state;
-        const { currentUser: { email: nextEmail } = {} } = nextState;
-
-        if (nextEmail && curEmail !== nextEmail) {
-            EventActions.profileDidLoad.defer(nextState.currentUser);
-        }
     },
 
     componentWillUnmount() {
diff --git a/js/stores/user_store.js b/js/stores/user_store.js
index 64b170dc..f07e56e7 100644
--- a/js/stores/user_store.js
+++ b/js/stores/user_store.js
@@ -1,8 +1,10 @@
 'use strict';
 
-import { altUser } from '../alt';
-import UserActions from '../actions/user_actions';
+import { alt, altWhitelabel, altUser, altThirdParty } from '../alt';
 
+import EventActions from '../actions/event_actions';
+
+import UserActions from '../actions/user_actions';
 import UserSource from '../sources/user_source';
 
 
@@ -21,7 +23,7 @@ class UserStore {
     onFetchCurrentUser(invalidateCache) {
         this.userMeta.invalidateCache = invalidateCache;
 
-        if(!this.getInstance().isLoading()) {
+        if (!this.getInstance().isLoading()) {
             this.getInstance().lookupCurrentUser();
         }
     }
@@ -29,11 +31,26 @@ class UserStore {
     onSuccessFetchCurrentUser({users: [user = {}]}) {
         this.userMeta.invalidateCache = false;
         this.userMeta.err = null;
+
+        if (user.email && user.email !== this.currentUser.email) {
+            EventActions.userDidAuthenticate(user);
+        }
+
         this.currentUser = user;
     }
 
     onLogoutCurrentUser() {
-        this.getInstance().performLogoutCurrentUser();
+        this.getInstance()
+            .performLogoutCurrentUser()
+            .then(() => {
+                EventActions.userDidLogout();
+
+                // Reset all stores back to their initial state
+                alt.recycle();
+                altWhitelabel.recycle();
+                altUser.recycle();
+                altThirdParty.recycle();
+            });
     }
 
     onSuccessLogoutCurrentUser() {
diff --git a/js/third_party/intercom.js b/js/third_party/intercom.js
index 4ab2ff50..fc14ced2 100644
--- a/js/third_party/intercom.js
+++ b/js/third_party/intercom.js
@@ -12,25 +12,28 @@ class IntercomHandler {
         this.loaded = false;
     }
 
-    onProfileDidLoad(profile) {
+    onUserDidAuthenticate(user) {
         if (this.loaded) {
             return;
         }
 
-        /* eslint-disable */
-        Intercom('boot', {
-            /* eslint-enable */
+        window.Intercom('boot', {
             app_id: 'oboxh5w1',
-            email: profile.email,
+            email: user.email,
             subdomain: getSubdomain(),
             widget: {
                 activator: '#IntercomDefaultWidget'
-            }  
+            }
         });
         console.log('Intercom loaded');
         this.loaded = true;
     }
 
+    onUserDidLogout() {
+        // kill intercom (with fire)
+        window.Intercom('shutdown');
+        this.loaded = false;
+    }
 }
 
 export default altThirdParty.createStore(IntercomHandler, 'IntercomHandler');
diff --git a/js/third_party/notifications.js b/js/third_party/notifications.js
index 85379479..9e33cdaf 100644
--- a/js/third_party/notifications.js
+++ b/js/third_party/notifications.js
@@ -17,18 +17,19 @@ class NotificationsHandler {
         this.loaded = false;
     }
 
-    onProfileDidLoad() {
+    onUserDidAuthenticate() {
         if (this.loaded) {
             return;
         }
 
-        let subdomain = getSubdomain();
+        const subdomain = getSubdomain();
         if (subdomain === 'ikonotv') {
             NotificationActions.fetchContractAgreementListNotifications().then(
                 (res) => {
                     if (res.notifications && res.notifications.length > 0) {
-                        this.loaded = true;
                         console.log('Contractagreement notifications loaded');
+                        this.loaded = true;
+
                         history.pushState(null, '/contract_notifications');
                     }
                 }
@@ -36,6 +37,10 @@ class NotificationsHandler {
         }
         this.loaded = true;
     }
+
+    onUserDidLogout() {
+        this.loaded = false;
+    }
 }
 
 export default altThirdParty.createStore(NotificationsHandler, 'NotificationsHandler');
diff --git a/js/third_party/raven.js b/js/third_party/raven.js
index 3d6ff315..f294bc95 100644
--- a/js/third_party/raven.js
+++ b/js/third_party/raven.js
@@ -12,17 +12,22 @@ class RavenHandler {
         this.loaded = false;
     }
 
-    onProfileDidLoad(profile) {
+    onUserDidAuthenticate(user) {
         if (this.loaded) {
             return;
         }
 
         Raven.setUserContext({
-            email: profile.email
+            email: user.email
         });
         console.log('Raven loaded');
         this.loaded = true;
     }
+
+    onUserDidLogout() {
+        Raven.setUserContext();
+        this.loaded = false;
+    }
 }
 
 export default altThirdParty.createStore(RavenHandler, 'RavenHandler');

From d622ddac06729a3bdbe90d98c0ba42722b92aae2 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 12:54:15 +0100
Subject: [PATCH 050/197] Load current user and whitelabel settings in
 AscribeApp

---
 js/components/ascribe_app.js                  | 51 ++++++++++++++++--
 .../ascribe_detail/edition_container.js       | 28 +++++-----
 .../ascribe_detail/piece_container.js         | 22 ++++----
 js/components/ascribe_routes/proxy_handler.js | 40 ++++----------
 .../ascribe_settings/contract_settings.js     | 46 ++++++++--------
 .../ascribe_settings/settings_container.js    | 52 ++++++-------------
 js/components/coa_verify_container.js         |  8 ++-
 js/components/error_not_found_page.js         | 11 +++-
 js/components/login_container.js              |  6 +++
 js/components/logout_container.js             |  9 ++++
 js/components/password_reset_container.js     | 50 ++++++++++--------
 js/components/piece_list.js                   | 42 ++++++++-------
 js/components/register_piece.js               | 25 ++++-----
 js/components/signup_container.js             |  7 ++-
 14 files changed, 216 insertions(+), 181 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index cda5637f..115f93f9 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -2,10 +2,18 @@
 
 import React from 'react';
 
-import Header from '../components/header';
-import Footer from '../components/footer';
+import UserActions from '../actions/user_actions';
+import UserStore from '../stores/user_store';
+
+import WhitelabelActions from '../actions/whitelabel_actions';
+import WhitelabelStore from '../stores/whitelabel_store';
+
+import Header from './header';
+import Footer from './footer';
 import GlobalNotification from './global_notification';
 
+import { mergeOptions } from '../utils/general_utils';
+
 
 let AscribeApp = React.createClass({
     propTypes: {
@@ -16,15 +24,48 @@ let AscribeApp = React.createClass({
         routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
+    getInitialState() {
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+        WhitelabelActions.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
     render() {
-        let { children, routes } = this.props;
+        const { children, routes } = this.props;
+        const { currentUser, whitelabel } = this.state;
+
+        // Add the current user and whitelabel settings to all child routes
+        const childrenWithProps = React.Children.map(children, (child) => {
+            return React.cloneElement(child, {
+                currentUser,
+                whitelabel
+            });
+        });
 
         return (
             <div className="container ascribe-default-app">
                 <Header routes={routes} />
-                {/* Routes are injected here */}
                 <div className="ascribe-body">
-                    {children}
+                    {/* Routes are injected here */}
+                    {childrenWithProps}
                 </div>
                 <Footer />
                 <GlobalNotification />
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index ee53f0e1..7822da12 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -9,16 +9,12 @@ import { ResourceNotFoundError } from '../../models/errors';
 import EditionActions from '../../actions/edition_actions';
 import EditionStore from '../../stores/edition_store';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
 import Edition from './edition';
 
 import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 import { setDocumentTitle } from '../../utils/dom_utils';
-import { mergeOptions } from '../../utils/general_utils';
 
 
 /**
@@ -28,21 +24,24 @@ let EditionContainer = React.createClass({
     propTypes: {
         actionPanelButtonListType: React.PropTypes.func,
         furtherDetailsType: React.PropTypes.func,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
     mixins: [History, ReactError],
 
     getInitialState() {
-        return mergeOptions(
-            EditionStore.getState(),
-            UserStore.getState()
-        );
+        return EditionStore.getState();
     },
 
     componentDidMount() {
         EditionStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
 
         // Every time we're entering the edition detail page,
         // just reset the edition that is saved in the edition store
@@ -50,21 +49,19 @@ let EditionContainer = React.createClass({
         // the edition detail a second time
         EditionActions.flushEdition();
         EditionActions.fetchEdition(this.props.params.editionId);
-
-        UserActions.fetchCurrentUser();
     },
 
     // This is done to update the container when the user clicks on the prev or next
     // button to update the URL parameter (and therefore to switch pieces)
     componentWillReceiveProps(nextProps) {
-        if(this.props.params.editionId !== nextProps.params.editionId) {
+        if (this.props.params.editionId !== nextProps.params.editionId) {
             EditionActions.fetchEdition(this.props.params.editionId);
         }
     },
 
     componentDidUpdate() {
         const { editionMeta } = this.state;
-        if(editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
+        if (editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
             this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
         }
     },
@@ -72,7 +69,6 @@ let EditionContainer = React.createClass({
     componentWillUnmount() {
         window.clearInterval(this.state.timerId);
         EditionStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -88,8 +84,8 @@ let EditionContainer = React.createClass({
     },
 
     render() {
-        const { edition, currentUser, coaMeta } = this.state;
-        const { actionPanelButtonListType, furtherDetailsType } = this.props;
+        const { edition, coaMeta } = this.state;
+        const { actionPanelButtonListType, currentUser, furtherDetailsType } = this.props;
 
         if (Object.keys(edition).length && edition.id) {
             setDocumentTitle([edition.artist_name, edition.title].join(', '));
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 1aebff75..3db13132 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -54,6 +54,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
 let PieceContainer = React.createClass({
     propTypes: {
         furtherDetailsType: React.PropTypes.func,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -67,7 +74,6 @@ let PieceContainer = React.createClass({
 
     getInitialState() {
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
             {
@@ -77,7 +83,6 @@ let PieceContainer = React.createClass({
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
 
@@ -87,7 +92,6 @@ let PieceContainer = React.createClass({
         PieceActions.updatePiece({});
 
         this.loadPiece();
-        UserActions.fetchCurrentUser();
     },
 
     componentDidUpdate() {
@@ -100,7 +104,6 @@ let PieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.unlisten(this.onChange);
     },
 
@@ -201,7 +204,8 @@ let PieceContainer = React.createClass({
     },
 
     getActions() {
-        const { piece, currentUser } = this.state;
+        const { piece } = this.state;
+        const { currentUser } = this.props;
 
         if (piece && piece.notifications && piece.notifications.length > 0) {
             return (
@@ -284,19 +288,19 @@ let PieceContainer = React.createClass({
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={!!(this.state.currentUser.username
+                        show={!!(this.props.currentUser.username
                                 || this.state.piece.acl.acl_edit
                                 || this.state.piece.public_note)}>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (private)')}
                             defaultValue={this.state.piece.private_note || null}
-                            show = {!!this.state.currentUser.username}
+                            show = {!!this.props.currentUser.username}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_piece}
-                            currentUser={this.state.currentUser}/>
+                            currentUser={this.props.currentUser}/>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (public)')}
@@ -306,7 +310,7 @@ let PieceContainer = React.createClass({
                             show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
                             successMessage={getLangText('Public note saved')}
                             url={ApiUrls.note_public_piece}
-                            currentUser={this.state.currentUser}/>
+                            currentUser={this.props.currentUser}/>
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js
index 228f0f62..006d4e32 100644
--- a/js/components/ascribe_routes/proxy_handler.js
+++ b/js/components/ascribe_routes/proxy_handler.js
@@ -5,7 +5,6 @@ import { RouteContext } from 'react-router';
 import history from '../../history';
 
 import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
 
 import AppConstants from '../../constants/application_constants';
 
@@ -35,23 +34,22 @@ export function AuthRedirect({to, when}) {
         //
         // So if when === 'loggedIn', we're checking if the user is logged in (and
         // vice versa)
-        let exprToValidate = when === 'loggedIn' ? currentUser && currentUser.email
-                                                 : currentUser && !currentUser.email;
+        const exprToValidate = when === 'loggedIn' ? currentUser && currentUser.email
+                                                   : currentUser && !currentUser.email;
 
         // and redirect if `true`.
-        if(exprToValidate) {
+        if (exprToValidate) {
             window.setTimeout(() => history.replaceState(null, to, query));
             return true;
 
             // Otherwise there can also be the case that the backend
             // wants to redirect the user to a specific route when the user is logged out already
-        } else if(!exprToValidate && when === 'loggedIn' && redirect) {
-
+        } else if (!exprToValidate && when === 'loggedIn' && redirect) {
             delete query.redirect;
             window.setTimeout(() => history.replaceState(null, '/' + redirect, query));
             return true;
 
-        } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
+        } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
             /*
              * redirectAuthenticated contains an arbitrary path
              * eg pieces/<id>, editions/<bitcoin_id>, collection, settings, ...
@@ -64,6 +62,7 @@ export function AuthRedirect({to, when}) {
             window.location = AppConstants.baseUrl + redirectAuthenticated;
             return true;
         }
+
         return false;
     };
 }
@@ -81,6 +80,7 @@ export function ProxyHandler(...redirectFunctions) {
             displayName: 'ProxyHandler',
 
             propTypes: {
+                currentUser: object,
                 location: object
             },
 
@@ -88,40 +88,22 @@ export function ProxyHandler(...redirectFunctions) {
             // to use the `Lifecycle` widget in further down nested components
             mixins: [RouteContext],
 
-            getInitialState() {
-                return UserStore.getState();
-            },
-
-            componentDidMount() {
-                UserStore.listen(this.onChange);
-                UserActions.fetchCurrentUser();
-            },
-
             componentDidUpdate() {
-                if(!UserStore.isLoading()) {
-                    const { currentUser } = this.state;
-                    const { query } = this.props.location;
+                const { currentUser, location: { query } } = this.props;
 
-                    for(let i = 0; i < redirectFunctions.length; i++) {
+                if (!UserStore.isLoading()) {
+                    for (let i = 0; i < redirectFunctions.length; i++) {
                         // if a redirectFunction redirects the user,
                         // it should return `true` and therefore
                         // stop/avoid the execution of all functions
                         // that follow
-                        if(redirectFunctions[i](currentUser, query)) {
+                        if (redirectFunctions[i](currentUser, query)) {
                             break;
                         }
                     }
                 }
             },
 
-            componentWillUnmount() {
-                UserStore.unlisten(this.onChange);
-            },
-
-            onChange(state) {
-                this.setState(state);
-            },
-
             render() {
                 return (
                     <Component {...this.props}/>
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 71d97542..36a8117d 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -29,29 +29,24 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils
 
 let ContractSettings = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
-    getInitialState(){
-        return mergeOptions(
-            ContractListStore.getState(),
-            UserStore.getState()
-        );
+    getInitialState() {
+        return ContractListStore.getState();
     },
 
     componentDidMount() {
         ContractListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-        UserActions.fetchCurrentUser();
         ContractListActions.fetchContractList(true);
     },
 
     componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         ContractListStore.unlisten(this.onChange);
     },
 
@@ -74,22 +69,23 @@ let ContractSettings = React.createClass({
         };
     },
 
-    getPublicContracts(){
+    getPublicContracts() {
         return this.state.contractList.filter((contract) => contract.is_public);
     },
 
-    getPrivateContracts(){
+    getPrivateContracts() {
         return this.state.contractList.filter((contract) => !contract.is_public);
     },
 
     render() {
-        let publicContracts = this.getPublicContracts();
-        let privateContracts = this.getPrivateContracts();
+        const { currentUser, location, whitelabel } = this.props;
+        const publicContracts = this.getPublicContracts();
+        const privateContracts = this.getPrivateContracts();
         let createPublicContractForm = null;
 
         setDocumentTitle(getLangText('Contracts settings'));
 
-        if(publicContracts.length === 0) {
+        if (publicContracts.length === 0) {
             createPublicContractForm = (
                 <CreateContractForm
                     isPublic={true}
@@ -97,7 +93,7 @@ let ContractSettings = React.createClass({
                         singular: 'new contract',
                         plural: 'new contracts'
                     }}
-                    location={this.props.location}/>
+                    location={location} />
             );
         }
 
@@ -108,7 +104,7 @@ let ContractSettings = React.createClass({
                     defaultExpanded={true}>
                     <AclProxy
                         aclName="acl_edit_public_contract"
-                        aclObject={this.state.currentUser.acl}>
+                        aclObject={currentUser.acl}>
                         <div>
                             {createPublicContractForm}
                             {publicContracts.map((contract, i) => {
@@ -120,11 +116,11 @@ let ContractSettings = React.createClass({
                                         buttons={
                                             <div className="pull-right">
                                                 <AclProxy
-                                                    aclObject={this.state.whitelabel}
+                                                    aclObject={whitelabel}
                                                     aclName="acl_update_public_contract">
                                                     <ContractSettingsUpdateButton
                                                         contract={contract}
-                                                        location={this.props.location}/>
+                                                        location={location}/>
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
@@ -147,7 +143,7 @@ let ContractSettings = React.createClass({
                     </AclProxy>
                     <AclProxy
                         aclName="acl_edit_private_contract"
-                        aclObject={this.state.currentUser.acl}>
+                        aclObject={currentUser.acl}>
                         <div>
                             <CreateContractForm
                             isPublic={false}
@@ -155,7 +151,7 @@ let ContractSettings = React.createClass({
                                 singular: getLangText('new contract'),
                                 plural: getLangText('new contracts')
                             }}
-                            location={this.props.location}/>
+                            location={location}/>
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
@@ -165,11 +161,11 @@ let ContractSettings = React.createClass({
                                         buttons={
                                             <div className="pull-right">
                                                <AclProxy
-                                                    aclObject={this.state.whitelabel}
+                                                    aclObject={whitelabel}
                                                     aclName="acl_update_private_contract">
                                                     <ContractSettingsUpdateButton
                                                         contract={contract}
-                                                        location={this.props.location}/>
+                                                        location={location}/>
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 35a6fbe5..594341a5 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -2,12 +2,8 @@
 
 import React from 'react';
 
-import UserStore from '../../stores/user_store';
 import UserActions from '../../actions/user_actions';
 
-import WhitelabelStore from '../../stores/whitelabel_store';
-import WhitelabelActions from '../../actions/whitelabel_actions';
-
 import AccountSettings from './account_settings';
 import BitcoinWalletSettings from './bitcoin_wallet_settings';
 import APISettings from './api_settings';
@@ -24,56 +20,42 @@ let SettingsContainer = React.createClass({
     propTypes: {
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element])
+            React.PropTypes.element
+        ]),
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object
     },
 
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-    },
-
-    loadUser(invalidateCache){
+    loadUser(invalidateCache) {
         UserActions.fetchCurrentUser(invalidateCache);
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
+        const { currentUser, whitelabel } = this.props;
+
         setDocumentTitle(getLangText('Account settings'));
 
-        if (this.state.currentUser && this.state.currentUser.username) {
+        if (currentUser && currentUser.username) {
             return (
                 <div className="settings-container">
                     <AccountSettings
-                        currentUser={this.state.currentUser}
+                        currentUser={currentUser}
                         loadUser={this.loadUser}
-                        whitelabel={this.state.whitelabel}/>
+                        whitelabel={whitelabel} />
                     {this.props.children}
                     <AclProxy
-                        aclObject={this.state.whitelabel}
+                        aclObject={whitelabel}
                         aclName="acl_view_settings_api">
                         <APISettings />
                     </AclProxy>
                     <WebhookSettings />
                     <AclProxy
-                        aclObject={this.state.whitelabel}
+                        aclObject={whitelabel}
                         aclName="acl_view_settings_bitcoin">
                         <BitcoinWalletSettings />
                     </AclProxy>
diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index 6d0af0fa..6a2b6562 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -18,6 +18,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let CoaVerifyContainer = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
@@ -60,9 +65,8 @@ let CoaVerifyForm = React.createClass({
     },
 
     handleSuccess(response){
-        let notification = null;
         if (response.verdict) {
-            notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
+            const notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
     },
diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js
index 0e111ce7..0d6fd26c 100644
--- a/js/components/error_not_found_page.js
+++ b/js/components/error_not_found_page.js
@@ -7,7 +7,14 @@ import { getLangText } from '../utils/lang_utils';
 
 let ErrorNotFoundPage = React.createClass({
     propTypes: {
-        message: React.PropTypes.string
+        message: React.PropTypes.string,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object
     },
 
     getDefaultProps() {
@@ -32,4 +39,4 @@ let ErrorNotFoundPage = React.createClass({
     }
 });
 
-export default ErrorNotFoundPage;
\ No newline at end of file
+export default ErrorNotFoundPage;
diff --git a/js/components/login_container.js b/js/components/login_container.js
index 46c14d65..bcc8cc18 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -15,6 +15,12 @@ let LoginContainer = React.createClass({
         redirectOnLoggedIn: React.PropTypes.bool,
         redirectOnLoginSuccess: React.PropTypes.bool,
         onLogin: React.PropTypes.func,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/logout_container.js b/js/components/logout_container.js
index b4132612..33475ab6 100644
--- a/js/components/logout_container.js
+++ b/js/components/logout_container.js
@@ -12,6 +12,15 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let LogoutContainer = React.createClass({
+    propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object
+    },
+
     mixins: [History],
 
     componentDidMount() {
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index 31275a08..e4df2909 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -16,39 +16,43 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let PasswordResetContainer = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return {isRequested: false};
+        return { isRequested: false };
     },
 
     handleRequestSuccess(email) {
-        this.setState({isRequested: email});
+        this.setState({ isRequested: email });
     },
 
     render() {
-        let { location } = this.props;
+        const { email: emailQuery, token: tokenQuery } = this.props.location.query;
+        const { isRequested } = this.state;
 
-        if (location.query.email && location.query.token) {
+        if (emailQuery && tokenQuery) {
             return (
                 <div>
                     <PasswordResetForm
-                        email={location.query.email}
-                        token={location.query.token}/>
+                        email={emailQuery}
+                        token={tokenQuery} />
                 </div>
             );
-        }
-        else {
-            if (this.state.isRequested === false) {
+        } else {
+            if (isRequested === false) {
                 return (
                     <div>
                         <PasswordRequestResetForm
-                            handleRequestSuccess={this.handleRequestSuccess}/>
+                            handleRequestSuccess={this.handleRequestSuccess} />
                     </div>
                 );
-            }
-            else if (this.state.isRequested) {
+            } else if (isRequested) {
                 return (
                     <div>
                         <div className="ascribe-login-text ascribe-login-header">
@@ -56,12 +60,11 @@ let PasswordResetContainer = React.createClass({
                         </div>
                     </div>
                 );
-            }
-            else {
+            } else {
                 return <span />;
             }
         }
-  }
+    }
 });
 
 let PasswordRequestResetForm = React.createClass({
@@ -70,9 +73,10 @@ let PasswordRequestResetForm = React.createClass({
     },
 
     handleSuccess() {
-        let notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
-        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        const notificationText = getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.');
+        const notification = new GlobalNotificationModel(notificationText, 'success', 50000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
         this.props.handleRequestSuccess(this.refs.form.refs.email.state.value);
     },
 
@@ -90,12 +94,13 @@ let PasswordRequestResetForm = React.createClass({
                         type="submit"
                         className="btn btn-default btn-wide">
                         {getLangText('Reset your password')}
-                    </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
                     </span>
-                    }>
+                }>
                 <div className="ascribe-form-header">
                     <h3>{getLangText('Reset your password')}</h3>
                 </div>
@@ -131,7 +136,7 @@ let PasswordResetForm = React.createClass({
 
     handleSuccess() {
         this.history.pushState(null, '/collection');
-        let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -148,12 +153,13 @@ let PasswordResetForm = React.createClass({
                         type="submit"
                         className="btn btn-default btn-wide">
                         {getLangText('Reset your password')}
-                    </button>}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
                     </span>
-                    }>
+                }>
                 <div className="ascribe-form-header">
                     <h3>{getLangText('Reset the password for')} {this.props.email}</h3>
                 </div>
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index de979e65..11b70895 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -43,6 +43,12 @@ let PieceList = React.createClass({
         filterParams: React.PropTypes.array,
         orderParams: React.PropTypes.array,
         orderBy: React.PropTypes.string,
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
@@ -85,7 +91,7 @@ let PieceList = React.createClass({
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
 
-        let page = this.props.location.query.page || 1;
+        const page = this.props.location.query.page || 1;
         if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
             this.loadPieceList({ page });
         }
@@ -161,8 +167,8 @@ let PieceList = React.createClass({
     },
 
     getPagination() {
-        let currentPage = parseInt(this.props.location.query.page, 10) || 1;
-        let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
+        const currentPage = parseInt(this.props.location.query.page, 10) || 1;
+        const totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
 
         if (this.state.pieceListCount > 20) {
             return (
@@ -188,8 +194,7 @@ let PieceList = React.createClass({
         });
 
         // first we need to apply the filter on the piece list
-        this
-            .loadPieceList({ page: 1, filterBy })
+        this.loadPieceList({ page: 1, filterBy })
             .then(() => {
                 // but also, we need to filter all the open edition lists
                 this.state.pieceList
@@ -223,23 +228,22 @@ let PieceList = React.createClass({
     },
 
     fetchSelectedPieceEditionList() {
-        let filteredPieceIdList = Object.keys(this.state.editionList)
-                                        .filter((pieceId) => {
-                                            return this.state.editionList[pieceId]
-                                                .filter((edition) => edition.selected).length > 0;
-                                        });
+        const filteredPieceIdList = Object.keys(this.state.editionList)
+                                          .filter((pieceId) => {
+                                              return this.state.editionList[pieceId]
+                                                         .filter((edition) => edition.selected)
+                                                         .length;
+                                          });
         return filteredPieceIdList;
     },
 
     fetchSelectedEditionList() {
-        let selectedEditionList = [];
-
-        Object
-            .keys(this.state.editionList)
-            .forEach((pieceId) => {
-                let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
-                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
-            });
+        const selectedEditionList = Object.keys(this.state.editionList)
+                                          .reduce((selectedList, pieceId) => {
+                                              const selectedEditionsForPiece = this.state.editionList[pieceId]
+                                                                                   .filter((edition) => edition.selected);
+                                              return selectedList.concat(selectedEditionsForPiece);
+                                          }, []);
 
         return selectedEditionList;
     },
@@ -250,7 +254,7 @@ let PieceList = React.createClass({
 
         this.fetchSelectedPieceEditionList()
             .forEach((pieceId) => {
-                EditionListActions.refreshEditionList({pieceId});
+                EditionListActions.refreshEditionList({ pieceId });
             });
         EditionListActions.clearAllEditionSelections();
     },
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 8211e91e..f0f5b241 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -12,21 +12,17 @@ import WhitelabelStore from '../stores/whitelabel_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';
 
 import Property from './ascribe_forms/property';
 import RegisterPieceForm from './ascribe_forms/form_register_piece';
 
-import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
 
 let RegisterPiece = React.createClass( {
-
     propTypes: {
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
@@ -35,30 +31,27 @@ let RegisterPiece = React.createClass( {
             React.PropTypes.element,
             React.PropTypes.string
         ]),
+
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
     mixins: [History],
 
     getInitialState(){
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState(),
-            PieceListStore.getState()
-        );
+        return PieceListStore.getState();
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -66,7 +59,7 @@ let RegisterPiece = React.createClass( {
     },
 
     handleSuccess(response){
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // once the user was able to register a piece successfully, we need to make sure to keep
@@ -84,7 +77,7 @@ let RegisterPiece = React.createClass( {
     },
 
     getSpecifyEditions() {
-        if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
+        if (this.props.whitelabel && this.props.whitelabel.acl_create_editions || Object.keys(this.props.whitelabel).length === 0) {
             return (
                 <Property
                     name="num_editions"
diff --git a/js/components/signup_container.js b/js/components/signup_container.js
index e6c6fb73..77c04dbf 100644
--- a/js/components/signup_container.js
+++ b/js/components/signup_container.js
@@ -11,6 +11,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let SignupContainer = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
@@ -31,7 +36,7 @@ let SignupContainer = React.createClass({
     render() {
         setDocumentTitle(getLangText('Sign up'));
 
-        if (this.state.submitted){
+        if (this.state.submitted) {
             return (
                 <div className="ascribe-login-wrapper">
                     <br/>

From 5ae166edf36ebbdb513ba33e92eeee55ba1ba16f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 14:00:09 +0100
Subject: [PATCH 051/197] Add AppRouteWrapper to handle passing down props to
 routes

---
 js/components/app_route_wrapper.js | 34 ++++++++++++++++++++++++++++++
 js/components/ascribe_app.js       | 17 ++++++---------
 2 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 js/components/app_route_wrapper.js

diff --git a/js/components/app_route_wrapper.js b/js/components/app_route_wrapper.js
new file mode 100644
index 00000000..0abbcb32
--- /dev/null
+++ b/js/components/app_route_wrapper.js
@@ -0,0 +1,34 @@
+'use strict';
+
+import React from 'react';
+
+import { omitFromObject } from '../utils/general_utils';
+
+const AppRouteWrapper = React.createClass({
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired
+    },
+
+    render() {
+        const propsToPropagate = omitFromObject(this.props, ['children']);
+
+        let childrenWithProps = this.props.children;
+        // If there are more props given, propagate them into the child routes by cloning the routes
+        if (Object.keys(propsToPropagate).length) {
+            childrenWithProps = React.Children.map(this.props.children, (child) => {
+                return React.cloneElement(child, propsToPropagate);
+            });
+        }
+
+        return (
+            <div className="ascribe-body">
+                {childrenWithProps}
+            </div>
+        );
+    }
+});
+
+export default AppRouteWrapper;
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 115f93f9..bf1ac2ec 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -8,6 +8,7 @@ import UserStore from '../stores/user_store';
 import WhitelabelActions from '../actions/whitelabel_actions';
 import WhitelabelStore from '../stores/whitelabel_store';
 
+import AppRouteWrapper from './app_route_wrapper';
 import Header from './header';
 import Footer from './footer';
 import GlobalNotification from './global_notification';
@@ -52,21 +53,15 @@ let AscribeApp = React.createClass({
         const { children, routes } = this.props;
         const { currentUser, whitelabel } = this.state;
 
-        // Add the current user and whitelabel settings to all child routes
-        const childrenWithProps = React.Children.map(children, (child) => {
-            return React.cloneElement(child, {
-                currentUser,
-                whitelabel
-            });
-        });
-
         return (
             <div className="container ascribe-default-app">
                 <Header routes={routes} />
-                <div className="ascribe-body">
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
                     {/* Routes are injected here */}
-                    {childrenWithProps}
-                </div>
+                    {children}
+                </AppRouteWrapper>
                 <Footer />
                 <GlobalNotification />
                 <div id="modal" className="container"></div>

From 06ea23c6278dbf8a77cd7de95f58c64797510e70 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 15:14:54 +0100
Subject: [PATCH 052/197] Update prize routes for loading user and whitelabel
 settings in top level app

---
 .../ascribe_settings/settings_container.js    |  4 +-
 js/components/register_piece.js               |  2 +-
 js/components/signup_container.js             | 11 ++-
 .../pr_forms/pr_register_piece_form.js        |  5 +-
 .../portfolioreview/components/pr_landing.js  | 73 +++++++-------
 .../components/pr_register_piece.js           | 37 +++-----
 .../prize/portfolioreview/pr_app.js           | 47 +++++++---
 .../whitelabel/prize/prize_routes.js          |  4 +-
 .../ascribe_detail/prize_piece_container.js   | 26 ++---
 .../simple_prize/components/prize_landing.js  | 82 +++++++---------
 .../components/prize_login_container.js       |  5 +
 .../components/prize_piece_list.js            | 56 ++++++-----
 .../components/prize_register_piece.js        | 94 ++++++++++---------
 .../components/prize_settings_container.js    | 31 ++----
 .../components/prize_signup_container.js      | 15 ++-
 .../prize/simple_prize/prize_app.js           | 51 ++++++++--
 .../sluice_detail/sluice_piece_container.js   |  6 ++
 17 files changed, 293 insertions(+), 256 deletions(-)

diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 594341a5..3b9a1694 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -36,7 +36,7 @@ let SettingsContainer = React.createClass({
     },
 
     render() {
-        const { currentUser, whitelabel } = this.props;
+        const { children, currentUser, whitelabel } = this.props;
 
         setDocumentTitle(getLangText('Account settings'));
 
@@ -47,7 +47,7 @@ let SettingsContainer = React.createClass({
                         currentUser={currentUser}
                         loadUser={this.loadUser}
                         whitelabel={whitelabel} />
-                    {this.props.children}
+                    {children}
                     <AclProxy
                         aclObject={whitelabel}
                         aclName="acl_view_settings_api">
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index f0f5b241..e778d35e 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -77,7 +77,7 @@ let RegisterPiece = React.createClass( {
     },
 
     getSpecifyEditions() {
-        if (this.props.whitelabel && this.props.whitelabel.acl_create_editions || Object.keys(this.props.whitelabel).length === 0) {
+        if (this.props.whitelabel && (this.props.whitelabel.acl_create_editions || Object.keys(this.props.whitelabel).length)) {
             return (
                 <Property
                     name="num_editions"
diff --git a/js/components/signup_container.js b/js/components/signup_container.js
index 77c04dbf..7e5d8fb1 100644
--- a/js/components/signup_container.js
+++ b/js/components/signup_container.js
@@ -26,7 +26,7 @@ let SignupContainer = React.createClass({
         };
     },
 
-    handleSuccess(message){
+    handleSuccess(message) {
         this.setState({
             submitted: true,
             message: message
@@ -34,14 +34,17 @@ let SignupContainer = React.createClass({
     },
 
     render() {
+        const { location } = this.props;
+        const { message, submitted } = this.state;
+
         setDocumentTitle(getLangText('Sign up'));
 
-        if (this.state.submitted) {
+        if (submitted) {
             return (
                 <div className="ascribe-login-wrapper">
                     <br/>
                     <div className="ascribe-login-text ascribe-login-header">
-                        {this.state.message}
+                        {message}
                     </div>
                 </div>
             );
@@ -50,7 +53,7 @@ let SignupContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <SignupForm
                     handleSuccess={this.handleSuccess}
-                    location={this.props.location}/>
+                    location={location}/>
                 <div className="ascribe-login-text">
                     {getLangText('Already an ascribe user')}&#63; <Link to="/login">{getLangText('Log in')}...</Link><br/>
                 </div>
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index e3d5ab93..2f5954ac 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -30,9 +30,8 @@ const { object } = React.PropTypes;
 
 const PRRegisterPieceForm = React.createClass({
     propTypes: {
-        location: object,
-        history: object,
-        currentUser: object
+        currentUser: object,
+        location: object
     },
 
     mixins: [History],
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
index cdada68b..d24f1cee 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
@@ -3,43 +3,39 @@
 import React from 'react';
 import { History } from 'react-router';
 
-import PrizeActions from '../../simple_prize/actions/prize_actions';
-import PrizeStore from '../../simple_prize/stores/prize_store';
-
 import Button from 'react-bootstrap/lib/Button';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
+import PrizeActions from '../../simple_prize/actions/prize_actions';
+import PrizeStore from '../../simple_prize/stores/prize_store';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
 const PRLanding = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
     mixins: [History],
 
     getInitialState() {
-        return mergeOptions(
-            PrizeStore.getState(),
-            UserStore.getState()
-        );
+        return PrizeStore.getState();
     },
 
     componentDidMount() {
         const { location } = this.props;
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PrizeStore.listen(this.onChange);
         PrizeActions.fetchPrize();
 
-        if(location && location.query && location.query.redirect) {
+        if (location && location.query && location.query.redirect) {
             let queryCopy = JSON.parse(JSON.stringify(location.query));
             delete queryCopy.redirect;
             window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy));
@@ -47,7 +43,6 @@ const PRLanding = React.createClass({
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
         PrizeStore.unlisten(this.onChange);
     },
 
@@ -56,7 +51,7 @@ const PRLanding = React.createClass({
     },
 
     getButtons() {
-        if (this.state.prize && this.state.prize.active){
+        if (this.state.prize && this.state.prize.active) {
             return (
                 <ButtonGroup className="enter" bsSize="large" vertical>
                     <LinkContainer to="/signup">
@@ -75,39 +70,37 @@ const PRLanding = React.createClass({
                     </LinkContainer>
                 </ButtonGroup>
             );
-        }
-        return (
-            <ButtonGroup className="enter" bsSize="large" vertical>
-                <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
-                    {getLangText('Sign up to ascribe')}
-                </a>
+        } else {
+            return (
+                <ButtonGroup className="enter" bsSize="large" vertical>
+                    <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
+                        {getLangText('Sign up to ascribe')}
+                    </a>
 
-                <p>
-                    {getLangText('or, already an ascribe user?')}
-                </p>
-                <LinkContainer to="/login">
-                    <Button>
-                        {getLangText('Log in')}
-                    </Button>
-                </LinkContainer>
-            </ButtonGroup>
-        );
+                    <p>
+                        {getLangText('or, already an ascribe user?')}
+                    </p>
+                    <LinkContainer to="/login">
+                        <Button>
+                            {getLangText('Log in')}
+                        </Button>
+                    </LinkContainer>
+                </ButtonGroup>
+            );
+        }
     },
 
     getTitle() {
-        if (this.state.prize && this.state.prize.active){
-            return (
-                <p>
-                    {getLangText('This is the submission page for Portfolio Review 2016.')}
-                </p>
-            );
-        }
+        const { prize } = this.state;
+
         return (
             <p>
-                {getLangText('Submissions for Portfolio Review 2016 are now closed.')}
+                {getLangText(prize && prize.active ? 'This is the submission page for Portfolio Review 2016.'
+                                                   : 'Submissions for Portfolio Review 2016 are now closed.')}
             </p>
         );
     },
+
     render() {
         return (
             <div className="container">
@@ -125,4 +118,4 @@ const PRLanding = React.createClass({
     }
 });
 
-export default PRLanding;
\ No newline at end of file
+export default PRLanding;
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
index d7aa1aa8..a78a2196 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
@@ -6,9 +6,6 @@ import { Link, History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import PRRegisterPieceForm from './pr_forms/pr_register_piece_form';
 
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -20,43 +17,31 @@ const { object } = React.PropTypes;
 
 const PRRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: object
     },
 
     mixins: [History],
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
     componentDidUpdate() {
-        const { currentUser } = this.state;
-        if(currentUser && currentUser.email) {
+        const { currentUser } = this.props;
+        if (currentUser && currentUser.email) {
             const submittedPieceId = getCookie(currentUser.email);
-            if(submittedPieceId) {
+            if (submittedPieceId) {
                 this.history.pushState(null, `/pieces/${submittedPieceId}`);
             }
         }
     },
 
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        const { currentUser } = this.state;
-        const { location } = this.props;
+        const { currentUser, location } = this.props;
 
         setDocumentTitle(getLangText('Submit to Portfolio Review'));
+
         return (
             <Row>
                 <Col xs={6}>
@@ -77,7 +62,7 @@ const PRRegisterPiece = React.createClass({
                 <Col xs={6}>
                     <PRRegisterPieceForm
                         location={location}
-                        currentUser={currentUser}/>
+                        currentUser={currentUser} />
                 </Col>
             </Row>
         );
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index 30e5ee75..f6364bc8 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -1,17 +1,21 @@
 'use strict';
 
 import React from 'react';
-import GlobalNotification from '../../../global_notification';
-
-import Hero from './components/pr_hero';
-import Header from '../../../header';
 
 import EventActions from '../../../../actions/event_actions';
 
 import UserStore from '../../../../stores/user_store';
 import UserActions from '../../../../actions/user_actions';
 
-import { getSubdomain } from '../../../../utils/general_utils';
+import WhitelabelActions from '../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../stores/whitelabel_store';
+
+import AppRouteWrapper from '../../../app_route_wrapper';
+import Hero from './components/pr_hero';
+import Header from '../../../header';
+import GlobalNotification from '../../../global_notification';
+
+import { getSubdomain, mergeOptions } from '../../../../utils/general_utils';
 import { getCookie } from '../../../../utils/fetch_api_utils';
 
 
@@ -26,16 +30,23 @@ let PRApp = React.createClass({
     },
 
     getInitialState() {
-        return UserStore.getState();
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
     },
 
     componentDidMount() {
         UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
         UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
     },
 
     componentWillUnmount() {
         UserStore.unlisten(this.onChange);
+        WhitelabelActions.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -43,13 +54,20 @@ let PRApp = React.createClass({
     },
 
     render() {
-        const { history, children, routes } = this.props;
-        const { currentUser } = this.state;
+        const { children, history, routes } = this.props;
+        const { currentUser, whitelabel } = this.state;
+        const subdomain = getSubdomain();
+
+        // Add the current user and whitelabel settings to all child routes
+        const childrenWithProps = React.Children.map(children, (child) => {
+            return React.cloneElement(child, {
+                currentUser,
+                whitelabel
+            });
+        });
+
         let style = {};
-        let subdomain = getSubdomain();
         let header;
-
-
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
             header = <Hero currentUser={currentUser} />;
             style = { paddingTop: '0 !important' };
@@ -65,7 +83,12 @@ let PRApp = React.createClass({
                 <div
                     style={style}
                     className={'container ascribe-prize-app client--' + subdomain}>
-                    {children}
+                    <AppRouteWrapper
+                        currentUser={currentUser}
+                        whitelabel={whitelabel}>
+                        {/* Routes are injected here */}
+                        {children}
+                    </AppRouteWrapper>
                     <GlobalNotification />
                     <div id="modal" className="container"></div>
                 </div>
diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index 5f80b30c..e727b3e4 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -31,7 +31,7 @@ import { AuthPrizeRoleRedirect } from './portfolioreview/components/pr_routes/pr
 const ROUTES = {
     sluice: (
         <Route path='/' component={SPApp}>
-            <IndexRoute component={SPLanding} />
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLanding)} />
             <Route
                 path='login'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)} />
@@ -63,7 +63,7 @@ const ROUTES = {
     ),
     portfolioreview: (
         <Route path='/' component={PRApp}>
-        <IndexRoute component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)} />
+            <IndexRoute component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)} />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PRRegisterPiece)}/>
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index c5ab2c81..9a4cd39c 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -19,9 +19,6 @@ import PieceStore from '../../../../../../stores/piece_store';
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
-import UserStore from '../../../../../../stores/user_store';
-import UserActions from '../../../../../../actions/user_actions';
-
 import Piece from '../../../../../../components/ascribe_detail/piece';
 import Note from '../../../../../../components/ascribe_detail/note';
 
@@ -53,8 +50,15 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
  */
 let PrizePieceContainer = React.createClass({
     propTypes: {
-        params: React.PropTypes.object,
-        selectedPrizeActionButton: React.PropTypes.func
+        selectedPrizeActionButton: React.PropTypes.func,
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object,
+        params: React.PropTypes.object
     },
 
     mixins: [ReactError],
@@ -62,7 +66,7 @@ let PrizePieceContainer = React.createClass({
     getInitialState() {
         //FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data
         //       It should instead use something like getInitialState() where that call also resets the state.
-        return UserStore.getState();
+        return {};
     },
 
     componentWillMount() {
@@ -74,9 +78,7 @@ let PrizePieceContainer = React.createClass({
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
 
-        UserActions.fetchCurrentUser();
         this.loadPiece();
     },
 
@@ -99,7 +101,6 @@ let PrizePieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -107,7 +108,8 @@ let PrizePieceContainer = React.createClass({
     },
 
     getActions() {
-        const { currentUser, piece } = this.state;
+        const { currentUser } = this.props;
+        const { piece } = this.state;
 
         if (piece && piece.notifications && piece.notifications.length > 0) {
             return (
@@ -124,8 +126,8 @@ let PrizePieceContainer = React.createClass({
     },
 
     render() {
-        const { selectedPrizeActionButton } = this.props;
-        const { currentUser, piece } = this.state;
+        const { currentUser, selectedPrizeActionButton } = this.props;
+        const { piece } = this.state;
 
         if (piece && piece.id) {
             /*
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_landing.js b/js/components/whitelabel/prize/simple_prize/components/prize_landing.js
index e26a05b5..17c2e0c1 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_landing.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_landing.js
@@ -1,57 +1,47 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
-
-import PrizeActions from '../actions/prize_actions';
-import PrizeStore from '../stores/prize_store';
 
 import Button from 'react-bootstrap/lib/Button';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
+import PrizeActions from '../actions/prize_actions';
+import PrizeStore from '../stores/prize_store';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
-let Landing = React.createClass({
 
-    mixins: [History],
+let Landing = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object
+    },
 
     getInitialState() {
-        return mergeOptions(
-            PrizeStore.getState(),
-            UserStore.getState()
-        );
+        return PrizeStore.getState();
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PrizeStore.listen(this.onChange);
         PrizeActions.fetchPrize();
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
         PrizeStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
-
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.replaceState(null, '/collection'), 0);
-        }
     },
 
     getButtons() {
-        if (this.state.prize && this.state.prize.active){
+        if (this.state.prize && this.state.prize.active) {
             return (
                 <ButtonGroup className="enter" bsSize="large" vertical>
                     <LinkContainer to="/signup">
@@ -70,39 +60,37 @@ let Landing = React.createClass({
                     </LinkContainer>
                 </ButtonGroup>
             );
-        }
-        return (
-            <ButtonGroup className="enter" bsSize="large" vertical>
-                <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
-                    {getLangText('Sign up to ascribe')}
-                </a>
+        } else {
+            return (
+                <ButtonGroup className="enter" bsSize="large" vertical>
+                    <a className="btn btn-default" href="https://www.ascribe.io/app/signup">
+                        {getLangText('Sign up to ascribe')}
+                    </a>
 
-                <p>
-                    {getLangText('or, already an ascribe user?')}
-                </p>
-                <LinkContainer to="/login">
-                    <Button>
-                        {getLangText('Log in')}
-                    </Button>
-                </LinkContainer>
-            </ButtonGroup>
-        );
+                    <p>
+                        {getLangText('or, already an ascribe user?')}
+                    </p>
+                    <LinkContainer to="/login">
+                        <Button>
+                            {getLangText('Log in')}
+                        </Button>
+                    </LinkContainer>
+                </ButtonGroup>
+            );
+        }
     },
 
     getTitle() {
-        if (this.state.prize && this.state.prize.active){
-            return (
-                <p>
-                    {getLangText('This is the submission page for Sluice_screens ↄc Prize 2015.')}
-                </p>
-            );
-        }
+        const { prize } = this.state;
+
         return (
             <p>
-                {getLangText('Submissions for Sluice_screens ↄc Prize 2015 are now closed.')}
+                {getLangText(prize && prize.active ? 'This is the submission page for Sluice_screens ↄc Prize 2015.'
+                                                   : 'Submissions for Sluice_screens ↄc Prize 2015 are now closed.')}
             </p>
         );
     },
+
     render() {
         return (
             <div className="container">
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
index e168ca68..66466e3e 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
@@ -11,6 +11,11 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let LoginContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index 23cdbb23..4724cd68 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -1,19 +1,15 @@
 'use strict';
 
 import React from 'react';
-import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
 
-import Button from 'react-bootstrap/lib/Button';
-
-import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
-
 import AccordionListItemPrize from './ascribe_accordion_list/accordion_list_item_prize';
+import PieceList from '../../../../piece_list';
 
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -21,25 +17,24 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let PrizePieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return mergeOptions(
-            PrizeStore.getState(),
-            UserStore.getState()
-        );
+        return PrizeStore.getState();
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
         PrizeStore.listen(this.onChange);
         PrizeActions.fetchPrize();
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
         PrizeStore.unlisten(this.onChange);
     },
 
@@ -48,7 +43,8 @@ let PrizePieceList = React.createClass({
     },
 
     getButtonSubmit() {
-        const { currentUser, prize } = this.state;
+        const { currentUser } = this.props;
+        const { prize } = this.state;
         if (prize && prize.active && !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge) {
             return (
                 <LinkContainer to="/register_piece">
@@ -57,32 +53,34 @@ let PrizePieceList = React.createClass({
                     </Button>
                 </LinkContainer>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
+        const { currentUser, location } = this.props;
+
         setDocumentTitle(getLangText('Collection'));
 
         let orderParams = ['artist_name', 'title'];
-        if (this.state.currentUser.is_jury) {
+        if (currentUser.is_jury) {
             orderParams = ['rating', 'title'];
         }
-        if (this.state.currentUser.is_judge) {
+        if (currentUser.is_judge) {
             orderParams = ['rating', 'title', 'selected'];
         }
+
         return (
-            <div>
-                <PieceList
-                    ref="list"
-                    redirectTo="/register_piece"
-                    accordionListItemType={AccordionListItemPrize}
-                    orderParams={orderParams}
-                    orderBy={this.state.currentUser.is_jury ? 'rating' : null}
-                    filterParams={[]}
-                    customSubmitButton={this.getButtonSubmit()}
-                    location={this.props.location}/>
-            </div>
+            <PieceList
+                ref="list"
+                {...this.props}
+                redirectTo="/register_piece"
+                accordionListItemType={AccordionListItemPrize}
+                orderParams={orderParams}
+                orderBy={currentUser.is_jury ? 'rating' : null}
+                filterParams={[]}
+                customSubmitButton={this.getButtonSubmit()} />
         );
     }
 });
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
index ca4e8fa9..60929a7e 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
@@ -16,6 +16,11 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let PrizeRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
@@ -38,62 +43,61 @@ let PrizeRegisterPiece = React.createClass({
 
     render() {
         const { location } = this.props;
+        const { prize } = this.state;
 
         setDocumentTitle(getLangText('Submit to the prize'));
 
-        if(this.state.prize && this.state.prize.active){
+        if (prize && prize.active) {
             return (
-                <div>
-                    <RegisterPiece
-                        enableLocalHashing={false}
-                        headerMessage={''}
-                        submitMessage={getLangText('Submit')}
-                        location={location}>
-                        <Property
-                            name='artist_statement'
-                            label={getLangText('Artist statement')}
-                            editable={true}
-                            overrideForm={true}>
-                            <InputTextAreaToggable
-                                rows={1}
-                                placeholder={getLangText('Enter your statement')}
-                                required />
-                        </Property>
-                        <Property
-                            name='work_description'
-                            label={getLangText('Work description')}
-                            editable={true}
-                            overrideForm={true}>
-                            <InputTextAreaToggable
-                                rows={1}
-                                placeholder={getLangText('Enter the description for your work')}
-                                required />
-                        </Property>
-                        <Property
-                            name="terms"
-                            className="ascribe-property-collapsible-toggle"
-                            style={{paddingBottom: 0}}>
-                            <InputCheckbox>
-                                <span>
-                                    {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
-                                    (<a href="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/sluice/terms.pdf" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
-                                        {getLangText('read')}
-                                    </a>)
-                                </span>
-                            </InputCheckbox>
-                        </Property>
-                    </RegisterPiece>
-                </div>
+                <RegisterPiece
+                    {...this.props}
+                    enableLocalHashing={false}
+                    headerMessage={''}
+                    submitMessage={getLangText('Submit')}
+                    location={location}>
+                    <Property
+                        name='artist_statement'
+                        label={getLangText('Artist statement')}
+                        editable={true}
+                        overrideForm={true}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            placeholder={getLangText('Enter your statement')}
+                            required />
+                    </Property>
+                    <Property
+                        name='work_description'
+                        label={getLangText('Work description')}
+                        editable={true}
+                        overrideForm={true}>
+                        <InputTextAreaToggable
+                            rows={1}
+                            placeholder={getLangText('Enter the description for your work')}
+                            required />
+                    </Property>
+                    <Property
+                        name="terms"
+                        className="ascribe-property-collapsible-toggle"
+                        style={{paddingBottom: 0}}>
+                        <InputCheckbox>
+                            <span>
+                                {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
+                                (<a href="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/sluice/terms.pdf" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
+                                    {getLangText('read')}
+                                </a>)
+                            </span>
+                        </InputCheckbox>
+                    </Property>
+                </RegisterPiece>
             );
-        }
-        else {
+        } else {
             return (
                 <div className='row'>
                     <div style={{textAlign: 'center'}}>
                         {getLangText('The prize is no longer active')}
                     </div>
                 </div>
-                );
+            );
         }
     }
 });
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
index b91f9789..22a004d4 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
@@ -2,8 +2,6 @@
 
 import React from 'react';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
 import PrizeJuryActions from '../actions/prize_jury_actions';
@@ -28,40 +26,27 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let Settings = React.createClass({
-    getInitialState() {
-        return UserStore.getState();
-    },
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
 
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        //Provided from router
+        location: React.PropTypes.object
     },
 
     render() {
         setDocumentTitle(getLangText('Account settings'));
 
-        let prizeSettings = null;
-        if (this.state.currentUser.is_admin){
-            prizeSettings = <PrizeSettings />;
-        }
         return (
-            <SettingsContainer>
-                {prizeSettings}
+            <SettingsContainer {...this.props}>
+                {this.props.currentUser.is_admin ? <PrizeSettings /> : null}
             </SettingsContainer>
         );
     }
 });
 
 let PrizeSettings = React.createClass({
-
     getInitialState() {
         return PrizeStore.getState();
     },
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js
index 7a44d521..5bf222ba 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js
@@ -8,6 +8,11 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let SignupContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
         location: React.PropTypes.object
     },
 
@@ -18,7 +23,7 @@ let SignupContainer = React.createClass({
         };
     },
 
-    handleSuccess(message){
+    handleSuccess(message) {
         this.setState({
             submitted: true,
             message: message
@@ -26,13 +31,15 @@ let SignupContainer = React.createClass({
     },
 
     render() {
+        const { location } = this.props;
+        const { message, submitted } = this.state;
         setDocumentTitle(getLangText('Sign up'));
 
-        if (this.state.submitted){
+        if (submitted) {
             return (
                 <div className="ascribe-login-wrapper">
                     <div className="ascribe-login-text ascribe-login-header">
-                        {this.state.message}
+                        {message}
                     </div>
                 </div>
             );
@@ -43,7 +50,7 @@ let SignupContainer = React.createClass({
                         headerMessage={getLangText('Create account for submission')}
                         submitMessage={getLangText('Sign up')}
                         handleSuccess={this.handleSuccess}
-                        location={this.props.location}/>
+                        location={location} />
                 </div>
             );
         }
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index d5b55d5f..a5cea483 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -1,12 +1,21 @@
 'use strict';
 
 import React from 'react';
+
+import UserStore from '../../../../stores/user_store';
+import UserActions from '../../../../actions/user_actions';
+
+import WhitelabelActions from '../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../stores/whitelabel_store';
+
 import Hero from './components/prize_hero';
+
+import AppRouteWrapper from '../../../app_route_wrapper';
 import Header from '../../../header';
 import Footer from '../../../footer';
 import GlobalNotification from '../../../global_notification';
 
-import { getSubdomain } from '../../../../utils/general_utils';
+import { getSubdomain, mergeOptions } from '../../../../utils/general_utils';
 
 
 let PrizeApp = React.createClass({
@@ -19,15 +28,40 @@ let PrizeApp = React.createClass({
         routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
+    getInitialState() {
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+        WhitelabelActions.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
     render() {
-        const { history, routes } = this.props;
-        let header = null;
-        let subdomain = getSubdomain();
+        const { history, routes, children } = this.props;
+        const { currentUser, whitelabel } = this.state;
+        const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
         let path = routes[1] ? routes[1].path : null;
 
+        let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if (!path || history.isActive('/login') || history.isActive('/signup')) {
             header = <Hero />;
@@ -38,10 +72,15 @@ let PrizeApp = React.createClass({
         return (
             <div className={'container ascribe-prize-app client--' + subdomain}>
                 {header}
-                {this.props.children}
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
+                    {/* Routes are injected here */}
+                    {children}
+                </AppRouteWrapper>
+                <Footer />
                 <GlobalNotification />
                 <div id="modal" className="container"></div>
-                <Footer />
             </div>
         );
     }
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js b/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
index 2d9debca..7ddd7953 100644
--- a/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
@@ -8,6 +8,12 @@ import PrizePieceContainer from '../../../simple_prize/components/ascribe_detail
 
 const SluicePieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        //Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 

From 443be236f59248fab7950e89fdf339da59451483 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 16:26:36 +0100
Subject: [PATCH 053/197] Whitespace fix for comments

---
 .../ascribe_detail/edition_container.js       |  2 +-
 .../ascribe_detail/piece_container.js         |  2 +-
 .../ascribe_settings/contract_settings.js     |  2 +-
 .../ascribe_settings/settings_container.js    |  2 +-
 js/components/coa_verify_container.js         |  2 +-
 js/components/error_not_found_page.js         |  2 +-
 js/components/login_container.js              |  2 +-
 js/components/logout_container.js             |  2 +-
 js/components/password_reset_container.js     |  2 +-
 js/components/piece_list.js                   |  2 +-
 js/components/register_piece.js               |  2 +-
 js/components/signup_container.js             |  2 +-
 .../portfolioreview/components/pr_landing.js  |  2 +-
 .../components/pr_register_piece.js           |  2 +-
 .../ascribe_detail/prize_piece_container.js   |  2 +-
 .../simple_prize/components/prize_landing.js  |  2 +-
 .../components/prize_login_container.js       |  2 +-
 .../components/prize_piece_list.js            |  2 +-
 .../components/prize_register_piece.js        |  2 +-
 .../components/prize_settings_container.js    |  2 +-
 .../components/prize_signup_container.js      |  2 +-
 .../sluice_detail/sluice_piece_container.js   |  2 +-
 js/components/whitelabel/wallet/wallet_app.js | 58 +++++++++++++++----
 .../whitelabel/wallet/wallet_routes.js        |  4 +-
 24 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index 7822da12..00b40ef5 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -29,7 +29,7 @@ let EditionContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object,
         params: React.PropTypes.object
     },
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 3db13132..30f2dc27 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -59,7 +59,7 @@ let PieceContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object,
         params: React.PropTypes.object
     },
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 36a8117d..500f1811 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -33,7 +33,7 @@ let ContractSettings = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index 3b9a1694..f36e1e70 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -27,7 +27,7 @@ let SettingsContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index 6a2b6562..a3ac5037 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -22,7 +22,7 @@ let CoaVerifyContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js
index 0d6fd26c..a0e4cbb5 100644
--- a/js/components/error_not_found_page.js
+++ b/js/components/error_not_found_page.js
@@ -13,7 +13,7 @@ let ErrorNotFoundPage = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/login_container.js b/js/components/login_container.js
index bcc8cc18..2ab013e8 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -20,7 +20,7 @@ let LoginContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/logout_container.js b/js/components/logout_container.js
index 33475ab6..5b0e9e54 100644
--- a/js/components/logout_container.js
+++ b/js/components/logout_container.js
@@ -17,7 +17,7 @@ let LogoutContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index e4df2909..f9ece359 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -20,7 +20,7 @@ let PasswordResetContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 11b70895..1f3e0074 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -48,7 +48,7 @@ let PieceList = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index e778d35e..b5fe976b 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -36,7 +36,7 @@ let RegisterPiece = React.createClass( {
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/signup_container.js b/js/components/signup_container.js
index 7e5d8fb1..42656794 100644
--- a/js/components/signup_container.js
+++ b/js/components/signup_container.js
@@ -15,7 +15,7 @@ let SignupContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
index d24f1cee..a3f14bef 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
@@ -20,7 +20,7 @@ const PRLanding = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
index a78a2196..8f0479dc 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
@@ -21,7 +21,7 @@ const PRRegisterPiece = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 9a4cd39c..c660103a 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -56,7 +56,7 @@ let PrizePieceContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object,
         params: React.PropTypes.object
     },
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_landing.js b/js/components/whitelabel/prize/simple_prize/components/prize_landing.js
index 17c2e0c1..a0dc4726 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_landing.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_landing.js
@@ -19,7 +19,7 @@ let Landing = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
index 66466e3e..7dd25bea 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
@@ -15,7 +15,7 @@ let LoginContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index 4724cd68..207fac30 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -21,7 +21,7 @@ let PrizePieceList = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
index 60929a7e..e316bfac 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
@@ -20,7 +20,7 @@ let PrizeRegisterPiece = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
index 22a004d4..ab17e440 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
@@ -31,7 +31,7 @@ let Settings = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js
index 5bf222ba..1f8ba91a 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_signup_container.js
@@ -12,7 +12,7 @@ let SignupContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object
     },
 
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js b/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
index 7ddd7953..c4e75df1 100644
--- a/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js
@@ -12,7 +12,7 @@ const SluicePieceContainer = React.createClass({
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
 
-        //Provided from router
+        // Provided from router
         location: React.PropTypes.object,
         params: React.PropTypes.object
     },
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index bce7106b..e35da2da 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -1,14 +1,20 @@
 'use strict';
 
 import React from 'react';
-import Header from '../../header';
-import Footer from '../../footer';
-
-import GlobalNotification from '../../global_notification';
-
 import classNames from 'classnames';
 
-import { getSubdomain } from '../../../utils/general_utils';
+import UserStore from '../../../stores/user_store';
+import UserActions from '../../../actions/user_actions';
+
+import WhitelabelActions from '../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../stores/whitelabel_store';
+
+import AppRouteWrapper from '../../app_route_wrapper';
+import Header from '../../header';
+import Footer from '../../footer';
+import GlobalNotification from '../../global_notification';
+
+import { getSubdomain, mergeOptions } from '../../../utils/general_utils';
 
 
 let WalletApp = React.createClass({
@@ -21,21 +27,46 @@ let WalletApp = React.createClass({
         routes: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
+    getInitialState() {
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        UserStore.unlisten(this.onChange);
+        WhitelabelActions.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
     render() {
-        let header = null;
-        let subdomain = getSubdomain();
         const { history, routes, children } = this.props;
+        const { currentUser, whitelabel } = this.state;
+        const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
         let path = routes[1] ? routes[1].path : null;
 
+        let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
             && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
-            header = <Header routes={routes} />;
+            header = (<Header routes={routes} />);
         }
 
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
@@ -44,10 +75,15 @@ let WalletApp = React.createClass({
             <div className={classNames('ascribe-wallet-app', 'route--' + (path ? path.split('/')[0] : 'landing'))}>
                 <div className='container'>
                     {header}
-                    {children}
+                    <AppRouteWrapper
+                        currentUser={currentUser}
+                        whitelabel={whitelabel}>
+                        {/* Routes are injected here */}
+                        {children}
+                    </AppRouteWrapper>
+                    <Footer />
                     <GlobalNotification />
                     <div id="modal" className="container"></div>
-                    <Footer />
                 </div>
             </div>
         );
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index a5a0e075..d59f47f5 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -48,7 +48,7 @@ import WalletApp from './wallet_app';
 let ROUTES = {
     'cyland': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={CylandLanding} />
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(CylandLanding)} />
             <Route
                 path='login'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
@@ -118,7 +118,7 @@ let ROUTES = {
     ),
     'ikonotv': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={IkonotvLanding} />
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(IkonotvLanding)} />
             <Route
                 path='login'
                 component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />

From 3e66b78d4c6d776d4bac0709432e173c60f6f0b3 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 16:27:03 +0100
Subject: [PATCH 054/197] Update Cyland routes for loading user and whitelabel
 settings in top level app

---
 .../ascribe_detail/wallet_piece_container.js  |  8 ++--
 .../cyland_detail/cyland_piece_container.js   | 36 ++++++++-------
 .../components/cyland/cyland_landing.js       | 45 +++----------------
 .../components/cyland/cyland_piece_list.js    | 29 +++---------
 .../cyland/cyland_register_piece.js           | 36 +++++----------
 5 files changed, 50 insertions(+), 104 deletions(-)

diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
index 4be15b04..632b415e 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
@@ -3,18 +3,18 @@
 import React from 'react';
 import Moment from 'moment';
 
-import Piece from '../../../../../components/ascribe_detail/piece';
-
 import WalletActionPanel from './wallet_action_panel';
+
 import CollapsibleParagraph from '../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
+import DetailProperty from '../../../../ascribe_detail/detail_property';
 import HistoryIterator from '../../../../ascribe_detail/history_iterator';
 import Note from '../../../../ascribe_detail/note';
+import Piece from '../../../../../components/ascribe_detail/piece';
 
-import DetailProperty from '../../../../ascribe_detail/detail_property';
+import AscribeSpinner from '../../../../ascribe_spinner';
 
 import ApiUrls from '../../../../../constants/api_urls';
-import AscribeSpinner from '../../../../ascribe_spinner';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
index d211d3e8..28fc34a5 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
@@ -3,28 +3,26 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import EditionListActions from '../../../../../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import PieceActions from '../../../../../../actions/piece_actions';
 import PieceStore from '../../../../../../stores/piece_store';
 
-import UserStore from '../../../../../../stores/user_store';
-
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
-import EditionListActions from '../../../../../../actions/edition_list_actions';
+import CylandAdditionalDataForm from '../cyland_forms/cyland_additional_data_form';
 
 import CylandSubmitButton from '../cyland_buttons/cyland_submit_button';
 
-import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
-
-import CylandAdditionalDataForm from '../cyland_forms/cyland_additional_data_form';
-
 import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
 
-import AscribeSpinner from '../../../../../ascribe_spinner';
+import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+import AscribeSpinner from '../../../../../ascribe_spinner';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../../utils/dom_utils';
@@ -33,6 +31,12 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let CylandPieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -41,14 +45,12 @@ let CylandPieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
-            UserStore.getState(),
             PieceListStore.getState()
         );
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
         // Every time we enter the piece detail page, just reset the piece
@@ -61,7 +63,6 @@ let CylandPieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.listen(this.onChange);
     },
 
@@ -82,20 +83,23 @@ let CylandPieceContainer = React.createClass({
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.history.pushState(null, '/collection');
     },
 
     render() {
-        if(this.state.piece && this.state.piece.id) {
+        if (this.state.piece && this.state.piece.id) {
+            const { currentUser } = this.props;
+
             setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
 
             return (
                 <WalletPieceContainer
+                    {...this.props}
                     piece={this.state.piece}
-                    currentUser={this.state.currentUser}
+                    currentUser={currentUser}
                     loadPiece={this.loadPiece}
                     handleDeleteSuccess={this.handleDeleteSuccess}
                     submitButtonType={CylandSubmitButton}>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 21f8835a..00c0593a 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -1,56 +1,25 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
-
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
 import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import AscribeSpinner from '../../../../ascribe_spinner';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let CylandLanding = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
 
-    mixins: [History],
-
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-
-        // if user is already logged in, redirect him to piece list
-        if(this.state.currentUser && this.state.currentUser.email) {
-            // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.replaceState(null, '/collection'), 0);
-        }
+        // Provided from router
+        location: object
     },
 
     render() {
@@ -61,7 +30,7 @@ let CylandLanding = React.createClass({
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.state.whitelabel.logo} width="400px"/>
+                            <img src={this.props.whitelabel.logo} width="400px"/>
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Submissions to Cyland Archive are powered by') + ' '}
                                 <span>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
index c40b455a..76556139 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
@@ -3,9 +3,6 @@
 import React from 'react';
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
 import CylandAccordionListItem from './cyland_accordion_list/cyland_accordion_list_item';
 
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -14,32 +11,21 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let CylandPieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
         setDocumentTitle(getLangText('Collection'));
 
         return (
             <div>
                 <PieceList
+                    {...this.props}
                     redirectTo="/register_piece?slide_num=0"
                     accordionListItemType={CylandAccordionListItem}
                     filterParams={[{
@@ -48,8 +34,7 @@ let CylandPieceList = React.createClass({
                             key: 'acl_loaned',
                             label: getLangText('loaned to Cyland')
                         }]
-                    }]}
-                    location={this.props.location}/>
+                    }]} />
             </div>
         );
     }
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index fabed011..c5370698 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -10,17 +10,9 @@ import Row from 'react-bootstrap/lib/Row';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
-
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import PieceListStore from '../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../actions/piece_list_actions';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import PieceStore from '../../../../../stores/piece_store';
 import PieceActions from '../../../../../actions/piece_actions';
 
@@ -30,6 +22,7 @@ import GlobalNotificationActions from '../../../../../actions/global_notificatio
 import CylandAdditionalDataForm from './cyland_forms/cyland_additional_data_form';
 
 import LoanForm from '../../../../ascribe_forms/form_loan';
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
 
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
@@ -43,6 +36,11 @@ import { getAclFormMessage } from '../../../../../utils/form_utils';
 
 let CylandRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -50,10 +48,8 @@ let CylandRegisterPiece = React.createClass({
 
     getInitialState(){
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
-            WhitelabelStore.getState(),
             {
                 step: 0
             });
@@ -61,13 +57,9 @@ let CylandRegisterPiece = React.createClass({
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
-        let queryParams = this.props.location.query;
+        const queryParams = this.props.location.query;
 
         // Since every step of this register process is atomic,
         // we may need to enter the process at step 1 or 2.
@@ -76,16 +68,14 @@ let CylandRegisterPiece = React.createClass({
         //
         // We're using 'in' here as we want to know if 'piece_id' is present in the url,
         // we don't care about the value.
-        if(queryParams && 'piece_id' in queryParams) {
+        if (queryParams && 'piece_id' in queryParams) {
             PieceActions.fetchOne(queryParams.piece_id);
         }
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -93,11 +83,10 @@ let CylandRegisterPiece = React.createClass({
     },
 
     handleRegisterSuccess(response){
-
         this.refreshPieceList();
 
         // also start loading the piece for the next step
-        if(response && response.piece) {
+        if (response && response.piece) {
             PieceActions.updatePiece({});
             PieceActions.updatePiece(response.piece);
         }
@@ -108,7 +97,6 @@ let CylandRegisterPiece = React.createClass({
     },
 
     handleAdditionalDataSuccess() {
-
         // We need to refetch the piece again after submitting the additional data
         // since we want it's otherData to be displayed when the user choses to click
         // on the browsers back button.
@@ -122,7 +110,7 @@ let CylandRegisterPiece = React.createClass({
     },
 
     handleLoanSuccess(response) {
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.refreshPieceList();
@@ -153,8 +141,8 @@ let CylandRegisterPiece = React.createClass({
     },
 
     render() {
-        const { location } = this.props;
-        const { currentUser, piece, step, whitelabel } = this.state;
+        const { currentUser, location, whitelabel } = this.props;
+        const { piece, step } = this.state;
 
         const today = new Moment();
         const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment();

From 723f93e6298597a74ce8977dc28482e3eb6641f5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 16:28:27 +0100
Subject: [PATCH 055/197] Update CC routes for loading user and whitelabel
 settings in top level app

---
 .../whitelabel/wallet/components/cc/cc_register_piece.js    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/js/components/whitelabel/wallet/components/cc/cc_register_piece.js b/js/components/whitelabel/wallet/components/cc/cc_register_piece.js
index 5f33126a..ef440972 100644
--- a/js/components/whitelabel/wallet/components/cc/cc_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cc/cc_register_piece.js
@@ -13,6 +13,11 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 
 let CCRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -85,6 +90,7 @@ let CCRegisterPiece = React.createClass({
         setDocumentTitle(getLangText('Register a new piece'));
         return (
             <RegisterPiece
+                {...this.props}
                 enableLocalHashing={false}
                 headerMessage={getLangText('Register under a Creative Commons license')}
                 submitMessage={getLangText('Submit')}

From 194c554637227c43f14fb38cfb3777c0c0db3305 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 16:56:24 +0100
Subject: [PATCH 056/197] Update Ikono routes for loading user and whitelabel
 settings in top level app

---
 .../ikonotv/ikonotv_contract_notifications.js | 99 +++++++++----------
 .../ikonotv_detail/ikonotv_piece_container.js | 54 +++++-----
 .../components/ikonotv/ikonotv_landing.js     | 35 ++-----
 .../components/ikonotv/ikonotv_piece_list.js  | 22 ++---
 .../ikonotv/ikonotv_register_piece.js         | 43 +++-----
 5 files changed, 112 insertions(+), 141 deletions(-)

diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
index 7975c1f3..2bbe15e4 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
@@ -6,49 +6,42 @@ import { History } from 'react-router';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import Button from 'react-bootstrap/lib/Button';
 
-import NotificationActions from '../../../../../actions/notification_actions';
-import NotificationStore from '../../../../../stores/notification_store';
-
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-
-import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
-
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
+import NotificationActions from '../../../../../actions/notification_actions';
+import NotificationStore from '../../../../../stores/notification_store';
 
+import OwnershipFetcher from '../../../../../fetchers/ownership_fetcher';
+
+import CopyrightAssociationForm from '../../../../ascribe_forms/form_copyright_association';
 import Property from '../../../../ascribe_forms/property';
 
 import AppConstants from '../../../../../constants/application_constants';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 
 
 let IkonotvContractNotifications = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
+    },
 
     mixins: [History],
 
     getInitialState() {
-        return mergeOptions(
-            NotificationStore.getState(),
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
+        return NotificationStore.getState();
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
+
         if (this.state.contractAgreementListNotifications === null){
             NotificationActions.fetchContractAgreementListNotifications();
         }
@@ -56,7 +49,6 @@ let IkonotvContractNotifications = React.createClass({
 
     componentWillUnmount() {
         NotificationStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -64,8 +56,9 @@ let IkonotvContractNotifications = React.createClass({
     },
 
     getContract(){
-        let notifications = this.state.contractAgreementListNotifications[0];
-        let blob = notifications.contract_agreement.contract.blob;
+        const notifications = this.state.contractAgreementListNotifications[0];
+        const blob = notifications.contract_agreement.contract.blob;
+
         if (blob.mime === 'pdf') {
             return (
                 <div className='notification-contract-pdf'>
@@ -76,22 +69,24 @@ let IkonotvContractNotifications = React.createClass({
                         pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
                 </div>
             );
+        } else {
+            return (
+                <div className='notification-contract-download'>
+                    <a href={blob.url_safe} target="_blank">
+                        <Glyphicon glyph='download-alt'/>
+                        <span style={{padding: '0.3em'}}>
+                            Download contract
+                        </span>
+                    </a>
+                </div>
+            );
         }
-        return (
-            <div className='notification-contract-download'>
-                <a href={blob.url_safe} target="_blank">
-                    <Glyphicon glyph='download-alt'/>
-                    <span style={{padding: '0.3em'}}>
-                        Download contract
-                    </span>
-                </a>
-            </div>
-        );
     },
 
     getAppendix() {
-        let notifications = this.state.contractAgreementListNotifications[0];
-        let appendix = notifications.contract_agreement.appendix;
+        const notifications = this.state.contractAgreementListNotifications[0];
+        const appendix = notifications.contract_agreement.appendix;
+
         if (appendix && appendix.default) {
             return (
                 <Property
@@ -100,19 +95,20 @@ let IkonotvContractNotifications = React.createClass({
                     <pre className="ascribe-pre">{appendix.default}</pre>
                 </Property>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     handleConfirm() {
-        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        const contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
         OwnershipFetcher
             .confirmContractAgreement(contractAgreement)
             .then(this.handleConfirmSuccess);
     },
 
     handleConfirmSuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
+        const notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // Flush contract notifications and refetch
@@ -123,20 +119,21 @@ let IkonotvContractNotifications = React.createClass({
     },
 
     handleDeny() {
-        let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
+        const contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
         OwnershipFetcher
             .denyContractAgreement(contractAgreement)
             .then(this.handleDenySuccess);
     },
 
     handleDenySuccess() {
-        let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
+        const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
         this.history.pushState(null, '/collection');
     },
 
     getCopyrightAssociationForm(){
-        let currentUser = this.state.currentUser;
+        const { currentUser } = this.props;
 
         if (currentUser && currentUser.profile && !currentUser.profile.copyright_association) {
             return (
@@ -149,24 +146,26 @@ let IkonotvContractNotifications = React.createClass({
                     <CopyrightAssociationForm currentUser={currentUser}/>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
+        const { whitelabel } = this.props;
+        const { contractAgreementListNotifications } = this.state;
+
         setDocumentTitle(getLangText('Contacts notifications'));
 
-        if (this.state.contractAgreementListNotifications &&
-            this.state.contractAgreementListNotifications.length > 0) {
-
-            let notifications = this.state.contractAgreementListNotifications[0];
-            let blob = notifications.contract_agreement.contract.blob;
+        if (contractAgreementListNotifications && contractAgreementListNotifications.length) {
+            const notifications = contractAgreementListNotifications[0];
+            const blob = notifications.contract_agreement.contract.blob;
 
             return (
                 <div className='container'>
                     <div className='notification-contract-wrapper'>
                         <div className='notification-contract-logo'>
-                            <img src={this.state.whitelabel.logo}/>
+                            <img src={whitelabel.logo}/>
                             <div className='notification-contract-header'>
                                 {getLangText('Contract')}
                             </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
index df58b7c7..68d5a3e7 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
@@ -3,29 +3,27 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import EditionListActions from '../../../../../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import PieceActions from '../../../../../../actions/piece_actions';
 import PieceStore from '../../../../../../stores/piece_store';
 
-import UserStore from '../../../../../../stores/user_store';
-
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
-import EditionListActions from '../../../../../../actions/edition_list_actions';
-
 import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button';
 
-import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
-
 import IkonotvArtistDetailsForm from '../ikonotv_forms/ikonotv_artist_details_form';
 import IkonotvArtworkDetailsForm from '../ikonotv_forms/ikonotv_artwork_details_form';
 
 import WalletPieceContainer from '../../ascribe_detail/wallet_piece_container';
 
-import AscribeSpinner from '../../../../../ascribe_spinner';
+import CollapsibleParagraph from '../../../../../../components/ascribe_collapsible/collapsible_paragraph';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+import AscribeSpinner from '../../../../../ascribe_spinner';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../../utils/dom_utils';
@@ -34,6 +32,12 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let IkonotvPieceContainer = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object,
         params: React.PropTypes.object
     },
 
@@ -42,14 +46,12 @@ let IkonotvPieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceStore.getState(),
-            UserStore.getState(),
             PieceListStore.getState()
         );
     },
 
     componentDidMount() {
         PieceStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
         // Every time we enter the piece detail page, just reset the piece
@@ -62,7 +64,7 @@ let IkonotvPieceContainer = React.createClass({
 
      // We need this for when the user clicks on a notification while being in another piece view
     componentWillReceiveProps(nextProps) {
-        if(this.props.params.pieceId !== nextProps.params.pieceId) {
+        if (this.props.params.pieceId !== nextProps.params.pieceId) {
             PieceActions.updatePiece({});
             PieceActions.fetchOne(nextProps.params.pieceId);
         }
@@ -70,7 +72,6 @@ let IkonotvPieceContainer = React.createClass({
 
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceListStore.listen(this.onChange);
     },
 
@@ -91,13 +92,16 @@ let IkonotvPieceContainer = React.createClass({
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.history.pushState(null, '/collection');
     },
 
     render() {
+        const { currentUser } = this.props;
+        const { piece } = this.state;
+
         let furtherDetails = (
             <CollapsibleParagraph
                 title={getLangText('Further Details')}
@@ -106,37 +110,37 @@ let IkonotvPieceContainer = React.createClass({
             </CollapsibleParagraph>
         );
 
-        if(this.state.piece.extra_data && Object.keys(this.state.piece.extra_data).length > 0 && this.state.piece.acl) {
+        if (piece.extra_data && Object.keys(piece.extra_data).length > 0 && piece.acl) {
             furtherDetails = (
                 <CollapsibleParagraph
                     title={getLangText('Further Details')}
                     defaultExpanded={true}>
                     <IkonotvArtistDetailsForm
-                        piece={this.state.piece}
+                        piece={piece}
                         isInline={true}
-                        disabled={!this.state.piece.acl.acl_edit} />
+                        disabled={!piece.acl.acl_edit} />
                     <IkonotvArtworkDetailsForm
-                        piece={this.state.piece}
+                        piece={piece}
                         isInline={true}
-                        disabled={!this.state.piece.acl.acl_edit} />
+                        disabled={!piece.acl.acl_edit} />
                 </CollapsibleParagraph>
             );
         }
 
-        if(this.state.piece && this.state.piece.id) {
-            setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
+        if (piece && piece.id) {
+            setDocumentTitle([piece.artist_name, piece.title].join(', '));
+
             return (
                 <WalletPieceContainer
-                    piece={this.state.piece}
-                    currentUser={this.state.currentUser}
+                    piece={piece}
+                    currentUser={currentUser}
                     loadPiece={this.loadPiece}
                     handleDeleteSuccess={this.handleDeleteSuccess}
                     submitButtonType={IkonotvSubmitButton}>
                     {furtherDetails}
                 </WalletPieceContainer>
             );
-        }
-        else {
+        } else {
             return (
                 <div className="fullpage-spinner">
                     <AscribeSpinner color='dark-blue' size='lg' />
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
index 0758d6a9..c960be12 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
@@ -6,47 +6,32 @@ import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let IkonotvLanding = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     getEnterButton() {
+        const { currentUser, location } = this.props;
         let redirect = '/login';
 
-        if(this.state.currentUser && this.state.currentUser.email) {
+        if (currentUser && currentUser.email) {
             redirect = '/collection';
-        }
-        else if (this.props.location.query && this.props.location.query.redirect) {
-            redirect = '/' + this.props.location.query.redirect;
+        } else if (location.query.redirect) {
+            redirect = '/' + location.query.redirect;
         }
 
         return (
-            <LinkContainer to={redirect} query={this.props.location.query}>
+            <LinkContainer to={redirect} query={location.query}>
                 <Button>
                     {getLangText('ENTER TO START')}
                 </Button>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
index 5b489d09..4661cc32 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
@@ -4,44 +4,38 @@ import React from 'react';
 
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
 import NotificationStore from '../../../../../stores/notification_store';
 
 import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item';
 
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let IkonotvPieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     getInitialState() {
-        return mergeOptions(
-            NotificationStore.getState(),
-            UserStore.getState()
-        );
+        return NotificationStore.getState();
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
         NotificationStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
-
     },
 
     redirectIfNoContractNotifications() {
@@ -56,6 +50,7 @@ let IkonotvPieceList = React.createClass({
         return (
             <div>
                 <PieceList
+                    {...this.props}
                     redirectTo="/register_piece?slide_num=0"
                     shouldRedirect={this.redirectIfNoContractNotifications}
                     accordionListItemType={IkonotvAccordionListItem}
@@ -71,8 +66,7 @@ let IkonotvPieceList = React.createClass({
                                 label: getLangText('loaned')
                             }
                         ]
-                    }]}
-                    location={this.props.location}/>
+                    }]} />
             </div>
         );
     }
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index c40d779d..d72080a7 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -10,24 +10,18 @@ import Row from 'react-bootstrap/lib/Row';
 import PieceListStore from '../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../actions/piece_list_actions';
 
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-
 import PieceStore from '../../../../../stores/piece_store';
 import PieceActions from '../../../../../actions/piece_actions';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import GlobalNotificationModel from '../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
 
-import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
-import LoanForm from '../../../../ascribe_forms/form_loan';
-
 import IkonotvArtistDetailsForm from './ikonotv_forms/ikonotv_artist_details_form';
 import IkonotvArtworkDetailsForm from './ikonotv_forms/ikonotv_artwork_details_form';
 
+import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
+import LoanForm from '../../../../ascribe_forms/form_loan';
+
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
 import ApiUrls from '../../../../../constants/api_urls';
@@ -38,8 +32,14 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 let IkonotvRegisterPiece = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
+        handleSuccess: React.PropTypes.func,
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -47,10 +47,8 @@ let IkonotvRegisterPiece = React.createClass({
 
     getInitialState(){
         return mergeOptions(
-            UserStore.getState(),
             PieceListStore.getState(),
             PieceStore.getState(),
-            WhitelabelStore.getState(),
             {
                 step: 0,
                 pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
@@ -59,18 +57,12 @@ let IkonotvRegisterPiece = React.createClass({
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
         // Before we load the new piece, we reset the piece store to delete old data that we do
         // not want to display to the user.
         PieceActions.updatePiece({});
 
-        let queryParams = this.props.location.query;
-
         // Since every step of this register process is atomic,
         // we may need to enter the process at step 1 or 2.
         // If this is the case, we'll need the piece number to complete submission.
@@ -78,6 +70,7 @@ let IkonotvRegisterPiece = React.createClass({
         //
         // We're using 'in' here as we want to know if 'piece_id' is present in the url,
         // we don't care about the value.
+        const queryParams = this.props.location.query;
         if (queryParams && 'piece_id' in queryParams) {
             PieceActions.fetchOne(queryParams.piece_id);
         }
@@ -85,9 +78,7 @@ let IkonotvRegisterPiece = React.createClass({
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
         PieceStore.unlisten(this.onChange);
-        WhitelabelStore.listen(this.onChange);
     },
 
     onChange(state) {
@@ -158,8 +149,7 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     canSubmit() {
-        let currentUser = this.state.currentUser;
-        let whitelabel = this.state.whitelabel;
+        const { currentUser, whitelabel } = this.props;
         return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
     },
 
@@ -199,10 +189,9 @@ let IkonotvRegisterPiece = React.createClass({
 
     getSlideLoan() {
         if (this.canSubmit()) {
-            const { piece, whitelabel } = this.state;
-            let today = new Moment();
-            let endDate = new Moment();
-            endDate.add(2, 'years');
+            const { piece, whitelabel } = this.props;
+            const today = new Moment();
+            const endDate = (new Moment()).add(2, 'years');
 
             return (
                 <div data-slide-title={getLangText('Loan')}>
@@ -252,7 +241,7 @@ let IkonotvRegisterPiece = React.createClass({
                                 submitMessage={getLangText('Register')}
                                 isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={this.props.location}/>
+                                location={this.props.location} />
                         </Col>
                     </Row>
                 </div>

From fbb35915eb0e8b30a336733f0683cb48b47bff62 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 16:57:48 +0100
Subject: [PATCH 057/197] Update market routes for loading user and whitelabel
 settings in top level app

---
 .../portfolioreview/components/pr_landing.js  |  3 +-
 .../components/23vivi/23vivi_landing.js       | 30 +++++--------
 .../components/23vivi/23vivi_piece_list.js    | 10 +++--
 .../ascribe_detail/wallet_piece_container.js  |  1 -
 .../components/lumenus/lumenus_landing.js     | 29 +++----------
 .../components/market/market_piece_list.js    | 43 +++++--------------
 .../market/market_register_piece.js           | 35 ++++++---------
 7 files changed, 50 insertions(+), 101 deletions(-)

diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
index a3f14bef..039a4b45 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
@@ -32,10 +32,11 @@ const PRLanding = React.createClass({
 
     componentDidMount() {
         const { location } = this.props;
+
         PrizeStore.listen(this.onChange);
         PrizeActions.fetchPrize();
 
-        if (location && location.query && location.query.redirect) {
+        if (location.query.redirect) {
             let queryCopy = JSON.parse(JSON.stringify(location.query));
             delete queryCopy.redirect;
             window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy));
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
index f6b2d50c..1219c182 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -5,42 +5,32 @@ import React from 'react';
 import Button from 'react-bootstrap/lib/Button';
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 let Vivi23Landing = React.createClass({
-    getInitialState() {
-        return WhitelabelStore.getState();
+    propTypes: {
+        customThumbnailPlaceholder: React.PropTypes.func,
+
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
     },
 
     componentWillMount() {
         setDocumentTitle('23VIVI Marketplace');
     },
 
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
         return (
             <div className="container ascribe-form-wrapper vivi23-landing">
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row vivi23-landing--header">
-                            <img className="vivi23-landing--header-logo" src={this.state.whitelabel.logo} />
+                            <img className="vivi23-landing--header-logo" src={this.props.whitelabel.logo} />
                             <div>
                                 {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '}
                                 <span className="icon-ascribe-logo" />
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
index 0bfb8aa0..bb64fc9a 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
@@ -8,17 +8,21 @@ import MarketPieceList from '../market/market_piece_list';
 
 let Vivi23PieceList = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
     render() {
         return (
             <MarketPieceList
-                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder}
-                location={this.props.location} />
+                {...this.props}
+                customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder} />
         );
     }
-
 });
 
 export default Vivi23PieceList;
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
index 632b415e..5c9af8b1 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
@@ -32,7 +32,6 @@ let WalletPieceContainer = React.createClass({
         ])
     },
 
-
     render() {
         if (this.props.piece && this.props.piece.id) {
             return (
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
index 23289276..5f5020a3 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
@@ -5,46 +5,31 @@ import React from 'react';
 import Button from 'react-bootstrap/lib/Button';
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
 let LumenusLanding = React.createClass({
+    propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
 
-    getInitialState() {
-        return mergeOptions(
-            WhitelabelStore.getState()
-        );
+        // Provided from router
+        location: React.PropTypes.object
     },
 
     componentWillMount() {
         setDocumentTitle('Lumenus Marketplace');
     },
 
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
         return (
             <div className="container ascribe-form-wrapper">
                 <div className="row">
                     <div className="col-xs-12 wp-landing-wrapper">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.state.whitelabel.logo} width="150px"/>
+                            <img src={this.props.whitelabel.logo} width="150px"/>
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
                                 <span>
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
index 1c74e6de..404926f3 100644
--- a/js/components/whitelabel/wallet/components/market/market_piece_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -6,11 +6,6 @@ import MarketAclButtonList from './market_buttons/market_acl_button_list';
 
 import PieceList from '../../../../piece_list';
 
-import UserActions from '../../../../../actions/user_actions';
-import UserStore from '../../../../../stores/user_store';
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -18,45 +13,27 @@ import { getLangText } from '../../../../../utils/lang_utils';
 let MarketPieceList = React.createClass({
     propTypes: {
         customThumbnailPlaceholder: React.PropTypes.func,
-        location: React.PropTypes.object
-    },
 
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
+        location: React.PropTypes.object
     },
 
     componentWillMount() {
         setDocumentTitle(getLangText('Collection'));
     },
 
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        const { customThumbnailPlaceholder, location } = this.props;
         const {
             currentUser: { email: userEmail },
+            customThumbnailPlaceholder,
             whitelabel: {
                 name: whitelabelName = 'Market',
                 user: whitelabelAdminEmail
-            } } = this.state;
+            } } = this.props;
 
         let filterParams = null;
         let canLoadPieceList = false;
@@ -77,12 +54,12 @@ let MarketPieceList = React.createClass({
 
         return (
             <PieceList
+                {...this.props}
                 canLoadPieceList={canLoadPieceList}
                 redirectTo="/register_piece?slide_num=0"
                 bulkModalButtonListType={MarketAclButtonList}
                 customThumbnailPlaceholder={customThumbnailPlaceholder}
-                filterParams={filterParams}
-                location={location} />
+                filterParams={filterParams} />
         );
     }
 });
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index 387934f9..927fed62 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -6,19 +6,15 @@ import { History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
+import PieceActions from '../../../../../actions/piece_actions';
+import PieceListStore from '../../../../../stores/piece_list_store';
+import PieceListActions from '../../../../../actions/piece_list_actions';
+
 import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
 
 import Property from '../../../../ascribe_forms/property';
 import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
 
-import PieceActions from '../../../../../actions/piece_actions';
-import PieceListStore from '../../../../../stores/piece_list_store';
-import PieceListActions from '../../../../../actions/piece_list_actions';
-import UserStore from '../../../../../stores/user_store';
-import UserActions from '../../../../../actions/user_actions';
-import WhitelabelActions from '../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../stores/whitelabel_store';
-
 import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
 
 import { getLangText } from '../../../../../utils/lang_utils';
@@ -27,6 +23,11 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 
 let MarketRegisterPiece = React.createClass({
     propTypes: {
+        // Provided from PrizeApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object,
+
+        // Provided from router
         location: React.PropTypes.object
     },
 
@@ -35,8 +36,6 @@ let MarketRegisterPiece = React.createClass({
     getInitialState(){
         return mergeOptions(
             PieceListStore.getState(),
-            UserStore.getState(),
-            WhitelabelStore.getState(),
             {
                 step: 0
             });
@@ -44,11 +43,6 @@ let MarketRegisterPiece = React.createClass({
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
 
         // Reset the piece store to make sure that we don't display old data
         // if the user repeatedly registers works
@@ -57,8 +51,6 @@ let MarketRegisterPiece = React.createClass({
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -115,10 +107,11 @@ let MarketRegisterPiece = React.createClass({
 
     render() {
         const {
-            step,
+            location,
             whitelabel: {
                 name: whitelabelName = 'Market'
-            } } = this.state;
+            } } = this.props
+        const { step } = this.state;
 
         setDocumentTitle(getLangText('Register a new piece'));
 
@@ -130,7 +123,7 @@ let MarketRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}
-                location={this.props.location}>
+                location={location}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
@@ -142,7 +135,7 @@ let MarketRegisterPiece = React.createClass({
                                 isFineUploaderActive={true}
                                 enableSeparateThumbnail={false}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={this.props.location}>
+                                location={location}>
                                 <Property
                                     name="num_editions"
                                     label={getLangText('Specify editions')}>

From f31d6352eb6dcca8dc3560116beec681b8a09264 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 17:09:17 +0100
Subject: [PATCH 058/197] Merge general_utils.js from #35 for
 `selectFromObject`

---
 js/utils/general_utils.js | 91 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 80 insertions(+), 11 deletions(-)

diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index c245cef6..a3336d80 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -84,6 +84,8 @@ export function formatText() {
  * Checks a list of objects for key duplicates and returns a boolean
  */
 function _doesObjectListHaveDuplicates(l) {
+    let mergedList = [];
+
     l = l.map((obj) => {
         if(!obj) {
             throw new Error('The object you are trying to merge is null instead of an empty object');
@@ -92,11 +94,11 @@ function _doesObjectListHaveDuplicates(l) {
         return Object.keys(obj);
     });
 
-    // Taken from: http://stackoverflow.com/a/10865042 (but even better with rest)
+    // Taken from: http://stackoverflow.com/a/10865042
     // How to flatten an array of arrays in javascript.
     // If two objects contain the same key, then these two keys
     // will actually be represented in the merged array
-    let mergedList = [].concat(...l);
+    mergedList = mergedList.concat.apply(mergedList, l);
 
     // Taken from: http://stackoverflow.com/a/7376645/1263876
     // By casting the array to a set, and then checking if the size of the array
@@ -149,7 +151,7 @@ export function escapeHTML(s) {
  * Returns a copy of the given object's own and inherited enumerable
  * properties, omitting any keys that pass the given filter function.
  */
-function filterObjOnFn(obj, filterFn) {
+function applyFilterOnObject(obj, filterFn) {
     const filteredObj = {};
 
     for (let key in obj) {
@@ -162,6 +164,37 @@ function filterObjOnFn(obj, filterFn) {
     return filteredObj;
 }
 
+/**
+ * Abstraction for selectFromObject and omitFromObject
+ * for DRYness
+ * @param {boolean} isInclusion True if the filter should be for including the filtered items
+ *                              (ie. selecting only them vs omitting only them)
+ */
+function filterFromObject(obj, filter, { isInclusion = true } = {}) {
+    if (filter && filter.constructor === Array) {
+        return applyFilterOnObject(obj, isInclusion ? ((_, key) => filter.indexOf(key) < 0)
+                                                    : ((_, key) => filter.indexOf(key) >= 0));
+    } else if (filter && typeof filter === 'function') {
+        // Flip the filter fn's return if it's for inclusion
+        return applyFilterOnObject(obj, isInclusion ? (...args) => !filter(...args)
+                                                    : filter);
+    } else {
+        throw new Error('The given filter is not an array or function. Exclude aborted');
+    }
+}
+
+/**
+ * Similar to lodash's _.pick(), this returns a copy of the given object's
+ * own and inherited enumerable properties, selecting only the keys in
+ * the given array or whose value pass the given filter function.
+ * @param  {object}         obj    Source object
+ * @param  {array|function} filter Array of key names to select or function to invoke per iteration
+ * @return {object}                The new object
+*/
+export function selectFromObject(obj, filter) {
+    return filterFromObject(obj, filter);
+}
+
 /**
  * Similar to lodash's _.omit(), this returns a copy of the given object's
  * own and inherited enumerable properties, omitting any keys that are
@@ -171,15 +204,51 @@ function filterObjOnFn(obj, filterFn) {
  * @return {object}                The new object
 */
 export function omitFromObject(obj, filter) {
-    if (filter && filter.constructor === Array) {
-        return filterObjOnFn(obj, (_, key) => {
-            return filter.indexOf(key) >= 0;
-        });
-    } else if (filter && typeof filter === 'function') {
-        return filterObjOnFn(obj, filter);
-    } else {
-        throw new Error('The given filter is not an array or function. Exclude aborted');
+    return filterFromObject(obj, filter, { isInclusion: false });
+}
+
+/**
+ * Recursively tests an object against a "match" object to see if the
+ * object is similar to the "match" object. In other words, this will
+ * deeply traverse the "match" object's properties and check them
+ * against the object by using the testFn.
+ *
+ * The object is considered a match if all primitive properties in the
+ * "match" object are found and accepted in the object by the testFn.
+ *
+ * @param  {object}     obj    Object to test
+ * @param  {object}     match  "Match" object to test against
+ * @param  {(function)} testFn Function to use on each property test.
+ *                             Return true to accept the match.
+ *                             By default, applies strict equality using ===
+ * @return {boolean}           True if obj matches the "match" object
+ */
+export function deepMatchObject(obj, match, testFn) {
+    if (typeof match !== 'object') {
+        throw new Error('Your specified match argument was not an object');
     }
+
+    if (typeof testFn !== 'function') {
+        testFn = (objProp, matchProp) => {
+            return objProp === matchProp;
+        };
+    }
+
+    return Object
+            .keys(match)
+            .reduce((result, matchKey) => {
+                if (!result) { return false; }
+
+                const objProp = obj[matchKey];
+                const matchProp = match[matchKey];
+
+                if (typeof matchProp === 'object') {
+                    return (typeof objProp === 'object') ? deepMatchObject(objProp, matchProp, testFn)
+                                                         : false;
+                } else {
+                    return testFn(objProp, matchProp);
+                }
+            }, true);
 }
 
 /**

From d4bb00168c52cb0219596ce7c3153218897a1ea3 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 17:41:31 +0100
Subject: [PATCH 059/197] Change AclButtonList and parents for loading
 UserStore from top level app

---
 .../ascribe_buttons/acl_button_list.js        | 84 +++++++------------
 .../ascribe_buttons/acls/acl_button.js        |  7 +-
 .../ascribe_detail/edition_action_panel.js    | 23 +++--
 .../ascribe_detail/piece_container.js         |  9 +-
 js/components/piece_list.js                   |  2 +
 .../ascribe_detail/wallet_action_panel.js     | 40 ++++-----
 .../components/cyland/cyland_landing.js       |  2 +-
 .../market_buttons/market_acl_button_list.js  | 72 ++++++----------
 8 files changed, 98 insertions(+), 141 deletions(-)

diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js
index 35e42c20..d059e0f2 100644
--- a/js/components/ascribe_buttons/acl_button_list.js
+++ b/js/components/ascribe_buttons/acl_button_list.js
@@ -2,9 +2,6 @@
 
 import React from 'react/addons';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
 import ConsignButton from './acls/consign_button';
 import EmailButton from './acls/email_button';
 import LoanButton from './acls/loan_button';
@@ -12,50 +9,44 @@ import LoanRequestButton from './acls/loan_request_button';
 import TransferButton from './acls/transfer_button';
 import UnconsignButton from './acls/unconsign_button';
 
-import { mergeOptions } from '../../utils/general_utils';
+import { selectFromObject } from '../../utils/general_utils';
 
 let AclButtonList = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
+        availableAcls: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+        handleSuccess: React.PropTypes.func.isRequired,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        availableAcls: React.PropTypes.object.isRequired,
+
         buttonsStyle: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func.isRequired,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            {
-                buttonListSize: 0
-            }
-        );
+        return {
+            buttonListSize: 0
+        }
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser.defer();
-
         window.addEventListener('resize', this.handleResize);
         window.dispatchEvent(new Event('resize'));
     },
 
     componentDidUpdate(prevProps) {
-        if(prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) {
+        if (prevProps.availableAcls && prevProps.availableAcls !== this.props.availableAcls) {
             window.dispatchEvent(new Event('resize'));
         }
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-
         window.removeEventListener('resize', this.handleResize);
     },
 
@@ -65,10 +56,6 @@ let AclButtonList = React.createClass({
         });
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     renderChildren() {
         const { children } = this.props;
         const { buttonListSize } = this.state;
@@ -79,42 +66,29 @@ let AclButtonList = React.createClass({
     },
 
     render() {
-        const { className,
-                buttonsStyle,
-                availableAcls,
-                pieceOrEditions,
-                handleSuccess } = this.props;
+        const {
+            availableAcls,
+            buttonsStyle,
+            className,
+            currentUser,
+            handleSuccess,
+            pieceOrEditions } = this.props;
 
-        const { currentUser } = this.state;
+        const buttonProps = selectFromObject(this.props, [
+            'availableAcls',
+            'currentUser',
+            'handleSuccess',
+            'pieceOrEditions'
+        ]);
 
         return (
             <div className={className}>
                 <span ref="buttonList" style={buttonsStyle}>
-                    <EmailButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
-                    <TransferButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess}/>
-                    <ConsignButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
-                    <UnconsignButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
-                    <LoanButton
-                        availableAcls={availableAcls}
-                        pieceOrEditions={pieceOrEditions}
-                        currentUser={currentUser}
-                        handleSuccess={handleSuccess} />
+                    <EmailButton {...buttonProps} />
+                    <TransferButton {...buttonProps} />
+                    <ConsignButton {...buttonProps} />
+                    <UnconsignButton {...buttonProps} />
+                    <LoanButton {...buttonProps} />
                     {this.renderChildren()}
                 </span>
             </div>
diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js
index 97f2e173..8cfdddce 100644
--- a/js/components/ascribe_buttons/acls/acl_button.js
+++ b/js/components/ascribe_buttons/acls/acl_button.js
@@ -37,10 +37,9 @@ export default function ({ action, displayName, title, tooltip }) {
         },
 
         sanitizeAction() {
-            if (this.props.buttonAcceptName) {
-                return this.props.buttonAcceptName;
-            }
-            return AclInformationText.titles[action];
+            const { buttonAcceptName } = this.props;
+
+            return buttonAcceptName ? buttonAcceptName : AclInformationText.titles[action];
         },
 
         render() {
diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js
index 36a79e7c..c5cbe2b1 100644
--- a/js/components/ascribe_detail/edition_action_panel.js
+++ b/js/components/ascribe_detail/edition_action_panel.js
@@ -36,9 +36,10 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let EditionActionPanel = React.createClass({
     propTypes: {
+        edition: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+
         actionPanelButtonListType: React.PropTypes.func,
-        edition: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
 
@@ -72,7 +73,7 @@ let EditionActionPanel = React.createClass({
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.history.pushState(null, '/collection');
@@ -99,24 +100,22 @@ let EditionActionPanel = React.createClass({
             edition,
             currentUser } = this.props;
 
-        if (edition &&
-            edition.notifications &&
+        if (edition.notifications &&
             edition.notifications.length > 0){
             return (
                 <ListRequestActions
-                    pieceOrEditions={[edition]}
                     currentUser={currentUser}
-                    handleSuccess={this.handleSuccess}
-                    notifications={edition.notifications}/>);
-        }
-
-        else {
+                    notifications={edition.notifications}
+                    pieceOrEditions={[edition]}
+                    handleSuccess={this.handleSuccess} />);
+        } else {
             return (
                 <Row>
                     <Col md={12}>
                         <ActionPanelButtonListType
-                            className="ascribe-button-list"
                             availableAcls={edition.acl}
+                            className="ascribe-button-list"
+                            currentUser={currentUser}
                             pieceOrEditions={[edition]}
                             handleSuccess={this.handleSuccess}>
                             <AclProxy
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 30f2dc27..9e68be88 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -210,10 +210,10 @@ let PieceContainer = React.createClass({
         if (piece && piece.notifications && piece.notifications.length > 0) {
             return (
                 <ListRequestActions
-                    pieceOrEditions={piece}
                     currentUser={currentUser}
-                    handleSuccess={this.loadPiece}
-                    notifications={piece.notifications}/>);
+                    pieceOrEditions={piece}
+                    notifications={piece.notifications}
+                    handleSuccess={this.loadPiece} />);
         } else {
             return (
                 <AclProxy
@@ -227,8 +227,9 @@ let PieceContainer = React.createClass({
                         label={getLangText('ACTIONS')}
                         className="hidden-print">
                         <AclButtonList
-                            className="ascribe-button-list"
                             availableAcls={piece.acl}
+                            className="ascribe-button-list"
+                            currentUser={currentUser}
                             pieceOrEditions={piece}
                             handleSuccess={this.loadPiece}>
                                 <CreateEditionsButton
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 1f3e0074..baf965b4 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -263,6 +263,7 @@ let PieceList = React.createClass({
         const {
             accordionListItemType: AccordionListItemType,
             bulkModalButtonListType: BulkModalButtonListType,
+            currentUser,
             customSubmitButton,
             customThumbnailPlaceholder,
             filterParams,
@@ -299,6 +300,7 @@ let PieceList = React.createClass({
                     className="ascribe-piece-list-bulk-modal">
                     <BulkModalButtonListType
                         availableAcls={availableAcls}
+                        currentUser={currentUser}
                         pieceOrEditions={selectedEditions}
                         handleSuccess={this.handleAclSuccess}
                         className="text-center ascribe-button-list collapse-group">
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
index bd240126..acccbde8 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
@@ -20,49 +20,49 @@ let WalletActionPanel = React.createClass({
         submitButtonType: React.PropTypes.func.isRequired
     },
 
-    render(){
-        if (this.props.piece &&
-            this.props.piece.notifications &&
-            this.props.piece.notifications.length > 0) {
+    render() {
+        const { currentUser, handleDeleteSuccess, loadPiece, piece, submitButtonType } = this.props;
+
+        if (piece && piece.notifications && piece.notifications.length) {
             return (
                 <ListRequestActions
-                    pieceOrEditions={this.props.piece}
-                    currentUser={this.props.currentUser}
-                    handleSuccess={this.props.loadPiece}
-                    notifications={this.props.piece.notifications}/>);
-        }
-        else {
+                    pieceOrEditions={piece}
+                    currentUser={currentUser}
+                    handleSuccess={loadPiece}
+                    notifications={piece.notifications}/>);
+        } else {
 
             //We need to disable the normal acl_loan because we're inserting a custom acl_loan button
             let availableAcls;
 
-            if (this.props.piece && this.props.piece.acl && typeof this.props.piece.acl.acl_loan !== 'undefined') {
+            if (piece && piece.acl && typeof piece.acl.acl_loan !== 'undefined') {
                 // make a copy to not have side effects
-                availableAcls = mergeOptions({}, this.props.piece.acl);
+                availableAcls = mergeOptions({}, piece.acl);
                 availableAcls.acl_loan = false;
             }
-            let SubmitButtonType = this.props.submitButtonType;
+            let SubmitButtonType = submitButtonType;
 
             return (
                 <AclButtonList
-                    className="text-center ascribe-button-list"
                     availableAcls={availableAcls}
-                    pieceOrEditions={this.props.piece}
-                    handleSuccess={this.props.loadPiece}>
+                    className="text-center ascribe-button-list"
+                    currentUser={currentUser}
+                    pieceOrEditions={piece}
+                    handleSuccess={loadPiece}>
                     <AclProxy
-                        aclObject={this.props.currentUser.acl}
+                        aclObject={currentUser.acl}
                         aclName="acl_wallet_submit">
                         <AclProxy
                             aclObject={availableAcls}
                             aclName="acl_wallet_submit">
                             <SubmitButtonType
                                 className="btn-sm"
-                                piece={this.props.piece}/>
+                                piece={piece}/>
                         </AclProxy>
                     </AclProxy>
                     <DeleteButton
-                        handleSuccess={this.props.handleDeleteSuccess}
-                        piece={this.props.piece}/>
+                        handleSuccess={handleDeleteSuccess}
+                        piece={piece}/>
                 </AclButtonList>
             );
         }
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 00c0593a..deb0bd71 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -19,7 +19,7 @@ let CylandLanding = React.createClass({
         whitelabel: React.PropTypes.object,
 
         // Provided from router
-        location: object
+        location: React.PropTypes.object
     },
 
     render() {
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
index 1dcdd4e5..4a33baae 100644
--- a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
@@ -9,63 +9,45 @@ import EmailButton from '../../../../../ascribe_buttons/acls/email_button';
 import TransferButton from '../../../../../ascribe_buttons/acls/transfer_button';
 import UnconsignButton from '../../../../../ascribe_buttons/acls/unconsign_button';
 
-import UserActions from '../../../../../../actions/user_actions';
-import UserStore from '../../../../../../stores/user_store';
+import { selectFromObject } from '../../../../../../utils/general_utils';
 
 let MarketAclButtonList = React.createClass({
     propTypes: {
         availableAcls: React.PropTypes.object.isRequired,
-        className: React.PropTypes.string,
-        pieceOrEditions: React.PropTypes.array,
-        handleSuccess: React.PropTypes.func,
+        currentUser: React.PropTypes.object.isRequired,
+        handleSuccess: React.PropTypes.func.isRequired,
+        pieceOrEditions: React.PropTypes.array.isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
-    },
-
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        ]),
+        className: React.PropTypes.string
     },
 
     render() {
-        let { availableAcls, className, pieceOrEditions, handleSuccess } = this.props;
+        const {
+            availableAcls,
+            children,
+            className,
+            currentUser,
+            handleSuccess,
+            pieceOrEditions } = this.props;
+
+        const buttonProps = selectFromObject(this.props, [
+            'availableAcls',
+            'currentUser',
+            'handleSuccess',
+            'pieceOrEditions'
+        ]);
+
         return (
             <div className={className}>
-                <MarketSubmitButton
-                    availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
-                    editions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
-                <EmailButton
-                    availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
-                    pieceOrEditions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
-                <TransferButton
-                    availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
-                    pieceOrEditions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
-                <UnconsignButton
-                    availableAcls={availableAcls}
-                    currentUser={this.state.currentUser}
-                    pieceOrEditions={pieceOrEditions}
-                    handleSuccess={handleSuccess} />
-                {this.props.children}
+                <MarketSubmitButton {...buttonProps} />
+                <EmailButton {...buttonProps} />
+                <TransferButton {...buttonProps} />
+                <UnconsignButton {...buttonProps} />
+                {children}
             </div>
         );
     }

From 8531b776331af2af1f7b856c6f1974a878660eba Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 17:52:32 +0100
Subject: [PATCH 060/197] Merge with master

---
 .../accordion_list_item_table_editions.js     | 125 ++++++++++--------
 js/components/ascribe_detail/edition.js       |  93 +++++++------
 .../ascribe_detail/edition_action_panel.js    |   6 +-
 .../ascribe_detail/media_container.js         |  44 +++---
 js/components/ascribe_detail/piece.js         |  18 +--
 .../ascribe_detail/piece_container.js         |  66 ++++-----
 .../form_send_contract_agreement.js           |   2 +-
 js/components/ascribe_media/media_player.js   |   2 +-
 .../piece_list_toolbar_filter_widget.js       |  24 ++--
 .../piece_list_toolbar_order_widget.js        |  32 +++--
 js/components/ascribe_routes/proxy_handler.js |   8 +-
 .../slides_container.js                       |  14 +-
 .../ascribe_table/models/table_models.js      |  10 +-
 js/components/ascribe_table/table_header.js   |   4 +-
 .../ascribe_table/table_header_item.js        |  20 +--
 .../ascribe_table/table_item_acl_filtered.js  |  19 ++-
 js/components/password_reset_container.js     |   3 +-
 js/components/piece_list.js                   |  21 +--
 js/components/register_piece.js               |   2 +-
 .../pr_forms/pr_register_piece_form.js        |   2 +-
 .../portfolioreview/components/pr_landing.js  |  10 +-
 .../components/pr_register_piece.js           |   2 +-
 .../components/pr_routes/pr_proxy_handler.js  |   2 +-
 .../ascribe_detail/wallet_piece_container.js  |  48 ++++---
 .../cyland_detail/cyland_piece_container.js   |   2 +-
 .../cyland/cyland_register_piece.js           |   2 +-
 .../ikonotv/ikonotv_contract_notifications.js |   4 +-
 .../ikonotv_detail/ikonotv_piece_container.js |   2 +-
 .../ikonotv/ikonotv_register_piece.js         |   4 +-
 .../market/market_register_piece.js           |   2 +-
 js/history.js                                 |   3 +-
 js/third_party/notifications.js               |   2 +-
 js/utils/url_utils.js                         |  11 +-
 package.json                                  |   6 +-
 34 files changed, 322 insertions(+), 293 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index 23cfb239..586b75a2 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -82,6 +82,10 @@ let AccordionListItemTableEditions = React.createClass({
                                             editionList.orderBy, editionList.orderAsc, editionList.filterBy);
     },
     render() {
+        const { className, parentId } = this.props;
+        const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
+        const editionsForPiece = editionList[parentId];
+
         let selectedEditionsCount = 0;
         let allEditionsCount = 0;
         let orderBy;
@@ -89,95 +93,97 @@ let AccordionListItemTableEditions = React.createClass({
         let show = false;
         let showExpandOption = false;
 
-        let editionsForPiece = this.state.editionList[this.props.parentId];
-        let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
-
         // here we need to check if all editions of a specific
         // piece are already defined. Otherwise .length will throw an error and we'll not
         // be notified about it.
-        if(editionsForPiece) {
+        if (editionsForPiece) {
             selectedEditionsCount = this.filterSelectedEditions().length;
             allEditionsCount = editionsForPiece.length;
             orderBy = editionsForPiece.orderBy;
             orderAsc = editionsForPiece.orderAsc;
         }
 
-        if(this.props.parentId in this.state.isEditionListOpenForPieceId) {
-            show = this.state.isEditionListOpenForPieceId[this.props.parentId].show;
+        if (parentId in isEditionListOpenForPieceId) {
+            show = isEditionListOpenForPieceId[parentId].show;
         }
 
         // if the number of editions in the array is equal to the maximum number of editions,
         // then the "Show me more" dialog should be hidden from the user's view
-        if(editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
+        if (editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
             showExpandOption = true;
         }
 
-        let transition = new TransitionModel('editions', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() );
+        const transition = new TransitionModel({
+            to: 'editions',
+            queryKey: 'editionId',
+            valueKey: 'bitcoin_id',
+            callback: (e) => e.stopPropagation()
+        });
 
-        let columnList = [
-            new ColumnModel(
-                (item) => {
+        const columnList = [
+            new ColumnModel({
+                transformFn: (item) => {
                     return {
                         'editionId': item.id,
-                        'pieceId': this.props.parentId,
+                        'pieceId': parentId,
                         'selectItem': this.selectItem,
                         'selected': item.selected
-                    }; },
-                    '',
+                    };
+                },
+                displayElement: (
                     <AccordionListItemTableSelectAllEditionsCheckbox
                         onChange={this.toggleAllItems}
                         numOfSelectedEditions={selectedEditionsCount}
-                        numOfAllEditions={allEditionsCount}/>,
-                    TableItemCheckbox,
-                    1,
-                    false
-            ),
-            new ColumnModel(
-                (item) => {
+                        numOfAllEditions={allEditionsCount}/>
+                ),
+                displayType: TableItemCheckbox,
+                rowWidth: 1
+            }),
+            new ColumnModel({
+                transition,
+                transformFn: (item) => {
                     return {
                         'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
-                    }; },
-                    'edition_number',
-                    getLangText('Edition'),
-                    TableItemText,
-                    1,
-                    false,
-                    transition
-            ),
-            new ColumnModel(
-                (item) => {
+                    };
+                },
+                columnName: 'edition_number',
+                displayElement: getLangText('Edition'),
+                displayType: TableItemText,
+                rowWidth: 1
+            }),
+            new ColumnModel({
+                transition,
+                transformFn: (item) => {
                     return {
                         'content': item.bitcoin_id
-                    }; },
-                    'bitcoin_id',
-                    getLangText('ID'),
-                    TableItemText,
-                    5,
-                    false,
-                    transition,
-                    'hidden-xs visible-sm visible-md visible-lg'
-            ),
-            new ColumnModel(
-                (item) => {
-                    let content = item.acl;
+                    };
+                },
+                columnName: 'bitcoin_id',
+                displayElement: getLangText('ID'),
+                displayType: TableItemText,
+                rowWidth: 5,
+                className: 'hidden-xs visible-sm visible-md visible-lg'
+            }),
+            new ColumnModel({
+                transition,
+                transformFn: (item) => {
                     return {
-                        'content': content,
+                        'content': item.acl,
                         'notifications': item.notifications
-                    }; },
-                    'acl',
-                    getLangText('Actions'),
-                    TableItemAclFiltered,
-                    4,
-                    false,
-                    transition
-            )
+                    };
+                },
+                columnName: 'acl',
+                displayElement: getLangText('Actions'),
+                displayType: TableItemAclFiltered,
+                rowWidth: 4
+            })
         ];
 
-        if(show && editionsForPiece && editionsForPiece.length > 0) {
+        if (show && editionsForPiece && editionsForPiece.length) {
             return (
-                <div className={this.props.className}>
+                <div className={className}>
                     <AccordionListItemTable
-                        parentId={this.props.parentId}
+                        parentId={parentId}
                         itemList={editionsForPiece}
                         columnList={columnList}
                         show={show}
@@ -188,7 +194,14 @@ let AccordionListItemTableEditions = React.createClass({
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle"
                         onClick={this.loadFurtherEditions}
-                        message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} />
+                        message={show && showExpandOption ? (
+                                <span>
+                                    {showMoreLoading ? <AscribeSpinner size="sm" color="dark-blue" />
+                                                     : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />}
+                                    {getLangText('Show me more')}
+                                </span>
+                            ) : null
+                        } />
                 </div>
             );
         } else {
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 0879dea0..803d73bb 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import { Link, History } from 'react-router';
+import { Link } from 'react-router';
 import Moment from 'moment';
 
 import Row from 'react-bootstrap/lib/Row';
@@ -44,8 +44,6 @@ let Edition = React.createClass({
         loadEdition: React.PropTypes.func
     },
 
-    mixins: [History],
-
     getDefaultProps() {
         return {
             furtherDetailsType: FurtherDetails
@@ -53,98 +51,103 @@ let Edition = React.createClass({
     },
 
     render() {
-        let FurtherDetailsType = this.props.furtherDetailsType;
+        const {
+            actionPanelButtonListType,
+            coaError,
+            currentUser,
+            edition,
+            furtherDetailsType: FurtherDetailsType,
+            loadEdition } = this.props;
 
         return (
             <Row>
                 <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
-                        content={this.props.edition}/>
+                        content={edition}
+                        currentUser={currentUser} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
                         <hr className="hidden-print" style={{marginTop: 0}}/>
-                        <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
-                        <DetailProperty label="BY" value={this.props.edition.artist_name} />
-                        <DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
+                        <h1 className="ascribe-detail-title">{edition.title}</h1>
+                        <DetailProperty label="BY" value={edition.artist_name} />
+                        <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
                         <hr/>
                     </div>
                     <EditionSummary
-                        actionPanelButtonListType={this.props.actionPanelButtonListType}
-                        edition={this.props.edition}
-                        currentUser={this.props.currentUser}
-                        handleSuccess={this.props.loadEdition}/>
+                        actionPanelButtonListType={actionPanelButtonListType}
+                        edition={edition}
+                        currentUser={currentUser}
+                        handleSuccess={loadEdition}/>
                     <CollapsibleParagraph
                         title={getLangText('Certificate of Authenticity')}
-                        show={this.props.edition.acl.acl_coa === true}>
+                        show={edition.acl.acl_coa === true}>
                         <CoaDetails
-                            coa={this.props.edition.coa}
-                            coaError={this.props.coaError}
-                            editionId={this.props.edition.bitcoin_id}/>
+                            coa={edition.coa}
+                            coaError={coaError}
+                            editionId={edition.bitcoin_id}/>
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Provenance/Ownership History')}
-                        show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
+                        show={edition.ownership_history && edition.ownership_history.length > 0}>
                         <HistoryIterator
-                            history={this.props.edition.ownership_history} />
+                            history={edition.ownership_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Consignment History')}
-                        show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
+                        show={edition.consign_history && edition.consign_history.length > 0}>
                         <HistoryIterator
-                            history={this.props.edition.consign_history} />
+                            history={edition.consign_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
-                        show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
+                        show={edition.loan_history && edition.loan_history.length > 0}>
                         <HistoryIterator
-                            history={this.props.edition.loan_history} />
+                            history={edition.loan_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title="Notes"
-                        show={!!(this.props.currentUser.username
-                                || this.props.edition.acl.acl_edit
-                                || this.props.edition.public_note)}>
+                        show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
                         <Note
-                            id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
+                            id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null}
+                            defaultValue={edition.private_note ? edition.private_note : null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_edition}
-                            currentUser={this.props.currentUser}/>
+                            currentUser={currentUser}/>
                         <Note
-                            id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
+                            id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (public)')}
-                            defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
+                            defaultValue={edition.public_note ? edition.public_note : null}
                             placeholder={getLangText('Enter your comments ...')}
-                            editable={!!this.props.edition.acl.acl_edit}
-                            show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit}
+                            editable={!!edition.acl.acl_edit}
+                            show={!!edition.public_note || !!edition.acl.acl_edit}
                             successMessage={getLangText('Public edition note saved')}
                             url={ApiUrls.note_public_edition}
-                            currentUser={this.props.currentUser}/>
+                            currentUser={currentUser}/>
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={this.props.edition.acl.acl_edit
-                            || Object.keys(this.props.edition.extra_data).length > 0
-                            || this.props.edition.other_data.length > 0}>
+                        show={edition.acl.acl_edit ||
+                              Object.keys(edition.extra_data).length > 0 ||
+                              edition.other_data.length > 0}>
                         <FurtherDetailsType
-                            editable={this.props.edition.acl.acl_edit}
-                            pieceId={this.props.edition.parent}
-                            extraData={this.props.edition.extra_data}
-                            otherData={this.props.edition.other_data}
-                            handleSuccess={this.props.loadEdition} />
+                            editable={edition.acl.acl_edit}
+                            pieceId={edition.parent}
+                            extraData={edition.extra_data}
+                            otherData={edition.other_data}
+                            handleSuccess={loadEdition} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('SPOOL Details')}>
                         <SpoolDetails
-                            edition={this.props.edition} />
+                            edition={edition} />
                     </CollapsibleParagraph>
                 </Col>
             </Row>
@@ -221,7 +224,11 @@ let EditionSummary = React.createClass({
 let CoaDetails = React.createClass({
     propTypes: {
         editionId: React.PropTypes.string,
-        coa: React.PropTypes.object,
+        coa: React.PropTypes.oneOfType([
+            React.PropTypes.number,
+            React.PropTypes.string,
+            React.PropTypes.object
+        ]),
         coaError: React.PropTypes.object
     },
 
diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js
index c5cbe2b1..d53617bc 100644
--- a/js/components/ascribe_detail/edition_action_panel.js
+++ b/js/components/ascribe_detail/edition_action_panel.js
@@ -76,7 +76,7 @@ let EditionActionPanel = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     refreshCollection() {
@@ -85,7 +85,7 @@ let EditionActionPanel = React.createClass({
         EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
     },
 
-    handleSuccess(response){
+    handleSuccess(response) {
         this.refreshCollection();
         this.props.handleSuccess();
         if (response){
@@ -94,7 +94,7 @@ let EditionActionPanel = React.createClass({
         }
     },
 
-    render(){
+    render() {
         const {
             actionPanelButtonListType: ActionPanelButtonListType,
             edition,
diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index 3c1e7eb9..e4270132 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -14,10 +14,6 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
 import AclProxy from '../acl_proxy';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
-import { mergeOptions } from '../../utils/general_utils.js';
 import { getLangText } from '../../utils/lang_utils.js';
 
 const EMBED_IFRAME_HEIGHT = {
@@ -28,25 +24,22 @@ const EMBED_IFRAME_HEIGHT = {
 let MediaContainer = React.createClass({
     propTypes: {
         content: React.PropTypes.object,
+        currentUser: React.PropTypes.object,
         refreshObject: React.PropTypes.func
     },
 
     getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            {
-                timerId: null
-            });
+        return {
+            timerId: null
+        };
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-
         if (!this.props.content.digital_work) {
             return;
         }
-        let isEncoding = this.props.content.digital_work.isEncoding;
+
+        const isEncoding = this.props.content.digital_work.isEncoding;
         if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
             let timerId = window.setInterval(this.props.refreshObject, 10000);
             this.setState({timerId: timerId});
@@ -60,22 +53,16 @@ let MediaContainer = React.createClass({
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-
         window.clearInterval(this.state.timerId);
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     render() {
-        const { content } = this.props;
+        const { content, currentUser } = this.props;
         // Pieces and editions are joined to the user by a foreign key in the database, so
         // the information in content will be updated if a user updates their username.
         // We also force uniqueness of usernames, so this check is safe to dtermine if the
         // content was registered by the current user.
-        const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered);
+        const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
 
         let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
             content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@@ -94,8 +81,11 @@ let MediaContainer = React.createClass({
             embed = (
                 <CollapsibleButton
                     button={
-                        <Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
-                            Embed
+                        <Button
+                            bsSize="xsmall"
+                            className="ascribe-margin-1px"
+                            disabled={isEmbedDisabled}>
+                            {getLangText('Embed')}
                         </Button>
                     }
                     panel={
@@ -125,8 +115,12 @@ let MediaContainer = React.createClass({
                         show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
                         aclObject={content.acl}
                         aclName="acl_download">
-                        <Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
-                            Download .{mimetype} <Glyphicon glyph="cloud-download"/>
+                        <Button
+                            bsSize="xsmall"
+                            className="ascribe-margin-1px"
+                            href={content.digital_work.url}
+                            target="_blank">
+                            {getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
                         </Button>
                     </AclProxy>
                     {embed}
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index 4108d98f..d779b716 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -16,10 +16,10 @@ import MediaContainer from './media_container';
 let Piece = React.createClass({
     propTypes: {
         piece: React.PropTypes.object,
+        currentUser: React.PropTypes.object,
         header: React.PropTypes.object,
         subheader: React.PropTypes.object,
         buttons: React.PropTypes.object,
-        loadPiece: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -32,20 +32,22 @@ let Piece = React.createClass({
     },
 
     render() {
+        const { buttons, children, currentUser, header, piece, subheader } = this.props;
+
         return (
             <Row>
                 <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
-                        refreshObject={this.updateObject}
-                        content={this.props.piece}/>
+                        content={piece}
+                        currentUser={currentUser}
+                        refreshObject={this.updateObject} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
-                    {this.props.header}
-                    {this.props.subheader}
-                    {this.props.buttons}
-
-                    {this.props.children}
+                    {header}
+                    {subheader}
+                    {buttons}
 
+                    {children}
                 </Col>
             </Row>
         );
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 9e68be88..8d63e31f 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -162,7 +162,7 @@ let PieceContainer = React.createClass({
         let notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getCreateEditionsDialog() {
@@ -254,76 +254,76 @@ let PieceContainer = React.createClass({
     },
 
     render() {
-        if (this.state.piece && this.state.piece.id) {
-            let FurtherDetailsType = this.props.furtherDetailsType;
-            setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
+        const { currentUser, furtherDetailsType: FurtherDetailsType } = this.props;
+        const { piece } = this.state;
+
+        if (piece && piece.id) {
+            setDocumentTitle([piece.artist_name, piece.title].join(', '));
 
             return (
                 <Piece
-                    piece={this.state.piece}
-                    loadPiece={this.loadPiece}
+                    piece={piece}
+                    currentUser={currentUser}
                     header={
                         <div className="ascribe-detail-header">
-                            <hr className="hidden-print" style={{marginTop: 0}}/>
-                            <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
-                            <DetailProperty label="BY" value={this.state.piece.artist_name} />
-                            <DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } />
-                            {this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null}
+                            <hr className="hidden-print" style={{marginTop: 0}} />
+                            <h1 className="ascribe-detail-title">{piece.title}</h1>
+                            <DetailProperty label="BY" value={piece.artist_name} />
+                            <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
+                            {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
                             <hr/>
                         </div>
                         }
                     subheader={
                         <div className="ascribe-detail-header">
-                            <DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } />
-                            <DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} />
-                            <LicenseDetail license={this.state.piece.license_type} />
+                            <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
+                            <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
+                            <LicenseDetail license={piece.license_type} />
                         </div>
                     }
                     buttons={this.getActions()}>
                     {this.getCreateEditionsDialog()}
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
-                        show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
+                        show={piece.loan_history && piece.loan_history.length > 0}>
                         <HistoryIterator
-                            history={this.state.piece.loan_history} />
+                            history={piece.loan_history} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={!!(this.props.currentUser.username
-                                || this.state.piece.acl.acl_edit
-                                || this.state.piece.public_note)}>
+                        show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.state.piece.private_note || null}
-                            show = {!!this.props.currentUser.username}
+                            defaultValue={piece.private_note || null}
+                            show = {!!currentUser.username}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_piece}
-                            currentUser={this.props.currentUser}/>
+                            currentUser={currentUser} />
                         <Note
                             id={this.getId}
                             label={getLangText('Personal note (public)')}
-                            defaultValue={this.state.piece.public_note || null}
+                            defaultValue={piece.public_note || null}
                             placeholder={getLangText('Enter your comments ...')}
-                            editable={!!this.state.piece.acl.acl_edit}
-                            show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
+                            editable={!!piece.acl.acl_edit}
+                            show={!!(piece.public_note || piece.acl.acl_edit)}
                             successMessage={getLangText('Public note saved')}
                             url={ApiUrls.note_public_piece}
-                            currentUser={this.props.currentUser}/>
+                            currentUser={currentUser} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={this.state.piece.acl.acl_edit
-                            || Object.keys(this.state.piece.extra_data).length > 0
-                            || this.state.piece.other_data.length > 0}
+                        show={piece.acl.acl_edit
+                            || Object.keys(piece.extra_data).length > 0
+                            || piece.other_data.length > 0}
                         defaultExpanded={true}>
                         <FurtherDetailsType
-                            editable={this.state.piece.acl.acl_edit}
-                            pieceId={this.state.piece.id}
-                            extraData={this.state.piece.extra_data}
-                            otherData={this.state.piece.other_data}
+                            editable={piece.acl.acl_edit}
+                            pieceId={piece.id}
+                            extraData={piece.extra_data}
+                            otherData={piece.other_data}
                             handleSuccess={this.loadPiece} />
                     </CollapsibleParagraph>
 
diff --git a/js/components/ascribe_forms/form_send_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js
index 6f5f74d7..043c0361 100644
--- a/js/components/ascribe_forms/form_send_contract_agreement.js
+++ b/js/components/ascribe_forms/form_send_contract_agreement.js
@@ -58,7 +58,7 @@ let SendContractAgreementForm = React.createClass({
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getFormData() {
diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js
index 2a23f2ed..1552b44c 100644
--- a/js/components/ascribe_media/media_player.js
+++ b/js/components/ascribe_media/media_player.js
@@ -184,7 +184,7 @@ let Video = React.createClass({
             );
         } else {
             return (
-                <Image src={this.props.preview} />
+                <Image preview={this.props.preview} />
             );
         }
     }
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index 75a2d9a9..edb29e85 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -91,13 +91,13 @@ let PieceListToolbarFilterWidget = React.createClass({
                         label also iterate over its items, to get all filterable options */}
                     {this.props.filterParams.map(({ label, items }, i) => {
                         return (
-                            <div>
-                                <li
-                                    style={{'textAlign': 'center'}}
-                                    key={i}>
+                            <div key={label}>
+                                <li style={{'textAlign': 'center'}}>
                                     <em>{label}:</em>
                                 </li>
-                                {items.map((param, j) => {
+                                {items.map((paramItem) => {
+                                    let itemLabel;
+                                    let param;
 
                                     // As can be seen in the PropTypes, a param can either
                                     // be a string or an object of the shape:
@@ -108,22 +108,22 @@ let PieceListToolbarFilterWidget = React.createClass({
                                     // }
                                     //
                                     // This is why we need to distinguish between both here.
-                                    if (typeof param !== 'string') {
-                                        label = param.label;
-                                        param = param.key;
+                                    if (typeof paramItem !== 'string') {
+                                        param = paramItem.key;
+                                        itemLabel = paramItem.label;
                                     } else {
-                                        param = param;
-                                        label = param.split('acl_')[1].replace(/_/g, ' ');
+                                        param = paramItem;
+                                        itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
                                     }
 
                                     return (
                                         <li
-                                            key={j}
+                                            key={itemLabel}
                                             onClick={this.filterBy(param)}
                                             className="filter-widget-item">
                                             <div className="checkbox-line">
                                                 <span>
-                                                    {getLangText(label)}
+                                                    {getLangText(itemLabel)}
                                                 </span>
                                                 <input
                                                     readOnly
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
index 23c0d355..5257cc07 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
@@ -63,22 +63,20 @@ let PieceListToolbarOrderWidget = React.createClass({
                     </li>
                     {this.props.orderParams.map((param) => {
                         return (
-                            <div>
-                                <li
-                                    key={param}
-                                    onClick={this.orderBy(param)}
-                                    className="filter-widget-item">
-                                    <div className="checkbox-line">
-                                        <span>
-                                            {getLangText(param.replace('_', ' '))}
-                                        </span>
-                                        <input
-                                            readOnly
-                                            type="radio"
-                                            checked={param.indexOf(this.props.orderBy) > -1} />
-                                    </div>
-                                </li>
-                            </div>
+                            <li
+                                key={param}
+                                onClick={this.orderBy(param)}
+                                className="filter-widget-item">
+                                <div className="checkbox-line">
+                                    <span>
+                                        {getLangText(param.replace('_', ' '))}
+                                    </span>
+                                    <input
+                                        readOnly
+                                        type="radio"
+                                        checked={param.indexOf(this.props.orderBy) > -1} />
+                                </div>
+                            </li>
                         );
                     })}
                 </DropdownButton>
@@ -89,4 +87,4 @@ let PieceListToolbarOrderWidget = React.createClass({
     }
 });
 
-export default PieceListToolbarOrderWidget;
\ No newline at end of file
+export default PieceListToolbarOrderWidget;
diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js
index 006d4e32..55987ee5 100644
--- a/js/components/ascribe_routes/proxy_handler.js
+++ b/js/components/ascribe_routes/proxy_handler.js
@@ -20,8 +20,8 @@ const WHEN_ENUM = ['loggedIn', 'loggedOut'];
 export function AuthRedirect({to, when}) {
     // validate `when`, must be contained in `WHEN_ENUM`.
     // Throw an error otherwise.
-    if(WHEN_ENUM.indexOf(when) === -1) {
-        let whenValues = WHEN_ENUM.join(', ');
+    if (WHEN_ENUM.indexOf(when) === -1) {
+        const whenValues = WHEN_ENUM.join(', ');
         throw new Error(`"when" must be one of: [${whenValues}] got "${when}" instead`);
     }
 
@@ -39,14 +39,14 @@ export function AuthRedirect({to, when}) {
 
         // and redirect if `true`.
         if (exprToValidate) {
-            window.setTimeout(() => history.replaceState(null, to, query));
+            window.setTimeout(() => history.replace({ query, pathname: to }));
             return true;
 
             // Otherwise there can also be the case that the backend
             // wants to redirect the user to a specific route when the user is logged out already
         } else if (!exprToValidate && when === 'loggedIn' && redirect) {
             delete query.redirect;
-            window.setTimeout(() => history.replaceState(null, '/' + redirect, query));
+            window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
             return true;
 
         } else if (!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {
diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js
index 39d515a3..109bbae7 100644
--- a/js/components/ascribe_slides_container/slides_container.js
+++ b/js/components/ascribe_slides_container/slides_container.js
@@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({
     // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
     nextSlide(additionalQueryParams) {
         const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
-        let nextSlide = slideNum + 1;
-        this.setSlideNum(nextSlide, additionalQueryParams);
+        this.setSlideNum(slideNum + 1, additionalQueryParams);
     },
 
     setSlideNum(nextSlideNum, additionalQueryParams = {}) {
-        let queryParams = Object.assign(this.props.location.query, additionalQueryParams);
-        queryParams.slide_num = nextSlideNum;
-        this.history.pushState(null, this.props.location.pathname, queryParams);
+        const { location: { pathname } } = this.props;
+        const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
+
+        this.history.push({ pathname, query });
     },
 
     // breadcrumbs are defined as attributes of the slides.
     // To extract them we have to read the DOM element's attributes
     extractBreadcrumbs() {
         const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
-        let breadcrumbs = [];
+        const breadcrumbs = [];
 
         React.Children.map(this.props.children, (child, i) => {
             if(child && i >= startFrom && child.props['data-slide-title']) {
@@ -179,4 +179,4 @@ const SlidesContainer = React.createClass({
     }
 });
 
-export default SlidesContainer;
\ No newline at end of file
+export default SlidesContainer;
diff --git a/js/components/ascribe_table/models/table_models.js b/js/components/ascribe_table/models/table_models.js
index b675d14e..99cf7e64 100644
--- a/js/components/ascribe_table/models/table_models.js
+++ b/js/components/ascribe_table/models/table_models.js
@@ -2,15 +2,15 @@
 
 export class ColumnModel {
     // ToDo: Add validation for all passed-in parameters
-    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) {
+    constructor({ transformFn, columnName = '', displayElement, displayType, rowWidth, canBeOrdered, transition, className = '' }) {
         this.transformFn = transformFn;
         this.columnName = columnName;
-        this.displayName = displayName;
+        this.displayElement = displayElement;
         this.displayType = displayType;
         this.rowWidth = rowWidth;
         this.canBeOrdered = canBeOrdered;
         this.transition = transition;
-        this.className = className ? className : '';
+        this.className = className;
     }
 }
 
@@ -28,7 +28,7 @@ export class ColumnModel {
  * our selfes, using this TransitionModel.
  */
 export class TransitionModel {
-    constructor(to, queryKey, valueKey, callback) {
+    constructor({ to, queryKey, valueKey, callback }) {
         this.to = to;
         this.queryKey = queryKey;
         this.valueKey = valueKey;
@@ -38,4 +38,4 @@ export class TransitionModel {
     toReactRouterLink(queryValue) {
         return '/' + this.to + '/' + queryValue;
     }
-}
\ No newline at end of file
+}
diff --git a/js/components/ascribe_table/table_header.js b/js/components/ascribe_table/table_header.js
index f807627b..78a31681 100644
--- a/js/components/ascribe_table/table_header.js
+++ b/js/components/ascribe_table/table_header.js
@@ -1,5 +1,5 @@
-'use strict';
 
+'use strict';
 import React from 'react';
 
 import TableHeaderItem from './table_header_item';
@@ -29,7 +29,7 @@ let TableHeader = React.createClass({
                             <TableHeaderItem
                                 className={column.className}
                                 key={i}
-                                displayName={column.displayName}
+                                displayElement={column.displayElement}
                                 columnName={columnName}
                                 canBeOrdered={canBeOrdered}
                                 orderAsc={this.props.orderAsc}
diff --git a/js/components/ascribe_table/table_header_item.js b/js/components/ascribe_table/table_header_item.js
index 8a4113ad..6116c26d 100644
--- a/js/components/ascribe_table/table_header_item.js
+++ b/js/components/ascribe_table/table_header_item.js
@@ -7,7 +7,7 @@ import TableHeaderItemCarret from './table_header_item_carret';
 let TableHeaderItem = React.createClass({
 
     propTypes: {
-        displayName: React.PropTypes.oneOfType([
+        displayElement: React.PropTypes.oneOfType([
             React.PropTypes.string,
             React.PropTypes.element
         ]).isRequired,
@@ -24,29 +24,31 @@ let TableHeaderItem = React.createClass({
     },
 
     render() {
-        if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
-            if(this.props.columnName === this.props.orderBy) {
+        const { canBeOrdered, changeOrder, className, columnName, displayElement, orderAsc, orderBy } = this.props;
+
+        if (canBeOrdered && changeOrder && orderAsc != null && orderBy) {
+            if (columnName === orderBy) {
                 return (
                     <th
-                        className={'ascribe-table-header-column ' + this.props.className}
+                        className={'ascribe-table-header-column ' + className}
                         onClick={this.changeOrder}>
-                        <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
+                        <span>{displayElement} <TableHeaderItemCarret orderAsc={orderAsc} /></span>
                     </th>
                 );
             } else {
                 return (
                     <th
-                        className={'ascribe-table-header-column ' + this.props.className}
+                        className={'ascribe-table-header-column ' + className}
                         onClick={this.changeOrder}>
-                        <span>{this.props.displayName}</span>
+                        <span>{displayElement}</span>
                     </th>
                 );
             }
         } else {
             return (
-                <th className={'ascribe-table-header-column ' + this.props.className}>
+                <th className={'ascribe-table-header-column ' + className}>
                     <span>
-                        {this.props.displayName}
+                        {displayElement}
                     </span>
                 </th>
             );
diff --git a/js/components/ascribe_table/table_item_acl_filtered.js b/js/components/ascribe_table/table_item_acl_filtered.js
index 22a28130..9ca91bcf 100644
--- a/js/components/ascribe_table/table_item_acl_filtered.js
+++ b/js/components/ascribe_table/table_item_acl_filtered.js
@@ -3,15 +3,15 @@
 import React from 'react';
 
 
-let TableItemAclFiltered = React.createClass({
+const TableItemAclFiltered = React.createClass({
     propTypes: {
         content: React.PropTypes.object,
-        notifications: React.PropTypes.string
+        notifications: React.PropTypes.array
     },
 
     render() {
-        var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
-        if (this.props.notifications && this.props.notifications.length > 0){
+        const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
+        if (this.props.notifications && this.props.notifications.length) {
             return (
                 <span>
                     {this.props.notifications[0].action_str}
@@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({
             );
         }
 
-        let filteredAcls = Object.keys(this.props.content).filter((key) => {
-            return availableAcls.indexOf(key) > -1 && this.props.content[key];
-        });
-
-        filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]);
+        const filteredAcls = Object.keys(this.props.content)
+            .filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key])
+            .map((acl) => acl.split('acl_')[1])
+            .join('/');
 
         return (
             <span>
-                {filteredAcls.join('/')}
+                {filteredAcls}
             </span>
         );
     }
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index f9ece359..1649479e 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -135,7 +135,8 @@ let PasswordResetForm = React.createClass({
     },
 
     handleSuccess() {
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
+
         const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index baf965b4..62407534 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -121,13 +121,13 @@ let PieceList = React.createClass({
     },
 
     componentDidUpdate() {
-        const { redirectTo, shouldRedirect } = this.props;
+        const { location: { query }, redirectTo, shouldRedirect } = this.props;
         const { unfilteredPieceListCount } = this.state;
 
         if (redirectTo && unfilteredPieceListCount === 0 &&
             (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0);
+            window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
         }
     },
 
@@ -180,15 +180,16 @@ let PieceList = React.createClass({
         }
     },
 
-    searchFor(searchTerm) {
-        this.loadPieceList({
-            page: 1,
-            search: searchTerm
-        });
-        this.history.pushState(null, this.props.location.pathname, {page: 1});
+    searchFor(search) {
+        const { location: { pathname } } = this.props;
+
+        this.loadPieceList({ search, page: 1 });
+        this.history.push({ pathname, query: { page: 1 } });
     },
 
-    applyFilterBy(filterBy){
+    applyFilterBy(filterBy) {
+        const { location: { pathname } } = this.props;
+
         this.setState({
             isFilterDirty: true
         });
@@ -212,7 +213,7 @@ let PieceList = React.createClass({
 
         // we have to redirect the user always to page one as it could be that there is no page two
         // for filtered pieces
-        this.history.pushState(null, this.props.location.pathname, {page: 1});
+        this.history.push({ pathname, query: { page: 1 } });
     },
 
     applyOrderBy(orderBy) {
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index b5fe976b..e855403a 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -73,7 +73,7 @@ let RegisterPiece = React.createClass( {
             this.state.filterBy
         );
 
-        this.history.pushState(null, `/pieces/${response.piece.id}`);
+        this.history.push(`/pieces/${response.piece.id}`);
     },
 
     getSpecifyEditions() {
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index 2f5954ac..e4bcb810 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -105,7 +105,7 @@ const PRRegisterPieceForm = React.createClass({
                         GlobalNotificationActions.appendGlobalNotification(notificationMessage);
                     });
             })
-            .then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`))
+            .then(() => this.history.push(`/pieces/${this.state.piece.id}`))
             .catch((err) => {
                 const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
                                         getLangText(' Please contact support@ascribe.io');
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
index 039a4b45..2ac1d19a 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
@@ -11,6 +11,7 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 import PrizeActions from '../../simple_prize/actions/prize_actions';
 import PrizeStore from '../../simple_prize/stores/prize_store';
 
+import { omitFromObject } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
@@ -34,12 +35,15 @@ const PRLanding = React.createClass({
         const { location } = this.props;
 
         PrizeStore.listen(this.onChange);
+
+        UserActions.fetchCurrentUser();
         PrizeActions.fetchPrize();
 
         if (location.query.redirect) {
-            let queryCopy = JSON.parse(JSON.stringify(location.query));
-            delete queryCopy.redirect;
-            window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy));
+            window.setTimeout(() => this.history.replace({
+                pathname: `/${location.query.redirect}`,
+                query: omitFromObject(location.query, ['redirect'])
+            }));
         }
     },
 
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
index 8f0479dc..46c34f6c 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
@@ -32,7 +32,7 @@ const PRRegisterPiece = React.createClass({
         if (currentUser && currentUser.email) {
             const submittedPieceId = getCookie(currentUser.email);
             if (submittedPieceId) {
-                this.history.pushState(null, `/pieces/${submittedPieceId}`);
+                this.history.push(`/pieces/${submittedPieceId}`);
             }
         }
     },
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js b/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js
index 04ff8ce6..f81c4539 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js
@@ -17,7 +17,7 @@ export function AuthPrizeRoleRedirect({ to, when }) {
             .reduce((a, b) => a || b);
 
         if (exprToValidate) {
-            window.setTimeout(() => history.replaceState(null, to, query));
+            window.setTimeout(() => history.replace({ query, pathname: to }));
             return true;
         } else {
             return false;
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
index 5c9af8b1..3b207776 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
@@ -33,53 +33,61 @@ let WalletPieceContainer = React.createClass({
     },
 
     render() {
-        if (this.props.piece && this.props.piece.id) {
+        const {
+            children,
+            currentUser,
+            handleDeleteSuccess,
+            loadPiece,
+            piece,
+            submitButtonType } = this.props;
+
+        if (piece && piece.id) {
             return (
                 <Piece
-                    piece={this.props.piece}
-                    loadPiece={this.props.loadPiece}
+                    piece={piece}
+                    currentUser={currentUser}
                     header={
                         <div className="ascribe-detail-header">
                             <hr style={{marginTop: 0}}/>
-                            <h1 className="ascribe-detail-title">{this.props.piece.title}</h1>
-                            <DetailProperty label="BY" value={this.props.piece.artist_name} />
-                            <DetailProperty label="DATE" value={Moment(this.props.piece.date_created, 'YYYY-MM-DD').year()} />
+                            <h1 className="ascribe-detail-title">{piece.title}</h1>
+                            <DetailProperty label="BY" value={piece.artist_name} />
+                            <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
                             <hr/>
                         </div>
                     }
                     subheader={
                         <div className="ascribe-detail-header">
-                            <DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } />
-                            <DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} />
+                            <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
+                            <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
                             <hr/>
                         </div>
                     }>
                     <WalletActionPanel
-                        piece={this.props.piece}
-                        currentUser={this.props.currentUser}
-                        loadPiece={this.props.loadPiece}
-                        handleDeleteSuccess={this.props.handleDeleteSuccess}
-                        submitButtonType={this.props.submitButtonType}/>
+                        piece={piece}
+                        currentUser={currentUser}
+                        loadPiece={loadPiece}
+                        handleDeleteSuccess={handleDeleteSuccess}
+                        submitButtonType={submitButtonType}/>
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
-                        show={this.props.piece.loan_history && this.props.piece.loan_history.length > 0}>
+                        show={piece.loan_history && piece.loan_history.length > 0}>
                         <HistoryIterator
-                            history={this.props.piece.loan_history}/>
+                            history={piece.loan_history}/>
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Notes')}
-                        show={!!(this.props.currentUser.username || this.props.piece.public_note)}>
+                        show={!!(currentUser.username || piece.public_note)}>
                         <Note
-                            id={() => {return {'id': this.props.piece.id}; }}
+                            id={() => {return {'id': piece.id}; }}
                             label={getLangText('Personal note (private)')}
-                            defaultValue={this.props.piece.private_note || null}
+                            defaultValue={piece.private_note || null}
                             placeholder={getLangText('Enter your comments ...')}
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_piece}
-                            currentUser={this.props.currentUser}/>
+                            currentUser={currentUser}/>
                     </CollapsibleParagraph>
-                    {this.props.children}
+                    {children}
                 </Piece>
             );
         } else {
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
index 28fc34a5..d0315979 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
@@ -86,7 +86,7 @@ let CylandPieceContainer = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     render() {
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index c5370698..7739a159 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -117,7 +117,7 @@ let CylandRegisterPiece = React.createClass({
 
         PieceActions.fetchOne(this.state.piece.id);
 
-        this.history.pushState(null, `/pieces/${this.state.piece.id}`);
+        this.history.push(`/pieces/${this.state.piece.id}`);
     },
 
     // We need to increase the step to lock the forms that are already filled out
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
index 2bbe15e4..b2921179 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
@@ -115,7 +115,7 @@ let IkonotvContractNotifications = React.createClass({
         NotificationActions.flushContractAgreementListNotifications();
         NotificationActions.fetchContractAgreementListNotifications();
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     handleDeny() {
@@ -129,7 +129,7 @@ let IkonotvContractNotifications = React.createClass({
         const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     getCopyrightAssociationForm(){
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
index 68d5a3e7..68e3c2eb 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
@@ -95,7 +95,7 @@ let IkonotvPieceContainer = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     render() {
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index d72080a7..20a82db2 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -94,7 +94,7 @@ let IkonotvRegisterPiece = React.createClass({
             PieceActions.updatePiece(response.piece);
         }
         if (!this.canSubmit()) {
-            this.history.pushState(null, '/collection');
+            this.history.push('/collection');
         }
         else {
             this.incrementStep();
@@ -125,7 +125,7 @@ let IkonotvRegisterPiece = React.createClass({
         this.refreshPieceList();
 
         PieceActions.fetchOne(this.state.piece.id);
-        this.history.pushState(null, `/pieces/${this.state.piece.id}`);
+        this.history.push(`/pieces/${this.state.piece.id}`);
     },
 
     // We need to increase the step to lock the forms that are already filled out
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index 927fed62..88de2026 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -74,7 +74,7 @@ let MarketRegisterPiece = React.createClass({
     handleAdditionalDataSuccess() {
         this.refreshPieceList();
 
-        this.history.pushState(null, '/collection');
+        this.history.push('/collection');
     },
 
     // We need to increase the step to lock the forms that are already filled out
diff --git a/js/history.js b/js/history.js
index 903f2b73..4e8c03c7 100644
--- a/js/history.js
+++ b/js/history.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import useBasename from 'history/lib/useBasename';
+import useQueries from 'history/lib/useQueries';
 import createBrowserHistory from 'history/lib/createBrowserHistory';
 import AppConstants from './constants/application_constants';
 
@@ -8,6 +9,6 @@ import AppConstants from './constants/application_constants';
 // Remove the trailing slash if present
 let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
 
-export default useBasename(createBrowserHistory)({
+export default useBasename(useQueries(createBrowserHistory))({
     basename: baseUrl
 });
diff --git a/js/third_party/notifications.js b/js/third_party/notifications.js
index 9e33cdaf..8a3f478a 100644
--- a/js/third_party/notifications.js
+++ b/js/third_party/notifications.js
@@ -30,7 +30,7 @@ class NotificationsHandler {
                         console.log('Contractagreement notifications loaded');
                         this.loaded = true;
 
-                        history.pushState(null, '/contract_notifications');
+                        history.push('/contract_notifications');
                     }
                 }
             );
diff --git a/js/utils/url_utils.js b/js/utils/url_utils.js
index 86c8dfc5..94584026 100644
--- a/js/utils/url_utils.js
+++ b/js/utils/url_utils.js
@@ -2,7 +2,7 @@
 
 import camelCase from 'camelcase';
 import decamelize from 'decamelize';
-import qs from 'qs';
+import queryString from 'query-string';
 
 import { sanitize } from './general_utils';
 
@@ -36,8 +36,7 @@ export function argsToQueryParams(obj) {
             queryParamObj[decamelize(key)] = sanitizedObj[key];
         });
 
-    // Use bracket arrayFormat as history.js and react-router use it
-    return '?' + qs.stringify(queryParamObj, { arrayFormat: 'brackets' });
+    return '?' + queryString.stringify(queryParamObj);
 }
 
 /**
@@ -56,13 +55,13 @@ export function getCurrentQueryParams() {
  * @return {object}                  Query params dictionary
  */
 export function queryParamsToArgs(queryParamString) {
-    const qsQueryParamObj = qs.parse(queryParamString);
+    const queryParamObj = queryString.parse(queryParamString);
     const camelCaseParamObj = {};
 
     Object
-        .keys(qsQueryParamObj)
+        .keys(queryParamObj)
         .forEach((key) => {
-            camelCaseParamObj[camelCase(key)] = qsQueryParamObj[key];
+            camelCaseParamObj[camelCase(key)] = queryParamObj[key];
         });
 
     return camelCaseParamObj;
diff --git a/package.json b/package.json
index 13bdfd46..ee1456fb 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.4",
     "harmonize": "^1.4.2",
-    "history": "^1.13.1",
+    "history": "1.17.0",
     "invariant": "^2.1.1",
     "isomorphic-fetch": "^2.0.2",
     "jest-cli": "^0.4.0",
@@ -76,12 +76,12 @@
     "object-assign": "^2.0.0",
     "opn": "^3.0.2",
     "q": "^1.4.1",
-    "qs": "^4.0.0",
+    "query-string": "^3.0.0",
     "raven-js": "^1.1.19",
     "react": "0.13.2",
     "react-bootstrap": "0.25.1",
     "react-datepicker": "^0.12.0",
-    "react-router": "1.0.0",
+    "react-router": "1.0.3",
     "react-router-bootstrap": "^0.19.0",
     "react-star-rating": "~1.3.2",
     "react-textarea-autosize": "^2.5.2",

From eafa675760a142f9bddba37a800ef9ef7255ec0b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 17:57:35 +0100
Subject: [PATCH 061/197] Small code style changes

---
 .../ascribe_detail/media_container.js         | 20 +++++++------
 .../ascribe_detail/piece_container.js         | 28 ++++++++-----------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index e4270132..e8d9d34e 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -23,9 +23,10 @@ const EMBED_IFRAME_HEIGHT = {
 
 let MediaContainer = React.createClass({
     propTypes: {
-        content: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
-        refreshObject: React.PropTypes.func
+        content: React.PropTypes.object.isRequired,
+        refreshObject: React.PropTypes.func.isRequired,
+
+        currentUser: React.PropTypes.object
     },
 
     getInitialState() {
@@ -35,13 +36,14 @@ let MediaContainer = React.createClass({
     },
 
     componentDidMount() {
-        if (!this.props.content.digital_work) {
+        const { content, refreshObject } = this.props;
+        if (!content.digital_work) {
             return;
         }
 
-        const isEncoding = this.props.content.digital_work.isEncoding;
-        if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
-            let timerId = window.setInterval(this.props.refreshObject, 10000);
+        const isEncoding = content.digital_work.isEncoding;
+        if (content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
+            const timerId = window.setInterval(refreshObject, 10000);
             this.setState({timerId: timerId});
         }
     },
@@ -93,7 +95,7 @@ let MediaContainer = React.createClass({
                             {'<iframe width="560" height="' + height + '" src="https://embed.ascribe.io/content/'
                                 + content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'}
                         </pre>
-                    }/>
+                    } />
             );
         }
         return (
@@ -120,7 +122,7 @@ let MediaContainer = React.createClass({
                             className="ascribe-margin-1px"
                             href={content.digital_work.url}
                             target="_blank">
-                            {getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
+                            {getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download" />
                         </Button>
                     </AclProxy>
                     {embed}
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 8d63e31f..93bbd90b 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -7,39 +7,35 @@ import Moment from 'moment';
 import ReactError from '../../mixins/react_error';
 import { ResourceNotFoundError } from '../../models/errors';
 
+import EditionListActions from '../../actions/edition_list_actions';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 import PieceActions from '../../actions/piece_actions';
 import PieceStore from '../../stores/piece_store';
 
 import PieceListActions from '../../actions/piece_list_actions';
 import PieceListStore from '../../stores/piece_list_store';
 
-import UserActions from '../../actions/user_actions';
-import UserStore from '../../stores/user_store';
-
-import EditionListActions from '../../actions/edition_list_actions';
-
-import Piece from './piece';
-import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
 import FurtherDetails from './further_details';
-
 import DetailProperty from './detail_property';
-import LicenseDetail from './license_detail';
 import HistoryIterator from './history_iterator';
+import LicenseDetail from './license_detail';
+import Note from './note';
+import Piece from './piece';
 
 import AclButtonList from './../ascribe_buttons/acl_button_list';
-import CreateEditionsForm from '../ascribe_forms/create_editions_form';
+import AclInformation from '../ascribe_buttons/acl_information';
 import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
 import DeleteButton from '../ascribe_buttons/delete_button';
 
-import AclInformation from '../ascribe_buttons/acl_information';
-import AclProxy from '../acl_proxy';
+import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
 
+import CreateEditionsForm from '../ascribe_forms/create_editions_form';
 import ListRequestActions from '../ascribe_forms/list_form_request_actions';
 
-import GlobalNotificationModel from '../../models/global_notification_model';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-
-import Note from './note';
+import AclProxy from '../acl_proxy';
 
 import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';

From 58f57af932c44d3555c32245c225ce25ca54e653 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 18:07:52 +0100
Subject: [PATCH 062/197] Remove unused props in LoginForm

---
 js/components/ascribe_forms/form_login.js     | 41 +++++--------------
 js/components/login_container.js              | 20 +--------
 .../components/prize_login_container.js       |  7 ++--
 3 files changed, 15 insertions(+), 53 deletions(-)

diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
index a604850d..04292bff 100644
--- a/js/components/ascribe_forms/form_login.js
+++ b/js/components/ascribe_forms/form_login.js
@@ -6,7 +6,6 @@ import { History } from 'react-router';
 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 './form';
@@ -23,8 +22,6 @@ let LoginForm = React.createClass({
     propTypes: {
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
-        redirectOnLoggedIn: React.PropTypes.bool,
-        redirectOnLoginSuccess: React.PropTypes.bool,
         location: React.PropTypes.object
     },
 
@@ -32,40 +29,24 @@ let LoginForm = React.createClass({
 
     getDefaultProps() {
         return {
-            headerMessage: getLangText('Enter ascribe'),
-            submitMessage: getLangText('Log in'),
-            redirectOnLoggedIn: true,
-            redirectOnLoginSuccess: true
+            headerMessage: getLangText('Enter') + ' ascribe',
+            submitMessage: getLangText('Log in')
         };
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    handleSuccess({ success }){
-        let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
+    handleSuccess({ success }) {
+        const notification = new GlobalNotificationModel('Login successful', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        if(success) {
+        if (success) {
             UserActions.fetchCurrentUser(true);
         }
     },
 
     render() {
-        let email = this.props.location.query.email || null;
+        const { headerMessage, submitMessage, location: { query: { email: emailQuery } } } = this.props;
+        console.log(emailQuery);
+
         return (
             <Form
                 className="ascribe-form-bordered"
@@ -77,7 +58,7 @@ let LoginForm = React.createClass({
                     <button
                         type="submit"
                         className="btn btn-default btn-wide">
-                        {this.props.submitMessage}
+                        {submitMessage}
                     </button>}
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
@@ -85,7 +66,7 @@ let LoginForm = React.createClass({
                     </span>
                     }>
                 <div className="ascribe-form-header">
-                    <h3>{this.props.headerMessage}</h3>
+                    <h3>{headerMessage}</h3>
                 </div>
                 <Property
                     name='email'
@@ -93,7 +74,7 @@ let LoginForm = React.createClass({
                     <input
                         type="email"
                         placeholder={getLangText('Enter your email')}
-                        defaultValue={email}
+                        defaultValue={emailQuery}
                         required/>
                 </Property>
                 <Property
diff --git a/js/components/login_container.js b/js/components/login_container.js
index 2ab013e8..00c89328 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -11,11 +11,6 @@ import { setDocumentTitle } from '../utils/dom_utils';
 
 let LoginContainer = React.createClass({
     propTypes: {
-        message: React.PropTypes.string,
-        redirectOnLoggedIn: React.PropTypes.bool,
-        redirectOnLoginSuccess: React.PropTypes.bool,
-        onLogin: React.PropTypes.func,
-
         // Provided from AscribeApp
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
@@ -24,25 +19,12 @@ let LoginContainer = React.createClass({
         location: React.PropTypes.object
     },
 
-    getDefaultProps() {
-        return {
-            message: getLangText('Enter') + ' ascribe',
-            redirectOnLoggedIn: true,
-            redirectOnLoginSuccess: true
-        };
-    },
-
     render() {
         setDocumentTitle(getLangText('Log in'));
 
         return (
             <div className="ascribe-login-wrapper">
-                <LoginForm
-                    redirectOnLoggedIn={this.props.redirectOnLoggedIn}
-                    redirectOnLoginSuccess={this.props.redirectOnLoginSuccess}
-                    message={this.props.message}
-                    onLogin={this.props.onLogin}
-                    location={this.props.location}/>
+                <LoginForm location={this.props.location} />
                 <div className="ascribe-login-text">
                     {getLangText('Not an ascribe user')}&#63; <Link to="/signup">{getLangText('Sign up')}...</Link><br/>
                     {getLangText('Forgot my password')}&#63; <Link to="/password_reset">{getLangText('Rescue me')}...</Link>
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
index 7dd25bea..62ef5adb 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_login_container.js
@@ -26,12 +26,11 @@ let LoginContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <LoginForm
                     headerMessage={getLangText('Log in with ascribe')}
-                    location={this.props.location}/>
-                <div
-                    className="ascribe-login-text">
+                    location={this.props.location} />
+                <div className="ascribe-login-text">
                     {getLangText('I\'m not a user') + ' '}
                     <Link to="/signup">{getLangText('Sign up...')}</Link>
-                    <br/>
+                    <br />
 
                     {getLangText('I forgot my password') + ' '}
                     <Link to="/password_reset">{getLangText('Rescue me...')}</Link>

From 1c4ca0d15218bd80f4ead0de6fa8269e0c495bfc Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 18:16:46 +0100
Subject: [PATCH 063/197] Change RegisterPieceForm and parents for loading
 UserStore from top level app

---
 .../ascribe_forms/form_register_piece.js      | 58 +++++++------------
 js/components/register_piece.js               |  3 +-
 .../cyland/cyland_register_piece.js           |  3 +-
 .../ikonotv/ikonotv_register_piece.js         | 10 ++--
 .../market/market_register_piece.js           |  2 +
 5 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 596f8a56..35059d5d 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -2,9 +2,6 @@
 
 import React from 'react';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
 import Form from './form';
 import Property from './property';
 import InputFineUploader from './input_fineuploader';
@@ -16,22 +13,24 @@ import AppConstants from '../../constants/application_constants';
 import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
-import { mergeOptions } from '../../utils/general_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
 
 let RegisterPieceForm = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func,
-        isFineUploaderActive: React.PropTypes.bool,
-        isFineUploaderEditable: React.PropTypes.bool,
         enableLocalHashing: React.PropTypes.bool,
         enableSeparateThumbnail: React.PropTypes.bool,
+        isFineUploaderActive: React.PropTypes.bool,
+        isFineUploaderEditable: React.PropTypes.bool,
+        handleSuccess: React.PropTypes.func,
 
         // For this form to work with SlideContainer, we sometimes have to disable it
         disabled: React.PropTypes.bool,
+
         location: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
@@ -48,26 +47,10 @@ let RegisterPieceForm = React.createClass({
         };
     },
 
-    getInitialState(){
-        return mergeOptions(
-            {
-                digitalWorkFile: null
-            },
-            UserStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+    getInitialState() {
+        return {
+            digitalWorkFile: null
+        }
     },
 
     /**
@@ -129,16 +112,17 @@ let RegisterPieceForm = React.createClass({
     },
 
     render() {
-        const { disabled,
-                handleSuccess,
-                submitMessage,
-                headerMessage,
-                isFineUploaderActive,
-                isFineUploaderEditable,
-                location,
-                children,
-                enableLocalHashing } = this.props;
-        const { currentUser} = this.state;
+        const {
+            children,
+            currentUser,
+            disabled,
+            enableLocalHashing,
+            handleSuccess,
+            headerMessage,
+            isFineUploaderActive,
+            isFineUploaderEditable,
+            location,
+            submitMessage } = this.props;
 
         const profileHashLocally = currentUser && currentUser.profile ? currentUser.profile.hash_locally : false;
         const hashLocally = profileHashLocally && enableLocalHashing;
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index e855403a..49f191c7 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -102,8 +102,7 @@ let RegisterPiece = React.createClass( {
                     <RegisterPieceForm
                         {...this.props}
                         isFineUploaderActive={true}
-                        handleSuccess={this.handleSuccess}
-                        location={this.props.location}>
+                        handleSuccess={this.handleSuccess}>
                         {this.props.children}
                         {this.getSpecifyEditions()}
                     </RegisterPieceForm>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index 7739a159..111f1290 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -183,13 +183,14 @@ let CylandRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
+                                currentUser={currentUser}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Submit to Cyland Archive')}
                                 submitMessage={getLangText('Submit')}
                                 isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={location}/>
+                                location={location} />
                         </Col>
                     </Row>
                 </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index 20a82db2..cd11445a 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -219,7 +219,8 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     render() {
-        const { pageExitWarning } = this.state;
+        const { currentUser, location } = this.props;
+        const { pageExitWarning, step } = this.state;
 
         return (
             <SlidesContainer
@@ -229,19 +230,20 @@ let IkonotvRegisterPiece = React.createClass({
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
                 }}
-                location={this.props.location}
+                location={location}
                 pageExitWarning={pageExitWarning}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
-                                disabled={this.state.step > 0}
+                                currentUser={currentUser}
+                                disabled={step > 0}
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Register work')}
                                 submitMessage={getLangText('Register')}
                                 isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={this.props.location} />
+                                location={location} />
                         </Col>
                     </Row>
                 </div>
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index 88de2026..381835e2 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -107,6 +107,7 @@ let MarketRegisterPiece = React.createClass({
 
     render() {
         const {
+            currentUser,
             location,
             whitelabel: {
                 name: whitelabelName = 'Market'
@@ -128,6 +129,7 @@ let MarketRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
+                                currentUser={currentUser}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
                                 headerMessage={getLangText('Consign to %s', whitelabelName)}

From d867a3d9c118d618903e06ccc433b66d7b6855dc Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 18:24:55 +0100
Subject: [PATCH 064/197] Change SignupForm for loading UserStore from top
 level app

---
 js/components/ascribe_forms/form_login.js  |  6 ++-
 js/components/ascribe_forms/form_signup.js | 60 +++++++++-------------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
index 04292bff..86d94456 100644
--- a/js/components/ascribe_forms/form_login.js
+++ b/js/components/ascribe_forms/form_login.js
@@ -44,8 +44,10 @@ let LoginForm = React.createClass({
     },
 
     render() {
-        const { headerMessage, submitMessage, location: { query: { email: emailQuery } } } = this.props;
-        console.log(emailQuery);
+        const {
+            headerMessage,
+            location: { query: { email: emailQuery } },
+            submitMessage } = this.props;
 
         return (
             <Form
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 22f3e120..5d4c57aa 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -3,9 +3,6 @@
 import React from 'react';
 import { History } from 'react-router';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
@@ -24,8 +21,12 @@ let SignupForm = React.createClass({
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
-        children: React.PropTypes.element,
-        location: React.PropTypes.object
+        location: React.PropTypes.object,
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element,
+            React.PropTypes.string
+        ])
     },
 
     mixins: [History],
@@ -37,27 +38,11 @@ let SignupForm = React.createClass({
         };
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     handleSuccess(response) {
         if (response.user) {
-            let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
+            const notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
             GlobalNotificationActions.appendGlobalNotification(notification);
-            
+
             // Refactor this to its own component
             this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
         } else {
@@ -66,18 +51,20 @@ let SignupForm = React.createClass({
     },
 
     getFormData() {
-        if (this.props.location.query.token){
-            return {token: this.props.location.query.token};
-        }
-        return null;
+        const { token } = this.props.location.query;
+        return token ? { token } : null;
     },
 
     render() {
-        let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
-            getLangText('This password is securing your digital property like a bank account') + '.\n ' +
-            getLangText('Store it in a safe place') + '!';
+        const {
+            children,
+            headerMessage,
+            location: { query: { email: emailQuery } },
+            submitMessage } = this.props;
 
-        let email = this.props.location.query.email || null;
+        const tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
+                                getLangText('This password is securing your digital property like a bank account') + '.\n ' +
+                                getLangText('Store it in a safe place') + '!';
 
         return (
             <Form
@@ -88,15 +75,16 @@ let SignupForm = React.createClass({
                 handleSuccess={this.handleSuccess}
                 buttons={
                     <button type="submit" className="btn btn-default btn-wide">
-                        {this.props.submitMessage}
-                    </button>}
+                        {submitMessage}
+                    </button>
+                }
                 spinner={
                     <span className="btn btn-default btn-wide btn-spinner">
                         <AscribeSpinner color="dark-blue" size="md" />
                     </span>
-                    }>
+                }>
                 <div className="ascribe-form-header">
-                    <h3>{this.props.headerMessage}</h3>
+                    <h3>{headerMessage}</h3>
                 </div>
                 <Property
                     name='email'
@@ -128,7 +116,7 @@ let SignupForm = React.createClass({
                         autoComplete="on"
                         required/>
                 </Property>
-                {this.props.children}
+                {children}
                 <Property
                     name="terms"
                     className="ascribe-property-collapsible-toggle"

From 9059ca184a87068ee0040272267240329b25f9f0 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 18:26:39 +0100
Subject: [PATCH 065/197] Remove previously missed imports from
 ContractSettings

---
 js/components/ascribe_settings/contract_settings.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 500f1811..e825e4b6 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -8,12 +8,6 @@ import CreateContractForm from '../ascribe_forms/form_create_contract';
 import ContractListStore from '../../stores/contract_list_store';
 import ContractListActions from '../../actions/contract_list_actions';
 
-import UserStore from '../../stores/user_store';
-import UserActions from '../../actions/user_actions';
-
-import WhitelabelStore from '../../stores/whitelabel_store';
-import WhitelabelActions from '../../actions/whitelabel_actions';
-
 import ActionPanel from '../ascribe_panel/action_panel';
 import ContractSettingsUpdateButton from './contract_settings_update_button';
 

From d4064ee83ac007bad7089aeb21eae159c27f3ff4 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 18:41:07 +0100
Subject: [PATCH 066/197] Change Header and parents for loading UserStore from
 top level app

---
 js/components/ascribe_app.js                  |  5 +-
 js/components/header.js                       | 95 +++++++------------
 .../prize/portfolioreview/pr_app.js           | 13 ++-
 .../prize/simple_prize/prize_app.js           | 12 ++-
 js/components/whitelabel/wallet/wallet_app.js | 10 +-
 5 files changed, 62 insertions(+), 73 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index bf1ac2ec..369bf744 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -55,7 +55,10 @@ let AscribeApp = React.createClass({
 
         return (
             <div className="container ascribe-default-app">
-                <Header routes={routes} />
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
                 <AppRouteWrapper
                     currentUser={currentUser}
                     whitelabel={whitelabel}>
diff --git a/js/components/header.js b/js/components/header.js
index ed4a9a3d..fcc19e31 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -14,47 +14,25 @@ import NavItem from 'react-bootstrap/lib/NavItem';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import AclProxy from './acl_proxy';
-
 import EventActions from '../actions/event_actions';
 
-import UserActions from '../actions/user_actions';
-import UserStore from '../stores/user_store';
-
-import WhitelabelActions from '../actions/whitelabel_actions';
-import WhitelabelStore from '../stores/whitelabel_store';
-
+import AclProxy from './acl_proxy';
 import HeaderNotifications from './header_notification';
-
 import HeaderNotificationDebug from './header_notification_debug';
-
 import NavRoutesLinks from './nav_routes_links';
 
-import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
-
 import { constructHead } from '../utils/dom_utils';
 
 
 let Header = React.createClass({
     propTypes: {
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            WhitelabelStore.getState(),
-            UserStore.getState()
-        );
+        currentUser: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+        whitelabel: React.PropTypes.object.isRequired
     },
 
     componentDidMount() {
-        UserStore.listen(this.onChange);
-        UserActions.fetchCurrentUser.defer();
-
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel.defer();
-
         // react-bootstrap 0.25.1 has a bug in which it doesn't
         // close the mobile expanded navigation after a click by itself.
         // To get rid of this, we set the state of the component ourselves.
@@ -62,13 +40,11 @@ let Header = React.createClass({
     },
 
     componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
         //history.unlisten(this.onRouteChange);
     },
 
     getLogo() {
-        const { whitelabel } = this.state;
+        const { whitelabel } = this.props;
 
         if (whitelabel.head) {
             constructHead(whitelabel.head);
@@ -80,19 +56,19 @@ let Header = React.createClass({
                     <img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
                 </Link>
             );
+        } else {
+            return (
+                <span>
+                    <Link className="icon-ascribe-logo" to="/collection"/>
+                </span>
+            );
         }
-
-        return (
-            <span>
-                <Link className="icon-ascribe-logo" to="/collection"/>
-            </span>
-        );
     },
 
     getPoweredBy() {
         return (
             <AclProxy
-                aclObject={this.state.whitelabel}
+                aclObject={this.props.whitelabel}
                 aclName="acl_view_powered_by">
                     <li>
                         <a className="pull-right ascribe-powered-by" href="https://www.ascribe.io/" target="_blank">
@@ -104,10 +80,6 @@ let Header = React.createClass({
         );
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     onMenuItemClick() {
         /*
         This is a hack to make the dropdown close after clicking on an item
@@ -143,59 +115,61 @@ let Header = React.createClass({
     },
 
     render() {
+        const { currentUser, routes } = this.props;
         let account;
         let signup;
         let navRoutesLinks;
-        if (this.state.currentUser.username){
+
+        if (currentUser.username) {
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
                     eventKey="1"
-                    title={this.state.currentUser.username}>
+                    title={currentUser.username}>
                     <LinkContainer
                         to="/settings"
                         onClick={this.onMenuItemClick}>
-                        <MenuItem
-                            eventKey="2">
+                        <MenuItem eventKey="2">
                             {getLangText('Account Settings')}
                         </MenuItem>
                     </LinkContainer>
                     <AclProxy
-                        aclObject={this.state.currentUser.acl}
+                        aclObject={currentUser.acl}
                         aclName="acl_view_settings_contract">
                         <LinkContainer
                             to="/contract_settings"
                             onClick={this.onMenuItemClick}>
-                            <MenuItem
-                                eventKey="2">
+                            <MenuItem eventKey="2">
                                 {getLangText('Contract Settings')}
                             </MenuItem>
                         </LinkContainer>
                     </AclProxy>
                     <MenuItem divider />
-                    <LinkContainer
-                        to="/logout">
-                        <MenuItem
-                            eventKey="3">
+                    <LinkContainer to="/logout">
+                        <MenuItem eventKey="3">
                             {getLangText('Log out')}
                         </MenuItem>
                     </LinkContainer>
                 </DropdownButton>
             );
-            navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
-        }
-        else {
+
+            navRoutesLinks = (
+                <NavRoutesLinks
+                    routes={routes}
+                    userAcl={currentUser.acl}
+                    navbar
+                    right />
+            );
+        } else {
             account = (
-                <LinkContainer
-                    to="/login">
+                <LinkContainer to="/login">
                     <NavItem>
                         {getLangText('LOGIN')}
                     </NavItem>
                 </LinkContainer>
             );
             signup = (
-                <LinkContainer
-                    to="/signup">
+                <LinkContainer to="/signup">
                     <NavItem>
                         {getLangText('SIGNUP')}
                     </NavItem>
@@ -211,13 +185,12 @@ let Header = React.createClass({
                     toggleNavKey={0}
                     fixedTop={true}
                     className="hidden-print">
-                    <CollapsibleNav
-                        eventKey={0}>
+                    <CollapsibleNav eventKey={0}>
                         <Nav navbar left>
                             {this.getPoweredBy()}
                         </Nav>
                         <Nav navbar right>
-                            <HeaderNotificationDebug show={false}/>
+                            <HeaderNotificationDebug show={false} />
                             {account}
                             {signup}
                         </Nav>
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index f6364bc8..85091a8b 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -54,8 +54,7 @@ let PRApp = React.createClass({
     },
 
     render() {
-        const { children, history, routes } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
 
         // Add the current user and whitelabel settings to all child routes
@@ -69,10 +68,16 @@ let PRApp = React.createClass({
         let style = {};
         let header;
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
-            header = <Hero currentUser={currentUser} />;
+            header = (<Hero currentUser={currentUser} />);
             style = { paddingTop: '0 !important' };
         } else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
-            header = <Header routes={routes} />;
+            header = (
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel}
+                />
+            );
         } else {
             style = { paddingTop: '0 !important' };
         }
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index a5cea483..e9083428 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -53,8 +53,7 @@ let PrizeApp = React.createClass({
     },
 
     render() {
-        const { history, routes, children } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
@@ -64,9 +63,14 @@ let PrizeApp = React.createClass({
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if (!path || history.isActive('/login') || history.isActive('/signup')) {
-            header = <Hero />;
+            header = (<Hero />);
         } else {
-            header = <Header routes={routes}/>;
+            header = (
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
+            );
         }
 
         return (
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index e35da2da..783bb2ab 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -52,8 +52,7 @@ let WalletApp = React.createClass({
     },
 
     render() {
-        const { history, routes, children } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
@@ -66,7 +65,12 @@ let WalletApp = React.createClass({
             && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
-            header = (<Header routes={routes} />);
+            header = (
+                <Header
+                    currentUser={currentUser}
+                    routes={routes}
+                    whitelabel={whitelabel} />
+            );
         }
 
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,

From 80091747874acaa038f244771f314f978f3a757f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 19:06:50 +0100
Subject: [PATCH 067/197] Change AccordionListItems and parents for loading
 UserStore from top level app

---
 .../accordion_list_item.js                    | 20 ++--
 .../accordion_list_item_piece.js              |  5 +-
 .../accordion_list_item_wallet.js             |  7 +-
 js/components/piece_list.js                   |  7 +-
 .../accordion_list_item_prize.js              | 99 +++++++++----------
 .../cyland_accordion_list_item.js             | 55 +++++------
 .../ikonotv_accordion_list_item.js            | 74 +++++++-------
 7 files changed, 127 insertions(+), 140 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
index 38cb77b1..4cc99de0 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -21,16 +21,16 @@ let AccordionListItem = React.createClass({
     },
 
     render() {
-        const { linkData,
-                className,
-                thumbnail,
-                heading,
-                subheading,
-                subsubheading,
-                buttons,
-                badge,
-                children } = this.props;
-
+        const {
+            linkData,
+            className,
+            thumbnail,
+            heading,
+            subheading,
+            subsubheading,
+            buttons,
+            badge,
+            children } = this.props;
 
         return (
             <div className="row">
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
index 9f876388..3a21c2ea 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
@@ -34,11 +34,10 @@ let AccordionListItemPiece = React.createClass({
     },
 
     getLinkData() {
-        let { piece } = this.props;
+        const { piece } = this.props;
 
-        if(piece && piece.first_edition) {
+        if (piece && piece.first_edition) {
             return `/editions/${piece.first_edition.bitcoin_id}`;
-
         } else {
             return `/pieces/${piece.id}`;
         }
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index a8cab166..638e9bb3 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -29,8 +29,9 @@ import { mergeOptions } from '../../utils/general_utils';
 
 let AccordionListItemWallet = React.createClass({
     propTypes: {
+        content: React.PropTypes.object.isRequired,
+
         className: React.PropTypes.string,
-        content: React.PropTypes.object,
         thumbnailPlaceholder: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
@@ -62,8 +63,8 @@ let AccordionListItemWallet = React.createClass({
         this.setState(state);
     },
 
-    getGlyphicon(){
-        if ((this.props.content.notifications && this.props.content.notifications.length > 0)){
+    getGlyphicon() {
+        if (this.props.content.notifications && this.props.content.notifications.length){
             return (
                 <OverlayTrigger
                     delay={500}
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 62407534..4a4663bb 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -325,13 +325,14 @@ let PieceList = React.createClass({
                     page={this.state.page}
                     pageSize={this.state.pageSize}
                     loadingElement={loadingElement}>
-                    {this.state.pieceList.map((piece, i) => {
+                    {this.state.pieceList.map((piece) => {
                         return (
                             <AccordionListItemType
+                                key={piece.id}
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={piece}
-                                thumbnailPlaceholder={customThumbnailPlaceholder}
-                                key={i}>
+                                currentUser={currentUser}
+                                thumbnailPlaceholder={customThumbnailPlaceholder}>
                                     <AccordionListItemTableEditions
                                         className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
                                         parentId={piece.id} />
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
index 3fc3f5fd..4ab94091 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@@ -10,8 +10,6 @@ import PieceListStore from '../../../../../../stores/piece_list_store';
 
 import PrizeRatingActions from '../../actions/prize_rating_actions';
 
-import UserStore from '../../../../../../stores/user_store';
-
 import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
 
 import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece';
@@ -23,13 +21,14 @@ import AclProxy from '../../../../../acl_proxy';
 import SubmitToPrizeButton from './../ascribe_buttons/submit_to_prize_button';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
-import { mergeOptions } from '../../../../../../utils/general_utils';
 
 
 let AccordionListItemPrize = React.createClass({
     propTypes: {
+        content: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+
         className: React.PropTypes.string,
-        content: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -37,20 +36,15 @@ let AccordionListItemPrize = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
-            PieceListStore.getState(),
-            UserStore.getState()
-        );
+        return PieceListStore.getState();
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -61,29 +55,30 @@ let AccordionListItemPrize = React.createClass({
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
                                         this.state.orderBy, this.state.orderAsc, this.state.filterBy);
 
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getPrizeButtons() {
-        if (this.state.currentUser && this.state.currentUser.is_jury){
-            if ((this.props.content.ratings) &&
-                (this.props.content.ratings.rating || this.props.content.ratings.average)){
+        const { currentUser, content: { id, ratings } } = this.props;
+
+        if (currentUser && (currentUser.is_jury || currentUser.is_judge)) {
+            if (ratings && (ratings.rating || ratings.average)) {
                 // jury and rating available
-                let rating = null,
-                    caption = null;
-                if (this.props.content.ratings.rating){
-                    rating = parseInt(this.props.content.ratings.rating, 10);
+                let rating = null;
+                let caption = null;
+
+                if (ratings.rating) {
+                    rating = parseInt(ratings.rating, 10);
                     caption = getLangText('Your rating');
-                }
-                else if (this.props.content.ratings.average){
-                    rating = this.props.content.ratings.average;
-                    caption = getLangText('Average of ' + this.props.content.ratings.num_ratings + ' rating(s)');
+                } else if (ratings.average) {
+                    rating = ratings.average;
+                    caption = getLangText('Average of ' + ratings.num_ratings + ' rating(s)');
                 }
 
                 return (
                     <div id="list-rating" className="pull-right">
-                        <Link to={`/pieces/${this.props.content.id}`}>
+                        <Link to={`/pieces/${id}`}>
                             <StarRating
                                 ref='rating'
                                 name="prize-rating"
@@ -94,23 +89,23 @@ let AccordionListItemPrize = React.createClass({
                                 ratingAmount={5} />
                         </Link>
                     </div>);
-            }
-            else {
-                if (this.state.currentUser.is_judge){
+            } else {
+                if (currentUser.is_judge) {
                     return (
                         <div className="react-rating-caption pull-right">
                             {getLangText('Not rated')}
                         </div>
                     );
+                } else {
+                    // jury and no rating yet
+                    return (
+                        <div className="react-rating-caption pull-right">
+                            <Link to={`/pieces/${id}`}>
+                                {getLangText('Submit your rating')}
+                            </Link>
+                        </div>
+                    );
                 }
-                // jury and no rating yet
-                return (
-                    <div className="react-rating-caption pull-right">
-                        <Link to={`/pieces/${this.props.content.id}`}>
-                            {getLangText('Submit your rating')}
-                        </Link>
-                    </div>
-                );
             }
         }
         return this.getPrizeButtonsParticipant();
@@ -132,8 +127,8 @@ let AccordionListItemPrize = React.createClass({
         );
     },
 
-    handleShortlistSuccess(message){
-        let notification = new GlobalNotificationModel(message, 'success', 2000);
+    handleShortlistSuccess(message) {
+        const notification = new GlobalNotificationModel(message, 'success', 2000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -142,23 +137,17 @@ let AccordionListItemPrize = React.createClass({
                                         this.state.orderBy, this.state.orderAsc, this.state.filterBy);
     },
 
-    onSelectChange(){
+    onSelectChange() {
         PrizeRatingActions.toggleShortlist(this.props.content.id)
-        .then(
-            (res) => {
-                this.refreshPieceData();
-                return res;
-            })
-        .then(
-            (res) => {
-                this.handleShortlistSuccess(res.notification);
-            }
-        );
+        .then((res) => {
+            this.refreshPieceData();
+            this.handleShortlistSuccess(res.notification);
+        });
 
     },
 
-    getPrizeBadge(){
-        if (this.state.currentUser && this.state.currentUser.is_judge) {
+    getPrizeBadge() {
+        if (currentUser && currentUser.is_judge) {
             return (
                 <span className="pull-right ascribe-checkbox-wrapper ascribe-checkbox-badge">
                     <InputCheckbox
@@ -166,17 +155,18 @@ let AccordionListItemPrize = React.createClass({
                         onChange={this.onSelectChange}/>
                 </span>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
-        const { children, className, content } = this.props;
-        const { currentUser } = this.state;
+        const { children, className, content, currentUser } = this.props;
 
         // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
-        let artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ?
+        const artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ?
                 <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : content.artist_name;
+
         return (
             <div>
                 <AccordionListItemPiece
@@ -186,7 +176,8 @@ let AccordionListItemPrize = React.createClass({
                     subsubheading={
                         <div>
                             <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
-                        </div>}
+                        </div>
+                    }
                     buttons={this.getPrizeButtons()}
                     badge={this.getPrizeBadge()}>
                     {children}
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
index 9d88408f..3ed7830e 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
@@ -3,27 +3,26 @@
 import React from 'react';
 import Moment from 'moment';
 
-import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece';
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 import PieceListStore from '../../../../../../stores/piece_list_store';
 
-import UserStore from '../../../../../../stores/user_store';
-
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
-
 import CylandSubmitButton from '../cyland_buttons/cyland_submit_button';
+
+import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece';
+
 import AclProxy from '../../../../../acl_proxy';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
-import { mergeOptions } from '../../../../../../utils/general_utils';
 
 
 let CylandAccordionListItem = React.createClass({
     propTypes: {
+        content: React.PropTypes.object.isRequired,
+
         className: React.PropTypes.string,
-        content: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -31,20 +30,15 @@ let CylandAccordionListItem = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
-            PieceListStore.getState(),
-            UserStore.getState()
-        );
+        return PieceListStore.getState();
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -55,37 +49,39 @@ let CylandAccordionListItem = React.createClass({
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
                                         this.state.orderBy, this.state.orderAsc, this.state.filterBy);
 
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getSubmitButtons() {
+        const { content } = this.props;
+
         return (
             <div>
                 <AclProxy
-                    aclObject={this.props.content.acl}
+                    aclObject={content.acl}
                     aclName="acl_wallet_submit">
                     <CylandSubmitButton
                         className="pull-right"
-                        piece={this.props.content}
+                        piece={content}
                         handleSuccess={this.handleSubmitSuccess}/>
                 </AclProxy>
                 <AclProxy
-                    aclObject={this.props.content.acl}
+                    aclObject={content.acl}
                     aclName="acl_wallet_submitted">
                     <button
-                    disabled
-                    className="btn btn-default btn-xs pull-right">
+                        disabled
+                        className="btn btn-default btn-xs pull-right">
                         {getLangText('Submitted to Cyland') + ' '}
                         <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
                 </AclProxy>
                 <AclProxy
-                    aclObject={this.props.content.acl}
+                    aclObject={content.acl}
                     aclName="acl_wallet_accepted">
                     <button
-                    disabled
-                    className="btn btn-default btn-xs pull-right">
+                        disabled
+                        className="btn btn-default btn-xs pull-right">
                         {getLangText('Loaned to Cyland') + ' '}
                         <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
@@ -95,16 +91,19 @@ let CylandAccordionListItem = React.createClass({
     },
 
     render() {
+        const { children, className, content } = this.props;
+
         return (
             <AccordionListItemPiece
-                className={this.props.className}
-                piece={this.props.content}
+                className={className}
+                piece={content}
                 subsubheading={
                     <div className="pull-left">
-                        <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
-                    </div>}
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
+                    </div>
+                }
                 buttons={this.getSubmitButtons()}>
-                {this.props.children}
+                {children}
             </AccordionListItemPiece>
         );
     }
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
index ce8cebf5..53f04c41 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
@@ -3,18 +3,16 @@
 import React from 'react';
 import Moment from 'moment';
 
-import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece';
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 import PieceListStore from '../../../../../../stores/piece_list_store';
 
-import UserStore from '../../../../../../stores/user_store';
-
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
-
 import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button';
 
+import AccordionListItemPiece from '../../../../../ascribe_accordion_list/accordion_list_item_piece';
+
 import AclProxy from '../../../../../acl_proxy';
 
 import { getLangText } from '../../../../../../utils/lang_utils';
@@ -23,8 +21,10 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 
 let IkonotvAccordionListItem = React.createClass({
     propTypes: {
+        content: React.PropTypes.object.isRequired,
+        currentUser: React.PropTypes.object.isRequired,
+
         className: React.PropTypes.string,
-        content: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -32,20 +32,15 @@ let IkonotvAccordionListItem = React.createClass({
     },
 
     getInitialState() {
-        return mergeOptions(
-            PieceListStore.getState(),
-            UserStore.getState()
-        );
+        return PieceListStore.getState();
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        UserStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -56,41 +51,43 @@ let IkonotvAccordionListItem = React.createClass({
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
                                         this.state.orderBy, this.state.orderAsc, this.state.filterBy);
 
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getSubmitButtons() {
+        const { content, currentUser } = this.props;
+
         return (
             <div>
                 <AclProxy
-                    aclObject={this.state.currentUser.acl}
+                    aclObject={currentUser.acl}
                     aclName="acl_wallet_submit">
                     <AclProxy
-                        aclObject={this.props.content.acl}
+                        aclObject={content.acl}
                         aclName="acl_wallet_submit">
                         <IkonotvSubmitButton
                             className="btn-xs pull-right"
                             handleSuccess={this.handleSubmitSuccess}
-                            piece={this.props.content}/>
+                            piece={content}/>
                     </AclProxy>
                 </AclProxy>
                 <AclProxy
-                    aclObject={this.props.content.acl}
+                    aclObject={content.acl}
                     aclName="acl_wallet_submitted">
                     <button
-                    disabled
-                    className="btn btn-default btn-xs pull-right">
+                        disabled
+                        className="btn btn-default btn-xs pull-right">
                         {getLangText('Submitted to IkonoTV') + ' '}
                         <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
                 </AclProxy>
                 <AclProxy
-                    aclObject={this.props.content.acl}
+                    aclObject={content.acl}
                     aclName="acl_wallet_accepted">
                     <button
-                    disabled
-                    className="btn btn-default btn-xs pull-right">
+                        disabled
+                        className="btn btn-default btn-xs pull-right">
                         {getLangText('Loaned to IkonoTV') + ' '}
                         <span className='ascribe-icon icon-ascribe-ok'/>
                     </button>
@@ -100,22 +97,21 @@ let IkonotvAccordionListItem = React.createClass({
     },
 
     render() {
-        if(this.props.content) {
-            return (
-                <AccordionListItemPiece
-                    className={this.props.className}
-                    piece={this.props.content}
-                    subsubheading={
-                        <div className="pull-left">
-                            <span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
-                        </div>}
-                    buttons={this.getSubmitButtons()}>
-                    {this.props.children}
-                </AccordionListItemPiece>
-            );
-        } else {
-            return null;
-        }
+        const { children, className, content } = this.props;
+
+        return (
+            <AccordionListItemPiece
+                className={className}
+                piece={content}
+                subsubheading={
+                    <div className="pull-left">
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
+                    </div>
+                }
+                buttons={this.getSubmitButtons()}>
+                {children}
+            </AccordionListItemPiece>
+        );
     }
 });
 

From 4133922f3178065d7d176af45445584b540edb3b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 19:10:24 +0100
Subject: [PATCH 068/197] Fix a few small additions/deletions with UserActions

---
 js/components/ascribe_forms/form_signup.js                      | 2 ++
 .../whitelabel/prize/portfolioreview/components/pr_landing.js   | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 5d4c57aa..69d50005 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -6,6 +6,8 @@ import { History } from 'react-router';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import UserActions from '../../actions/user_actions';
+
 import Form from './form';
 import Property from './property';
 import InputCheckbox from './input_checkbox';
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
index 2ac1d19a..4cb925a8 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
@@ -35,8 +35,6 @@ const PRLanding = React.createClass({
         const { location } = this.props;
 
         PrizeStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
         PrizeActions.fetchPrize();
 
         if (location.query.redirect) {

From 40041197d6db5eaf88ece62cdf792dc28b78c027 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 19:22:25 +0100
Subject: [PATCH 069/197] Update components for loading WhitelabelStore from
 top level app

---
 .../accordion_list_item_wallet.js             | 31 +++++++--------
 .../ascribe_detail/edition_container.js       |  9 +++--
 js/components/piece_list.js                   | 10 +++--
 js/components/register_piece.js               |  3 --
 .../cyland_buttons/cyland_submit_button.js    | 28 ++-----------
 .../market_buttons/market_acl_button_list.js  |  8 +++-
 .../market_buttons/market_submit_button.js    | 39 +++++++------------
 7 files changed, 50 insertions(+), 78 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index 638e9bb3..6f3139a3 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -7,20 +7,19 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
-import AccordionListItemPiece from './accordion_list_item_piece';
-import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
-import CreateEditionsForm from '../ascribe_forms/create_editions_form';
-
-import PieceListActions from '../../actions/piece_list_actions';
-import PieceListStore from '../../stores/piece_list_store';
-
-import WhitelabelStore from '../../stores/whitelabel_store';
-
 import EditionListActions from '../../actions/edition_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import PieceListActions from '../../actions/piece_list_actions';
+import PieceListStore from '../../stores/piece_list_store';
+
+import AccordionListItemPiece from './accordion_list_item_piece';
+import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
+import CreateEditionsForm from '../ascribe_forms/create_editions_form';
+
+
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -30,6 +29,7 @@ import { mergeOptions } from '../../utils/general_utils';
 let AccordionListItemWallet = React.createClass({
     propTypes: {
         content: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         className: React.PropTypes.string,
         thumbnailPlaceholder: React.PropTypes.func,
@@ -41,22 +41,19 @@ let AccordionListItemWallet = React.createClass({
 
     getInitialState() {
         return mergeOptions(
+            PieceListStore.getState(),
             {
                 showCreateEditionsDialog: false
-            },
-            PieceListStore.getState(),
-            WhitelabelStore.getState()
+            }
         );
     },
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
-        WhitelabelStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -64,7 +61,7 @@ let AccordionListItemWallet = React.createClass({
     },
 
     getGlyphicon() {
-        if (this.props.content.notifications && this.props.content.notifications.length){
+        if (this.props.content.notifications && this.props.content.notifications.length) {
             return (
                 <OverlayTrigger
                     delay={500}
@@ -93,7 +90,7 @@ let AccordionListItemWallet = React.createClass({
                                         this.state.orderBy, this.state.orderAsc, this.state.filterBy);
         EditionListActions.toggleEditionList(pieceId);
 
-        let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+        const notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -112,7 +109,7 @@ let AccordionListItemWallet = React.createClass({
 
     getLicences() {
         // convert this to acl_view_licences later
-        if (this.state.whitelabel && this.state.whitelabel.name === 'Creative Commons France') {
+        if (this.props.whitelabel && this.props.whitelabel.name === 'Creative Commons France') {
             return (
                 <span>
                     <span>, </span>
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index 00b40ef5..1001be55 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -84,8 +84,8 @@ let EditionContainer = React.createClass({
     },
 
     render() {
+        const { actionPanelButtonListType, currentUser, furtherDetailsType, whitelabel } = this.props;
         const { edition, coaMeta } = this.state;
-        const { actionPanelButtonListType, currentUser, furtherDetailsType } = this.props;
 
         if (Object.keys(edition).length && edition.id) {
             setDocumentTitle([edition.artist_name, edition.title].join(', '));
@@ -93,11 +93,12 @@ let EditionContainer = React.createClass({
             return (
                 <Edition
                     actionPanelButtonListType={actionPanelButtonListType}
-                    furtherDetailsType={furtherDetailsType}
-                    edition={edition}
                     coaError={coaMeta.err}
                     currentUser={currentUser}
-                    loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)} />
+                    edition={edition}
+                    furtherDetailsType={furtherDetailsType}
+                    loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)}
+                    whitelabel={whitelabel} />
             );
         } else {
             return (
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 4a4663bb..3a4484ef 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -268,7 +268,8 @@ let PieceList = React.createClass({
             customSubmitButton,
             customThumbnailPlaceholder,
             filterParams,
-            orderParams } = this.props;
+            orderParams,
+            whitelabel } = this.props;
 
         const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
 
@@ -276,6 +277,7 @@ let PieceList = React.createClass({
         const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
 
         setDocumentTitle(getLangText('Collection'));
+
         return (
             <div>
                 <PieceListToolbar
@@ -302,8 +304,9 @@ let PieceList = React.createClass({
                     <BulkModalButtonListType
                         availableAcls={availableAcls}
                         currentUser={currentUser}
-                        pieceOrEditions={selectedEditions}
                         handleSuccess={this.handleAclSuccess}
+                        pieceOrEditions={selectedEditions}
+                        whitelabel={whitelabel}
                         className="text-center ascribe-button-list collapse-group">
                         <DeleteButton
                             handleSuccess={this.handleAclSuccess}
@@ -332,7 +335,8 @@ let PieceList = React.createClass({
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={piece}
                                 currentUser={currentUser}
-                                thumbnailPlaceholder={customThumbnailPlaceholder}>
+                                thumbnailPlaceholder={customThumbnailPlaceholder}
+                                whitelabel={whitelabel}>
                                     <AccordionListItemTableEditions
                                         className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
                                         parentId={piece.id} />
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 49f191c7..5ee192aa 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -6,9 +6,6 @@ import { History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import WhitelabelActions from '../actions/whitelabel_actions';
-import WhitelabelStore from '../stores/whitelabel_store';
-
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
 
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_buttons/cyland_submit_button.js b/js/components/whitelabel/wallet/components/cyland/cyland_buttons/cyland_submit_button.js
index 45b8c45e..2a881fbd 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_buttons/cyland_submit_button.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_buttons/cyland_submit_button.js
@@ -7,39 +7,19 @@ import Button from 'react-bootstrap/lib/Button';
 
 import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
-import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../../stores/whitelabel_store';
-
 import { getLangText } from '../../../../../../utils/lang_utils';
 
 
 let CylandSubmitButton = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
-        username: React.PropTypes.string
-    },
 
-    getInitialState() {
-        return WhitelabelStore.getState();
-    },
-
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        className: React.PropTypes.string,
+        handleSuccess: React.PropTypes.func
     },
 
     render() {
-        const { piece, className } = this.props;
+        const { className, piece } = this.props;
 
         return (
             <LinkContainer
@@ -58,4 +38,4 @@ let CylandSubmitButton = React.createClass({
     }
 });
 
-export default CylandSubmitButton;
\ No newline at end of file
+export default CylandSubmitButton;
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
index 4a33baae..e41a67ed 100644
--- a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
@@ -17,6 +17,7 @@ let MarketAclButtonList = React.createClass({
         currentUser: React.PropTypes.object.isRequired,
         handleSuccess: React.PropTypes.func.isRequired,
         pieceOrEditions: React.PropTypes.array.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
@@ -32,7 +33,8 @@ let MarketAclButtonList = React.createClass({
             className,
             currentUser,
             handleSuccess,
-            pieceOrEditions } = this.props;
+            pieceOrEditions,
+            whitelabel } = this.props;
 
         const buttonProps = selectFromObject(this.props, [
             'availableAcls',
@@ -43,7 +45,9 @@ let MarketAclButtonList = React.createClass({
 
         return (
             <div className={className}>
-                <MarketSubmitButton {...buttonProps} />
+                <MarketSubmitButton
+                    {...buttonProps}
+                    whitelabel={whitelabel} />
                 <EmailButton {...buttonProps} />
                 <TransferButton {...buttonProps} />
                 <UnconsignButton {...buttonProps} />
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
index d8ef4c41..c0f58380 100644
--- a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
@@ -3,6 +3,8 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import PieceActions from '../../../../../../actions/piece_actions';
+
 import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
 
 import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
@@ -12,10 +14,6 @@ import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
 
 import AclProxy from '../../../../../acl_proxy';
 
-import PieceActions from '../../../../../../actions/piece_actions';
-import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../../../stores/whitelabel_store';
-
 import ApiUrls from '../../../../../../constants/api_urls';
 
 import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils';
@@ -24,30 +22,14 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 let MarketSubmitButton = React.createClass({
     propTypes: {
         availableAcls: React.PropTypes.object.isRequired,
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         editions: React.PropTypes.array.isRequired,
         handleSuccess: React.PropTypes.func.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         className: React.PropTypes.string,
     },
 
-    getInitialState() {
-        return WhitelabelStore.getState();
-    },
-
-    componentDidMount() {
-        WhitelabelStore.listen(this.onChange);
-
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        WhitelabelStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
     canEditionBeSubmitted(edition) {
         if (edition && edition.extra_data && edition.other_data) {
             const { extra_data, other_data } = edition;
@@ -90,8 +72,14 @@ let MarketSubmitButton = React.createClass({
     },
 
     render() {
-        const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
-        const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
+        const {
+            availableAcls,
+            currentUser,
+            className,
+            editions,
+            handleSuccess,
+            whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.props;
+
         const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
         const message = getAclFormMessage({
             aclName: 'acl_consign',
@@ -106,6 +94,7 @@ let MarketSubmitButton = React.createClass({
                 {getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
             </button>
         );
+
         const consignForm = (
             <AclFormFactory
                 action='acl_consign'

From ed264d85115a3875a78d746227217edc5c44b65a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 11 Jan 2016 19:34:39 +0100
Subject: [PATCH 070/197] Fix MediaContainer not being refreshed while in
 Edition

---
 js/components/ascribe_detail/edition.js | 35 ++++++++++++++-----------
 js/components/ascribe_detail/piece.js   |  5 ++--
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 803d73bb..46eb8183 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -8,23 +8,23 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 
-import HistoryIterator from './history_iterator';
+import EditionActions from '../../actions/edition_actions';
 
-import MediaContainer from './media_container';
-
-import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
-
-import Form from './../ascribe_forms/form';
-import Property from './../ascribe_forms/property';
 import DetailProperty from './detail_property';
-import LicenseDetail from './license_detail';
-import FurtherDetails from './further_details';
-
 import EditionActionPanel from './edition_action_panel';
-import AclProxy from '../acl_proxy';
-
+import FurtherDetails from './further_details';
+import HistoryIterator from './history_iterator';
+import LicenseDetail from './license_detail';
+import MediaContainer from './media_container';
 import Note from './note';
 
+import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
+
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import AclProxy from '../acl_proxy';
+
 import ApiUrls from '../../constants/api_urls';
 import AscribeSpinner from '../ascribe_spinner';
 
@@ -37,10 +37,10 @@ import { getLangText } from '../../utils/lang_utils';
 let Edition = React.createClass({
     propTypes: {
         actionPanelButtonListType: React.PropTypes.func,
-        furtherDetailsType: React.PropTypes.func,
-        edition: React.PropTypes.object,
         coaError: React.PropTypes.object,
         currentUser: React.PropTypes.object,
+        edition: React.PropTypes.object,
+        furtherDetailsType: React.PropTypes.func,
         loadEdition: React.PropTypes.func
     },
 
@@ -50,6 +50,10 @@ let Edition = React.createClass({
         };
     },
 
+    updateEdition() {
+        return EditionActions.fetchEdition(this.props.edition.bitcoin_id);
+    },
+
     render() {
         const {
             actionPanelButtonListType,
@@ -64,7 +68,8 @@ let Edition = React.createClass({
                 <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
                         content={edition}
-                        currentUser={currentUser} />
+                        currentUser={currentUser}
+                        refreshObject={this.updateEdition} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index d779b716..58648c7b 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -26,8 +26,7 @@ let Piece = React.createClass({
         ])
     },
 
-
-    updateObject() {
+    updatePiece() {
         return PieceActions.fetchOne(this.props.piece.id);
     },
 
@@ -40,7 +39,7 @@ let Piece = React.createClass({
                     <MediaContainer
                         content={piece}
                         currentUser={currentUser}
-                        refreshObject={this.updateObject} />
+                        refreshObject={this.updatePiece} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     {header}

From 1dca764166c207f2381c9f08c1962a38299e4c62 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 12 Jan 2016 12:34:55 +0100
Subject: [PATCH 071/197] Use Link instead of an anchor for AccordionList's
 empty placeholder to avoid page refresh

---
 js/components/ascribe_accordion_list/accordion_list.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js
index 1046ab7f..f1967edb 100644
--- a/js/components/ascribe_accordion_list/accordion_list.js
+++ b/js/components/ascribe_accordion_list/accordion_list.js
@@ -1,6 +1,8 @@
 'use strict';
 
 import React from 'react';
+import { Link } from 'react-router';
+
 import { getLangText } from '../../utils/lang_utils';
 
 
@@ -36,7 +38,7 @@ let AccordionList = React.createClass({
                     </p>
                     <p className="text-center">
                         {getLangText('To register one, click')}&nbsp;
-                        <a href="register_piece">{getLangText('here')}</a>!
+                        <Link to="/register_piece">{getLangText('here')}</Link>!
                     </p>
                 </div>
             );

From 315e5f01084dbd2644265f8bd0e9d84ec9c3d341 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 12 Jan 2016 15:05:00 +0100
Subject: [PATCH 072/197] Add `.isRequired` to App proptypes

---
 js/components/ascribe_app.js                          |  5 +++--
 .../whitelabel/prize/portfolioreview/pr_app.js        | 10 ++++++----
 .../whitelabel/prize/simple_prize/prize_app.js        | 10 ++++++----
 js/components/whitelabel/wallet/wallet_app.js         | 11 +++++++----
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 369bf744..f7000aca 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -18,11 +18,12 @@ import { mergeOptions } from '../utils/general_utils';
 
 let AscribeApp = React.createClass({
     propTypes: {
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     getInitialState() {
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index 85091a8b..be0b0d8e 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -21,12 +21,13 @@ import { getCookie } from '../../../../utils/fetch_api_utils';
 
 let PRApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     getInitialState() {
@@ -54,7 +55,8 @@ let PRApp = React.createClass({
     },
 
     render() {
-        const { children, currentUser, history, routes, whitelabel } = this.props;
+        const { children, history, routes } = this.props;
+        const { currentUser, whitelabel } = this.state;
         const subdomain = getSubdomain();
 
         // Add the current user and whitelabel settings to all child routes
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index e9083428..9ca99ca3 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -20,12 +20,13 @@ import { getSubdomain, mergeOptions } from '../../../../utils/general_utils';
 
 let PrizeApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     getInitialState() {
@@ -53,7 +54,8 @@ let PrizeApp = React.createClass({
     },
 
     render() {
-        const { children, currentUser, history, routes, whitelabel } = this.props;
+        const { children, history, routes } = this.props;
+        const { currentUser, whitelabel } = this.state;
         const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 783bb2ab..4508a278 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -19,12 +19,13 @@ import { getSubdomain, mergeOptions } from '../../../utils/general_utils';
 
 let WalletApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     getInitialState() {
@@ -38,6 +39,7 @@ let WalletApp = React.createClass({
         UserStore.listen(this.onChange);
         WhitelabelStore.listen(this.onChange);
 
+        console.log('fetch');
         UserActions.fetchCurrentUser();
         WhitelabelActions.fetchWhitelabel();
     },
@@ -52,7 +54,8 @@ let WalletApp = React.createClass({
     },
 
     render() {
-        const { children, currentUser, history, routes, whitelabel } = this.props;
+        const { children, history, routes } = this.props;
+        const { currentUser, whitelabel } = this.state;
         const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can

From 5b2178eb7ea3be8e67b8fb42be2cc9a785ef15c1 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 12 Jan 2016 15:06:43 +0100
Subject: [PATCH 073/197] Use height for landing page logos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Using height means the browser can allocate space for the image before
it loads, so there’s no flash of movement
---
 .../whitelabel/wallet/components/23vivi/23vivi_landing.js    | 5 ++++-
 .../whitelabel/wallet/components/cyland/cyland_landing.js    | 2 +-
 .../whitelabel/wallet/components/lumenus/lumenus_landing.js  | 2 +-
 sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss       | 1 -
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
index 1219c182..386f2145 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -30,7 +30,10 @@ let Vivi23Landing = React.createClass({
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row vivi23-landing--header">
-                            <img className="vivi23-landing--header-logo" src={this.props.whitelabel.logo} />
+                            <img
+                                className="vivi23-landing--header-logo"
+                                src={this.props.whitelabel.logo}
+                                height="75" />
                             <div>
                                 {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '}
                                 <span className="icon-ascribe-logo" />
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index deb0bd71..7919fec4 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -30,7 +30,7 @@ let CylandLanding = React.createClass({
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.props.whitelabel.logo} width="400px"/>
+                            <img src={this.props.whitelabel.logo} height="115"/>
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Submissions to Cyland Archive are powered by') + ' '}
                                 <span>
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
index 5f5020a3..9674ef3f 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
@@ -29,7 +29,7 @@ let LumenusLanding = React.createClass({
                 <div className="row">
                     <div className="col-xs-12 wp-landing-wrapper">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.props.whitelabel.logo} width="150px"/>
+                            <img src={this.props.whitelabel.logo} height="150"/>
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
                                 <span>
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index a5026272..348564bc 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -34,7 +34,6 @@ $vivi23--highlight-color: #de2600;
             .vivi23-landing--header-logo {
                 margin-top: 1em;
                 margin-bottom: 2em;
-                height: 75px;
             }
         }
 

From b22ae7def1ae9804193c4dc59e46bb44b7dcb65a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 12 Jan 2016 15:07:38 +0100
Subject: [PATCH 074/197] Small bug fixes for components affected by the
 UserStore and WhitelabelStore being passed down as a prop

---
 js/components/ascribe_detail/edition.js       | 96 +++++++++----------
 .../ascribe_detail/edition_action_panel.js    | 22 +++--
 .../ascribe_detail/edition_container.js       |  8 +-
 js/components/ascribe_forms/form_signup.js    |  2 +-
 .../ikonotv/ikonotv_register_piece.js         | 16 ++--
 .../market_buttons/market_acl_button_list.js  |  5 +-
 .../market_additional_data_form.js            |  5 +-
 7 files changed, 77 insertions(+), 77 deletions(-)

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 46eb8183..deb275ec 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -36,10 +36,12 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let Edition = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+        edition: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         actionPanelButtonListType: React.PropTypes.func,
         coaError: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
-        edition: React.PropTypes.object,
         furtherDetailsType: React.PropTypes.func,
         loadEdition: React.PropTypes.func
     },
@@ -50,10 +52,6 @@ let Edition = React.createClass({
         };
     },
 
-    updateEdition() {
-        return EditionActions.fetchEdition(this.props.edition.bitcoin_id);
-    },
-
     render() {
         const {
             actionPanelButtonListType,
@@ -61,7 +59,8 @@ let Edition = React.createClass({
             currentUser,
             edition,
             furtherDetailsType: FurtherDetailsType,
-            loadEdition } = this.props;
+            loadEdition,
+            whitelabel } = this.props;
 
         return (
             <Row>
@@ -69,49 +68,47 @@ let Edition = React.createClass({
                     <MediaContainer
                         content={edition}
                         currentUser={currentUser}
-                        refreshObject={this.updateEdition} />
+                        refreshObject={loadEdition} />
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
-                        <hr className="hidden-print" style={{marginTop: 0}}/>
+                        <hr className="hidden-print" style={{marginTop: 0}} />
                         <h1 className="ascribe-detail-title">{edition.title}</h1>
                         <DetailProperty label="BY" value={edition.artist_name} />
                         <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
-                        <hr/>
+                        <hr />
                     </div>
                     <EditionSummary
                         actionPanelButtonListType={actionPanelButtonListType}
                         edition={edition}
                         currentUser={currentUser}
-                        handleSuccess={loadEdition}/>
+                        handleSuccess={loadEdition}
+                        whitelabel={whitelabel} />
                     <CollapsibleParagraph
                         title={getLangText('Certificate of Authenticity')}
                         show={edition.acl.acl_coa === true}>
                         <CoaDetails
                             coa={edition.coa}
                             coaError={coaError}
-                            editionId={edition.bitcoin_id}/>
+                            editionId={edition.bitcoin_id} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Provenance/Ownership History')}
-                        show={edition.ownership_history && edition.ownership_history.length > 0}>
-                        <HistoryIterator
-                            history={edition.ownership_history} />
+                        show={edition.ownership_history && edition.ownership_history.length}>
+                        <HistoryIterator history={edition.ownership_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Consignment History')}
                         show={edition.consign_history && edition.consign_history.length > 0}>
-                        <HistoryIterator
-                            history={edition.consign_history} />
+                        <HistoryIterator history={edition.consign_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
                         title={getLangText('Loan History')}
                         show={edition.loan_history && edition.loan_history.length > 0}>
-                        <HistoryIterator
-                            history={edition.loan_history} />
+                        <HistoryIterator history={edition.loan_history} />
                     </CollapsibleParagraph>
 
                     <CollapsibleParagraph
@@ -125,7 +122,7 @@ let Edition = React.createClass({
                             editable={true}
                             successMessage={getLangText('Private note saved')}
                             url={ApiUrls.note_private_edition}
-                            currentUser={currentUser}/>
+                            currentUser={currentUser} />
                         <Note
                             id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
                             label={getLangText('Personal note (public)')}
@@ -135,13 +132,11 @@ let Edition = React.createClass({
                             show={!!edition.public_note || !!edition.acl.acl_edit}
                             successMessage={getLangText('Public edition note saved')}
                             url={ApiUrls.note_public_edition}
-                            currentUser={currentUser}/>
+                            currentUser={currentUser} />
                     </CollapsibleParagraph>
                     <CollapsibleParagraph
                         title={getLangText('Further Details')}
-                        show={edition.acl.acl_edit ||
-                              Object.keys(edition.extra_data).length > 0 ||
-                              edition.other_data.length > 0}>
+                        show={edition.acl.acl_edit || Object.keys(edition.extra_data).length || edition.other_data.length}>
                         <FurtherDetailsType
                             editable={edition.acl.acl_edit}
                             pieceId={edition.parent}
@@ -149,10 +144,8 @@ let Edition = React.createClass({
                             otherData={edition.other_data}
                             handleSuccess={loadEdition} />
                     </CollapsibleParagraph>
-                    <CollapsibleParagraph
-                        title={getLangText('SPOOL Details')}>
-                        <SpoolDetails
-                            edition={edition} />
+                    <CollapsibleParagraph title={getLangText('SPOOL Details')}>
+                        <SpoolDetails edition={edition} />
                     </CollapsibleParagraph>
                 </Col>
             </Row>
@@ -163,60 +156,56 @@ let Edition = React.createClass({
 
 let EditionSummary = React.createClass({
     propTypes: {
+        currentUser: React.PropTypes.object.isRequired,
+        edition: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
+
         actionPanelButtonListType: React.PropTypes.func,
-        edition: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
 
-    handleSuccess() {
-        this.props.handleSuccess();
-    },
+    getStatus() {
+        const { status } = this.props.edition;
 
-    getStatus(){
-        let status = null;
-        if (this.props.edition.status.length > 0){
-            let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
-            status = <DetailProperty label="STATUS" value={ statusStr }/>;
-            if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
-                status = (
-                    <DetailProperty label="STATUS" value={ statusStr } />
-                );
-            }
-        }
-        return status;
+        return status.length ? (
+            <DetailProperty
+                label="STATUS"
+                value={status.join(', ').replace(/_/g, ' ')} />
+        ) : null;
     },
 
     render() {
-        let { actionPanelButtonListType, edition, currentUser } = this.props;
+        const { actionPanelButtonListType, currentUser, edition, handleSuccess, whitelabel } = this.props;
+
         return (
             <div className="ascribe-detail-header">
                 <DetailProperty
                     label={getLangText('EDITION')}
-                    value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
+                    value={edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
                 <DetailProperty
                     label={getLangText('ID')}
-                    value={ edition.bitcoin_id }
+                    value={edition.bitcoin_id}
                     ellipsis={true} />
                 <DetailProperty
                     label={getLangText('OWNER')}
-                    value={ edition.owner } />
-                <LicenseDetail license={edition.license_type}/>
+                    value={edition.owner} />
+                <LicenseDetail license={edition.license_type} />
                 {this.getStatus()}
                 {/*
                     `acl_view` is always available in `edition.acl`, therefore if it has
                     no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
                     `AclInformation` would show up
                 */}
-                <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
+                <AclProxy show={currentUser.email && Object.keys(edition.acl).length > 1}>
                     <DetailProperty
                         label={getLangText('ACTIONS')}
                         className="hidden-print">
                         <EditionActionPanel
                             actionPanelButtonListType={actionPanelButtonListType}
-                            edition={edition}
                             currentUser={currentUser}
-                            handleSuccess={this.handleSuccess} />
+                            edition={edition}
+                            handleSuccess={handleSuccess}
+                            whitelabel={whitelabel} />
                     </DetailProperty>
                 </AclProxy>
                 <hr/>
@@ -365,4 +354,5 @@ let SpoolDetails = React.createClass({
 
     }
 });
+
 export default Edition;
diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js
index d53617bc..2d9c9a26 100644
--- a/js/components/ascribe_detail/edition_action_panel.js
+++ b/js/components/ascribe_detail/edition_action_panel.js
@@ -36,8 +36,9 @@ import { getLangText } from '../../utils/lang_utils';
  */
 let EditionActionPanel = React.createClass({
     propTypes: {
-        edition: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
+        edition: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         actionPanelButtonListType: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
@@ -87,21 +88,25 @@ let EditionActionPanel = React.createClass({
 
     handleSuccess(response) {
         this.refreshCollection();
-        this.props.handleSuccess();
-        if (response){
-            let notification = new GlobalNotificationModel(response.notification, 'success');
+
+        if (response) {
+            const notification = new GlobalNotificationModel(response.notification, 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
+
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess();
+        }
     },
 
     render() {
         const {
             actionPanelButtonListType: ActionPanelButtonListType,
+            currentUser,
             edition,
-            currentUser } = this.props;
+            whitelabel } = this.props;
 
-        if (edition.notifications &&
-            edition.notifications.length > 0){
+        if (edition.notifications && edition.notifications.length) {
             return (
                 <ListRequestActions
                     currentUser={currentUser}
@@ -116,8 +121,9 @@ let EditionActionPanel = React.createClass({
                             availableAcls={edition.acl}
                             className="ascribe-button-list"
                             currentUser={currentUser}
+                            handleSuccess={this.handleSuccess}
                             pieceOrEditions={[edition]}
-                            handleSuccess={this.handleSuccess}>
+                            whitelabel={whitelabel}>
                             <AclProxy
                                 aclObject={edition.acl}
                                 aclName="acl_withdraw_transfer">
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index 1001be55..beb2e9cb 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -74,11 +74,11 @@ let EditionContainer = React.createClass({
     onChange(state) {
         this.setState(state);
 
-        if(state && state.edition && state.edition.digital_work) {
-            let isEncoding = state.edition.digital_work.isEncoding;
+        if (state && state.edition && state.edition.digital_work) {
+            const isEncoding = state.edition.digital_work.isEncoding;
             if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
-                let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
-                this.setState({timerId: timerId});
+                const timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000);
+                this.setState({ timerId: timerId });
             }
         }
     },
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 69d50005..6faa6cf8 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -95,7 +95,7 @@ let SignupForm = React.createClass({
                         type="email"
                         placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
                         autoComplete="on"
-                        defaultValue={email}
+                        defaultValue={emailQuery}
                         required/>
                 </Property>
                 <Property
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index cd11445a..a0e4f67f 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -32,7 +32,6 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 let IkonotvRegisterPiece = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object.isRequired,
         handleSuccess: React.PropTypes.func,
 
         // Provided from PrizeApp
@@ -45,14 +44,15 @@ let IkonotvRegisterPiece = React.createClass({
 
     mixins: [History],
 
-    getInitialState(){
+    getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
             PieceStore.getState(),
             {
                 step: 0,
                 pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
-            });
+            }
+        );
     },
 
     componentDidMount() {
@@ -90,13 +90,12 @@ let IkonotvRegisterPiece = React.createClass({
         this.refreshPieceList();
 
         // also start loading the piece for the next step
-        if(response && response.piece) {
+        if (response && response.piece) {
             PieceActions.updatePiece(response.piece);
         }
         if (!this.canSubmit()) {
             this.history.push('/collection');
-        }
-        else {
+        } else {
             this.incrementStep();
             this.refs.slidesContainer.nextSlide();
         }
@@ -119,7 +118,7 @@ let IkonotvRegisterPiece = React.createClass({
     handleLoanSuccess(response) {
         this.setState({ pageExitWarning: null });
 
-        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.refreshPieceList();
@@ -189,7 +188,8 @@ let IkonotvRegisterPiece = React.createClass({
 
     getSlideLoan() {
         if (this.canSubmit()) {
-            const { piece, whitelabel } = this.props;
+            const { whitelabel } = this.props;
+            const { piece } = this.state;
             const today = new Moment();
             const endDate = (new Moment()).add(2, 'years');
 
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
index e41a67ed..5f029235 100644
--- a/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
@@ -46,7 +46,10 @@ let MarketAclButtonList = React.createClass({
         return (
             <div className={className}>
                 <MarketSubmitButton
-                    {...buttonProps}
+                    availableAcls={availableAcls}
+                    currentUser={currentUser}
+                    editions={pieceOrEditions}
+                    handleSuccess={handleSuccess}
                     whitelabel={whitelabel} />
                 <EmailButton {...buttonProps} />
                 <TransferButton {...buttonProps} />
diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
index d136c9cf..0698088f 100644
--- a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
@@ -115,7 +115,7 @@ let MarketAdditionalDataForm = React.createClass({
             this.props.handleSuccess();
         }
 
-        let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
@@ -128,7 +128,8 @@ let MarketAdditionalDataForm = React.createClass({
     render() {
         const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
         const { piece } = this.state;
-        let buttons, heading;
+        let buttons;
+        let heading;
 
         let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
 

From 1ffa1eb6aa7ecdfbe657ed04a1e8a19fe8db5fcc Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 13 Jan 2016 16:03:08 +0100
Subject: [PATCH 075/197] Fix potential race condition causing ProxyHandler to
 not evaluate its redirect functions if the component doesn't get updated

---
 js/components/ascribe_routes/proxy_handler.js | 26 ++++++++++++++-----
 js/stores/user_store.js                       | 16 +++++++++++-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js
index 55987ee5..225420b0 100644
--- a/js/components/ascribe_routes/proxy_handler.js
+++ b/js/components/ascribe_routes/proxy_handler.js
@@ -34,8 +34,8 @@ export function AuthRedirect({to, when}) {
         //
         // So if when === 'loggedIn', we're checking if the user is logged in (and
         // vice versa)
-        const exprToValidate = when === 'loggedIn' ? currentUser && currentUser.email
-                                                   : currentUser && !currentUser.email;
+        const isLoggedIn = currentUser && Object.keys(currentUser).length && currentUser.email;
+        const exprToValidate = when === 'loggedIn' ? isLoggedIn : !isLoggedIn;
 
         // and redirect if `true`.
         if (exprToValidate) {
@@ -80,7 +80,11 @@ export function ProxyHandler(...redirectFunctions) {
             displayName: 'ProxyHandler',
 
             propTypes: {
-                currentUser: object,
+                // Provided from AscribeApp
+                currentUser: React.PropTypes.object,
+                whitelabel: React.PropTypes.object,
+
+                // Provided from router
                 location: object
             },
 
@@ -88,10 +92,18 @@ export function ProxyHandler(...redirectFunctions) {
             // to use the `Lifecycle` widget in further down nested components
             mixins: [RouteContext],
 
-            componentDidUpdate() {
-                const { currentUser, location: { query } } = this.props;
+            componentDidMount() {
+                this.evaluateRedirectFunctions();
+            },
 
-                if (!UserStore.isLoading()) {
+            componentWillReceiveProps(nextProps) {
+                this.evaluateRedirectFunctions(nextProps);
+            },
+
+            evaluateRedirectFunctions(props = this.props) {
+                const { currentUser, location: { query } } = props;
+
+                if (UserStore.hasLoaded() && !UserStore.isLoading()) {
                     for (let i = 0; i < redirectFunctions.length; i++) {
                         // if a redirectFunction redirects the user,
                         // it should return `true` and therefore
@@ -106,7 +118,7 @@ export function ProxyHandler(...redirectFunctions) {
 
             render() {
                 return (
-                    <Component {...this.props}/>
+                    <Component {...this.props} />
                 );
             }
         });
diff --git a/js/stores/user_store.js b/js/stores/user_store.js
index f07e56e7..41a9c962 100644
--- a/js/stores/user_store.js
+++ b/js/stores/user_store.js
@@ -12,12 +12,16 @@ class UserStore {
     constructor() {
         this.currentUser = {};
         this.userMeta = {
+            hasLoaded: false,
             invalidateCache: false,
             err: null
         };
 
         this.bindActions(UserActions);
         this.registerAsync(UserSource);
+        this.exportPublicMethods({
+            hasLoaded: this.hasLoaded.bind(this)
+        });
     }
 
     onFetchCurrentUser(invalidateCache) {
@@ -28,7 +32,8 @@ class UserStore {
         }
     }
 
-    onSuccessFetchCurrentUser({users: [user = {}]}) {
+    onSuccessFetchCurrentUser({ users: [ user = {} ] = [] }) {
+        this.userMeta.hasLoaded = true;
         this.userMeta.invalidateCache = false;
         this.userMeta.err = null;
 
@@ -50,6 +55,10 @@ class UserStore {
                 altWhitelabel.recycle();
                 altUser.recycle();
                 altThirdParty.recycle();
+
+                // Since we've just logged out, we can set this store's
+                // hasLoaded flag back to true as there is no current user.
+                this.userMeta.hasLoaded = true;
             });
     }
 
@@ -59,8 +68,13 @@ class UserStore {
 
     onErrorCurrentUser(err) {
         console.logGlobal(err);
+        this.userMeta.hasLoaded = true;
         this.userMeta.err = err;
     }
+
+    hasLoaded() {
+        return this.userMeta.hasLoaded;
+    }
 }
 
 export default altUser.createStore(UserStore, 'UserStore');

From 72db69ee9eb45476497de77e5f11a5908573d833 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 13 Jan 2016 16:17:31 +0100
Subject: [PATCH 076/197] Remove unused PrizeList store and action

---
 js/actions/prize_list_actions.js  | 34 -------------------------------
 js/constants/api_urls.js          |  3 +--
 js/fetchers/prize_list_fetcher.js | 12 -----------
 js/stores/prize_list_store.js     | 20 ------------------
 4 files changed, 1 insertion(+), 68 deletions(-)
 delete mode 100644 js/actions/prize_list_actions.js
 delete mode 100644 js/fetchers/prize_list_fetcher.js
 delete mode 100644 js/stores/prize_list_store.js

diff --git a/js/actions/prize_list_actions.js b/js/actions/prize_list_actions.js
deleted file mode 100644
index da2f97df..00000000
--- a/js/actions/prize_list_actions.js
+++ /dev/null
@@ -1,34 +0,0 @@
-'use strict';
-
-import { alt } from '../alt';
-import Q from 'q';
-
-import PrizeListFetcher from '../fetchers/prize_list_fetcher';
-
-class PrizeListActions {
-    constructor() {
-        this.generateActions(
-            'updatePrizeList'
-        );
-    }
-
-    fetchPrizeList() {
-        return Q.Promise((resolve, reject) => {
-            PrizeListFetcher
-                .fetch()
-                .then((res) => {
-                    this.actions.updatePrizeList({
-                        prizeList: res.prizes,
-                        prizeListCount: res.count
-                    });
-                    resolve(res);
-                })
-                .catch((err) => {
-                    console.logGlobal(err);
-                    reject(err);
-                });
-        });
-    }
-}
-
-export default alt.createActions(PrizeListActions);
\ No newline at end of file
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index e7f11141..f7bac317 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -76,8 +76,7 @@ let ApiUrls = {
     'webhooks': AppConstants.apiEndpoint + 'webhooks/',
     'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
     'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
-    'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
-    'prize_list': AppConstants.apiEndpoint + 'prize/'
+    'delete_s3_file': AppConstants.serverUrl + 's3/delete/'
 };
 
 
diff --git a/js/fetchers/prize_list_fetcher.js b/js/fetchers/prize_list_fetcher.js
deleted file mode 100644
index 150f07a1..00000000
--- a/js/fetchers/prize_list_fetcher.js
+++ /dev/null
@@ -1,12 +0,0 @@
-'use strict';
-
-import requests from '../utils/requests';
-
-
-let PrizeListFetcher = {
-    fetch() {
-        return requests.get('prize_list');
-    }
-};
-
-export default PrizeListFetcher;
diff --git a/js/stores/prize_list_store.js b/js/stores/prize_list_store.js
deleted file mode 100644
index 87b94f01..00000000
--- a/js/stores/prize_list_store.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-import { alt } from '../alt';
-
-import PrizeListActions from '../actions/prize_list_actions';
-
-class PrizeListStore {
-    constructor() {
-        this.prizeList = [];
-        this.prizeListCount = -1;
-        this.bindActions(PrizeListActions);
-    }
-
-    onUpdatePrizeList({ prizeList, prizeListCount }) {
-        this.prizeList = prizeList;
-        this.prizeListCount = prizeListCount;
-    }
-}
-
-export default alt.createStore(PrizeListStore, 'PrizeListStore');
\ No newline at end of file

From 91c97afb7c38a17137b3be1bcd9ee3cc1f1fa46c Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 15 Jan 2016 13:59:41 +0100
Subject: [PATCH 077/197] Small clean up for WebhookSettings

---
 .../ascribe_settings/webhook_settings.js      | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/js/components/ascribe_settings/webhook_settings.js b/js/components/ascribe_settings/webhook_settings.js
index 9deecbcd..51fb90a2 100644
--- a/js/components/ascribe_settings/webhook_settings.js
+++ b/js/components/ascribe_settings/webhook_settings.js
@@ -49,7 +49,7 @@ let WebhookSettings = React.createClass({
         return (event) => {
             WebhookActions.removeWebhook(webhookId);
 
-            let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
+            const notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         };
     },
@@ -57,16 +57,16 @@ let WebhookSettings = React.createClass({
     handleCreateSuccess() {
         this.refs.webhookCreateForm.reset();
         WebhookActions.fetchWebhooks(true);
-        let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
+
+        const notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getWebhooks(){
-        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
-
+    getWebhooks() {
         if (this.state.webhooks) {
-            content = this.state.webhooks.map(function(webhook, i) {
+            return this.state.webhooks.map(function(webhook, i) {
                 const event = webhook.event.split('.')[0];
+
                 return (
                     <ActionPanel
                         name={webhook.event}
@@ -91,11 +91,14 @@ let WebhookSettings = React.createClass({
                                     </button>
                                 </div>
                             </div>
-                        }/>
+                        } />
                     );
             }, this);
+        } else {
+            return (
+                <AscribeSpinner color='dark-blue' size='lg'/>
+            );
         }
-        return content;
     },
 
     getEvents() {
@@ -110,18 +113,18 @@ let WebhookSettings = React.createClass({
                                 <option
                                     name={i}
                                     key={i}
-                                    value={ event + '.webhook' }>
-                                    { event.toUpperCase() }
+                                    value={event + '.webhook'}>
+                                    {event.toUpperCase()}
                                 </option>
                             );
                         })}
                     </select>
                 </Property>);
+        } else {
+            return null;
         }
-        return null;
     },
 
-    
     render() {
         return (
             <CollapsibleParagraph
@@ -138,20 +141,19 @@ let WebhookSettings = React.createClass({
                         a target url.
                     </p>
                 </div>
-                <AclProxy
-                    show={this.state.webhookEvents && this.state.webhookEvents.length}>
+                <AclProxy show={this.state.webhookEvents && this.state.webhookEvents.length}>
                     <Form
                         ref="webhookCreateForm"
                         url={ApiUrls.webhooks}
                         handleSuccess={this.handleCreateSuccess}>
-                        { this.getEvents() }
+                        {this.getEvents()}
                         <Property
                             name='target'
                             label={getLangText('Redirect Url')}>
                             <input
                                 type="text"
                                 placeholder={getLangText('Enter the url to be triggered')}
-                                required/>
+                                required />
                         </Property>
                         <hr />
                     </Form>
@@ -162,4 +164,4 @@ let WebhookSettings = React.createClass({
     }
 });
 
-export default WebhookSettings;
\ No newline at end of file
+export default WebhookSettings;

From 31bec7f2f87e0910e26d4b1256dc3acba1eefa5f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 15 Jan 2016 14:00:36 +0100
Subject: [PATCH 078/197] Remove extraneous call for fetching webhook events

Successfully fetching the webhooks will fetch the events as well.
---
 js/components/ascribe_settings/webhook_settings.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/components/ascribe_settings/webhook_settings.js b/js/components/ascribe_settings/webhook_settings.js
index 51fb90a2..4928c408 100644
--- a/js/components/ascribe_settings/webhook_settings.js
+++ b/js/components/ascribe_settings/webhook_settings.js
@@ -34,7 +34,6 @@ let WebhookSettings = React.createClass({
     componentDidMount() {
         WebhookStore.listen(this.onChange);
         WebhookActions.fetchWebhooks();
-        WebhookActions.fetchWebhookEvents();
     },
 
     componentWillUnmount() {

From 2ad2ea242d068cc7254c3d535390bcd033a10fb9 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 18 Jan 2016 17:31:56 +0100
Subject: [PATCH 079/197] Changes for PR comments

---
 .../accordion_list_item_wallet.js             |  2 +-
 .../ascribe_buttons/acls/acl_button.js        |  5 ++-
 .../ascribe_detail/media_container.js         |  5 ++-
 js/components/ascribe_forms/form_login.js     |  2 +-
 js/components/password_reset_container.js     | 37 +++++++------------
 .../prize/portfolioreview/pr_app.js           |  8 ----
 .../components/prize_register_piece.js        |  4 +-
 .../sluice_selected_prize_action_button.js    |  2 +-
 .../cyland/cyland_register_piece.js           |  9 ++---
 .../ikonotv/ikonotv_contract_notifications.js |  5 ++-
 .../ikonotv/ikonotv_register_piece.js         | 13 +++----
 .../components/market/market_piece_list.js    |  2 -
 js/components/whitelabel/wallet/wallet_app.js |  1 -
 js/utils/general_utils.js                     |  2 +-
 14 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index 6f3139a3..a3266be9 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -90,7 +90,7 @@ let AccordionListItemWallet = React.createClass({
                                         this.state.orderBy, this.state.orderAsc, this.state.filterBy);
         EditionListActions.toggleEditionList(pieceId);
 
-        const notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js
index 8cfdddce..2dc21d31 100644
--- a/js/components/ascribe_buttons/acls/acl_button.js
+++ b/js/components/ascribe_buttons/acls/acl_button.js
@@ -24,6 +24,8 @@ export default function ({ action, displayName, title, tooltip }) {
 
         propTypes: {
             availableAcls: React.PropTypes.object.isRequired,
+            handleSuccess: React.PropTypes.func.isRequired,
+
             buttonAcceptName: React.PropTypes.string,
             buttonAcceptClassName: React.PropTypes.string,
             currentUser: React.PropTypes.object,
@@ -32,14 +34,13 @@ export default function ({ action, displayName, title, tooltip }) {
                 React.PropTypes.object,
                 React.PropTypes.array
             ]).isRequired,
-            handleSuccess: React.PropTypes.func.isRequired,
             className: React.PropTypes.string
         },
 
         sanitizeAction() {
             const { buttonAcceptName } = this.props;
 
-            return buttonAcceptName ? buttonAcceptName : AclInformationText.titles[action];
+            return buttonAcceptName || AclInformationText.titles[action];
         },
 
         render() {
diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index ebc5f1d0..8ea374b3 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -43,8 +43,9 @@ let MediaContainer = React.createClass({
             const isEncoding = digitalWork.isEncoding;
 
             if (digitalWork.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
-                const timerId = window.setInterval(refreshObject, ENCODE_UPDATE_TIME);
-                this.setState({ timerId: timerId });
+                this.setState({
+                    timerId: window.setInterval(refreshObject, ENCODE_UPDATE_TIME)
+                });
             }
         }
     },
diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
index 86d94456..67069cac 100644
--- a/js/components/ascribe_forms/form_login.js
+++ b/js/components/ascribe_forms/form_login.js
@@ -35,7 +35,7 @@ let LoginForm = React.createClass({
     },
 
     handleSuccess({ success }) {
-        const notification = new GlobalNotificationModel('Login successful', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Login successful'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         if (success) {
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index 1649479e..773e1a63 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -29,7 +29,7 @@ let PasswordResetContainer = React.createClass({
     },
 
     handleRequestSuccess(email) {
-        this.setState({ isRequested: email });
+        this.setState({ isRequested: !!email });
     },
 
     render() {
@@ -38,31 +38,20 @@ let PasswordResetContainer = React.createClass({
 
         if (emailQuery && tokenQuery) {
             return (
-                <div>
-                    <PasswordResetForm
-                        email={emailQuery}
-                        token={tokenQuery} />
-                </div>
+                <PasswordResetForm
+                    email={emailQuery}
+                    token={tokenQuery} />
+            );
+        } else if (!isRequested) {
+            return (
+                <PasswordRequestResetForm handleRequestSuccess={this.handleRequestSuccess} />
             );
         } else {
-            if (isRequested === false) {
-                return (
-                    <div>
-                        <PasswordRequestResetForm
-                            handleRequestSuccess={this.handleRequestSuccess} />
-                    </div>
-                );
-            } else if (isRequested) {
-                return (
-                    <div>
-                        <div className="ascribe-login-text ascribe-login-header">
-                            {getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.')}
-                        </div>
-                    </div>
-                );
-            } else {
-                return <span />;
-            }
+            return (
+                <div className="ascribe-login-text ascribe-login-header">
+                    {getLangText('If your email address exists in our database, you will receive a password recovery link in a few minutes.')}
+                </div>
+            );
         }
     }
 });
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index be0b0d8e..a34e7968 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -59,14 +59,6 @@ let PRApp = React.createClass({
         const { currentUser, whitelabel } = this.state;
         const subdomain = getSubdomain();
 
-        // Add the current user and whitelabel settings to all child routes
-        const childrenWithProps = React.Children.map(children, (child) => {
-            return React.cloneElement(child, {
-                currentUser,
-                whitelabel
-            });
-        });
-
         let style = {};
         let header;
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
index e316bfac..fcb304ca 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
@@ -42,7 +42,6 @@ let PrizeRegisterPiece = React.createClass({
     },
 
     render() {
-        const { location } = this.props;
         const { prize } = this.state;
 
         setDocumentTitle(getLangText('Submit to the prize'));
@@ -53,8 +52,7 @@ let PrizeRegisterPiece = React.createClass({
                     {...this.props}
                     enableLocalHashing={false}
                     headerMessage={''}
-                    submitMessage={getLangText('Submit')}
-                    location={location}>
+                    submitMessage={getLangText('Submit')}>
                     <Property
                         name='artist_statement'
                         label={getLangText('Artist statement')}
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
index 7778a8de..78056a1b 100644
--- a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
@@ -38,7 +38,7 @@ const SluiceSelectedPrizeActionButton = React.createClass({
 
         // Can't use default props since those are only created once
         const startLoanDate = this.props.startLoanDate || new Moment();
-        const endLoanDate = this.props.endLoanDate || (new Moment()).add(6, 'months');
+        const endLoanDate = this.props.endLoanDate || new Moment().add(6, 'months');
 
         return (
             <ModalWrapper
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index 111f1290..3c828299 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -183,14 +183,13 @@ let CylandRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
-                                currentUser={currentUser}
+                                {...this.props}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
-                                headerMessage={getLangText('Submit to Cyland Archive')}
-                                submitMessage={getLangText('Submit')}
-                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={location} />
+                                headerMessage={getLangText('Submit to Cyland Archive')}
+                                isFineUploaderActive={true}
+                                submitMessage={getLangText('Submit')} />
                         </Col>
                     </Row>
                 </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
index b2921179..60e5f10d 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
@@ -177,7 +177,7 @@ let IkonotvContractNotifications = React.createClass({
                                 <a href={blob.url_safe} target="_blank">
                                     <Glyphicon glyph='download-alt'/>
                                     <span style={{padding: '0.3em'}}>
-                                        Download PDF version
+                                        {getLangText('Download PDF version')}
                                     </span>
                                 </a>
                             </div>
@@ -194,8 +194,9 @@ let IkonotvContractNotifications = React.createClass({
                     </div>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index a0e4f67f..466aa9fe 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -191,7 +191,7 @@ let IkonotvRegisterPiece = React.createClass({
             const { whitelabel } = this.props;
             const { piece } = this.state;
             const today = new Moment();
-            const endDate = (new Moment()).add(2, 'years');
+            const endDate = new Moment().add(2, 'years');
 
             return (
                 <div data-slide-title={getLangText('Loan')}>
@@ -219,7 +219,7 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
     render() {
-        const { currentUser, location } = this.props;
+        const { location } = this.props;
         const { pageExitWarning, step } = this.state;
 
         return (
@@ -236,14 +236,13 @@ let IkonotvRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
-                                currentUser={currentUser}
+                                {...this.props}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
-                                headerMessage={getLangText('Register work')}
-                                submitMessage={getLangText('Register')}
-                                isFineUploaderActive={true}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={location} />
+                                headerMessage={getLangText('Register work')}
+                                isFineUploaderActive={true}
+                                submitMessage={getLangText('Register')} />
                         </Col>
                     </Row>
                 </div>
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
index 404926f3..4fb89e7c 100644
--- a/js/components/whitelabel/wallet/components/market/market_piece_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -29,7 +29,6 @@ let MarketPieceList = React.createClass({
     render() {
         const {
             currentUser: { email: userEmail },
-            customThumbnailPlaceholder,
             whitelabel: {
                 name: whitelabelName = 'Market',
                 user: whitelabelAdminEmail
@@ -58,7 +57,6 @@ let MarketPieceList = React.createClass({
                 canLoadPieceList={canLoadPieceList}
                 redirectTo="/register_piece?slide_num=0"
                 bulkModalButtonListType={MarketAclButtonList}
-                customThumbnailPlaceholder={customThumbnailPlaceholder}
                 filterParams={filterParams} />
         );
     }
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 4508a278..c5b3d062 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -39,7 +39,6 @@ let WalletApp = React.createClass({
         UserStore.listen(this.onChange);
         WhitelabelStore.listen(this.onChange);
 
-        console.log('fetch');
         UserActions.fetchCurrentUser();
         WhitelabelActions.fetchWhitelabel();
     },
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index a3336d80..8980fd93 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -103,7 +103,7 @@ function _doesObjectListHaveDuplicates(l) {
     // Taken from: http://stackoverflow.com/a/7376645/1263876
     // By casting the array to a set, and then checking if the size of the array
     // shrunk in the process of casting, we can check if there were any duplicates
-    return (new Set(mergedList)).size !== mergedList.length;
+    return new Set(mergedList).size !== mergedList.length;
 }
 
 /**

From b24e66ed112b77676503f0412e90c7ed8d0b6608 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 18 Jan 2016 19:14:34 +0100
Subject: [PATCH 080/197] Fix logout not working properly after moving logic to
 UserStore

---
 js/stores/user_store.js | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/js/stores/user_store.js b/js/stores/user_store.js
index 41a9c962..6289af5e 100644
--- a/js/stores/user_store.js
+++ b/js/stores/user_store.js
@@ -45,25 +45,21 @@ class UserStore {
     }
 
     onLogoutCurrentUser() {
-        this.getInstance()
-            .performLogoutCurrentUser()
-            .then(() => {
-                EventActions.userDidLogout();
-
-                // Reset all stores back to their initial state
-                alt.recycle();
-                altWhitelabel.recycle();
-                altUser.recycle();
-                altThirdParty.recycle();
-
-                // Since we've just logged out, we can set this store's
-                // hasLoaded flag back to true as there is no current user.
-                this.userMeta.hasLoaded = true;
-            });
+        this.getInstance().performLogoutCurrentUser();
     }
 
     onSuccessLogoutCurrentUser() {
-        this.currentUser = {};
+        EventActions.userDidLogout();
+
+        // Reset all stores back to their initial state
+        alt.recycle();
+        altWhitelabel.recycle();
+        altUser.recycle();
+        altThirdParty.recycle();
+
+        // Since we've just logged out, we can set this store's
+        // hasLoaded flag back to true as there is no current user.
+        this.userMeta.hasLoaded = true;
     }
 
     onErrorCurrentUser(err) {

From 3984469f38883ceb4929fc9095bb5e9da61c53b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 19 Jan 2016 09:10:33 +0100
Subject: [PATCH 081/197] Fix input for FacebookShareButton

---
 js/components/ascribe_social_share/facebook_share_button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js
index 682bc6f1..d5fbf699 100644
--- a/js/components/ascribe_social_share/facebook_share_button.js
+++ b/js/components/ascribe_social_share/facebook_share_button.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import FacebookHandler from '../../third_party/facebook';
+import FacebookHandler from '../../third_party/facebook_handler';
 
 import AppConstants from '../../constants/application_constants';
 

From 7e1cfbb4901b0a7337e9d7deedc2df3848239fcd Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 15:00:50 +0100
Subject: [PATCH 082/197] Add AppBase HOC to improve DRYness of functionality
 reused across apps

---
 js/components/app_base.js                     | 55 +++++++++++++++++++
 js/components/ascribe_app.js                  | 31 ++---------
 .../ascribe_buttons/acls/acl_button.js        |  2 +-
 .../prize/portfolioreview/pr_app.js           | 34 ++++++------
 .../prize/simple_prize/prize_app.js           | 28 +++++-----
 js/components/whitelabel/wallet/wallet_app.js | 30 +++++-----
 6 files changed, 105 insertions(+), 75 deletions(-)
 create mode 100644 js/components/app_base.js

diff --git a/js/components/app_base.js b/js/components/app_base.js
new file mode 100644
index 00000000..044b984c
--- /dev/null
+++ b/js/components/app_base.js
@@ -0,0 +1,55 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+import { History } from 'react-router';
+
+import Footer from './footer';
+import GlobalNotification from './global_notification';
+
+import AppConstants from '../constants/application_constants';
+
+
+export default function AppBase(App) {
+    return React.createClass({
+        displayName: 'AppBase',
+
+        propTypes: {
+            history: React.PropTypes.object.isRequired,
+            location: React.PropTypes.object.isRequired,
+            routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+            children: React.PropTypes.oneOfType([
+                React.PropTypes.arrayOf(React.PropTypes.element),
+                React.PropTypes.element
+            ])
+        },
+
+        mixins: [History],
+
+        componentDidMount() {
+            this.history.locationQueue.push(this.props.location);
+        },
+
+        componentWillReceiveProps(nextProps) {
+            const { locationQueue } = this.history;
+            locationQueue.unshift(nextProps.location);
+
+            // Limit the number of locations to keep in memory to avoid too much memory usage
+            if (locationQueue.length > AppConstants.locationThreshold) {
+                locationQueue.length = AppConstants.locationThreshold;
+            }
+        },
+
+        render() {
+            return (
+                <div>
+                    <App {...this.props} />
+                    <Footer />
+                    <GlobalNotification />
+                    <div id="modal" className="container" />
+                </div>
+            );
+        }
+    });
+};
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 774395ae..6d159c26 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -1,39 +1,21 @@
 'use strict';
 
 import React from 'react';
-import { History } from 'react-router';
 
+import AppBase from './app_base';
 import Header from './header';
-import Footer from './footer';
-import GlobalNotification from './global_notification';
 
 import AppConstants from '../constants/application_constants';
 
 
 let AscribeApp = React.createClass({
     propTypes: {
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        routes: React.PropTypes.arrayOf(React.PropTypes.object),
-        location: React.PropTypes.object
-    },
-
-    mixins: [History],
-
-    componentDidMount() {
-        this.history.locationQueue.push(this.props.location);
-    },
-
-    componentWillReceiveProps(nextProps) {
-        const { locationQueue } = this.history;
-        locationQueue.unshift(nextProps.location);
-
-        // Limit the number of locations to keep in memory to avoid too much memory usage
-        if (locationQueue.length > AppConstants.locationThreshold) {
-            locationQueue.length = AppConstants.locationThreshold;
-        }
+        ])
     },
 
     render() {
@@ -46,12 +28,9 @@ let AscribeApp = React.createClass({
                 <div className="ascribe-body">
                     {children}
                 </div>
-                <Footer />
-                <GlobalNotification />
-                <div id="modal" className="container"></div>
             </div>
         );
     }
 });
 
-export default AscribeApp;
+export default AppBase(AscribeApp);
diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js
index 97f2e173..2525c52a 100644
--- a/js/components/ascribe_buttons/acls/acl_button.js
+++ b/js/components/ascribe_buttons/acls/acl_button.js
@@ -14,7 +14,7 @@ import AppConstants from '../../../constants/application_constants';
 import { AclInformationText } from '../../../constants/acl_information_text';
 
 
-export default function ({ action, displayName, title, tooltip }) {
+export default function AclButton({ action, displayName, title, tooltip }) {
     if (AppConstants.aclList.indexOf(action) < 0) {
         console.warn('Your specified aclName did not match a an acl class.');
     }
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index c672bdf5..2fe1c2d6 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -1,28 +1,30 @@
 'use strict';
 
 import React from 'react';
-import GlobalNotification from '../../../global_notification';
-
-import Hero from './components/pr_hero';
-import Header from '../../../header';
 
 import EventActions from '../../../../actions/event_actions';
 
 import UserStore from '../../../../stores/user_store';
 import UserActions from '../../../../actions/user_actions';
 
+import Hero from './components/pr_hero';
+
+import AppBase from '../../../app_base';
+import Header from '../../../header';
+
 import { getSubdomain } from '../../../../utils/general_utils';
 import { getCookie } from '../../../../utils/fetch_api_utils';
 
 
 let PRApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     getInitialState() {
@@ -55,19 +57,19 @@ let PRApp = React.createClass({
         this.setState(state);
     },
 
+
     render() {
-        const { history, children, routes } = this.props;
+        const { children, history, routes } = this.props;
         const { currentUser } = this.state;
+        const subdomain = getSubdomain();
+
         let style = {};
-        let subdomain = getSubdomain();
         let header;
-
-
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
-            header = <Hero currentUser={currentUser} />;
+            header = (<Hero currentUser={currentUser} />);
             style = { paddingTop: '0 !important' };
-        } else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
-            header = <Header routes={routes} />;
+        } else if (currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
+            header = (<Header routes={routes} />);
         } else {
             style = { paddingTop: '0 !important' };
         }
@@ -79,12 +81,10 @@ let PRApp = React.createClass({
                     style={style}
                     className={'container ascribe-prize-app client--' + subdomain}>
                     {children}
-                    <GlobalNotification />
-                    <div id="modal" className="container"></div>
                 </div>
             </div>
         );
     }
 });
 
-export default PRApp;
+export default AppBase(PRApp);
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index d5b55d5f..f1779437 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -1,50 +1,50 @@
 'use strict';
 
 import React from 'react';
+
 import Hero from './components/prize_hero';
+
+import AppBase from '../../../app_base';
 import Header from '../../../header';
-import Footer from '../../../footer';
-import GlobalNotification from '../../../global_notification';
 
 import { getSubdomain } from '../../../../utils/general_utils';
 
 
 let PrizeApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     render() {
-        const { history, routes } = this.props;
-        let header = null;
-        let subdomain = getSubdomain();
+        const { children, history, routes } = this.props;
+        const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
         let path = routes[1] ? routes[1].path : null;
 
+        let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if (!path || history.isActive('/login') || history.isActive('/signup')) {
-            header = <Hero />;
+            header = (<Hero />);
         } else {
-            header = <Header routes={routes}/>;
+            header = (<Header routes={routes} />);
         }
 
         return (
             <div className={'container ascribe-prize-app client--' + subdomain}>
                 {header}
                 {this.props.children}
-                <GlobalNotification />
-                <div id="modal" className="container"></div>
-                <Footer />
+                    {children}
             </div>
         );
     }
 });
 
-export default PrizeApp;
+export default AppBase(PrizeApp);
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index bce7106b..57088969 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -1,41 +1,40 @@
 'use strict';
 
 import React from 'react';
-import Header from '../../header';
-import Footer from '../../footer';
-
-import GlobalNotification from '../../global_notification';
-
 import classNames from 'classnames';
 
+import AppBase from '../../app_base';
+import Header from '../../header';
+
 import { getSubdomain } from '../../../utils/general_utils';
 
 
 let WalletApp = React.createClass({
     propTypes: {
+        history: React.PropTypes.object.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
-        history: React.PropTypes.object,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+        ])
     },
 
     render() {
-        let header = null;
-        let subdomain = getSubdomain();
-        const { history, routes, children } = this.props;
+        const { children, history, routes } = this.props;
+        const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
         let path = routes[1] ? routes[1].path : null;
 
+        let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
             && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
-            header = (<div className="hero"/>);
+            header = (<div className="hero" />);
         } else {
-            header = <Header routes={routes} />;
+            header = (<Header routes={routes} />);
         }
 
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
@@ -45,13 +44,10 @@ let WalletApp = React.createClass({
                 <div className='container'>
                     {header}
                     {children}
-                    <GlobalNotification />
-                    <div id="modal" className="container"></div>
-                    <Footer />
                 </div>
             </div>
         );
     }
 });
 
-export default WalletApp;
+export default AppBase(WalletApp);

From efbc605fc88df0fc7f7f8cc2160b07e54219a863 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 15:04:46 +0100
Subject: [PATCH 083/197] Standardize render structure across main app and
 white label apps

Also fixes some whitelabel landing pages broken from the
standardization and removes unnecessary class names
---
 js/components/ascribe_app.js                  |  6 +-
 .../prize/portfolioreview/pr_app.js           |  9 +--
 .../prize/simple_prize/prize_app.js           |  6 +-
 .../components/23vivi/23vivi_landing.js       |  2 +-
 .../components/cyland/cyland_landing.js       | 64 ++++++++++---------
 js/components/whitelabel/wallet/wallet_app.js |  7 +-
 .../wallet/23vivi/23vivi_custom_style.scss    |  5 ++
 .../wallet/cyland/cyland_custom_style.scss    |  5 ++
 8 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 6d159c26..2e05cc7b 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -22,10 +22,10 @@ let AscribeApp = React.createClass({
         const { children, routes } = this.props;
 
         return (
-            <div className="container ascribe-default-app">
+            <div className="ascribe-default-app">
                 <Header routes={routes} />
-                {/* Routes are injected here */}
-                <div className="ascribe-body">
+                <div className="container ascribe-body">
+                    {/* Routes are injected here */}
                     {children}
                 </div>
             </div>
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index 2fe1c2d6..9637c167 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -75,11 +75,12 @@ let PRApp = React.createClass({
         }
 
         return (
-            <div>
+            <div
+                style={style}
+                className={'ascribe-prize-app'}>
                 {header}
-                <div
-                    style={style}
-                    className={'container ascribe-prize-app client--' + subdomain}>
+                <div className="container ascribe-body">
+                    {/* Routes are injected here */}
                     {children}
                 </div>
             </div>
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index f1779437..e40e8dc8 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -38,10 +38,12 @@ let PrizeApp = React.createClass({
         }
 
         return (
-            <div className={'container ascribe-prize-app client--' + subdomain}>
+            <div className="ascribe-prize-app">
                 {header}
-                {this.props.children}
+                <div className="container ascribe-body">
+                    {/* Routes are injected here */}
                     {children}
+                </div>
             </div>
         );
     }
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
index f6b2d50c..13368549 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -36,7 +36,7 @@ let Vivi23Landing = React.createClass({
 
     render() {
         return (
-            <div className="container ascribe-form-wrapper vivi23-landing">
+            <div className="ascribe-form-wrapper vivi23-landing">
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row vivi23-landing--header">
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 21f8835a..95419bd4 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -57,38 +57,40 @@ let CylandLanding = React.createClass({
         setDocumentTitle('CYLAND MediaArtLab');
 
         return (
-            <div className="container ascribe-form-wrapper cyland-landing">
-                <div className="row">
-                    <div className="col-xs-12">
-                        <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.state.whitelabel.logo} width="400px"/>
-                            <div style={{marginTop: '1em'}}>
-                                {getLangText('Submissions to Cyland Archive are powered by') + ' '}
-                                <span>
-                                    <span className="icon-ascribe-logo"></span>
-                                </span>
+            <div className="container">
+                <div className="ascribe-form-wrapper cyland-landing">
+                    <div className="row">
+                        <div className="col-xs-12">
+                            <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
+                                <img src={this.state.whitelabel.logo} width="400px"/>
+                                <div style={{marginTop: '1em'}}>
+                                    {getLangText('Submissions to Cyland Archive are powered by') + ' '}
+                                    <span>
+                                        <span className="icon-ascribe-logo"></span>
+                                    </span>
+                                </div>
                             </div>
-                        </div>
-                        <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
-                            <div className="col-xs-6">
-                                <p>
-                                    {getLangText('Existing ascribe user?')}
-                                </p>
-                                <LinkContainer to="/login">
-                                    <Button>
-                                        {getLangText('Log in')}
-                                    </Button>
-                                </LinkContainer>
-                            </div>
-                            <div className="col-xs-6">
-                                <p>
-                                    {getLangText('Do you need an account?')}
-                                </p>
-                                <LinkContainer to="/signup">
-                                    <Button>
-                                        {getLangText('Sign up')}
-                                    </Button>
-                                </LinkContainer>
+                            <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
+                                <div className="col-xs-6">
+                                    <p>
+                                        {getLangText('Existing ascribe user?')}
+                                    </p>
+                                    <LinkContainer to="/login">
+                                        <Button>
+                                            {getLangText('Log in')}
+                                        </Button>
+                                    </LinkContainer>
+                                </div>
+                                <div className="col-xs-6">
+                                    <p>
+                                        {getLangText('Do you need an account?')}
+                                    </p>
+                                    <LinkContainer to="/signup">
+                                        <Button>
+                                            {getLangText('Sign up')}
+                                        </Button>
+                                    </LinkContainer>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 57088969..4735bdde 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -40,9 +40,10 @@ let WalletApp = React.createClass({
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
         // we split the path by the first occurring slash and take the first splitter.
         return (
-            <div className={classNames('ascribe-wallet-app', 'route--' + (path ? path.split('/')[0] : 'landing'))}>
-                <div className='container'>
-                    {header}
+            <div className={classNames('ascribe-wallet-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+                {header}
+                <div className="container ascribe-body">
+                    {/* Routes are injected here */}
                     {children}
                 </div>
             </div>
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index a5026272..b6365dd2 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -20,8 +20,13 @@ $vivi23--highlight-color: #de2600;
             vertical-align: middle;
         }
 
+        .hero {
+            display: none;
+        }
+
         .vivi23-landing {
             font-weight: normal;
+            padding: 0 15px;
             text-align: center;
         }
 
diff --git a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
index 9af18fcf..549b2004 100644
--- a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
+++ b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
@@ -178,8 +178,13 @@ $cyland--button-sec-color: #515151;
             vertical-align: middle;
         }
 
+        .hero {
+            display: none;
+        }
+
         .cyland-landing {
             font-weight: normal;
+            padding: 0 15px;
             text-align: center;
         }
     }

From 86ff1f88d03d9042ecc19bd622d49b8a81f62921 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 15:15:33 +0100
Subject: [PATCH 084/197] Fix small issues

---
 js/components/error_not_found_page.js         |  2 +-
 .../components/cyland/cyland_landing.js       | 64 +++++++++----------
 2 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js
index c42d2926..4ea0f4d1 100644
--- a/js/components/error_not_found_page.js
+++ b/js/components/error_not_found_page.js
@@ -21,7 +21,7 @@ let ErrorNotFoundPage = React.createClass({
 
     componentDidMount() {
         // The previous page, if any, is the second item in the locationQueue
-        const { locationQueue: [ _, previousPage ] } = this.history;
+        const { locationQueue: [ , previousPage ] } = this.history;
 
         if (previousPage) {
             console.logGlobal('Page not found', {
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 95419bd4..5f7cfeeb 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -57,40 +57,38 @@ let CylandLanding = React.createClass({
         setDocumentTitle('CYLAND MediaArtLab');
 
         return (
-            <div className="container">
-                <div className="ascribe-form-wrapper cyland-landing">
-                    <div className="row">
-                        <div className="col-xs-12">
-                            <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                                <img src={this.state.whitelabel.logo} width="400px"/>
-                                <div style={{marginTop: '1em'}}>
-                                    {getLangText('Submissions to Cyland Archive are powered by') + ' '}
-                                    <span>
-                                        <span className="icon-ascribe-logo"></span>
-                                    </span>
-                                </div>
+            <div className="ascribe-form-wrapper cyland-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
+                            <img src={this.state.whitelabel.logo} width="400px"/>
+                            <div style={{marginTop: '1em'}}>
+                                {getLangText('Submissions to Cyland Archive are powered by') + ' '}
+                                <span>
+                                    <span className="icon-ascribe-logo"></span>
+                                </span>
                             </div>
-                            <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
-                                <div className="col-xs-6">
-                                    <p>
-                                        {getLangText('Existing ascribe user?')}
-                                    </p>
-                                    <LinkContainer to="/login">
-                                        <Button>
-                                            {getLangText('Log in')}
-                                        </Button>
-                                    </LinkContainer>
-                                </div>
-                                <div className="col-xs-6">
-                                    <p>
-                                        {getLangText('Do you need an account?')}
-                                    </p>
-                                    <LinkContainer to="/signup">
-                                        <Button>
-                                            {getLangText('Sign up')}
-                                        </Button>
-                                    </LinkContainer>
-                                </div>
+                        </div>
+                        <div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
                             </div>
                         </div>
                     </div>

From 9c1b229d8580dc34dc3ea1b1cb11ae27599baf00 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 15:06:26 +0100
Subject: [PATCH 085/197] Forgot to remove unnecessary import

---
 js/components/ascribe_app.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 2e05cc7b..8999246e 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -5,8 +5,6 @@ import React from 'react';
 import AppBase from './app_base';
 import Header from './header';
 
-import AppConstants from '../constants/application_constants';
-
 
 let AscribeApp = React.createClass({
     propTypes: {

From d0d4f773c8ab5384c2da7e5c465f28538b36d0d7 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 15:57:49 +0100
Subject: [PATCH 086/197] Re-add missed fetch for prize during merge

---
 .../components/ascribe_detail/prize_piece_container.js           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 1c44f081..63bc0aec 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -244,6 +244,7 @@ let PrizePieceRatings = React.createClass({
         PrizeStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
+        PrizeActions.fetchPrize();
         this.fetchRatingsIfAuthorized();
     },
 

From 2e8d1faaca9c0876a0069ce7c48f267bd210d7db Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 15:59:43 +0100
Subject: [PATCH 087/197] Remove duplicate onRatingClick missed during merge

---
 .../components/ascribe_detail/prize_piece_container.js     | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index 63bc0aec..bdaf385d 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -296,13 +296,6 @@ let PrizePieceRatings = React.createClass({
         }
     },
 
-    onRatingClick(event, args) {
-        event.preventDefault();
-        PrizeRatingActions.createRating(this.props.piece.id, args.rating).then(
-            this.refreshPieceData()
-        );
-    },
-
     onRatingClick(event, args) {
         event.preventDefault();
         PrizeRatingActions

From c6afea2583a30f0baefd5394edc8a2e90a622f89 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 16:54:08 +0100
Subject: [PATCH 088/197] Calculate max thumbnail size instead of hard coding
 it on the registration form

---
 .../components/pr_forms/pr_register_piece_form.js              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index ee3a78f2..2ef96661 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -193,6 +193,7 @@ const PRRegisterPieceForm = React.createClass({
 
     render() {
         const { location } = this.props;
+        const maxThumbnailSize = AppConstants.fineUploader.validation.workThumbnail.sizeLimit / 1000000;
 
         return (
             <div className="register-piece--form">
@@ -317,7 +318,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={getLangText('Featured Cover photo (max 5MB)')}>
+                        label={`${getLangText('Featured Cover photo')} max ${maxThumbnailSize}MB`}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{

From f8193a5e16ab535ab9d26f63ba334f835c5bcd4d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 19 Jan 2016 18:07:04 +0100
Subject: [PATCH 089/197] Change alignment of global notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use left text alignment for desktop  and center alignment for mobile
notifications.

Also adds a slight transition delay before showing the notification
because react can sometimes be slow at rendering the notification’s
message, making it initially appear invisible.
---
 sass/ascribe_global_notification.scss | 56 ++++++++++++++++-----------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index f07ce217..9f31883c 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -7,23 +7,23 @@
     position: fixed;
     transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
     width: 100%;
-}
 
-.ascribe-global-notification-off {
-    bottom: -3.5em;
-}
+    > div {
+        padding: .5em 1em;
+        text-align: center;
+    }
 
-.ascribe-global-notification-on {
-    bottom: 0;
-}
+    &.ascribe-global-notification-off {
+        bottom: -5em;
+    }
 
-.ascribe-global-notification > div,
-.ascribe-global-notification-bubble > div {
-    display: table-cell;
-    font-size: 1.25em;
-    padding-right: 3em;
-    text-align: left;
-    vertical-align: middle;
+    &.ascribe-global-notification-on {
+        bottom: 0;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.2s;
+    }
 }
 
 .ascribe-global-notification-bubble {
@@ -33,21 +33,33 @@
     color: white;
     display: table;
     height: 3.5em;
+    max-width: 75%;
     position: fixed;
-    right: -50em;
-    transition: 1s right ease;
+    transition: 0.5s right ease;
 
     > div {
         padding: .75em 1.5em;
+        text-align: left;
+    }
+
+    &.ascribe-global-notification-bubble-off {
+        right: -100em;
+    }
+
+    &.ascribe-global-notification-bubble-on {
+        right: 3.5em;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.5s;
     }
 }
 
-.ascribe-global-notification-bubble-off {
-    right: -100em;
-}
-
-.ascribe-global-notification-bubble-on {
-    right: 3.5em;
+.ascribe-global-notification > div,
+.ascribe-global-notification-bubble > div {
+    display: table-cell;
+    font-size: 1.25em;
+    vertical-align: middle;
 }
 
 .ascribe-global-notification-danger {

From 0045dc69811c5a564ef41c7c94d41937eb70f717 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 20 Jan 2016 12:31:02 +0100
Subject: [PATCH 090/197] Add anchorization to whitelabel forms

---
 js/components/ascribe_detail/further_details.js    | 14 +++++++-------
 .../cyland_forms/cyland_additional_data_form.js    |  1 +
 .../ikonotv_forms/ikonotv_artist_details_form.js   |  3 +++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js
index 846385a6..b1d9c637 100644
--- a/js/components/ascribe_detail/further_details.js
+++ b/js/components/ascribe_detail/further_details.js
@@ -66,25 +66,25 @@ let FurtherDetails = React.createClass({
                     <PieceExtraDataForm
                         name='artist_contact_info'
                         title='Artist Contact Info'
-                        handleSuccess={this.showNotification}
                         convertLinks
                         editable={editable}
                         extraData={extraData}
+                        handleSuccess={this.showNotification}
                         pieceId={pieceId} />
                     <PieceExtraDataForm
                         name='display_instructions'
                         title='Display Instructions'
-                        handleSuccess={this.showNotification}
                         editable={editable}
-                        pieceId={pieceId}
-                        extraData={extraData} />
+                        extraData={extraData}
+                        handleSuccess={this.showNotification}
+                        pieceId={pieceId} />
                     <PieceExtraDataForm
                         name='technology_details'
                         title='Technology Details'
-                        handleSuccess={this.showNotification}
                         editable={editable}
-                        pieceId={pieceId}
-                        extraData={extraData} />
+                        extraData={extraData}
+                        handleSuccess={this.showNotification}
+                        pieceId={pieceId} />
                     <Form>
                         <FurtherDetailsFileuploader
                             submitFile={this.submitFile}
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
index 6e643134..c41caa76 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
@@ -134,6 +134,7 @@ let CylandAdditionalDataForm = React.createClass({
                         expanded={!disabled || !!extraData.artist_contact_information}>
                         <InputTextAreaToggable
                             rows={1}
+                            convertLinks
                             defaultValue={extraData.artist_contact_information}
                             placeholder={getLangText('Enter the artist\'s contact information...')} />
                     </Property>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
index 598f5bd0..49ead8ec 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
@@ -110,6 +110,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                         expanded={!disabled || !!extraData.artist_website}>
                         <InputTextAreaToggable
                             rows={1}
+                            convertLinks
                             defaultValue={extraData.artist_website}
                             placeholder={getLangText('The artist\'s website if present...')} />
                     </Property>
@@ -119,6 +120,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                         expanded={!disabled || !!extraData.gallery_website}>
                         <InputTextAreaToggable
                             rows={1}
+                            convertLinks
                             defaultValue={extraData.gallery_website}
                             placeholder={getLangText('The website of any related Gallery or Museum')} />
                     </Property>
@@ -128,6 +130,7 @@ let IkonotvArtistDetailsForm = React.createClass({
                         expanded={!disabled || !!extraData.additional_websites}>
                         <InputTextAreaToggable
                             rows={1}
+                            convertLinks
                             defaultValue={extraData.additional_websites}
                             placeholder={getLangText('Enter additional Websites/Publications if any')} />
                     </Property>

From a85c70798e7b3f83cbda89d59a6d0f6cfaef1692 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 20 Jan 2016 12:32:49 +0100
Subject: [PATCH 091/197] Fix mistaken check for form buttons

---
 js/components/ascribe_forms/form.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 148b2e2d..dc870d5a 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -205,16 +205,15 @@ let Form = React.createClass({
     },
 
     getButtons() {
-        if (this.state.submitted){
+        if (this.state.submitted) {
             return this.props.spinner;
         }
-        if ('buttons' in this.props) {
+        if (this.props.buttons !== undefined) {
             return this.props.buttons;
         }
-        let buttons = null;
 
-        if (this.state.edited && !this.props.disabled){
-            buttons = (
+        if (this.state.edited && !this.props.disabled) {
+            return (
                 <div className="row" style={{margin: 0}}>
                     <p className="pull-right">
                         <Button
@@ -230,9 +229,9 @@ let Form = React.createClass({
                     </p>
                 </div>
             );
-
+        } else {
+            return null;
         }
-        return buttons;
     },
 
     getErrors() {

From b8d6a79402d2ba814b4350eac8ebb265317cd8cc Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 20 Jan 2016 15:11:06 +0100
Subject: [PATCH 092/197] Update README for visual regression testing

---
 README.md | 69 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index e07eca0d..15736654 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,19 @@
 Introduction
 ============
 
-Onion is the web client for Ascribe. The idea is to have a well documented,
-easy to test, easy to hack, JavaScript application.
+Onion is the web client for Ascribe. The idea is to have a well documented, modern, easy to test, easy to hack, JavaScript application.
 
-The code is JavaScript ECMA 6.
+The code is JavaScript 2015 / ECMAScript 6.
 
 
 Getting started
 ===============
+
 Install some nice extension for Chrom(e|ium):
 
 - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
-  
+- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
+
 ```bash
 git clone git@github.com:ascribe/onion.git
 cd onion
@@ -37,17 +38,34 @@ Additionally, to work on the white labeling functionality, you need to edit your
 
 JavaScript Code Conventions
 ===========================
+
 For this project, we're using:
 
 * 4 Spaces
-* We use ES6
+* ES6
 * We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
 * We don't use camel case for file naming but in everything Javascript related
-* We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
-* We don't use Javascript's `Date` object, as its interface introduced bugs previously and we're including `momentjs` for other dependencies anyways
+* We use `momentjs` instead of Javascript's `Date` object, as the native `Date` interface previously introduced bugs and we're including `momentjs` for other dependencies anyway
+
+Make sure to check out the [style guide](https://github.com/ascribe/javascript).
+
+Linting
+-------
+
+We use [ESLint](https://github.com/eslint/eslint) with our own [custom ruleset](.eslintrc).
+
+
+SCSS Code Conventions
+=====================
+Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
+
+Some interesting links:
+* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
+
 
 Branch names
-=====================
+============
+
 Since we moved to Github, we cannot create branch names automatically with JIRA anymore.
 To not lose context, but still be able to switch branches quickly using a ticket's number, we're recommending the following rules when naming our branches in onion.
 
@@ -58,22 +76,21 @@ AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
 where `brief-and-sane-description-of-the-ticket` does not need to equal to the ticket's title.
 This allows JIRA to still track branches and pull-requests while allowing us to keep our peace of mind.
 
+
 Example
--------------
+-------
+
 **JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
 
 **Github branch name:** `AD-1242-caching-solution-for-stores`
 
-SCSS Code Conventions
-=====================
-Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
-
-Some interesting links:
-* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
-
 
 Testing
-===============
+=======
+
+Unit Testing
+------------
+
 We're using Facebook's jest to do testing as it integrates nicely with react.js as well.
 
 Tests are always created per directory by creating a `__tests__` folder. To test a specific file, a `<file_name>_tests.js` file needs to be created.
@@ -83,7 +100,15 @@ This is due to the fact that jest's function mocking and ES6 module syntax are [
 
 Therefore, to require a module in your test file, you need to use CommonJS's `require` syntax. Except for this, all tests can be written in ES6 syntax.
 
-## Workflow
+Visual Regression Testing
+-------------------------
+
+We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports PhantomJS and SauceLabs.
+
+
+Workflow
+========
+
 Generally, when you're runing `gulp serve`, all tests are being run.
 If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run `gulp jest:watch`.
 
@@ -134,9 +159,16 @@ A: Easily by starting the your gulp process with the following command:
 ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
 ```
 
+Or, by adding these two your environment variables:
+```
+ONION_BASE_URL='/'
+ONION_SERVER_URL='http://localhost.com:8000/'
+```
+
 Q: I want to know all dependencies that get bundled into the live build.
 A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
 
+
 Reading list
 ============
 
@@ -149,7 +181,6 @@ Start here
 - [alt.js](http://alt.js.org/)
 - [alt.js readme](https://github.com/goatslacker/alt)
 
-
 Moar stuff
 ----------
 

From 37f5432e7514707ca4e269eca41cb31b90d08b2b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 20 Jan 2016 21:18:24 +0100
Subject: [PATCH 093/197] Add Gemini configuration for desktop and mobile on
 phantoms

---
 .gemini.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .gemini.yml

diff --git a/.gemini.yml b/.gemini.yml
new file mode 100644
index 00000000..5af1ef27
--- /dev/null
+++ b/.gemini.yml
@@ -0,0 +1,14 @@
+rootUrl: https://www.ascribe.ninja/app
+
+browsers:
+    PhantomJSDesktop:
+        screenshotsDir: './gemini/screens/desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    PhantomJSMobile:
+        screenshotsDir: './gemini/screens/mobile'
+        windowSize: 767x1364
+        desiredCapabilities:
+            browserName: phantomjs

From 32a8e2d78936f53290ec48e38f1b6c5ee0965ac4 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 11:04:27 +0100
Subject: [PATCH 094/197] Add rule for branch naming with Github issues

---
 README.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e07eca0d..478562d3 100644
--- a/README.md
+++ b/README.md
@@ -48,15 +48,18 @@ For this project, we're using:
 
 Branch names
 =====================
-Since we moved to Github, we cannot create branch names automatically with JIRA anymore.
-To not lose context, but still be able to switch branches quickly using a ticket's number, we're recommending the following rules when naming our branches in onion.
+
+To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches:
 
 ```
+// For issues logged in Github:
+AG-<Github-issue-id>-brief-and-sane-description-of-the-ticket
+
+// For issues logged in JIRA:
 AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
 ```
 
-where `brief-and-sane-description-of-the-ticket` does not need to equal to the ticket's title.
-This allows JIRA to still track branches and pull-requests while allowing us to keep our peace of mind.
+where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title.
 
 Example
 -------------

From af59531fe7a498d126cd481d98ae96f9ade7364f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 12:24:15 +0100
Subject: [PATCH 095/197] Move fine uploader validation constants into their
 own file

---
 .../further_details_fileuploader.js           | 20 ++++++-----
 .../ascribe_forms/form_create_contract.js     | 19 +++++-----
 .../ascribe_forms/form_register_piece.js      | 16 +++++----
 .../ascribe_forms/input_fineuploader.js       |  6 +---
 .../contract_settings_update_button.js        | 17 ++++-----
 .../react_s3_fine_uploader.js                 |  2 +-
 .../pr_forms/pr_register_piece_form.js        | 36 ++++++++++---------
 js/constants/application_constants.js         | 17 ---------
 js/constants/uploader_constants.js            | 32 +++++++++++++++++
 9 files changed, 94 insertions(+), 71 deletions(-)
 create mode 100644 js/constants/uploader_constants.js

diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index 8546e43f..61e0724f 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -8,6 +8,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -15,23 +16,26 @@ import { getLangText } from '../../utils/lang_utils';
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        pieceId: React.PropTypes.number.isRequired,
+
+        areAssetsDownloadable: React.PropTypes.bool,
+        editable: React.PropTypes.bool,
+        isReadyForFormSubmission: React.PropTypes.func,
         label: React.PropTypes.string,
-        pieceId: React.PropTypes.number,
+        multiple: React.PropTypes.bool,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
+        onValidationFailed: React.PropTypes.func,
         setIsUploadReady: React.PropTypes.func,
         submitFile: React.PropTypes.func,
-        onValidationFailed: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        editable: React.PropTypes.bool,
-        multiple: React.PropTypes.bool,
-        areAssetsDownloadable: React.PropTypes.bool
+        validation: ReactS3FineUploader.propTypes.validation
     },
 
     getDefaultProps() {
         return {
             areAssetsDownloadable: true,
             label: getLangText('Additional files'),
-            multiple: false
+            multiple: false,
+            validation: validationTypes.additionalData
         };
     },
 
@@ -61,7 +65,7 @@ let FurtherDetailsFileuploader = React.createClass({
                         url: ApiUrls.blob_otherdatas,
                         pieceId: this.props.pieceId
                     }}
-                    validation={AppConstants.fineUploader.validation.additionalData}
+                    validation={this.props.validation}
                     submitFile={this.props.submitFile}
                     onValidationFailed={this.props.onValidationFailed}
                     setIsUploadReady={this.props.setIsUploadReady}
diff --git a/js/components/ascribe_forms/form_create_contract.js b/js/components/ascribe_forms/form_create_contract.js
index fcd874da..cbdd12c3 100644
--- a/js/components/ascribe_forms/form_create_contract.js
+++ b/js/components/ascribe_forms/form_create_contract.js
@@ -2,19 +2,20 @@
 
 import React from 'react';
 
-import Form from '../ascribe_forms/form';
-import Property from '../ascribe_forms/property';
+import ContractListActions from '../../actions/contract_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import ContractListActions from '../../actions/contract_list_actions';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import InputFineUploader from './input_fineuploader';
 
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
@@ -78,8 +79,8 @@ let CreateContractForm = React.createClass({
                             url: ApiUrls.blob_contracts
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            itemLimit: validationTypes.additionalData.itemLimit,
+                            sizeLimit: validationTypes.additionalData.sizeLimit,
                             allowedExtensions: ['pdf']
                         }}
                         areAssetsDownloadable={true}
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 596f8a56..ae598eee 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -8,12 +8,16 @@ import UserActions from '../../actions/user_actions';
 import Form from './form';
 import Property from './property';
 import InputFineUploader from './input_fineuploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import FormSubmitButton from '../ascribe_buttons/form_submit_button';
 
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import AscribeSpinner from '../ascribe_spinner';
+
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
-import AscribeSpinner from '../ascribe_spinner';
+import { validationParts, validationTypes } from '../../constants/uploader_constants';
 
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
@@ -180,7 +184,7 @@ let RegisterPieceForm = React.createClass({
                         createBlobRoutine={{
                             url: ApiUrls.blob_digitalworks
                         }}
-                        validation={AppConstants.fineUploader.validation.registerWork}
+                        validation={validationTypes.registerWork}
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
@@ -206,9 +210,9 @@ let RegisterPieceForm = React.createClass({
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
-                            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                            itemLimit: validationTypes.workThumbnail.itemLimit,
+                            sizeLimit: validationTypes.workThumbnail.sizeLimit,
+                            allowedExtensions: validationParts.allowedExtensions.images
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
                         fileClassToUpload={{
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index fa9c72b6..80fa1891 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -28,11 +28,7 @@ const InputFineUploader = React.createClass({
         createBlobRoutine: shape({
             url: string
         }),
-        validation: shape({
-            itemLimit: number,
-            sizeLimit: string,
-            allowedExtensions: arrayOf(string)
-        }),
+        validation: ReactS3FineUploader.propTypes.validation,
 
         // isFineUploaderActive is used to lock react fine uploader in case
         // a user is actually not logged in already to prevent him from droping files
diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js
index f3e92c69..dc652b9b 100644
--- a/js/components/ascribe_settings/contract_settings_update_button.js
+++ b/js/components/ascribe_settings/contract_settings_update_button.js
@@ -2,17 +2,18 @@
 
 import React from 'react';
 
-import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import ContractListActions from '../../actions/contract_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -68,8 +69,8 @@ let ContractSettingsUpdateButton = React.createClass({
                    url: ApiUrls.blob_contracts
                }}
                validation={{
-                   itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                   sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                   itemLimit: validationTypes.registerWork.itemLimit,
+                   sizeLimit: validationTypes.additionalData.sizeLimit,
                    allowedExtensions: ['pdf']
                }}
                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index feb0479d..efd6c7b6 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -91,7 +91,7 @@ const ReactS3FineUploader = React.createClass({
         }),
         validation: shape({
             itemLimit: number,
-            sizeLimit: string,
+            sizeLimit: number,
             allowedExtensions: arrayOf(string)
         }),
         messages: shape({
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index 2ef96661..12d62944 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -3,19 +3,21 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import Form from '../../../../../ascribe_forms/form';
 import Property from '../../../../../ascribe_forms/property';
 import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
 
-import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
 import InputFineuploader from '../../../../../ascribe_forms/input_fineuploader';
+import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import AscribeSpinner from '../../../../../ascribe_spinner';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
-
-import AppConstants from '../../../../../../constants/application_constants';
 import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+import { validationParts, validationTypes } from '../../../../../../constants/uploader_constants';
 
 import requests from '../../../../../../utils/requests';
 
@@ -193,7 +195,7 @@ const PRRegisterPieceForm = React.createClass({
 
     render() {
         const { location } = this.props;
-        const maxThumbnailSize = AppConstants.fineUploader.validation.workThumbnail.sizeLimit / 1000000;
+        const maxThumbnailSize = validationTypes.workThumbnail.sizeLimit / 1000000;
 
         return (
             <div className="register-piece--form">
@@ -305,8 +307,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'digitalwork'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                itemLimit: validationTypes.registerWork.itemLimit,
+                                sizeLimit: validationTypes.additionalData.sizeLimit,
                                 allowedExtensions: ['pdf']
                             }}
                             location={location}
@@ -318,7 +320,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={`${getLangText('Featured Cover photo')} max ${maxThumbnailSize}MB`}>
+                        label={`${getLangText('Featured Cover photo')} (max ${maxThumbnailSize}MB)`}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{
@@ -331,9 +333,9 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'thumbnail'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
-                                allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                                itemLimit: validationTypes.workThumbnail.itemLimit,
+                                sizeLimit: validationTypes.workThumbnail.sizeLimit,
+                                allowedExtensions: validationParts.allowedExtensions.images
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -356,8 +358,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'otherdata'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
+                                itemLimit: validationParts.itemLimit.single,
+                                sizeLimit: validationTypes.additionalData.sizeLimit
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -378,9 +380,9 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'otherdata'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
-                                allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                                itemLimit: validationParts.itemLimit.single,
+                                sizeLimit: validationTypes.additionalData.sizeLimit,
+                                allowedExtensions: validationParts.allowedExtensions.images
                             }}
                             location={location}
                             fileClassToUpload={{
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index a230eb0c..63aaf3e7 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -68,23 +68,6 @@ const constants = {
     // Source: http://www.w3schools.com/tags/att_input_type.asp
     'possibleInputTypes': ['button', 'checkbox', 'color', 'date', 'datetime', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'],
 
-    'fineUploader': {
-        'validation': {
-            'additionalData': {
-                'itemLimit': 100,
-                'sizeLimit': '25000000000'
-            },
-            'registerWork': {
-                'itemLimit': 1,
-                'sizeLimit': '25000000000'
-            },
-            'workThumbnail': {
-                'itemLimit': 1,
-                'sizeLimit': '5000000'
-            }
-        }
-    },
-
     'copyrightAssociations': ['ARS', 'DACS', 'Bildkunst', 'Pictoright', 'SODRAC', 'Copyright Agency/Viscopy', 'SAVA',
         'Bildrecht GmbH', 'SABAM', 'AUTVIS', 'CREAIMAGEN', 'SONECA', 'Copydan', 'EAU', 'Kuvasto', 'GCA', 'HUNGART',
         'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',
diff --git a/js/constants/uploader_constants.js b/js/constants/uploader_constants.js
new file mode 100644
index 00000000..5dd1d109
--- /dev/null
+++ b/js/constants/uploader_constants.js
@@ -0,0 +1,32 @@
+'use strict';
+
+export const validationParts = {
+    allowedExtensions: {
+        images: ['png', 'jpg', 'jpeg', 'gif']
+    },
+    itemLimit: {
+        single: 1,
+        multiple: 100
+    },
+    sizeLimit: {
+        default: 25000000000,
+        thumbnail: 5000000
+    }
+};
+
+const { allowedExtensions, itemLimit, sizeLimit } = validationParts;
+
+export const validationTypes = {
+    additionalData: {
+        itemLimit: itemLimit.multiple,
+        sizeLimit: sizeLimit.default
+    },
+    registerWork: {
+        itemLimit: itemLimit.single,
+        sizeLimit: sizeLimit.default
+    },
+    workThumbnail: {
+        itemLimit: itemLimit.single,
+        sizeLimit: sizeLimit.thumbnail
+    }
+};

From 4dd701a414f39a6b2131ba8b71b8c2d9bb0a2f80 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 12:24:31 +0100
Subject: [PATCH 096/197] Add extension validation to marketplace thumbnail
 uploader

---
 .../market_forms/market_additional_data_form.js     | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
index 24a70445..a7bbb56d 100644
--- a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
@@ -11,14 +11,14 @@ import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_t
 import Form from '../../../../../ascribe_forms/form';
 import Property from '../../../../../ascribe_forms/property';
 
-import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
-
 import AscribeSpinner from '../../../../../ascribe_spinner';
 
 import ApiUrls from '../../../../../../constants/api_urls';
-import AppConstants from '../../../../../../constants/application_constants';
+import { validationParts, validationTypes } from '../../../../../../constants/uploader_constants';
 
 import requests from '../../../../../../utils/requests';
+
+import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';
 import { getLangText } from '../../../../../../utils/lang_utils';
 
@@ -170,7 +170,12 @@ let MarketAdditionalDataForm = React.createClass({
                         otherData={otherData}
                         pieceId={pieceId}
                         setIsUploadReady={this.setIsUploadReady}
-                        submitFile={function () {}} />
+                        submitFile={function () {}}
+                        validation={{
+                            itemLimit: validationTypes.workThumbnail.itemLimit,
+                            sizeLimit: validationTypes.workThumbnail.sizeLimit,
+                            allowedExtensions: validationParts.allowedExtensions.images
+                        }} />
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Bio')}

From 80b4e2243526abea55558abc13c448701b48321d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 Jan 2016 13:53:14 +0100
Subject: [PATCH 097/197] Cancel dragged invalid file with proper messaging

---
 .../ascribe_uploader/react_s3_fine_uploader.js | 18 ++++++++++++++----
 sass/ascribe_global_notification.scss          |  4 ++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index efd6c7b6..9c34dbbd 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -518,16 +518,26 @@ const ReactS3FineUploader = React.createClass({
     },
 
     isFileValid(file) {
-        if (file.size > this.props.validation.sizeLimit) {
-            const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
+        let { validation, onValidationFailed } = this.props;
+
+        if (file.size > validation.sizeLimit) {
+            const fileSizeInMegaBytes = validation.sizeLimit / 1000000;
 
             const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
             GlobalNotificationActions.appendGlobalNotification(notification);
 
-            if (typeof this.props.onValidationFailed === 'function') {
-                this.props.onValidationFailed(file);
+            if (typeof onValidationFailed === 'function') {
+                onValidationFailed(file);
             }
 
+            return false;
+        } else if (validation.allowedExtensions.indexOf(file.type) === -1) {
+
+            const prettyAllowedExtensions = validation.allowedExtensions.join(', ');
+
+            const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${prettyAllowedExtensions}`), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
             return false;
         } else {
             return true;
diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index 5286a32c..dda29503 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -7,6 +7,8 @@
     position: fixed;
     transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
     width: 100%;
+
+    z-index: 9999;
 }
 
 .ascribe-global-notification-off {
@@ -37,6 +39,8 @@
     right: -50em;
     transition: 1s right ease;
 
+    z-index: 9999;
+
     > div {
         padding: .75em 1.5em;
     }

From 9b1e6cc8a1f1c7d19b498c7b2fde9738f2c3eca8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 15:11:19 +0100
Subject: [PATCH 098/197] Small stylistic changes to Header and NavRoutes

---
 js/components/header.js                | 29 ++++++++++++++++----------
 js/components/nav_routes_links.js      | 20 +++++++++---------
 js/components/nav_routes_links_link.js | 10 ++++-----
 3 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/js/components/header.js b/js/components/header.js
index c16cba86..68f50f7c 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -93,16 +93,16 @@ let Header = React.createClass({
                     <img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
                 </Link>
             );
+        } else {
+            return (
+                <span>
+                    <Link className="icon-ascribe-logo" to="/collection"/>
+                </span>
+            );
         }
-
-        return (
-            <span>
-                <Link className="icon-ascribe-logo" to="/collection"/>
-            </span>
-        );
     },
 
-    getPoweredBy(){
+    getPoweredBy() {
         return (
             <AclProxy
                 aclObject={this.state.whitelabel}
@@ -159,7 +159,8 @@ let Header = React.createClass({
         let account;
         let signup;
         let navRoutesLinks;
-        if (this.state.currentUser.username){
+
+        if (this.state.currentUser.username) {
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
@@ -195,9 +196,15 @@ let Header = React.createClass({
                     </LinkContainer>
                 </DropdownButton>
             );
-            navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
-        }
-        else {
+
+            navRoutesLinks = (
+                <NavRoutesLinks
+                    navbar
+                    right
+                    routes={this.props.routes}
+                    userAcl={this.state.currentUser.acl} />
+            );
+        } else {
             account = (
                 <LinkContainer
                     to="/login">
diff --git a/js/components/nav_routes_links.js b/js/components/nav_routes_links.js
index b2c9d9c3..2a78a337 100644
--- a/js/components/nav_routes_links.js
+++ b/js/components/nav_routes_links.js
@@ -29,28 +29,28 @@ let NavRoutesLinks = React.createClass({
      * @return {Array}         Array of ReactElements that can be displayed to the user
      */
     extractLinksFromRoutes(node, userAcl, i) {
-        if(!node) {
+        if (!node) {
             return;
         }
 
-        let links = node.childRoutes.map((child, j) => {
+        const links = node.childRoutes.map((child, j) => {
+            const { aclName, headerTitle, path, childRoutes } = child;
             let childrenFn = null;
-            let { aclName, headerTitle, path, childRoutes } = child;
 
             // If the node has children that could be rendered, then we want
             // to execute this function again with the child as the root
             //
             // Otherwise we'll just pass childrenFn as false
-            if(child.childRoutes && child.childRoutes.length > 0) {
+            if (child.childRoutes && child.childRoutes.length) {
                 childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
             }
 
             // We validate if the user has set the title correctly,
             // otherwise we're not going to render his route
-            if(headerTitle && typeof headerTitle === 'string') {
+            if (headerTitle && typeof headerTitle === 'string') {
                 // if there is an aclName present on the route definition,
                 // we evaluate it against the user's acl
-                if(aclName && typeof aclName !== 'undefined') {
+                if (aclName && typeof aclName !== 'undefined') {
                     return (
                         <AclProxy
                             key={j}
@@ -60,7 +60,7 @@ let NavRoutesLinks = React.createClass({
                                 headerTitle={headerTitle}
                                 routePath={'/' + path}
                                 depth={i}
-                                children={childrenFn}/>
+                                children={childrenFn} />
                         </AclProxy>
                     );
                 } else {
@@ -70,7 +70,7 @@ let NavRoutesLinks = React.createClass({
                             headerTitle={headerTitle}
                             routePath={'/' + path}
                             depth={i}
-                            children={childrenFn}/>
+                            children={childrenFn} />
                     );
                 }
             } else {
@@ -84,7 +84,7 @@ let NavRoutesLinks = React.createClass({
     },
 
     render() {
-        let {routes, userAcl} = this.props;
+        const {routes, userAcl} = this.props;
 
         return (
             <Nav {...this.props}>
@@ -94,4 +94,4 @@ let NavRoutesLinks = React.createClass({
     }
 });
 
-export default NavRoutesLinks;
\ No newline at end of file
+export default NavRoutesLinks;
diff --git a/js/components/nav_routes_links_link.js b/js/components/nav_routes_links_link.js
index 11235ccd..eef98e59 100644
--- a/js/components/nav_routes_links_link.js
+++ b/js/components/nav_routes_links_link.js
@@ -23,18 +23,18 @@ let NavRoutesLinksLink = React.createClass({
     },
 
     render() {
-        let { children, headerTitle, depth, routePath } = this.props;
+        const { children, headerTitle, depth, routePath } = this.props;
 
         // if the route has children, we're returning a DropdownButton that will get filled
         // with MenuItems
-        if(children) {
+        if (children) {
             return (
                 <DropdownButton title={headerTitle}>
                     {children}
                 </DropdownButton>
             );
         } else {
-            if(depth === 1) {
+            if (depth === 1) {
                 // if the node's child is actually a node of level one (a child of a node), we're
                 // returning a DropdownButton matching MenuItem
                 return (
@@ -42,7 +42,7 @@ let NavRoutesLinksLink = React.createClass({
                         <MenuItem>{headerTitle}</MenuItem>
                     </LinkContainer>
                 );
-            } else if(depth === 0) {
+            } else if (depth === 0) {
                 return (
                     <LinkContainer to={routePath}>
                         <NavItem>{headerTitle}</NavItem>
@@ -55,4 +55,4 @@ let NavRoutesLinksLink = React.createClass({
     }
 });
 
-export default NavRoutesLinksLink;
\ No newline at end of file
+export default NavRoutesLinksLink;

From b81cd76d10058cc8b37541ae4385c9755917bf84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 Jan 2016 15:17:19 +0100
Subject: [PATCH 099/197] Change language in detail pages:

- "BY" => "CREATED BY"
- "REGISTREE" => "ASCRIBED BY"
---
 js/components/ascribe_detail/edition.js         | 2 +-
 js/components/ascribe_detail/piece_container.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 803d73bb..df9d41a0 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -70,7 +70,7 @@ let Edition = React.createClass({
                     <div className="ascribe-detail-header">
                         <hr className="hidden-print" style={{marginTop: 0}}/>
                         <h1 className="ascribe-detail-title">{edition.title}</h1>
-                        <DetailProperty label="BY" value={edition.artist_name} />
+                        <DetailProperty label="CREATED BY" value={edition.artist_name} />
                         <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
                         <hr/>
                     </div>
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index f7ef024f..8ee3111f 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -269,7 +269,7 @@ let PieceContainer = React.createClass({
                         <div className="ascribe-detail-header">
                             <hr className="hidden-print" style={{marginTop: 0}} />
                             <h1 className="ascribe-detail-title">{piece.title}</h1>
-                            <DetailProperty label="BY" value={piece.artist_name} />
+                            <DetailProperty label="CREATED BY" value={piece.artist_name} />
                             <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
                             {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
                             <hr/>
@@ -277,7 +277,7 @@ let PieceContainer = React.createClass({
                         }
                     subheader={
                         <div className="ascribe-detail-header">
-                            <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
+                            <DetailProperty label={getLangText('ASCRIBED BY')} value={ piece.user_registered } />
                             <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
                             <LicenseDetail license={piece.license_type} />
                         </div>

From d9755f35636eaaead32b37253c6aa7f9e7ced33a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 Jan 2016 16:24:17 +0100
Subject: [PATCH 100/197] Extract file extension from amazon S3 link

---
 js/components/ascribe_detail/media_container.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index e4270132..cb86e558 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -14,7 +14,9 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
 import AclProxy from '../acl_proxy';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang_utils';
+import { extractFileExtensionFromString } from '../../utils/file_utils';
+
 
 const EMBED_IFRAME_HEIGHT = {
     video: 315,
@@ -63,6 +65,7 @@ let MediaContainer = React.createClass({
         // We also force uniqueness of usernames, so this check is safe to dtermine if the
         // content was registered by the current user.
         const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
+        const fileExtension = extractFileExtensionFromString(content.digital_work.url);
 
         let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
             content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@@ -120,7 +123,7 @@ let MediaContainer = React.createClass({
                             className="ascribe-margin-1px"
                             href={content.digital_work.url}
                             target="_blank">
-                            {getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
+                            {getLangText('Download')} .{fileExtension} <Glyphicon glyph="cloud-download"/>
                         </Button>
                     </AclProxy>
                     {embed}

From a94098c0a0f088a06a41196efb68842af50d9a1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 21 Jan 2016 16:32:59 +0100
Subject: [PATCH 101/197] This is only for heroku


From 9559bc09b4dd99dce4afea56f108f60f43e7c648 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 16:47:35 +0100
Subject: [PATCH 102/197] Disable 'Collection' header item when no pieces are
 found for the user
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The disabling only happens when the piece list is fetched, which may
not happen immediately in some cases (ie. logged in user goes straight
to another person’s edition first). We’re not able to fetch the piece
list immediately, as some white labels apply default filters on the
piece list which forces them to wait until they can begin fetching
their piece lists.
---
 js/components/header.js                       | 31 +++++++---
 js/components/nav_routes_links.js             | 61 +++++++++++++------
 js/components/nav_routes_links_link.js        | 23 ++++---
 .../whitelabel/prize/prize_routes.js          |  6 +-
 .../whitelabel/wallet/wallet_routes.js        | 15 +++--
 js/routes.js                                  |  3 +-
 6 files changed, 94 insertions(+), 45 deletions(-)

diff --git a/js/components/header.js b/js/components/header.js
index 68f50f7c..d2ecb76b 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -18,6 +18,8 @@ import AclProxy from './acl_proxy';
 
 import EventActions from '../actions/event_actions';
 
+import PieceListStore from '../stores/piece_list_store';
+
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
@@ -43,12 +45,17 @@ let Header = React.createClass({
 
     getInitialState() {
         return mergeOptions(
+            PieceListStore.getState(),
             WhitelabelStore.getState(),
             UserStore.getState()
         );
     },
 
     componentDidMount() {
+        // Listen to the piece list store, but don't fetch immediately to avoid
+        // conflicts with routes that may need to wait to load the piece list
+        PieceListStore.listen(this.onChange);
+
         UserStore.listen(this.onChange);
         UserActions.fetchCurrentUser.defer();
 
@@ -75,11 +82,16 @@ let Header = React.createClass({
     },
 
     componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
         WhitelabelStore.unlisten(this.onChange);
         //history.unlisten(this.onRouteChange);
     },
 
+    onChange(state) {
+        this.setState(state);
+    },
+
     getLogo() {
         let { whitelabel } = this.state;
 
@@ -117,10 +129,6 @@ let Header = React.createClass({
         );
     },
 
-    onChange(state) {
-        this.setState(state);
-    },
-
     onMenuItemClick() {
         /*
         This is a hack to make the dropdown close after clicking on an item
@@ -156,16 +164,17 @@ let Header = React.createClass({
     },
 
     render() {
+        const { currentUser, unfilteredPieceListCount } = this.state;
         let account;
         let signup;
         let navRoutesLinks;
 
-        if (this.state.currentUser.username) {
+        if (currentUser.username) {
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
                     eventKey="1"
-                    title={this.state.currentUser.username}>
+                    title={currentUser.username}>
                     <LinkContainer
                         to="/settings"
                         onClick={this.onMenuItemClick}>
@@ -175,7 +184,7 @@ let Header = React.createClass({
                         </MenuItem>
                     </LinkContainer>
                     <AclProxy
-                        aclObject={this.state.currentUser.acl}
+                        aclObject={currentUser.acl}
                         aclName="acl_view_settings_contract">
                         <LinkContainer
                             to="/contract_settings"
@@ -197,12 +206,18 @@ let Header = React.createClass({
                 </DropdownButton>
             );
 
+            // Let's assume that if the piece list hasn't loaded yet (ie. when unfilteredPieceListCount === -1)
+            // then the user has pieces
+            // FIXME: this doesn't work that well as the user may not load their piece list
+            // until much later, so we would show the 'Collection' header as available until
+            // they actually click on it and get redirected to piece registration.
             navRoutesLinks = (
                 <NavRoutesLinks
                     navbar
                     right
+                    hasPieces={!!unfilteredPieceListCount}
                     routes={this.props.routes}
-                    userAcl={this.state.currentUser.acl} />
+                    userAcl={currentUser.acl} />
             );
         } else {
             account = (
diff --git a/js/components/nav_routes_links.js b/js/components/nav_routes_links.js
index 2a78a337..676a9896 100644
--- a/js/components/nav_routes_links.js
+++ b/js/components/nav_routes_links.js
@@ -11,14 +11,33 @@ import AclProxy from './acl_proxy';
 import { sanitizeList } from '../utils/general_utils';
 
 
+const DISABLE_ENUM = ['hasPieces', 'noPieces'];
+
 let NavRoutesLinks = React.createClass({
     propTypes: {
+        hasPieces: React.PropTypes.bool,
         routes: React.PropTypes.arrayOf(React.PropTypes.object),
         userAcl: React.PropTypes.object
     },
 
+    isRouteDisabled(disableOn) {
+        const { hasPieces } = this.props;
+
+        if (disableOn) {
+            if (!DISABLE_ENUM.includes(disableOn)) {
+                throw new Error(`"disableOn" must be one of: [${DISABLE_ENUM.join(', ')}] got "${disableOn}" instead`);
+            }
+
+            if (disableOn === 'hasPieces') {
+                return hasPieces;
+            } else if (disableOn === 'noPieces') {
+                return !hasPieces;
+            }
+        }
+    },
+
     /**
-     * This method generales a bunch of react-bootstrap specific links
+     * This method generates a bunch of react-bootstrap specific links
      * from the routes we defined in one of the specific routes.js file
      *
      * We can define a headerTitle as well as a aclName and according to that the
@@ -34,20 +53,29 @@ let NavRoutesLinks = React.createClass({
         }
 
         const links = node.childRoutes.map((child, j) => {
-            const { aclName, headerTitle, path, childRoutes } = child;
-            let childrenFn = null;
-
-            // If the node has children that could be rendered, then we want
-            // to execute this function again with the child as the root
-            //
-            // Otherwise we'll just pass childrenFn as false
-            if (child.childRoutes && child.childRoutes.length) {
-                childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
-            }
+            const { aclName, disableOn, headerTitle, path, childRoutes } = child;
 
             // We validate if the user has set the title correctly,
             // otherwise we're not going to render his route
             if (headerTitle && typeof headerTitle === 'string') {
+                let nestedChildren = null;
+
+                // If the node has children that could be rendered, then we want
+                // to execute this function again with the child as the root
+                //
+                // Otherwise we'll just pass nestedChildren as false
+                if (child.childRoutes && child.childRoutes.length) {
+                    nestedChildren = this.extractLinksFromRoutes(child, userAcl, i++);
+                }
+
+                const navLinkProps = {
+                    headerTitle,
+                    children: nestedChildren,
+                    depth: i,
+                    disabled: this.isRouteDisabled(disableOn),
+                    routePath: `/${path}`
+                };
+
                 // if there is an aclName present on the route definition,
                 // we evaluate it against the user's acl
                 if (aclName && typeof aclName !== 'undefined') {
@@ -56,21 +84,14 @@ let NavRoutesLinks = React.createClass({
                             key={j}
                             aclName={aclName}
                             aclObject={this.props.userAcl}>
-                            <NavRoutesLinksLink
-                                headerTitle={headerTitle}
-                                routePath={'/' + path}
-                                depth={i}
-                                children={childrenFn} />
+                            <NavRoutesLinksLink {...navLinkProps} />
                         </AclProxy>
                     );
                 } else {
                     return (
                         <NavRoutesLinksLink
                             key={j}
-                            headerTitle={headerTitle}
-                            routePath={'/' + path}
-                            depth={i}
-                            children={childrenFn} />
+                            {...navLinkProps} />
                     );
                 }
             } else {
diff --git a/js/components/nav_routes_links_link.js b/js/components/nav_routes_links_link.js
index eef98e59..6daec0ea 100644
--- a/js/components/nav_routes_links_link.js
+++ b/js/components/nav_routes_links_link.js
@@ -11,25 +11,26 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 let NavRoutesLinksLink = React.createClass({
     propTypes: {
-        headerTitle: React.PropTypes.string,
-        routePath: React.PropTypes.string,
-
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ]),
-
-        depth: React.PropTypes.number
+        disabled: React.PropTypes.bool,
+        depth: React.PropTypes.number,
+        headerTitle: React.PropTypes.string,
+        routePath: React.PropTypes.string
     },
 
     render() {
-        const { children, headerTitle, depth, routePath } = this.props;
+        const { children, headerTitle, depth, disabled, routePath } = this.props;
 
         // if the route has children, we're returning a DropdownButton that will get filled
         // with MenuItems
         if (children) {
             return (
-                <DropdownButton title={headerTitle}>
+                <DropdownButton
+                    disabled={disabled}
+                    title={headerTitle}>
                     {children}
                 </DropdownButton>
             );
@@ -38,13 +39,17 @@ let NavRoutesLinksLink = React.createClass({
                 // if the node's child is actually a node of level one (a child of a node), we're
                 // returning a DropdownButton matching MenuItem
                 return (
-                    <LinkContainer to={routePath}>
+                    <LinkContainer
+                        disabled={disabled}
+                        to={routePath}>
                         <MenuItem>{headerTitle}</MenuItem>
                     </LinkContainer>
                 );
             } else if (depth === 0) {
                 return (
-                    <LinkContainer to={routePath}>
+                    <LinkContainer
+                        disabled={disabled}
+                        to={routePath}>
                         <NavItem>{headerTitle}</NavItem>
                     </LinkContainer>
                 );
diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index 5f80b30c..b8502004 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -54,7 +54,8 @@ const ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='COLLECTION'/>
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={SluicePieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -70,7 +71,8 @@ const ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='SUBMISSIONS'/>
+                headerTitle='SUBMISSIONS'
+                disableOn='noPieces' />
             <Route
                 path='login'
                 component={ProxyHandler(
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index a5a0e075..ba560608 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -75,7 +75,8 @@ let ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
-                headerTitle='COLLECTION' />
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='pieces/:pieceId' component={CylandPieceContainer} />
@@ -109,7 +110,8 @@ let ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
-                headerTitle='COLLECTION' />
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={PieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -150,7 +152,8 @@ let ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)}
-                headerTitle='COLLECTION' />
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
             <Route
                 path='contract_notifications'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
@@ -189,7 +192,8 @@ let ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
-                headerTitle='COLLECTION' />
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -225,7 +229,8 @@ let ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
-                headerTitle='COLLECTION' />
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
diff --git a/js/routes.js b/js/routes.js
index 49a284af..7a4fce2f 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -40,7 +40,8 @@ let COMMON_ROUTES = (
         <Route
             path='collection'
             component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
-            headerTitle='COLLECTION'/>
+            headerTitle='COLLECTION'
+            disableOn='noPieces' />
         <Route
             path='signup'
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />

From 27f1b7e9b4e404615b9122ff0c42a6111d70041e Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 16:47:57 +0100
Subject: [PATCH 103/197] Add default redirect for empty collections

---
 js/components/piece_list.js                                      | 1 +
 .../whitelabel/prize/simple_prize/components/prize_piece_list.js | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index dfe30a9c..06cd7d10 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -62,6 +62,7 @@ let PieceList = React.createClass({
                 ]
             }],
             orderParams: ['artist_name', 'title'],
+            redirectTo: '/register_piece',
             shouldRedirect: () => true
         };
     },
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index 23cdbb23..bd2b9f06 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -75,7 +75,6 @@ let PrizePieceList = React.createClass({
             <div>
                 <PieceList
                     ref="list"
-                    redirectTo="/register_piece"
                     accordionListItemType={AccordionListItemPrize}
                     orderParams={orderParams}
                     orderBy={this.state.currentUser.is_jury ? 'rating' : null}

From aef3bf5094c2a40d1c225f39737c63c6332af3f1 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 21 Jan 2016 17:20:45 +0100
Subject: [PATCH 104/197] Remove hash option for thumbnail

---
 js/components/ascribe_forms/form_register_piece.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 596f8a56..10fb54d3 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -216,9 +216,7 @@ let RegisterPieceForm = React.createClass({
                             plural: getLangText('Select representative images')
                         }}
                         isFineUploaderActive={isFineUploaderActive}
-                        disabled={!isFineUploaderEditable}
-                        enableLocalHashing={enableLocalHashing}
-                        uploadMethod={location.query.method} />
+                        disabled={!isFineUploaderEditable} />
                 </Property>
                 <Property
                     name='artist_name'

From 64c02d4d65c2b343bf444ad70d95f323c6c2d7b8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 22 Jan 2016 00:03:49 +0100
Subject: [PATCH 105/197] Remove duplicate 'name' propType in
 PieceExtraDataForm

You would not believe how much pain this has caused me with PhantomJS...
---
 js/components/ascribe_forms/form_piece_extradata.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js
index 9ba53f3b..6a475fb6 100644
--- a/js/components/ascribe_forms/form_piece_extradata.js
+++ b/js/components/ascribe_forms/form_piece_extradata.js
@@ -20,7 +20,6 @@ let PieceExtraDataForm = React.createClass({
         editable: React.PropTypes.bool,
         extraData: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
-        name: React.PropTypes.string,
         title: React.PropTypes.string
     },
 

From a95a0fd2ea624ce5c96cdca20e2067fd2b4163e5 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Fri, 22 Jan 2016 17:52:03 +0100
Subject: [PATCH 106/197] Add multi browser test

---
 test/README.md     | 12 ++++++++++--
 test/config.js     | 16 ++++++++++++++++
 test/test-login.js | 46 ++++++++++++++++++++++++++--------------------
 3 files changed, 52 insertions(+), 22 deletions(-)
 create mode 100644 test/config.js

diff --git a/test/README.md b/test/README.md
index 0aab26bd..10b5784c 100644
--- a/test/README.md
+++ b/test/README.md
@@ -160,7 +160,8 @@ Create the driver to control the browser.
     });
 ```
 
-This function will be executed before each `it` function. Here we point the browser to a specific URL.
+This function will be executed before each `it` function. Here we point the
+browser to a specific URL.
 
 ```javascript
     beforeEach(function() {
@@ -168,7 +169,8 @@ This function will be executed before each `it` function. Here we point the brow
     });
 ```
 
-While this function will be executed after each `it` function. `quit` will destroy the browser session.
+While this function will be executed after each `it` function. `quit` will
+destroy the browser session.
 
 ```javascript
     after(function() {
@@ -190,4 +192,10 @@ without writing new functions.
 ```
 
 ## How to run the test suite
+To run the tests, type:
+```bash
+$ mocha
+```
 
+By default the test suite runs on `http://www.localhost.com:3000/`, if you
+want to change the URL, change the `APP_URL` env variable.
diff --git a/test/config.js b/test/config.js
new file mode 100644
index 00000000..a1ac78db
--- /dev/null
+++ b/test/config.js
@@ -0,0 +1,16 @@
+'use strict';
+
+
+// https://code.google.com/p/selenium/wiki/DesiredCapabilities
+const BROWSERS = [
+    'chrome,47,WINDOWS',
+    'chrome,46,WINDOWS',
+    'firefox,43,MAC',
+    'internet explorer,10,VISTA'
+];
+
+const APP_URL = process.env.APP_URL || 'http://www.localhost.com:3000';
+
+
+module.exports.BROWSERS = BROWSERS.map(x => x.split(','));
+module.exports.APP_URL = APP_URL;
diff --git a/test/test-login.js b/test/test-login.js
index 82bdad9d..0df913ca 100644
--- a/test/test-login.js
+++ b/test/test-login.js
@@ -3,30 +3,36 @@
 const wd = require('wd');
 const chai = require('chai');
 const chaiAsPromised = require('chai-as-promised');
+const config = require('./config.js');
 chai.use(chaiAsPromised);
 chai.should();
 
 
-describe('Login logs users in', function() {
-    this.timeout(0);
-    let browser;
 
-    before(function() {
-        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
-        return browser.init({ browserName: 'chrome' });
+function testSuite(browserName, version, platform) {
+    describe(`[${browserName} ${version} ${platform}] Login logs users in`, function() {
+        // Set timeout to zero so Mocha won't time out.
+        this.timeout(0);
+        let browser;
+
+        before(function() {
+            browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
+            return browser.init({ browserName, version, platform });
+        });
+
+        beforeEach(function() {
+            return browser.get(config.APP_URL + '/login');
+        });
+
+        after(function() {
+            return browser.quit();
+        });
+
+        it('should contain "Log in" in the title', function() {
+            return browser.title().should.become('Log in');
+        });
+
     });
+}
 
-    beforeEach(function() {
-        return browser.get('http://www.ascribe.ninja/app/login');
-    });
-
-    after(function() {
-        return browser.quit();
-    });
-
-    it('should contain "Log in" in the title', function() {
-        return browser.title().should.become('Log in');
-    });
-
-});
-
+config.BROWSERS.map(x => testSuite(...x));

From 4088857d67eb3e187de50c3a4336b7f5fef95309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 25 Jan 2016 10:23:20 +0100
Subject: [PATCH 107/197] Fix property naming for Fetcher to fix "Show more"
 dialog

Closes #131
---
 js/actions/edition_list_actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js
index a52e32b9..9474a418 100644
--- a/js/actions/edition_list_actions.js
+++ b/js/actions/edition_list_actions.js
@@ -39,7 +39,7 @@ class EditionListActions {
 
         return Q.Promise((resolve, reject) => {
             EditionListFetcher
-                .fetch({ pieceId, page, itemsToFetch, orderBy, orderAsc, filterBy })
+                .fetch({ pieceId, page, orderBy, orderAsc, filterBy, pageSize: itemsToFetch })
                 .then((res) => {
                     if (res && !res.editions) {
                         throw new Error('Piece has no editions to fetch.');

From f44597c2bfa34afb1b8d4949e9b5267150c693eb Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 25 Jan 2016 10:59:44 +0100
Subject: [PATCH 108/197] Add docs for visual regression testing

Also adds a simple script for testing with phantomJS
---
 .gitignore                        |   9 ++-
 README.md                         |   4 +-
 docs/visual-regression-testing.md | 126 ++++++++++++++++++++++++++++++
 package.json                      |   4 +-
 phantomjs/launch_app_and_login.js |  62 +++++++++++++++
 5 files changed, 200 insertions(+), 5 deletions(-)
 create mode 100644 docs/visual-regression-testing.md
 create mode 100644 phantomjs/launch_app_and_login.js

diff --git a/.gitignore b/.gitignore
index 30c9eae9..17b63e95 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,9 +16,12 @@ webapp-dependencies.txt
 pids
 logs
 results
- 
+
+build/*
+
+gemini-coverage/*
+gemini-report/*
+
 node_modules/*
 
-build
-
 .DS_Store
diff --git a/README.md b/README.md
index 15736654..015c3fe9 100644
--- a/README.md
+++ b/README.md
@@ -103,7 +103,9 @@ Therefore, to require a module in your test file, you need to use CommonJS's `re
 Visual Regression Testing
 -------------------------
 
-We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports PhantomJS and SauceLabs.
+We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports both PhantomJS2 and SauceLabs.
+
+See the [helper docs](docs/visual-regression-testing.md) for information on installing Gemini, its dependencies, and running and writing tests.
 
 
 Workflow
diff --git a/docs/visual-regression-testing.md b/docs/visual-regression-testing.md
new file mode 100644
index 00000000..30a711ff
--- /dev/null
+++ b/docs/visual-regression-testing.md
@@ -0,0 +1,126 @@
+Introduction
+============
+
+When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
+
+Contents
+========
+
+  1. [Installation](#installation)
+  1. [Running Tests](#running-tests)
+  1. [Gemini Usage](#gemini-usage)
+  1. [PhantomJS](#phantomjs)
+
+
+Installation
+============
+
+First install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
+
+```bash
+npm install -g phantomjs2
+
+# If using OSX, install upx and decompress the binary downloaded by npm manually:
+brew install upx
+# Navigate to the binary, ie. /Users/Brett/.nvm/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin
+upx -d phantomjs
+
+```
+
+Then [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
+
+
+Running Tests
+=============
+
+Run PhantomJS:
+
+```bash
+phantomjs --webdriver=4444
+```
+
+And then run Gemini tests:
+
+```bash
+# In root onion/
+gemini test gemini/* --report html
+```
+
+If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are no regressions first!), use
+
+```bash
+# In root onion/
+gemini update gemini/*
+```
+
+
+Gemini Usage
+============
+
+While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page app like ours (where much of it is behind an authentication barrier as well).
+
+Authentication
+--------------
+
+Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put waits for the log in to succeed, before testing parts of the app that require the authentication.
+
+Browser Session States
+----------------------
+
+Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when Gemini's launched (ie. `gemini update`, `gemini test`, etc).
+
+Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
+
+**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of tests by logging out.
+
+(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as the cookies are cleared each time, this seems unlikely)
+
+Test Reporting
+--------------
+
+Using the `--report html` flag with Gemini will produce a webpage with the test's results in /gemini-report that will show the old, new, and diff images. Using this is highly recommended (and fun!).
+
+
+PhantomJS
+=========
+
+[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without needing a browser.
+
+Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS 1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
+
+While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful things to know about.
+
+Useful features
+---------------
+
+You can find the full list of CLI commands in the [documentation](http://phantomjs.org/api/command-line.html).
+
+Flags that are of particular interest to us:
+ * `--webdriver=4444`: sets the webdriver port to be 4444, the default webdriver port that Gemini expects.
+ * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to staging, as the certificate we use is self-signed.
+ * `--ssl-protocol=any`: allows any ssl protocol to be used. May be useful when `--ignore-ssl-errors=true` doesn't work.
+ * '--remote-debugger-port`: allows for remote debugging the running PhantomJS instance. More on this later.
+
+Troubleshooting and Debugging
+-----------------------------
+
+Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting docs](http://phantomjs.org/troubleshooting.html).
+
+To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified after `--remote-debugger-port` on localhost:
+
+```bash
+phantomjs --remote-debugger-port=9000 debug.js
+```
+
+PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1 and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()` in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
+
+At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the current execution state of that breakpoint on the page you're on.
+
+---
+
+To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to change the environment to run against.
+
+```bash
+# In root /onion folder
+phantomjs phantomjs/launch_app_and_login.js
+```
diff --git a/package.json b/package.json
index c961e9c3..d3e7ae41 100644
--- a/package.json
+++ b/package.json
@@ -35,8 +35,10 @@
   "devDependencies": {
     "babel-eslint": "^3.1.11",
     "babel-jest": "^5.2.0",
+    "gemini": "^2.0.3",
     "gulp-sass": "^2.1.1",
-    "jest-cli": "^0.4.0"
+    "jest-cli": "^0.4.0",
+    "phantomjs2": "^2.0.2"
   },
   "dependencies": {
     "alt": "^0.16.5",
diff --git a/phantomjs/launch_app_and_login.js b/phantomjs/launch_app_and_login.js
new file mode 100644
index 00000000..e5418519
--- /dev/null
+++ b/phantomjs/launch_app_and_login.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var liveEnv = 'https://www.ascribe.io/app/login';
+// Note that if you are trying to access staging, you will need to use
+// the --ignore-ssl-errors=true flag on phantomjs
+var stagingEnv = 'https://www.ascribe.ninja/app/login';
+var localEnv = 'http://localhost.com:3000/login';
+
+var page = require('webpage').create();
+page.open(localEnv, function(status) {
+    var attemptedToLogIn;
+    var loginCheckInterval;
+
+    console.log('Status: ' + status);
+
+    if (status === 'success') {
+        console.log('Attempting to log in...');
+
+        attemptedToLogIn = page.evaluate(function () {
+            try {
+                var inputForm = document.querySelector('.ascribe-login-wrapper');
+                var email = inputForm.querySelector('input[type=email]');
+                var password = inputForm.querySelector('input[type=password]');
+                var submitBtn = inputForm.querySelector('button[type=submit]');
+
+                email.value = 'dimi@mailinator.com';
+                password.value = '0000000000';
+                submitBtn.click();
+
+                return true;
+            } catch (ex) {
+                console.log('Error while trying to find login elements, not logging in.');
+                return false;
+            }
+        });
+
+        if (attemptedToLogIn) {
+            loginCheckInterval = setInterval(function () {
+                var loggedIn = page.evaluate(function () {
+                    // When they log in, they are taken to the collections page.
+                    // When the piece list is loaded, the accordion list is either available or
+                    // shows a placeholder, so let's check for these elements to determine
+                    // when login is finished
+                    return !!(document.querySelector('.ascribe-accordion-list:not(.ascribe-loading-position)') ||
+                              document.querySelector('.ascribe-accordion-list-placeholder'));
+                });
+
+                if (loggedIn) {
+                    clearInterval(loginCheckInterval);
+                    console.log('Successfully logged in.');
+                }
+            }, 1000);
+        } else {
+            console.log('Something happened while trying to log in, aborting...');
+            phantom.exit();
+        }
+
+    } else {
+        console.log('Failed to load page, exiing...');
+        phantom.exit();
+    }
+});

From 79a1dc0e08b61b4f764600ad73f851d11ad00d95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 25 Jan 2016 11:01:28 +0100
Subject: [PATCH 109/197] Fix wrong file endings for files that do not have
 extensions

Closes #130
---
 js/components/ascribe_detail/media_container.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index cb86e558..00ca9164 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -65,7 +65,16 @@ let MediaContainer = React.createClass({
         // We also force uniqueness of usernames, so this check is safe to dtermine if the
         // content was registered by the current user.
         const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
-        const fileExtension = extractFileExtensionFromString(content.digital_work.url);
+
+        // We want to show the file's extension as a label of the download button.
+        // We can however not only use `extractFileExtensionFromString` on the url for that
+        // as files might be saved on S3 without a file extension which leads
+        // `extractFileExtensionFromString` to extract everything starting from the top level
+        // domain: e.g. '.net/live/<hash>'.
+        // Therefore, we extract the file's name (last part of url, separated with a slash)
+        // and try to extract the file extension from there.
+        const fileName = content.digital_work.url.split('/').pop();
+        const fileExtension = extractFileExtensionFromString(fileName);
 
         let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
             content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@@ -123,7 +132,11 @@ let MediaContainer = React.createClass({
                             className="ascribe-margin-1px"
                             href={content.digital_work.url}
                             target="_blank">
-                            {getLangText('Download')} .{fileExtension} <Glyphicon glyph="cloud-download"/>
+                            {/*
+                                If it turns out that `fileExtension` is an empty string, we're just
+                                using the label 'file'.
+                            */}
+                            {getLangText('Download')} .{fileExtension || 'file'} <Glyphicon glyph="cloud-download"/>
                         </Button>
                     </AclProxy>
                     {embed}

From 778c61bfdc1de5a929cb9aafb96418a70ce6bb94 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 25 Jan 2016 11:05:01 +0100
Subject: [PATCH 110/197] Add utils to manage tunnel and stuff

---
 .env-template      |  1 +
 package.json       |  5 ++++-
 test/README.md     | 17 +++++++++++++++++
 test/config.js     | 11 +++++++----
 test/setup.js      | 25 +++++++++++++++++++++----
 test/test-login.js |  2 ++
 test/tunnel.js     | 23 +++++++++++++++++++++++
 7 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 test/tunnel.js

diff --git a/.env-template b/.env-template
index a836e649..8c4fe11c 100644
--- a/.env-template
+++ b/.env-template
@@ -1,2 +1,3 @@
 SAUCE_USERNAME=ascribe
 SAUCE_ACCESS_KEY=
+SAUCE_DEFAULT_URL=
diff --git a/package.json b/package.json
index deb70cca..cd1eae93 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
     "preinstall": "export SAUCE_CONNECT_DOWNLOAD_ON_INSTALL=true",
     "postinstall": "npm run build",
     "build": "gulp build --production",
-    "start": "node server.js"
+    "start": "node server.js",
+    "test": "mocha",
+    "tunnel": "node test/tunnel.js"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"
@@ -38,6 +40,7 @@
     "babel-jest": "^5.2.0",
     "chai": "^3.4.1",
     "chai-as-promised": "^5.1.0",
+    "colors": "^1.1.2",
     "dotenv": "^1.2.0",
     "gulp-sass": "^2.1.1",
     "jest-cli": "^0.4.0",
diff --git a/test/README.md b/test/README.md
index 10b5784c..49d7718c 100644
--- a/test/README.md
+++ b/test/README.md
@@ -1,3 +1,13 @@
+# TL;DR
+Copy the file `.env-template` in `.env` and fill up the missing keys.
+
+```bash
+$ npm install
+$ npm run tunnel
+$ npm test && git commit
+```
+
+
 # Welcome to our test suite, let me be your guide
 
 Dear reader, first of all thanks for taking your time reading this document.
@@ -199,3 +209,10 @@ $ mocha
 
 By default the test suite runs on `http://www.localhost.com:3000/`, if you
 want to change the URL, change the `APP_URL` env variable.
+
+
+# How to have fun
+Try this!
+```bash
+$ mocha -R nyan
+```
diff --git a/test/config.js b/test/config.js
index a1ac78db..aad28856 100644
--- a/test/config.js
+++ b/test/config.js
@@ -1,5 +1,7 @@
 'use strict';
 
+require('dotenv').load();
+
 
 // https://code.google.com/p/selenium/wiki/DesiredCapabilities
 const BROWSERS = [
@@ -9,8 +11,9 @@ const BROWSERS = [
     'internet explorer,10,VISTA'
 ];
 
-const APP_URL = process.env.APP_URL || 'http://www.localhost.com:3000';
 
-
-module.exports.BROWSERS = BROWSERS.map(x => x.split(','));
-module.exports.APP_URL = APP_URL;
+module.exports = {
+    BROWSERS: BROWSERS.map(x => x.split(',')),
+    APP_URL: process.env.SAUCE_DEFAULT_URL || 'http://www.localhost.com:3000',
+    TUNNEL_AUTO_CONNECT: process.env.SAUCE_AUTO_CONNECT
+};
diff --git a/test/setup.js b/test/setup.js
index 0313a4ae..0202ef29 100644
--- a/test/setup.js
+++ b/test/setup.js
@@ -1,14 +1,27 @@
 'use strict';
 
-require('dotenv').load();
-
+const config = require('./config');
+const colors = require('colors');
 const sauceConnectLauncher = require('sauce-connect-launcher');
+
+
 let globalSauceProcess;
 
+if (!process.env.SAUCE_USERNAME) {
+    console.log(colors.red('SAUCE_USERNAME is missing. Please check the README.md file.'));
+    process.exit(1); //eslint-disable-line no-process-exit
+}
 
-if (process.env.SAUCE_AUTO_CONNECT) {
+if (!process.env.SAUCE_ACCESS_KEY2) {
+    console.log(colors.red('SAUCE_ACCESS_KEY is missing. Please check the README.md file.'));
+    process.exit(1); //eslint-disable-line no-process-exit
+}
+
+
+if (config.TUNNEL_AUTO_CONNECT) {
     before(function(done) {
-        // Creating the tunnel takes a bit of time. For this case we can safely disable it.
+        console.log(colors.yellow('Setting up tunnel from Saucelabs to your lovely computer, will take a while.'));
+        // Creating the tunnel takes a bit of time. For this case we can safely disable Mocha timeouts.
         this.timeout(0);
 
         sauceConnectLauncher(function (err, sauceConnectProcess) {
@@ -30,4 +43,8 @@ if (process.env.SAUCE_AUTO_CONNECT) {
             globalSauceProcess.close(done);
         }
     });
+} else if (config.APP_URL.match(/localhost/)) {
+    console.log(colors.yellow(`You are running tests on ${config.APP_URL}, make sure you already have a tunnel running.`));
+    console.log(colors.yellow('To create the tunnel, run:'));
+    console.log(colors.yellow(' $ node test/tunnel.js'));
 }
diff --git a/test/test-login.js b/test/test-login.js
index 0df913ca..38a1e377 100644
--- a/test/test-login.js
+++ b/test/test-login.js
@@ -16,6 +16,8 @@ function testSuite(browserName, version, platform) {
         let browser;
 
         before(function() {
+            // No need to inject `username` or `access_key`, by default the constructor
+            // looks up the values in `process.env.SAUCE_USERNAME` and `process.env.SAUCE_ACCESS_KEY`
             browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
             return browser.init({ browserName, version, platform });
         });
diff --git a/test/tunnel.js b/test/tunnel.js
new file mode 100644
index 00000000..2a7fa371
--- /dev/null
+++ b/test/tunnel.js
@@ -0,0 +1,23 @@
+'use strict';
+
+const config = require('./config'); //eslint-disable-line no-unused-vars
+const colors = require('colors');
+const sauceConnectLauncher = require('sauce-connect-launcher');
+
+
+function connect() {
+    console.log(colors.yellow('Setting up tunnel from Saucelabs to your lovely computer, will take a while.'));
+    // Creating the tunnel takes a bit of time. For this case we can safely disable Mocha timeouts.
+
+    sauceConnectLauncher(function (err) {
+        if (err) {
+            console.error(err.message);
+            return;
+        }
+        console.log(colors.green('Connected! Keep this process running and execute your tests.'));
+    });
+}
+
+if (require.main === module) {
+    connect();
+}

From 51d88a2ed23cae3ced68a6cb872486142219e286 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 25 Jan 2016 11:24:35 +0100
Subject: [PATCH 111/197] Remove typo on env var name

---
 test/setup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/setup.js b/test/setup.js
index 0202ef29..adb5937f 100644
--- a/test/setup.js
+++ b/test/setup.js
@@ -12,7 +12,7 @@ if (!process.env.SAUCE_USERNAME) {
     process.exit(1); //eslint-disable-line no-process-exit
 }
 
-if (!process.env.SAUCE_ACCESS_KEY2) {
+if (!process.env.SAUCE_ACCESS_KEY) {
     console.log(colors.red('SAUCE_ACCESS_KEY is missing. Please check the README.md file.'));
     process.exit(1); //eslint-disable-line no-process-exit
 }

From c3c9c884211e61514d905eadf98175dc16e32f03 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 25 Jan 2016 11:32:43 +0100
Subject: [PATCH 112/197] Remove env variable from config

---
 test/config.js | 3 +--
 test/setup.js  | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/test/config.js b/test/config.js
index aad28856..400c6d90 100644
--- a/test/config.js
+++ b/test/config.js
@@ -14,6 +14,5 @@ const BROWSERS = [
 
 module.exports = {
     BROWSERS: BROWSERS.map(x => x.split(',')),
-    APP_URL: process.env.SAUCE_DEFAULT_URL || 'http://www.localhost.com:3000',
-    TUNNEL_AUTO_CONNECT: process.env.SAUCE_AUTO_CONNECT
+    APP_URL: process.env.SAUCE_DEFAULT_URL || 'http://www.localhost.com:3000'
 };
diff --git a/test/setup.js b/test/setup.js
index adb5937f..334423e7 100644
--- a/test/setup.js
+++ b/test/setup.js
@@ -18,7 +18,7 @@ if (!process.env.SAUCE_ACCESS_KEY) {
 }
 
 
-if (config.TUNNEL_AUTO_CONNECT) {
+if (process.env.SAUCE_AUTO_CONNECT) {
     before(function(done) {
         console.log(colors.yellow('Setting up tunnel from Saucelabs to your lovely computer, will take a while.'));
         // Creating the tunnel takes a bit of time. For this case we can safely disable Mocha timeouts.

From a2ea9b4aa280bf7e5f3f5e890a1cc7395ad2358e Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 25 Jan 2016 17:31:09 +0100
Subject: [PATCH 113/197] Add todo to the test README and make slight changes

---
 test/README.md | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/test/README.md b/test/README.md
index 49d7718c..60793129 100644
--- a/test/README.md
+++ b/test/README.md
@@ -1,5 +1,6 @@
 # TL;DR
-Copy the file `.env-template` in `.env` and fill up the missing keys.
+Copy the contents of `.env-template` to `.env` and [fill up the missing keys with
+information from your SauceLabs account](#how-to-set-up-your-env-config-file).
 
 ```bash
 $ npm install
@@ -8,6 +9,11 @@ $ npm test && git commit
 ```
 
 
+# TODO
+* Use gulp to parallelize mocha invocations with different browsers
+* Figure out good system for changing subdomain through test scripts
+
+
 # Welcome to our test suite, let me be your guide
 
 Dear reader, first of all thanks for taking your time reading this document.
@@ -154,8 +160,8 @@ chai.should();
 ```
 
 `browser` is the main object to interact with Saucelab "real" browsers. We will
-use this object a lot. It allow us to load pages, click around, check if a
-specific text is present etc.
+use this object a lot. It allows us to load pages, click around, check if a
+specific text is present, etc.
 
 ```javascript
 describe('Login logs users in', function() {
@@ -179,11 +185,13 @@ browser to a specific URL.
     });
 ```
 
-While this function will be executed after each `it` function. `quit` will
-destroy the browser session.
+Close the browser after finishing all tests. `after` will be executed at the end
+of all `it` functions. Use `afterEach` instead if you'd like to run some code
+after each `it` function.
 
 ```javascript
     after(function() {
+        // Destroys the browser session
         return browser.quit();
     });
 ```
@@ -197,7 +205,6 @@ without writing new functions.
     it('should contain "Log in" in the title', function() {
         return browser.title().should.become('Log in');
     });
-
 });
 ```
 

From f246005d9cc6989e585f795ba2cb5d2f7d84adff Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 25 Jan 2016 17:31:18 +0100
Subject: [PATCH 114/197] Remove duplicate instance of gulp-sass

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index cd1eae93..091203b5 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,6 @@
     "chai-as-promised": "^5.1.0",
     "colors": "^1.1.2",
     "dotenv": "^1.2.0",
-    "gulp-sass": "^2.1.1",
     "jest-cli": "^0.4.0",
     "mocha": "^2.3.4",
     "sauce-connect-launcher": "^0.13.0",
@@ -72,7 +71,7 @@
     "gulp-if": "^1.2.5",
     "gulp-minify-css": "^1.1.6",
     "gulp-notify": "^2.2.0",
-    "gulp-sass": "^2.0.1",
+    "gulp-sass": "^2.1.1",
     "gulp-sourcemaps": "^1.5.2",
     "gulp-template": "~3.0.0",
     "gulp-uglify": "^1.2.0",

From bdc13473a1449e08b38ad43d0cacf6918e1a1db4 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 25 Jan 2016 17:32:04 +0100
Subject: [PATCH 115/197] Fix initial test script to wait for app to load

---
 test/README.md     | 51 +++++++++++++++++++++++++++++++++++++---------
 test/test-login.js | 19 +++++++++++------
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/test/README.md b/test/README.md
index 60793129..8fca1cac 100644
--- a/test/README.md
+++ b/test/README.md
@@ -168,20 +168,19 @@ describe('Login logs users in', function() {
     let browser;
 ```
 
-Create the driver to control the browser.
+Create the driver to control the browser. `before` will be executed once at the
+start of the test before any `it` functions. Use `beforeEach` instead if you'd
+like to run some code before each `it` function.
+
 ```javascript
     before(function() {
         browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
-        return browser.init({ browserName: 'chrome' });
-    });
-```
 
-This function will be executed before each `it` function. Here we point the
-browser to a specific URL.
-
-```javascript
-    beforeEach(function() {
-        return browser.get('http://www.ascribe.ninja/app/login');
+        // Start the browser, go to /login, and wait for the react app to render
+        return browser
+            .init({ browserName, version, platform })
+            .get(config.APP_URL + '/login')
+            .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000);
     });
 ```
 
@@ -208,6 +207,38 @@ without writing new functions.
 });
 ```
 
+All together:
+
+```javascript
+function testSuite(browserName, version, platform) {
+    describe(`[${browserName} ${version} ${platform}] Login logs users in`, function() {
+        // Set timeout to zero so Mocha won't time out.
+        this.timeout(0);
+        let browser;
+
+        before(function() {
+            // No need to inject `username` or `access_key`, by default the constructor
+            // looks up the values in `process.env.SAUCE_USERNAME` and `process.env.SAUCE_ACCESS_KEY`
+            browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
+
+            // Start the browser, go to /login, and wait for the react app to render
+            return browser
+                .init({ browserName, version, platform })
+                .get(config.APP_URL + '/login')
+                .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000);
+        });
+
+        after(function() {
+            return browser.quit();
+        });
+
+        it('should contain "Log in" in the title', function() {
+            return browser.title().should.become('Log in');
+        });
+    });
+}
+```
+
 ## How to run the test suite
 To run the tests, type:
 ```bash
diff --git a/test/test-login.js b/test/test-login.js
index 38a1e377..fcd6f301 100644
--- a/test/test-login.js
+++ b/test/test-login.js
@@ -1,14 +1,16 @@
 'use strict';
 
+const Q = require('q');
 const wd = require('wd');
+const asserters = wd.asserters;   // Commonly used asserters for async waits in the browser
 const chai = require('chai');
 const chaiAsPromised = require('chai-as-promised');
 const config = require('./config.js');
+
 chai.use(chaiAsPromised);
 chai.should();
 
 
-
 function testSuite(browserName, version, platform) {
     describe(`[${browserName} ${version} ${platform}] Login logs users in`, function() {
         // Set timeout to zero so Mocha won't time out.
@@ -19,11 +21,17 @@ function testSuite(browserName, version, platform) {
             // No need to inject `username` or `access_key`, by default the constructor
             // looks up the values in `process.env.SAUCE_USERNAME` and `process.env.SAUCE_ACCESS_KEY`
             browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
-            return browser.init({ browserName, version, platform });
-        });
 
-        beforeEach(function() {
-            return browser.get(config.APP_URL + '/login');
+            // Start the browser, go to /login, and wait for the react app to render
+            return browser
+                .init({ browserName, version, platform })
+                .get(config.APP_URL + '/login')
+                .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 1000)
+                .catch(function (err) {
+                    console.log('Failure -- unable to load app.');
+                    console.log('Skipping tests for this browser...');
+                    return Q.reject(err);
+                });
         });
 
         after(function() {
@@ -33,7 +41,6 @@ function testSuite(browserName, version, platform) {
         it('should contain "Log in" in the title', function() {
             return browser.title().should.become('Log in');
         });
-
     });
 }
 

From ebb8248364922f63b43fbc2901d08d4acb30ac00 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 25 Jan 2016 17:37:04 +0100
Subject: [PATCH 116/197] Make sure to wait for LoginContainer

---
 test/test-login.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/test-login.js b/test/test-login.js
index fcd6f301..e66fa3a5 100644
--- a/test/test-login.js
+++ b/test/test-login.js
@@ -26,7 +26,7 @@ function testSuite(browserName, version, platform) {
             return browser
                 .init({ browserName, version, platform })
                 .get(config.APP_URL + '/login')
-                .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 1000)
+                .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000)
                 .catch(function (err) {
                     console.log('Failure -- unable to load app.');
                     console.log('Skipping tests for this browser...');
@@ -39,7 +39,9 @@ function testSuite(browserName, version, platform) {
         });
 
         it('should contain "Log in" in the title', function() {
-            return browser.title().should.become('Log in');
+            return browser.
+                waitForElementByCss('.ascribe-login-wrapper', asserters.isDisplayed, 2000)
+                title().should.become('Log in');
         });
     });
 }

From 0fefba549c9cea0618339a66834c70a893b30322 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 25 Jan 2016 17:55:45 +0100
Subject: [PATCH 117/197] Use `configureHttp` to set baseUrl for tests

---
 test/test-login.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/test-login.js b/test/test-login.js
index e66fa3a5..e2736fe1 100644
--- a/test/test-login.js
+++ b/test/test-login.js
@@ -24,8 +24,9 @@ function testSuite(browserName, version, platform) {
 
             // Start the browser, go to /login, and wait for the react app to render
             return browser
+                .configureHttp({ baseUrl: config.APP_URL })
                 .init({ browserName, version, platform })
-                .get(config.APP_URL + '/login')
+                .get('/login')
                 .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000)
                 .catch(function (err) {
                     console.log('Failure -- unable to load app.');

From 3d43cd8505a9006248e3dfac623cc4827883f2f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 26 Jan 2016 11:07:41 +0100
Subject: [PATCH 118/197] Remove 'disabledOn' for prize routes

---
 js/components/whitelabel/prize/prize_routes.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index b8502004..5f80b30c 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -54,8 +54,7 @@ const ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='COLLECTION'
-                disableOn='noPieces' />
+                headerTitle='COLLECTION'/>
             <Route path='pieces/:pieceId' component={SluicePieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
             <Route path='verify' component={CoaVerifyContainer} />
@@ -71,8 +70,7 @@ const ROUTES = {
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='SUBMISSIONS'
-                disableOn='noPieces' />
+                headerTitle='SUBMISSIONS'/>
             <Route
                 path='login'
                 component={ProxyHandler(

From ba3c7db6cd09ff003661d98d9ee118b868e026e5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 26 Jan 2016 11:33:38 +0100
Subject: [PATCH 119/197] Reorder methods in ReactS3FineUploader

---
 .../react_s3_fine_uploader.js                 | 148 +++++++++---------
 js/utils/file_utils.js                        |   4 +-
 2 files changed, 76 insertions(+), 76 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 9c34dbbd..b0012402 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -278,22 +278,6 @@ const ReactS3FineUploader = React.createClass({
         this.setState(this.getInitialState());
     },
 
-    // Cancel uploads and clear previously selected files on the input element
-    cancelUploads(id) {
-        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
-
-        // Reset the file input element to clear the previously selected files so that
-        // the user can reselect them again.
-        this.clearFileSelection();
-    },
-
-    clearFileSelection() {
-        const { fileInput } = this.refs;
-        if (fileInput && typeof fileInput.clearSelection === 'function') {
-            fileInput.clearSelection();
-        }
-    },
-
     requestKey(fileId) {
         let filename = this.state.uploader.getName(fileId);
         let uuid = this.state.uploader.getUuid(fileId);
@@ -384,6 +368,73 @@ const ReactS3FineUploader = React.createClass({
         });
     },
 
+    // Cancel uploads and clear previously selected files on the input element
+    cancelUploads(id) {
+        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
+
+        // Reset the file input element to clear the previously selected files so that
+        // the user can reselect them again.
+        this.clearFileSelection();
+    },
+
+    clearFileSelection() {
+        const { fileInput } = this.refs;
+        if (fileInput && typeof fileInput.clearSelection === 'function') {
+            fileInput.clearSelection();
+        }
+    },
+
+    getAllowedExtensions() {
+        const { validation: { allowedExtensions } = {} } = this.props;
+
+        if (allowedExtensions && allowedExtensions.length) {
+            return transformAllowedExtensionsToInputAcceptProp(allowedExtensions);
+        } else {
+            return null;
+        }
+    },
+
+    getXhrErrorComment(xhr) {
+        if (xhr) {
+            return {
+                response: xhr.response,
+                url: xhr.responseURL,
+                status: xhr.status,
+                statusText: xhr.statusText
+            };
+        }
+    },
+
+    isDropzoneInactive() {
+        const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
+
+        if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    // This method has been made promise-based to immediately afterwards
+    // call a callback function (instantly after this.setState went through)
+    // This is e.g. needed when showing/hiding the optional thumbnail upload
+    // field in the registration form
+    setStatusOfFile(fileId, status) {
+        return Q.Promise((resolve) => {
+            let changeSet = {};
+
+            if(status === 'deleted' || status === 'canceled') {
+                changeSet.progress = { $set: 0 };
+            }
+
+            changeSet.status = { $set: status };
+
+            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
+
+            this.setState({ filesToUpload }, resolve);
+        });
+    },
+
     setThumbnailForFileId(fileId, url) {
         const { filesToUpload } = this.state;
 
@@ -506,17 +557,6 @@ const ReactS3FineUploader = React.createClass({
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getXhrErrorComment(xhr) {
-        if (xhr) {
-            return {
-                response: xhr.response,
-                url: xhr.responseURL,
-                status: xhr.status,
-                statusText: xhr.statusText
-            };
-        }
-    },
-
     isFileValid(file) {
         let { validation, onValidationFailed } = this.props;
 
@@ -680,6 +720,13 @@ const ReactS3FineUploader = React.createClass({
         this.cancelUploads(fileId);
     },
 
+    handleCancelHashing() {
+        // Every progress tick of the hashing function in handleUploadFile there is a
+        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
+        // the hashing of all files immediately.
+        this.setState({ hashingProgress: -1 });
+    },
+
     handlePauseFile(fileId) {
         if(this.state.uploader.pauseUpload(fileId)) {
             this.setStatusOfFile(fileId, 'paused');
@@ -827,13 +874,6 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
-    handleCancelHashing() {
-        // Every progress tick of the hashing function in handleUploadFile there is a
-        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
-        // the hashing of all files immediately.
-        this.setState({ hashingProgress: -1 });
-    },
-
     // ReactFineUploader is essentially just a react layer around s3 fineuploader.
     // However, since we need to display the status of a file (progress, uploading) as well as
     // be able to execute actions on a currently uploading file we need to exactly sync the file list
@@ -903,46 +943,6 @@ const ReactS3FineUploader = React.createClass({
         });
     },
 
-    // This method has been made promise-based to immediately afterwards
-    // call a callback function (instantly after this.setState went through)
-    // This is e.g. needed when showing/hiding the optional thumbnail upload
-    // field in the registration form
-    setStatusOfFile(fileId, status) {
-        return Q.Promise((resolve) => {
-            let changeSet = {};
-
-            if(status === 'deleted' || status === 'canceled') {
-                changeSet.progress = { $set: 0 };
-            }
-
-            changeSet.status = { $set: status };
-
-            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
-
-            this.setState({ filesToUpload }, resolve);
-        });
-    },
-
-    isDropzoneInactive() {
-        const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
-
-        if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
-    getAllowedExtensions() {
-        let { validation } = this.props;
-
-        if(validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
-            return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions);
-        } else {
-            return null;
-        }
-    },
-
     render() {
         const {
              multiple,
diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js
index 9c1423b3..1e4998f8 100644
--- a/js/utils/file_utils.js
+++ b/js/utils/file_utils.js
@@ -78,7 +78,7 @@ export function computeHashOfFile(file) {
                 progress: start / file.size,
                 reject
             });
-            
+
             fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
         }
 
@@ -101,4 +101,4 @@ export function extractFileExtensionFromString(s) {
     const explodedFileName = s.split('.');
     return explodedFileName.length > 1 ? explodedFileName.pop()
                                        : '';
-}
\ No newline at end of file
+}

From be081b66552eb00f31ff99b3e108fc17acfb7dcf Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 26 Jan 2016 11:34:12 +0100
Subject: [PATCH 120/197] Fix check for allowed extensions in
 ReactS3FineUploader

---
 .../react_s3_fine_uploader.js                 | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index b0012402..447b76ea 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -13,9 +13,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import AppConstants from '../../constants/application_constants';
 
-import { computeHashOfFile } from '../../utils/file_utils';
 import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
+import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file_utils';
 import { getLangText } from '../../utils/lang_utils';
 
 
@@ -415,6 +415,40 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
+    isFileValid(file) {
+        const { validation: { allowedExtensions, sizeLimit = 0 }, onValidationFailed } = this.props;
+        const fileExt = extractFileExtensionFromString(file.name);
+
+        if (file.size > sizeLimit) {
+            const fileSizeInMegaBytes = sizeLimit / 1000000;
+
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            if (typeof onValidationFailed === 'function') {
+                onValidationFailed(file);
+            }
+
+            return false;
+        } else if (allowedExtensions && !allowedExtensions.includes(fileExt)) {
+            const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${allowedExtensions.join(', ')}`), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            return false;
+        } else {
+            return true;
+        }
+    },
+
+    selectValidFiles(files) {
+        return Array.from(files).reduce((validFiles, file) => {
+            if (this.isFileValid(file)) {
+                validFiles.push(file);
+            }
+            return validFiles;
+        }, []);
+    },
+
     // This method has been made promise-based to immediately afterwards
     // call a callback function (instantly after this.setState went through)
     // This is e.g. needed when showing/hiding the optional thumbnail upload
@@ -557,33 +591,6 @@ const ReactS3FineUploader = React.createClass({
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    isFileValid(file) {
-        let { validation, onValidationFailed } = this.props;
-
-        if (file.size > validation.sizeLimit) {
-            const fileSizeInMegaBytes = validation.sizeLimit / 1000000;
-
-            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-
-            if (typeof onValidationFailed === 'function') {
-                onValidationFailed(file);
-            }
-
-            return false;
-        } else if (validation.allowedExtensions.indexOf(file.type) === -1) {
-
-            const prettyAllowedExtensions = validation.allowedExtensions.join(', ');
-
-            const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${prettyAllowedExtensions}`), 'danger', 5000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-
-            return false;
-        } else {
-            return true;
-        }
-    },
-
     onCancel(id) {
         // when a upload is canceled, we need to update this components file array
         this.setStatusOfFile(id, 'canceled')
@@ -755,15 +762,8 @@ const ReactS3FineUploader = React.createClass({
             return;
         }
 
-        // validate each submitted file if it fits the file size
-        let validFiles = [];
-        for(let i = 0; i < files.length; i++) {
-            if(this.isFileValid(files[i])) {
-                validFiles.push(files[i]);
-            }
-        }
-        // override standard files list with only valid files
-        files = validFiles;
+        // Select only the submitted files that fit the file size and allowed extensions
+        files = this.selectValidFiles(files);
 
         // if multiple is set to false and user drops multiple files into the dropzone,
         // take the first one and notify user that only one file can be submitted

From 627b2f75fee230a7770fc60f59fb1b1740cadb10 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 26 Jan 2016 13:41:15 +0100
Subject: [PATCH 121/197] Extract extension using file name rather that mime
 type for uploader preview

Also adds ellipsis overflow to the extension name to prevent long
extensions from resizing the preview element and removes redundant
`.file-drag-and-drop-preview-table-wrapper` class
---
 .../file_drag_and_drop_preview.js             | 17 +++++++-------
 .../file_drag_and_drop_preview_other.js       | 19 +++++++---------
 sass/ascribe_uploader.scss                    | 22 ++++++-------------
 3 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
index ca1be2d2..0f95427d 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
@@ -23,6 +23,7 @@ const FileDragAndDropPreview = React.createClass({
             s3Url: string,
             s3UrlSafe: string
         }).isRequired,
+
         handleDeleteFile: func,
         handleCancelFile: func,
         handlePauseFile: func,
@@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     toggleUploadProcess() {
-        if(this.props.file.status === 'uploading') {
+        if (this.props.file.status === 'uploading') {
             this.props.handlePauseFile(this.props.file.id);
-        } else if(this.props.file.status === 'paused') {
+        } else if (this.props.file.status === 'paused') {
             this.props.handleResumeFile(this.props.file.id);
         }
     },
@@ -54,13 +55,13 @@ const FileDragAndDropPreview = React.createClass({
             (file.status === 'upload successful' || file.status === 'online') &&
             file.s3UrlSafe) {
             handleDeleteFile(file.id);
-        } else if(handleCancelFile) {
+        } else if (handleCancelFile) {
             handleCancelFile(file.id);
         }
     },
 
     handleDownloadFile() {
-        if(this.props.file.s3Url) {
+        if (this.props.file.s3Url) {
             // This simply opens a new browser tab with the url provided
             open(this.props.file.s3Url);
         }
@@ -69,7 +70,7 @@ const FileDragAndDropPreview = React.createClass({
     getFileName() {
         const { numberOfDisplayedFiles, file } = this.props;
 
-        if(numberOfDisplayedFiles === 1) {
+        if (numberOfDisplayedFiles === 1) {
             return (
                 <span className="file-name">
                     {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
@@ -81,7 +82,7 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     getRemoveButton() {
-        if(this.props.areAssetsEditable) {
+        if (this.props.areAssetsEditable) {
             return (
                 <div className="delete-file">
                     <span
@@ -107,7 +108,7 @@ const FileDragAndDropPreview = React.createClass({
 
         // Decide whether an image or a placeholder picture should be displayed
         // If a file has its `thumbnailUrl` defined, then we display it also as an image
-        if(file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
+        if (file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
             previewElement = (
                 <FileDragAndDropPreviewImage
                     onClick={this.handleDeleteFile}
@@ -123,7 +124,7 @@ const FileDragAndDropPreview = React.createClass({
                 <FileDragAndDropPreviewOther
                     onClick={this.handleDeleteFile}
                     progress={file.progress}
-                    type={file.type.split('/')[1]}
+                    type={extractFileExtensionFromString(file.name)}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
                     downloadUrl={file.s3UrlSafe}
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
index e5e7c947..e57b9495 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
@@ -56,9 +56,9 @@ const FileDragAndDropPreviewOther = React.createClass({
                     target="_blank"
                     className="glyphicon glyphicon-download action-file"
                     aria-hidden="true"
-                    title={getLangText('Download file')}/>
+                    title={getLangText('Download file')} />
             );
-        } else if(progress >= 0 && progress < 100) {
+        } else if (progress >= 0 && progress < 100) {
             actionSymbol = (
                 <div className="spinner-file">
                     <AscribeSpinner color='dark-blue' size='md' />
@@ -66,22 +66,19 @@ const FileDragAndDropPreviewOther = React.createClass({
             );
         } else {
             actionSymbol = (
-                <span className='ascribe-icon icon-ascribe-ok action-file'/>
+                <span className='ascribe-icon icon-ascribe-ok action-file' />
             );
         }
 
         return (
-            <div
-                className="file-drag-and-drop-preview">
+            <div className="file-drag-and-drop-preview">
                 <ProgressBar
                     now={Math.ceil(progress)}
                     style={style}
-                    className="ascribe-progress-bar ascribe-progress-bar-xs"/>
-                <div className="file-drag-and-drop-preview-table-wrapper">
-                    <div className="file-drag-and-drop-preview-other">
-                        {actionSymbol}
-                        <p style={style}>{'.' + type}</p>
-                    </div>
+                    className="ascribe-progress-bar ascribe-progress-bar-xs" />
+                <div className="file-drag-and-drop-preview-other">
+                    {actionSymbol}
+                    <p style={style}>{'.' + (type ? type : 'file')}</p>
                 </div>
             </div>
         );
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 93f1de5e..cbe0611f 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -78,12 +78,6 @@
     }
 }
 
-.file-drag-and-drop-preview-table-wrapper {
-    display: table;
-    height: 94px;
-    width: 104px;
-}
-
 .file-drag-and-drop-preview {
     background-color: #eeeeee;
     border: 1px solid #616161;
@@ -131,7 +125,7 @@
     width: 104px;
 
     // REFACTOR TO USE TABLE CELL
-    .action-file, .spinner-file, .icon-ascribe-ok {
+    .action-file, .spinner-file {
         margin-top: 1em;
         line-height: 1.3;
     }
@@ -142,23 +136,21 @@
 }
 
 .file-drag-and-drop-preview-other {
-    display: table-cell;
+    height: 94px;
     text-align: center;
-    vertical-align: middle;
+    width: 104px;
 
     p {
         margin-top: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .action-file:not(.icon-ascribe-ok), .spinner-file {
         margin-top: 0;
         position: relative;
-        top: .3em;
-
-        span:not(:first-child) {
-            display: block;
-            margin-top: .5em;
-        }
+        top: 0.8em;
     }
 }
 

From 8f7d4ccc2c4efc196e33e6417d83ea9ff8f98762 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 27 Jan 2016 11:32:23 +0100
Subject: [PATCH 122/197] Increase file size limit to 50GB

- Customer request
---
 js/constants/uploader_constants.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/constants/uploader_constants.js b/js/constants/uploader_constants.js
index 5dd1d109..c2f8559b 100644
--- a/js/constants/uploader_constants.js
+++ b/js/constants/uploader_constants.js
@@ -9,7 +9,7 @@ export const validationParts = {
         multiple: 100
     },
     sizeLimit: {
-        default: 25000000000,
+        default: 50000000000,
         thumbnail: 5000000
     }
 };

From 215cc3b841df43590ef6835d58703cf70bd7a864 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 27 Jan 2016 11:33:45 +0100
Subject: [PATCH 123/197] Move file name to under file upload preview for
 smaller screens

---
 sass/ascribe_uploader.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index cbe0611f..63d0c127 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -9,6 +9,12 @@
     text-align: center;
     vertical-align: middle;
     padding-top: 1.5em;
+
+    @media screen and (max-width: 625px) {
+        .file-name {
+            display: block;
+        }
+    }
 }
 
 .inactive-dropzone {

From 0d01ae1642817bbaf021e7a955f556dd7d32d8a2 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 27 Jan 2016 15:01:08 +0100
Subject: [PATCH 124/197] Remove unused btn-ascribe-add in PieceList

---
 js/components/piece_list.js                                | 7 +------
 .../prize/simple_prize/simple_prize_custom_style.scss      | 6 +-----
 sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss     | 4 ----
 sass/whitelabel/wallet/cc/cc_custom_style.scss             | 6 +-----
 sass/whitelabel/wallet/cyland/cyland_custom_style.scss     | 4 ----
 sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss   | 6 +-----
 6 files changed, 4 insertions(+), 29 deletions(-)

diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 567a53e9..b1df7d25 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -287,12 +287,7 @@ let PieceList = React.createClass({
                     orderBy={this.state.orderBy}
                     applyFilterBy={this.applyFilterBy}
                     applyOrderBy={this.applyOrderBy}>
-                    {customSubmitButton ?
-                        customSubmitButton :
-                        <button className="btn btn-default btn-ascribe-add">
-                            <span className="icon-ascribe icon-ascribe-add" />
-                        </button>
-                    }
+                    {customSubmitButton}
                 </PieceListToolbar>
                 <PieceListBulkModal
                     availableAcls={availableAcls}
diff --git a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
index 4cfb7c82..6cae33ca 100644
--- a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
+++ b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
@@ -135,10 +135,6 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
     color: $sluice--button-color;
 }
 
-.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
 // disabled buttons
 .client--sluice {
     .btn-default.disabled,
@@ -254,4 +250,4 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
 
 .client--sluice .acl-information-dropdown-list .title {
     color: $sluice--button-color;
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index 8bf729a8..7fb0bd6e 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -243,10 +243,6 @@ $vivi23--highlight-color: #de2600;
     }
 
     /** Other components **/
-    .ascribe-piece-list-toolbar .btn-ascribe-add {
-        display: none;
-    }
-
     .ascribe-footer {
         display: none;
     }
diff --git a/sass/whitelabel/wallet/cc/cc_custom_style.scss b/sass/whitelabel/wallet/cc/cc_custom_style.scss
index 774f5b27..7580e2ea 100644
--- a/sass/whitelabel/wallet/cc/cc_custom_style.scss
+++ b/sass/whitelabel/wallet/cc/cc_custom_style.scss
@@ -64,10 +64,6 @@ $cc--button-color: $cc--nav-fg-prim-color;
     color: $cc--button-color;
 }
 
-.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
 // disabled buttons
 .client--cc {
     // disabled buttons
@@ -223,4 +219,4 @@ $cc--button-color: $cc--nav-fg-prim-color;
 
 .client--cc  .upload-button-wrapper > span {
     color: $cc--button-color;
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
index 9af18fcf..e3de38a3 100644
--- a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
+++ b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
@@ -64,10 +64,6 @@ $cyland--button-sec-color: #515151;
     color: $cyland--button-color;
 }
 
-.client--cyland .ascribe-piece-list-toolbar .btn-ascribe-add {
-    display: none;
-}
-
 // buttons!
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 8f330911..f0deb9c9 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -229,10 +229,6 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
     color: $ikono--button-color;
 }
 
-.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
 // spinner!
 .client--ikonotv {
 
@@ -560,4 +556,4 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 
 .client--ikonotv  .upload-button-wrapper > span {
     color: $ikono--button-color;
-}
\ No newline at end of file
+}

From f06ad6597cd820defdf17ce0eaa12156b01efe0a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 27 Jan 2016 15:01:33 +0100
Subject: [PATCH 125/197] Refactor PieceListToolbarWidget CSS

---
 .../piece_list_toolbar_filter_widget.js       |  4 +-
 .../piece_list_toolbar_order_widget.js        |  8 ++--
 sass/ascribe_custom_style.scss                | 45 +------------------
 sass/ascribe_piece_list_toolbar.scss          | 15 +++----
 4 files changed, 14 insertions(+), 58 deletions(-)

diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index edb29e85..07e9bc5c 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -86,7 +86,7 @@ let PieceListToolbarFilterWidget = React.createClass({
                 <DropdownButton
                     pullRight={true}
                     title={filterIcon}
-                    className="ascribe-piece-list-toolbar-filter-widget">
+                    className="ascribe-piece-list-toolbar-widget">
                     {/* We iterate over filterParams, to receive the label and then for each
                         label also iterate over its items, to get all filterable options */}
                     {this.props.filterParams.map(({ label, items }, i) => {
@@ -120,7 +120,7 @@ let PieceListToolbarFilterWidget = React.createClass({
                                         <li
                                             key={itemLabel}
                                             onClick={this.filterBy(param)}
-                                            className="filter-widget-item">
+                                            className="ascribe-piece-list-toolbar-widget-item">
                                             <div className="checkbox-line">
                                                 <span>
                                                     {getLangText(itemLabel)}
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
index 5257cc07..26226410 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
@@ -45,7 +45,7 @@ let PieceListToolbarOrderWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        let orderIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
                 <span style={this.isOrderActive()}>&middot;</span>
@@ -56,8 +56,8 @@ let PieceListToolbarOrderWidget = React.createClass({
             return (
                 <DropdownButton
                     pullRight={true}
-                    title={filterIcon}
-                    className="ascribe-piece-list-toolbar-filter-widget">
+                    className="ascribe-piece-list-toolbar-widget"
+                    title={orderIcon}>
                     <li style={{'textAlign': 'center'}}>
                         <em>{getLangText('Sort by')}:</em>
                     </li>
@@ -66,7 +66,7 @@ let PieceListToolbarOrderWidget = React.createClass({
                             <li
                                 key={param}
                                 onClick={this.orderBy(param)}
-                                className="filter-widget-item">
+                                className="ascribe-piece-list-toolbar-widget-item">
                                 <div className="checkbox-line">
                                     <span>
                                         {getLangText(param.replace('_', ' '))}
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index 55fe2868..e0c8c9e9 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -148,14 +148,10 @@ hr {
     font-weight: $ascribe--font-weight-light;
 }
 
-.icon-ascribe-search{
+.icon-ascribe-search {
     color: $ascribe--button-default-color;
 }
 
-.ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
 .ascribe-accordion-list {
     margin-bottom: 1em;
 }
@@ -210,7 +206,6 @@ hr {
 
 .route--login,
 .route--signup {
-
     .btn-spinner {
         background-color: $ascribe--button-default-color;
     }
@@ -233,31 +228,6 @@ hr {
     }
 }
 
-.btn-ascribe-add {
-    width: 30px;
-    height: 30px;
-    background-color: transparent !important;
-    border: 1px solid $ascribe-dark-blue;
-    border-radius: 50%;
-
-    &:hover {
-        border-color: white!important;
-        background-color: $ascribe-dark-blue!important;
-    }
-
-    > span {
-        position: absolute;
-        left: 0;
-        top: 2px;
-        width: 30px;
-        height: 30px;
-        color: $ascribe-dark-blue;
-        padding: 0.4em;
-        &:hover {
-            color: white;
-        }
-    }
-}
 // buttons!
 // thought of the day:
 // "every great atrocity is the result of people just following orders"
@@ -374,19 +344,6 @@ fieldset[disabled] .btn-secondary.active {
     }
 }
 
-.ascribe-piece-list-toolbar-filter-widget button {
-    background-color: transparent;
-    border: 1px solid transparent;
-    color: $ascribe--button-default-color;
-
-    &:hover,
-    &:active {
-        background-color: $ascribe--button-default-color !important;
-        border-color: $ascribe--button-default-color !important;
-        color: white;
-    }
-}
-
 .btn-wide {
     font-weight: $ascribe--font-weight-light;
 }
diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss
index 06cbd1a7..a83447fb 100644
--- a/sass/ascribe_piece_list_toolbar.scss
+++ b/sass/ascribe_piece_list_toolbar.scss
@@ -1,4 +1,3 @@
-
 .ascribe-piece-list-toolbar {
     padding-left: 15px;
     padding-right: 15px;
@@ -30,17 +29,17 @@
     }
 }
 
-.ascribe-piece-list-toolbar-filter-widget {
-
+.ascribe-piece-list-toolbar-widget {
     button {
-        background-color: rgba(0, 0, 0, 0);
-        border: 1px solid rgba(0, 0, 0, 0);
-        color: #02b6a3;
+        background-color: transparent;
+        border: 1px solid transparent;
+        color: $ascribe--button-default-color;
         padding: 6px 4px 6px 8px;
 
         &:hover,
         &:active {
-            background-color: #02b6a3 !important;
+            background-color: $ascribe--button-default-color !important;
+            border-color: $ascribe--button-default-color !important;
             color: white;
         }
         .caret {
@@ -48,7 +47,7 @@
         }
     }
 
-    .filter-widget-item {
+    .ascribe-piece-list-toolbar-widget-item {
         a {
             padding-left: 0;
             padding-right: 0;

From 7edddc4d5a86867834ac3582382f9de92995df67 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:17:30 +0100
Subject: [PATCH 126/197] Update docs for PhantomJS 2.1, whitespace, and more
 tips

---
 docs/visual-regression-testing.md | 107 +++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 25 deletions(-)

diff --git a/docs/visual-regression-testing.md b/docs/visual-regression-testing.md
index 30a711ff..d544b1fa 100644
--- a/docs/visual-regression-testing.md
+++ b/docs/visual-regression-testing.md
@@ -1,33 +1,39 @@
 Introduction
 ============
 
-When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
+When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their
+docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
 
 Contents
 ========
 
   1. [Installation](#installation)
   1. [Running Tests](#running-tests)
-  1. [Gemini Usage](#gemini-usage)
+  1. [Gemini Usage and Writing Tests](#gemini-usage-and-writing-tests)
   1. [PhantomJS](#phantomjs)
+  1. [TODO](#todo)
 
 
 Installation
 ============
 
-First install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
+First make sure that you're using NodeJS 5.0+ as the tests are written using ES6 syntax.
+
+Then, install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
 
 ```bash
-npm install -g phantomjs2
+# Until phantomjs2 is updated for the new 2.1 version of PhantomJS, use the following (go to https://bitbucket.org/ariya/phantomjs/downloads to find a build for your OS)
+npm install -g phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
 
-# If using OSX, install upx and decompress the binary downloaded by npm manually:
+# If using OSX, you may have to install upx and decompress the binary downloaded by npm manually:
 brew install upx
-# Navigate to the binary, ie. /Users/Brett/.nvm/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin
+
+# Navigate to the binary, ie. /Users/Brett/.nvm/versions/node/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin/phantomjs
 upx -d phantomjs
 
 ```
 
-Then [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
+Finally, [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
 
 
 Running Tests
@@ -54,41 +60,84 @@ gemini update gemini/*
 ```
 
 
-Gemini Usage
-============
+Gemini Usage and Writing Tests
+==============================
 
-While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page app like ours (where much of it is behind an authentication barrier as well).
+While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page
+app like ours (where much of it is behind an authentication barrier as well).
+
+Command Line Interface
+----------------------
+
+See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/commands.md) on the commands that are available.
+`npm run vi-*` is set up with some of these commands, but you may want to build your own or learn about some of the
+other functions.
 
 Authentication
 --------------
 
-Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put waits for the log in to succeed, before testing parts of the app that require the authentication.
+Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script
+through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put
+waits for the log in to succeed, before testing parts of the app that require the authentication.
 
 Browser Session States
 ----------------------
 
-Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when Gemini's launched (ie. `gemini update`, `gemini test`, etc).
+Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when
+Gemini's launched (ie. `gemini update`, `gemini test`, etc).
 
-Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
+Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other
+persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
 
-**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of tests by logging out.
+**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running
+instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of
+tests by logging out.
 
-(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as the cookies are cleared each time, this seems unlikely)
+(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as
+the cookies are cleared each time, this seems unlikely)
 
 Test Reporting
 --------------
 
-Using the `--report html` flag with Gemini will produce a webpage with the test's results in /gemini-report that will show the old, new, and diff images. Using this is highly recommended (and fun!).
+Using the `--reporter html` flag with Gemini will produce a webpage with the test's results in `onion/gemini-report`
+that will show the old, new, and diff images. Using this is highly recommended (and fun!) and is used by default in `npm
+run vi-test`.
 
+Writing Tests
+-------------
+
+See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md), and the [section on the available
+actions](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md#available-actions) for what scripted actions
+are available.
+
+Our tests are located in `onion/gemini/`.
+
+Some useful tips:
+  * The `find()` method in the callbacks is equivalent to `document.querySelector`; it will only return the first
+    element found that matches the selector. Use pseudo classes like `nth-of-type()`, `nth-child()`, and etc. to select
+    later elements.
+  * Nested suites inherit from their parent suites' configurations, but will **override** their inherited configuration
+    if another is specified. For example, if `parentSuite` had a `.before()` method, all children of `parentSuite` would
+    run its `.before()`, but if any of the children specified their own `.before()`, those children would **not** run
+    `parentSuite`'s `.before()`.
+  * Gemini takes a screenshot of the minimum bounding rect for all specified selectors, so this means you can't take a
+    screenshot of two items far away from each other without the rest being considered (ie. trying to get the header and
+    footer)
+  * Unfortunately, `setCaptureElements` and `ignoreElements` will only apply for the first element found matching those
+    selectors.
 
 PhantomJS
 =========
 
-[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without needing a browser.
+[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without
+needing a browser.
 
-Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS 1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
+Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to
+other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS
+1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
 
-While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful things to know about.
+While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful
+things to know about.
 
 Useful features
 ---------------
@@ -97,28 +146,36 @@ You can find the full list of CLI commands in the [documentation](http://phantom
 
 Flags that are of particular interest to us:
  * `--webdriver=4444`: sets the webdriver port to be 4444, the default webdriver port that Gemini expects.
- * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to staging, as the certificate we use is self-signed.
+ * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to
+   staging, as the certificate we use is self-signed.
  * `--ssl-protocol=any`: allows any ssl protocol to be used. May be useful when `--ignore-ssl-errors=true` doesn't work.
  * '--remote-debugger-port`: allows for remote debugging the running PhantomJS instance. More on this later.
 
 Troubleshooting and Debugging
 -----------------------------
 
-Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting docs](http://phantomjs.org/troubleshooting.html).
+Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting
+docs](http://phantomjs.org/troubleshooting.html).
 
-To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified after `--remote-debugger-port` on localhost:
+To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified
+after `--remote-debugger-port` on localhost:
 
 ```bash
 phantomjs --remote-debugger-port=9000 debug.js
 ```
 
-PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1 and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()` in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
+PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1
+and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()`
+in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
 
-At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the current execution state of that breakpoint on the page you're on.
+At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the
+current execution state of that breakpoint on the page you're on.
 
 ---
 
-To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to change the environment to run against.
+To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run
+with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to
+change the environment to run against.
 
 ```bash
 # In root /onion folder

From 01217318a437c296001240bd0f1527ca28137f27 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:20:27 +0100
Subject: [PATCH 127/197] Add ids to dropdown buttons, as per warnings

Also helps us find these dropdown buttons with Gemini.
---
 .../piece_list_toolbar_filter_widget.js                    | 1 +
 .../piece_list_toolbar_order_widget.js                     | 7 ++++---
 js/components/header.js                                    | 1 +
 js/components/header_notification.js                       | 1 +
 js/components/nav_routes_links_link.js                     | 6 ++++--
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index edb29e85..c9791dbe 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -84,6 +84,7 @@ let PieceListToolbarFilterWidget = React.createClass({
         if (this.props.filterParams && this.props.filterParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-filter-widget-dropdown"
                     pullRight={true}
                     title={filterIcon}
                     className="ascribe-piece-list-toolbar-filter-widget">
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
index 5257cc07..da9bae43 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
@@ -45,7 +45,7 @@ let PieceListToolbarOrderWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        let orderIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
                 <span style={this.isOrderActive()}>&middot;</span>
@@ -55,9 +55,10 @@ let PieceListToolbarOrderWidget = React.createClass({
         if (this.props.orderParams && this.props.orderParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-order-widget-dropdown"
                     pullRight={true}
-                    title={filterIcon}
-                    className="ascribe-piece-list-toolbar-filter-widget">
+                    className="ascribe-piece-list-toolbar-filter-widget"
+                    title={orderIcon}>
                     <li style={{'textAlign': 'center'}}>
                         <em>{getLangText('Sort by')}:</em>
                     </li>
diff --git a/js/components/header.js b/js/components/header.js
index c16cba86..4bb6881e 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -163,6 +163,7 @@ let Header = React.createClass({
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
+                    id="nav-route-user-dropdown"
                     eventKey="1"
                     title={this.state.currentUser.username}>
                     <LinkContainer
diff --git a/js/components/header_notification.js b/js/components/header_notification.js
index 4b375685..784f8786 100644
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@@ -126,6 +126,7 @@ let HeaderNotifications = React.createClass({
                 <Nav navbar right>
                     <DropdownButton
                         ref='dropdownbutton'
+                        id="header-notification-dropdown"
                         eventKey="1"
                         title={
                             <span>
diff --git a/js/components/nav_routes_links_link.js b/js/components/nav_routes_links_link.js
index 11235ccd..e2bfb7ed 100644
--- a/js/components/nav_routes_links_link.js
+++ b/js/components/nav_routes_links_link.js
@@ -29,7 +29,9 @@ let NavRoutesLinksLink = React.createClass({
         // with MenuItems
         if(children) {
             return (
-                <DropdownButton title={headerTitle}>
+                <DropdownButton
+                    id={`nav-route-${headerTitle.toLowerCase()}-dropdown`}
+                    title={headerTitle}>
                     {children}
                 </DropdownButton>
             );
@@ -55,4 +57,4 @@ let NavRoutesLinksLink = React.createClass({
     }
 });
 
-export default NavRoutesLinksLink;
\ No newline at end of file
+export default NavRoutesLinksLink;

From 7383fbb1f648214a838d0854bcd45fa984658b9d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:20:43 +0100
Subject: [PATCH 128/197] Standardize CoaVerify route across apps

---
 js/components/coa_verify_container.js         | 85 +++++++++----------
 .../whitelabel/wallet/wallet_routes.js        | 10 +--
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index 6d0af0fa..4a270cf4 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -27,7 +27,7 @@ let CoaVerifyContainer = React.createClass({
 
         return (
             <div className="ascribe-login-wrapper">
-                <br/>
+                <br />
                 <div className="ascribe-login-text ascribe-login-header">
                     {getLangText('Verify your Certificate of Authenticity')}
                 </div>
@@ -37,7 +37,7 @@ let CoaVerifyContainer = React.createClass({
                     signature={signature}/>
                 <br />
                 <br />
-                    {getLangText('ascribe is using the following public key for verification')}:
+                {getLangText('ascribe is using the following public key for verification')}:
                 <br />
                 <pre>
                 -----BEGIN PUBLIC KEY-----
@@ -60,9 +60,8 @@ let CoaVerifyForm = React.createClass({
     },
 
     handleSuccess(response){
-        let notification = null;
         if (response.verdict) {
-            notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
+            const notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
     },
@@ -71,46 +70,44 @@ let CoaVerifyForm = React.createClass({
         const { message, signature } = this.props;
 
         return (
-            <div>
-                <Form
-                    url={ApiUrls.coa_verify}
-                    handleSuccess={this.handleSuccess}
-                    buttons={
-                        <button
-                            type="submit"
-                            className="btn btn-default btn-wide">
-                            {getLangText('Verify your Certificate of Authenticity')}
-                        </button>}
-                    spinner={
-                        <span className="btn btn-default btn-wide btn-spinner">
-                            <AscribeSpinner color="dark-blue" size="md" />
-                        </span>
-                        }>
-                    <Property
-                        name='message'
-                        label={getLangText('Message')}>
-                        <input
-                            type="text"
-                            placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
-                            autoComplete="on"
-                            defaultValue={message}
-                            name="username"
-                            required/>
-                    </Property>
-                    <Property
-                        name='signature'
-                        label="Signature"
-                        editable={true}
-                        overrideForm={true}>
-                        <InputTextAreaToggable
-                            rows={3}
-                            placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
-                            defaultValue={signature}
-                            required/>
-                    </Property>
-                    <hr />
-                </Form>
-            </div>
+            <Form
+                url={ApiUrls.coa_verify}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn btn-default btn-wide">
+                        {getLangText('Verify your Certificate of Authenticity')}
+                    </button>
+                }
+                spinner={
+                    <span className="btn btn-default btn-wide btn-spinner">
+                        <AscribeSpinner color="dark-blue" size="md" />
+                    </span>
+                }>
+                <Property
+                    name='message'
+                    label={getLangText('Message')}>
+                    <input
+                        type="text"
+                        placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
+                        autoComplete="on"
+                        defaultValue={message}
+                        required />
+                </Property>
+                <Property
+                    name='signature'
+                    label="Signature"
+                    editable={true}
+                    overrideForm={true}>
+                    <InputTextAreaToggable
+                        rows={3}
+                        placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
+                        defaultValue={signature}
+                        required />
+                </Property>
+                <hr />
+            </Form>
         );
     }
 });
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index a5a0e075..b4e3c7ea 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -77,7 +77,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
                 headerTitle='COLLECTION' />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='pieces/:pieceId' component={CylandPieceContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
@@ -112,7 +112,7 @@ let ROUTES = {
                 headerTitle='COLLECTION' />
             <Route path='pieces/:pieceId' component={PieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -156,7 +156,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
             <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -192,7 +192,7 @@ let ROUTES = {
                 headerTitle='COLLECTION' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -228,7 +228,7 @@ let ROUTES = {
                 headerTitle='COLLECTION' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     )

From f9c70e2beb87af5fdcbc637cb5c65d4afd4d2398 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:21:57 +0100
Subject: [PATCH 129/197] Main app visual test suite

---
 .gemini.yml                  |  15 ++-
 gemini/main/authenticated.js | 214 +++++++++++++++++++++++++++++++++++
 gemini/main/basic.js         | 145 ++++++++++++++++++++++++
 gemini/main/detail.js        | 125 ++++++++++++++++++++
 4 files changed, 493 insertions(+), 6 deletions(-)
 create mode 100644 gemini/main/authenticated.js
 create mode 100644 gemini/main/basic.js
 create mode 100644 gemini/main/detail.js

diff --git a/.gemini.yml b/.gemini.yml
index 5af1ef27..8d434624 100644
--- a/.gemini.yml
+++ b/.gemini.yml
@@ -1,14 +1,17 @@
-rootUrl: https://www.ascribe.ninja/app
+rootUrl: http://localhost.com:3000/
+sessionsPerBrowser: 1
 
 browsers:
-    PhantomJSDesktop:
-        screenshotsDir: './gemini/screens/desktop'
+    MainDesktop:
+        rootUrl: http://localhost.com:3000/
+        screenshotsDir: './gemini-screens/desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
-    PhantomJSMobile:
-        screenshotsDir: './gemini/screens/mobile'
-        windowSize: 767x1364
+    MainMobile:
+        rootUrl: http://localhost.com:3000/
+        screenshotsDir: './gemini-screens/mobile'
+        windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
diff --git a/gemini/main/authenticated.js b/gemini/main/authenticated.js
new file mode 100644
index 00000000..bf579bff
--- /dev/null
+++ b/gemini/main/authenticated.js
@@ -0,0 +1,214 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against routes that require the user to be authenticated.
+*/
+gemini.suite('Authenticated', (suite) => {
+    suite
+        .setUrl('/collection')
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.app',
+            // when we can use this file with the whitelabels
+            actions.waitForElementToShow('.ascribe-default-app', 5000);
+        });
+
+    // Suite just to log us in before any other suites run
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            .ignoreElements('.ascribe-body')
+            .capture('logged in', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), '0000000000');
+                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
+
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            });
+    });
+
+    gemini.suite('Header-desktop', (headerSuite) => {
+        headerSuite
+            .setCaptureElements('nav.navbar .container')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.client--cyland img.img-brand')
+            .skip(/Mobile/)
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            })
+            .capture('desktop header');
+
+        gemini.suite('User dropdown', (headerUserSuite) => {
+            headerUserSuite
+                .setCaptureElements('#nav-route-user-dropdown ~ .dropdown-menu')
+                .capture('expanded user dropdown', (actions, find) => {
+                    actions.click(find('#nav-route-user-dropdown'));
+                });
+        });
+
+        gemini.suite('Notification dropdown', (headerNotificationSuite) => {
+            headerNotificationSuite
+                .setCaptureElements('#header-notification-dropdown ~ .dropdown-menu')
+                .capture('expanded notifications dropdown', (actions, find) => {
+                    actions.click(find('#header-notification-dropdown'));
+                });
+        });
+    });
+
+    // Test for the collapsed header in mobile
+    gemini.suite('Header-mobile', (headerMobileSuite) => {
+        headerMobileSuite
+            .setCaptureElements('nav.navbar .container')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.client--cyland img.img-brand')
+            .skip(/Desktop/)
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            })
+            .capture('mobile header')
+            .capture('expanded mobile header', (actions, find) => {
+                actions.click(find('nav.navbar .navbar-toggle'));
+                // Wait for the header to expand
+                actions.wait(500);
+            })
+            .capture('expanded user dropdown', (actions, find) => {
+                actions.click(find('#nav-route-user-dropdown'));
+            })
+            .capture('expanded notifications dropdown', (actions, find) => {
+                actions.click(find('#header-notification-dropdown'));
+            });
+    });
+
+    gemini.suite('Collection', (collectionSuite) => {
+        collectionSuite
+            .setCaptureElements('.ascribe-accordion-list')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                // Wait for the images to load
+                // FIXME: unfortuntately gemini doesn't support ignoring multiple elements from a single selector
+                // so we're forced to wait and hope that the images will all finish loading after 5s.
+                // We could also change the thumbnails with JS, but setting up a test user is probably easier.
+                actions.wait(5000);
+            })
+            .capture('collection')
+            .capture('expanded edition in collection', (actions, find) => {
+                actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
+                // Wait for editions to load
+                actions.waitForElementToShow('.ascribe-accordion-list-item-table', 5000);
+            })
+
+        gemini.suite('Collection placeholder', (collectionPlaceholderSuite) => {
+            collectionPlaceholderSuite
+                .setCaptureElements('.ascribe-accordion-list-placeholder')
+                .capture('collection empty search', (actions, find) => {
+                    actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result');
+                    actions.waitForElementToShow('.ascribe-accordion-list-placeholder', 5000);
+                });
+        });
+
+        gemini.suite('PieceListBulkModal', (pieceListBulkModalSuite) => {
+            pieceListBulkModalSuite
+                .setCaptureElements('.piece-list-bulk-modal')
+                .capture('items selected', (actions, find) => {
+                    actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
+                    // Wait for editions to load
+                    actions.waitForElementToShow('.ascribe-accordion-list-item-table', 5000);
+
+                    actions.click('.ascribe-table thead tr input[type="checkbox"]');
+                    actions.waitForElementToShow('.piece-list-bulk-modal');
+                });
+        });
+    });
+
+    gemini.suite('PieceListToolbar', (pieceListToolbarSuite) => {
+        pieceListToolbarSuite
+            .setCaptureElements('.ascribe-piece-list-toolbar')
+            .capture('piece list toolbar')
+            .capture('piece list toolbar search filled', (actions, find) => {
+                actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
+            })
+
+        gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
+            pieceListToolbarOrderWidgetSuite
+                .setCaptureElements('#ascribe-piece-list-toolbar-order-widget-dropdown',
+                                    '#ascribe-piece-list-toolbar-order-widget-dropdown ~ .dropdown-menu')
+                .capture('expanded order dropdown', (actions, find) => {
+                    actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));
+
+                    // Wait as the dropdown screenshot still includes the collection in the background
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                });
+        });
+
+        gemini.suite('Filter widget dropdown', (pieceListToolbarFilterWidgetSuite) => {
+            pieceListToolbarFilterWidgetSuite
+                .setCaptureElements('#ascribe-piece-list-toolbar-filter-widget-dropdown',
+                                    '#ascribe-piece-list-toolbar-filter-widget-dropdown ~ .dropdown-menu')
+                .capture('expanded filter dropdown', (actions, find) => {
+                    actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));
+
+                    // Wait as the dropdown screenshot still includes the collection in the background
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                });
+        });
+    });
+
+    gemini.suite('Register work', (registerSuite) => {
+        registerSuite
+            .setUrl('/register_piece')
+            .capture('register work', (actions, find) => {
+                // The uploader options are only rendered after the user is fetched, so
+                // we have to wait for it here
+                actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', 5000);
+            })
+            .capture('register work filled', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="artist_name"]'), 'artist name');
+                actions.sendKeys(find('.ascribe-form input[name="title"]'), 'title');
+                actions.sendKeys(find('.ascribe-form input[name="date_created"]'), 'date created');
+            })
+            .capture('register work filled with editions', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                actions.wait(500);
+                actions.sendKeys(find('.ascribe-form input[name="num_editions"]'), '50');
+            });
+
+        gemini.suite('Register work hash', (registerHashSuite) => {
+            registerHashSuite
+                .setUrl('/register_piece?method=hash')
+                .capture('register work hash method');
+        });
+
+        gemini.suite('Register work upload', (registerUploadSuite) => {
+            registerUploadSuite
+                .setUrl('/register_piece?method=upload')
+                .capture('register work upload method');
+        });
+    });
+
+    gemini.suite('User settings', (userSettingsSuite) => {
+        userSettingsSuite
+            .setUrl('/settings')
+            .before((actions, find) => {
+                // This will be called before every nested suite begins unless that suite
+                // also defines a `.before()`
+                actions.waitForElementToShow('.settings-container', 5000);
+            })
+            .capture('user settings');
+    });
+
+    // Suite just to log out after suites have run
+    gemini.suite('Log out', (logoutSuite) => {
+        logoutSuite
+            .setUrl('/logout')
+            .ignoreElements('.ascribe-body')
+            .capture('logout', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-login-wrapper', 10000);
+            });
+    });
+});
diff --git a/gemini/main/basic.js b/gemini/main/basic.js
new file mode 100644
index 00000000..317c5d84
--- /dev/null
+++ b/gemini/main/basic.js
@@ -0,0 +1,145 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Basic suite of tests against routes that do not require the user to be authenticated.
+*/
+gemini.suite('Basic', (suite) => {
+    suite
+        .setUrl('/login')
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-default-app', 5000);
+        });
+
+    gemini.suite('Header-desktop', (headerSuite) => {
+        headerSuite
+            .setCaptureElements('nav.navbar .container')
+            .skip(/Mobile/)
+            .capture('desktop header', (actions, find) => {
+                actions.waitForElementToShow('nav.navbar .container', 5000);
+            })
+            .capture('hover on active item', (actions, find) => {
+                const activeItem = find('nav.navbar li.active');
+                actions.mouseMove(activeItem);
+            })
+            .capture('hover on inactive item', (actions, find) => {
+                const inactiveItem = find('nav.navbar li:not(.active)');
+                actions.mouseMove(inactiveItem);
+            });
+    });
+
+    // Test for the collapsed header in mobile
+    gemini.suite('Header-mobile', (headerMobileSuite) => {
+        headerMobileSuite
+            .setCaptureElements('nav.navbar .container')
+            .skip(/Desktop/)
+            .capture('mobile header', (actions, find) => {
+                actions.waitForElementToShow('nav.navbar .container', 5000);
+            })
+            .capture('expanded mobile header', (actions, find) => {
+                actions.click(find('nav.navbar .navbar-toggle'));
+                // Wait for the header to expand
+                actions.wait(500);
+            })
+            .capture('hover on expanded mobile header item', (actions, find) => {
+                actions.mouseMove(find('nav.navbar li'));
+            });
+    });
+
+    gemini.suite('Footer', (footerSuite) => {
+        footerSuite
+            .setCaptureElements('.ascribe-footer')
+            .capture('footer', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-footer', 5000);
+            })
+            .capture('hover on footer item', (actions, find) => {
+                const footerItem = find('.ascribe-footer a:not(.social)');
+                actions.mouseMove(footerItem);
+            })
+            .capture('hover on footer social item', (actions, find) => {
+                const footerSocialItem = find('.ascribe-footer a.social')
+                actions.mouseMove(footerSocialItem);
+            });
+    });
+
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .capture('login', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('hover on login submit', (actions, find) => {
+                actions.mouseMove(find('.ascribe-form button[type=submit]'));
+            })
+            .capture('hover on sign up link', (actions, find) => {
+                actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+            })
+            .capture('login form filled with focus', (actions, find) => {
+                const emailInput = find('.ascribe-form input[name=email]');
+
+                // Remove hover from sign up link
+                actions.click(emailInput);
+
+                actions.sendKeys(emailInput, 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+            })
+            .capture('login form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Sign up', (signUpSuite) => {
+        signUpSuite
+            .setUrl('/signup')
+            .capture('sign up', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('sign up form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+            })
+            .capture('sign up form filled with check', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+            });
+    });
+
+    gemini.suite('Password reset', (passwordResetSuite) => {
+        passwordResetSuite
+            .setUrl('/password_reset')
+            .capture('password reset', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('password reset form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), 'dimi@mailinator.com');
+            })
+            .capture('password reset form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Coa verify', (coaVerifySuite) => {
+        coaVerifySuite
+            .setUrl('/coa_verify')
+            .capture('coa verify', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('coa verify form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
+                actions.sendKeys(find('.ascribe-form .ascribe-property-wrapper:nth-of-type(2) textarea'), 'sample signature');
+            })
+            .capture('coa verify form filled', (actions, find) => {
+                actions.click(find('.ascribe-login-header'));
+            });
+    });
+
+    gemini.suite('Not found', (notFoundSuite) => {
+        notFoundSuite
+            .setUrl('/not_found_page')
+            .capture('not found page');
+    });
+});
diff --git a/gemini/main/detail.js b/gemini/main/detail.js
new file mode 100644
index 00000000..39a02338
--- /dev/null
+++ b/gemini/main/detail.js
@@ -0,0 +1,125 @@
+'use strict';
+
+const gemini = require('gemini');
+const pieceUrl = '/pieces/12374';
+const editionUrl = '/editions/14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+
+/**
+ * Suite of tests against the piece and edition routes.
+ * Tests include accessing the piece / edition as the owner or as another user
+ * (we can just use an anonymous user in this case).
+*/
+gemini.suite('Work detail', (suite) => {
+    suite
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.app',
+            // when we can use this file with the whitelabels
+            actions.waitForElementToShow('.ascribe-default-app', 5000);
+
+            // Wait for the social media buttons to appear
+            actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', 20000);
+            actions.waitForElementToShow('.ascribe-social-button-list .twitter-share-button', 20000);
+            actions.waitForElementToShow('.ascribe-media-player', 10000);
+        });
+
+    gemini.suite('Basic piece', (basicPieceSuite) => {
+        basicPieceSuite
+            .setUrl(pieceUrl)
+            .capture('basic piece')
+            .capture('shmui', (actions, find) => {
+                actions.click(find('.ascribe-media-player'));
+                actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
+                // Wait for the transition to end
+                actions.wait(1000);
+            });
+    });
+
+    gemini.suite('Basic edition', (basicEditionSuite) => {
+        basicEditionSuite
+            .setUrl(editionUrl)
+            .capture('basic edition');
+    });
+
+    // Suite just to log us in before any other suites run
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            .ignoreElements('.ascribe-body')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-default-app', 5000);
+            })
+            .capture('logged in', (actions, find) => {
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), '0000000000');
+                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
+
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            });
+    });
+
+    gemini.suite('Authorized piece', (authorizedPieceSuite) => {
+        authorizedPieceSuite
+            .setUrl(pieceUrl)
+            .capture('authorized piece');
+    });
+
+    gemini.suite('Authorized edition', (authorizedEditionSuite) => {
+        authorizedEditionSuite
+            .setUrl(editionUrl)
+            .capture('authorized edition')
+    });
+
+    gemini.suite('Detail action buttons', (detailActionButtonSuite) => {
+        detailActionButtonSuite
+            .setUrl(editionUrl)
+            .capture('hover on action button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default'));
+            })
+            .capture('hover on delete button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-tertiary'));
+            })
+            .capture('hover on info button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.glyphicon-question-sign'));
+            })
+            .capture('expand info text', (actions, find) => {
+                actions.click(find('.ascribe-detail-property .ascribe-button-list button.glyphicon-question-sign'));
+            });
+    });
+
+    gemini.suite('Action form modal', (actionFormModalSuite) => {
+        actionFormModalSuite
+            .setUrl(editionUrl)
+            .setCaptureElements('.modal-dialog')
+            .capture('open email form', (actions, find) => {
+                // Add class names to make the action buttons easier to select
+                actions.executeJS(function (window) {
+                    var actionButtons = window.document.querySelectorAll('.ascribe-detail-property .ascribe-button-list button.btn-default');
+                    for (var ii = 0; ii < actionButtons.length; ++ii) {
+                        if (actionButtons[ii].textContent) {
+                            actionButtons[ii].className += ' ascribe-action-button-' + actionButtons[ii].textContent.toLowerCase();
+                        }
+                    }
+                });
+                actions.click(find('.ascribe-detail-property .ascribe-button-list button.ascribe-action-button-email'));
+
+                // Wait for transition
+                actions.wait(1000);
+            });
+    });
+
+    // Suite just to log out after suites have run
+    gemini.suite('Log out', (logoutSuite) => {
+        logoutSuite
+            .setUrl('/logout')
+            .ignoreElements('.ascribe-body')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-default-app', 5000);
+            })
+            .capture('logout', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-login-wrapper', 10000);
+            });
+    });
+});

From cf0a66ef2e792e4ffaee42d06467895f76275f60 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:24:01 +0100
Subject: [PATCH 130/197] Add whitelabel visual test suite

Currently just checks landing page and some pages accessible to
unauthorized users.
---
 .gemini.yml                                  | 116 +++++++++++++++++++
 gemini/whitelabel/23vivi/23vivi.js           |  27 +++++
 gemini/whitelabel/cyland/cyland.js           |  28 +++++
 gemini/whitelabel/ikonotv/ikonotv.js         |  95 +++++++++++++++
 gemini/whitelabel/lumenus/lumenus.js         |  27 +++++
 gemini/whitelabel/shared/whitelabel_basic.js | 112 ++++++++++++++++++
 6 files changed, 405 insertions(+)
 create mode 100644 gemini/whitelabel/23vivi/23vivi.js
 create mode 100644 gemini/whitelabel/cyland/cyland.js
 create mode 100644 gemini/whitelabel/ikonotv/ikonotv.js
 create mode 100644 gemini/whitelabel/lumenus/lumenus.js
 create mode 100644 gemini/whitelabel/shared/whitelabel_basic.js

diff --git a/.gemini.yml b/.gemini.yml
index 8d434624..a04903eb 100644
--- a/.gemini.yml
+++ b/.gemini.yml
@@ -15,3 +15,119 @@ browsers:
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
+
+    CcDesktop:
+        rootUrl: http://cc.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cc-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CcMobile:
+        rootUrl: http://cc.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cc-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CylandDesktop:
+        rootUrl: http://cyland.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cyland-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CylandMobile:
+        rootUrl: http://cyland.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cyland-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    IkonotvDesktop:
+        rootUrl: http://ikonotv.localhost.com:3000/
+        screenshotsDir: './gemini-screens/ikonotv-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    IkonotvMobile:
+        rootUrl: http://ikonotv.localhost.com:3000/
+        screenshotsDir: './gemini-screens/ikonotv-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    LumenusDesktop:
+        rootUrl: http://lumenus.localhost.com:3000/
+        screenshotsDir: './gemini-screens/lumenus-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    LumenusMobile:
+        rootUrl: http://lumenus.localhost.com:3000/
+        screenshotsDir: './gemini-screens/lumenus-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    23viviDesktop:
+        rootUrl: http://23vivi.localhost.com:3000/
+        screenshotsDir: './gemini-screens/23vivi-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    23viviMobile:
+        rootUrl: http://23vivi.localhost.com:3000/
+        screenshotsDir: './gemini-screens/23vivi-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+sets:
+    main:
+        files:
+            - gemini/main
+        browsers:
+            - MainDesktop
+            - MainMobile
+    cc:
+        files:
+            - gemini/whitelabel/shared
+        browsers:
+            - CcDesktop
+            - CcMobile
+
+    cyland:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/cyland
+        browsers:
+            - CylandDesktop
+            - CylandMobile
+
+    ikonotv:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/ikonotv
+        browsers:
+            - IkonotvDesktop
+            - IkonotvMobile
+
+    lumenus:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/lumenus
+        browsers:
+            - LumenusDesktop
+            - LumenusMobile
+
+    23vivi:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/23vivi
+        browsers:
+            - 23viviDesktop
+            - 23viviMobile
diff --git a/gemini/whitelabel/23vivi/23vivi.js b/gemini/whitelabel/23vivi/23vivi.js
new file mode 100644
index 00000000..cafdfc6d
--- /dev/null
+++ b/gemini/whitelabel/23vivi/23vivi.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against 23vivi specific routes
+ */
+gemini.suite('23vivi', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            .capture('landing', (actions, find) => {
+                // Wait for the logo to appear
+                actions.waitForElementToShow('.vivi23-landing--header-logo', 10000);
+            });
+    });
+
+    // TODO: add more tests for market specific pages after authentication
+});
diff --git a/gemini/whitelabel/cyland/cyland.js b/gemini/whitelabel/cyland/cyland.js
new file mode 100644
index 00000000..06709f39
--- /dev/null
+++ b/gemini/whitelabel/cyland/cyland.js
@@ -0,0 +1,28 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against Cyland specific routes
+ */
+gemini.suite('Cyland', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.cyland-landing img')
+            .capture('landing', (actions, find) => {
+                actions.waitForElementToShow('.cyland-landing img', 10000);
+            });
+    });
+
+    // TODO: add more tests for cyland specific pages after authentication
+});
diff --git a/gemini/whitelabel/ikonotv/ikonotv.js b/gemini/whitelabel/ikonotv/ikonotv.js
new file mode 100644
index 00000000..1741aaa0
--- /dev/null
+++ b/gemini/whitelabel/ikonotv/ikonotv.js
@@ -0,0 +1,95 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against Cyland specific routes
+ */
+gemini.suite('Ikonotv', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            // Gemini complains if we try to capture the entire app for Ikonotv's landing page for some reason
+            .setCaptureElements('.ikonotv-landing')
+            .setTolerance(5)
+            .capture('landing', (actions, find) => {
+                // Stop background animation
+                actions.executeJS(function (window) {
+                    var landingBackground = window.document.querySelector('.client--ikonotv .route--landing');
+                    landingBackground.style.animation = 'none';
+                    landingBackground.style.webkitAnimation = 'none';
+                });
+
+                // Wait for logo to appear
+                actions.waitForElementToShow('.ikonotv-landing header img', 10000);
+            });
+    });
+
+    // Ikono needs its own set of tests for some pre-authorization pages to wait for
+    // its logo to appear
+    gemini.suite('Ikonotv basic', (suite) => {
+        suite
+            .setCaptureElements('.ascribe-wallet-app')
+            .before((actions, find) => {
+                // This will be called before every nested suite begins unless that suite
+                // also defines a `.before()`
+                // FIXME: use a more generic class for this, like just '.app',
+                // when we can use this file with the whitelabels
+                actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+
+                // Wait for the forms to appear
+                actions.waitForElementToShow('.ascribe-form', 5000);
+
+                // Just use a dumb wait because the logo is set as a background image
+                actions.wait(3000);
+            });
+
+        gemini.suite('Login', (loginSuite) => {
+            loginSuite
+                .setUrl('/login')
+                .capture('login')
+                .capture('hover on login submit', (actions, find) => {
+                    actions.mouseMove(find('.ascribe-form button[type=submit]'));
+                })
+                .capture('hover on sign up link', (actions, find) => {
+                    actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+                })
+                .capture('login form filled with focus', (actions, find) => {
+                    const emailInput = find('.ascribe-form input[name=email]');
+
+                    // Remove hover from sign up link
+                    actions.click(emailInput);
+
+                    actions.sendKeys(emailInput, 'dimi@mailinator.com');
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                })
+                .capture('login form filled', (actions, find) => {
+                    actions.click(find('.ascribe-form-header'));
+                });
+        });
+
+        gemini.suite('Sign up', (signUpSuite) => {
+            signUpSuite
+                .setUrl('/signup')
+                .capture('sign up')
+                .capture('sign up form filled with focus', (actions, find) => {
+                    actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+                })
+                .capture('sign up form filled with check', (actions, find) => {
+                    actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                });
+        });
+    });
+
+    // TODO: add more tests for ikonotv specific pages after authentication
+});
diff --git a/gemini/whitelabel/lumenus/lumenus.js b/gemini/whitelabel/lumenus/lumenus.js
new file mode 100644
index 00000000..a9ff53cd
--- /dev/null
+++ b/gemini/whitelabel/lumenus/lumenus.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against lumenus specific routes
+ */
+gemini.suite('Lumenus', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            .capture('landing', (actions, find) => {
+                // Wait for the logo to appear
+                actions.waitForElementToShow('.wp-landing-wrapper img', 10000);
+            });
+    });
+
+    // TODO: add more tests for market specific pages after authentication
+});
diff --git a/gemini/whitelabel/shared/whitelabel_basic.js b/gemini/whitelabel/shared/whitelabel_basic.js
new file mode 100644
index 00000000..7fe5c256
--- /dev/null
+++ b/gemini/whitelabel/shared/whitelabel_basic.js
@@ -0,0 +1,112 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Basic suite of tests against whitelabel routes that do not require authentication.
+*/
+gemini.suite('Whitelabel basic', (suite) => {
+    suite
+        .setCaptureElements('.ascribe-wallet-app > .container')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+
+            // Use a dumb wait in case we're still waiting for other assets, like fonts, to load
+            actions.wait(1000);
+        });
+
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            // See Ikono
+            .skip(/Ikono/)
+            .capture('login', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // For some reason, the screenshots seem to keep catching the whitelabel login form
+                // on a refresh and without fonts loaded (maybe because they're the first tests run
+                // and the cache isn't hot yet?).
+                // Let's wait a bit and hope they load.
+                actions.wait(3000);
+            })
+            .capture('hover on login submit', (actions, find) => {
+                actions.mouseMove(find('.ascribe-form button[type=submit]'));
+            })
+            .capture('hover on sign up link', (actions, find) => {
+                actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+            })
+            .capture('login form filled with focus', (actions, find) => {
+                const emailInput = find('.ascribe-form input[name=email]');
+
+                // Remove hover from sign up link
+                actions.click(emailInput);
+
+                actions.sendKeys(emailInput, 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+            })
+            .capture('login form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Sign up', (signUpSuite) => {
+        signUpSuite
+            .setUrl('/signup')
+            // See Ikono
+            .skip(/Ikono/)
+            .capture('sign up', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('sign up form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+            })
+            .capture('sign up form filled with check', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+            });
+    });
+
+    gemini.suite('Password reset', (passwordResetSuite) => {
+        passwordResetSuite
+            .setUrl('/password_reset')
+            .capture('password reset', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('password reset form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), 'dimi@mailinator.com');
+            })
+            .capture('password reset form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Coa verify', (coaVerifySuite) => {
+        coaVerifySuite
+            .setUrl('/coa_verify')
+            .capture('coa verify', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('coa verify form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
+                actions.sendKeys(find('.ascribe-form .ascribe-property-wrapper:nth-of-type(2) textarea'), 'sample signature');
+            })
+            .capture('coa verify form filled', (actions, find) => {
+                actions.click(find('.ascribe-login-header'));
+            });
+    });
+
+    gemini.suite('Not found', (notFoundSuite) => {
+        notFoundSuite
+            .setUrl('/not_found_page')
+            .capture('not found page');
+    });
+});

From 331fdb528de81d2a3378502473f6e3793b035cb7 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:24:28 +0100
Subject: [PATCH 131/197] Remove browser-sync notify pop over that shows up in
 visual tests

---
 gulpfile.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/gulpfile.js b/gulpfile.js
index f13945b0..afa0d5a9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -97,7 +97,8 @@ gulp.task('browser-sync', function() {
         proxy: 'http://localhost:4000',
         port: 3000,
         open: false, // does not open the browser-window anymore (handled manually)
-        ghostMode: false
+        ghostMode: false,
+        notify: false // stop showing the browsersync pop up
     });
 });
 

From 83b5b09b874155522b45734581c50b32fe3da6c9 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:26:10 +0100
Subject: [PATCH 132/197] Add npm scripts for running visual tests

---
 docs/visual-regression-testing.md | 33 +++++++++++++++++++++++++------
 package.json                      | 17 ++++++++++++++--
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/docs/visual-regression-testing.md b/docs/visual-regression-testing.md
index d544b1fa..35d328f0 100644
--- a/docs/visual-regression-testing.md
+++ b/docs/visual-regression-testing.md
@@ -42,21 +42,32 @@ Running Tests
 Run PhantomJS:
 
 ```bash
-phantomjs --webdriver=4444
+npm run vi-phantom
 ```
 
 And then run Gemini tests:
 
 ```bash
-# In root onion/
-gemini test gemini/* --report html
+npm run vi-test
+
+# Run only main tests
+npm run vi-test:main
+
+# Run only whitelabel tests
+npm run vi-test:whitelabel
+
+# Run only specific whitelabel tests
+npm run vi-test:cyland
 ```
 
-If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are no regressions first!), use
+If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are
+no regressions first!), use
 
 ```bash
-# In root onion/
-gemini update gemini/*
+npm run vi-update
+
+# Update just the main app for desktop and mobile
+npm run vi-update -- --browser MainDesktop --browser MainMobile
 ```
 
 
@@ -112,6 +123,8 @@ are available.
 
 Our tests are located in `onion/gemini/`.
 
+**It would be nice if we kept the whitelabels up to date.**
+
 Some useful tips:
   * The `find()` method in the callbacks is equivalent to `document.querySelector`; it will only return the first
     element found that matches the selector. Use pseudo classes like `nth-of-type()`, `nth-child()`, and etc. to select
@@ -181,3 +194,11 @@ change the environment to run against.
 # In root /onion folder
 phantomjs phantomjs/launch_app_and_login.js
 ```
+
+
+TODO
+====
+
+* Write scripts to automate creation of test users (and modify tests to accomodate)
+* Set scripts with rootUrls pointing to staging / live using environment variables
+* Set up with Sauce Labs
diff --git a/package.json b/package.json
index d3e7ae41..dd8b3244 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,20 @@
     "lint": "eslint ./js",
     "postinstall": "npm run build",
     "build": "gulp build --production",
-    "start": "node server.js"
+    "start": "node server.js",
+
+    "vi-clean": "rm -rf gemini-report",
+    "vi-phantom": "phantomjs --webdriver=4444",
+    "vi-update": "gemini update",
+    "vi-test": "npm run vi-clean && gemini test --reporter html --reporter vflat || true",
+    "vi-test:all": "npm run vi-test",
+    "vi-test:main": "npm run vi-test -- --browser MainDesktop --browser MainMobile",
+    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test",
+    "vi-test:cc": "npm run vi-test -- --browser CcDesktop --browser CcMobile",
+    "vi-test:cyland": "npm run vi-test -- --browser CylandDesktop --browser CylandMobile",
+    "vi-test:ikonotv": "npm run vi-test -- --browser IkonotvDesktop --browser IkonotvMobile",
+    "vi-test:lumenus": "npm run vi-test -- --browser LumenusDesktop --browser LumenusMobile",
+    "vi-test:23vivi": "npm run vi-test -- --browser 23viviDesktop --browser 23viviMobile"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"
@@ -35,7 +48,7 @@
   "devDependencies": {
     "babel-eslint": "^3.1.11",
     "babel-jest": "^5.2.0",
-    "gemini": "^2.0.3",
+    "gemini": "^2.1.0",
     "gulp-sass": "^2.1.1",
     "jest-cli": "^0.4.0",
     "phantomjs2": "^2.0.2"

From cc072199a12fca547d5ed295ab44d8e764e0061f Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:48:37 +0100
Subject: [PATCH 133/197] Update npm scripts for sauce labs

---
 package.json | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index ba9ba324..bfe0c416 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,9 @@
     "postinstall": "npm run build",
     "build": "gulp build --production",
     "start": "node server.js",
-
-    "test": "mocha",
-    "tunnel": "node test/tunnel.js"
-
+    "test": "npm run sauce-test",
+    "sauce-test": "mocha",
+    "tunnel": "node test/tunnel.js",
     "vi-clean": "rm -rf gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update",

From 8cb953618729eaf73315045b866bf75c7939b01b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 13:39:46 +0100
Subject: [PATCH 134/197] Move sauce tests to /test/integration folder

---
 package.json                               | 4 ++--
 test/{ => integration}/README.md           | 0
 test/{ => integration}/config.js           | 0
 test/{ => integration}/setup.js            | 0
 test/{ => integration/tests}/test-login.js | 2 +-
 test/{ => integration}/tunnel.js           | 0
 6 files changed, 3 insertions(+), 3 deletions(-)
 rename test/{ => integration}/README.md (100%)
 rename test/{ => integration}/config.js (100%)
 rename test/{ => integration}/setup.js (100%)
 rename test/{ => integration/tests}/test-login.js (97%)
 rename test/{ => integration}/tunnel.js (100%)

diff --git a/package.json b/package.json
index bfe0c416..42c8bba9 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "build": "gulp build --production",
     "start": "node server.js",
     "test": "npm run sauce-test",
-    "sauce-test": "mocha",
-    "tunnel": "node test/tunnel.js",
+    "sauce-test": "mocha ./test/integration/tests/",
+    "tunnel": "node ./test/integration/tunnel.js",
     "vi-clean": "rm -rf gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update",
diff --git a/test/README.md b/test/integration/README.md
similarity index 100%
rename from test/README.md
rename to test/integration/README.md
diff --git a/test/config.js b/test/integration/config.js
similarity index 100%
rename from test/config.js
rename to test/integration/config.js
diff --git a/test/setup.js b/test/integration/setup.js
similarity index 100%
rename from test/setup.js
rename to test/integration/setup.js
diff --git a/test/test-login.js b/test/integration/tests/test-login.js
similarity index 97%
rename from test/test-login.js
rename to test/integration/tests/test-login.js
index e2736fe1..853d48e5 100644
--- a/test/test-login.js
+++ b/test/integration/tests/test-login.js
@@ -5,7 +5,7 @@ const wd = require('wd');
 const asserters = wd.asserters;   // Commonly used asserters for async waits in the browser
 const chai = require('chai');
 const chaiAsPromised = require('chai-as-promised');
-const config = require('./config.js');
+const config = require('../config.js');
 
 chai.use(chaiAsPromised);
 chai.should();
diff --git a/test/tunnel.js b/test/integration/tunnel.js
similarity index 100%
rename from test/tunnel.js
rename to test/integration/tunnel.js

From 27ebf9d71138733f8472c8f0bde171168aae538b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 13:58:52 +0100
Subject: [PATCH 135/197] Move visual tests to /test/gemini folder

---
 package.json                                  |  6 +++---
 .gemini.yml => test/gemini/.gemini.yml        | 20 +++++++++----------
 .../gemini/README.md                          |  3 ++-
 .../gemini/tests}/main/authenticated.js       |  0
 {gemini => test/gemini/tests}/main/basic.js   |  0
 {gemini => test/gemini/tests}/main/detail.js  |  0
 .../gemini/tests}/whitelabel/23vivi/23vivi.js |  0
 .../gemini/tests}/whitelabel/cyland/cyland.js |  0
 .../tests}/whitelabel/ikonotv/ikonotv.js      |  0
 .../tests}/whitelabel/lumenus/lumenus.js      |  0
 .../whitelabel/shared/whitelabel_basic.js     |  0
 11 files changed, 15 insertions(+), 14 deletions(-)
 rename .gemini.yml => test/gemini/.gemini.yml (89%)
 rename docs/visual-regression-testing.md => test/gemini/README.md (97%)
 rename {gemini => test/gemini/tests}/main/authenticated.js (100%)
 rename {gemini => test/gemini/tests}/main/basic.js (100%)
 rename {gemini => test/gemini/tests}/main/detail.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/23vivi/23vivi.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/cyland/cyland.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/ikonotv/ikonotv.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/lumenus/lumenus.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/shared/whitelabel_basic.js (100%)

diff --git a/package.json b/package.json
index 42c8bba9..5e72b863 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,10 @@
     "test": "npm run sauce-test",
     "sauce-test": "mocha ./test/integration/tests/",
     "tunnel": "node ./test/integration/tunnel.js",
-    "vi-clean": "rm -rf gemini-report",
+    "vi-clean": "rm -rf ./gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
-    "vi-update": "gemini update",
-    "vi-test": "npm run vi-clean && gemini test --reporter html --reporter vflat || true",
+    "vi-update": "gemini update -c ./test/gemini/.gemini.yml",
+    "vi-test": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat || true",
     "vi-test:all": "npm run vi-test",
     "vi-test:main": "npm run vi-test -- --browser MainDesktop --browser MainMobile",
     "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test",
diff --git a/.gemini.yml b/test/gemini/.gemini.yml
similarity index 89%
rename from .gemini.yml
rename to test/gemini/.gemini.yml
index a04903eb..f64d865f 100644
--- a/.gemini.yml
+++ b/test/gemini/.gemini.yml
@@ -89,45 +89,45 @@ browsers:
 sets:
     main:
         files:
-            - gemini/main
+            - tests/main
         browsers:
             - MainDesktop
             - MainMobile
     cc:
         files:
-            - gemini/whitelabel/shared
+            - tests/whitelabel/shared
         browsers:
             - CcDesktop
             - CcMobile
 
     cyland:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/cyland
+            - tests/whitelabel/shared
+            - tests/whitelabel/cyland
         browsers:
             - CylandDesktop
             - CylandMobile
 
     ikonotv:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/ikonotv
+            - tests/whitelabel/shared
+            - tests/whitelabel/ikonotv
         browsers:
             - IkonotvDesktop
             - IkonotvMobile
 
     lumenus:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/lumenus
+            - tests/whitelabel/shared
+            - tests/whitelabel/lumenus
         browsers:
             - LumenusDesktop
             - LumenusMobile
 
     23vivi:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/23vivi
+            - tests/whitelabel/shared
+            - tests/whitelabel/23vivi
         browsers:
             - 23viviDesktop
             - 23viviMobile
diff --git a/docs/visual-regression-testing.md b/test/gemini/README.md
similarity index 97%
rename from docs/visual-regression-testing.md
rename to test/gemini/README.md
index 35d328f0..da1712d9 100644
--- a/docs/visual-regression-testing.md
+++ b/test/gemini/README.md
@@ -24,6 +24,7 @@ Then, install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
 ```bash
 # Until phantomjs2 is updated for the new 2.1 version of PhantomJS, use the following (go to https://bitbucket.org/ariya/phantomjs/downloads to find a build for your OS)
 npm install -g phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
+npm install --save-dev phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
 
 # If using OSX, you may have to install upx and decompress the binary downloaded by npm manually:
 brew install upx
@@ -121,7 +122,7 @@ See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md
 actions](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md#available-actions) for what scripted actions
 are available.
 
-Our tests are located in `onion/gemini/`.
+Our tests are located in `onion/test/gemini/tests/`.
 
 **It would be nice if we kept the whitelabels up to date.**
 
diff --git a/gemini/main/authenticated.js b/test/gemini/tests/main/authenticated.js
similarity index 100%
rename from gemini/main/authenticated.js
rename to test/gemini/tests/main/authenticated.js
diff --git a/gemini/main/basic.js b/test/gemini/tests/main/basic.js
similarity index 100%
rename from gemini/main/basic.js
rename to test/gemini/tests/main/basic.js
diff --git a/gemini/main/detail.js b/test/gemini/tests/main/detail.js
similarity index 100%
rename from gemini/main/detail.js
rename to test/gemini/tests/main/detail.js
diff --git a/gemini/whitelabel/23vivi/23vivi.js b/test/gemini/tests/whitelabel/23vivi/23vivi.js
similarity index 100%
rename from gemini/whitelabel/23vivi/23vivi.js
rename to test/gemini/tests/whitelabel/23vivi/23vivi.js
diff --git a/gemini/whitelabel/cyland/cyland.js b/test/gemini/tests/whitelabel/cyland/cyland.js
similarity index 100%
rename from gemini/whitelabel/cyland/cyland.js
rename to test/gemini/tests/whitelabel/cyland/cyland.js
diff --git a/gemini/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
similarity index 100%
rename from gemini/whitelabel/ikonotv/ikonotv.js
rename to test/gemini/tests/whitelabel/ikonotv/ikonotv.js
diff --git a/gemini/whitelabel/lumenus/lumenus.js b/test/gemini/tests/whitelabel/lumenus/lumenus.js
similarity index 100%
rename from gemini/whitelabel/lumenus/lumenus.js
rename to test/gemini/tests/whitelabel/lumenus/lumenus.js
diff --git a/gemini/whitelabel/shared/whitelabel_basic.js b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
similarity index 100%
rename from gemini/whitelabel/shared/whitelabel_basic.js
rename to test/gemini/tests/whitelabel/shared/whitelabel_basic.js

From 29b1d8f7e5267cdb22a880a94f0f621e4eb1356e Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 13:58:57 +0100
Subject: [PATCH 136/197] Update README for updated paths to tests

---
 README.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1b918e5d..8dcf78ad 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,14 @@ Visual Regression Testing
 
 We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports both PhantomJS2 and SauceLabs.
 
-See the [helper docs](docs/visual-regression-testing.md) for information on installing Gemini, its dependencies, and running and writing tests.
+See the [helper docs](test/gemini/README.md) for information on installing Gemini, its dependencies, and running and writing tests.
+
+Integration Testing
+-------------------
+
+We're using [Sauce Labs](https://saucelabs.com/home) with [WD.js](https://github.com/admc/wd) for integration testing across browser grids with Selenium.
+
+See the [helper docs](test/integration/README.md) for information on each part of the test stack and how to run and write tests.
 
 
 Workflow

From 11f644dd117ec5ed550d7740daa5e8d7bae422b7 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 14:37:41 +0100
Subject: [PATCH 137/197] Fix shmui visual test

---
 test/gemini/tests/main/detail.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
index 39a02338..7adad5d4 100644
--- a/test/gemini/tests/main/detail.js
+++ b/test/gemini/tests/main/detail.js
@@ -29,12 +29,17 @@ gemini.suite('Work detail', (suite) => {
         basicPieceSuite
             .setUrl(pieceUrl)
             .capture('basic piece')
-            .capture('shmui', (actions, find) => {
-                actions.click(find('.ascribe-media-player'));
-                actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
-                // Wait for the transition to end
-                actions.wait(1000);
-            });
+
+        gemini.suite('Shmui', (shmuiSuite) => {
+            shmuiSuite.
+                setCaptureElements('.shmui-wrap')
+                .capture('shmui', (actions, find) => {
+                    actions.click(find('.ascribe-media-player'));
+                    actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
+                    // Wait for the transition to end
+                    actions.wait(1000);
+                });
+        });
     });
 
     gemini.suite('Basic edition', (basicEditionSuite) => {

From a785fbc22047ec1a81cae6228638791837df5fb1 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 14:37:55 +0100
Subject: [PATCH 138/197] Change screenshot folder for visual tests

---
 test/gemini/.gemini.yml | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/test/gemini/.gemini.yml b/test/gemini/.gemini.yml
index f64d865f..0c7b8b77 100644
--- a/test/gemini/.gemini.yml
+++ b/test/gemini/.gemini.yml
@@ -4,84 +4,84 @@ sessionsPerBrowser: 1
 browsers:
     MainDesktop:
         rootUrl: http://localhost.com:3000/
-        screenshotsDir: './gemini-screens/desktop'
+        screenshotsDir: './screenshots/main-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     MainMobile:
         rootUrl: http://localhost.com:3000/
-        screenshotsDir: './gemini-screens/mobile'
+        screenshotsDir: './screenshots/main-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     CcDesktop:
         rootUrl: http://cc.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cc-desktop'
+        screenshotsDir: './screenshots/cc-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     CcMobile:
         rootUrl: http://cc.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cc-mobile'
+        screenshotsDir: './screenshots/cc-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     CylandDesktop:
         rootUrl: http://cyland.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cyland-desktop'
+        screenshotsDir: './screenshots/cyland-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     CylandMobile:
         rootUrl: http://cyland.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cyland-mobile'
+        screenshotsDir: './screenshots/cyland-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     IkonotvDesktop:
         rootUrl: http://ikonotv.localhost.com:3000/
-        screenshotsDir: './gemini-screens/ikonotv-desktop'
+        screenshotsDir: './screenshots/ikonotv-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     IkonotvMobile:
         rootUrl: http://ikonotv.localhost.com:3000/
-        screenshotsDir: './gemini-screens/ikonotv-mobile'
+        screenshotsDir: './screenshots/ikonotv-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     LumenusDesktop:
         rootUrl: http://lumenus.localhost.com:3000/
-        screenshotsDir: './gemini-screens/lumenus-desktop'
+        screenshotsDir: './screenshots/lumenus-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     LumenusMobile:
         rootUrl: http://lumenus.localhost.com:3000/
-        screenshotsDir: './gemini-screens/lumenus-mobile'
+        screenshotsDir: './screenshots/lumenus-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     23viviDesktop:
         rootUrl: http://23vivi.localhost.com:3000/
-        screenshotsDir: './gemini-screens/23vivi-desktop'
+        screenshotsDir: './screenshots/23vivi-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     23viviMobile:
         rootUrl: http://23vivi.localhost.com:3000/
-        screenshotsDir: './gemini-screens/23vivi-mobile'
+        screenshotsDir: './screenshots/23vivi-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs

From e2a481a3f0a35c94e7f3e661e13e24e3bbde2909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Feb 2016 13:50:55 +0100
Subject: [PATCH 139/197] Fix redirection of wallet owners

This also fixes a problem where newly created
users would be redirected to a 404 page.
---
 js/components/piece_list.js                   | 20 ++++++++---
 .../components/prize_piece_list.js            |  9 +++--
 .../components/23vivi/23vivi_piece_list.js    |  2 +-
 .../components/cyland/cyland_piece_list.js    | 33 +++++++++++++++--
 .../components/ikonotv/ikonotv_piece_list.js  | 35 +++++++++++++++----
 .../components/market/market_piece_list.js    | 15 ++++++--
 .../market/market_register_piece.js           |  2 +-
 7 files changed, 95 insertions(+), 21 deletions(-)

diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 567a53e9..82fc2df3 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -36,7 +36,10 @@ let PieceList = React.createClass({
         accordionListItemType: React.PropTypes.func,
         bulkModalButtonListType: React.PropTypes.func,
         canLoadPieceList: React.PropTypes.bool,
-        redirectTo: React.PropTypes.string,
+        redirectTo: React.PropTypes.shape({
+            pathname: React.PropTypes.string,
+            query: React.PropTypes.object
+        }),
         shouldRedirect: React.PropTypes.func,
         customSubmitButton: React.PropTypes.element,
         customThumbnailPlaceholder: React.PropTypes.func,
@@ -62,7 +65,10 @@ let PieceList = React.createClass({
                 ]
             }],
             orderParams: ['artist_name', 'title'],
-            redirectTo: '/register_piece',
+            redirectTo: {
+                pathname: '/register_piece',
+                query: {}
+            },
             shouldRedirect: () => true
         };
     },
@@ -120,10 +126,16 @@ let PieceList = React.createClass({
         const { location: { query }, redirectTo, shouldRedirect } = this.props;
         const { unfilteredPieceListCount } = this.state;
 
-        if (redirectTo && unfilteredPieceListCount === 0 &&
+        if (redirectTo && redirectTo.pathname && unfilteredPieceListCount === 0 &&
             (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
+            window.setTimeout(() => this.history.push({
+                // Occasionally, the back end also sets query parameters for Onion.
+                // We need to consider this by merging all passed query parameters, as we'll
+                // otherwise end up in a 404 screen
+                query: Object.assign(query, redirectTo.query),
+                pathname: redirectTo.pathname
+            }), 0);
         }
     },
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index bd2b9f06..ec0def22 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -62,13 +62,15 @@ let PrizePieceList = React.createClass({
     },
 
     render() {
+        const { is_judge: isJudge, is_jury: isJury, is_admin: isAdmin } = this.state.currentUser;
+
         setDocumentTitle(getLangText('Collection'));
 
         let orderParams = ['artist_name', 'title'];
-        if (this.state.currentUser.is_jury) {
+        if (isJury) {
             orderParams = ['rating', 'title'];
         }
-        if (this.state.currentUser.is_judge) {
+        if (isJudge) {
             orderParams = ['rating', 'title', 'selected'];
         }
         return (
@@ -80,7 +82,8 @@ let PrizePieceList = React.createClass({
                     orderBy={this.state.currentUser.is_jury ? 'rating' : null}
                     filterParams={[]}
                     customSubmitButton={this.getButtonSubmit()}
-                    location={this.props.location}/>
+                    location={this.props.location}
+                    shouldRedirect={() => !(isJury || isJudge || isAdmin)} />
             </div>
         );
     }
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
index 0bfb8aa0..fa2bf5f0 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
index c40b455a..288b7eb8 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
@@ -6,11 +6,14 @@ import PieceList from '../../../../piece_list';
 import UserActions from '../../../../../actions/user_actions';
 import UserStore from '../../../../../stores/user_store';
 
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
 import CylandAccordionListItem from './cyland_accordion_list/cyland_accordion_list_item';
 
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
-
+import { mergeOptions } from '../../../../../utils/general_utils';
 
 let CylandPieceList = React.createClass({
     propTypes: {
@@ -18,15 +21,22 @@ let CylandPieceList = React.createClass({
     },
 
     getInitialState() {
-        return UserStore.getState();
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
     },
 
     componentDidMount() {
         UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
         UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
 
@@ -34,13 +44,30 @@ let CylandPieceList = React.createClass({
         this.setState(state);
     },
 
+    shouldRedirect(pieceCount) {
+        const {
+            currentUser: { email: userEmail },
+                whitelabel: {
+                    user: whitelabelAdminEmail
+            }
+         } = this.state;
+
+         return userEmail !== whitelabelAdminEmail && !pieceCount;
+    },
+
     render() {
         setDocumentTitle(getLangText('Collection'));
 
         return (
             <div>
                 <PieceList
-                    redirectTo="/register_piece?slide_num=0"
+                    redirectTo={{
+                        pathname: '/register_piece',
+                        query: {
+                            'slide_num': 0
+                        }
+                    }}
+                    shouldRedirect={this.shouldRedirect}
                     accordionListItemType={CylandAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
index 5b489d09..1189992b 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
@@ -6,8 +6,12 @@ import PieceList from '../../../../piece_list';
 
 import UserActions from '../../../../../actions/user_actions';
 import UserStore from '../../../../../stores/user_store';
+
 import NotificationStore from '../../../../../stores/notification_store';
 
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
 import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item';
 
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
@@ -23,31 +27,43 @@ let IkonotvPieceList = React.createClass({
     getInitialState() {
         return mergeOptions(
             NotificationStore.getState(),
-            UserStore.getState()
+            UserStore.getState(),
+            WhitelabelStore.getState()
         );
     },
 
     componentDidMount() {
         NotificationStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
         UserStore.listen(this.onChange);
 
+        WhitelabelActions.fetchWhitelabel();
         UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
         NotificationStore.unlisten(this.onChange);
+        WhitelabelStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
 
     onChange(state) {
         this.setState(state);
-
     },
 
-    redirectIfNoContractNotifications() {
-        const { contractAgreementListNotifications } = this.state;
+    shouldRedirect(pieceCount) {
+        const {
+            contractAgreementListNotifications,
+            currentUser: { email: userEmail },
+                whitelabel: {
+                    user: whitelabelAdminEmail
+            }
+         } = this.state;
 
-        return contractAgreementListNotifications && !contractAgreementListNotifications.length;
+        return contractAgreementListNotifications &&
+               !contractAgreementListNotifications.length &&
+               userEmail !== whitelabelAdminEmail &&
+               !pieceCount;
     },
 
     render() {
@@ -56,8 +72,13 @@ let IkonotvPieceList = React.createClass({
         return (
             <div>
                 <PieceList
-                    redirectTo="/register_piece?slide_num=0"
-                    shouldRedirect={this.redirectIfNoContractNotifications}
+                    redirectTo={{
+                        pathname: '/register_piece',
+                        query: {
+                            'slide_num': 0
+                        }
+                    }}
+                    shouldRedirect={this.shouldRedirect}
                     accordionListItemType={IkonotvAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
index 1c74e6de..ce8ca42b 100644
--- a/js/components/whitelabel/wallet/components/market/market_piece_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -49,6 +49,10 @@ let MarketPieceList = React.createClass({
         this.setState(state);
     },
 
+    shouldRedirect(isUserAdmin) {
+        return (pieceCount) => !isUserAdmin && !pieceCount;
+    },
+
     render() {
         const { customThumbnailPlaceholder, location } = this.props;
         const {
@@ -59,11 +63,12 @@ let MarketPieceList = React.createClass({
             } } = this.state;
 
         let filterParams = null;
+        let isUserAdmin = null;
         let canLoadPieceList = false;
 
         if (userEmail && whitelabelAdminEmail) {
             canLoadPieceList = true;
-            const isUserAdmin = userEmail === whitelabelAdminEmail;
+            isUserAdmin = userEmail === whitelabelAdminEmail;
 
             filterParams = [{
                 label: getLangText('Show works I can'),
@@ -78,7 +83,13 @@ let MarketPieceList = React.createClass({
         return (
             <PieceList
                 canLoadPieceList={canLoadPieceList}
-                redirectTo="/register_piece?slide_num=0"
+                redirectTo={{
+                    pathname: '/register_piece',
+                    query: {
+                        'slide_num': 0
+                    }
+                }}
+                shouldRedirect={this.shouldRedirect(isUserAdmin)}
                 bulkModalButtonListType={MarketAclButtonList}
                 customThumbnailPlaceholder={customThumbnailPlaceholder}
                 filterParams={filterParams}
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index 53c1a59d..c227722b 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -117,7 +117,7 @@ let MarketRegisterPiece = React.createClass({
             step,
             whitelabel: {
                 name: whitelabelName = 'Market'
-            } } = this.state;
+        } } = this.state;
 
         setDocumentTitle(getLangText('Register a new piece'));
 

From b405bc675bece3aa17b2547921830faca259c4a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Feb 2016 14:47:51 +0100
Subject: [PATCH 140/197] Fix PR feedback

---
 .../accordion_list_item_thumbnail_placeholder.js      |  2 +-
 js/components/piece_list.js                           |  8 ++++----
 .../sluice_selected_prize_action_button.js            |  2 +-
 ...3vivi_accordion_list_item_thumbnail_placeholder.js |  2 +-
 .../wallet/components/cyland/cyland_piece_list.js     |  6 ++----
 .../wallet/components/ikonotv/ikonotv_piece_list.js   |  8 +++-----
 .../wallet/components/market/market_piece_list.js     |  6 +-----
 .../wallet/components/market/market_register_piece.js | 11 +++++------
 js/utils/regex_utils.js                               |  2 +-
 js/utils/url_utils.js                                 |  2 +-
 10 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
index 37c98371..8000affd 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 82fc2df3..caf48aae 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -67,9 +67,9 @@ let PieceList = React.createClass({
             orderParams: ['artist_name', 'title'],
             redirectTo: {
                 pathname: '/register_piece',
-                query: {}
+                query: null
             },
-            shouldRedirect: () => true
+            shouldRedirect: (pieceCount) => !pieceCount
         };
     },
 
@@ -126,14 +126,14 @@ let PieceList = React.createClass({
         const { location: { query }, redirectTo, shouldRedirect } = this.props;
         const { unfilteredPieceListCount } = this.state;
 
-        if (redirectTo && redirectTo.pathname && unfilteredPieceListCount === 0 &&
+        if (redirectTo && redirectTo.pathname &&
             (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
             window.setTimeout(() => this.history.push({
                 // Occasionally, the back end also sets query parameters for Onion.
                 // We need to consider this by merging all passed query parameters, as we'll
                 // otherwise end up in a 404 screen
-                query: Object.assign(query, redirectTo.query),
+                query: Object.assign({}, query, redirectTo.query),
                 pathname: redirectTo.pathname
             }), 0);
         }
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
index 7778a8de..7d013d5d 100644
--- a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 import Moment from 'moment';
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
index f360c932..3a9b3943 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
index 288b7eb8..29c7d46f 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
@@ -45,12 +45,10 @@ let CylandPieceList = React.createClass({
     },
 
     shouldRedirect(pieceCount) {
-        const {
-            currentUser: { email: userEmail },
+        const { currentUser: { email: userEmail },
                 whitelabel: {
                     user: whitelabelAdminEmail
-            }
-         } = this.state;
+                } } = this.state;
 
          return userEmail !== whitelabelAdminEmail && !pieceCount;
     },
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
index 1189992b..eccfd89c 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
@@ -52,13 +52,11 @@ let IkonotvPieceList = React.createClass({
     },
 
     shouldRedirect(pieceCount) {
-        const {
-            contractAgreementListNotifications,
-            currentUser: { email: userEmail },
+        const { contractAgreementListNotifications,
+                currentUser: { email: userEmail },
                 whitelabel: {
                     user: whitelabelAdminEmail
-            }
-         } = this.state;
+                } } = this.state;
 
         return contractAgreementListNotifications &&
                !contractAgreementListNotifications.length &&
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
index ce8ca42b..ab9b31b2 100644
--- a/js/components/whitelabel/wallet/components/market/market_piece_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -49,10 +49,6 @@ let MarketPieceList = React.createClass({
         this.setState(state);
     },
 
-    shouldRedirect(isUserAdmin) {
-        return (pieceCount) => !isUserAdmin && !pieceCount;
-    },
-
     render() {
         const { customThumbnailPlaceholder, location } = this.props;
         const {
@@ -89,7 +85,7 @@ let MarketPieceList = React.createClass({
                         'slide_num': 0
                     }
                 }}
-                shouldRedirect={this.shouldRedirect(isUserAdmin)}
+                shouldRedirect={(pieceCount) => !isUserAdmin && !pieceCount}
                 bulkModalButtonListType={MarketAclButtonList}
                 customThumbnailPlaceholder={customThumbnailPlaceholder}
                 filterParams={filterParams}
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index c227722b..aa71c207 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -112,12 +112,11 @@ let MarketRegisterPiece = React.createClass({
 
     render() {
         const { location } = this.props;
-        const {
-            piece,
-            step,
-            whitelabel: {
-                name: whitelabelName = 'Market'
-        } } = this.state;
+        const { piece,
+                step,
+                whitelabel: {
+                    name: whitelabelName = 'Market'
+                } } = this.state;
 
         setDocumentTitle(getLangText('Register a new piece'));
 
diff --git a/js/utils/regex_utils.js b/js/utils/regex_utils.js
index 49412d07..13c14ecd 100644
--- a/js/utils/regex_utils.js
+++ b/js/utils/regex_utils.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 // TODO: Create Unittests that test all functions
 
diff --git a/js/utils/url_utils.js b/js/utils/url_utils.js
index 94584026..41306498 100644
--- a/js/utils/url_utils.js
+++ b/js/utils/url_utils.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import camelCase from 'camelcase';
 import decamelize from 'decamelize';

From f6a5734871a451b355bce3671a64c14bd1ed880d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 10:54:38 +0100
Subject: [PATCH 141/197] Add routes and styling for polline.ascribe.io

---
 README.md                                     |   1 +
 .../components/23vivi/23vivi_landing.js       |   4 +-
 .../components/lumenus/lumenus_landing.js     |   2 +-
 .../components/polline/polline_landing.js     |  78 ++++
 js/components/whitelabel/wallet/wallet_app.js |   2 +-
 .../whitelabel/wallet/wallet_routes.js        |  41 +-
 js/constants/application_constants.js         |   5 +
 .../wallet/23vivi/23vivi_custom_style.scss    |   4 +-
 sass/whitelabel/wallet/index.scss             |   1 +
 .../wallet/polline/polline_custom_style.scss  | 381 ++++++++++++++++++
 10 files changed, 512 insertions(+), 7 deletions(-)
 create mode 100644 js/components/whitelabel/wallet/components/polline/polline_landing.js
 create mode 100644 sass/whitelabel/wallet/polline/polline_custom_style.scss

diff --git a/README.md b/README.md
index 478562d3..af64cc3c 100644
--- a/README.md
+++ b/README.md
@@ -32,6 +32,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
 127.0.0.1   lumenus.localhost.com
 127.0.0.1   portfolioreview.localhost.com
 127.0.0.1   23vivi.localhost.com
+127.0.0.1   polline.localhost.com
 ```
 
 
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
index f6b2d50c..334fb336 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -8,10 +8,10 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 import WhitelabelActions from '../../../../../actions/whitelabel_actions';
 import WhitelabelStore from '../../../../../stores/whitelabel_store';
 
-import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
+
 let Vivi23Landing = React.createClass({
     getInitialState() {
         return WhitelabelStore.getState();
@@ -42,7 +42,7 @@ let Vivi23Landing = React.createClass({
                         <div className="row vivi23-landing--header">
                             <img className="vivi23-landing--header-logo" src={this.state.whitelabel.logo} />
                             <div>
-                                {getLangText('Artwork from the 23VIVI Marketplace is powered by') + ' '}
+                                {getLangText('23VIVI Marketplace is powered by') + ' '}
                                 <span className="icon-ascribe-logo" />
                             </div>
                         </div>
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
index 23289276..eb926f33 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
@@ -46,7 +46,7 @@ let LumenusLanding = React.createClass({
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
                             <img src={this.state.whitelabel.logo} width="150px"/>
                             <div style={{marginTop: '1em'}}>
-                                {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
+                                {getLangText('Lumenus Marketplace is powered by') + ' '}
                                 <span>
                                     <span className="icon-ascribe-logo"></span>
                                 </span>
diff --git a/js/components/whitelabel/wallet/components/polline/polline_landing.js b/js/components/whitelabel/wallet/components/polline/polline_landing.js
new file mode 100644
index 00000000..0601975d
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/polline/polline_landing.js
@@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+
+let PollineLanding = React.createClass({
+    getInitialState() {
+        return WhitelabelStore.getState();
+    },
+
+    componentWillMount() {
+        setDocumentTitle('Polline Marketplace');
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper polline-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row polline-landing--header">
+                            <img className="polline-landing--header-logo" src={this.state.whitelabel.logo} />
+                            <div>
+                                {getLangText('Polline Art Marketplace is powered by') + ' '}
+                                <span className="icon-ascribe-logo" />
+                            </div>
+                        </div>
+                        <div className="row polline-landing--content">
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default PollineLanding;
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index bce7106b..1740c999 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -32,7 +32,7 @@ let WalletApp = React.createClass({
 
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
-            && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
+            && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
             header = <Header routes={routes} />;
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index ba560608..7d906633 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -40,6 +40,8 @@ import LumenusLanding from './components/lumenus/lumenus_landing';
 import Vivi23Landing from './components/23vivi/23vivi_landing';
 import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
 
+import PollineLanding from './components/polline/polline_landing';
+
 import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler';
 
 import WalletApp from './wallet_app';
@@ -228,7 +230,44 @@ let ROUTES = {
                 aclName='acl_wallet_submit' />
             <Route
                 path='collection'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
+    ),
+    'polline': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PollineLanding)} />
+            <Route
+                path='login'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+            <Route
+                path='logout'
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+            <Route
+                path='signup'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+            <Route
+                path='contract_settings'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+            <Route
+                path='register_piece'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit' />
+            <Route
+                path='collection'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
                 headerTitle='COLLECTION'
                 disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 63aaf3e7..dd27484b 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -53,6 +53,11 @@ const constants = {
             'name': '23VIVI',
             'type': 'wallet'
         },
+        {
+            'subdomain': 'polline',
+            'name': 'Polline Art',
+            'type': 'wallet'
+        },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index 8bf729a8..303f457a 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -2,11 +2,11 @@
 $vivi23--fg-color: black;
 $vivi23--bg-color: white;
 $vivi23--nav-fg-prim-color: $vivi23--fg-color;
-$vivi23--nav-fg-sec-color: #3a3a3a;
+$vivi23--nav-fg-sec-color: #2882fa;
 $vivi23--nav-bg-color: $vivi23--bg-color;
 $vivi23--nav-highlight-color: #f8f8f8;
 $vivi23--button-default-color: $vivi23--fg-color;
-$vivi23--highlight-color: #de2600;
+$vivi23--highlight-color: #2882fa;
 
 
 .client--23vivi {
diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss
index 647bb16c..4e3d2a9a 100644
--- a/sass/whitelabel/wallet/index.scss
+++ b/sass/whitelabel/wallet/index.scss
@@ -2,6 +2,7 @@
 @import 'cyland/cyland_custom_style';
 @import 'ikonotv/ikonotv_custom_style';
 @import '23vivi/23vivi_custom_style';
+@import 'polline/polline_custom_style';
 
 .ascribe-wallet-app {
     border-radius: 0;
diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss
new file mode 100644
index 00000000..4e912cb8
--- /dev/null
+++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss
@@ -0,0 +1,381 @@
+/** Sass cannot use a number as the first character of a variable, so we'll have to settle with polline **/
+$polline--fg-color: black;
+$polline--bg-color: white;
+$polline--nav-fg-prim-color: $polline--fg-color;
+$polline--nav-fg-sec-color: #3a3a3a;
+$polline--nav-bg-color: $polline--bg-color;
+$polline--nav-highlight-color: #f8f8f8;
+$polline--button-default-color: $polline--fg-color;
+$polline--highlight-color: #2882fa;
+
+
+.client--polline {
+    /** Landing page **/
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .polline-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+
+        .polline-landing--header {
+            background-color: $polline--bg-color;
+            border: 1px solid darken($polline--bg-color, 20%);
+            color: $polline--fg-color;
+            padding: 2em;
+
+            .polline-landing--header-logo {
+                margin: 1em 0 2em 0;
+                height: 175px;
+            }
+        }
+
+        .polline-landing--content {
+            background-color: $polline--bg-color;
+            border: 1px solid darken($polline--bg-color, 20%);
+            border-top: none;
+            padding: 2em;
+        }
+    }
+
+    /** Navbar **/
+    .navbar-default {
+        background-color: $polline--bg-color;
+    
+        .navbar-brand .img-brand {
+            height: 115%;
+        }
+
+        .navbar-brand .icon-ascribe-logo {
+            color: $polline--nav-fg-prim-color;
+            &:hover {
+                color: darken($polline--nav-fg-prim-color, 20%);
+            }
+        }
+
+    }
+
+    .navbar-nav > li > a,
+    .navbar-nav > li > a:focus,
+    .navbar-nav > li > .active a,
+    .navbar-nav > li > .active a:focus {
+        color: $polline--nav-fg-prim-color;
+    }
+
+    .navbar-nav > li > a:hover {
+        color: darken($polline--nav-fg-prim-color, 20%);
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        background-color: $polline--nav-bg-color;
+        border-bottom-color: $polline--nav-fg-prim-color;
+        color: $polline--nav-fg-prim-color;
+    }
+
+    .navbar-nav > .open > a,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > li > a {
+        color: $polline--nav-fg-prim-color;
+        background-color: $polline--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus,
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($polline--nav-fg-prim-color, 20%);
+        background-color: $polline--nav-highlight-color;
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.collapse.in {
+        background-color: $polline--nav-bg-color;
+
+        .navbar-nav > .open > a,
+        .navbar-nav > .active > a {
+            background-color: $polline--nav-highlight-color;
+        }
+    }
+
+    .navbar-collapse.collapsing li a,
+    .navbar-collapse.collapse.in li a {
+        color: $polline--nav-fg-prim-color;
+    }
+    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
+        color: lighten($polline--nav-fg-prim-color, 20%);
+        background-color: $polline--nav-highlight-color;
+    }
+
+    .navbar-toggle {
+        border-color: $polline--highlight-color;
+
+        .icon-bar {
+            background-color: $polline--highlight-color;
+        }
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        border-color: lighten($polline--highlight-color, 10%);
+        background-color: $polline--nav-fg-prim-color;
+
+        .icon-bar {
+            background-color: lighten($polline--highlight-color, 10%);
+        }
+    }
+
+    .notification-menu {
+        .dropdown-menu {
+            background-color: $polline--nav-bg-color;
+        }
+
+        .notification-header {
+            background-color: $polline--nav-fg-sec-color;
+            border-top-width: 0;
+            color: $polline--nav-bg-color;
+        }
+
+        .notification-action {
+            color: $polline--highlight-color;
+        }
+    }
+
+    /** Buttons **/
+    // reset disabled button styling for btn-default
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: lighten($polline--highlight-color, 30%);
+        border-color: lighten($polline--highlight-color, 30%);
+    }
+
+    .btn-default {
+        background-color: $polline--highlight-color;
+        border-color: $polline--highlight-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($polline--highlight-color, 30%);
+            border-color: lighten($polline--highlight-color, 30%);
+        }
+    }
+
+    // disabled buttons
+    .btn-secondary.disabled,
+    .btn-secondary.disabled:hover,
+    .btn-secondary.disabled:focus,
+    .btn-secondary.disabled.focus,
+    .btn-secondary.disabled:active,
+    .btn-secondary.disabled.active,
+    .btn-secondary[disabled],
+    .btn-secondary[disabled]:hover,
+    .btn-secondary[disabled]:focus,
+    .btn-secondary[disabled].focus,
+    .btn-secondary[disabled]:active,
+    .btn-secondary[disabled].active,
+    fieldset[disabled] .btn-secondary,
+    fieldset[disabled] .btn-secondary:hover,
+    fieldset[disabled] .btn-secondary:focus,
+    fieldset[disabled] .btn-secondary.focus,
+    fieldset[disabled] .btn-secondary:active,
+    fieldset[disabled] .btn-secondary.active {
+        background-color: darken($polline--bg-color, 20%);
+        border-color: $polline--button-default-color;
+    }
+
+    .btn-secondary {
+        border-color: $polline--button-default-color;
+        color: $polline--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $polline--button-default-color;
+            border-color: $polline--button-default-color;
+            color: $polline--bg-color;
+        }
+    }
+
+    .btn-tertiary {
+        &:hover,
+        &:active,
+        &ctive:hover,
+        &.active:hover{
+            background-color: $polline--highlight-color;
+            border-color: $polline--highlight-color;
+            color: $polline--bg-color;
+        }
+    }
+
+    /** Other components **/
+    .ascribe-piece-list-toolbar .btn-ascribe-add {
+        display: none;
+    }
+
+    .ascribe-footer {
+        display: none;
+    }
+
+    .ascribe-accordion-list-table-toggle:hover {
+        color: $polline--fg-color;
+    }
+
+    .request-action-badge {
+        color: $polline--fg-color;
+    }
+
+    .acl-information-dropdown-list .title {
+        color: $polline--fg-color;
+    }
+
+    // filter widget
+    .ascribe-piece-list-toolbar-filter-widget button {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: $polline--button-default-color !important;
+
+        &:hover,
+        &:active {
+            background-color: $polline--button-default-color !important;
+            border-color: $polline--button-default-color !important;
+            color: $polline--bg-color !important;
+        }
+    }
+
+    .icon-ascribe-search {
+        color: $polline--fg-color;
+    }
+
+    // forms
+    .ascribe-property-wrapper:hover {
+        border-left-color: rgba($polline--fg-color, 0.5);
+    }
+
+    .ascribe-property textarea,
+    .ascribe-property input,
+    .search-bar > .form-group > .input-group input {
+        &::-webkit-input-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+        &::-moz-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+        &:-ms-input-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+        &:-moz-placeholder {
+            color: rgba($polline--fg-color, 0.5);
+        }
+    }
+
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > p,
+        > p > span,
+        > textarea {
+            color: $polline--fg-color;
+        }
+    }
+
+    // global notification
+    .ascribe-global-notification-success {
+        background-color: lighten($polline--fg-color, 20%);
+    }
+
+    // uploader progress
+    .ascribe-progress-bar > .progress-bar {
+        background-color: lighten($polline--fg-color, 20%);
+    }
+
+    .ascribe-progress-bar span {
+        text-shadow: -1px 0 lighten($polline--fg-color, 20%),
+                     0 1px lighten($polline--fg-color, 20%),
+                     1px 0 lighten($polline--fg-color, 20%),
+                     0 -1px lighten($polline--fg-color, 20%);
+    }
+
+    .action-file.icon-ascribe-ok,
+    .action-file.icon-ascribe-ok:hover {
+        color: lighten($polline--fg-color, 20%);
+    }
+
+    // spinner
+    .spinner-circle {
+        border-color: $polline--fg-color;
+    }
+    .spinner-inner {
+        display: none;
+    }
+    .btn-secondary .spinner-circle {
+        border-color: $polline--bg-color;
+    }
+
+    // video player
+    .ascribe-media-player .vjs-default-skin {
+        .vjs-play-progress,
+        .vjs-volume-level {
+            background-color: $polline--highlight-color;
+        }
+    }
+
+    // pager
+    .pager li > a,
+    .pager li > span {
+        background-color: $polline--fg-color;
+        border-color: $polline--fg-color;
+    }
+    .pager .disabled > a,
+    .pager .disabled > span {
+        background-color: $polline--fg-color !important;
+        border-color: $polline--fg-color;
+    }
+
+    // intercom
+    #intercom-container .intercom-launcher-button {
+        background-color: $polline--button-default-color !important;
+        border-color: $polline--button-default-color !important;
+    }
+}

From f5a341b37e054de3b4ab3096c8a7630d4ba9ccad Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 17:12:49 +0100
Subject: [PATCH 142/197] Add environment config file for visual regression
 tests

Wayyyyy better than hard coding diminator everywhere.
---
 phantomjs/launch_app_and_login.js             | 62 ----------------
 test/gemini/README.md                         |  9 ++-
 test/gemini/tests/environment.js              | 22 ++++++
 test/gemini/tests/main/authenticated.js       |  5 +-
 test/gemini/tests/main/basic.js               | 13 ++--
 test/gemini/tests/main/detail.js              |  9 +--
 .../tests/whitelabel/ikonotv/ikonotv.js       | 11 +--
 .../whitelabel/shared/whitelabel_basic.js     | 13 ++--
 test/phantomjs/launch_app_and_login.js        | 71 +++++++++++++++++++
 9 files changed, 127 insertions(+), 88 deletions(-)
 delete mode 100644 phantomjs/launch_app_and_login.js
 create mode 100644 test/gemini/tests/environment.js
 create mode 100644 test/phantomjs/launch_app_and_login.js

diff --git a/phantomjs/launch_app_and_login.js b/phantomjs/launch_app_and_login.js
deleted file mode 100644
index e5418519..00000000
--- a/phantomjs/launch_app_and_login.js
+++ /dev/null
@@ -1,62 +0,0 @@
-'use strict';
-
-var liveEnv = 'https://www.ascribe.io/app/login';
-// Note that if you are trying to access staging, you will need to use
-// the --ignore-ssl-errors=true flag on phantomjs
-var stagingEnv = 'https://www.ascribe.ninja/app/login';
-var localEnv = 'http://localhost.com:3000/login';
-
-var page = require('webpage').create();
-page.open(localEnv, function(status) {
-    var attemptedToLogIn;
-    var loginCheckInterval;
-
-    console.log('Status: ' + status);
-
-    if (status === 'success') {
-        console.log('Attempting to log in...');
-
-        attemptedToLogIn = page.evaluate(function () {
-            try {
-                var inputForm = document.querySelector('.ascribe-login-wrapper');
-                var email = inputForm.querySelector('input[type=email]');
-                var password = inputForm.querySelector('input[type=password]');
-                var submitBtn = inputForm.querySelector('button[type=submit]');
-
-                email.value = 'dimi@mailinator.com';
-                password.value = '0000000000';
-                submitBtn.click();
-
-                return true;
-            } catch (ex) {
-                console.log('Error while trying to find login elements, not logging in.');
-                return false;
-            }
-        });
-
-        if (attemptedToLogIn) {
-            loginCheckInterval = setInterval(function () {
-                var loggedIn = page.evaluate(function () {
-                    // When they log in, they are taken to the collections page.
-                    // When the piece list is loaded, the accordion list is either available or
-                    // shows a placeholder, so let's check for these elements to determine
-                    // when login is finished
-                    return !!(document.querySelector('.ascribe-accordion-list:not(.ascribe-loading-position)') ||
-                              document.querySelector('.ascribe-accordion-list-placeholder'));
-                });
-
-                if (loggedIn) {
-                    clearInterval(loginCheckInterval);
-                    console.log('Successfully logged in.');
-                }
-            }, 1000);
-        } else {
-            console.log('Something happened while trying to log in, aborting...');
-            phantom.exit();
-        }
-
-    } else {
-        console.log('Failed to load page, exiing...');
-        phantom.exit();
-    }
-});
diff --git a/test/gemini/README.md b/test/gemini/README.md
index da1712d9..bc029041 100644
--- a/test/gemini/README.md
+++ b/test/gemini/README.md
@@ -122,9 +122,12 @@ See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md
 actions](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md#available-actions) for what scripted actions
 are available.
 
-Our tests are located in `onion/test/gemini/tests/`.
+Our tests are located in `onion/test/gemini/tests/`. For now, the tests use the environment defined in
+`onion/test/gemini/tests/environment.js` for which user, piece, and edition to run tests against. In the future, it'd be
+nice if we had some db scripts that we could use to populate a test db for these regression tests.
 
-**It would be nice if we kept the whitelabels up to date.**
+**It would also be nice if we kept the whitelabels up to date, so if you add one, please also test (at least) its landing
+page.**
 
 Some useful tips:
   * The `find()` method in the callbacks is equivalent to `document.querySelector`; it will only return the first
@@ -193,7 +196,7 @@ change the environment to run against.
 
 ```bash
 # In root /onion folder
-phantomjs phantomjs/launch_app_and_login.js
+phantomjs test/phantomjs/launch_app_and_login.js
 ```
 
 
diff --git a/test/gemini/tests/environment.js b/test/gemini/tests/environment.js
new file mode 100644
index 00000000..4cb1dacf
--- /dev/null
+++ b/test/gemini/tests/environment.js
@@ -0,0 +1,22 @@
+'use strict';
+
+const mainUser = {
+    email: 'dimi@mailinator.com',
+    password: '0000000000'
+};
+const mainPieceId = '12374';
+const mainEditionId = '14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+
+console.log('==================  Test environment  ==================\n');
+console.log('Main user:');
+console.log(`    Email: ${mainUser.email}`);
+console.log(`    Password: ${mainUser.password}\n`);
+console.log(`Main piece: ${mainPieceId}`);
+console.log(`Main edition: ${mainEditionId}\n`);
+console.log('========================================================\n');
+
+module.exports = {
+    mainUser,
+    mainPieceId,
+    mainEditionId
+};
diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
index bf579bff..52730d4c 100644
--- a/test/gemini/tests/main/authenticated.js
+++ b/test/gemini/tests/main/authenticated.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../environment');
 
 /**
  * Suite of tests against routes that require the user to be authenticated.
@@ -25,8 +26,8 @@ gemini.suite('Authenticated', (suite) => {
             .capture('logged in', (actions, find) => {
                 actions.waitForElementToShow('.ascribe-form', 5000);
 
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), 'dimi@mailinator.com');
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), '0000000000');
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), environment.mainUser.password);
                 actions.click(find('.ascribe-login-wrapper button[type=submit]'));
 
                 actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
diff --git a/test/gemini/tests/main/basic.js b/test/gemini/tests/main/basic.js
index 317c5d84..2e3dcb3a 100644
--- a/test/gemini/tests/main/basic.js
+++ b/test/gemini/tests/main/basic.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../environment');
 
 /**
  * Basic suite of tests against routes that do not require the user to be authenticated.
@@ -84,8 +85,8 @@ gemini.suite('Basic', (suite) => {
                 // Remove hover from sign up link
                 actions.click(emailInput);
 
-                actions.sendKeys(emailInput, 'dimi@mailinator.com');
-                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                actions.sendKeys(emailInput, environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
             })
             .capture('login form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
@@ -99,9 +100,9 @@ gemini.suite('Basic', (suite) => {
                 actions.waitForElementToShow('.ascribe-form', 5000);
             })
             .capture('sign up form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
-                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
-                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+                actions.sendKeys(find('.ascribe-form input[name=email]'), environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), environment.mainUser.password);
             })
             .capture('sign up form filled with check', (actions, find) => {
                 actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
@@ -115,7 +116,7 @@ gemini.suite('Basic', (suite) => {
                 actions.waitForElementToShow('.ascribe-form', 5000);
             })
             .capture('password reset form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name="email"]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), environment.mainUser.email);
             })
             .capture('password reset form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
index 7adad5d4..fd07af6a 100644
--- a/test/gemini/tests/main/detail.js
+++ b/test/gemini/tests/main/detail.js
@@ -1,8 +1,9 @@
 'use strict';
 
 const gemini = require('gemini');
-const pieceUrl = '/pieces/12374';
-const editionUrl = '/editions/14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+const environment = require('../environment');
+const pieceUrl = `/pieces/${environment.mainPieceId}`;
+const editionUrl = `/editions/${environment.mainEditionId}`;
 
 /**
  * Suite of tests against the piece and edition routes.
@@ -57,8 +58,8 @@ gemini.suite('Work detail', (suite) => {
                 actions.waitForElementToShow('.ascribe-default-app', 5000);
             })
             .capture('logged in', (actions, find) => {
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), 'dimi@mailinator.com');
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), '0000000000');
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), environment.mainUser.password);
                 actions.click(find('.ascribe-login-wrapper button[type=submit]'));
 
                 actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
diff --git a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
index 1741aaa0..05c36405 100644
--- a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
+++ b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../environment');
 
 /**
  * Suite of tests against Cyland specific routes
@@ -68,8 +69,8 @@ gemini.suite('Ikonotv', (suite) => {
                     // Remove hover from sign up link
                     actions.click(emailInput);
 
-                    actions.sendKeys(emailInput, 'dimi@mailinator.com');
-                    actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                    actions.sendKeys(emailInput, environment.mainUser.email);
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
                 })
                 .capture('login form filled', (actions, find) => {
                     actions.click(find('.ascribe-form-header'));
@@ -81,9 +82,9 @@ gemini.suite('Ikonotv', (suite) => {
                 .setUrl('/signup')
                 .capture('sign up')
                 .capture('sign up form filled with focus', (actions, find) => {
-                    actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
-                    actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
-                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+                    actions.sendKeys(find('.ascribe-form input[name=email]'), environment.mainUser.email);
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
+                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), environment.mainUser.password);
                 })
                 .capture('sign up form filled with check', (actions, find) => {
                     actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
diff --git a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
index 7fe5c256..24aa432b 100644
--- a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
+++ b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../environment');
 
 /**
  * Basic suite of tests against whitelabel routes that do not require authentication.
@@ -43,8 +44,8 @@ gemini.suite('Whitelabel basic', (suite) => {
                 // Remove hover from sign up link
                 actions.click(emailInput);
 
-                actions.sendKeys(emailInput, 'dimi@mailinator.com');
-                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                actions.sendKeys(emailInput, environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
             })
             .capture('login form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
@@ -62,9 +63,9 @@ gemini.suite('Whitelabel basic', (suite) => {
                 actions.wait(500);
             })
             .capture('sign up form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
-                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
-                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+                actions.sendKeys(find('.ascribe-form input[name=email]'), environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), environment.mainUser.password);
             })
             .capture('sign up form filled with check', (actions, find) => {
                 actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
@@ -80,7 +81,7 @@ gemini.suite('Whitelabel basic', (suite) => {
                 actions.wait(500);
             })
             .capture('password reset form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name="email"]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), environment.mainUser.email);
             })
             .capture('password reset form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
diff --git a/test/phantomjs/launch_app_and_login.js b/test/phantomjs/launch_app_and_login.js
new file mode 100644
index 00000000..afc76f9e
--- /dev/null
+++ b/test/phantomjs/launch_app_and_login.js
@@ -0,0 +1,71 @@
+'use strict';
+
+var liveEnv = 'https://www.ascribe.io/app/login';
+// Note that if you are trying to access staging, you will need to use
+// the --ignore-ssl-errors=true flag on phantomjs
+var stagingEnv = 'https://www.ascribe.ninja/app/login';
+var localEnv = 'http://localhost.com:3000/login';
+
+function launchAppAndLogin(env) {
+    console.log('Running test to launch ' + env + ' and log into the app');
+
+    var page = require('webpage').create();
+    page.open(localEnv, function(status) {
+        var attemptedToLogIn;
+        var loginCheckInterval;
+
+        console.log('Load ' + env + ': ' + status);
+
+        if (status === 'success') {
+            console.log('Attempting to log in...');
+
+            attemptedToLogIn = page.evaluate(function () {
+                try {
+                    var inputForm = document.querySelector('.ascribe-login-wrapper');
+                    var email = inputForm.querySelector('input[name=email]');
+                    var password = inputForm.querySelector('input[name=password]');
+                    var submitBtn = inputForm.querySelector('button[type=submit]');
+
+                    email.value = 'dimi@mailinator.com';
+                    password.value = '0000000000';
+                    submitBtn.click();
+
+                    return true;
+                } catch (ex) {
+                    console.log('Error while trying to find login elements, not logging in.');
+                    return false;
+                }
+            });
+
+            if (attemptedToLogIn) {
+                loginCheckInterval = setInterval(function () {
+                    var loggedIn = page.evaluate(function () {
+                        // When they log in, they are taken to the collections page.
+                        // When the piece list is loaded, the accordion list is either available or
+                        // shows a placeholder, so let's check for these elements to determine
+                        // when login is finished
+                        return !!(document.querySelector('.ascribe-accordion-list:not(.ascribe-loading-position)') ||
+                                  document.querySelector('.ascribe-accordion-list-placeholder'));
+                    });
+
+                    if (loggedIn) {
+                        clearInterval(loginCheckInterval);
+                        console.log('Successfully logged in.');
+                        console.log('Edit the onion/test/phantomjs/launch_app_and_login.js file to do further actions after logging in.');
+                        console.log('Stopping phantomJS...');
+                        phantom.exit();
+                    }
+                }, 1000);
+            } else {
+                console.log('Something happened while trying to log in, aborting...');
+                phantom.exit();
+            }
+
+        } else {
+            console.log('Failed to load page, exiing...');
+            phantom.exit();
+        }
+    });
+}
+
+launchAppAndLogin(localEnv);

From 8ef19a1ed0f7a0a9248d35e339b2985effab73fe Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 17:24:19 +0100
Subject: [PATCH 143/197] Fix prize instances of the verify route to be
 coa_verify

---
 js/components/whitelabel/prize/prize_routes.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index 5f80b30c..668bb1d5 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -57,7 +57,7 @@ const ROUTES = {
                 headerTitle='COLLECTION'/>
             <Route path='pieces/:pieceId' component={SluicePieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -97,7 +97,7 @@ const ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
             <Route path='pieces/:pieceId' component={SPPieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     )

From afc7bc7735093a6d3f7a59b09932e9801e0aa1d4 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 17:48:49 +0100
Subject: [PATCH 144/197] Fix npm scripts for domain specific visual regression
 tests

---
 package.json | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5e72b863..2048656c 100644
--- a/package.json
+++ b/package.json
@@ -18,15 +18,16 @@
     "vi-clean": "rm -rf ./gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update -c ./test/gemini/.gemini.yml",
-    "vi-test": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat || true",
+    "vi-test": "npm run vi-test:base || true",
+    "vi-test:base": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat",
     "vi-test:all": "npm run vi-test",
-    "vi-test:main": "npm run vi-test -- --browser MainDesktop --browser MainMobile",
-    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test",
-    "vi-test:cc": "npm run vi-test -- --browser CcDesktop --browser CcMobile",
-    "vi-test:cyland": "npm run vi-test -- --browser CylandDesktop --browser CylandMobile",
-    "vi-test:ikonotv": "npm run vi-test -- --browser IkonotvDesktop --browser IkonotvMobile",
-    "vi-test:lumenus": "npm run vi-test -- --browser LumenusDesktop --browser LumenusMobile",
-    "vi-test:23vivi": "npm run vi-test -- --browser 23viviDesktop --browser 23viviMobile"
+    "vi-test:main": "npm run vi-test:base -- --browser MainDesktop --browser MainMobile || true",
+    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test:base || true",
+    "vi-test:cc": "npm run vi-test:base -- --browser CcDesktop --browser CcMobile",
+    "vi-test:cyland": "npm run vi-test:base -- --browser CylandDesktop --browser CylandMobile || true",
+    "vi-test:ikonotv": "npm run vi-test:base -- --browser IkonotvDesktop --browser IkonotvMobile || true",
+    "vi-test:lumenus": "npm run vi-test:base -- --browser LumenusDesktop --browser LumenusMobile || true",
+    "vi-test:23vivi": "npm run vi-test:base -- --browser 23viviDesktop --browser 23viviMobile || true"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"

From fd6371e2f1216746c099d660a4fafc6e09405eb1 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 18:03:20 +0100
Subject: [PATCH 145/197] Small fixes for visual regression tests

---
 test/gemini/tests/main/authenticated.js                 | 3 ++-
 test/gemini/tests/whitelabel/ikonotv/ikonotv.js         | 2 +-
 test/gemini/tests/whitelabel/shared/whitelabel_basic.js | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
index 52730d4c..5dc93562 100644
--- a/test/gemini/tests/main/authenticated.js
+++ b/test/gemini/tests/main/authenticated.js
@@ -101,7 +101,7 @@ gemini.suite('Authenticated', (suite) => {
             .capture('expanded edition in collection', (actions, find) => {
                 actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
                 // Wait for editions to load
-                actions.waitForElementToShow('.ascribe-accordion-list-item-table', 5000);
+                actions.waitForElementToShow('.ascribe-accordion-list-item-table', 10000);
             })
 
         gemini.suite('Collection placeholder', (collectionPlaceholderSuite) => {
@@ -133,6 +133,7 @@ gemini.suite('Authenticated', (suite) => {
             .capture('piece list toolbar')
             .capture('piece list toolbar search filled', (actions, find) => {
                 actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
+                actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search', 5000);
             })
 
         gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
diff --git a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
index 05c36405..5bf019d8 100644
--- a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
+++ b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const gemini = require('gemini');
-const environment = require('../environment');
+const environment = require('../../environment');
 
 /**
  * Suite of tests against Cyland specific routes
diff --git a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
index 24aa432b..25713994 100644
--- a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
+++ b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const gemini = require('gemini');
-const environment = require('../environment');
+const environment = require('../../environment');
 
 /**
  * Basic suite of tests against whitelabel routes that do not require authentication.

From 7dfe6a51a47c086a81674684e4cd0ea0a1f553a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 11:51:54 +0100
Subject: [PATCH 146/197] For 23vivi, switch back to appropriate piece list

---
 js/components/whitelabel/wallet/wallet_routes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index 7d906633..963107bd 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -230,7 +230,7 @@ let ROUTES = {
                 aclName='acl_wallet_submit' />
             <Route
                 path='collection'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
                 headerTitle='COLLECTION'
                 disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />

From f09201d8c35a2346effa938427a8b31cecf7e7f5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 11:59:25 +0100
Subject: [PATCH 147/197] Use environment to configure timeouts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apparently node doesn’t accept destructuring yet…
---
 test/gemini/tests/environment.js              | 33 +++++++++++-----
 test/gemini/tests/main/authenticated.js       | 38 ++++++++++---------
 test/gemini/tests/main/basic.js               | 30 ++++++++-------
 test/gemini/tests/main/detail.js              | 29 +++++++-------
 test/gemini/tests/whitelabel/23vivi/23vivi.js |  6 ++-
 test/gemini/tests/whitelabel/cyland/cyland.js |  6 ++-
 .../tests/whitelabel/ikonotv/ikonotv.js       | 22 ++++++-----
 .../tests/whitelabel/lumenus/lumenus.js       |  6 ++-
 .../whitelabel/shared/whitelabel_basic.js     | 26 +++++++------
 9 files changed, 113 insertions(+), 83 deletions(-)

diff --git a/test/gemini/tests/environment.js b/test/gemini/tests/environment.js
index 4cb1dacf..32f1c8ee 100644
--- a/test/gemini/tests/environment.js
+++ b/test/gemini/tests/environment.js
@@ -1,22 +1,35 @@
 'use strict';
 
-const mainUser = {
+const MAIN_USER = {
     email: 'dimi@mailinator.com',
     password: '0000000000'
 };
-const mainPieceId = '12374';
-const mainEditionId = '14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+const MAIN_PIECE_ID = '12374';
+const MAIN_EDITION_ID = '14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+
+const TIMEOUTS = {
+    SHORT: 3000,
+    NORMAL: 5000,
+    LONG: 10000,
+    SUPER_DUPER_EXTRA_LONG: 30000
+};
 
 console.log('==================  Test environment  ==================\n');
 console.log('Main user:');
-console.log(`    Email: ${mainUser.email}`);
-console.log(`    Password: ${mainUser.password}\n`);
-console.log(`Main piece: ${mainPieceId}`);
-console.log(`Main edition: ${mainEditionId}\n`);
+console.log(`    Email: ${MAIN_USER.email}`);
+console.log(`    Password: ${MAIN_USER.password}\n`);
+console.log(`Main piece: ${MAIN_PIECE_ID}`);
+console.log(`Main edition: ${MAIN_EDITION_ID}\n`);
+console.log('Timeouts:');
+console.log(`    Short: ${TIMEOUTS.SHORT}`);
+console.log(`    Normal: ${TIMEOUTS.NORMAL}\n`);
+console.log(`    Long: ${TIMEOUTS.LONG}\n`);
+console.log(`    Super super extra long: ${TIMEOUTS.SUPER_DUPER_EXTRA_LONG}\n`);
 console.log('========================================================\n');
 
 module.exports = {
-    mainUser,
-    mainPieceId,
-    mainEditionId
+    MAIN_USER,
+    MAIN_PIECE_ID,
+    MAIN_EDITION_ID,
+    TIMEOUTS
 };
diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
index 5dc93562..7adfe16d 100644
--- a/test/gemini/tests/main/authenticated.js
+++ b/test/gemini/tests/main/authenticated.js
@@ -2,6 +2,8 @@
 
 const gemini = require('gemini');
 const environment = require('../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Suite of tests against routes that require the user to be authenticated.
@@ -15,7 +17,7 @@ gemini.suite('Authenticated', (suite) => {
             // also defines a `.before()`
             // FIXME: use a more generic class for this, like just '.app',
             // when we can use this file with the whitelabels
-            actions.waitForElementToShow('.ascribe-default-app', 5000);
+            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
         });
 
     // Suite just to log us in before any other suites run
@@ -24,13 +26,13 @@ gemini.suite('Authenticated', (suite) => {
             .setUrl('/login')
             .ignoreElements('.ascribe-body')
             .capture('logged in', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
 
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), environment.mainUser.email);
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), environment.mainUser.password);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
                 actions.click(find('.ascribe-login-wrapper button[type=submit]'));
 
-                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
             });
     });
 
@@ -41,7 +43,7 @@ gemini.suite('Authenticated', (suite) => {
             .ignoreElements('.client--cyland img.img-brand')
             .skip(/Mobile/)
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
             })
             .capture('desktop header');
 
@@ -70,7 +72,7 @@ gemini.suite('Authenticated', (suite) => {
             .ignoreElements('.client--cyland img.img-brand')
             .skip(/Desktop/)
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
             })
             .capture('mobile header')
             .capture('expanded mobile header', (actions, find) => {
@@ -90,18 +92,18 @@ gemini.suite('Authenticated', (suite) => {
         collectionSuite
             .setCaptureElements('.ascribe-accordion-list')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
                 // Wait for the images to load
                 // FIXME: unfortuntately gemini doesn't support ignoring multiple elements from a single selector
                 // so we're forced to wait and hope that the images will all finish loading after 5s.
                 // We could also change the thumbnails with JS, but setting up a test user is probably easier.
-                actions.wait(5000);
+                actions.wait(TIMEOUTS.NORMAL);
             })
             .capture('collection')
             .capture('expanded edition in collection', (actions, find) => {
                 actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
                 // Wait for editions to load
-                actions.waitForElementToShow('.ascribe-accordion-list-item-table', 10000);
+                actions.waitForElementToShow('.ascribe-accordion-list-item-table', TIMEOUTS.LONG);
             })
 
         gemini.suite('Collection placeholder', (collectionPlaceholderSuite) => {
@@ -109,7 +111,7 @@ gemini.suite('Authenticated', (suite) => {
                 .setCaptureElements('.ascribe-accordion-list-placeholder')
                 .capture('collection empty search', (actions, find) => {
                     actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result');
-                    actions.waitForElementToShow('.ascribe-accordion-list-placeholder', 5000);
+                    actions.waitForElementToShow('.ascribe-accordion-list-placeholder', TIMEOUTS.NORMAL);
                 });
         });
 
@@ -119,7 +121,7 @@ gemini.suite('Authenticated', (suite) => {
                 .capture('items selected', (actions, find) => {
                     actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
                     // Wait for editions to load
-                    actions.waitForElementToShow('.ascribe-accordion-list-item-table', 5000);
+                    actions.waitForElementToShow('.ascribe-accordion-list-item-table', TIMEOUTS.NORMAL);
 
                     actions.click('.ascribe-table thead tr input[type="checkbox"]');
                     actions.waitForElementToShow('.piece-list-bulk-modal');
@@ -133,7 +135,7 @@ gemini.suite('Authenticated', (suite) => {
             .capture('piece list toolbar')
             .capture('piece list toolbar search filled', (actions, find) => {
                 actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
-                actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search', 5000);
+                actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search', TIMEOUTS.NORMAL);
             })
 
         gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
@@ -144,7 +146,7 @@ gemini.suite('Authenticated', (suite) => {
                     actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));
 
                     // Wait as the dropdown screenshot still includes the collection in the background
-                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
                 });
         });
 
@@ -156,7 +158,7 @@ gemini.suite('Authenticated', (suite) => {
                     actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));
 
                     // Wait as the dropdown screenshot still includes the collection in the background
-                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
                 });
         });
     });
@@ -167,7 +169,7 @@ gemini.suite('Authenticated', (suite) => {
             .capture('register work', (actions, find) => {
                 // The uploader options are only rendered after the user is fetched, so
                 // we have to wait for it here
-                actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', 5000);
+                actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', TIMEOUTS.NORMAL);
             })
             .capture('register work filled', (actions, find) => {
                 actions.sendKeys(find('.ascribe-form input[name="artist_name"]'), 'artist name');
@@ -199,7 +201,7 @@ gemini.suite('Authenticated', (suite) => {
             .before((actions, find) => {
                 // This will be called before every nested suite begins unless that suite
                 // also defines a `.before()`
-                actions.waitForElementToShow('.settings-container', 5000);
+                actions.waitForElementToShow('.settings-container', TIMEOUTS.NORMAL);
             })
             .capture('user settings');
     });
@@ -210,7 +212,7 @@ gemini.suite('Authenticated', (suite) => {
             .setUrl('/logout')
             .ignoreElements('.ascribe-body')
             .capture('logout', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-login-wrapper', 10000);
+                actions.waitForElementToShow('.ascribe-login-wrapper', TIMEOUTS.LONG);
             });
     });
 });
diff --git a/test/gemini/tests/main/basic.js b/test/gemini/tests/main/basic.js
index 2e3dcb3a..5657f77f 100644
--- a/test/gemini/tests/main/basic.js
+++ b/test/gemini/tests/main/basic.js
@@ -2,6 +2,8 @@
 
 const gemini = require('gemini');
 const environment = require('../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Basic suite of tests against routes that do not require the user to be authenticated.
@@ -14,7 +16,7 @@ gemini.suite('Basic', (suite) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
             // FIXME: use a more generic class for this, like just '.ascribe-app'
-            actions.waitForElementToShow('.ascribe-default-app', 5000);
+            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Header-desktop', (headerSuite) => {
@@ -22,7 +24,7 @@ gemini.suite('Basic', (suite) => {
             .setCaptureElements('nav.navbar .container')
             .skip(/Mobile/)
             .capture('desktop header', (actions, find) => {
-                actions.waitForElementToShow('nav.navbar .container', 5000);
+                actions.waitForElementToShow('nav.navbar .container', TIMEOUTS.NORMAL);
             })
             .capture('hover on active item', (actions, find) => {
                 const activeItem = find('nav.navbar li.active');
@@ -40,7 +42,7 @@ gemini.suite('Basic', (suite) => {
             .setCaptureElements('nav.navbar .container')
             .skip(/Desktop/)
             .capture('mobile header', (actions, find) => {
-                actions.waitForElementToShow('nav.navbar .container', 5000);
+                actions.waitForElementToShow('nav.navbar .container', TIMEOUTS.NORMAL);
             })
             .capture('expanded mobile header', (actions, find) => {
                 actions.click(find('nav.navbar .navbar-toggle'));
@@ -56,7 +58,7 @@ gemini.suite('Basic', (suite) => {
         footerSuite
             .setCaptureElements('.ascribe-footer')
             .capture('footer', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-footer', 5000);
+                actions.waitForElementToShow('.ascribe-footer', TIMEOUTS.NORMAL);
             })
             .capture('hover on footer item', (actions, find) => {
                 const footerItem = find('.ascribe-footer a:not(.social)');
@@ -71,7 +73,7 @@ gemini.suite('Basic', (suite) => {
     gemini.suite('Login', (loginSuite) => {
         loginSuite
             .capture('login', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
             })
             .capture('hover on login submit', (actions, find) => {
                 actions.mouseMove(find('.ascribe-form button[type=submit]'));
@@ -85,8 +87,8 @@ gemini.suite('Basic', (suite) => {
                 // Remove hover from sign up link
                 actions.click(emailInput);
 
-                actions.sendKeys(emailInput, environment.mainUser.email);
-                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
+                actions.sendKeys(emailInput, MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
             })
             .capture('login form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
@@ -97,12 +99,12 @@ gemini.suite('Basic', (suite) => {
         signUpSuite
             .setUrl('/signup')
             .capture('sign up', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
             })
             .capture('sign up form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name=email]'), environment.mainUser.email);
-                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
-                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), environment.mainUser.password);
+                actions.sendKeys(find('.ascribe-form input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), MAIN_USER.password);
             })
             .capture('sign up form filled with check', (actions, find) => {
                 actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
@@ -113,10 +115,10 @@ gemini.suite('Basic', (suite) => {
         passwordResetSuite
             .setUrl('/password_reset')
             .capture('password reset', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
             })
             .capture('password reset form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name="email"]'), environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), MAIN_USER.email);
             })
             .capture('password reset form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
@@ -127,7 +129,7 @@ gemini.suite('Basic', (suite) => {
         coaVerifySuite
             .setUrl('/coa_verify')
             .capture('coa verify', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
             })
             .capture('coa verify form filled with focus', (actions, find) => {
                 actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
index fd07af6a..39e83d70 100644
--- a/test/gemini/tests/main/detail.js
+++ b/test/gemini/tests/main/detail.js
@@ -2,8 +2,11 @@
 
 const gemini = require('gemini');
 const environment = require('../environment');
-const pieceUrl = `/pieces/${environment.mainPieceId}`;
-const editionUrl = `/editions/${environment.mainEditionId}`;
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
+
+const pieceUrl = `/pieces/${environment.MAIN_PIECE_ID}`;
+const editionUrl = `/editions/${environment.MAIN_EDITION_ID}`;
 
 /**
  * Suite of tests against the piece and edition routes.
@@ -18,12 +21,12 @@ gemini.suite('Work detail', (suite) => {
             // also defines a `.before()`
             // FIXME: use a more generic class for this, like just '.app',
             // when we can use this file with the whitelabels
-            actions.waitForElementToShow('.ascribe-default-app', 5000);
+            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
 
             // Wait for the social media buttons to appear
-            actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', 20000);
-            actions.waitForElementToShow('.ascribe-social-button-list .twitter-share-button', 20000);
-            actions.waitForElementToShow('.ascribe-media-player', 10000);
+            actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
+            actions.waitForElementToShow('.ascribe-social-button-list .twitter-share-button', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
+            actions.waitForElementToShow('.ascribe-media-player', TIMEOUTS.LONG);
         });
 
     gemini.suite('Basic piece', (basicPieceSuite) => {
@@ -36,7 +39,7 @@ gemini.suite('Work detail', (suite) => {
                 setCaptureElements('.shmui-wrap')
                 .capture('shmui', (actions, find) => {
                     actions.click(find('.ascribe-media-player'));
-                    actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
+                    actions.waitForElementToShow('.shmui-wrap:not(.loading)', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
                     // Wait for the transition to end
                     actions.wait(1000);
                 });
@@ -55,14 +58,14 @@ gemini.suite('Work detail', (suite) => {
             .setUrl('/login')
             .ignoreElements('.ascribe-body')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-default-app', 5000);
+                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
             })
             .capture('logged in', (actions, find) => {
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), environment.mainUser.email);
-                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), environment.mainUser.password);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
                 actions.click(find('.ascribe-login-wrapper button[type=submit]'));
 
-                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
             });
     });
 
@@ -122,10 +125,10 @@ gemini.suite('Work detail', (suite) => {
             .setUrl('/logout')
             .ignoreElements('.ascribe-body')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-default-app', 5000);
+                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
             })
             .capture('logout', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-login-wrapper', 10000);
+                actions.waitForElementToShow('.ascribe-login-wrapper', TIMEOUTS.LONG);
             });
     });
 });
diff --git a/test/gemini/tests/whitelabel/23vivi/23vivi.js b/test/gemini/tests/whitelabel/23vivi/23vivi.js
index cafdfc6d..99efb310 100644
--- a/test/gemini/tests/whitelabel/23vivi/23vivi.js
+++ b/test/gemini/tests/whitelabel/23vivi/23vivi.js
@@ -1,6 +1,8 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../../environment');
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Suite of tests against 23vivi specific routes
@@ -11,7 +13,7 @@ gemini.suite('23vivi', (suite) => {
         .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
@@ -19,7 +21,7 @@ gemini.suite('23vivi', (suite) => {
             .setUrl('/')
             .capture('landing', (actions, find) => {
                 // Wait for the logo to appear
-                actions.waitForElementToShow('.vivi23-landing--header-logo', 10000);
+                actions.waitForElementToShow('.vivi23-landing--header-logo', TIMEOUTS.LONG);
             });
     });
 
diff --git a/test/gemini/tests/whitelabel/cyland/cyland.js b/test/gemini/tests/whitelabel/cyland/cyland.js
index 06709f39..8159f53e 100644
--- a/test/gemini/tests/whitelabel/cyland/cyland.js
+++ b/test/gemini/tests/whitelabel/cyland/cyland.js
@@ -1,6 +1,8 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../../environment');
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Suite of tests against Cyland specific routes
@@ -11,7 +13,7 @@ gemini.suite('Cyland', (suite) => {
         .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
@@ -20,7 +22,7 @@ gemini.suite('Cyland', (suite) => {
             // Ignore Cyland's logo as it's a gif
             .ignoreElements('.cyland-landing img')
             .capture('landing', (actions, find) => {
-                actions.waitForElementToShow('.cyland-landing img', 10000);
+                actions.waitForElementToShow('.cyland-landing img', TIMEOUTS.LONG);
             });
     });
 
diff --git a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
index 5bf019d8..84d743c0 100644
--- a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
+++ b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
@@ -2,6 +2,8 @@
 
 const gemini = require('gemini');
 const environment = require('../../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Suite of tests against Cyland specific routes
@@ -12,7 +14,7 @@ gemini.suite('Ikonotv', (suite) => {
         .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
@@ -30,7 +32,7 @@ gemini.suite('Ikonotv', (suite) => {
                 });
 
                 // Wait for logo to appear
-                actions.waitForElementToShow('.ikonotv-landing header img', 10000);
+                actions.waitForElementToShow('.ikonotv-landing header img', TIMEOUTS.LONG);
             });
     });
 
@@ -44,13 +46,13 @@ gemini.suite('Ikonotv', (suite) => {
                 // also defines a `.before()`
                 // FIXME: use a more generic class for this, like just '.app',
                 // when we can use this file with the whitelabels
-                actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+                actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
 
                 // Wait for the forms to appear
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
 
                 // Just use a dumb wait because the logo is set as a background image
-                actions.wait(3000);
+                actions.wait(TIMEOUTS.SHORT);
             });
 
         gemini.suite('Login', (loginSuite) => {
@@ -69,8 +71,8 @@ gemini.suite('Ikonotv', (suite) => {
                     // Remove hover from sign up link
                     actions.click(emailInput);
 
-                    actions.sendKeys(emailInput, environment.mainUser.email);
-                    actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
+                    actions.sendKeys(emailInput, MAIN_USER.email);
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
                 })
                 .capture('login form filled', (actions, find) => {
                     actions.click(find('.ascribe-form-header'));
@@ -82,9 +84,9 @@ gemini.suite('Ikonotv', (suite) => {
                 .setUrl('/signup')
                 .capture('sign up')
                 .capture('sign up form filled with focus', (actions, find) => {
-                    actions.sendKeys(find('.ascribe-form input[name=email]'), environment.mainUser.email);
-                    actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
-                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), environment.mainUser.password);
+                    actions.sendKeys(find('.ascribe-form input[name=email]'), MAIN_USER.email);
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), MAIN_USER.password);
                 })
                 .capture('sign up form filled with check', (actions, find) => {
                     actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
diff --git a/test/gemini/tests/whitelabel/lumenus/lumenus.js b/test/gemini/tests/whitelabel/lumenus/lumenus.js
index a9ff53cd..8e8f568d 100644
--- a/test/gemini/tests/whitelabel/lumenus/lumenus.js
+++ b/test/gemini/tests/whitelabel/lumenus/lumenus.js
@@ -1,6 +1,8 @@
 'use strict';
 
 const gemini = require('gemini');
+const environment = require('../../environment');
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Suite of tests against lumenus specific routes
@@ -11,7 +13,7 @@ gemini.suite('Lumenus', (suite) => {
         .setCaptureElements('.ascribe-wallet-app')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
@@ -19,7 +21,7 @@ gemini.suite('Lumenus', (suite) => {
             .setUrl('/')
             .capture('landing', (actions, find) => {
                 // Wait for the logo to appear
-                actions.waitForElementToShow('.wp-landing-wrapper img', 10000);
+                actions.waitForElementToShow('.wp-landing-wrapper img', TIMEOUTS.LONG);
             });
     });
 
diff --git a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
index 25713994..0d5ac26b 100644
--- a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
+++ b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
@@ -2,6 +2,8 @@
 
 const gemini = require('gemini');
 const environment = require('../../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
 
 /**
  * Basic suite of tests against whitelabel routes that do not require authentication.
@@ -13,7 +15,7 @@ gemini.suite('Whitelabel basic', (suite) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
             // FIXME: use a more generic class for this, like just '.ascribe-app'
-            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
 
             // Use a dumb wait in case we're still waiting for other assets, like fonts, to load
             actions.wait(1000);
@@ -25,12 +27,12 @@ gemini.suite('Whitelabel basic', (suite) => {
             // See Ikono
             .skip(/Ikono/)
             .capture('login', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
                 // For some reason, the screenshots seem to keep catching the whitelabel login form
                 // on a refresh and without fonts loaded (maybe because they're the first tests run
                 // and the cache isn't hot yet?).
                 // Let's wait a bit and hope they load.
-                actions.wait(3000);
+                actions.wait(TIMEOUTS.SHORT);
             })
             .capture('hover on login submit', (actions, find) => {
                 actions.mouseMove(find('.ascribe-form button[type=submit]'));
@@ -44,8 +46,8 @@ gemini.suite('Whitelabel basic', (suite) => {
                 // Remove hover from sign up link
                 actions.click(emailInput);
 
-                actions.sendKeys(emailInput, environment.mainUser.email);
-                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
+                actions.sendKeys(emailInput, MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
             })
             .capture('login form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
@@ -58,14 +60,14 @@ gemini.suite('Whitelabel basic', (suite) => {
             // See Ikono
             .skip(/Ikono/)
             .capture('sign up', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
                 // Wait in case the form reloads due to other assets loading
                 actions.wait(500);
             })
             .capture('sign up form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name=email]'), environment.mainUser.email);
-                actions.sendKeys(find('.ascribe-form input[name=password]'), environment.mainUser.password);
-                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), environment.mainUser.password);
+                actions.sendKeys(find('.ascribe-form input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), MAIN_USER.password);
             })
             .capture('sign up form filled with check', (actions, find) => {
                 actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
@@ -76,12 +78,12 @@ gemini.suite('Whitelabel basic', (suite) => {
         passwordResetSuite
             .setUrl('/password_reset')
             .capture('password reset', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
                 // Wait in case the form reloads due to other assets loading
                 actions.wait(500);
             })
             .capture('password reset form filled with focus', (actions, find) => {
-                actions.sendKeys(find('.ascribe-form input[name="email"]'), environment.mainUser.email);
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), MAIN_USER.email);
             })
             .capture('password reset form filled', (actions, find) => {
                 actions.click(find('.ascribe-form-header'));
@@ -92,7 +94,7 @@ gemini.suite('Whitelabel basic', (suite) => {
         coaVerifySuite
             .setUrl('/coa_verify')
             .capture('coa verify', (actions, find) => {
-                actions.waitForElementToShow('.ascribe-form', 5000);
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
                 // Wait in case the form reloads due to other assets loading
                 actions.wait(500);
             })

From 02c25c323d74a0711fbe73a26cc929ed0ae0574d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 12:00:05 +0100
Subject: [PATCH 148/197] Ignore locally generated screenshots

Too many minor differences with PhantomJS between OSX/Linux
---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 0b4d85c7..e497465f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ build/*
 
 gemini-coverage/*
 gemini-report/*
+test/gemini/screenshots/*
 
 node_modules/*
 

From 6362a3651f0288f912e0a22d6ea5859626357d62 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 12:02:12 +0100
Subject: [PATCH 149/197] Remove phantomJS test file

---
 test/gemini/README.md                  |  6 +--
 test/phantomjs/launch_app_and_login.js | 71 --------------------------
 2 files changed, 3 insertions(+), 74 deletions(-)
 delete mode 100644 test/phantomjs/launch_app_and_login.js

diff --git a/test/gemini/README.md b/test/gemini/README.md
index bc029041..3521056e 100644
--- a/test/gemini/README.md
+++ b/test/gemini/README.md
@@ -190,9 +190,9 @@ current execution state of that breakpoint on the page you're on.
 
 ---
 
-To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run
-with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to
-change the environment to run against.
+To simplify triaging simple issues and test if everything is working, The repo had a short test script that can be run
+with PhantomJS to check if it can access the web app and log in. Find `onion/test/phantomjs/launch_app_and_login.js` in
+the repo's history, restore it, and then run:
 
 ```bash
 # In root /onion folder
diff --git a/test/phantomjs/launch_app_and_login.js b/test/phantomjs/launch_app_and_login.js
deleted file mode 100644
index afc76f9e..00000000
--- a/test/phantomjs/launch_app_and_login.js
+++ /dev/null
@@ -1,71 +0,0 @@
-'use strict';
-
-var liveEnv = 'https://www.ascribe.io/app/login';
-// Note that if you are trying to access staging, you will need to use
-// the --ignore-ssl-errors=true flag on phantomjs
-var stagingEnv = 'https://www.ascribe.ninja/app/login';
-var localEnv = 'http://localhost.com:3000/login';
-
-function launchAppAndLogin(env) {
-    console.log('Running test to launch ' + env + ' and log into the app');
-
-    var page = require('webpage').create();
-    page.open(localEnv, function(status) {
-        var attemptedToLogIn;
-        var loginCheckInterval;
-
-        console.log('Load ' + env + ': ' + status);
-
-        if (status === 'success') {
-            console.log('Attempting to log in...');
-
-            attemptedToLogIn = page.evaluate(function () {
-                try {
-                    var inputForm = document.querySelector('.ascribe-login-wrapper');
-                    var email = inputForm.querySelector('input[name=email]');
-                    var password = inputForm.querySelector('input[name=password]');
-                    var submitBtn = inputForm.querySelector('button[type=submit]');
-
-                    email.value = 'dimi@mailinator.com';
-                    password.value = '0000000000';
-                    submitBtn.click();
-
-                    return true;
-                } catch (ex) {
-                    console.log('Error while trying to find login elements, not logging in.');
-                    return false;
-                }
-            });
-
-            if (attemptedToLogIn) {
-                loginCheckInterval = setInterval(function () {
-                    var loggedIn = page.evaluate(function () {
-                        // When they log in, they are taken to the collections page.
-                        // When the piece list is loaded, the accordion list is either available or
-                        // shows a placeholder, so let's check for these elements to determine
-                        // when login is finished
-                        return !!(document.querySelector('.ascribe-accordion-list:not(.ascribe-loading-position)') ||
-                                  document.querySelector('.ascribe-accordion-list-placeholder'));
-                    });
-
-                    if (loggedIn) {
-                        clearInterval(loginCheckInterval);
-                        console.log('Successfully logged in.');
-                        console.log('Edit the onion/test/phantomjs/launch_app_and_login.js file to do further actions after logging in.');
-                        console.log('Stopping phantomJS...');
-                        phantom.exit();
-                    }
-                }, 1000);
-            } else {
-                console.log('Something happened while trying to log in, aborting...');
-                phantom.exit();
-            }
-
-        } else {
-            console.log('Failed to load page, exiing...');
-            phantom.exit();
-        }
-    });
-}
-
-launchAppAndLogin(localEnv);

From 95bbe410dea171071fc3fcf87bccb5eba775b267 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:28:49 +0100
Subject: [PATCH 150/197] Rebase remerge

---
 README.md | 69 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 478562d3..508e84d5 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,19 @@
 Introduction
 ============
 
-Onion is the web client for Ascribe. The idea is to have a well documented,
-easy to test, easy to hack, JavaScript application.
+Onion is the web client for Ascribe. The idea is to have a well documented, modern, easy to test, easy to hack, JavaScript application.
 
-The code is JavaScript ECMA 6.
+The code is JavaScript 2015 / ECMAScript 6.
 
 
 Getting started
 ===============
+
 Install some nice extension for Chrom(e|ium):
 
 - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
-  
+- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
+
 ```bash
 git clone git@github.com:ascribe/onion.git
 cd onion
@@ -37,17 +38,34 @@ Additionally, to work on the white labeling functionality, you need to edit your
 
 JavaScript Code Conventions
 ===========================
+
 For this project, we're using:
 
 * 4 Spaces
-* We use ES6
+* ES6
 * We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
 * We don't use camel case for file naming but in everything Javascript related
-* We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
-* We don't use Javascript's `Date` object, as its interface introduced bugs previously and we're including `momentjs` for other dependencies anyways
+* We use `momentjs` instead of Javascript's `Date` object, as the native `Date` interface previously introduced bugs and we're including `momentjs` for other dependencies anyway
+
+Make sure to check out the [style guide](https://github.com/ascribe/javascript).
+
+Linting
+-------
+
+We use [ESLint](https://github.com/eslint/eslint) with our own [custom ruleset](.eslintrc).
+
+
+SCSS Code Conventions
+=====================
+
+Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
+
+Some interesting links:
+* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
+
 
 Branch names
-=====================
+============
 
 To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches:
 
@@ -61,22 +79,21 @@ AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
 
 where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title.
 
+
 Example
--------------
+-------
+
 **JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
 
 **Github branch name:** `AD-1242-caching-solution-for-stores`
 
-SCSS Code Conventions
-=====================
-Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
-
-Some interesting links:
-* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
-
 
 Testing
-===============
+=======
+
+Unit Testing
+------------
+
 We're using Facebook's jest to do testing as it integrates nicely with react.js as well.
 
 Tests are always created per directory by creating a `__tests__` folder. To test a specific file, a `<file_name>_tests.js` file needs to be created.
@@ -86,7 +103,15 @@ This is due to the fact that jest's function mocking and ES6 module syntax are [
 
 Therefore, to require a module in your test file, you need to use CommonJS's `require` syntax. Except for this, all tests can be written in ES6 syntax.
 
-## Workflow
+Visual Regression Testing
+-------------------------
+
+We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports PhantomJS and SauceLabs.
+
+
+Workflow
+========
+
 Generally, when you're runing `gulp serve`, all tests are being run.
 If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run `gulp jest:watch`.
 
@@ -137,9 +162,16 @@ A: Easily by starting the your gulp process with the following command:
 ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
 ```
 
+Or, by adding these two your environment variables:
+```
+ONION_BASE_URL='/'
+ONION_SERVER_URL='http://localhost.com:8000/'
+```
+
 Q: I want to know all dependencies that get bundled into the live build.
 A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
 
+
 Reading list
 ============
 
@@ -152,7 +184,6 @@ Start here
 - [alt.js](http://alt.js.org/)
 - [alt.js readme](https://github.com/goatslacker/alt)
 
-
 Moar stuff
 ----------
 

From bd53151964897268c17736920f6090fe0c45f054 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 20 Jan 2016 21:18:24 +0100
Subject: [PATCH 151/197] Add Gemini configuration for desktop and mobile on
 phantoms

---
 .gemini.yml | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 .gemini.yml

diff --git a/.gemini.yml b/.gemini.yml
new file mode 100644
index 00000000..5af1ef27
--- /dev/null
+++ b/.gemini.yml
@@ -0,0 +1,14 @@
+rootUrl: https://www.ascribe.ninja/app
+
+browsers:
+    PhantomJSDesktop:
+        screenshotsDir: './gemini/screens/desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    PhantomJSMobile:
+        screenshotsDir: './gemini/screens/mobile'
+        windowSize: 767x1364
+        desiredCapabilities:
+            browserName: phantomjs

From 3594229a6eb62518691088132db25171d4c5d1b9 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:29:33 +0100
Subject: [PATCH 152/197] Rebase remerge

---
 .gitignore                        |   9 ++-
 README.md                         |   4 +-
 docs/visual-regression-testing.md | 126 ++++++++++++++++++++++++++++++
 package.json                      |   2 +
 phantomjs/launch_app_and_login.js |  62 +++++++++++++++
 5 files changed, 199 insertions(+), 4 deletions(-)
 create mode 100644 docs/visual-regression-testing.md
 create mode 100644 phantomjs/launch_app_and_login.js

diff --git a/.gitignore b/.gitignore
index f5bf11e8..0b4d85c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,10 +16,13 @@ webapp-dependencies.txt
 pids
 logs
 results
- 
-node_modules/*
 
-build
+build/*
+
+gemini-coverage/*
+gemini-report/*
+
+node_modules/*
 
 .DS_Store
 .env
diff --git a/README.md b/README.md
index 508e84d5..1b918e5d 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,9 @@ Therefore, to require a module in your test file, you need to use CommonJS's `re
 Visual Regression Testing
 -------------------------
 
-We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports PhantomJS and SauceLabs.
+We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports both PhantomJS2 and SauceLabs.
+
+See the [helper docs](docs/visual-regression-testing.md) for information on installing Gemini, its dependencies, and running and writing tests.
 
 
 Workflow
diff --git a/docs/visual-regression-testing.md b/docs/visual-regression-testing.md
new file mode 100644
index 00000000..30a711ff
--- /dev/null
+++ b/docs/visual-regression-testing.md
@@ -0,0 +1,126 @@
+Introduction
+============
+
+When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
+
+Contents
+========
+
+  1. [Installation](#installation)
+  1. [Running Tests](#running-tests)
+  1. [Gemini Usage](#gemini-usage)
+  1. [PhantomJS](#phantomjs)
+
+
+Installation
+============
+
+First install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
+
+```bash
+npm install -g phantomjs2
+
+# If using OSX, install upx and decompress the binary downloaded by npm manually:
+brew install upx
+# Navigate to the binary, ie. /Users/Brett/.nvm/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin
+upx -d phantomjs
+
+```
+
+Then [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
+
+
+Running Tests
+=============
+
+Run PhantomJS:
+
+```bash
+phantomjs --webdriver=4444
+```
+
+And then run Gemini tests:
+
+```bash
+# In root onion/
+gemini test gemini/* --report html
+```
+
+If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are no regressions first!), use
+
+```bash
+# In root onion/
+gemini update gemini/*
+```
+
+
+Gemini Usage
+============
+
+While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page app like ours (where much of it is behind an authentication barrier as well).
+
+Authentication
+--------------
+
+Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put waits for the log in to succeed, before testing parts of the app that require the authentication.
+
+Browser Session States
+----------------------
+
+Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when Gemini's launched (ie. `gemini update`, `gemini test`, etc).
+
+Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
+
+**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of tests by logging out.
+
+(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as the cookies are cleared each time, this seems unlikely)
+
+Test Reporting
+--------------
+
+Using the `--report html` flag with Gemini will produce a webpage with the test's results in /gemini-report that will show the old, new, and diff images. Using this is highly recommended (and fun!).
+
+
+PhantomJS
+=========
+
+[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without needing a browser.
+
+Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS 1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
+
+While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful things to know about.
+
+Useful features
+---------------
+
+You can find the full list of CLI commands in the [documentation](http://phantomjs.org/api/command-line.html).
+
+Flags that are of particular interest to us:
+ * `--webdriver=4444`: sets the webdriver port to be 4444, the default webdriver port that Gemini expects.
+ * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to staging, as the certificate we use is self-signed.
+ * `--ssl-protocol=any`: allows any ssl protocol to be used. May be useful when `--ignore-ssl-errors=true` doesn't work.
+ * '--remote-debugger-port`: allows for remote debugging the running PhantomJS instance. More on this later.
+
+Troubleshooting and Debugging
+-----------------------------
+
+Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting docs](http://phantomjs.org/troubleshooting.html).
+
+To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified after `--remote-debugger-port` on localhost:
+
+```bash
+phantomjs --remote-debugger-port=9000 debug.js
+```
+
+PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1 and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()` in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
+
+At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the current execution state of that breakpoint on the page you're on.
+
+---
+
+To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to change the environment to run against.
+
+```bash
+# In root /onion folder
+phantomjs phantomjs/launch_app_and_login.js
+```
diff --git a/package.json b/package.json
index 091203b5..d8e76da5 100644
--- a/package.json
+++ b/package.json
@@ -42,8 +42,10 @@
     "chai-as-promised": "^5.1.0",
     "colors": "^1.1.2",
     "dotenv": "^1.2.0",
+    "gemini": "^2.0.3",
     "jest-cli": "^0.4.0",
     "mocha": "^2.3.4",
+    "phantomjs2": "^2.0.2",
     "sauce-connect-launcher": "^0.13.0",
     "wd": "^0.4.0"
   },
diff --git a/phantomjs/launch_app_and_login.js b/phantomjs/launch_app_and_login.js
new file mode 100644
index 00000000..e5418519
--- /dev/null
+++ b/phantomjs/launch_app_and_login.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var liveEnv = 'https://www.ascribe.io/app/login';
+// Note that if you are trying to access staging, you will need to use
+// the --ignore-ssl-errors=true flag on phantomjs
+var stagingEnv = 'https://www.ascribe.ninja/app/login';
+var localEnv = 'http://localhost.com:3000/login';
+
+var page = require('webpage').create();
+page.open(localEnv, function(status) {
+    var attemptedToLogIn;
+    var loginCheckInterval;
+
+    console.log('Status: ' + status);
+
+    if (status === 'success') {
+        console.log('Attempting to log in...');
+
+        attemptedToLogIn = page.evaluate(function () {
+            try {
+                var inputForm = document.querySelector('.ascribe-login-wrapper');
+                var email = inputForm.querySelector('input[type=email]');
+                var password = inputForm.querySelector('input[type=password]');
+                var submitBtn = inputForm.querySelector('button[type=submit]');
+
+                email.value = 'dimi@mailinator.com';
+                password.value = '0000000000';
+                submitBtn.click();
+
+                return true;
+            } catch (ex) {
+                console.log('Error while trying to find login elements, not logging in.');
+                return false;
+            }
+        });
+
+        if (attemptedToLogIn) {
+            loginCheckInterval = setInterval(function () {
+                var loggedIn = page.evaluate(function () {
+                    // When they log in, they are taken to the collections page.
+                    // When the piece list is loaded, the accordion list is either available or
+                    // shows a placeholder, so let's check for these elements to determine
+                    // when login is finished
+                    return !!(document.querySelector('.ascribe-accordion-list:not(.ascribe-loading-position)') ||
+                              document.querySelector('.ascribe-accordion-list-placeholder'));
+                });
+
+                if (loggedIn) {
+                    clearInterval(loginCheckInterval);
+                    console.log('Successfully logged in.');
+                }
+            }, 1000);
+        } else {
+            console.log('Something happened while trying to log in, aborting...');
+            phantom.exit();
+        }
+
+    } else {
+        console.log('Failed to load page, exiing...');
+        phantom.exit();
+    }
+});

From cb59d042b5c898490117d547a499d3af65784ee3 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:17:30 +0100
Subject: [PATCH 153/197] Update docs for PhantomJS 2.1, whitespace, and more
 tips

---
 docs/visual-regression-testing.md | 107 +++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 25 deletions(-)

diff --git a/docs/visual-regression-testing.md b/docs/visual-regression-testing.md
index 30a711ff..d544b1fa 100644
--- a/docs/visual-regression-testing.md
+++ b/docs/visual-regression-testing.md
@@ -1,33 +1,39 @@
 Introduction
 ============
 
-When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
+When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their
+docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
 
 Contents
 ========
 
   1. [Installation](#installation)
   1. [Running Tests](#running-tests)
-  1. [Gemini Usage](#gemini-usage)
+  1. [Gemini Usage and Writing Tests](#gemini-usage-and-writing-tests)
   1. [PhantomJS](#phantomjs)
+  1. [TODO](#todo)
 
 
 Installation
 ============
 
-First install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
+First make sure that you're using NodeJS 5.0+ as the tests are written using ES6 syntax.
+
+Then, install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
 
 ```bash
-npm install -g phantomjs2
+# Until phantomjs2 is updated for the new 2.1 version of PhantomJS, use the following (go to https://bitbucket.org/ariya/phantomjs/downloads to find a build for your OS)
+npm install -g phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
 
-# If using OSX, install upx and decompress the binary downloaded by npm manually:
+# If using OSX, you may have to install upx and decompress the binary downloaded by npm manually:
 brew install upx
-# Navigate to the binary, ie. /Users/Brett/.nvm/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin
+
+# Navigate to the binary, ie. /Users/Brett/.nvm/versions/node/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin/phantomjs
 upx -d phantomjs
 
 ```
 
-Then [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
+Finally, [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
 
 
 Running Tests
@@ -54,41 +60,84 @@ gemini update gemini/*
 ```
 
 
-Gemini Usage
-============
+Gemini Usage and Writing Tests
+==============================
 
-While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page app like ours (where much of it is behind an authentication barrier as well).
+While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page
+app like ours (where much of it is behind an authentication barrier as well).
+
+Command Line Interface
+----------------------
+
+See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/commands.md) on the commands that are available.
+`npm run vi-*` is set up with some of these commands, but you may want to build your own or learn about some of the
+other functions.
 
 Authentication
 --------------
 
-Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put waits for the log in to succeed, before testing parts of the app that require the authentication.
+Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script
+through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put
+waits for the log in to succeed, before testing parts of the app that require the authentication.
 
 Browser Session States
 ----------------------
 
-Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when Gemini's launched (ie. `gemini update`, `gemini test`, etc).
+Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when
+Gemini's launched (ie. `gemini update`, `gemini test`, etc).
 
-Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
+Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other
+persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
 
-**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of tests by logging out.
+**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running
+instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of
+tests by logging out.
 
-(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as the cookies are cleared each time, this seems unlikely)
+(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as
+the cookies are cleared each time, this seems unlikely)
 
 Test Reporting
 --------------
 
-Using the `--report html` flag with Gemini will produce a webpage with the test's results in /gemini-report that will show the old, new, and diff images. Using this is highly recommended (and fun!).
+Using the `--reporter html` flag with Gemini will produce a webpage with the test's results in `onion/gemini-report`
+that will show the old, new, and diff images. Using this is highly recommended (and fun!) and is used by default in `npm
+run vi-test`.
 
+Writing Tests
+-------------
+
+See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md), and the [section on the available
+actions](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md#available-actions) for what scripted actions
+are available.
+
+Our tests are located in `onion/gemini/`.
+
+Some useful tips:
+  * The `find()` method in the callbacks is equivalent to `document.querySelector`; it will only return the first
+    element found that matches the selector. Use pseudo classes like `nth-of-type()`, `nth-child()`, and etc. to select
+    later elements.
+  * Nested suites inherit from their parent suites' configurations, but will **override** their inherited configuration
+    if another is specified. For example, if `parentSuite` had a `.before()` method, all children of `parentSuite` would
+    run its `.before()`, but if any of the children specified their own `.before()`, those children would **not** run
+    `parentSuite`'s `.before()`.
+  * Gemini takes a screenshot of the minimum bounding rect for all specified selectors, so this means you can't take a
+    screenshot of two items far away from each other without the rest being considered (ie. trying to get the header and
+    footer)
+  * Unfortunately, `setCaptureElements` and `ignoreElements` will only apply for the first element found matching those
+    selectors.
 
 PhantomJS
 =========
 
-[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without needing a browser.
+[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without
+needing a browser.
 
-Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS 1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
+Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to
+other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS
+1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
 
-While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful things to know about.
+While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful
+things to know about.
 
 Useful features
 ---------------
@@ -97,28 +146,36 @@ You can find the full list of CLI commands in the [documentation](http://phantom
 
 Flags that are of particular interest to us:
  * `--webdriver=4444`: sets the webdriver port to be 4444, the default webdriver port that Gemini expects.
- * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to staging, as the certificate we use is self-signed.
+ * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to
+   staging, as the certificate we use is self-signed.
  * `--ssl-protocol=any`: allows any ssl protocol to be used. May be useful when `--ignore-ssl-errors=true` doesn't work.
  * '--remote-debugger-port`: allows for remote debugging the running PhantomJS instance. More on this later.
 
 Troubleshooting and Debugging
 -----------------------------
 
-Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting docs](http://phantomjs.org/troubleshooting.html).
+Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting
+docs](http://phantomjs.org/troubleshooting.html).
 
-To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified after `--remote-debugger-port` on localhost:
+To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified
+after `--remote-debugger-port` on localhost:
 
 ```bash
 phantomjs --remote-debugger-port=9000 debug.js
 ```
 
-PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1 and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()` in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
+PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1
+and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()`
+in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
 
-At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the current execution state of that breakpoint on the page you're on.
+At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the
+current execution state of that breakpoint on the page you're on.
 
 ---
 
-To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to change the environment to run against.
+To simplify triaging simple issues and test if everything is working, I've added a short test script that can be run
+with PhantomJS to check if it can access the web app and log in. You can edit the `lauch_app_and_login.js` file to
+change the environment to run against.
 
 ```bash
 # In root /onion folder

From 5cfbe5cc398b38f97b333c88bab0e39e0605d7c0 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:30:16 +0100
Subject: [PATCH 154/197] Rebase remerge

---
 .../piece_list_toolbar_filter_widget.js                    | 1 +
 .../piece_list_toolbar_order_widget.js                     | 7 ++++---
 js/components/header.js                                    | 1 +
 js/components/header_notification.js                       | 1 +
 js/components/nav_routes_links_link.js                     | 1 +
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index edb29e85..c9791dbe 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -84,6 +84,7 @@ let PieceListToolbarFilterWidget = React.createClass({
         if (this.props.filterParams && this.props.filterParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-filter-widget-dropdown"
                     pullRight={true}
                     title={filterIcon}
                     className="ascribe-piece-list-toolbar-filter-widget">
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
index 5257cc07..da9bae43 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
@@ -45,7 +45,7 @@ let PieceListToolbarOrderWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        let orderIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
                 <span style={this.isOrderActive()}>&middot;</span>
@@ -55,9 +55,10 @@ let PieceListToolbarOrderWidget = React.createClass({
         if (this.props.orderParams && this.props.orderParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-order-widget-dropdown"
                     pullRight={true}
-                    title={filterIcon}
-                    className="ascribe-piece-list-toolbar-filter-widget">
+                    className="ascribe-piece-list-toolbar-filter-widget"
+                    title={orderIcon}>
                     <li style={{'textAlign': 'center'}}>
                         <em>{getLangText('Sort by')}:</em>
                     </li>
diff --git a/js/components/header.js b/js/components/header.js
index d2ecb76b..2587c92c 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -173,6 +173,7 @@ let Header = React.createClass({
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
+                    id="nav-route-user-dropdown"
                     eventKey="1"
                     title={currentUser.username}>
                     <LinkContainer
diff --git a/js/components/header_notification.js b/js/components/header_notification.js
index 4b375685..784f8786 100644
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@@ -126,6 +126,7 @@ let HeaderNotifications = React.createClass({
                 <Nav navbar right>
                     <DropdownButton
                         ref='dropdownbutton'
+                        id="header-notification-dropdown"
                         eventKey="1"
                         title={
                             <span>
diff --git a/js/components/nav_routes_links_link.js b/js/components/nav_routes_links_link.js
index 6daec0ea..94fd91a2 100644
--- a/js/components/nav_routes_links_link.js
+++ b/js/components/nav_routes_links_link.js
@@ -30,6 +30,7 @@ let NavRoutesLinksLink = React.createClass({
             return (
                 <DropdownButton
                     disabled={disabled}
+                    id={`nav-route-${headerTitle.toLowerCase()}-dropdown`}
                     title={headerTitle}>
                     {children}
                 </DropdownButton>

From 2661f2ba57db0dfebdeee9dc80a178bf3bcb74f6 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:20:43 +0100
Subject: [PATCH 155/197] Standardize CoaVerify route across apps

---
 js/components/coa_verify_container.js         | 85 +++++++++----------
 .../whitelabel/wallet/wallet_routes.js        | 10 +--
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index 6d0af0fa..4a270cf4 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -27,7 +27,7 @@ let CoaVerifyContainer = React.createClass({
 
         return (
             <div className="ascribe-login-wrapper">
-                <br/>
+                <br />
                 <div className="ascribe-login-text ascribe-login-header">
                     {getLangText('Verify your Certificate of Authenticity')}
                 </div>
@@ -37,7 +37,7 @@ let CoaVerifyContainer = React.createClass({
                     signature={signature}/>
                 <br />
                 <br />
-                    {getLangText('ascribe is using the following public key for verification')}:
+                {getLangText('ascribe is using the following public key for verification')}:
                 <br />
                 <pre>
                 -----BEGIN PUBLIC KEY-----
@@ -60,9 +60,8 @@ let CoaVerifyForm = React.createClass({
     },
 
     handleSuccess(response){
-        let notification = null;
         if (response.verdict) {
-            notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
+            const notification = new GlobalNotificationModel(getLangText('Certificate of Authenticity successfully verified'), 'success');
             GlobalNotificationActions.appendGlobalNotification(notification);
         }
     },
@@ -71,46 +70,44 @@ let CoaVerifyForm = React.createClass({
         const { message, signature } = this.props;
 
         return (
-            <div>
-                <Form
-                    url={ApiUrls.coa_verify}
-                    handleSuccess={this.handleSuccess}
-                    buttons={
-                        <button
-                            type="submit"
-                            className="btn btn-default btn-wide">
-                            {getLangText('Verify your Certificate of Authenticity')}
-                        </button>}
-                    spinner={
-                        <span className="btn btn-default btn-wide btn-spinner">
-                            <AscribeSpinner color="dark-blue" size="md" />
-                        </span>
-                        }>
-                    <Property
-                        name='message'
-                        label={getLangText('Message')}>
-                        <input
-                            type="text"
-                            placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
-                            autoComplete="on"
-                            defaultValue={message}
-                            name="username"
-                            required/>
-                    </Property>
-                    <Property
-                        name='signature'
-                        label="Signature"
-                        editable={true}
-                        overrideForm={true}>
-                        <InputTextAreaToggable
-                            rows={3}
-                            placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
-                            defaultValue={signature}
-                            required/>
-                    </Property>
-                    <hr />
-                </Form>
-            </div>
+            <Form
+                url={ApiUrls.coa_verify}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn btn-default btn-wide">
+                        {getLangText('Verify your Certificate of Authenticity')}
+                    </button>
+                }
+                spinner={
+                    <span className="btn btn-default btn-wide btn-spinner">
+                        <AscribeSpinner color="dark-blue" size="md" />
+                    </span>
+                }>
+                <Property
+                    name='message'
+                    label={getLangText('Message')}>
+                    <input
+                        type="text"
+                        placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
+                        autoComplete="on"
+                        defaultValue={message}
+                        required />
+                </Property>
+                <Property
+                    name='signature'
+                    label="Signature"
+                    editable={true}
+                    overrideForm={true}>
+                    <InputTextAreaToggable
+                        rows={3}
+                        placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
+                        defaultValue={signature}
+                        required />
+                </Property>
+                <hr />
+            </Form>
         );
     }
 });
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index ba560608..f1613ee5 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -78,7 +78,7 @@ let ROUTES = {
                 headerTitle='COLLECTION'
                 disableOn='noPieces' />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='pieces/:pieceId' component={CylandPieceContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
@@ -114,7 +114,7 @@ let ROUTES = {
                 disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={PieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -159,7 +159,7 @@ let ROUTES = {
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
             <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
             <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -196,7 +196,7 @@ let ROUTES = {
                 disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     ),
@@ -233,7 +233,7 @@ let ROUTES = {
                 disableOn='noPieces' />
             <Route path='pieces/:pieceId' component={MarketPieceContainer} />
             <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='coa_verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
     )

From 1d09ef1120bf9f05e00081ab6f8b09fff569b0bb Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:21:57 +0100
Subject: [PATCH 156/197] Main app visual test suite

---
 .gemini.yml                  |  15 ++-
 gemini/main/authenticated.js | 214 +++++++++++++++++++++++++++++++++++
 gemini/main/basic.js         | 145 ++++++++++++++++++++++++
 gemini/main/detail.js        | 125 ++++++++++++++++++++
 4 files changed, 493 insertions(+), 6 deletions(-)
 create mode 100644 gemini/main/authenticated.js
 create mode 100644 gemini/main/basic.js
 create mode 100644 gemini/main/detail.js

diff --git a/.gemini.yml b/.gemini.yml
index 5af1ef27..8d434624 100644
--- a/.gemini.yml
+++ b/.gemini.yml
@@ -1,14 +1,17 @@
-rootUrl: https://www.ascribe.ninja/app
+rootUrl: http://localhost.com:3000/
+sessionsPerBrowser: 1
 
 browsers:
-    PhantomJSDesktop:
-        screenshotsDir: './gemini/screens/desktop'
+    MainDesktop:
+        rootUrl: http://localhost.com:3000/
+        screenshotsDir: './gemini-screens/desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
-    PhantomJSMobile:
-        screenshotsDir: './gemini/screens/mobile'
-        windowSize: 767x1364
+    MainMobile:
+        rootUrl: http://localhost.com:3000/
+        screenshotsDir: './gemini-screens/mobile'
+        windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
diff --git a/gemini/main/authenticated.js b/gemini/main/authenticated.js
new file mode 100644
index 00000000..bf579bff
--- /dev/null
+++ b/gemini/main/authenticated.js
@@ -0,0 +1,214 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against routes that require the user to be authenticated.
+*/
+gemini.suite('Authenticated', (suite) => {
+    suite
+        .setUrl('/collection')
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.app',
+            // when we can use this file with the whitelabels
+            actions.waitForElementToShow('.ascribe-default-app', 5000);
+        });
+
+    // Suite just to log us in before any other suites run
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            .ignoreElements('.ascribe-body')
+            .capture('logged in', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), '0000000000');
+                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
+
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            });
+    });
+
+    gemini.suite('Header-desktop', (headerSuite) => {
+        headerSuite
+            .setCaptureElements('nav.navbar .container')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.client--cyland img.img-brand')
+            .skip(/Mobile/)
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            })
+            .capture('desktop header');
+
+        gemini.suite('User dropdown', (headerUserSuite) => {
+            headerUserSuite
+                .setCaptureElements('#nav-route-user-dropdown ~ .dropdown-menu')
+                .capture('expanded user dropdown', (actions, find) => {
+                    actions.click(find('#nav-route-user-dropdown'));
+                });
+        });
+
+        gemini.suite('Notification dropdown', (headerNotificationSuite) => {
+            headerNotificationSuite
+                .setCaptureElements('#header-notification-dropdown ~ .dropdown-menu')
+                .capture('expanded notifications dropdown', (actions, find) => {
+                    actions.click(find('#header-notification-dropdown'));
+                });
+        });
+    });
+
+    // Test for the collapsed header in mobile
+    gemini.suite('Header-mobile', (headerMobileSuite) => {
+        headerMobileSuite
+            .setCaptureElements('nav.navbar .container')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.client--cyland img.img-brand')
+            .skip(/Desktop/)
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            })
+            .capture('mobile header')
+            .capture('expanded mobile header', (actions, find) => {
+                actions.click(find('nav.navbar .navbar-toggle'));
+                // Wait for the header to expand
+                actions.wait(500);
+            })
+            .capture('expanded user dropdown', (actions, find) => {
+                actions.click(find('#nav-route-user-dropdown'));
+            })
+            .capture('expanded notifications dropdown', (actions, find) => {
+                actions.click(find('#header-notification-dropdown'));
+            });
+    });
+
+    gemini.suite('Collection', (collectionSuite) => {
+        collectionSuite
+            .setCaptureElements('.ascribe-accordion-list')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                // Wait for the images to load
+                // FIXME: unfortuntately gemini doesn't support ignoring multiple elements from a single selector
+                // so we're forced to wait and hope that the images will all finish loading after 5s.
+                // We could also change the thumbnails with JS, but setting up a test user is probably easier.
+                actions.wait(5000);
+            })
+            .capture('collection')
+            .capture('expanded edition in collection', (actions, find) => {
+                actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
+                // Wait for editions to load
+                actions.waitForElementToShow('.ascribe-accordion-list-item-table', 5000);
+            })
+
+        gemini.suite('Collection placeholder', (collectionPlaceholderSuite) => {
+            collectionPlaceholderSuite
+                .setCaptureElements('.ascribe-accordion-list-placeholder')
+                .capture('collection empty search', (actions, find) => {
+                    actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result');
+                    actions.waitForElementToShow('.ascribe-accordion-list-placeholder', 5000);
+                });
+        });
+
+        gemini.suite('PieceListBulkModal', (pieceListBulkModalSuite) => {
+            pieceListBulkModalSuite
+                .setCaptureElements('.piece-list-bulk-modal')
+                .capture('items selected', (actions, find) => {
+                    actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
+                    // Wait for editions to load
+                    actions.waitForElementToShow('.ascribe-accordion-list-item-table', 5000);
+
+                    actions.click('.ascribe-table thead tr input[type="checkbox"]');
+                    actions.waitForElementToShow('.piece-list-bulk-modal');
+                });
+        });
+    });
+
+    gemini.suite('PieceListToolbar', (pieceListToolbarSuite) => {
+        pieceListToolbarSuite
+            .setCaptureElements('.ascribe-piece-list-toolbar')
+            .capture('piece list toolbar')
+            .capture('piece list toolbar search filled', (actions, find) => {
+                actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
+            })
+
+        gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
+            pieceListToolbarOrderWidgetSuite
+                .setCaptureElements('#ascribe-piece-list-toolbar-order-widget-dropdown',
+                                    '#ascribe-piece-list-toolbar-order-widget-dropdown ~ .dropdown-menu')
+                .capture('expanded order dropdown', (actions, find) => {
+                    actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));
+
+                    // Wait as the dropdown screenshot still includes the collection in the background
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                });
+        });
+
+        gemini.suite('Filter widget dropdown', (pieceListToolbarFilterWidgetSuite) => {
+            pieceListToolbarFilterWidgetSuite
+                .setCaptureElements('#ascribe-piece-list-toolbar-filter-widget-dropdown',
+                                    '#ascribe-piece-list-toolbar-filter-widget-dropdown ~ .dropdown-menu')
+                .capture('expanded filter dropdown', (actions, find) => {
+                    actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));
+
+                    // Wait as the dropdown screenshot still includes the collection in the background
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+                });
+        });
+    });
+
+    gemini.suite('Register work', (registerSuite) => {
+        registerSuite
+            .setUrl('/register_piece')
+            .capture('register work', (actions, find) => {
+                // The uploader options are only rendered after the user is fetched, so
+                // we have to wait for it here
+                actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', 5000);
+            })
+            .capture('register work filled', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="artist_name"]'), 'artist name');
+                actions.sendKeys(find('.ascribe-form input[name="title"]'), 'title');
+                actions.sendKeys(find('.ascribe-form input[name="date_created"]'), 'date created');
+            })
+            .capture('register work filled with editions', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                actions.wait(500);
+                actions.sendKeys(find('.ascribe-form input[name="num_editions"]'), '50');
+            });
+
+        gemini.suite('Register work hash', (registerHashSuite) => {
+            registerHashSuite
+                .setUrl('/register_piece?method=hash')
+                .capture('register work hash method');
+        });
+
+        gemini.suite('Register work upload', (registerUploadSuite) => {
+            registerUploadSuite
+                .setUrl('/register_piece?method=upload')
+                .capture('register work upload method');
+        });
+    });
+
+    gemini.suite('User settings', (userSettingsSuite) => {
+        userSettingsSuite
+            .setUrl('/settings')
+            .before((actions, find) => {
+                // This will be called before every nested suite begins unless that suite
+                // also defines a `.before()`
+                actions.waitForElementToShow('.settings-container', 5000);
+            })
+            .capture('user settings');
+    });
+
+    // Suite just to log out after suites have run
+    gemini.suite('Log out', (logoutSuite) => {
+        logoutSuite
+            .setUrl('/logout')
+            .ignoreElements('.ascribe-body')
+            .capture('logout', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-login-wrapper', 10000);
+            });
+    });
+});
diff --git a/gemini/main/basic.js b/gemini/main/basic.js
new file mode 100644
index 00000000..317c5d84
--- /dev/null
+++ b/gemini/main/basic.js
@@ -0,0 +1,145 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Basic suite of tests against routes that do not require the user to be authenticated.
+*/
+gemini.suite('Basic', (suite) => {
+    suite
+        .setUrl('/login')
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-default-app', 5000);
+        });
+
+    gemini.suite('Header-desktop', (headerSuite) => {
+        headerSuite
+            .setCaptureElements('nav.navbar .container')
+            .skip(/Mobile/)
+            .capture('desktop header', (actions, find) => {
+                actions.waitForElementToShow('nav.navbar .container', 5000);
+            })
+            .capture('hover on active item', (actions, find) => {
+                const activeItem = find('nav.navbar li.active');
+                actions.mouseMove(activeItem);
+            })
+            .capture('hover on inactive item', (actions, find) => {
+                const inactiveItem = find('nav.navbar li:not(.active)');
+                actions.mouseMove(inactiveItem);
+            });
+    });
+
+    // Test for the collapsed header in mobile
+    gemini.suite('Header-mobile', (headerMobileSuite) => {
+        headerMobileSuite
+            .setCaptureElements('nav.navbar .container')
+            .skip(/Desktop/)
+            .capture('mobile header', (actions, find) => {
+                actions.waitForElementToShow('nav.navbar .container', 5000);
+            })
+            .capture('expanded mobile header', (actions, find) => {
+                actions.click(find('nav.navbar .navbar-toggle'));
+                // Wait for the header to expand
+                actions.wait(500);
+            })
+            .capture('hover on expanded mobile header item', (actions, find) => {
+                actions.mouseMove(find('nav.navbar li'));
+            });
+    });
+
+    gemini.suite('Footer', (footerSuite) => {
+        footerSuite
+            .setCaptureElements('.ascribe-footer')
+            .capture('footer', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-footer', 5000);
+            })
+            .capture('hover on footer item', (actions, find) => {
+                const footerItem = find('.ascribe-footer a:not(.social)');
+                actions.mouseMove(footerItem);
+            })
+            .capture('hover on footer social item', (actions, find) => {
+                const footerSocialItem = find('.ascribe-footer a.social')
+                actions.mouseMove(footerSocialItem);
+            });
+    });
+
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .capture('login', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('hover on login submit', (actions, find) => {
+                actions.mouseMove(find('.ascribe-form button[type=submit]'));
+            })
+            .capture('hover on sign up link', (actions, find) => {
+                actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+            })
+            .capture('login form filled with focus', (actions, find) => {
+                const emailInput = find('.ascribe-form input[name=email]');
+
+                // Remove hover from sign up link
+                actions.click(emailInput);
+
+                actions.sendKeys(emailInput, 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+            })
+            .capture('login form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Sign up', (signUpSuite) => {
+        signUpSuite
+            .setUrl('/signup')
+            .capture('sign up', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('sign up form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+            })
+            .capture('sign up form filled with check', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+            });
+    });
+
+    gemini.suite('Password reset', (passwordResetSuite) => {
+        passwordResetSuite
+            .setUrl('/password_reset')
+            .capture('password reset', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('password reset form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), 'dimi@mailinator.com');
+            })
+            .capture('password reset form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Coa verify', (coaVerifySuite) => {
+        coaVerifySuite
+            .setUrl('/coa_verify')
+            .capture('coa verify', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+            })
+            .capture('coa verify form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
+                actions.sendKeys(find('.ascribe-form .ascribe-property-wrapper:nth-of-type(2) textarea'), 'sample signature');
+            })
+            .capture('coa verify form filled', (actions, find) => {
+                actions.click(find('.ascribe-login-header'));
+            });
+    });
+
+    gemini.suite('Not found', (notFoundSuite) => {
+        notFoundSuite
+            .setUrl('/not_found_page')
+            .capture('not found page');
+    });
+});
diff --git a/gemini/main/detail.js b/gemini/main/detail.js
new file mode 100644
index 00000000..39a02338
--- /dev/null
+++ b/gemini/main/detail.js
@@ -0,0 +1,125 @@
+'use strict';
+
+const gemini = require('gemini');
+const pieceUrl = '/pieces/12374';
+const editionUrl = '/editions/14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+
+/**
+ * Suite of tests against the piece and edition routes.
+ * Tests include accessing the piece / edition as the owner or as another user
+ * (we can just use an anonymous user in this case).
+*/
+gemini.suite('Work detail', (suite) => {
+    suite
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.app',
+            // when we can use this file with the whitelabels
+            actions.waitForElementToShow('.ascribe-default-app', 5000);
+
+            // Wait for the social media buttons to appear
+            actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', 20000);
+            actions.waitForElementToShow('.ascribe-social-button-list .twitter-share-button', 20000);
+            actions.waitForElementToShow('.ascribe-media-player', 10000);
+        });
+
+    gemini.suite('Basic piece', (basicPieceSuite) => {
+        basicPieceSuite
+            .setUrl(pieceUrl)
+            .capture('basic piece')
+            .capture('shmui', (actions, find) => {
+                actions.click(find('.ascribe-media-player'));
+                actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
+                // Wait for the transition to end
+                actions.wait(1000);
+            });
+    });
+
+    gemini.suite('Basic edition', (basicEditionSuite) => {
+        basicEditionSuite
+            .setUrl(editionUrl)
+            .capture('basic edition');
+    });
+
+    // Suite just to log us in before any other suites run
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            .ignoreElements('.ascribe-body')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-default-app', 5000);
+            })
+            .capture('logged in', (actions, find) => {
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), '0000000000');
+                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
+
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', 5000);
+            });
+    });
+
+    gemini.suite('Authorized piece', (authorizedPieceSuite) => {
+        authorizedPieceSuite
+            .setUrl(pieceUrl)
+            .capture('authorized piece');
+    });
+
+    gemini.suite('Authorized edition', (authorizedEditionSuite) => {
+        authorizedEditionSuite
+            .setUrl(editionUrl)
+            .capture('authorized edition')
+    });
+
+    gemini.suite('Detail action buttons', (detailActionButtonSuite) => {
+        detailActionButtonSuite
+            .setUrl(editionUrl)
+            .capture('hover on action button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default'));
+            })
+            .capture('hover on delete button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-tertiary'));
+            })
+            .capture('hover on info button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.glyphicon-question-sign'));
+            })
+            .capture('expand info text', (actions, find) => {
+                actions.click(find('.ascribe-detail-property .ascribe-button-list button.glyphicon-question-sign'));
+            });
+    });
+
+    gemini.suite('Action form modal', (actionFormModalSuite) => {
+        actionFormModalSuite
+            .setUrl(editionUrl)
+            .setCaptureElements('.modal-dialog')
+            .capture('open email form', (actions, find) => {
+                // Add class names to make the action buttons easier to select
+                actions.executeJS(function (window) {
+                    var actionButtons = window.document.querySelectorAll('.ascribe-detail-property .ascribe-button-list button.btn-default');
+                    for (var ii = 0; ii < actionButtons.length; ++ii) {
+                        if (actionButtons[ii].textContent) {
+                            actionButtons[ii].className += ' ascribe-action-button-' + actionButtons[ii].textContent.toLowerCase();
+                        }
+                    }
+                });
+                actions.click(find('.ascribe-detail-property .ascribe-button-list button.ascribe-action-button-email'));
+
+                // Wait for transition
+                actions.wait(1000);
+            });
+    });
+
+    // Suite just to log out after suites have run
+    gemini.suite('Log out', (logoutSuite) => {
+        logoutSuite
+            .setUrl('/logout')
+            .ignoreElements('.ascribe-body')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-default-app', 5000);
+            })
+            .capture('logout', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-login-wrapper', 10000);
+            });
+    });
+});

From e895c765610e96b72c606d242d8ff55a509494f0 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:24:01 +0100
Subject: [PATCH 157/197] Add whitelabel visual test suite

Currently just checks landing page and some pages accessible to
unauthorized users.
---
 .gemini.yml                                  | 116 +++++++++++++++++++
 gemini/whitelabel/23vivi/23vivi.js           |  27 +++++
 gemini/whitelabel/cyland/cyland.js           |  28 +++++
 gemini/whitelabel/ikonotv/ikonotv.js         |  95 +++++++++++++++
 gemini/whitelabel/lumenus/lumenus.js         |  27 +++++
 gemini/whitelabel/shared/whitelabel_basic.js | 112 ++++++++++++++++++
 6 files changed, 405 insertions(+)
 create mode 100644 gemini/whitelabel/23vivi/23vivi.js
 create mode 100644 gemini/whitelabel/cyland/cyland.js
 create mode 100644 gemini/whitelabel/ikonotv/ikonotv.js
 create mode 100644 gemini/whitelabel/lumenus/lumenus.js
 create mode 100644 gemini/whitelabel/shared/whitelabel_basic.js

diff --git a/.gemini.yml b/.gemini.yml
index 8d434624..a04903eb 100644
--- a/.gemini.yml
+++ b/.gemini.yml
@@ -15,3 +15,119 @@ browsers:
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
+
+    CcDesktop:
+        rootUrl: http://cc.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cc-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CcMobile:
+        rootUrl: http://cc.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cc-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CylandDesktop:
+        rootUrl: http://cyland.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cyland-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CylandMobile:
+        rootUrl: http://cyland.localhost.com:3000/
+        screenshotsDir: './gemini-screens/cyland-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    IkonotvDesktop:
+        rootUrl: http://ikonotv.localhost.com:3000/
+        screenshotsDir: './gemini-screens/ikonotv-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    IkonotvMobile:
+        rootUrl: http://ikonotv.localhost.com:3000/
+        screenshotsDir: './gemini-screens/ikonotv-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    LumenusDesktop:
+        rootUrl: http://lumenus.localhost.com:3000/
+        screenshotsDir: './gemini-screens/lumenus-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    LumenusMobile:
+        rootUrl: http://lumenus.localhost.com:3000/
+        screenshotsDir: './gemini-screens/lumenus-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    23viviDesktop:
+        rootUrl: http://23vivi.localhost.com:3000/
+        screenshotsDir: './gemini-screens/23vivi-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    23viviMobile:
+        rootUrl: http://23vivi.localhost.com:3000/
+        screenshotsDir: './gemini-screens/23vivi-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+sets:
+    main:
+        files:
+            - gemini/main
+        browsers:
+            - MainDesktop
+            - MainMobile
+    cc:
+        files:
+            - gemini/whitelabel/shared
+        browsers:
+            - CcDesktop
+            - CcMobile
+
+    cyland:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/cyland
+        browsers:
+            - CylandDesktop
+            - CylandMobile
+
+    ikonotv:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/ikonotv
+        browsers:
+            - IkonotvDesktop
+            - IkonotvMobile
+
+    lumenus:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/lumenus
+        browsers:
+            - LumenusDesktop
+            - LumenusMobile
+
+    23vivi:
+        files:
+            - gemini/whitelabel/shared
+            - gemini/whitelabel/23vivi
+        browsers:
+            - 23viviDesktop
+            - 23viviMobile
diff --git a/gemini/whitelabel/23vivi/23vivi.js b/gemini/whitelabel/23vivi/23vivi.js
new file mode 100644
index 00000000..cafdfc6d
--- /dev/null
+++ b/gemini/whitelabel/23vivi/23vivi.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against 23vivi specific routes
+ */
+gemini.suite('23vivi', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            .capture('landing', (actions, find) => {
+                // Wait for the logo to appear
+                actions.waitForElementToShow('.vivi23-landing--header-logo', 10000);
+            });
+    });
+
+    // TODO: add more tests for market specific pages after authentication
+});
diff --git a/gemini/whitelabel/cyland/cyland.js b/gemini/whitelabel/cyland/cyland.js
new file mode 100644
index 00000000..06709f39
--- /dev/null
+++ b/gemini/whitelabel/cyland/cyland.js
@@ -0,0 +1,28 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against Cyland specific routes
+ */
+gemini.suite('Cyland', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.cyland-landing img')
+            .capture('landing', (actions, find) => {
+                actions.waitForElementToShow('.cyland-landing img', 10000);
+            });
+    });
+
+    // TODO: add more tests for cyland specific pages after authentication
+});
diff --git a/gemini/whitelabel/ikonotv/ikonotv.js b/gemini/whitelabel/ikonotv/ikonotv.js
new file mode 100644
index 00000000..1741aaa0
--- /dev/null
+++ b/gemini/whitelabel/ikonotv/ikonotv.js
@@ -0,0 +1,95 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against Cyland specific routes
+ */
+gemini.suite('Ikonotv', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            // Gemini complains if we try to capture the entire app for Ikonotv's landing page for some reason
+            .setCaptureElements('.ikonotv-landing')
+            .setTolerance(5)
+            .capture('landing', (actions, find) => {
+                // Stop background animation
+                actions.executeJS(function (window) {
+                    var landingBackground = window.document.querySelector('.client--ikonotv .route--landing');
+                    landingBackground.style.animation = 'none';
+                    landingBackground.style.webkitAnimation = 'none';
+                });
+
+                // Wait for logo to appear
+                actions.waitForElementToShow('.ikonotv-landing header img', 10000);
+            });
+    });
+
+    // Ikono needs its own set of tests for some pre-authorization pages to wait for
+    // its logo to appear
+    gemini.suite('Ikonotv basic', (suite) => {
+        suite
+            .setCaptureElements('.ascribe-wallet-app')
+            .before((actions, find) => {
+                // This will be called before every nested suite begins unless that suite
+                // also defines a `.before()`
+                // FIXME: use a more generic class for this, like just '.app',
+                // when we can use this file with the whitelabels
+                actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+
+                // Wait for the forms to appear
+                actions.waitForElementToShow('.ascribe-form', 5000);
+
+                // Just use a dumb wait because the logo is set as a background image
+                actions.wait(3000);
+            });
+
+        gemini.suite('Login', (loginSuite) => {
+            loginSuite
+                .setUrl('/login')
+                .capture('login')
+                .capture('hover on login submit', (actions, find) => {
+                    actions.mouseMove(find('.ascribe-form button[type=submit]'));
+                })
+                .capture('hover on sign up link', (actions, find) => {
+                    actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+                })
+                .capture('login form filled with focus', (actions, find) => {
+                    const emailInput = find('.ascribe-form input[name=email]');
+
+                    // Remove hover from sign up link
+                    actions.click(emailInput);
+
+                    actions.sendKeys(emailInput, 'dimi@mailinator.com');
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                })
+                .capture('login form filled', (actions, find) => {
+                    actions.click(find('.ascribe-form-header'));
+                });
+        });
+
+        gemini.suite('Sign up', (signUpSuite) => {
+            signUpSuite
+                .setUrl('/signup')
+                .capture('sign up')
+                .capture('sign up form filled with focus', (actions, find) => {
+                    actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+                })
+                .capture('sign up form filled with check', (actions, find) => {
+                    actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                });
+        });
+    });
+
+    // TODO: add more tests for ikonotv specific pages after authentication
+});
diff --git a/gemini/whitelabel/lumenus/lumenus.js b/gemini/whitelabel/lumenus/lumenus.js
new file mode 100644
index 00000000..a9ff53cd
--- /dev/null
+++ b/gemini/whitelabel/lumenus/lumenus.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Suite of tests against lumenus specific routes
+ */
+gemini.suite('Lumenus', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            .capture('landing', (actions, find) => {
+                // Wait for the logo to appear
+                actions.waitForElementToShow('.wp-landing-wrapper img', 10000);
+            });
+    });
+
+    // TODO: add more tests for market specific pages after authentication
+});
diff --git a/gemini/whitelabel/shared/whitelabel_basic.js b/gemini/whitelabel/shared/whitelabel_basic.js
new file mode 100644
index 00000000..7fe5c256
--- /dev/null
+++ b/gemini/whitelabel/shared/whitelabel_basic.js
@@ -0,0 +1,112 @@
+'use strict';
+
+const gemini = require('gemini');
+
+/**
+ * Basic suite of tests against whitelabel routes that do not require authentication.
+*/
+gemini.suite('Whitelabel basic', (suite) => {
+    suite
+        .setCaptureElements('.ascribe-wallet-app > .container')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-wallet-app', 5000);
+
+            // Use a dumb wait in case we're still waiting for other assets, like fonts, to load
+            actions.wait(1000);
+        });
+
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            // See Ikono
+            .skip(/Ikono/)
+            .capture('login', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // For some reason, the screenshots seem to keep catching the whitelabel login form
+                // on a refresh and without fonts loaded (maybe because they're the first tests run
+                // and the cache isn't hot yet?).
+                // Let's wait a bit and hope they load.
+                actions.wait(3000);
+            })
+            .capture('hover on login submit', (actions, find) => {
+                actions.mouseMove(find('.ascribe-form button[type=submit]'));
+            })
+            .capture('hover on sign up link', (actions, find) => {
+                actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+            })
+            .capture('login form filled with focus', (actions, find) => {
+                const emailInput = find('.ascribe-form input[name=email]');
+
+                // Remove hover from sign up link
+                actions.click(emailInput);
+
+                actions.sendKeys(emailInput, 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+            })
+            .capture('login form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Sign up', (signUpSuite) => {
+        signUpSuite
+            .setUrl('/signup')
+            // See Ikono
+            .skip(/Ikono/)
+            .capture('sign up', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('sign up form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name=email]'), 'dimi@mailinator.com');
+                actions.sendKeys(find('.ascribe-form input[name=password]'), '0000000000');
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), '0000000000');
+            })
+            .capture('sign up form filled with check', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+            });
+    });
+
+    gemini.suite('Password reset', (passwordResetSuite) => {
+        passwordResetSuite
+            .setUrl('/password_reset')
+            .capture('password reset', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('password reset form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), 'dimi@mailinator.com');
+            })
+            .capture('password reset form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Coa verify', (coaVerifySuite) => {
+        coaVerifySuite
+            .setUrl('/coa_verify')
+            .capture('coa verify', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', 5000);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('coa verify form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
+                actions.sendKeys(find('.ascribe-form .ascribe-property-wrapper:nth-of-type(2) textarea'), 'sample signature');
+            })
+            .capture('coa verify form filled', (actions, find) => {
+                actions.click(find('.ascribe-login-header'));
+            });
+    });
+
+    gemini.suite('Not found', (notFoundSuite) => {
+        notFoundSuite
+            .setUrl('/not_found_page')
+            .capture('not found page');
+    });
+});

From afb832dc2892030385a3cd93891135aa8949ddba Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 11:24:28 +0100
Subject: [PATCH 158/197] Remove browser-sync notify pop over that shows up in
 visual tests

---
 gulpfile.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/gulpfile.js b/gulpfile.js
index f13945b0..afa0d5a9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -97,7 +97,8 @@ gulp.task('browser-sync', function() {
         proxy: 'http://localhost:4000',
         port: 3000,
         open: false, // does not open the browser-window anymore (handled manually)
-        ghostMode: false
+        ghostMode: false,
+        notify: false // stop showing the browsersync pop up
     });
 });
 

From 747f8df06bbb54f949fe34bac9af263d7b96b136 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:30:55 +0100
Subject: [PATCH 159/197] Rebase remerge

---
 docs/visual-regression-testing.md | 33 +++++++++++++++++++++++++------
 package.json                      | 15 +++++++++++++-
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/docs/visual-regression-testing.md b/docs/visual-regression-testing.md
index d544b1fa..35d328f0 100644
--- a/docs/visual-regression-testing.md
+++ b/docs/visual-regression-testing.md
@@ -42,21 +42,32 @@ Running Tests
 Run PhantomJS:
 
 ```bash
-phantomjs --webdriver=4444
+npm run vi-phantom
 ```
 
 And then run Gemini tests:
 
 ```bash
-# In root onion/
-gemini test gemini/* --report html
+npm run vi-test
+
+# Run only main tests
+npm run vi-test:main
+
+# Run only whitelabel tests
+npm run vi-test:whitelabel
+
+# Run only specific whitelabel tests
+npm run vi-test:cyland
 ```
 
-If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are no regressions first!), use
+If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are
+no regressions first!), use
 
 ```bash
-# In root onion/
-gemini update gemini/*
+npm run vi-update
+
+# Update just the main app for desktop and mobile
+npm run vi-update -- --browser MainDesktop --browser MainMobile
 ```
 
 
@@ -112,6 +123,8 @@ are available.
 
 Our tests are located in `onion/gemini/`.
 
+**It would be nice if we kept the whitelabels up to date.**
+
 Some useful tips:
   * The `find()` method in the callbacks is equivalent to `document.querySelector`; it will only return the first
     element found that matches the selector. Use pseudo classes like `nth-of-type()`, `nth-child()`, and etc. to select
@@ -181,3 +194,11 @@ change the environment to run against.
 # In root /onion folder
 phantomjs phantomjs/launch_app_and_login.js
 ```
+
+
+TODO
+====
+
+* Write scripts to automate creation of test users (and modify tests to accomodate)
+* Set scripts with rootUrls pointing to staging / live using environment variables
+* Set up with Sauce Labs
diff --git a/package.json b/package.json
index d8e76da5..9b90e537 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,19 @@
     "start": "node server.js",
     "test": "mocha",
     "tunnel": "node test/tunnel.js"
+
+    "vi-clean": "rm -rf gemini-report",
+    "vi-phantom": "phantomjs --webdriver=4444",
+    "vi-update": "gemini update",
+    "vi-test": "npm run vi-clean && gemini test --reporter html --reporter vflat || true",
+    "vi-test:all": "npm run vi-test",
+    "vi-test:main": "npm run vi-test -- --browser MainDesktop --browser MainMobile",
+    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test",
+    "vi-test:cc": "npm run vi-test -- --browser CcDesktop --browser CcMobile",
+    "vi-test:cyland": "npm run vi-test -- --browser CylandDesktop --browser CylandMobile",
+    "vi-test:ikonotv": "npm run vi-test -- --browser IkonotvDesktop --browser IkonotvMobile",
+    "vi-test:lumenus": "npm run vi-test -- --browser LumenusDesktop --browser LumenusMobile",
+    "vi-test:23vivi": "npm run vi-test -- --browser 23viviDesktop --browser 23viviMobile"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"
@@ -42,7 +55,7 @@
     "chai-as-promised": "^5.1.0",
     "colors": "^1.1.2",
     "dotenv": "^1.2.0",
-    "gemini": "^2.0.3",
+    "gemini": "^2.1.0",
     "jest-cli": "^0.4.0",
     "mocha": "^2.3.4",
     "phantomjs2": "^2.0.2",

From c3b8b596f1d51ca7fe368f6bdfe8327ecfbc50da Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:31:16 +0100
Subject: [PATCH 160/197] Rebase remerge

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 9b90e537..bfe0c416 100644
--- a/package.json
+++ b/package.json
@@ -12,9 +12,9 @@
     "postinstall": "npm run build",
     "build": "gulp build --production",
     "start": "node server.js",
-    "test": "mocha",
-    "tunnel": "node test/tunnel.js"
-
+    "test": "npm run sauce-test",
+    "sauce-test": "mocha",
+    "tunnel": "node test/tunnel.js",
     "vi-clean": "rm -rf gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update",

From a51b33857e4cad8431a5182e11c16b7a765a5db8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 13:39:46 +0100
Subject: [PATCH 161/197] Move sauce tests to /test/integration folder

---
 package.json                               | 4 ++--
 test/{ => integration}/README.md           | 0
 test/{ => integration}/config.js           | 0
 test/{ => integration}/setup.js            | 0
 test/{ => integration/tests}/test-login.js | 2 +-
 test/{ => integration}/tunnel.js           | 0
 6 files changed, 3 insertions(+), 3 deletions(-)
 rename test/{ => integration}/README.md (100%)
 rename test/{ => integration}/config.js (100%)
 rename test/{ => integration}/setup.js (100%)
 rename test/{ => integration/tests}/test-login.js (97%)
 rename test/{ => integration}/tunnel.js (100%)

diff --git a/package.json b/package.json
index bfe0c416..42c8bba9 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "build": "gulp build --production",
     "start": "node server.js",
     "test": "npm run sauce-test",
-    "sauce-test": "mocha",
-    "tunnel": "node test/tunnel.js",
+    "sauce-test": "mocha ./test/integration/tests/",
+    "tunnel": "node ./test/integration/tunnel.js",
     "vi-clean": "rm -rf gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update",
diff --git a/test/README.md b/test/integration/README.md
similarity index 100%
rename from test/README.md
rename to test/integration/README.md
diff --git a/test/config.js b/test/integration/config.js
similarity index 100%
rename from test/config.js
rename to test/integration/config.js
diff --git a/test/setup.js b/test/integration/setup.js
similarity index 100%
rename from test/setup.js
rename to test/integration/setup.js
diff --git a/test/test-login.js b/test/integration/tests/test-login.js
similarity index 97%
rename from test/test-login.js
rename to test/integration/tests/test-login.js
index e2736fe1..853d48e5 100644
--- a/test/test-login.js
+++ b/test/integration/tests/test-login.js
@@ -5,7 +5,7 @@ const wd = require('wd');
 const asserters = wd.asserters;   // Commonly used asserters for async waits in the browser
 const chai = require('chai');
 const chaiAsPromised = require('chai-as-promised');
-const config = require('./config.js');
+const config = require('../config.js');
 
 chai.use(chaiAsPromised);
 chai.should();
diff --git a/test/tunnel.js b/test/integration/tunnel.js
similarity index 100%
rename from test/tunnel.js
rename to test/integration/tunnel.js

From 67b46fb425e808f67ba41eddf2f458a166eda42d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 13:58:52 +0100
Subject: [PATCH 162/197] Move visual tests to /test/gemini folder

---
 package.json                                  |  6 +++---
 .gemini.yml => test/gemini/.gemini.yml        | 20 +++++++++----------
 .../gemini/README.md                          |  3 ++-
 .../gemini/tests}/main/authenticated.js       |  0
 {gemini => test/gemini/tests}/main/basic.js   |  0
 {gemini => test/gemini/tests}/main/detail.js  |  0
 .../gemini/tests}/whitelabel/23vivi/23vivi.js |  0
 .../gemini/tests}/whitelabel/cyland/cyland.js |  0
 .../tests}/whitelabel/ikonotv/ikonotv.js      |  0
 .../tests}/whitelabel/lumenus/lumenus.js      |  0
 .../whitelabel/shared/whitelabel_basic.js     |  0
 11 files changed, 15 insertions(+), 14 deletions(-)
 rename .gemini.yml => test/gemini/.gemini.yml (89%)
 rename docs/visual-regression-testing.md => test/gemini/README.md (97%)
 rename {gemini => test/gemini/tests}/main/authenticated.js (100%)
 rename {gemini => test/gemini/tests}/main/basic.js (100%)
 rename {gemini => test/gemini/tests}/main/detail.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/23vivi/23vivi.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/cyland/cyland.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/ikonotv/ikonotv.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/lumenus/lumenus.js (100%)
 rename {gemini => test/gemini/tests}/whitelabel/shared/whitelabel_basic.js (100%)

diff --git a/package.json b/package.json
index 42c8bba9..5e72b863 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,10 @@
     "test": "npm run sauce-test",
     "sauce-test": "mocha ./test/integration/tests/",
     "tunnel": "node ./test/integration/tunnel.js",
-    "vi-clean": "rm -rf gemini-report",
+    "vi-clean": "rm -rf ./gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
-    "vi-update": "gemini update",
-    "vi-test": "npm run vi-clean && gemini test --reporter html --reporter vflat || true",
+    "vi-update": "gemini update -c ./test/gemini/.gemini.yml",
+    "vi-test": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat || true",
     "vi-test:all": "npm run vi-test",
     "vi-test:main": "npm run vi-test -- --browser MainDesktop --browser MainMobile",
     "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test",
diff --git a/.gemini.yml b/test/gemini/.gemini.yml
similarity index 89%
rename from .gemini.yml
rename to test/gemini/.gemini.yml
index a04903eb..f64d865f 100644
--- a/.gemini.yml
+++ b/test/gemini/.gemini.yml
@@ -89,45 +89,45 @@ browsers:
 sets:
     main:
         files:
-            - gemini/main
+            - tests/main
         browsers:
             - MainDesktop
             - MainMobile
     cc:
         files:
-            - gemini/whitelabel/shared
+            - tests/whitelabel/shared
         browsers:
             - CcDesktop
             - CcMobile
 
     cyland:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/cyland
+            - tests/whitelabel/shared
+            - tests/whitelabel/cyland
         browsers:
             - CylandDesktop
             - CylandMobile
 
     ikonotv:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/ikonotv
+            - tests/whitelabel/shared
+            - tests/whitelabel/ikonotv
         browsers:
             - IkonotvDesktop
             - IkonotvMobile
 
     lumenus:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/lumenus
+            - tests/whitelabel/shared
+            - tests/whitelabel/lumenus
         browsers:
             - LumenusDesktop
             - LumenusMobile
 
     23vivi:
         files:
-            - gemini/whitelabel/shared
-            - gemini/whitelabel/23vivi
+            - tests/whitelabel/shared
+            - tests/whitelabel/23vivi
         browsers:
             - 23viviDesktop
             - 23viviMobile
diff --git a/docs/visual-regression-testing.md b/test/gemini/README.md
similarity index 97%
rename from docs/visual-regression-testing.md
rename to test/gemini/README.md
index 35d328f0..da1712d9 100644
--- a/docs/visual-regression-testing.md
+++ b/test/gemini/README.md
@@ -24,6 +24,7 @@ Then, install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
 ```bash
 # Until phantomjs2 is updated for the new 2.1 version of PhantomJS, use the following (go to https://bitbucket.org/ariya/phantomjs/downloads to find a build for your OS)
 npm install -g phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
+npm install --save-dev phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
 
 # If using OSX, you may have to install upx and decompress the binary downloaded by npm manually:
 brew install upx
@@ -121,7 +122,7 @@ See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md
 actions](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md#available-actions) for what scripted actions
 are available.
 
-Our tests are located in `onion/gemini/`.
+Our tests are located in `onion/test/gemini/tests/`.
 
 **It would be nice if we kept the whitelabels up to date.**
 
diff --git a/gemini/main/authenticated.js b/test/gemini/tests/main/authenticated.js
similarity index 100%
rename from gemini/main/authenticated.js
rename to test/gemini/tests/main/authenticated.js
diff --git a/gemini/main/basic.js b/test/gemini/tests/main/basic.js
similarity index 100%
rename from gemini/main/basic.js
rename to test/gemini/tests/main/basic.js
diff --git a/gemini/main/detail.js b/test/gemini/tests/main/detail.js
similarity index 100%
rename from gemini/main/detail.js
rename to test/gemini/tests/main/detail.js
diff --git a/gemini/whitelabel/23vivi/23vivi.js b/test/gemini/tests/whitelabel/23vivi/23vivi.js
similarity index 100%
rename from gemini/whitelabel/23vivi/23vivi.js
rename to test/gemini/tests/whitelabel/23vivi/23vivi.js
diff --git a/gemini/whitelabel/cyland/cyland.js b/test/gemini/tests/whitelabel/cyland/cyland.js
similarity index 100%
rename from gemini/whitelabel/cyland/cyland.js
rename to test/gemini/tests/whitelabel/cyland/cyland.js
diff --git a/gemini/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
similarity index 100%
rename from gemini/whitelabel/ikonotv/ikonotv.js
rename to test/gemini/tests/whitelabel/ikonotv/ikonotv.js
diff --git a/gemini/whitelabel/lumenus/lumenus.js b/test/gemini/tests/whitelabel/lumenus/lumenus.js
similarity index 100%
rename from gemini/whitelabel/lumenus/lumenus.js
rename to test/gemini/tests/whitelabel/lumenus/lumenus.js
diff --git a/gemini/whitelabel/shared/whitelabel_basic.js b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
similarity index 100%
rename from gemini/whitelabel/shared/whitelabel_basic.js
rename to test/gemini/tests/whitelabel/shared/whitelabel_basic.js

From 574378af98d5fbc3f78013332c006b3c52612117 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 13:58:57 +0100
Subject: [PATCH 163/197] Update README for updated paths to tests

---
 README.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1b918e5d..8dcf78ad 100644
--- a/README.md
+++ b/README.md
@@ -108,7 +108,14 @@ Visual Regression Testing
 
 We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports both PhantomJS2 and SauceLabs.
 
-See the [helper docs](docs/visual-regression-testing.md) for information on installing Gemini, its dependencies, and running and writing tests.
+See the [helper docs](test/gemini/README.md) for information on installing Gemini, its dependencies, and running and writing tests.
+
+Integration Testing
+-------------------
+
+We're using [Sauce Labs](https://saucelabs.com/home) with [WD.js](https://github.com/admc/wd) for integration testing across browser grids with Selenium.
+
+See the [helper docs](test/integration/README.md) for information on each part of the test stack and how to run and write tests.
 
 
 Workflow

From baf75cbee12912f712598417a7b90caddbcadfbc Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 14:37:41 +0100
Subject: [PATCH 164/197] Fix shmui visual test

---
 test/gemini/tests/main/detail.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
index 39a02338..7adad5d4 100644
--- a/test/gemini/tests/main/detail.js
+++ b/test/gemini/tests/main/detail.js
@@ -29,12 +29,17 @@ gemini.suite('Work detail', (suite) => {
         basicPieceSuite
             .setUrl(pieceUrl)
             .capture('basic piece')
-            .capture('shmui', (actions, find) => {
-                actions.click(find('.ascribe-media-player'));
-                actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
-                // Wait for the transition to end
-                actions.wait(1000);
-            });
+
+        gemini.suite('Shmui', (shmuiSuite) => {
+            shmuiSuite.
+                setCaptureElements('.shmui-wrap')
+                .capture('shmui', (actions, find) => {
+                    actions.click(find('.ascribe-media-player'));
+                    actions.waitForElementToShow('.shmui-wrap:not(.loading)', 30000);
+                    // Wait for the transition to end
+                    actions.wait(1000);
+                });
+        });
     });
 
     gemini.suite('Basic edition', (basicEditionSuite) => {

From 39417f3d11a18c3bdbc0a6458994dbb113142539 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 29 Jan 2016 14:37:55 +0100
Subject: [PATCH 165/197] Change screenshot folder for visual tests

---
 test/gemini/.gemini.yml | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/test/gemini/.gemini.yml b/test/gemini/.gemini.yml
index f64d865f..0c7b8b77 100644
--- a/test/gemini/.gemini.yml
+++ b/test/gemini/.gemini.yml
@@ -4,84 +4,84 @@ sessionsPerBrowser: 1
 browsers:
     MainDesktop:
         rootUrl: http://localhost.com:3000/
-        screenshotsDir: './gemini-screens/desktop'
+        screenshotsDir: './screenshots/main-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     MainMobile:
         rootUrl: http://localhost.com:3000/
-        screenshotsDir: './gemini-screens/mobile'
+        screenshotsDir: './screenshots/main-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     CcDesktop:
         rootUrl: http://cc.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cc-desktop'
+        screenshotsDir: './screenshots/cc-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     CcMobile:
         rootUrl: http://cc.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cc-mobile'
+        screenshotsDir: './screenshots/cc-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     CylandDesktop:
         rootUrl: http://cyland.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cyland-desktop'
+        screenshotsDir: './screenshots/cyland-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     CylandMobile:
         rootUrl: http://cyland.localhost.com:3000/
-        screenshotsDir: './gemini-screens/cyland-mobile'
+        screenshotsDir: './screenshots/cyland-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     IkonotvDesktop:
         rootUrl: http://ikonotv.localhost.com:3000/
-        screenshotsDir: './gemini-screens/ikonotv-desktop'
+        screenshotsDir: './screenshots/ikonotv-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     IkonotvMobile:
         rootUrl: http://ikonotv.localhost.com:3000/
-        screenshotsDir: './gemini-screens/ikonotv-mobile'
+        screenshotsDir: './screenshots/ikonotv-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     LumenusDesktop:
         rootUrl: http://lumenus.localhost.com:3000/
-        screenshotsDir: './gemini-screens/lumenus-desktop'
+        screenshotsDir: './screenshots/lumenus-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     LumenusMobile:
         rootUrl: http://lumenus.localhost.com:3000/
-        screenshotsDir: './gemini-screens/lumenus-mobile'
+        screenshotsDir: './screenshots/lumenus-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs
 
     23viviDesktop:
         rootUrl: http://23vivi.localhost.com:3000/
-        screenshotsDir: './gemini-screens/23vivi-desktop'
+        screenshotsDir: './screenshots/23vivi-desktop'
         windowSize: 1900x1080
         desiredCapabilities:
             browserName: phantomjs
 
     23viviMobile:
         rootUrl: http://23vivi.localhost.com:3000/
-        screenshotsDir: './gemini-screens/23vivi-mobile'
+        screenshotsDir: './screenshots/23vivi-mobile'
         windowSize: 600x1056
         desiredCapabilities:
             browserName: phantomjs

From 4e13376d5ff993a58968757426b1a155fb4beaed Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 14:52:05 +0100
Subject: [PATCH 166/197] Add route class names to prize app

---
 js/components/whitelabel/prize/portfolioreview/pr_app.js | 7 ++++++-
 js/components/whitelabel/prize/simple_prize/prize_app.js | 5 +++--
 js/components/whitelabel/wallet/wallet_app.js            | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index 9637c167..7e21d7c3 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import EventActions from '../../../../actions/event_actions';
 
@@ -63,6 +64,10 @@ let PRApp = React.createClass({
         const { currentUser } = this.state;
         const subdomain = getSubdomain();
 
+        // The second element of routes is always the active component object, where we can
+        // extract the path.
+        const path = routes[1] ? routes[1].path : null;
+
         let style = {};
         let header;
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
@@ -77,7 +82,7 @@ let PRApp = React.createClass({
         return (
             <div
                 style={style}
-                className={'ascribe-prize-app'}>
+                className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
                 <div className="container ascribe-body">
                     {/* Routes are injected here */}
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index e40e8dc8..da02a597 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import Hero from './components/prize_hero';
 
@@ -27,7 +28,7 @@ let PrizeApp = React.createClass({
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
-        let path = routes[1] ? routes[1].path : null;
+        const path = routes[1] ? routes[1].path : null;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
@@ -38,7 +39,7 @@ let PrizeApp = React.createClass({
         }
 
         return (
-            <div className="ascribe-prize-app">
+            <div className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
                 <div className="container ascribe-body">
                     {/* Routes are injected here */}
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 4735bdde..3940d89e 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -26,7 +26,7 @@ let WalletApp = React.createClass({
 
         // The second element of routes is always the active component object, where we can
         // extract the path.
-        let path = routes[1] ? routes[1].path : null;
+        const path = routes[1] ? routes[1].path : null;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute

From 83012200d168d7551e7b6eb51b0bc1d5f13171b8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 14:53:54 +0100
Subject: [PATCH 167/197] Separate Sluice styling away from SimplePrize styling

---
 sass/whitelabel/prize/index.scss              |   3 +-
 .../portfolioreview_custom_style.scss         |   2 +-
 .../simple_prize_custom_style.scss            | 189 +-----------------
 .../simple_prize/simple_prize_variables.scss  |   3 +
 .../prize/sluice/sluice_custom_style.scss     | 182 +++++++++++++++++
 5 files changed, 190 insertions(+), 189 deletions(-)
 create mode 100644 sass/whitelabel/prize/simple_prize/simple_prize_variables.scss
 create mode 100644 sass/whitelabel/prize/sluice/sluice_custom_style.scss

diff --git a/sass/whitelabel/prize/index.scss b/sass/whitelabel/prize/index.scss
index dfdcaebd..664fe7a1 100644
--- a/sass/whitelabel/prize/index.scss
+++ b/sass/whitelabel/prize/index.scss
@@ -1,9 +1,10 @@
+@import 'simple_prize/simple_prize_variables';
 @import 'simple_prize/simple_prize_custom_style';
+@import 'sluice/sluice_custom_style';
 @import 'portfolioreview/portfolioreview_custom_style';
 
 .ascribe-prize-app {
     border-radius: 0;
-    min-height: 100vh;
     padding-top: 70px;
     padding-bottom: 10px;
 }
diff --git a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
index 0759cf49..b0027bff 100644
--- a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
+++ b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
@@ -90,7 +90,7 @@ $pr--button-color: $pr--nav-fg-prim-color;
 
     .register-piece--info {
         text-align: center;
-        
+
         h1, h2 {
             font-variant: small-caps;
         }
diff --git a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
index 4cfb7c82..8c46d366 100644
--- a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
+++ b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
@@ -1,7 +1,3 @@
-$sluice--nav-bg-color: #fcfcfc;
-$sluice--nav-fg-prim-color: #1E1E1E;
-$sluice--button-color: $sluice--nav-fg-prim-color;
-
 .wp {
     height: 100%;
     max-width: 90%;
@@ -37,10 +33,10 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
 
 
 .rating-container {
-    color: lighten($sluice--nav-fg-prim-color, 80%) !important;
+    color: lighten($simple-prize--nav-fg-prim-color, 80%) !important;
     .rating-stars {
         width: 25px;
-        color: $sluice--nav-fg-prim-color !important;
+        color: $simple-prize--nav-fg-prim-color !important;
     }
 }
 
@@ -73,185 +69,4 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
 
 }
 
-.client--sluice {
-    .navbar-default {
-        background-color: $sluice--nav-bg-color;
-        box-shadow: none;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    }
-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
-        color: $sluice--nav-fg-prim-color;
-        background-color: $sluice--nav-bg-color;
-    }
-    .navbar-nav > li > a:hover {
-        color: lighten($sluice--nav-fg-prim-color, 40%);
-    }
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        color: $sluice--nav-fg-prim-color;
-        border-bottom-color: $sluice--nav-fg-prim-color;
-        background-color: $sluice--nav-bg-color;
-    }
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($sluice--nav-fg-prim-color, 40%);
-        background-color: $sluice--nav-bg-color;
-    }
-    .navbar-nav > .open > a,
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        color: lighten($sluice--nav-fg-prim-color, 40%);
-        background-color: $sluice--nav-bg-color;
-    }
-    .dropdown-menu {
-        background-color: $sluice--nav-bg-color;
-    }
 
-    .dropdown-menu > li > a {
-        color: $sluice--nav-fg-prim-color;
-    }
-
-    .navbar-toggle .icon-bar {
-        background-color: $sluice--nav-fg-prim-color;
-    }
-
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: $sluice--nav-bg-color;
-    }
-}
-
-.client--sluice .ascribe-footer {
-    display: none;
-}
-
-
-.client--sluice .icon-ascribe-search{
-    color: $sluice--button-color;
-}
-
-.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
-// disabled buttons
-.client--sluice {
-    .btn-default.disabled,
-    .btn-default.disabled:hover,
-    .btn-default.disabled:focus,
-    .btn-default.disabled.focus,
-    .btn-default.disabled:active,
-    .btn-default.disabled.active,
-    .btn-default[disabled],
-    .btn-default[disabled]:hover,
-    .btn-default[disabled]:focus,
-    .btn-default[disabled].focus,
-    .btn-default[disabled]:active,
-    .btn-default[disabled].active,
-    fieldset[disabled] .btn-default,
-    fieldset[disabled] .btn-default:hover,
-    fieldset[disabled] .btn-default:focus,
-    fieldset[disabled] .btn-default.focus,
-    fieldset[disabled] .btn-default:active,
-    fieldset[disabled] .btn-default.active {
-        background-color: darken($sluice--button-color, 20%);
-        border-color: darken($sluice--button-color, 20%);
-    }
-}
-
-// buttons!
-// thought of the day:
-// "every great atrocity is the result of people just following orders"
-.client--sluice {
-    .ascribe-piece-list-toolbar-filter-widget button {
-        color: $sluice--button-color !important;
-        background-color: transparent !important;
-        border-color: transparent !important;
-
-        &:hover,
-        &:active {
-            background-color: $sluice--button-color !important;
-            border-color: $sluice--button-color !important;
-            color: white !important;
-        }
-    }
-
-    .btn-wide,
-    .btn-default {
-        background-color: $sluice--button-color;
-        border-color: $sluice--button-color;
-
-        &:hover,
-        &:active,
-        &:focus,
-        &:active:hover,
-        &:active:focus,
-        &:active.focus,
-        &.active:hover,
-        &.active:focus,
-        &.active.focus {
-            background-color: lighten($sluice--button-color, 20%);
-            border-color: lighten($sluice--button-color, 20%);
-        }
-    }
-
-    .open > .btn-default.dropdown-toggle:hover,
-    .open > .btn-default.dropdown-toggle:focus,
-    .open > .btn-default.dropdown-toggle.focus,
-    .open > .btn-default.dropdown-toggle.dropdown-toggle {
-        background-color: darken($sluice--button-color, 20%);
-        border-color: darken($sluice--button-color, 20%);
-    }
-
-    .pager li > a, .pager li > span {
-        background-color: $sluice--button-color;
-        border-color: $sluice--button-color;
-    }
-
-    .pager li.disabled > a,
-    .pager li.disabled > span {
-        background-color: $sluice--button-color !important;
-        border-color: $sluice--button-color;
-    }
-}
-
-// spinner!
-.client--sluice {
-    .btn-spinner {
-        color: $sluice--button-color;
-    }
-    .spinner-circle {
-        border-color: $sluice--button-color;
-    }
-    .spinner-inner {
-        color: $sluice--button-color;
-        display: none;
-    }
-}
-
-// intercom stuff
-.client--sluice {
-    #intercom-container .intercom-launcher-button {
-        background-color: $sluice--button-color !important;;
-        border-color: $sluice--button-color !important;;
-    }
-}
-
-// notifications
-.client--sluice .ascribe-global-notification-success {
-    background-color: lighten($sluice--button-color, 50%);
-}
-
-// progress bar
-.client--sluice .ascribe-progress-bar > .progress-bar {
-    background-color: $sluice--button-color;
-}
-
-.client--sluice .acl-information-dropdown-list .title {
-    color: $sluice--button-color;
-}
\ No newline at end of file
diff --git a/sass/whitelabel/prize/simple_prize/simple_prize_variables.scss b/sass/whitelabel/prize/simple_prize/simple_prize_variables.scss
new file mode 100644
index 00000000..64ec5c9c
--- /dev/null
+++ b/sass/whitelabel/prize/simple_prize/simple_prize_variables.scss
@@ -0,0 +1,3 @@
+$simple-prize--nav-bg-color: #fcfcfc;
+$simple-prize--nav-fg-prim-color: #1E1E1E;
+$simple-prize--button-color: $simple-prize--nav-fg-prim-color;
diff --git a/sass/whitelabel/prize/sluice/sluice_custom_style.scss b/sass/whitelabel/prize/sluice/sluice_custom_style.scss
new file mode 100644
index 00000000..bcc4978c
--- /dev/null
+++ b/sass/whitelabel/prize/sluice/sluice_custom_style.scss
@@ -0,0 +1,182 @@
+.client--sluice {
+    .navbar-default {
+        background-color: $simple-prize--nav-bg-color;
+        box-shadow: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    .navbar-nav > li > a,
+    .navbar-nav > li > .active a {
+        color: $simple-prize--nav-fg-prim-color;
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .navbar-nav > li > a:hover {
+        color: lighten($simple-prize--nav-fg-prim-color, 40%);
+    }
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        color: $simple-prize--nav-fg-prim-color;
+        border-bottom-color: $simple-prize--nav-fg-prim-color;
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($simple-prize--nav-fg-prim-color, 40%);
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .navbar-nav > .open > a,
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus {
+        color: lighten($simple-prize--nav-fg-prim-color, 40%);
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .dropdown-menu {
+        background-color: $simple-prize--nav-bg-color;
+    }
+
+    .dropdown-menu > li > a {
+        color: $simple-prize--nav-fg-prim-color;
+    }
+
+    .navbar-toggle .icon-bar {
+        background-color: $simple-prize--nav-fg-prim-color;
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        background-color: $simple-prize--nav-bg-color;
+    }
+}
+
+.client--sluice .ascribe-footer {
+    display: none;
+}
+
+
+.client--sluice .icon-ascribe-search{
+    color: $simple-prize--button-color;
+}
+
+.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
+    display: none;
+}
+
+// disabled buttons
+.client--sluice {
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: darken($simple-prize--button-color, 20%);
+        border-color: darken($simple-prize--button-color, 20%);
+    }
+}
+
+// buttons!
+// thought of the day:
+// "every great atrocity is the result of people just following orders"
+.client--sluice {
+    .ascribe-piece-list-toolbar-filter-widget button {
+        color: $simple-prize--button-color !important;
+        background-color: transparent !important;
+        border-color: transparent !important;
+
+        &:hover,
+        &:active {
+            background-color: $simple-prize--button-color !important;
+            border-color: $simple-prize--button-color !important;
+            color: white !important;
+        }
+    }
+
+    .btn-wide,
+    .btn-default {
+        background-color: $simple-prize--button-color;
+        border-color: $simple-prize--button-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($simple-prize--button-color, 20%);
+            border-color: lighten($simple-prize--button-color, 20%);
+        }
+    }
+
+    .open > .btn-default.dropdown-toggle:hover,
+    .open > .btn-default.dropdown-toggle:focus,
+    .open > .btn-default.dropdown-toggle.focus,
+    .open > .btn-default.dropdown-toggle.dropdown-toggle {
+        background-color: darken($simple-prize--button-color, 20%);
+        border-color: darken($simple-prize--button-color, 20%);
+    }
+
+    .pager li > a, .pager li > span {
+        background-color: $simple-prize--button-color;
+        border-color: $simple-prize--button-color;
+    }
+
+    .pager li.disabled > a,
+    .pager li.disabled > span {
+        background-color: $simple-prize--button-color !important;
+        border-color: $simple-prize--button-color;
+    }
+}
+
+// spinner!
+.client--sluice {
+    .btn-spinner {
+        color: $simple-prize--button-color;
+    }
+    .spinner-circle {
+        border-color: $simple-prize--button-color;
+    }
+    .spinner-inner {
+        color: $simple-prize--button-color;
+        display: none;
+    }
+}
+
+// intercom stuff
+.client--sluice {
+    #intercom-container .intercom-launcher-button {
+        background-color: $simple-prize--button-color !important;;
+        border-color: $simple-prize--button-color !important;;
+    }
+}
+
+// notifications
+.client--sluice .ascribe-global-notification-success {
+    background-color: lighten($simple-prize--button-color, 50%);
+}
+
+// progress bar
+.client--sluice .ascribe-progress-bar > .progress-bar {
+    background-color: $simple-prize--button-color;
+}
+
+.client--sluice .acl-information-dropdown-list .title {
+    color: $simple-prize--button-color;
+}

From 764f81925be4128e25ac29f5501a80edb0bcc1e5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 14:48:44 +0100
Subject: [PATCH 168/197] Change `children` prop from react-router to only be a
 Element type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Judging by
https://github.com/rackt/react-router/blob/master/docs/API.md#children-1
and a few inspections in the code, as well as tests, the `children`
prop injected into routes can only ever be a single React Element
object.

This allows us to easily get the active route of a child (if there is
an active route) by querying the `children`’s route prop.
---
 js/components/app_base.js                     | 20 ++++++++++++-------
 js/components/ascribe_app.js                  | 11 ++++------
 .../prize/portfolioreview/pr_app.js           | 11 ++++------
 .../prize/simple_prize/prize_app.js           | 11 ++++------
 js/components/whitelabel/wallet/wallet_app.js | 11 ++++------
 js/routes.js                                  | 10 +++++-----
 6 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/js/components/app_base.js b/js/components/app_base.js
index 044b984c..4b5d460e 100644
--- a/js/components/app_base.js
+++ b/js/components/app_base.js
@@ -15,14 +15,10 @@ export default function AppBase(App) {
         displayName: 'AppBase',
 
         propTypes: {
+            children: React.PropTypes.element.isRequired,
             history: React.PropTypes.object.isRequired,
             location: React.PropTypes.object.isRequired,
-            routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-
-            children: React.PropTypes.oneOfType([
-                React.PropTypes.arrayOf(React.PropTypes.element),
-                React.PropTypes.element
-            ])
+            routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
         },
 
         mixins: [History],
@@ -42,10 +38,20 @@ export default function AppBase(App) {
         },
 
         render() {
+            const { children } = this.props;
+
+            // Get the currently active route of the app by using the injected route parameter
+            // on the currently active child route.
+            // Note that despite its name, this.props.children can only ever be a single
+            // React.PropTypes.element.
+            const activeRoute = children.props.route;
+
             return (
                 <div>
-                    <App {...this.props} />
                     <Footer />
+                    <App
+                        {...this.props}
+                        activeRoute={activeRoute} />
                     <GlobalNotification />
                     <div id="modal" className="container" />
                 </div>
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 8999246e..0e28aa97 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -8,16 +8,13 @@ import Header from './header';
 
 let AscribeApp = React.createClass({
     propTypes: {
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
     },
 
     render() {
-        const { children, routes } = this.props;
+        const { activeRoute, children, routes } = this.props;
 
         return (
             <div className="ascribe-default-app">
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index 7e21d7c3..04b985db 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -19,13 +19,10 @@ import { getCookie } from '../../../../utils/fetch_api_utils';
 
 let PRApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
     },
 
     getInitialState() {
@@ -60,7 +57,7 @@ let PRApp = React.createClass({
 
 
     render() {
-        const { children, history, routes } = this.props;
+        const { activeRoute, children, history, routes } = this.props;
         const { currentUser } = this.state;
         const subdomain = getSubdomain();
 
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index da02a597..d2a440dc 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -13,17 +13,14 @@ import { getSubdomain } from '../../../../utils/general_utils';
 
 let PrizeApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
     },
 
     render() {
-        const { children, history, routes } = this.props;
+        const { activeRoute, children, history, routes } = this.props;
         const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 3940d89e..7f30e203 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -11,17 +11,14 @@ import { getSubdomain } from '../../../utils/general_utils';
 
 let WalletApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
-        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
-
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
+        routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
     },
 
     render() {
-        const { children, history, routes } = this.props;
+        const { activeRoute, children, history, routes } = this.props;
         const subdomain = getSubdomain();
 
         // The second element of routes is always the active component object, where we can
diff --git a/js/routes.js b/js/routes.js
index 24df99c0..d7a1d0c4 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -6,7 +6,7 @@ import { Route } from 'react-router';
 import getPrizeRoutes from './components/whitelabel/prize/prize_routes';
 import getWalletRoutes from './components/whitelabel/wallet/wallet_routes';
 
-import App from './components/ascribe_app';
+import AscribeApp from './components/ascribe_app';
 
 import PieceList from './components/piece_list';
 import PieceContainer from './components/ascribe_detail/piece_container';
@@ -29,14 +29,14 @@ import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_ha
 
 
 const COMMON_ROUTES = (
-    <Route path='/' component={App}>
+    <Route path='/' component={AscribeApp}>
         <Route
             path='login'
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
         <Route
             path='register_piece'
             component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(RegisterPiece)}
-            headerTitle='+ NEW WORK'/>
+            headerTitle='+ NEW WORK' />
         <Route
             path='collection'
             component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
@@ -55,10 +55,10 @@ const COMMON_ROUTES = (
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
         <Route
             path='settings'
-            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
         <Route
             path='contract_settings'
-            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
         <Route path='coa_verify' component={CoaVerifyContainer} />
         <Route path='*' component={ErrorNotFoundPage} />
     </Route>

From e616576fa538ace8bf56f0eb6181ea7a054cc1d7 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 1 Feb 2016 14:49:48 +0100
Subject: [PATCH 169/197] Hide the footer if a route has the `hideFooter`
 attribute

---
 js/components/app_base.js                                | 2 --
 js/components/ascribe_app.js                             | 2 ++
 js/components/footer.js                                  | 8 ++++++--
 js/components/whitelabel/prize/portfolioreview/pr_app.js | 2 ++
 js/components/whitelabel/prize/simple_prize/prize_app.js | 2 ++
 js/components/whitelabel/wallet/wallet_app.js            | 2 ++
 6 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/js/components/app_base.js b/js/components/app_base.js
index 4b5d460e..de1aab71 100644
--- a/js/components/app_base.js
+++ b/js/components/app_base.js
@@ -4,7 +4,6 @@ import React from 'react';
 import classNames from 'classnames';
 import { History } from 'react-router';
 
-import Footer from './footer';
 import GlobalNotification from './global_notification';
 
 import AppConstants from '../constants/application_constants';
@@ -48,7 +47,6 @@ export default function AppBase(App) {
 
             return (
                 <div>
-                    <Footer />
                     <App
                         {...this.props}
                         activeRoute={activeRoute} />
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 0e28aa97..737a35f5 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -3,6 +3,7 @@
 import React from 'react';
 
 import AppBase from './app_base';
+import Footer from './footer';
 import Header from './header';
 
 
@@ -23,6 +24,7 @@ let AscribeApp = React.createClass({
                     {/* Routes are injected here */}
                     {children}
                 </div>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
diff --git a/js/components/footer.js b/js/components/footer.js
index f2e35dfc..3010da4d 100644
--- a/js/components/footer.js
+++ b/js/components/footer.js
@@ -5,8 +5,12 @@ import React from 'react';
 import { getLangText } from '../utils/lang_utils';
 
 let Footer = React.createClass({
+    propTypes: {
+        activeRoute: React.PropTypes.object.isRequired
+    },
+
     render() {
-        return (
+        return !this.props.activeRoute.hideFooter ? (
             <div className="ascribe-footer hidden-print">
                 <p className="ascribe-sub-sub-statement">
                   <br />
@@ -24,7 +28,7 @@ let Footer = React.createClass({
                     <a href="https://www.linkedin.com/company/4816284?trk=vsrp_companies_res_name&trkInfo=VSRPsearchId%3A122827941425632318075%2CVSRPtargetId%3A4816284%2CVSRPcmpt%3Aprimary" className="social social-linked-in" target="_blank"></a>
                 </p>
             </div>
-        );
+        ) : null;
     }
 });
 
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index 04b985db..c738c0bd 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -11,6 +11,7 @@ import UserActions from '../../../../actions/user_actions';
 import Hero from './components/pr_hero';
 
 import AppBase from '../../../app_base';
+import Footer from '../../../footer';
 import Header from '../../../header';
 
 import { getSubdomain } from '../../../../utils/general_utils';
@@ -85,6 +86,7 @@ let PRApp = React.createClass({
                     {/* Routes are injected here */}
                     {children}
                 </div>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index d2a440dc..e3f1e290 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import Hero from './components/prize_hero';
 
 import AppBase from '../../../app_base';
+import Footer from '../../../footer';
 import Header from '../../../header';
 
 import { getSubdomain } from '../../../../utils/general_utils';
@@ -42,6 +43,7 @@ let PrizeApp = React.createClass({
                     {/* Routes are injected here */}
                     {children}
                 </div>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 7f30e203..c7afaa01 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -4,6 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 import AppBase from '../../app_base';
+import Footer from '../../footer';
 import Header from '../../header';
 
 import { getSubdomain } from '../../../utils/general_utils';
@@ -43,6 +44,7 @@ let WalletApp = React.createClass({
                     {/* Routes are injected here */}
                     {children}
                 </div>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }

From 6f2424d1035f4a3a50f32cce8ba17ec6b71bdd01 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:32:00 +0100
Subject: [PATCH 170/197] Rebase remerge

---
 .../whitelabel/prize/prize_routes.js          |  90 +++++--
 js/components/whitelabel/wallet/wallet_app.js |   5 +-
 .../whitelabel/wallet/wallet_routes.js        | 241 +++++++++++++-----
 .../portfolioreview_custom_style.scss         |   1 -
 .../simple_prize_custom_style.scss            |   2 -
 .../wallet/23vivi/23vivi_custom_style.scss    |   5 +-
 .../whitelabel/wallet/cc/cc_custom_style.scss |  11 +-
 .../wallet/cyland/cyland_custom_style.scss    |   5 +-
 .../wallet/ikonotv/ikonotv_custom_style.scss  |  44 ++--
 sass/whitelabel/wallet/index.scss             |   1 -
 10 files changed, 269 insertions(+), 136 deletions(-)

diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index 5f80b30c..73608ae2 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -31,74 +31,116 @@ import { AuthPrizeRoleRedirect } from './portfolioreview/components/pr_routes/pr
 const ROUTES = {
     sluice: (
         <Route path='/' component={SPApp}>
-            <IndexRoute component={SPLanding} />
+            <IndexRoute
+                component={SPLanding}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPSignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPSignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPRegisterPiece)}
-                headerTitle='+ NEW WORK'/>
+                headerTitle='+ NEW WORK'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='COLLECTION'/>
-            <Route path='pieces/:pieceId' component={SluicePieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                headerTitle='COLLECTION'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={SluicePieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     portfolioreview: (
         <Route path='/' component={PRApp}>
-        <IndexRoute component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)}
+                hideFooter />
             <Route
                 path='register_piece'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PRRegisterPiece)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PRRegisterPiece)}
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='SUBMISSIONS'/>
+                headerTitle='SUBMISSIONS'
+                hideFooter />
             <Route
                 path='login'
                 component={ProxyHandler(
                     AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
                     AuthRedirect({to: '/register_piece', when: 'loggedIn'})
-                )(SPLoginContainer)} />
+                )(SPLoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
                 component={ProxyHandler(
                     AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
                     AuthRedirect({to: '/register_piece', when: 'loggedIn'})
-                )(SPSignupContainer)} />
+                )(SPSignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
                 component={ProxyHandler(
                     AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
                     AuthRedirect({to: '/register_piece', when: 'loggedIn'})
-                )(PasswordResetContainer)} />
+                )(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
-            <Route path='pieces/:pieceId' component={SPPieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={SPPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     )
 };
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index c7afaa01..10ebd2b3 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -28,8 +28,9 @@ let WalletApp = React.createClass({
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
-        if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
-            && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
+        if ((!path || history.isActive('/login') || history.isActive('/signup') ||
+            history.isActive('/contract_notifications')) &&
+            (['cyland', 'ikonotv', 'lumenus', '23vivi']).includes(subdomain)) {
             header = (<div className="hero" />);
         } else {
             header = (<Header routes={routes} />);
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index f1613ee5..bf2008c3 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -48,193 +48,302 @@ import WalletApp from './wallet_app';
 let ROUTES = {
     'cyland': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={CylandLanding} />
+            <IndexRoute
+                component={CylandLanding}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
                 headerTitle='COLLECTION'
-                disableOn='noPieces' />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='coa_verify' component={CoaVerifyContainer} />
-            <Route path='pieces/:pieceId' component={CylandPieceContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={CylandPieceContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     'cc': (
         <Route path='/' component={WalletApp}>
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CCRegisterPiece)}
-                headerTitle='+ NEW WORK' />
+                headerTitle='+ NEW WORK'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
                 headerTitle='COLLECTION'
-                disableOn='noPieces' />
-            <Route path='pieces/:pieceId' component={PieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='coa_verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={PieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     'ikonotv': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={IkonotvLanding} />
+            <IndexRoute
+                component={IkonotvLanding}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='request_loan'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SendContractAgreementForm)}
                 headerTitle='SEND NEW CONTRACT'
-                aclName='acl_create_contractagreement' />
+                aclName='acl_create_contractagreement'
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)}
                 headerTitle='COLLECTION'
-                disableOn='noPieces' />
+                disableOn='noPieces'
+                hideFooter />
             <Route
                 path='contract_notifications'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
-            <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='coa_verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)}
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={IkonotvPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                 hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     'lumenus': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LumenusLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LumenusLanding)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
                 headerTitle='COLLECTION'
-                disableOn='noPieces' />
-            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
-            <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='coa_verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={MarketPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={MarketEditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     '23vivi': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(Vivi23Landing)} />
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(Vivi23Landing)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
                 headerTitle='COLLECTION'
-                disableOn='noPieces' />
-            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
-            <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='coa_verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={MarketPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={MarketEditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     )
 };
diff --git a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
index b0027bff..385f4ed7 100644
--- a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
+++ b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
@@ -2,7 +2,6 @@ $pr--nav-fg-prim-color: black;
 $pr--button-color: $pr--nav-fg-prim-color;
 
 .client--portfolioreview {
-
     .btn-wide,
     .btn-default {
         background-color: $pr--button-color;
diff --git a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
index 8c46d366..e022f34e 100644
--- a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
+++ b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
@@ -68,5 +68,3 @@
     padding: 0.7em;
 
 }
-
-
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index 3e6e20cf..f09d9b13 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -13,6 +13,7 @@ $vivi23--highlight-color: #de2600;
     /** Landing page **/
     .route--landing {
         display: table;
+        min-height: 100vh;
 
         > .container {
             display: table-cell;
@@ -252,10 +253,6 @@ $vivi23--highlight-color: #de2600;
         display: none;
     }
 
-    .ascribe-footer {
-        display: none;
-    }
-
     .ascribe-accordion-list-table-toggle:hover {
         color: $vivi23--fg-color;
     }
diff --git a/sass/whitelabel/wallet/cc/cc_custom_style.scss b/sass/whitelabel/wallet/cc/cc_custom_style.scss
index 774f5b27..348fca1f 100644
--- a/sass/whitelabel/wallet/cc/cc_custom_style.scss
+++ b/sass/whitelabel/wallet/cc/cc_custom_style.scss
@@ -55,16 +55,11 @@ $cc--button-color: $cc--nav-fg-prim-color;
     }
 }
 
-.client--cc .ascribe-footer {
-    display: none;
-}
-
-
-.client--cc .icon-ascribe-search{
+.client--cc .icon-ascribe-search {
     color: $cc--button-color;
 }
 
-.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add{
+.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add {
     display: none;
 }
 
@@ -223,4 +218,4 @@ $cc--button-color: $cc--nav-fg-prim-color;
 
 .client--cc  .upload-button-wrapper > span {
     color: $cc--button-color;
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
index 549b2004..0a7226ac 100644
--- a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
+++ b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
@@ -56,10 +56,6 @@ $cyland--button-sec-color: #515151;
     }
 }
 
-.client--cyland .ascribe-footer {
-    display: none;
-}
-
 .client--cyland .icon-ascribe-search {
     color: $cyland--button-color;
 }
@@ -171,6 +167,7 @@ $cyland--button-sec-color: #515151;
 .client--cyland {
     .route--landing {
         display: table;
+        min-height: 100vh;
 
         > .container {
             display: table-cell;
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 8f330911..1d7a4461 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -108,24 +108,36 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 }
 
 
+.client--ikonotv {
+    .route--landing,
+    .route--login,
+    .route--signup {
+        background-color: $ikono--landing-bg-color;
+        min-height: 100vh;
+    }
+
+    .route--login,
+    .route--signup {
+        .ascribe-form-bordered {
+            border: none;
+        }
+    }
+}
+
 .client--ikonotv .route--landing {
-    background-color: $ikono--landing-bg-color;
     animation: color-loop 20s;
     -o-animation: color-loop 20s infinite;
     -ms-animation: color-loop 20s infinite;
     -moz-animation: color-loop 20s infinite;
     -webkit-animation: color-loop 20s infinite;
-    
+
     margin: 0;
     width: 100%;
     padding: 5em 1em;
 }
 
-
 .client--ikonotv .route--login,
 .client--ikonotv .route--signup {
-    background-color: $ikono--landing-bg-color;
-
     .btn-wide {
         display: block;
         margin: 50px auto 0;
@@ -209,27 +221,11 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 }
 
 
-.client--ikonotv {
-    .route--login,
-    .route--signup {
-        .ascribe-form-bordered {
-            border: none;
-        }
-    }
-}
-
-.client--ikonotv .ascribe-login-wrapper {
-}
-
-.client--ikonotv .ascribe-footer {
-    display: none;
-}
-
-.client--ikonotv .icon-ascribe-search{
+.client--ikonotv .icon-ascribe-search {
     color: $ikono--button-color;
 }
 
-.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add{
+.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add {
     display: none;
 }
 
@@ -560,4 +556,4 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 
 .client--ikonotv  .upload-button-wrapper > span {
     color: $ikono--button-color;
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss
index 647bb16c..f480ac8d 100644
--- a/sass/whitelabel/wallet/index.scss
+++ b/sass/whitelabel/wallet/index.scss
@@ -5,7 +5,6 @@
 
 .ascribe-wallet-app {
     border-radius: 0;
-    min-height: 100vh;
     padding-top: 70px;
     padding-bottom: 10px;
 }

From 8f2ace77af8da1ceecf80ce664d3572fcdb1857b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 3 Feb 2016 12:28:49 +0100
Subject: [PATCH 171/197] Use previous method from white labels to get the
 current active route

---
 js/components/app_base.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/js/components/app_base.js b/js/components/app_base.js
index de1aab71..c188e628 100644
--- a/js/components/app_base.js
+++ b/js/components/app_base.js
@@ -37,13 +37,11 @@ export default function AppBase(App) {
         },
 
         render() {
-            const { children } = this.props;
+            const { routes } = this.props;
 
-            // Get the currently active route of the app by using the injected route parameter
-            // on the currently active child route.
-            // Note that despite its name, this.props.children can only ever be a single
-            // React.PropTypes.element.
-            const activeRoute = children.props.route;
+            // The second element of the routes prop given to us by react-router is always the
+            // active second-level component object (ie. after App).
+            const activeRoute = routes[1];
 
             return (
                 <div>

From f1b677dbd16a5dc85331b148a2e4f5980048ab67 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 3 Feb 2016 12:38:34 +0100
Subject: [PATCH 172/197] Use the activeRoute prop to generate route classnames
 on whitelabels

---
 js/components/whitelabel/prize/portfolioreview/pr_app.js | 5 +----
 js/components/whitelabel/prize/simple_prize/prize_app.js | 5 +----
 js/components/whitelabel/wallet/wallet_app.js            | 5 +----
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index c738c0bd..73df2766 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -61,10 +61,7 @@ let PRApp = React.createClass({
         const { activeRoute, children, history, routes } = this.props;
         const { currentUser } = this.state;
         const subdomain = getSubdomain();
-
-        // The second element of routes is always the active component object, where we can
-        // extract the path.
-        const path = routes[1] ? routes[1].path : null;
+        const path = activeRoute && activeRoute.path;
 
         let style = {};
         let header;
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index e3f1e290..97ccb53c 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -23,10 +23,7 @@ let PrizeApp = React.createClass({
     render() {
         const { activeRoute, children, history, routes } = this.props;
         const subdomain = getSubdomain();
-
-        // The second element of routes is always the active component object, where we can
-        // extract the path.
-        const path = routes[1] ? routes[1].path : null;
+        const path = activeRoute && activeRoute.path;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 10ebd2b3..ec709ffc 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -21,10 +21,7 @@ let WalletApp = React.createClass({
     render() {
         const { activeRoute, children, history, routes } = this.props;
         const subdomain = getSubdomain();
-
-        // The second element of routes is always the active component object, where we can
-        // extract the path.
-        const path = routes[1] ? routes[1].path : null;
+        const path = activeRoute && activeRoute.path;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute

From 3bb1f65f38696562dbdff5d9aeb7a8c02f8358cb Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 13:40:40 +0100
Subject: [PATCH 173/197] Add whitespace for different npm test scripts

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 5e72b863..a40c19bb 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,10 @@
     "build": "gulp build --production",
     "start": "node server.js",
     "test": "npm run sauce-test",
+
     "sauce-test": "mocha ./test/integration/tests/",
     "tunnel": "node ./test/integration/tunnel.js",
+
     "vi-clean": "rm -rf ./gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update -c ./test/gemini/.gemini.yml",

From f12630dfad96674f7cc282f4f803fb0878745c93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 13:44:45 +0100
Subject: [PATCH 174/197] Add routes and styling for artcity.ascribe.io

---
 .../components/artcity/artcity_landing.js     |  78 ++++
 js/components/whitelabel/wallet/wallet_app.js |   2 +-
 .../whitelabel/wallet/wallet_routes.js        |  39 ++
 js/constants/application_constants.js         |   5 +
 .../wallet/artcity/artcity_custom_style.scss  | 381 ++++++++++++++++++
 sass/whitelabel/wallet/index.scss             |   1 +
 6 files changed, 505 insertions(+), 1 deletion(-)
 create mode 100644 js/components/whitelabel/wallet/components/artcity/artcity_landing.js
 create mode 100644 sass/whitelabel/wallet/artcity/artcity_custom_style.scss

diff --git a/js/components/whitelabel/wallet/components/artcity/artcity_landing.js b/js/components/whitelabel/wallet/components/artcity/artcity_landing.js
new file mode 100644
index 00000000..c3fbfca4
--- /dev/null
+++ b/js/components/whitelabel/wallet/components/artcity/artcity_landing.js
@@ -0,0 +1,78 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
+
+import WhitelabelActions from '../../../../../actions/whitelabel_actions';
+import WhitelabelStore from '../../../../../stores/whitelabel_store';
+
+import { getLangText } from '../../../../../utils/lang_utils';
+import { setDocumentTitle } from '../../../../../utils/dom_utils';
+
+
+let ArtcityLanding = React.createClass({
+    getInitialState() {
+        return WhitelabelStore.getState();
+    },
+
+    componentWillMount() {
+        setDocumentTitle('Artcity Marketplace');
+    },
+
+    componentDidMount() {
+        WhitelabelStore.listen(this.onChange);
+        WhitelabelActions.fetchWhitelabel();
+    },
+
+    componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper artcity-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row artcity-landing--header">
+                            <img className="artcity-landing--header-logo" src={this.state.whitelabel.logo} />
+                            <div>
+                                {getLangText('Artcity Marketplace is powered by') + ' '}
+                                <span className="icon-ascribe-logo" />
+                            </div>
+                        </div>
+                        <div className="row artcity-landing--content">
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Existing ascribe user?')}
+                                </p>
+                                <LinkContainer to="/login">
+                                    <Button>
+                                        {getLangText('Log in')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                            <div className="col-xs-6">
+                                <p>
+                                    {getLangText('Do you need an account?')}
+                                </p>
+                                <LinkContainer to="/signup">
+                                    <Button>
+                                        {getLangText('Sign up')}
+                                    </Button>
+                                </LinkContainer>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default ArtcityLanding;
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index 1740c999..86d2b7cb 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -32,7 +32,7 @@ let WalletApp = React.createClass({
 
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
         if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
-            && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline']).indexOf(subdomain) > -1) {
+            && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity']).indexOf(subdomain) > -1) {
             header = (<div className="hero"/>);
         } else {
             header = <Header routes={routes} />;
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index 963107bd..c205f3b3 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -42,6 +42,8 @@ import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
 
 import PollineLanding from './components/polline/polline_landing';
 
+import ArtcityLanding from './components/artcity/artcity_landing';
+
 import { ProxyHandler, AuthRedirect } from '../../../components/ascribe_routes/proxy_handler';
 
 import WalletApp from './wallet_app';
@@ -275,6 +277,43 @@ let ROUTES = {
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
+    ),
+    'artcity': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(ArtcityLanding)} />
+            <Route
+                path='login'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+            <Route
+                path='logout'
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+            <Route
+                path='signup'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+            <Route
+                path='password_reset'
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+            <Route
+                path='settings'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+            <Route
+                path='contract_settings'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+            <Route
+                path='register_piece'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
+                headerTitle='+ NEW WORK'
+                aclName='acl_wallet_submit' />
+            <Route
+                path='collection'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
+                headerTitle='COLLECTION'
+                disableOn='noPieces' />
+            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
+            <Route path='editions/:editionId' component={MarketEditionContainer} />
+            <Route path='verify' component={CoaVerifyContainer} />
+            <Route path='*' component={ErrorNotFoundPage} />
+        </Route>
     )
 };
 
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index dd27484b..b4fb7531 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -58,6 +58,11 @@ const constants = {
             'name': 'Polline Art',
             'type': 'wallet'
         },
+        {
+            'subdomain': 'artcity',
+            'name': 'Artcity',
+            'type': 'wallet'
+        },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',
diff --git a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
new file mode 100644
index 00000000..ac8811b7
--- /dev/null
+++ b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
@@ -0,0 +1,381 @@
+/** Sass cannot use a number as the first character of a variable, so we'll have to settle with artcity **/
+$artcity--fg-color: black;
+$artcity--bg-color: #FBFBFB;
+$artcity--nav-fg-prim-color: $artcity--fg-color;
+$artcity--nav-fg-sec-color: #3a3a3a;
+$artcity--nav-bg-color: $artcity--bg-color;
+$artcity--nav-highlight-color: #f8f8f8;
+$artcity--button-default-color: $artcity--fg-color;
+$artcity--highlight-color: #38BFC3;
+
+
+.client--artcity {
+    /** Landing page **/
+    .route--landing {
+        display: table;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .artcity-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+
+        .artcity-landing--header {
+            background-color: $artcity--bg-color;
+            border: 1px solid darken($artcity--bg-color, 20%);
+            color: $artcity--fg-color;
+            padding: 2em;
+
+            .artcity-landing--header-logo {
+                margin: 1em 0 2em 0;
+                height: 175px;
+            }
+        }
+
+        .artcity-landing--content {
+            background-color: $artcity--bg-color;
+            border: 1px solid darken($artcity--bg-color, 20%);
+            border-top: none;
+            padding: 2em;
+        }
+    }
+
+    /** Navbar **/
+    .navbar-default {
+        background-color: $artcity--bg-color;
+    
+        .navbar-brand .img-brand {
+            height: 115%;
+        }
+
+        .navbar-brand .icon-ascribe-logo {
+            color: $artcity--nav-fg-prim-color;
+            &:hover {
+                color: darken($artcity--nav-fg-prim-color, 20%);
+            }
+        }
+
+    }
+
+    .navbar-nav > li > a,
+    .navbar-nav > li > a:focus,
+    .navbar-nav > li > .active a,
+    .navbar-nav > li > .active a:focus {
+        color: $artcity--nav-fg-prim-color;
+    }
+
+    .navbar-nav > li > a:hover {
+        color: darken($artcity--nav-fg-prim-color, 20%);
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        background-color: $artcity--nav-bg-color;
+        border-bottom-color: $artcity--nav-fg-prim-color;
+        color: $artcity--nav-fg-prim-color;
+    }
+
+    .navbar-nav > .open > a,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > li > a {
+        color: $artcity--nav-fg-prim-color;
+        background-color: $artcity--nav-bg-color;
+    }
+
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus,
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($artcity--nav-fg-prim-color, 20%);
+        background-color: $artcity--nav-highlight-color;
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.collapse.in {
+        background-color: $artcity--nav-bg-color;
+
+        .navbar-nav > .open > a,
+        .navbar-nav > .active > a {
+            background-color: $artcity--nav-highlight-color;
+        }
+    }
+
+    .navbar-collapse.collapsing li a,
+    .navbar-collapse.collapse.in li a {
+        color: $artcity--nav-fg-prim-color;
+    }
+    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
+        color: lighten($artcity--nav-fg-prim-color, 20%);
+        background-color: $artcity--nav-highlight-color;
+    }
+
+    .navbar-toggle {
+        border-color: $artcity--highlight-color;
+
+        .icon-bar {
+            background-color: $artcity--highlight-color;
+        }
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        border-color: lighten($artcity--highlight-color, 10%);
+        background-color: $artcity--nav-fg-prim-color;
+
+        .icon-bar {
+            background-color: lighten($artcity--highlight-color, 10%);
+        }
+    }
+
+    .notification-menu {
+        .dropdown-menu {
+            background-color: $artcity--nav-bg-color;
+        }
+
+        .notification-header {
+            background-color: $artcity--nav-fg-sec-color;
+            border-top-width: 0;
+            color: $artcity--nav-bg-color;
+        }
+
+        .notification-action {
+            color: $artcity--highlight-color;
+        }
+    }
+
+    /** Buttons **/
+    // reset disabled button styling for btn-default
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: lighten($artcity--highlight-color, 30%);
+        border-color: lighten($artcity--highlight-color, 30%);
+    }
+
+    .btn-default {
+        background-color: $artcity--highlight-color;
+        border-color: $artcity--highlight-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($artcity--highlight-color, 30%);
+            border-color: lighten($artcity--highlight-color, 30%);
+        }
+    }
+
+    // disabled buttons
+    .btn-secondary.disabled,
+    .btn-secondary.disabled:hover,
+    .btn-secondary.disabled:focus,
+    .btn-secondary.disabled.focus,
+    .btn-secondary.disabled:active,
+    .btn-secondary.disabled.active,
+    .btn-secondary[disabled],
+    .btn-secondary[disabled]:hover,
+    .btn-secondary[disabled]:focus,
+    .btn-secondary[disabled].focus,
+    .btn-secondary[disabled]:active,
+    .btn-secondary[disabled].active,
+    fieldset[disabled] .btn-secondary,
+    fieldset[disabled] .btn-secondary:hover,
+    fieldset[disabled] .btn-secondary:focus,
+    fieldset[disabled] .btn-secondary.focus,
+    fieldset[disabled] .btn-secondary:active,
+    fieldset[disabled] .btn-secondary.active {
+        background-color: darken($artcity--bg-color, 20%);
+        border-color: $artcity--button-default-color;
+    }
+
+    .btn-secondary {
+        border-color: $artcity--button-default-color;
+        color: $artcity--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $artcity--button-default-color;
+            border-color: $artcity--button-default-color;
+            color: $artcity--bg-color;
+        }
+    }
+
+    .btn-tertiary {
+        &:hover,
+        &:active,
+        &ctive:hover,
+        &.active:hover{
+            background-color: $artcity--highlight-color;
+            border-color: $artcity--highlight-color;
+            color: $artcity--bg-color;
+        }
+    }
+
+    /** Other components **/
+    .ascribe-piece-list-toolbar .btn-ascribe-add {
+        display: none;
+    }
+
+    .ascribe-footer {
+        display: none;
+    }
+
+    .ascribe-accordion-list-table-toggle:hover {
+        color: $artcity--fg-color;
+    }
+
+    .request-action-badge {
+        color: $artcity--fg-color;
+    }
+
+    .acl-information-dropdown-list .title {
+        color: $artcity--fg-color;
+    }
+
+    // filter widget
+    .ascribe-piece-list-toolbar-filter-widget button {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: $artcity--button-default-color !important;
+
+        &:hover,
+        &:active {
+            background-color: $artcity--button-default-color !important;
+            border-color: $artcity--button-default-color !important;
+            color: $artcity--bg-color !important;
+        }
+    }
+
+    .icon-ascribe-search {
+        color: $artcity--fg-color;
+    }
+
+    // forms
+    .ascribe-property-wrapper:hover {
+        border-left-color: rgba($artcity--fg-color, 0.5);
+    }
+
+    .ascribe-property textarea,
+    .ascribe-property input,
+    .search-bar > .form-group > .input-group input {
+        &::-webkit-input-placeholder {
+            color: rgba($artcity--fg-color, 0.5);
+        }
+        &::-moz-placeholder {
+            color: rgba($artcity--fg-color, 0.5);
+        }
+        &:-ms-input-placeholder {
+            color: rgba($artcity--fg-color, 0.5);
+        }
+        &:-moz-placeholder {
+            color: rgba($artcity--fg-color, 0.5);
+        }
+    }
+
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > p,
+        > p > span,
+        > textarea {
+            color: $artcity--fg-color;
+        }
+    }
+
+    // global notification
+    .ascribe-global-notification-success {
+        background-color: lighten($artcity--fg-color, 20%);
+    }
+
+    // uploader progress
+    .ascribe-progress-bar > .progress-bar {
+        background-color: lighten($artcity--fg-color, 20%);
+    }
+
+    .ascribe-progress-bar span {
+        text-shadow: -1px 0 lighten($artcity--fg-color, 20%),
+                     0 1px lighten($artcity--fg-color, 20%),
+                     1px 0 lighten($artcity--fg-color, 20%),
+                     0 -1px lighten($artcity--fg-color, 20%);
+    }
+
+    .action-file.icon-ascribe-ok,
+    .action-file.icon-ascribe-ok:hover {
+        color: lighten($artcity--fg-color, 20%);
+    }
+
+    // spinner
+    .spinner-circle {
+        border-color: $artcity--fg-color;
+    }
+    .spinner-inner {
+        display: none;
+    }
+    .btn-secondary .spinner-circle {
+        border-color: $artcity--bg-color;
+    }
+
+    // video player
+    .ascribe-media-player .vjs-default-skin {
+        .vjs-play-progress,
+        .vjs-volume-level {
+            background-color: $artcity--highlight-color;
+        }
+    }
+
+    // pager
+    .pager li > a,
+    .pager li > span {
+        background-color: $artcity--fg-color;
+        border-color: $artcity--fg-color;
+    }
+    .pager .disabled > a,
+    .pager .disabled > span {
+        background-color: $artcity--fg-color !important;
+        border-color: $artcity--fg-color;
+    }
+
+    // intercom
+    #intercom-container .intercom-launcher-button {
+        background-color: $artcity--button-default-color !important;
+        border-color: $artcity--button-default-color !important;
+    }
+}
diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss
index 4e3d2a9a..3d739bce 100644
--- a/sass/whitelabel/wallet/index.scss
+++ b/sass/whitelabel/wallet/index.scss
@@ -3,6 +3,7 @@
 @import 'ikonotv/ikonotv_custom_style';
 @import '23vivi/23vivi_custom_style';
 @import 'polline/polline_custom_style';
+@import 'artcity/artcity_custom_style';
 
 .ascribe-wallet-app {
     border-radius: 0;

From 38aa567ab5b2915adc4378d34d8a449be8cdb13c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 13:50:56 +0100
Subject: [PATCH 175/197] Add artcity to README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index af64cc3c..424bbf5f 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
 127.0.0.1   portfolioreview.localhost.com
 127.0.0.1   23vivi.localhost.com
 127.0.0.1   polline.localhost.com
+127.0.0.1   artcity.localhost.com
 ```
 
 

From 0a17ec0414c2a1554001369c4d652359e7b76f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 14:45:46 +0100
Subject: [PATCH 176/197] Use whitelabel routes for wl-specific requests

---
 js/components/whitelabel/wallet/constants/wallet_api_urls.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/components/whitelabel/wallet/constants/wallet_api_urls.js b/js/components/whitelabel/wallet/constants/wallet_api_urls.js
index 8ad2eb81..48359949 100644
--- a/js/components/whitelabel/wallet/constants/wallet_api_urls.js
+++ b/js/components/whitelabel/wallet/constants/wallet_api_urls.js
@@ -17,7 +17,8 @@ function getWalletApiUrls(subdomain) {
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
-    } else if (subdomain === 'lumenus' || subdomain === '23vivi') {
+    } else if (subdomain === 'lumenus' || subdomain === '23vivi' ||
+               subdomain === 'polline' || subdomain === 'artcity') {
         return {
             'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
             'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',

From 88926998a8a11184fb45365b5243c5448aa9a61f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 14:45:46 +0100
Subject: [PATCH 177/197] Use whitelabel routes for wl-specific requests

---
 js/components/whitelabel/wallet/constants/wallet_api_urls.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/js/components/whitelabel/wallet/constants/wallet_api_urls.js b/js/components/whitelabel/wallet/constants/wallet_api_urls.js
index 8ad2eb81..48359949 100644
--- a/js/components/whitelabel/wallet/constants/wallet_api_urls.js
+++ b/js/components/whitelabel/wallet/constants/wallet_api_urls.js
@@ -17,7 +17,8 @@ function getWalletApiUrls(subdomain) {
             'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
-    } else if (subdomain === 'lumenus' || subdomain === '23vivi') {
+    } else if (subdomain === 'lumenus' || subdomain === '23vivi' ||
+               subdomain === 'polline' || subdomain === 'artcity') {
         return {
             'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
             'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',

From 9c073bb73bbb6a25477c0dacc168ad1ce395b09b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Thu, 4 Feb 2016 15:02:50 +0100
Subject: [PATCH 178/197] Fix typo in gemini test output for environment
 configuration

---
 test/gemini/tests/environment.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/gemini/tests/environment.js b/test/gemini/tests/environment.js
index 32f1c8ee..abc5e436 100644
--- a/test/gemini/tests/environment.js
+++ b/test/gemini/tests/environment.js
@@ -22,9 +22,9 @@ console.log(`Main piece: ${MAIN_PIECE_ID}`);
 console.log(`Main edition: ${MAIN_EDITION_ID}\n`);
 console.log('Timeouts:');
 console.log(`    Short: ${TIMEOUTS.SHORT}`);
-console.log(`    Normal: ${TIMEOUTS.NORMAL}\n`);
-console.log(`    Long: ${TIMEOUTS.LONG}\n`);
-console.log(`    Super super extra long: ${TIMEOUTS.SUPER_DUPER_EXTRA_LONG}\n`);
+console.log(`    Normal: ${TIMEOUTS.NORMAL}`);
+console.log(`    Long: ${TIMEOUTS.LONG}`);
+console.log(`    Super duper extra long: ${TIMEOUTS.SUPER_DUPER_EXTRA_LONG}\n`);
 console.log('========================================================\n');
 
 module.exports = {

From 135f9f453f79bd3fbf1e468c1ce68bd89d8a3b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 15:44:05 +0100
Subject: [PATCH 179/197] Cleanup styling for artcity.ascribe.io

---
 .../wallet/artcity/artcity_custom_style.scss  | 75 +++++++++++++------
 1 file changed, 54 insertions(+), 21 deletions(-)

diff --git a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
index ac8811b7..60c80683 100644
--- a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
+++ b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
@@ -7,6 +7,8 @@ $artcity--nav-bg-color: $artcity--bg-color;
 $artcity--nav-highlight-color: #f8f8f8;
 $artcity--button-default-color: $artcity--fg-color;
 $artcity--highlight-color: #38BFC3;
+$artcity--sec-highlight-color: #547A82;
+$artcity--ter-highlight-color: #EDEDF0;
 
 
 .client--artcity {
@@ -217,8 +219,8 @@ $artcity--highlight-color: #38BFC3;
     }
 
     .btn-secondary {
-        border-color: $artcity--button-default-color;
-        color: $artcity--button-default-color;
+        border-color: $artcity--highlight-color;
+        color: $artcity--sec-highlight-color;
 
         &:hover,
         &:active,
@@ -229,8 +231,8 @@ $artcity--highlight-color: #38BFC3;
         &.active:hover,
         &.active:focus,
         &.active.focus {
-            background-color: $artcity--button-default-color;
-            border-color: $artcity--button-default-color;
+            background-color: $artcity--highlight-color;
+            border-color: $artcity--bg-color;
             color: $artcity--bg-color;
         }
     }
@@ -238,7 +240,7 @@ $artcity--highlight-color: #38BFC3;
     .btn-tertiary {
         &:hover,
         &:active,
-        &ctive:hover,
+        &:active:hover,
         &.active:hover{
             background-color: $artcity--highlight-color;
             border-color: $artcity--highlight-color;
@@ -246,6 +248,14 @@ $artcity--highlight-color: #38BFC3;
         }
     }
 
+    .btn-transparent {
+        color: $artcity--highlight-color;
+
+        &:hover {
+            color: lighten($artcity--highlight-color, 20%)
+        }
+    }
+
     /** Other components **/
     .ascribe-piece-list-toolbar .btn-ascribe-add {
         display: none;
@@ -259,6 +269,10 @@ $artcity--highlight-color: #38BFC3;
         color: $artcity--fg-color;
     }
 
+    .ascribe-accordion-list-item-table tbody tr:hover {
+        border-left-color: $artcity--highlight-color;
+    }
+
     .request-action-badge {
         color: $artcity--fg-color;
     }
@@ -275,8 +289,8 @@ $artcity--highlight-color: #38BFC3;
 
         &:hover,
         &:active {
-            background-color: $artcity--button-default-color !important;
-            border-color: $artcity--button-default-color !important;
+            background-color: $artcity--highlight-color !important;
+            border-color: $artcity--highlight-color !important;
             color: $artcity--bg-color !important;
         }
     }
@@ -287,7 +301,7 @@ $artcity--highlight-color: #38BFC3;
 
     // forms
     .ascribe-property-wrapper:hover {
-        border-left-color: rgba($artcity--fg-color, 0.5);
+        border-left-color: rgba($artcity--highlight-color, 0.5);
     }
 
     .ascribe-property textarea,
@@ -322,35 +336,42 @@ $artcity--highlight-color: #38BFC3;
 
     // global notification
     .ascribe-global-notification-success {
-        background-color: lighten($artcity--fg-color, 20%);
+        background-color: lighten($artcity--highlight-color, 20%);
     }
 
     // uploader progress
     .ascribe-progress-bar > .progress-bar {
-        background-color: lighten($artcity--fg-color, 20%);
+        background-color: lighten($artcity--highlight-color, 20%);
     }
 
     .ascribe-progress-bar span {
-        text-shadow: -1px 0 lighten($artcity--fg-color, 20%),
-                     0 1px lighten($artcity--fg-color, 20%),
-                     1px 0 lighten($artcity--fg-color, 20%),
-                     0 -1px lighten($artcity--fg-color, 20%);
+        text-shadow: -1px 0 lighten($artcity--highlight-color, 20%),
+                     0 1px lighten($artcity--highlight-color, 20%),
+                     1px 0 lighten($artcity--highlight-color, 20%),
+                     0 -1px lighten($artcity--highlight-color, 20%);
     }
 
     .action-file.icon-ascribe-ok,
     .action-file.icon-ascribe-ok:hover {
-        color: lighten($artcity--fg-color, 20%);
+        color: lighten($artcity--highlight-color, 20%);
+    }
+
+    .action-file {
+        text-shadow: -1px 0 lighten($artcity--highlight-color, 20%),
+                     0 1px lighten($artcity--highlight-color, 20%),
+                     1px 0 lighten($artcity--highlight-color, 20%),
+                     0 -1px lighten($artcity--highlight-color, 20%);
     }
 
     // spinner
     .spinner-circle {
-        border-color: $artcity--fg-color;
+        border-color: $artcity--highlight-color;
     }
     .spinner-inner {
         display: none;
     }
     .btn-secondary .spinner-circle {
-        border-color: $artcity--bg-color;
+        border-color: $artcity--highlight-color;
     }
 
     // video player
@@ -364,13 +385,25 @@ $artcity--highlight-color: #38BFC3;
     // pager
     .pager li > a,
     .pager li > span {
-        background-color: $artcity--fg-color;
-        border-color: $artcity--fg-color;
+        background-color: $artcity--bg-color;
+        border-color: $artcity--highlight-color;
+        color: $artcity--sec-highlight-color;
+
+        &:hover {
+            background-color: $artcity--highlight-color;
+            border-color: $artcity--highlight-color;
+            color: $artcity--bg-color;
+        }
     }
     .pager .disabled > a,
     .pager .disabled > span {
-        background-color: $artcity--fg-color !important;
-        border-color: $artcity--fg-color;
+        background-color: $artcity--ter-highlight-color !important;
+        border-color: $artcity--ter-highlight-color;
+
+        &:hover {
+            color: $artcity--sec-highlight-color;
+            border-color: $artcity--ter-highlight-color;
+        }
     }
 
     // intercom

From ac2319f2310160ea2e1b1fe062a71df744be1748 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 15:53:16 +0100
Subject: [PATCH 180/197] Cleanup styles for polline.ascribe.io

---
 .../wallet/polline/polline_custom_style.scss         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss
index 4e912cb8..17cd4e68 100644
--- a/sass/whitelabel/wallet/polline/polline_custom_style.scss
+++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss
@@ -171,13 +171,13 @@ $polline--highlight-color: #2882fa;
     fieldset[disabled] .btn-default.focus,
     fieldset[disabled] .btn-default:active,
     fieldset[disabled] .btn-default.active {
-        background-color: lighten($polline--highlight-color, 30%);
-        border-color: lighten($polline--highlight-color, 30%);
+        background-color: lighten($polline--button-default-color, 30%);
+        border-color: lighten($polline--button-default-color, 30%);
     }
 
     .btn-default {
-        background-color: $polline--highlight-color;
-        border-color: $polline--highlight-color;
+        background-color: $polline--button-default-color;
+        border-color: $polline--button-default-color;
 
         &:hover,
         &:active,
@@ -188,8 +188,8 @@ $polline--highlight-color: #2882fa;
         &.active:hover,
         &.active:focus,
         &.active.focus {
-            background-color: lighten($polline--highlight-color, 30%);
-            border-color: lighten($polline--highlight-color, 30%);
+            background-color: lighten($polline--button-default-color, 30%);
+            border-color: lighten($polline--button-default-color, 30%);
         }
     }
 

From 1f783dbd840c524e2ba8b01c7d1b7d334b1509e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 15:57:05 +0100
Subject: [PATCH 181/197] Remove sass comment

---
 sass/whitelabel/wallet/artcity/artcity_custom_style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
index 60c80683..c68a3c02 100644
--- a/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
+++ b/sass/whitelabel/wallet/artcity/artcity_custom_style.scss
@@ -1,4 +1,3 @@
-/** Sass cannot use a number as the first character of a variable, so we'll have to settle with artcity **/
 $artcity--fg-color: black;
 $artcity--bg-color: #FBFBFB;
 $artcity--nav-fg-prim-color: $artcity--fg-color;

From c18b70f7649dbe512aed01680b755a306c28d59e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 4 Feb 2016 15:57:38 +0100
Subject: [PATCH 182/197] Remove sass comment

---
 sass/whitelabel/wallet/polline/polline_custom_style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/sass/whitelabel/wallet/polline/polline_custom_style.scss b/sass/whitelabel/wallet/polline/polline_custom_style.scss
index 17cd4e68..e3953492 100644
--- a/sass/whitelabel/wallet/polline/polline_custom_style.scss
+++ b/sass/whitelabel/wallet/polline/polline_custom_style.scss
@@ -1,4 +1,3 @@
-/** Sass cannot use a number as the first character of a variable, so we'll have to settle with polline **/
 $polline--fg-color: black;
 $polline--bg-color: white;
 $polline--nav-fg-prim-color: $polline--fg-color;

From 826ca080731c9fcbd3f9d72e61c585b65f661548 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 10:38:59 +0100
Subject: [PATCH 183/197] Merge with master

---
 .env-template                                 |   3 +
 .eslintrc                                     |   2 +-
 .gitignore                                    |  11 +-
 README.md                                     |  91 +++++--
 gulpfile.js                                   |   3 +-
 js/actions/contract_list_actions.js           |  16 +-
 js/actions/edition_actions.js                 |   6 +-
 js/actions/edition_list_actions.js            |  24 +-
 js/actions/facebook_actions.js                |  14 +
 js/actions/piece_actions.js                   |  19 +-
 js/actions/piece_list_actions.js              |   4 +-
 js/actions/prize_list_actions.js              |  34 ---
 js/app.js                                     |  86 +++---
 js/components/app_base.js                     |  90 ++++++
 js/components/app_route_wrapper.js            |   2 +-
 .../ascribe_accordion_list/accordion_list.js  |   7 +-
 .../accordion_list_item_edition_widget.js     |  12 +-
 .../accordion_list_item_table_editions.js     |  20 +-
 ...cordion_list_item_thumbnail_placeholder.js |   2 +-
 .../accordion_list_item_wallet.js             |  19 +-
 js/components/ascribe_app.js                  |  56 +---
 .../ascribe_buttons/acls/acl_button.js        |   2 +-
 .../ascribe_buttons/create_editions_button.js |  34 +--
 js/components/ascribe_detail/edition.js       |   2 +-
 .../ascribe_detail/edition_action_panel.js    |   7 +-
 .../ascribe_detail/edition_container.js       |  27 +-
 .../ascribe_detail/further_details.js         |  55 ++--
 .../further_details_fileuploader.js           |  22 +-
 .../ascribe_detail/media_container.js         |  20 +-
 js/components/ascribe_detail/piece.js         |   2 +-
 .../ascribe_detail/piece_container.js         |  79 +++---
 .../ascribe_forms/create_editions_form.js     |   7 +-
 js/components/ascribe_forms/form.js           |  15 +-
 js/components/ascribe_forms/form_consign.js   |   3 +-
 .../form_copyright_association.js             |   5 +-
 .../ascribe_forms/form_create_contract.js     |  19 +-
 js/components/ascribe_forms/form_loan.js      |   5 +-
 .../ascribe_forms/form_piece_extradata.js     |  39 +--
 .../ascribe_forms/form_register_piece.js      |  20 +-
 .../form_send_contract_agreement.js           |   3 +-
 js/components/ascribe_forms/form_signup.js    |   3 +-
 .../ascribe_forms/form_submit_to_prize.js     |   3 +-
 .../input_contract_agreement_checkbox.js      |   2 +-
 js/components/ascribe_forms/input_date.js     |  31 ++-
 .../ascribe_forms/input_fineuploader.js       |   6 +-
 .../ascribe_forms/input_textarea_toggable.js  |  41 +--
 js/components/ascribe_forms/property.js       |  12 +-
 js/components/ascribe_modal/modal_wrapper.js  |  41 ++-
 .../piece_list_toolbar_filter_widget.js       |   1 +
 .../piece_list_toolbar_order_widget.js        |   7 +-
 .../ascribe_settings/account_settings.js      |   5 +-
 .../ascribe_settings/contract_settings.js     |  32 +--
 .../contract_settings_update_button.js        | 115 ++++----
 .../ascribe_settings/webhook_settings.js      |  37 +--
 .../facebook_share_button.js                  |  50 ++--
 .../file_drag_and_drop_preview.js             |  17 +-
 .../file_drag_and_drop_preview_other.js       |  19 +-
 .../ascribe_upload_button/upload_button.js    |  47 ++--
 .../react_s3_fine_uploader.js                 | 224 +++++++--------
 js/components/coa_verify_container.js         |  82 +++---
 js/components/error_not_found_page.js         |  14 +
 js/components/footer.js                       |   8 +-
 js/components/global_action.js                |  43 ---
 js/components/header.js                       |  33 ++-
 js/components/header_notification.js          |   1 +
 js/components/nav_routes_links.js             |  73 +++--
 js/components/nav_routes_links_link.js        |  32 ++-
 js/components/piece_list.js                   |  46 +++-
 js/components/register_piece.js               |  16 +-
 .../pr_forms/pr_register_piece_form.js        |  46 ++--
 .../prize/portfolioreview/pr_app.js           |  78 ++----
 .../whitelabel/prize/prize_routes.js          |  90 ++++--
 .../accordion_list_item_prize.js              |  10 +-
 .../ascribe_detail/prize_piece_container.js   | 167 ++++++------
 .../components/prize_piece_list.js            |   7 +-
 .../components/prize_register_piece.js        |   3 +-
 .../prize/simple_prize/prize_app.js           |  62 +----
 .../simple_prize/stores/prize_rating_store.js |  26 +-
 .../sluice_selected_prize_action_button.js    |   2 +-
 ...cordion_list_item_thumbnail_placeholder.js |   2 +-
 .../components/23vivi/23vivi_landing.js       |   2 +-
 .../components/23vivi/23vivi_piece_list.js    |   2 +-
 .../cyland_accordion_list_item.js             |   5 +-
 .../cyland_detail/cyland_piece_container.js   |  35 ++-
 .../cyland_additional_data_form.js            |  71 ++---
 .../components/cyland/cyland_landing.js       |   2 +-
 .../components/cyland/cyland_piece_list.js    |  40 ++-
 .../cyland/cyland_register_piece.js           |  49 ++--
 .../ikonotv_accordion_list_item.js            |   5 +-
 .../ikonotv/ikonotv_contract_notifications.js |   2 +-
 .../ikonotv_detail/ikonotv_piece_container.js |  34 +--
 .../ikonotv_artist_details_form.js            |  56 ++--
 .../ikonotv_artwork_details_form.js           |  64 +++--
 .../components/ikonotv/ikonotv_piece_list.js  |  22 +-
 .../ikonotv/ikonotv_register_piece.js         |  63 ++---
 .../market_buttons/market_submit_button.js    |  54 ++--
 .../market_detail/market_further_details.js   |   6 +-
 .../market_additional_data_form.js            | 157 ++++++-----
 .../components/market/market_piece_list.js    |  11 +-
 .../market/market_register_piece.js           |  67 +++--
 js/components/whitelabel/wallet/wallet_app.js |  84 ++----
 .../whitelabel/wallet/wallet_routes.js        | 246 ++++++++++++-----
 js/constants/api_urls.js                      |   3 +-
 js/constants/application_constants.js         |  33 +--
 js/constants/uploader_constants.js            |  32 +++
 js/fetchers/edition_list_fetcher.js           |   6 +-
 js/fetchers/ownership_fetcher.js              |  14 +-
 js/fetchers/piece_fetcher.js                  |  15 -
 js/fetchers/piece_list_fetcher.js             |   6 +-
 js/fetchers/prize_list_fetcher.js             |  12 -
 js/history.js                                 |   8 +-
 js/routes.js                                  |  25 +-
 js/sources/NAMING_CONVENTIONS.md              |  10 +-
 js/sources/coa_source.js                      |  11 +-
 js/sources/edition_source.js                  |   6 +-
 js/sources/piece_source.js                    |  19 ++
 js/sources/user_source.js                     |  11 +-
 js/sources/webhook_source.js                  |  25 +-
 js/sources/whitelabel_source.js               |  13 +-
 js/stores/edition_list_store.js               | 123 +++++----
 js/stores/edition_store.js                    |  62 +++--
 js/stores/piece_list_store.js                 |  17 +-
 js/stores/piece_store.js                      |  59 +++-
 js/stores/prize_list_store.js                 |  20 --
 js/stores/user_store.js                       |  16 +-
 js/stores/webhook_store.js                    |  53 ++--
 js/stores/whitelabel_store.js                 |  14 +-
 js/third_party/{debug.js => debug_handler.js} |   1 -
 .../{facebook.js => facebook_handler.js}      |  17 +-
 js/third_party/{ga.js => ga_handler.js}       |   0
 .../{intercom.js => intercom_handler.js}      |   0
 ...ifications.js => notifications_handler.js} |   0
 js/third_party/{raven.js => raven_handler.js} |   0
 js/utils/constants_utils.js                   |  14 +-
 js/utils/dom_utils.js                         |  82 +++++-
 js/utils/error_utils.js                       |  13 +-
 js/utils/file_utils.js                        |   4 +-
 js/utils/regex_utils.js                       |  55 +++-
 js/utils/url_utils.js                         |   2 +-
 package.json                                  |  36 ++-
 phantomjs/launch_app_and_login.js             |  62 +++++
 sass/ascribe_custom_style.scss                |   4 +-
 sass/ascribe_global_notification.scss         |  60 ++--
 sass/ascribe_property.scss                    |   8 +-
 sass/ascribe_social_share.scss                |   4 +
 sass/ascribe_textarea.scss                    |   2 +-
 sass/ascribe_uploader.scss                    |  47 ++--
 sass/ascribe_variables.scss                   |   1 +
 sass/whitelabel/prize/index.scss              |   3 +-
 .../portfolioreview_custom_style.scss         |   3 +-
 .../simple_prize_custom_style.scss            | 191 +------------
 .../simple_prize/simple_prize_variables.scss  |   3 +
 .../prize/sluice/sluice_custom_style.scss     | 182 +++++++++++++
 .../wallet/23vivi/23vivi_custom_style.scss    |  12 +-
 .../whitelabel/wallet/cc/cc_custom_style.scss |  11 +-
 .../wallet/cyland/cyland_custom_style.scss    |  10 +-
 .../wallet/ikonotv/ikonotv_custom_style.scss  |  44 ++-
 sass/whitelabel/wallet/index.scss             |   1 -
 test/.eslintrc                                |  36 +++
 test/gemini/.gemini.yml                       | 133 +++++++++
 test/gemini/README.md                         | 208 ++++++++++++++
 test/gemini/tests/environment.js              |  35 +++
 test/gemini/tests/main/authenticated.js       | 218 +++++++++++++++
 test/gemini/tests/main/basic.js               | 148 ++++++++++
 test/gemini/tests/main/detail.js              | 134 +++++++++
 test/gemini/tests/whitelabel/23vivi/23vivi.js |  29 ++
 test/gemini/tests/whitelabel/cyland/cyland.js |  30 ++
 .../tests/whitelabel/ikonotv/ikonotv.js       |  98 +++++++
 .../tests/whitelabel/lumenus/lumenus.js       |  29 ++
 .../whitelabel/shared/whitelabel_basic.js     | 115 ++++++++
 test/integration/README.md                    | 256 ++++++++++++++++++
 test/integration/config.js                    |  18 ++
 test/integration/setup.js                     |  50 ++++
 test/integration/tests/test-login.js          |  50 ++++
 test/integration/tunnel.js                    |  23 ++
 175 files changed, 4418 insertions(+), 2175 deletions(-)
 create mode 100644 .env-template
 create mode 100644 js/actions/facebook_actions.js
 delete mode 100644 js/actions/prize_list_actions.js
 create mode 100644 js/components/app_base.js
 delete mode 100644 js/components/global_action.js
 create mode 100644 js/constants/uploader_constants.js
 delete mode 100644 js/fetchers/piece_fetcher.js
 delete mode 100644 js/fetchers/prize_list_fetcher.js
 create mode 100644 js/sources/piece_source.js
 delete mode 100644 js/stores/prize_list_store.js
 rename js/third_party/{debug.js => debug_handler.js} (99%)
 rename js/third_party/{facebook.js => facebook_handler.js} (67%)
 rename js/third_party/{ga.js => ga_handler.js} (100%)
 rename js/third_party/{intercom.js => intercom_handler.js} (100%)
 rename js/third_party/{notifications.js => notifications_handler.js} (100%)
 rename js/third_party/{raven.js => raven_handler.js} (100%)
 create mode 100644 phantomjs/launch_app_and_login.js
 create mode 100644 sass/whitelabel/prize/simple_prize/simple_prize_variables.scss
 create mode 100644 sass/whitelabel/prize/sluice/sluice_custom_style.scss
 create mode 100644 test/.eslintrc
 create mode 100644 test/gemini/.gemini.yml
 create mode 100644 test/gemini/README.md
 create mode 100644 test/gemini/tests/environment.js
 create mode 100644 test/gemini/tests/main/authenticated.js
 create mode 100644 test/gemini/tests/main/basic.js
 create mode 100644 test/gemini/tests/main/detail.js
 create mode 100644 test/gemini/tests/whitelabel/23vivi/23vivi.js
 create mode 100644 test/gemini/tests/whitelabel/cyland/cyland.js
 create mode 100644 test/gemini/tests/whitelabel/ikonotv/ikonotv.js
 create mode 100644 test/gemini/tests/whitelabel/lumenus/lumenus.js
 create mode 100644 test/gemini/tests/whitelabel/shared/whitelabel_basic.js
 create mode 100644 test/integration/README.md
 create mode 100644 test/integration/config.js
 create mode 100644 test/integration/setup.js
 create mode 100644 test/integration/tests/test-login.js
 create mode 100644 test/integration/tunnel.js

diff --git a/.env-template b/.env-template
new file mode 100644
index 00000000..8c4fe11c
--- /dev/null
+++ b/.env-template
@@ -0,0 +1,3 @@
+SAUCE_USERNAME=ascribe
+SAUCE_ACCESS_KEY=
+SAUCE_DEFAULT_URL=
diff --git a/.eslintrc b/.eslintrc
index d41c0a2a..5751f3ad 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,7 +2,7 @@
     "parser": "babel-eslint",
     "env": {
         "browser": true,
-        "es6": true
+        "es6": true,
     },
     "rules": {
         "new-cap": [2, {newIsCap: true, capIsNew: false}],
diff --git a/.gitignore b/.gitignore
index 30c9eae9..e497465f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,9 +16,14 @@ webapp-dependencies.txt
 pids
 logs
 results
- 
+
+build/*
+
+gemini-coverage/*
+gemini-report/*
+test/gemini/screenshots/*
+
 node_modules/*
 
-build
-
 .DS_Store
+.env
diff --git a/README.md b/README.md
index e07eca0d..8dcf78ad 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,19 @@
 Introduction
 ============
 
-Onion is the web client for Ascribe. The idea is to have a well documented,
-easy to test, easy to hack, JavaScript application.
+Onion is the web client for Ascribe. The idea is to have a well documented, modern, easy to test, easy to hack, JavaScript application.
 
-The code is JavaScript ECMA 6.
+The code is JavaScript 2015 / ECMAScript 6.
 
 
 Getting started
 ===============
+
 Install some nice extension for Chrom(e|ium):
 
 - [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
-  
+- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
+
 ```bash
 git clone git@github.com:ascribe/onion.git
 cd onion
@@ -37,43 +38,62 @@ Additionally, to work on the white labeling functionality, you need to edit your
 
 JavaScript Code Conventions
 ===========================
+
 For this project, we're using:
 
 * 4 Spaces
-* We use ES6
+* ES6
 * We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding ([Blog post about it](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
 * We don't use camel case for file naming but in everything Javascript related
-* We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword) 
-* We don't use Javascript's `Date` object, as its interface introduced bugs previously and we're including `momentjs` for other dependencies anyways
+* We use `momentjs` instead of Javascript's `Date` object, as the native `Date` interface previously introduced bugs and we're including `momentjs` for other dependencies anyway
 
-Branch names
-=====================
-Since we moved to Github, we cannot create branch names automatically with JIRA anymore.
-To not lose context, but still be able to switch branches quickly using a ticket's number, we're recommending the following rules when naming our branches in onion.
+Make sure to check out the [style guide](https://github.com/ascribe/javascript).
 
-```
-AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
-```
+Linting
+-------
 
-where `brief-and-sane-description-of-the-ticket` does not need to equal to the ticket's title.
-This allows JIRA to still track branches and pull-requests while allowing us to keep our peace of mind.
+We use [ESLint](https://github.com/eslint/eslint) with our own [custom ruleset](.eslintrc).
 
-Example
--------------
-**JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
-
-**Github branch name:** `AD-1242-caching-solution-for-stores`
 
 SCSS Code Conventions
 =====================
+
 Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
 
 Some interesting links:
 * [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
 
 
+Branch names
+============
+
+To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches:
+
+```
+// For issues logged in Github:
+AG-<Github-issue-id>-brief-and-sane-description-of-the-ticket
+
+// For issues logged in JIRA:
+AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
+```
+
+where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title.
+
+
+Example
+-------
+
+**JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
+
+**Github branch name:** `AD-1242-caching-solution-for-stores`
+
+
 Testing
-===============
+=======
+
+Unit Testing
+------------
+
 We're using Facebook's jest to do testing as it integrates nicely with react.js as well.
 
 Tests are always created per directory by creating a `__tests__` folder. To test a specific file, a `<file_name>_tests.js` file needs to be created.
@@ -83,7 +103,24 @@ This is due to the fact that jest's function mocking and ES6 module syntax are [
 
 Therefore, to require a module in your test file, you need to use CommonJS's `require` syntax. Except for this, all tests can be written in ES6 syntax.
 
-## Workflow
+Visual Regression Testing
+-------------------------
+
+We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports both PhantomJS2 and SauceLabs.
+
+See the [helper docs](test/gemini/README.md) for information on installing Gemini, its dependencies, and running and writing tests.
+
+Integration Testing
+-------------------
+
+We're using [Sauce Labs](https://saucelabs.com/home) with [WD.js](https://github.com/admc/wd) for integration testing across browser grids with Selenium.
+
+See the [helper docs](test/integration/README.md) for information on each part of the test stack and how to run and write tests.
+
+
+Workflow
+========
+
 Generally, when you're runing `gulp serve`, all tests are being run.
 If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run `gulp jest:watch`.
 
@@ -134,9 +171,16 @@ A: Easily by starting the your gulp process with the following command:
 ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
 ```
 
+Or, by adding these two your environment variables:
+```
+ONION_BASE_URL='/'
+ONION_SERVER_URL='http://localhost.com:8000/'
+```
+
 Q: I want to know all dependencies that get bundled into the live build.
 A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
 
+
 Reading list
 ============
 
@@ -149,7 +193,6 @@ Start here
 - [alt.js](http://alt.js.org/)
 - [alt.js readme](https://github.com/goatslacker/alt)
 
-
 Moar stuff
 ----------
 
diff --git a/gulpfile.js b/gulpfile.js
index f13945b0..afa0d5a9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -97,7 +97,8 @@ gulp.task('browser-sync', function() {
         proxy: 'http://localhost:4000',
         port: 3000,
         open: false, // does not open the browser-window anymore (handled manually)
-        ghostMode: false
+        ghostMode: false,
+        notify: false // stop showing the browsersync pop up
     });
 });
 
diff --git a/js/actions/contract_list_actions.js b/js/actions/contract_list_actions.js
index 1c5c0913..d368ac73 100644
--- a/js/actions/contract_list_actions.js
+++ b/js/actions/contract_list_actions.js
@@ -28,12 +28,10 @@ class ContractListActions {
     }
 
 
-    changeContract(contract){
+    changeContract(contract) {
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.changeContract(contract)
-                .then((res) => {
-                    resolve(res);
-                })
+                .then(resolve)
                 .catch((err)=> {
                     console.logGlobal(err);
                     reject(err);
@@ -41,13 +39,11 @@ class ContractListActions {
         });
     }
 
-    removeContract(contractId){
-        return Q.Promise( (resolve, reject) => {
+    removeContract(contractId) {
+        return Q.Promise((resolve, reject) => {
             OwnershipFetcher.deleteContract(contractId)
-                .then((res) => {
-                    resolve(res);
-                })
-                .catch( (err) => {
+                .then(resolve)
+                .catch((err) => {
                     console.logGlobal(err);
                     reject(err);
                 });
diff --git a/js/actions/edition_actions.js b/js/actions/edition_actions.js
index 1727deff..1feee0dd 100644
--- a/js/actions/edition_actions.js
+++ b/js/actions/edition_actions.js
@@ -7,11 +7,11 @@ class EditionActions {
     constructor() {
         this.generateActions(
             'fetchEdition',
-            'successFetchEdition',
             'successFetchCoa',
-            'flushEdition',
+            'successFetchEdition',
             'errorCoa',
-            'errorEdition'
+            'errorEdition',
+            'flushEdition'
         );
     }
 }
diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js
index 6f9881ee..9474a418 100644
--- a/js/actions/edition_list_actions.js
+++ b/js/actions/edition_list_actions.js
@@ -17,23 +17,31 @@ class EditionListActions {
         );
     }
 
-    fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
-        if((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
+    fetchEditionList({ pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition }) {
+        if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
             orderBy = 'edition_number';
             orderAsc = true;
         }
 
         // Taken from: http://stackoverflow.com/a/519157/1263876
-        if((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) {
+        if ((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) {
             page = 1;
             pageSize = 10;
         }
 
+        let itemsToFetch = pageSize;
+        // If we only want to fetch up to a specified edition, fetch all pages up to it
+        // as one page and adjust afterwards
+        if (typeof maxEdition === 'number') {
+            itemsToFetch = Math.ceil(maxEdition / pageSize) * pageSize;
+            page = 1;
+        }
+
         return Q.Promise((resolve, reject) => {
             EditionListFetcher
-                .fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy)
+                .fetch({ pieceId, page, orderBy, orderAsc, filterBy, pageSize: itemsToFetch })
                 .then((res) => {
-                    if(res && !res.editions) {
+                    if (res && !res.editions) {
                         throw new Error('Piece has no editions to fetch.');
                     }
 
@@ -44,8 +52,9 @@ class EditionListActions {
                         orderBy,
                         orderAsc,
                         filterBy,
-                        'editionListOfPiece': res.editions,
-                        'count': res.count
+                        maxEdition,
+                        count: res.count,
+                        editionListOfPiece: res.editions
                     });
                     resolve(res);
                 })
@@ -54,7 +63,6 @@ class EditionListActions {
                     reject(err);
                 });
         });
-        
     }
 }
 
diff --git a/js/actions/facebook_actions.js b/js/actions/facebook_actions.js
new file mode 100644
index 00000000..2e784fba
--- /dev/null
+++ b/js/actions/facebook_actions.js
@@ -0,0 +1,14 @@
+'use strict';
+
+import { altThirdParty } from '../alt';
+
+
+class FacebookActions {
+    constructor() {
+        this.generateActions(
+            'sdkReady'
+        );
+    }
+}
+
+export default altThirdParty.createActions(FacebookActions);
diff --git a/js/actions/piece_actions.js b/js/actions/piece_actions.js
index 9002e8c5..7ad3ae29 100644
--- a/js/actions/piece_actions.js
+++ b/js/actions/piece_actions.js
@@ -1,28 +1,19 @@
 'use strict';
 
 import { alt } from '../alt';
-import PieceFetcher from '../fetchers/piece_fetcher';
 
 
 class PieceActions {
     constructor() {
         this.generateActions(
+            'fetchPiece',
+            'successFetchPiece',
+            'errorPiece',
+            'flushPiece',
             'updatePiece',
-            'updateProperty',
-            'pieceFailed'
+            'updateProperty'
         );
     }
-
-    fetchOne(pieceId) {
-        PieceFetcher.fetchOne(pieceId)
-            .then((res) => {
-                this.actions.updatePiece(res.piece);
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-                this.actions.pieceFailed(err.json);
-            });
-    }
 }
 
 export default alt.createActions(PieceActions);
diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js
index 7ef9cb59..c52ef5e2 100644
--- a/js/actions/piece_list_actions.js
+++ b/js/actions/piece_list_actions.js
@@ -15,7 +15,7 @@ class PieceListActions {
         );
     }
 
-    fetchPieceList(page, pageSize, search, orderBy, orderAsc, filterBy) {
+    fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
         // To prevent flickering on a pagination request,
         // we overwrite the piecelist with an empty list before
         // pieceListCount === -1 defines the loading state
@@ -34,7 +34,7 @@ class PieceListActions {
         // afterwards, we can load the list
         return Q.Promise((resolve, reject) => {
             PieceListFetcher
-                .fetch(page, pageSize, search, orderBy, orderAsc, filterBy)
+                .fetch({ page, pageSize, search, orderBy, orderAsc, filterBy })
                 .then((res) => {
                     this.actions.updatePieceList({
                         page,
diff --git a/js/actions/prize_list_actions.js b/js/actions/prize_list_actions.js
deleted file mode 100644
index da2f97df..00000000
--- a/js/actions/prize_list_actions.js
+++ /dev/null
@@ -1,34 +0,0 @@
-'use strict';
-
-import { alt } from '../alt';
-import Q from 'q';
-
-import PrizeListFetcher from '../fetchers/prize_list_fetcher';
-
-class PrizeListActions {
-    constructor() {
-        this.generateActions(
-            'updatePrizeList'
-        );
-    }
-
-    fetchPrizeList() {
-        return Q.Promise((resolve, reject) => {
-            PrizeListFetcher
-                .fetch()
-                .then((res) => {
-                    this.actions.updatePrizeList({
-                        prizeList: res.prizes,
-                        prizeListCount: res.count
-                    });
-                    resolve(res);
-                })
-                .catch((err) => {
-                    console.logGlobal(err);
-                    reject(err);
-                });
-        });
-    }
-}
-
-export default alt.createActions(PrizeListActions);
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index dc8204cf..dc8e3d62 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,14 +1,13 @@
 'use strict';
 
 import 'babel/polyfill';
+import 'classlist-polyfill';
 
 import React from 'react';
 import { Router, Redirect } from 'react-router';
 import history from './history';
 
-/* eslint-disable */
 import fetch from 'isomorphic-fetch';
-/* eslint-enable */
 
 import ApiUrls from './constants/api_urls';
 
@@ -17,44 +16,27 @@ import getRoutes from './routes';
 import requests from './utils/requests';
 
 import { updateApiUrls } from './constants/api_urls';
-import { getSubdomainSettings } from './utils/constants_utils';
+import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils';
 import { initLogging } from './utils/error_utils';
 import { getSubdomain } from './utils/general_utils';
 
 import EventActions from './actions/event_actions';
 
-/* eslint-disable */
 // You can comment out the modules you don't need
-// import DebugHandler from './third_party/debug';
-import GoogleAnalyticsHandler from './third_party/ga';
-import RavenHandler from './third_party/raven';
-import IntercomHandler from './third_party/intercom';
-import NotificationsHandler from './third_party/notifications';
-import FacebookHandler from './third_party/facebook';
-/* eslint-enable */
+// import DebugHandler from './third_party/debug_handler';
+import FacebookHandler from './third_party/facebook_handler';
+import GoogleAnalyticsHandler from './third_party/ga_handler';
+import IntercomHandler from './third_party/intercom_handler';
+import NotificationsHandler from './third_party/notifications_handler';
+import RavenHandler from './third_party/raven_handler';
 
-initLogging();
 
-let headers = {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json'
-};
-
-requests.defaults({
-    urlMap: ApiUrls,
-    http: {
-        headers: headers,
-        credentials: 'include'
-    }
-});
-
-class AppGateway {
+const AppGateway = {
     start() {
-        let settings;
-        let subdomain = getSubdomain();
-
         try {
-            settings = getSubdomainSettings(subdomain);
+            const subdomain = getSubdomain();
+            const settings = getSubdomainSettings(subdomain);
+
             AppConstants.whitelabel = settings;
             updateApiUrls(settings.type, subdomain);
             this.load(settings);
@@ -62,28 +44,25 @@ class AppGateway {
             // if there are no matching subdomains, we're routing
             // to the default frontend
             console.logGlobal(err);
-            this.load();
+            this.load(getDefaultSubdomainSettings());
         }
-    }
+    },
 
     load(settings) {
-        let type = 'default';
-        let subdomain = 'www';
+        const { subdomain, type } = settings;
         let redirectRoute = (<Redirect from="/" to="/collection" />);
 
-        if (settings) {
-            type = settings.type;
-            subdomain = settings.subdomain;
-        }
+        if (subdomain) {
+            // Some whitelabels have landing pages so we should not automatically redirect from / to /collection.
+            // Only www and cc do not have a landing page.
+            if (subdomain !== 'cc') {
+                redirectRoute = null;
+            }
 
-        // www and cc do not have a landing page
-        if(subdomain && subdomain !== 'cc') {
-            redirectRoute = null;
+            // Adds a client specific class to the body for whitelabel styling
+            window.document.body.classList.add('client--' + subdomain);
         }
 
-        // Adds a client specific class to the body for whitelabel styling
-        window.document.body.classList.add('client--' + subdomain);
-
         // Send the applicationWillBoot event to the third-party stores
         EventActions.applicationWillBoot(settings);
 
@@ -101,8 +80,21 @@ class AppGateway {
         // Send the applicationDidBoot event to the third-party stores
         EventActions.applicationDidBoot(settings);
     }
-}
+};
 
-let ag = new AppGateway();
-ag.start();
+// Initialize pre-start components
+initLogging();
 
+requests.defaults({
+    urlMap: ApiUrls,
+    http: {
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        credentials: 'include'
+    }
+});
+
+// And bootstrap app
+AppGateway.start();
diff --git a/js/components/app_base.js b/js/components/app_base.js
new file mode 100644
index 00000000..3d14fae5
--- /dev/null
+++ b/js/components/app_base.js
@@ -0,0 +1,90 @@
+'use strict';
+
+import React from 'react';
+import classNames from 'classnames';
+import { History } from 'react-router';
+
+import UserActions from '../actions/user_actions';
+import UserStore from '../stores/user_store';
+
+import WhitelabelActions from '../actions/whitelabel_actions';
+import WhitelabelStore from '../stores/whitelabel_store';
+
+import GlobalNotification from './global_notification';
+
+import AppConstants from '../constants/application_constants';
+
+import { mergeOptions } from '../utils/general_utils';
+
+
+export default function AppBase(App) {
+    return React.createClass({
+        displayName: 'AppBase',
+
+        propTypes: {
+            children: React.PropTypes.element.isRequired,
+            history: React.PropTypes.object.isRequired,
+            location: React.PropTypes.object.isRequired,
+            routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
+        },
+
+        getInitialState() {
+            return mergeOptions(
+                UserStore.getState(),
+                WhitelabelStore.getState()
+            );
+        },
+
+        mixins: [History],
+
+        componentDidMount() {
+            UserStore.listen(this.onChange);
+            WhitelabelStore.listen(this.onChange);
+
+            UserActions.fetchCurrentUser();
+            WhitelabelActions.fetchWhitelabel();
+
+            this.history.locationQueue.push(this.props.location);
+        },
+
+        componentWillReceiveProps(nextProps) {
+            const { locationQueue } = this.history;
+            locationQueue.unshift(nextProps.location);
+
+            // Limit the number of locations to keep in memory to avoid too much memory usage
+            if (locationQueue.length > AppConstants.locationThreshold) {
+                locationQueue.length = AppConstants.locationThreshold;
+            }
+        },
+
+        componentWillUnmount() {
+            UserStore.unlisten(this.onChange);
+            WhitelabelActions.unlisten(this.onChange);
+        },
+
+        onChange(state) {
+            this.setState(state);
+        },
+
+        render() {
+            const { routes } = this.props;
+            const { currentUser, whitelabel } = this.state;
+
+            // The second element of the routes prop given to us by react-router is always the
+            // active second-level component object (ie. after App).
+            const activeRoute = routes[1];
+
+            return (
+                <div>
+                    <App
+                        {...this.props}
+                        activeRoute={activeRoute}
+                        currentUser={currentUser}
+                        whitelabel={whitelabel} />
+                    <GlobalNotification />
+                    <div id="modal" className="container" />
+                </div>
+            );
+        }
+    });
+};
diff --git a/js/components/app_route_wrapper.js b/js/components/app_route_wrapper.js
index 0abbcb32..d680faeb 100644
--- a/js/components/app_route_wrapper.js
+++ b/js/components/app_route_wrapper.js
@@ -24,7 +24,7 @@ const AppRouteWrapper = React.createClass({
         }
 
         return (
-            <div className="ascribe-body">
+            <div className="container ascribe-body">
                 {childrenWithProps}
             </div>
         );
diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js
index f1967edb..1ce113cb 100644
--- a/js/components/ascribe_accordion_list/accordion_list.js
+++ b/js/components/ascribe_accordion_list/accordion_list.js
@@ -8,9 +8,10 @@ import { getLangText } from '../../utils/lang_utils';
 
 let AccordionList = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
         children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
-        loadingElement: React.PropTypes.element,
+        loadingElement: React.PropTypes.element.isRequired,
+
+        className: React.PropTypes.string,
         count: React.PropTypes.number,
         itemList: React.PropTypes.arrayOf(React.PropTypes.object),
         search: React.PropTypes.string,
@@ -24,7 +25,7 @@ let AccordionList = React.createClass({
     render() {
         const { search } = this.props;
 
-        if(this.props.itemList && this.props.itemList.length > 0) {
+        if (this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className={this.props.className}>
                     {this.props.children}
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
index 27657e04..2bb8b2d0 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
@@ -19,9 +19,10 @@ import { getLangText } from '../../utils/lang_utils';
 
 let AccordionListItemEditionWidget = React.createClass({
     propTypes: {
-        className: React.PropTypes.string,
         piece: React.PropTypes.object.isRequired,
         toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
+
+        className: React.PropTypes.string,
         onPollingSuccess: React.PropTypes.func
     },
 
@@ -50,14 +51,15 @@ let AccordionListItemEditionWidget = React.createClass({
      * Calls the store to either show or hide the editionListTable
      */
     toggleTable() {
-        let pieceId = this.props.piece.id;
-        let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
+        const { piece: { id: pieceId } } = this.props;
+        const { filterBy, isEditionListOpenForPieceId } = this.state;
+        const isEditionListOpen = isEditionListOpenForPieceId[pieceId] ? isEditionListOpenForPieceId[pieceId].show : false;
 
-        if(isEditionListOpen) {
+        if (isEditionListOpen) {
             EditionListActions.toggleEditionList(pieceId);
         } else {
             EditionListActions.toggleEditionList(pieceId);
-            EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy);
+            EditionListActions.fetchEditionList({ pieceId, filterBy });
         }
     },
 
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index 586b75a2..3b0bb02e 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -66,20 +66,28 @@ let AccordionListItemTableEditions = React.createClass({
     },
 
     filterSelectedEditions() {
-        let selectedEditions = this.state.editionList[this.props.parentId]
-            .filter((edition) => edition.selected);
-        return selectedEditions;
+        return this.state
+                   .editionList[this.props.parentId]
+                   .filter((edition) => edition.selected);
     },
 
     loadFurtherEditions() {
+        const { parentId: pieceId } = this.props;
+        const { page, pageSize, orderBy, orderAsc, filterBy } = this.state.editionList[pieceId];
+
         // trigger loading animation
         this.setState({
             showMoreLoading: true
         });
 
-        let editionList = this.state.editionList[this.props.parentId];
-        EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize,
-                                            editionList.orderBy, editionList.orderAsc, editionList.filterBy);
+        EditionListActions.fetchEditionList({
+            pieceId,
+            pageSize,
+            orderBy,
+            orderAsc,
+            filterBy,
+            page: page + 1
+        });
     },
     render() {
         const { className, parentId } = this.props;
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
index 37c98371..8000affd 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index a3266be9..c586b926 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -31,12 +31,12 @@ let AccordionListItemWallet = React.createClass({
         content: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object.isRequired,
 
-        className: React.PropTypes.string,
-        thumbnailPlaceholder: React.PropTypes.func,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string,
+        thumbnailPlaceholder: React.PropTypes.func
     },
 
     getInitialState() {
@@ -67,10 +67,12 @@ let AccordionListItemWallet = React.createClass({
                     delay={500}
                     placement="left"
                     overlay={<Tooltip>{getLangText('You have actions pending')}</Tooltip>}>
-                    <Glyphicon glyph='bell' color="green"/>
-                </OverlayTrigger>);
+                    <Glyphicon glyph='bell' color="green" />
+                </OverlayTrigger>
+            );
+        } else {
+            return null;
         }
-        return null;
     },
 
     toggleCreateEditionsDialog() {
@@ -86,8 +88,9 @@ let AccordionListItemWallet = React.createClass({
     },
 
     onPollingSuccess(pieceId) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
         EditionListActions.toggleEditionList(pieceId);
 
         const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index f7000aca..863bffc0 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -2,60 +2,28 @@
 
 import React from 'react';
 
-import UserActions from '../actions/user_actions';
-import UserStore from '../stores/user_store';
-
-import WhitelabelActions from '../actions/whitelabel_actions';
-import WhitelabelStore from '../stores/whitelabel_store';
-
+import AppBase from './app_base';
 import AppRouteWrapper from './app_route_wrapper';
-import Header from './header';
 import Footer from './footer';
-import GlobalNotification from './global_notification';
-
-import { mergeOptions } from '../utils/general_utils';
+import Header from './header';
 
 
 let AscribeApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelActions.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { children, routes } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { activeRoute, children, currentUser, routes, whitelabel } = this.props;
 
         return (
-            <div className="container ascribe-default-app">
+            <div className="ascribe-default-app">
                 <Header
                     currentUser={currentUser}
                     routes={routes}
@@ -66,12 +34,10 @@ let AscribeApp = React.createClass({
                     {/* Routes are injected here */}
                     {children}
                 </AppRouteWrapper>
-                <Footer />
-                <GlobalNotification />
-                <div id="modal" className="container"></div>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
 });
 
-export default AscribeApp;
+export default AppBase(AscribeApp);
diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js
index 2dc21d31..df349152 100644
--- a/js/components/ascribe_buttons/acls/acl_button.js
+++ b/js/components/ascribe_buttons/acls/acl_button.js
@@ -14,7 +14,7 @@ import AppConstants from '../../../constants/application_constants';
 import { AclInformationText } from '../../../constants/acl_information_text';
 
 
-export default function ({ action, displayName, title, tooltip }) {
+export default function AclButton({ action, displayName, title, tooltip }) {
     if (AppConstants.aclList.indexOf(action) < 0) {
         console.warn('Your specified aclName did not match a an acl class.');
     }
diff --git a/js/components/ascribe_buttons/create_editions_button.js b/js/components/ascribe_buttons/create_editions_button.js
index 08fb76ce..c78b0d63 100644
--- a/js/components/ascribe_buttons/create_editions_button.js
+++ b/js/components/ascribe_buttons/create_editions_button.js
@@ -28,6 +28,12 @@ let CreateEditionsButton = React.createClass({
         EditionListStore.listen(this.onChange);
     },
 
+    componentDidUpdate() {
+        if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
+            this.startPolling();
+        }
+    },
+
     componentWillUnmount() {
         EditionListStore.unlisten(this.onChange);
         clearInterval(this.state.pollingIntervalIndex);
@@ -37,28 +43,24 @@ let CreateEditionsButton = React.createClass({
         this.setState(state);
     },
 
-    componentDidUpdate() {
-        if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
-            this.startPolling();
-        }
-    },
-
     startPolling() {
         // start polling until editions are defined
         let pollingIntervalIndex = setInterval(() => {
 
             // requests, will try to merge the filterBy parameter with other parameters (mergeOptions).
             // Therefore it can't but null but instead has to be an empty object
-            EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, {})
-            .then((res) => {
-
-                clearInterval(this.state.pollingIntervalIndex);
-                this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
-
-            })
-            .catch((err) => {
-                /* Ignore and keep going */
-            });
+            EditionListActions
+                .fetchEditionList({
+                    pieceId: this.props.piece.id,
+                    filterBy: {}
+                })
+                .then((res) => {
+                    clearInterval(this.state.pollingIntervalIndex);
+                    this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
+                })
+                .catch((err) => {
+                    /* Ignore and keep going */
+                });
         }, 5000);
 
         this.setState({
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index deb275ec..f2110e10 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -74,7 +74,7 @@ let Edition = React.createClass({
                     <div className="ascribe-detail-header">
                         <hr className="hidden-print" style={{marginTop: 0}} />
                         <h1 className="ascribe-detail-title">{edition.title}</h1>
-                        <DetailProperty label="BY" value={edition.artist_name} />
+                        <DetailProperty label="CREATED BY" value={edition.artist_name} />
                         <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
                         <hr />
                     </div>
diff --git a/js/components/ascribe_detail/edition_action_panel.js b/js/components/ascribe_detail/edition_action_panel.js
index 2d9c9a26..dd5c117b 100644
--- a/js/components/ascribe_detail/edition_action_panel.js
+++ b/js/components/ascribe_detail/edition_action_panel.js
@@ -81,9 +81,10 @@ let EditionActionPanel = React.createClass({
     },
 
     refreshCollection() {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
-        EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
+        EditionListActions.refreshEditionList({ pieceId: this.props.edition.parent });
     },
 
     handleSuccess(response) {
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index d26bd529..b9696d0a 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -37,31 +37,28 @@ let EditionContainer = React.createClass({
     mixins: [History, ReactError],
 
     getInitialState() {
-        return EditionStore.getState();
+        return EditionStore.getInitialState();
     },
 
     componentDidMount() {
         EditionStore.listen(this.onChange);
 
-        // Every time we're entering the edition detail page,
-        // just reset the edition that is saved in the edition store
-        // as it will otherwise display wrong/old data once the user loads
-        // the edition detail a second time
-        EditionActions.flushEdition();
-        EditionActions.fetchEdition(this.props.params.editionId);
+        this.loadEdition();
     },
 
     // This is done to update the container when the user clicks on the prev or next
     // button to update the URL parameter (and therefore to switch pieces)
     componentWillReceiveProps(nextProps) {
         if (this.props.params.editionId !== nextProps.params.editionId) {
-            EditionActions.fetchEdition(this.props.params.editionId);
+            EditionActions.flushEdition();
+            this.loadEdition(nextProps.params.editionId);
         }
     },
 
     componentDidUpdate() {
-        const { editionMeta } = this.state;
-        if (editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
+        const { err: editionErr } = this.state.editionMeta;
+
+        if (editionErr && editionErr.json && editionErr.json.status === 404) {
             this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
         }
     },
@@ -75,12 +72,16 @@ let EditionContainer = React.createClass({
         this.setState(state);
     },
 
+    loadEdition(editionId = this.props.params.editionId) {
+        EditionActions.fetchEdition(editionId);
+    },
+
     render() {
         const { actionPanelButtonListType, currentUser, furtherDetailsType, whitelabel } = this.props;
         const { edition, coaMeta } = this.state;
 
-        if (Object.keys(edition).length && edition.id) {
-            setDocumentTitle([edition.artist_name, edition.title].join(', '));
+        if (edition.id) {
+            setDocumentTitle(`${edition.artist_name}, ${edition.title}`);
 
             return (
                 <Edition
@@ -89,7 +90,7 @@ let EditionContainer = React.createClass({
                     currentUser={currentUser}
                     edition={edition}
                     furtherDetailsType={furtherDetailsType}
-                    loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)}
+                    loadEdition={this.loadEdition}
                     whitelabel={whitelabel} />
             );
         } else {
diff --git a/js/components/ascribe_detail/further_details.js b/js/components/ascribe_detail/further_details.js
index c178fb93..b1d9c637 100644
--- a/js/components/ascribe_detail/further_details.js
+++ b/js/components/ascribe_detail/further_details.js
@@ -5,25 +5,27 @@ import React from 'react';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 
-import Form from './../ascribe_forms/form';
-
-import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
-
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
 import FurtherDetailsFileuploader from './further_details_fileuploader';
 
+import Form from './../ascribe_forms/form';
+import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
+
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
+import { getLangText } from '../../utils/lang_utils';
+
 
 let FurtherDetails = React.createClass({
     propTypes: {
+        pieceId: React.PropTypes.number.isRequired,
+
         editable: React.PropTypes.bool,
-        pieceId: React.PropTypes.number,
         extraData: React.PropTypes.object,
+        handleSuccess: React.PropTypes.func,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
-        handleSuccess: React.PropTypes.func
     },
 
     getInitialState() {
@@ -32,13 +34,18 @@ let FurtherDetails = React.createClass({
         };
     },
 
-    showNotification(){
-        this.props.handleSuccess();
-        let notification = new GlobalNotificationModel('Details updated', 'success');
+    showNotification() {
+        const { handleSuccess } = this.props;
+
+        if (typeof handleSucess === 'function') {
+            handleSuccess();
+        }
+
+        const notification = new GlobalNotificationModel(getLangText('Details updated'), 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    submitFile(file){
+    submitFile(file) {
         this.setState({
             otherDataKey: file.key
         });
@@ -51,40 +58,42 @@ let FurtherDetails = React.createClass({
     },
 
     render() {
+        const { editable, extraData, otherData, pieceId } = this.props;
+
         return (
             <Row>
                 <Col md={12} className="ascribe-edition-personal-note">
                     <PieceExtraDataForm
                         name='artist_contact_info'
                         title='Artist Contact Info'
+                        convertLinks
+                        editable={editable}
+                        extraData={extraData}
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData}
-                        />
+                        pieceId={pieceId} />
                     <PieceExtraDataForm
                         name='display_instructions'
                         title='Display Instructions'
+                        editable={editable}
+                        extraData={extraData}
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData} />
+                        pieceId={pieceId} />
                     <PieceExtraDataForm
                         name='technology_details'
                         title='Technology Details'
+                        editable={editable}
+                        extraData={extraData}
                         handleSuccess={this.showNotification}
-                        editable={this.props.editable}
-                        pieceId={this.props.pieceId}
-                        extraData={this.props.extraData} />
+                        pieceId={pieceId} />
                     <Form>
                         <FurtherDetailsFileuploader
                             submitFile={this.submitFile}
                             setIsUploadReady={this.setIsUploadReady}
                             isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                            editable={this.props.editable}
+                            editable={editable}
                             overrideForm={true}
-                            pieceId={this.props.pieceId}
-                            otherData={this.props.otherData}
+                            pieceId={pieceId}
+                            otherData={otherData}
                             multiple={true} />
                     </Form>
                 </Col>
diff --git a/js/components/ascribe_detail/further_details_fileuploader.js b/js/components/ascribe_detail/further_details_fileuploader.js
index acdbe9e0..61e0724f 100644
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@@ -8,6 +8,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -15,21 +16,26 @@ import { getLangText } from '../../utils/lang_utils';
 
 let FurtherDetailsFileuploader = React.createClass({
     propTypes: {
+        pieceId: React.PropTypes.number.isRequired,
+
+        areAssetsDownloadable: React.PropTypes.bool,
+        editable: React.PropTypes.bool,
+        isReadyForFormSubmission: React.PropTypes.func,
         label: React.PropTypes.string,
-        pieceId: React.PropTypes.number,
+        multiple: React.PropTypes.bool,
         otherData: React.PropTypes.arrayOf(React.PropTypes.object),
+        onValidationFailed: React.PropTypes.func,
         setIsUploadReady: React.PropTypes.func,
         submitFile: React.PropTypes.func,
-        onValidationFailed: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        editable: React.PropTypes.bool,
-        multiple: React.PropTypes.bool
+        validation: ReactS3FineUploader.propTypes.validation
     },
 
     getDefaultProps() {
         return {
+            areAssetsDownloadable: true,
             label: getLangText('Additional files'),
-            multiple: false
+            multiple: false,
+            validation: validationTypes.additionalData
         };
     },
 
@@ -59,7 +65,7 @@ let FurtherDetailsFileuploader = React.createClass({
                         url: ApiUrls.blob_otherdatas,
                         pieceId: this.props.pieceId
                     }}
-                    validation={AppConstants.fineUploader.validation.additionalData}
+                    validation={this.props.validation}
                     submitFile={this.props.submitFile}
                     onValidationFailed={this.props.onValidationFailed}
                     setIsUploadReady={this.props.setIsUploadReady}
@@ -91,7 +97,7 @@ let FurtherDetailsFileuploader = React.createClass({
                            'X-CSRFToken': getCookie(AppConstants.csrftoken)
                         }
                     }}
-                    areAssetsDownloadable={true}
+                    areAssetsDownloadable={this.props.areAssetsDownloadable}
                     areAssetsEditable={this.props.editable}
                     multiple={this.props.multiple} />
             </Property>
diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index 8ea374b3..1e9ba0a1 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -14,7 +14,9 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
 
 import AclProxy from '../acl_proxy';
 
-import { getLangText } from '../../utils/lang_utils.js';
+import { getLangText } from '../../utils/lang_utils';
+import { extractFileExtensionFromString } from '../../utils/file_utils';
+
 
 const EMBED_IFRAME_HEIGHT = {
     video: 315,
@@ -68,6 +70,16 @@ let MediaContainer = React.createClass({
         // content was registered by the current user.
         const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
 
+        // We want to show the file's extension as a label of the download button.
+        // We can however not only use `extractFileExtensionFromString` on the url for that
+        // as files might be saved on S3 without a file extension which leads
+        // `extractFileExtensionFromString` to extract everything starting from the top level
+        // domain: e.g. '.net/live/<hash>'.
+        // Therefore, we extract the file's name (last part of url, separated with a slash)
+        // and try to extract the file extension from there.
+        const fileName = content.digital_work.url.split('/').pop();
+        const fileExtension = extractFileExtensionFromString(fileName);
+
         let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
             content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
         let mimetype = content.digital_work.mime;
@@ -124,7 +136,11 @@ let MediaContainer = React.createClass({
                             className="ascribe-margin-1px"
                             href={content.digital_work.url}
                             target="_blank">
-                            {getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download" />
+                            {/*
+                                If it turns out that `fileExtension` is an empty string, we're just
+                                using the label 'file'.
+                            */}
+                            {getLangText('Download')} .{fileExtension || 'file'} <Glyphicon glyph="cloud-download" />
                         </Button>
                     </AclProxy>
                     {embed}
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index 58648c7b..31cf0574 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -27,7 +27,7 @@ let Piece = React.createClass({
     },
 
     updatePiece() {
-        return PieceActions.fetchOne(this.props.piece.id);
+        return PieceActions.fetchPiece(this.props.piece.id);
     },
 
     render() {
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 93bbd90b..30dc2566 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -71,7 +71,7 @@ let PieceContainer = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
-            PieceStore.getState(),
+            PieceStore.getInitialState(),
             {
                 showCreateEditionsDialog: false
             }
@@ -82,18 +82,23 @@ let PieceContainer = React.createClass({
         PieceListStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
 
-        // Every time we enter the piece detail page, just reset the piece
-        // store as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PieceActions.updatePiece({});
-
         this.loadPiece();
     },
 
-    componentDidUpdate() {
-        const { pieceError } = this.state;
+    // This is done to update the container when the user clicks on the prev or next
+    // button to update the URL parameter (and therefore to switch pieces) or
+    // when the user clicks on a notification while being in another piece view
+    componentWillReceiveProps(nextProps) {
+        if (this.props.params.pieceId !== nextProps.params.pieceId) {
+            PieceActions.flushPiece();
+            this.loadPiece(nextProps.params.pieceId);
+        }
+    },
 
-        if (pieceError && pieceError.status === 404) {
+    componentDidUpdate() {
+        const { err: pieceErr } = this.state.pieceMeta;
+
+        if (pieceErr && pieceErr.json && pieceErr.json.status === 404) {
             this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
         }
     },
@@ -115,8 +120,7 @@ let PieceContainer = React.createClass({
             ALSO, WE ENABLED THE LOAN BUTTON FOR IKONOTV TO LET THEM LOAN ON A PIECE LEVEL
 
          */
-        if(state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') {
-
+        if (state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') {
             let pieceState = mergeOptions({}, state.piece);
             pieceState.acl.acl_loan = false;
             this.setState({
@@ -128,11 +132,10 @@ let PieceContainer = React.createClass({
         }
     },
 
-    loadPiece() {
-        PieceActions.fetchOne(this.props.params.pieceId);
+    loadPiece(pieceId = this.props.params.pieceId) {
+        PieceActions.fetchPiece(pieceId);
     },
 
-
     toggleCreateEditionsDialog() {
         this.setState({
             showCreateEditionsDialog: !this.state.showCreateEditionsDialog
@@ -140,43 +143,47 @@ let PieceContainer = React.createClass({
     },
 
     handleEditionCreationSuccess() {
-        PieceActions.updateProperty({key: 'num_editions', value: 0});
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceActions.updateProperty({ key: 'num_editions', value: 0 });
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
+
         this.toggleCreateEditionsDialog();
     },
 
     handleDeleteSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         // since we're deleting a piece, we just need to close
         // all editions dialogs and not reload them
         EditionListActions.closeAllEditionLists();
         EditionListActions.clearAllEditionSelections();
 
-        let notification = new GlobalNotificationModel(response.notification, 'success');
+        const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         this.history.push('/collection');
     },
 
     getCreateEditionsDialog() {
-        if(this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
+        if (this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
             return (
                 <div style={{marginTop: '1em'}}>
                     <CreateEditionsForm
                         pieceId={this.state.piece.id}
                         handleSuccess={this.handleEditionCreationSuccess} />
-                    <hr/>
+                    <hr />
                 </div>
             );
         } else {
-            return (<hr/>);
+            return (<hr />);
         }
     },
 
     handlePollingSuccess(pieceId, numEditions) {
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
 
         // we need to refresh the num_editions property of the actual piece we're looking at
         PieceActions.updateProperty({
@@ -188,28 +195,28 @@ let PieceContainer = React.createClass({
         // btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion
         // list item also uses the firstEdition property which we can only get from the server in that case.
         // Therefore we need to at least refetch the changed piece from the server or on our case simply all
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
-        let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getId() {
-        return {'id': this.state.piece.id};
+        return { 'id': this.state.piece.id };
     },
 
     getActions() {
         const { piece } = this.state;
         const { currentUser } = this.props;
 
-        if (piece && piece.notifications && piece.notifications.length > 0) {
+        if (piece.notifications && piece.notifications.length > 0) {
             return (
                 <ListRequestActions
                     currentUser={currentUser}
-                    pieceOrEditions={piece}
+                    handleSuccess={this.loadPiece}
                     notifications={piece.notifications}
-                    handleSuccess={this.loadPiece} />);
+                    pieceOrEditions={piece} />
+            );
         } else {
             return (
                 <AclProxy
@@ -236,12 +243,12 @@ let PieceContainer = React.createClass({
                                     onPollingSuccess={this.handlePollingSuccess}/>
                                 <DeleteButton
                                     handleSuccess={this.handleDeleteSuccess}
-                                    piece={piece}/>
+                                    piece={piece} />
                                 <AclInformation
                                     aim="button"
                                     verbs={['acl_share', 'acl_transfer', 'acl_create_editions', 'acl_loan', 'acl_delete',
                                             'acl_consign']}
-                                    aclObject={piece.acl}/>
+                                    aclObject={piece.acl} />
                         </AclButtonList>
                     </DetailProperty>
                 </AclProxy>
@@ -253,8 +260,8 @@ let PieceContainer = React.createClass({
         const { currentUser, furtherDetailsType: FurtherDetailsType } = this.props;
         const { piece } = this.state;
 
-        if (piece && piece.id) {
-            setDocumentTitle([piece.artist_name, piece.title].join(', '));
+        if (piece.id) {
+            setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
 
             return (
                 <Piece
@@ -264,7 +271,7 @@ let PieceContainer = React.createClass({
                         <div className="ascribe-detail-header">
                             <hr className="hidden-print" style={{marginTop: 0}} />
                             <h1 className="ascribe-detail-title">{piece.title}</h1>
-                            <DetailProperty label="BY" value={piece.artist_name} />
+                            <DetailProperty label="CREATED BY" value={piece.artist_name} />
                             <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
                             {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
                             <hr/>
@@ -272,7 +279,7 @@ let PieceContainer = React.createClass({
                         }
                     subheader={
                         <div className="ascribe-detail-header">
-                            <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
+                            <DetailProperty label={getLangText('ASCRIBED BY')} value={ piece.user_registered } />
                             <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
                             <LicenseDetail license={piece.license_type} />
                         </div>
diff --git a/js/components/ascribe_forms/create_editions_form.js b/js/components/ascribe_forms/create_editions_form.js
index 1e8ac23e..b2bf3c1c 100644
--- a/js/components/ascribe_forms/create_editions_form.js
+++ b/js/components/ascribe_forms/create_editions_form.js
@@ -19,7 +19,7 @@ let CreateEditionsForm = React.createClass({
         pieceId: React.PropTypes.number
     },
 
-    getFormData(){
+    getFormData() {
         return {
             piece_id: parseInt(this.props.pieceId, 10)
         };
@@ -58,11 +58,12 @@ let CreateEditionsForm = React.createClass({
                     <input
                         type="number"
                         placeholder="(e.g. 32)"
-                        min={1}/>
+                        min={1}
+                        max={100} />
                 </Property>
             </Form>
         );
     }
 });
 
-export default CreateEditionsForm;
\ No newline at end of file
+export default CreateEditionsForm;
diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js
index 91d00f65..fcc2f799 100644
--- a/js/components/ascribe_forms/form.js
+++ b/js/components/ascribe_forms/form.js
@@ -156,7 +156,7 @@ let Form = React.createClass({
 
         for(let ref in this.refs) {
             if(this.refs[ref] && typeof this.refs[ref].handleSuccess === 'function'){
-                this.refs[ref].handleSuccess();
+                this.refs[ref].handleSuccess(response);
             }
         }
         this.setState({
@@ -205,16 +205,15 @@ let Form = React.createClass({
     },
 
     getButtons() {
-        if (this.state.submitted){
+        if (this.state.submitted) {
             return this.props.spinner;
         }
-        if (this.props.buttons){
+        if (this.props.buttons !== undefined) {
             return this.props.buttons;
         }
-        let buttons = null;
 
-        if (this.state.edited && !this.props.disabled){
-            buttons = (
+        if (this.state.edited && !this.props.disabled) {
+            return (
                 <div className="row" style={{margin: 0}}>
                     <p className="pull-right">
                         <Button
@@ -230,9 +229,9 @@ let Form = React.createClass({
                     </p>
                 </div>
             );
-
+        } else {
+            return null;
         }
-        return buttons;
     },
 
     getErrors() {
diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index a28d2cff..e2e83567 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -123,8 +123,7 @@ let ConsignForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Consign Contract')}
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />
diff --git a/js/components/ascribe_forms/form_copyright_association.js b/js/components/ascribe_forms/form_copyright_association.js
index c378ddba..124a980a 100644
--- a/js/components/ascribe_forms/form_copyright_association.js
+++ b/js/components/ascribe_forms/form_copyright_association.js
@@ -48,8 +48,7 @@ let CopyrightAssociationForm = React.createClass({
                     <Property
                         name="copyright_association"
                         className="ascribe-property-collapsible-toggle"
-                        label={getLangText('Copyright Association')}
-                        style={{paddingBottom: 0}}>
+                        label={getLangText('Copyright Association')}>
                         <select defaultValue={selectedState} name="contract">
                             <option
                                 name={0}
@@ -77,4 +76,4 @@ let CopyrightAssociationForm = React.createClass({
     }
 });
 
-export default CopyrightAssociationForm;
\ No newline at end of file
+export default CopyrightAssociationForm;
diff --git a/js/components/ascribe_forms/form_create_contract.js b/js/components/ascribe_forms/form_create_contract.js
index fcd874da..cbdd12c3 100644
--- a/js/components/ascribe_forms/form_create_contract.js
+++ b/js/components/ascribe_forms/form_create_contract.js
@@ -2,19 +2,20 @@
 
 import React from 'react';
 
-import Form from '../ascribe_forms/form';
-import Property from '../ascribe_forms/property';
+import ContractListActions from '../../actions/contract_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import ContractListActions from '../../actions/contract_list_actions';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import InputFineUploader from './input_fineuploader';
 
+import Form from '../ascribe_forms/form';
+import Property from '../ascribe_forms/property';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { getLangText } from '../../utils/lang_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 
@@ -78,8 +79,8 @@ let CreateContractForm = React.createClass({
                             url: ApiUrls.blob_contracts
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                            itemLimit: validationTypes.additionalData.itemLimit,
+                            sizeLimit: validationTypes.additionalData.sizeLimit,
                             allowedExtensions: ['pdf']
                         }}
                         areAssetsDownloadable={true}
diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js
index 861806ae..c3a9b435 100644
--- a/js/components/ascribe_forms/form_loan.js
+++ b/js/components/ascribe_forms/form_loan.js
@@ -171,7 +171,7 @@ let LoanForm = React.createClass({
                     editable={!gallery}
                     overrideForm={!!gallery}>
                     <input
-                        value={gallery}
+                        defaultValue={gallery}
                         type="text"
                         placeholder={getLangText('Gallery/exhibition (optional)')}/>
                 </Property>
@@ -210,8 +210,7 @@ let LoanForm = React.createClass({
                 <Property
                     name='contract_agreement'
                     label={getLangText('Loan Contract')}
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputContractAgreementCheckbox
                         createPublicContractAgreement={createPublicContractAgreement}
                         email={email} />
diff --git a/js/components/ascribe_forms/form_piece_extradata.js b/js/components/ascribe_forms/form_piece_extradata.js
index f6ee4177..6a475fb6 100644
--- a/js/components/ascribe_forms/form_piece_extradata.js
+++ b/js/components/ascribe_forms/form_piece_extradata.js
@@ -13,43 +13,48 @@ import InputTextAreaToggable from './input_textarea_toggable';
 
 let PieceExtraDataForm = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.number,
+        name: React.PropTypes.string.isRequired,
+        pieceId: React.PropTypes.number.isRequired,
+
+        convertLinks: React.PropTypes.bool,
+        editable: React.PropTypes.bool,
         extraData: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
-        name: React.PropTypes.string,
-        title: React.PropTypes.string,
-        editable: React.PropTypes.bool
+        title: React.PropTypes.string
     },
 
     getFormData() {
-        let extradata = {};
-        extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
         return {
-            extradata: extradata,
+            extradata: {
+                [this.props.name]: this.refs.form.refs[this.props.name].state.value
+            },
             piece_id: this.props.pieceId
         };
     },
-    
+
     render() {
-        let defaultValue = this.props.extraData[this.props.name] || '';
-        if (defaultValue.length === 0 && !this.props.editable){
+        const { convertLinks, editable, extraData, handleSuccess, name, pieceId, title } = this.props;
+        const defaultValue = (extraData && extraData[name]) || null;
+
+        if (!defaultValue && !editable) {
             return null;
         }
-        let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId});
+
         return (
             <Form
                 ref='form'
-                url={url}
-                handleSuccess={this.props.handleSuccess}
+                disabled={!editable}
                 getFormData={this.getFormData}
-                disabled={!this.props.editable}>
+                handleSuccess={handleSuccess}
+                url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}>
                 <Property
-                    name={this.props.name}
-                    label={this.props.title}>
+                    name={name}
+                    label={title}>
                     <InputTextAreaToggable
                         rows={1}
+                        convertLinks={convertLinks}
                         defaultValue={defaultValue}
-                        placeholder={getLangText('Fill in%s', ' ') + this.props.title}
+                        placeholder={getLangText('Fill in%s', ' ') + title}
                         required />
                 </Property>
                 <hr />
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
index 35059d5d..69a3b6b7 100644
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -5,12 +5,16 @@ import React from 'react';
 import Form from './form';
 import Property from './property';
 import InputFineUploader from './input_fineuploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import FormSubmitButton from '../ascribe_buttons/form_submit_button';
 
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import AscribeSpinner from '../ascribe_spinner';
+
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
-import AscribeSpinner from '../ascribe_spinner';
+import { validationParts, validationTypes } from '../../constants/uploader_constants';
 
 import { getLangText } from '../../utils/lang_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
@@ -164,7 +168,7 @@ let RegisterPieceForm = React.createClass({
                         createBlobRoutine={{
                             url: ApiUrls.blob_digitalworks
                         }}
-                        validation={AppConstants.fineUploader.validation.registerWork}
+                        validation={validationTypes.registerWork}
                         setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={isFineUploaderActive}
@@ -190,9 +194,9 @@ let RegisterPieceForm = React.createClass({
                             fileClass: 'thumbnail'
                         }}
                         validation={{
-                            itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                            sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
-                            allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                            itemLimit: validationTypes.workThumbnail.itemLimit,
+                            sizeLimit: validationTypes.workThumbnail.sizeLimit,
+                            allowedExtensions: validationParts.allowedExtensions.images
                         }}
                         setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
                         fileClassToUpload={{
@@ -200,9 +204,7 @@ let RegisterPieceForm = React.createClass({
                             plural: getLangText('Select representative images')
                         }}
                         isFineUploaderActive={isFineUploaderActive}
-                        disabled={!isFineUploaderEditable}
-                        enableLocalHashing={enableLocalHashing}
-                        uploadMethod={location.query.method} />
+                        disabled={!isFineUploaderEditable} />
                 </Property>
                 <Property
                     name='artist_name'
diff --git a/js/components/ascribe_forms/form_send_contract_agreement.js b/js/components/ascribe_forms/form_send_contract_agreement.js
index 043c0361..00a69e18 100644
--- a/js/components/ascribe_forms/form_send_contract_agreement.js
+++ b/js/components/ascribe_forms/form_send_contract_agreement.js
@@ -128,8 +128,7 @@ let SendContractAgreementForm = React.createClass({
                     <Property
                         name='appendix'
                         checkboxLabel={getLangText('Add appendix to the contract')}
-                        expanded={false}
-                        style={{paddingBottom: 0}}>
+                        expanded={false}>
                         <span>{getLangText('Appendix')}</span>
                         {/* We're using disabled on a form here as PropertyCollapsible currently
                         does not support the disabled + overrideForm functionality */}
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 6faa6cf8..69fadd36 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -121,8 +121,7 @@ let SignupForm = React.createClass({
                 {children}
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service of ascribe') + ' '}
diff --git a/js/components/ascribe_forms/form_submit_to_prize.js b/js/components/ascribe_forms/form_submit_to_prize.js
index 5818a9ce..43f28e2a 100644
--- a/js/components/ascribe_forms/form_submit_to_prize.js
+++ b/js/components/ascribe_forms/form_submit_to_prize.js
@@ -66,8 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
+                    className="ascribe-property-collapsible-toggle">
                     <InputCheckbox>
                         <span>
                             {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
diff --git a/js/components/ascribe_forms/input_contract_agreement_checkbox.js b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
index 61235631..7008fe31 100644
--- a/js/components/ascribe_forms/input_contract_agreement_checkbox.js
+++ b/js/components/ascribe_forms/input_contract_agreement_checkbox.js
@@ -156,7 +156,7 @@ const InputContractAgreementCheckbox = React.createClass({
                 return (
                     <div
                         className="notification-contract-pdf"
-                        style={{paddingBottom: '1em'}}>
+                        style={{paddingBottom: '0.25em'}}>
                         <embed
                             className="embed-form"
                             src={contractUrl}
diff --git a/js/components/ascribe_forms/input_date.js b/js/components/ascribe_forms/input_date.js
index 3e2892c0..d7e36b0d 100644
--- a/js/components/ascribe_forms/input_date.js
+++ b/js/components/ascribe_forms/input_date.js
@@ -17,10 +17,7 @@ let InputDate = React.createClass({
     },
 
     getInitialState() {
-        return {
-            value: null,
-            value_moment: null
-        };
+        return this.getStateFromMoment(this.props.defaultValue);
     },
 
     // InputDate needs to support setting a defaultValue from outside.
@@ -28,20 +25,30 @@ let InputDate = React.createClass({
     // to the outer Property
     componentWillReceiveProps(nextProps) {
         if(!this.state.value && !this.state.value_moment && nextProps.defaultValue) {
-            this.handleChange(this.props.defaultValue);
+            this.handleChange(nextProps.defaultValue);
         }
     },
 
-    handleChange(date) {
-        let formattedDate = date.format('YYYY-MM-DD');
-        this.setState({
-            value: formattedDate,
-            value_moment: date
-        });
+    getStateFromMoment(date) {
+        const state = {};
 
+        if (date) {
+            state.value = date.format('YYYY-MM-DD');
+            state.value_moment = date;
+        }
+
+        return state;
+    },
+
+    handleChange(date) {
+        const newState = this.getStateFromMoment(date);
+
+        this.setState(newState);
+
+        // Propagate change up by faking event
         this.props.onChange({
             target: {
-                value: formattedDate
+                value: newState.value
             }
         });
     },
diff --git a/js/components/ascribe_forms/input_fineuploader.js b/js/components/ascribe_forms/input_fineuploader.js
index fa9c72b6..80fa1891 100644
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@@ -28,11 +28,7 @@ const InputFineUploader = React.createClass({
         createBlobRoutine: shape({
             url: string
         }),
-        validation: shape({
-            itemLimit: number,
-            sizeLimit: string,
-            allowedExtensions: arrayOf(string)
-        }),
+        validation: ReactS3FineUploader.propTypes.validation,
 
         // isFineUploaderActive is used to lock react fine uploader in case
         // a user is actually not logged in already to prevent him from droping files
diff --git a/js/components/ascribe_forms/input_textarea_toggable.js b/js/components/ascribe_forms/input_textarea_toggable.js
index 0be8b87a..05a1f011 100644
--- a/js/components/ascribe_forms/input_textarea_toggable.js
+++ b/js/components/ascribe_forms/input_textarea_toggable.js
@@ -4,17 +4,20 @@ import React from 'react';
 
 import TextareaAutosize from 'react-textarea-autosize';
 
+import { anchorize } from '../../utils/dom_utils';
+
 
 let InputTextAreaToggable = React.createClass({
     propTypes: {
         autoFocus: React.PropTypes.bool,
-        disabled: React.PropTypes.bool,
-        rows: React.PropTypes.number.isRequired,
-        required: React.PropTypes.bool,
+        convertLinks: React.PropTypes.bool,
         defaultValue: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
+        disabled: React.PropTypes.bool,
         onBlur: React.PropTypes.func,
-        onChange: React.PropTypes.func
+        onChange: React.PropTypes.func,
+        placeholder: React.PropTypes.string,
+        required: React.PropTypes.bool,
+        rows: React.PropTypes.number.isRequired
     },
 
     getInitialState() {
@@ -36,7 +39,7 @@ let InputTextAreaToggable = React.createClass({
     componentDidUpdate() {
         // If the initial value of state.value is null, we want to set props.defaultValue
         // as a value. In all other cases TextareaAutosize.onChange is updating.handleChange already
-        if(this.state.value === null && this.props.defaultValue) {
+        if (this.state.value === null && this.props.defaultValue) {
             this.setState({
                 value: this.props.defaultValue
             });
@@ -49,28 +52,26 @@ let InputTextAreaToggable = React.createClass({
     },
 
     render() {
-        let className = 'form-control ascribe-textarea';
-        let textarea = null;
+        const { convertLinks, disabled, onBlur, placeholder, required, rows } = this.props;
+        const { value } = this.state;
 
-        if(!this.props.disabled) {
-            className = className + ' ascribe-textarea-editable';
-            textarea = (
+        if (!disabled) {
+            return (
                 <TextareaAutosize
                     ref='textarea'
-                    className={className}
-                    value={this.state.value}
-                    rows={this.props.rows}
+                    className='form-control ascribe-textarea ascribe-textarea-editable'
+                    value={value}
+                    rows={rows}
                     maxRows={10}
-                    required={this.props.required}
+                    required={required}
                     onChange={this.handleChange}
-                    onBlur={this.props.onBlur}
-                    placeholder={this.props.placeholder} />
+                    onBlur={onBlur}
+                    placeholder={placeholder} />
             );
         } else {
-            textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
+            // Can only convert links when not editable, as textarea does not support anchors
+            return <pre className="ascribe-pre">{convertLinks ? anchorize(value) : value}</pre>;
         }
-
-        return textarea;
     }
 });
 
diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 432591bf..6d46a9d3 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -240,7 +240,17 @@ const Property = React.createClass({
     },
 
     handleCheckboxToggle() {
-        this.setExpanded(!this.state.expanded);
+        const expanded = !this.state.expanded;
+
+        this.setExpanded(expanded);
+
+        // Reset the value to be the initial value when the checkbox is unticked since the
+        // user doesn't want to specify their own value.
+        if (!expanded) {
+            this.setState({
+                value: this.state.initialValue
+            });
+        }
     },
 
     renderChildren(style) {
diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js
index fd77e5ae..511e7f8c 100644
--- a/js/components/ascribe_modal/modal_wrapper.js
+++ b/js/components/ascribe_modal/modal_wrapper.js
@@ -1,19 +1,20 @@
 'use strict';
 
 import React from 'react';
-import ReactAddons from 'react/addons';
 
 import Modal from 'react-bootstrap/lib/Modal';
 
 let ModalWrapper = React.createClass({
     propTypes: {
-        trigger: React.PropTypes.element,
         title: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element,
             React.PropTypes.string
         ]).isRequired,
-        handleSuccess: React.PropTypes.func.isRequired,
+
+        handleCancel: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func,
+        trigger: React.PropTypes.element,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
@@ -38,14 +39,25 @@ let ModalWrapper = React.createClass({
         });
     },
 
+    handleCancel() {
+        if (typeof this.props.handleCancel === 'function') {
+            this.props.handleCancel();
+        }
+
+        this.hide();
+    },
+
     handleSuccess(response) {
-        this.props.handleSuccess(response);
+        if (typeof this.props.handleSuccess === 'function') {
+            this.props.handleSuccess(response);
+        }
+
         this.hide();
     },
 
     renderChildren() {
-        return ReactAddons.Children.map(this.props.children, (child) => {
-            return ReactAddons.addons.cloneWithProps(child, {
+        return React.Children.map(this.props.children, (child) => {
+            return React.cloneElement(child, {
                 handleSuccess: (response) => {
                     if (typeof child.props.handleSuccess === 'function') {
                         child.props.handleSuccess(response);
@@ -60,14 +72,23 @@ let ModalWrapper = React.createClass({
     render() {
         const { trigger, title } = this.props;
 
-        // If the trigger component exists, we add the ModalWrapper's show() as its onClick method.
+        // If the trigger component exists, we add the ModalWrapper's show() to its onClick method.
         // The trigger component should, in most cases, be a button.
-        const clonedTrigger = React.isValidElement(trigger) ? React.cloneElement(trigger, {onClick: this.show})
-                                                            : null;
+        const clonedTrigger = React.isValidElement(trigger) ?
+            React.cloneElement(trigger, {
+                onClick: (...params) => {
+                    if (typeof trigger.props.onClick === 'function') {
+                        trigger.props.onClick(...params);
+                    }
+
+                    this.show();
+                }
+            }) : null;
+
         return (
             <span>
                 {clonedTrigger}
-                <Modal show={this.state.showModal} onHide={this.hide}>
+                <Modal show={this.state.showModal} onHide={this.handleCancel}>
                     <Modal.Header closeButton>
                         <Modal.Title>
                             {title}
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
index edb29e85..c9791dbe 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
@@ -84,6 +84,7 @@ let PieceListToolbarFilterWidget = React.createClass({
         if (this.props.filterParams && this.props.filterParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-filter-widget-dropdown"
                     pullRight={true}
                     title={filterIcon}
                     className="ascribe-piece-list-toolbar-filter-widget">
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
index 5257cc07..da9bae43 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
@@ -45,7 +45,7 @@ let PieceListToolbarOrderWidget = React.createClass({
     },
 
     render() {
-        let filterIcon = (
+        let orderIcon = (
             <span>
                 <span className="ascribe-icon icon-ascribe-sort" aria-hidden="true"></span>
                 <span style={this.isOrderActive()}>&middot;</span>
@@ -55,9 +55,10 @@ let PieceListToolbarOrderWidget = React.createClass({
         if (this.props.orderParams && this.props.orderParams.length) {
             return (
                 <DropdownButton
+                    id="ascribe-piece-list-toolbar-order-widget-dropdown"
                     pullRight={true}
-                    title={filterIcon}
-                    className="ascribe-piece-list-toolbar-filter-widget">
+                    className="ascribe-piece-list-toolbar-filter-widget"
+                    title={orderIcon}>
                     <li style={{'textAlign': 'center'}}>
                         <em>{getLangText('Sort by')}:</em>
                     </li>
diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js
index c650358c..57d66171 100644
--- a/js/components/ascribe_settings/account_settings.js
+++ b/js/components/ascribe_settings/account_settings.js
@@ -35,7 +35,7 @@ let AccountSettings = React.createClass({
     getFormDataProfile(){
         return {'email': this.props.currentUser.email};
     },
-    
+
     render() {
         let content = <AscribeSpinner color='dark-blue' size='lg'/>;
         let profile = null;
@@ -78,8 +78,7 @@ let AccountSettings = React.createClass({
                         getFormData={this.getFormDataProfile}>
                         <Property
                             name="hash_locally"
-                            className="ascribe-property-collapsible-toggle"
-                            style={{paddingBottom: 0}}>
+                            className="ascribe-property-collapsible-toggle">
                             <InputCheckbox
                                 defaultChecked={this.props.currentUser.profile.hash_locally}>
                                 <span>
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index e825e4b6..3b5654cb 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -18,7 +18,7 @@ import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
 import { setDocumentTitle } from '../../utils/dom_utils';
-import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils';
+import { truncateTextAtCharIndex } from '../../utils/general_utils';
 
 
 let ContractSettings = React.createClass({
@@ -53,11 +53,11 @@ let ContractSettings = React.createClass({
             ContractListActions.removeContract(contract.id)
                 .then((response) => {
                     ContractListActions.fetchContractList(true);
-                    let notification = new GlobalNotificationModel(response.notification, 'success', 4000);
+                    const notification = new GlobalNotificationModel(response.notification, 'success', 4000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 })
                 .catch((err) => {
-                    let notification = new GlobalNotificationModel(err, 'danger', 10000);
+                    const notification = new GlobalNotificationModel(err, 'danger', 10000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
                 });
         };
@@ -82,12 +82,11 @@ let ContractSettings = React.createClass({
         if (publicContracts.length === 0) {
             createPublicContractForm = (
                 <CreateContractForm
-                    isPublic={true}
                     fileClassToUpload={{
                         singular: 'new contract',
                         plural: 'new contracts'
                     }}
-                    location={location} />
+                    isPublic={true} />
             );
         }
 
@@ -104,7 +103,7 @@ let ContractSettings = React.createClass({
                             {publicContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
@@ -112,9 +111,7 @@ let ContractSettings = React.createClass({
                                                 <AclProxy
                                                     aclObject={whitelabel}
                                                     aclName="acl_update_public_contract">
-                                                    <ContractSettingsUpdateButton
-                                                        contract={contract}
-                                                        location={location}/>
+                                                    <ContractSettingsUpdateButton contract={contract} />
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
@@ -140,16 +137,15 @@ let ContractSettings = React.createClass({
                         aclObject={currentUser.acl}>
                         <div>
                             <CreateContractForm
-                            isPublic={false}
-                            fileClassToUpload={{
-                                singular: getLangText('new contract'),
-                                plural: getLangText('new contracts')
-                            }}
-                            location={location}/>
+                                fileClassToUpload={{
+                                    singular: getLangText('new contract'),
+                                    plural: getLangText('new contracts')
+                                }}
+                                isPublic={false} />
                             {privateContracts.map((contract, i) => {
                                 return (
                                     <ActionPanel
-                                        key={i}
+                                        key={contract.id}
                                         title={contract.name}
                                         content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
@@ -157,9 +153,7 @@ let ContractSettings = React.createClass({
                                                <AclProxy
                                                     aclObject={whitelabel}
                                                     aclName="acl_update_private_contract">
-                                                    <ContractSettingsUpdateButton
-                                                        contract={contract}
-                                                        location={location}/>
+                                                    <ContractSettingsUpdateButton contract={contract} />
                                                 </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
diff --git a/js/components/ascribe_settings/contract_settings_update_button.js b/js/components/ascribe_settings/contract_settings_update_button.js
index 7649e5b0..dc652b9b 100644
--- a/js/components/ascribe_settings/contract_settings_update_button.js
+++ b/js/components/ascribe_settings/contract_settings_update_button.js
@@ -2,17 +2,18 @@
 
 import React from 'react';
 
-import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
-import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
-
-import AppConstants from '../../constants/application_constants';
-import ApiUrls from '../../constants/api_urls';
-
 import ContractListActions from '../../actions/contract_list_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
+
+import ApiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+import { validationTypes } from '../../constants/uploader_constants';
+
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -24,71 +25,75 @@ let ContractSettingsUpdateButton = React.createClass({
     },
 
     submitFile(file) {
-        let contract = this.props.contract;
-
         // override the blob with the key's value
-        contract.blob = file.key;
+        const contract = Object.assign(this.props.contract, { blob: file.key });
 
         // send it to the server
         ContractListActions
             .changeContract(contract)
             .then((res) => {
-
                 // Display feedback to the user
-                let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000);
+                const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000);
                 GlobalNotificationActions.appendGlobalNotification(notification);
 
                 // and refresh the contract list to get the updated contracs
-                return ContractListActions.fetchContractList(true);
-            })
-            .then(() => {
-                // Also, reset the fineuploader component so that the user can again 'update' his contract
-                this.refs.fineuploader.reset();
-            })
-            .catch((err) => {
-                console.logGlobal(err);
-                let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000);
+                return ContractListActions
+                            .fetchContractList(true)
+                            // Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract
+                            .then(this.refs.fineuploader.reset)
+                            .catch((err) => {
+                                const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000);
+                                GlobalNotificationActions.appendGlobalNotification(notification);
+
+                                return Promise.reject(err);
+                            });
+            }, (err) => {
+                const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000);
                 GlobalNotificationActions.appendGlobalNotification(notification);
-            });
+
+                return Promise.reject(err);
+            })
+            .catch(console.logGlobal);
     },
 
     render() {
         return (
            <ReactS3FineUploader
-                fileInputElement={UploadButton()}
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'contract'
-                }}
-                createBlobRoutine={{
-                    url: ApiUrls.blob_contracts
-                }}
-                validation={{
-                    itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                    sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
-                    allowedExtensions: ['pdf']
-                }}
-                setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie(AppConstants.csrftoken)
-                    }
-                }}
-                fileClassToUpload={{
-                    singular: getLangText('UPDATE'),
-                    plural: getLangText('UPDATE')
-                }}
-                isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                submitFile={this.submitFile} />
+               ref='fineuploader'
+               fileInputElement={UploadButton({ showLabel: false })}
+               keyRoutine={{
+                   url: AppConstants.serverUrl + 's3/key/',
+                   fileClass: 'contract'
+               }}
+               createBlobRoutine={{
+                   url: ApiUrls.blob_contracts
+               }}
+               validation={{
+                   itemLimit: validationTypes.registerWork.itemLimit,
+                   sizeLimit: validationTypes.additionalData.sizeLimit,
+                   allowedExtensions: ['pdf']
+               }}
+               setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
+               signature={{
+                   endpoint: AppConstants.serverUrl + 's3/signature/',
+                   customHeaders: {
+                      'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                   }
+               }}
+               deleteFile={{
+                   enabled: true,
+                   method: 'DELETE',
+                   endpoint: AppConstants.serverUrl + 's3/delete',
+                   customHeaders: {
+                      'X-CSRFToken': getCookie(AppConstants.csrftoken)
+                   }
+               }}
+               fileClassToUpload={{
+                   singular: getLangText('UPDATE'),
+                   plural: getLangText('UPDATE')
+               }}
+               isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
+               submitFile={this.submitFile} />
         );
     }
 });
diff --git a/js/components/ascribe_settings/webhook_settings.js b/js/components/ascribe_settings/webhook_settings.js
index 9deecbcd..4928c408 100644
--- a/js/components/ascribe_settings/webhook_settings.js
+++ b/js/components/ascribe_settings/webhook_settings.js
@@ -34,7 +34,6 @@ let WebhookSettings = React.createClass({
     componentDidMount() {
         WebhookStore.listen(this.onChange);
         WebhookActions.fetchWebhooks();
-        WebhookActions.fetchWebhookEvents();
     },
 
     componentWillUnmount() {
@@ -49,7 +48,7 @@ let WebhookSettings = React.createClass({
         return (event) => {
             WebhookActions.removeWebhook(webhookId);
 
-            let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
+            const notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
             GlobalNotificationActions.appendGlobalNotification(notification);
         };
     },
@@ -57,16 +56,16 @@ let WebhookSettings = React.createClass({
     handleCreateSuccess() {
         this.refs.webhookCreateForm.reset();
         WebhookActions.fetchWebhooks(true);
-        let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
+
+        const notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getWebhooks(){
-        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
-
+    getWebhooks() {
         if (this.state.webhooks) {
-            content = this.state.webhooks.map(function(webhook, i) {
+            return this.state.webhooks.map(function(webhook, i) {
                 const event = webhook.event.split('.')[0];
+
                 return (
                     <ActionPanel
                         name={webhook.event}
@@ -91,11 +90,14 @@ let WebhookSettings = React.createClass({
                                     </button>
                                 </div>
                             </div>
-                        }/>
+                        } />
                     );
             }, this);
+        } else {
+            return (
+                <AscribeSpinner color='dark-blue' size='lg'/>
+            );
         }
-        return content;
     },
 
     getEvents() {
@@ -110,18 +112,18 @@ let WebhookSettings = React.createClass({
                                 <option
                                     name={i}
                                     key={i}
-                                    value={ event + '.webhook' }>
-                                    { event.toUpperCase() }
+                                    value={event + '.webhook'}>
+                                    {event.toUpperCase()}
                                 </option>
                             );
                         })}
                     </select>
                 </Property>);
+        } else {
+            return null;
         }
-        return null;
     },
 
-    
     render() {
         return (
             <CollapsibleParagraph
@@ -138,20 +140,19 @@ let WebhookSettings = React.createClass({
                         a target url.
                     </p>
                 </div>
-                <AclProxy
-                    show={this.state.webhookEvents && this.state.webhookEvents.length}>
+                <AclProxy show={this.state.webhookEvents && this.state.webhookEvents.length}>
                     <Form
                         ref="webhookCreateForm"
                         url={ApiUrls.webhooks}
                         handleSuccess={this.handleCreateSuccess}>
-                        { this.getEvents() }
+                        {this.getEvents()}
                         <Property
                             name='target'
                             label={getLangText('Redirect Url')}>
                             <input
                                 type="text"
                                 placeholder={getLangText('Enter the url to be triggered')}
-                                required/>
+                                required />
                         </Property>
                         <hr />
                     </Form>
@@ -162,4 +163,4 @@ let WebhookSettings = React.createClass({
     }
 });
 
-export default WebhookSettings;
\ No newline at end of file
+export default WebhookSettings;
diff --git a/js/components/ascribe_social_share/facebook_share_button.js b/js/components/ascribe_social_share/facebook_share_button.js
index aa0b6691..d5fbf699 100644
--- a/js/components/ascribe_social_share/facebook_share_button.js
+++ b/js/components/ascribe_social_share/facebook_share_button.js
@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import FacebookHandler from '../../third_party/facebook_handler';
+
 import AppConstants from '../../constants/application_constants';
 
 import { InjectInHeadUtils } from '../../utils/inject_utils';
@@ -17,24 +19,40 @@ let FacebookShareButton = React.createClass({
         };
     },
 
-    componentDidMount() {
-        /**
-         * Ideally we would only use FB.XFBML.parse() on the component that we're
-         * mounting, but doing this when we first load the FB sdk causes unpredictable behaviour.
-         * The button sometimes doesn't get initialized, likely because FB hasn't properly
-         * been initialized yet.
-         *
-         * To circumvent this, we always have the sdk parse the entire DOM on the initial load
-         * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
-         */
-
-        InjectInHeadUtils
-            .inject(AppConstants.facebook.sdkUrl)
-            .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
+    getInitialState() {
+        return FacebookHandler.getState();
     },
 
-    shouldComponentUpdate(nextProps) {
-        return this.props.type !== nextProps.type;
+    componentDidMount() {
+        FacebookHandler.listen(this.onChange);
+
+        this.loadFacebook();
+    },
+
+    shouldComponentUpdate(nextProps, nextState) {
+        // Don't update if the props haven't changed or the FB SDK loading status is still the same
+        return this.props.type !== nextProps.type || nextState.loaded !== this.state.loaded;
+    },
+
+    componentDidUpdate() {
+        // If the component changes, we need to reparse the share button's XFBML.
+        // To prevent cases where the Facebook SDK hasn't been loaded yet at this stage,
+        // let's make sure that it's injected before trying to reparse.
+        this.loadFacebook();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    loadFacebook() {
+        InjectInHeadUtils
+            .inject(AppConstants.facebook.sdkUrl)
+            .then(() => {
+                if (this.state.loaded) {
+                    FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent)
+                }
+            });
     },
 
     render() {
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
index ca1be2d2..0f95427d 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
@@ -23,6 +23,7 @@ const FileDragAndDropPreview = React.createClass({
             s3Url: string,
             s3UrlSafe: string
         }).isRequired,
+
         handleDeleteFile: func,
         handleCancelFile: func,
         handlePauseFile: func,
@@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     toggleUploadProcess() {
-        if(this.props.file.status === 'uploading') {
+        if (this.props.file.status === 'uploading') {
             this.props.handlePauseFile(this.props.file.id);
-        } else if(this.props.file.status === 'paused') {
+        } else if (this.props.file.status === 'paused') {
             this.props.handleResumeFile(this.props.file.id);
         }
     },
@@ -54,13 +55,13 @@ const FileDragAndDropPreview = React.createClass({
             (file.status === 'upload successful' || file.status === 'online') &&
             file.s3UrlSafe) {
             handleDeleteFile(file.id);
-        } else if(handleCancelFile) {
+        } else if (handleCancelFile) {
             handleCancelFile(file.id);
         }
     },
 
     handleDownloadFile() {
-        if(this.props.file.s3Url) {
+        if (this.props.file.s3Url) {
             // This simply opens a new browser tab with the url provided
             open(this.props.file.s3Url);
         }
@@ -69,7 +70,7 @@ const FileDragAndDropPreview = React.createClass({
     getFileName() {
         const { numberOfDisplayedFiles, file } = this.props;
 
-        if(numberOfDisplayedFiles === 1) {
+        if (numberOfDisplayedFiles === 1) {
             return (
                 <span className="file-name">
                     {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
@@ -81,7 +82,7 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     getRemoveButton() {
-        if(this.props.areAssetsEditable) {
+        if (this.props.areAssetsEditable) {
             return (
                 <div className="delete-file">
                     <span
@@ -107,7 +108,7 @@ const FileDragAndDropPreview = React.createClass({
 
         // Decide whether an image or a placeholder picture should be displayed
         // If a file has its `thumbnailUrl` defined, then we display it also as an image
-        if(file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
+        if (file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
             previewElement = (
                 <FileDragAndDropPreviewImage
                     onClick={this.handleDeleteFile}
@@ -123,7 +124,7 @@ const FileDragAndDropPreview = React.createClass({
                 <FileDragAndDropPreviewOther
                     onClick={this.handleDeleteFile}
                     progress={file.progress}
-                    type={file.type.split('/')[1]}
+                    type={extractFileExtensionFromString(file.name)}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
                     downloadUrl={file.s3UrlSafe}
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
index e5e7c947..e57b9495 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
@@ -56,9 +56,9 @@ const FileDragAndDropPreviewOther = React.createClass({
                     target="_blank"
                     className="glyphicon glyphicon-download action-file"
                     aria-hidden="true"
-                    title={getLangText('Download file')}/>
+                    title={getLangText('Download file')} />
             );
-        } else if(progress >= 0 && progress < 100) {
+        } else if (progress >= 0 && progress < 100) {
             actionSymbol = (
                 <div className="spinner-file">
                     <AscribeSpinner color='dark-blue' size='md' />
@@ -66,22 +66,19 @@ const FileDragAndDropPreviewOther = React.createClass({
             );
         } else {
             actionSymbol = (
-                <span className='ascribe-icon icon-ascribe-ok action-file'/>
+                <span className='ascribe-icon icon-ascribe-ok action-file' />
             );
         }
 
         return (
-            <div
-                className="file-drag-and-drop-preview">
+            <div className="file-drag-and-drop-preview">
                 <ProgressBar
                     now={Math.ceil(progress)}
                     style={style}
-                    className="ascribe-progress-bar ascribe-progress-bar-xs"/>
-                <div className="file-drag-and-drop-preview-table-wrapper">
-                    <div className="file-drag-and-drop-preview-other">
-                        {actionSymbol}
-                        <p style={style}>{'.' + type}</p>
-                    </div>
+                    className="ascribe-progress-bar ascribe-progress-bar-xs" />
+                <div className="file-drag-and-drop-preview-other">
+                    {actionSymbol}
+                    <p style={style}>{'.' + (type ? type : 'file')}</p>
                 </div>
             </div>
         );
diff --git a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
index 6612f968..ffd26a13 100644
--- a/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
+++ b/js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
 import { getLangText } from '../../../utils/lang_utils';
@@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
 const { func, array, bool, shape, string } = React.PropTypes;
 
 
-export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
+export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
     return React.createClass({
         displayName: 'UploadButton',
 
@@ -119,28 +120,28 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
         },
 
         getUploadedFileLabel() {
-            const uploadedFile = this.getUploadedFile();
-            const uploadingFiles = this.getUploadingFiles();
+            if (showLabel) {
+                const uploadedFile = this.getUploadedFile();
+                const uploadingFiles = this.getUploadingFiles();
 
-            if(uploadingFiles.length) {
-                return (
-                    <span>
-                        {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
-                        [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
-                    </span>
-                );
-            } else if(uploadedFile) {
-                return (
-                    <span>
-                        <span className='ascribe-icon icon-ascribe-ok'/>
-                        {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
-                        [<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
-                    </span>
-                );
-            } else {
-                return (
-                    <span>{getLangText('No file chosen')}</span>
-                );
+                if (uploadingFiles.length) {
+                    return (
+                        <span>
+                            {' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
+                            [<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
+                        </span>
+                    );
+                } else if (uploadedFile) {
+                    return (
+                        <span>
+                            <span className='ascribe-icon icon-ascribe-ok'/>
+                            {' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
+                            [<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
+                        </span>
+                    );
+                } else {
+                    return <span>{getLangText('No file chosen')}</span>;
+                }
             }
         },
 
@@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
              * Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
              */
             return (
-                <div className="upload-button-wrapper">
+                <div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
                     {/*
                         The button needs to be of `type="button"` as it would
                         otherwise submit the form its in.
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 877146a5..447b76ea 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -13,9 +13,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import AppConstants from '../../constants/application_constants';
 
-import { computeHashOfFile } from '../../utils/file_utils';
 import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
+import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file_utils';
 import { getLangText } from '../../utils/lang_utils';
 
 
@@ -36,17 +36,11 @@ const ReactS3FineUploader = React.createClass({
         keyRoutine: shape({
             url: string,
             fileClass: string,
-            pieceId: oneOfType([
-                string,
-                number
-            ])
+            pieceId: number
         }),
         createBlobRoutine: shape({
             url: string,
-            pieceId: oneOfType([
-                string,
-                number
-            ])
+            pieceId: number
         }),
         handleChangedFile: func, // is for when a file is dropped or selected
         submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
@@ -97,7 +91,7 @@ const ReactS3FineUploader = React.createClass({
         }),
         validation: shape({
             itemLimit: number,
-            sizeLimit: string,
+            sizeLimit: number,
             allowedExtensions: arrayOf(string)
         }),
         messages: shape({
@@ -284,22 +278,6 @@ const ReactS3FineUploader = React.createClass({
         this.setState(this.getInitialState());
     },
 
-    // Cancel uploads and clear previously selected files on the input element
-    cancelUploads(id) {
-        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
-
-        // Reset the file input element to clear the previously selected files so that
-        // the user can reselect them again.
-        this.clearFileSelection();
-    },
-
-    clearFileSelection() {
-        const { fileInput } = this.refs;
-        if (fileInput && typeof fileInput.clearSelection === 'function') {
-            fileInput.clearSelection();
-        }
-    },
-
     requestKey(fileId) {
         let filename = this.state.uploader.getName(fileId);
         let uuid = this.state.uploader.getUuid(fileId);
@@ -390,6 +368,107 @@ const ReactS3FineUploader = React.createClass({
         });
     },
 
+    // Cancel uploads and clear previously selected files on the input element
+    cancelUploads(id) {
+        typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
+
+        // Reset the file input element to clear the previously selected files so that
+        // the user can reselect them again.
+        this.clearFileSelection();
+    },
+
+    clearFileSelection() {
+        const { fileInput } = this.refs;
+        if (fileInput && typeof fileInput.clearSelection === 'function') {
+            fileInput.clearSelection();
+        }
+    },
+
+    getAllowedExtensions() {
+        const { validation: { allowedExtensions } = {} } = this.props;
+
+        if (allowedExtensions && allowedExtensions.length) {
+            return transformAllowedExtensionsToInputAcceptProp(allowedExtensions);
+        } else {
+            return null;
+        }
+    },
+
+    getXhrErrorComment(xhr) {
+        if (xhr) {
+            return {
+                response: xhr.response,
+                url: xhr.responseURL,
+                status: xhr.status,
+                statusText: xhr.statusText
+            };
+        }
+    },
+
+    isDropzoneInactive() {
+        const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
+
+        if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    isFileValid(file) {
+        const { validation: { allowedExtensions, sizeLimit = 0 }, onValidationFailed } = this.props;
+        const fileExt = extractFileExtensionFromString(file.name);
+
+        if (file.size > sizeLimit) {
+            const fileSizeInMegaBytes = sizeLimit / 1000000;
+
+            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            if (typeof onValidationFailed === 'function') {
+                onValidationFailed(file);
+            }
+
+            return false;
+        } else if (allowedExtensions && !allowedExtensions.includes(fileExt)) {
+            const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${allowedExtensions.join(', ')}`), 'danger', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
+            return false;
+        } else {
+            return true;
+        }
+    },
+
+    selectValidFiles(files) {
+        return Array.from(files).reduce((validFiles, file) => {
+            if (this.isFileValid(file)) {
+                validFiles.push(file);
+            }
+            return validFiles;
+        }, []);
+    },
+
+    // This method has been made promise-based to immediately afterwards
+    // call a callback function (instantly after this.setState went through)
+    // This is e.g. needed when showing/hiding the optional thumbnail upload
+    // field in the registration form
+    setStatusOfFile(fileId, status) {
+        return Q.Promise((resolve) => {
+            let changeSet = {};
+
+            if(status === 'deleted' || status === 'canceled') {
+                changeSet.progress = { $set: 0 };
+            }
+
+            changeSet.status = { $set: status };
+
+            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
+
+            this.setState({ filesToUpload }, resolve);
+        });
+    },
+
     setThumbnailForFileId(fileId, url) {
         const { filesToUpload } = this.state;
 
@@ -512,34 +591,6 @@ const ReactS3FineUploader = React.createClass({
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getXhrErrorComment(xhr) {
-        if (xhr) {
-            return {
-                response: xhr.response,
-                url: xhr.responseURL,
-                status: xhr.status,
-                statusText: xhr.statusText
-            };
-        }
-    },
-
-    isFileValid(file) {
-        if (file.size > this.props.validation.sizeLimit) {
-            const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
-
-            const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-
-            if (typeof this.props.onValidationFailed === 'function') {
-                this.props.onValidationFailed(file);
-            }
-
-            return false;
-        } else {
-            return true;
-        }
-    },
-
     onCancel(id) {
         // when a upload is canceled, we need to update this components file array
         this.setStatusOfFile(id, 'canceled')
@@ -676,6 +727,13 @@ const ReactS3FineUploader = React.createClass({
         this.cancelUploads(fileId);
     },
 
+    handleCancelHashing() {
+        // Every progress tick of the hashing function in handleUploadFile there is a
+        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
+        // the hashing of all files immediately.
+        this.setState({ hashingProgress: -1 });
+    },
+
     handlePauseFile(fileId) {
         if(this.state.uploader.pauseUpload(fileId)) {
             this.setStatusOfFile(fileId, 'paused');
@@ -704,15 +762,8 @@ const ReactS3FineUploader = React.createClass({
             return;
         }
 
-        // validate each submitted file if it fits the file size
-        let validFiles = [];
-        for(let i = 0; i < files.length; i++) {
-            if(this.isFileValid(files[i])) {
-                validFiles.push(files[i]);
-            }
-        }
-        // override standard files list with only valid files
-        files = validFiles;
+        // Select only the submitted files that fit the file size and allowed extensions
+        files = this.selectValidFiles(files);
 
         // if multiple is set to false and user drops multiple files into the dropzone,
         // take the first one and notify user that only one file can be submitted
@@ -823,13 +874,6 @@ const ReactS3FineUploader = React.createClass({
         }
     },
 
-    handleCancelHashing() {
-        // Every progress tick of the hashing function in handleUploadFile there is a
-        // check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
-        // the hashing of all files immediately.
-        this.setState({ hashingProgress: -1 });
-    },
-
     // ReactFineUploader is essentially just a react layer around s3 fineuploader.
     // However, since we need to display the status of a file (progress, uploading) as well as
     // be able to execute actions on a currently uploading file we need to exactly sync the file list
@@ -899,46 +943,6 @@ const ReactS3FineUploader = React.createClass({
         });
     },
 
-    // This method has been made promise-based to immediately afterwards
-    // call a callback function (instantly after this.setState went through)
-    // This is e.g. needed when showing/hiding the optional thumbnail upload
-    // field in the registration form
-    setStatusOfFile(fileId, status) {
-        return Q.Promise((resolve) => {
-            let changeSet = {};
-
-            if(status === 'deleted' || status === 'canceled') {
-                changeSet.progress = { $set: 0 };
-            }
-
-            changeSet.status = { $set: status };
-
-            let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
-
-            this.setState({ filesToUpload }, resolve);
-        });
-    },
-
-    isDropzoneInactive() {
-        const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
-
-        if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
-    getAllowedExtensions() {
-        let { validation } = this.props;
-
-        if(validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
-            return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions);
-        } else {
-            return null;
-        }
-    },
-
     render() {
         const {
              multiple,
diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index a3ac5037..f0649196 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -32,7 +32,7 @@ let CoaVerifyContainer = React.createClass({
 
         return (
             <div className="ascribe-login-wrapper">
-                <br/>
+                <br />
                 <div className="ascribe-login-text ascribe-login-header">
                     {getLangText('Verify your Certificate of Authenticity')}
                 </div>
@@ -42,7 +42,7 @@ let CoaVerifyContainer = React.createClass({
                     signature={signature}/>
                 <br />
                 <br />
-                    {getLangText('ascribe is using the following public key for verification')}:
+                {getLangText('ascribe is using the following public key for verification')}:
                 <br />
                 <pre>
                 -----BEGIN PUBLIC KEY-----
@@ -75,46 +75,44 @@ let CoaVerifyForm = React.createClass({
         const { message, signature } = this.props;
 
         return (
-            <div>
-                <Form
-                    url={ApiUrls.coa_verify}
-                    handleSuccess={this.handleSuccess}
-                    buttons={
-                        <button
-                            type="submit"
-                            className="btn btn-default btn-wide">
-                            {getLangText('Verify your Certificate of Authenticity')}
-                        </button>}
-                    spinner={
-                        <span className="btn btn-default btn-wide btn-spinner">
-                            <AscribeSpinner color="dark-blue" size="md" />
-                        </span>
-                        }>
-                    <Property
-                        name='message'
-                        label={getLangText('Message')}>
-                        <input
-                            type="text"
-                            placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
-                            autoComplete="on"
-                            defaultValue={message}
-                            name="username"
-                            required/>
-                    </Property>
-                    <Property
-                        name='signature'
-                        label="Signature"
-                        editable={true}
-                        overrideForm={true}>
-                        <InputTextAreaToggable
-                            rows={3}
-                            placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
-                            defaultValue={signature}
-                            required/>
-                    </Property>
-                    <hr />
-                </Form>
-            </div>
+            <Form
+                url={ApiUrls.coa_verify}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn btn-default btn-wide">
+                        {getLangText('Verify your Certificate of Authenticity')}
+                    </button>
+                }
+                spinner={
+                    <span className="btn btn-default btn-wide btn-spinner">
+                        <AscribeSpinner color="dark-blue" size="md" />
+                    </span>
+                }>
+                <Property
+                    name='message'
+                    label={getLangText('Message')}>
+                    <input
+                        type="text"
+                        placeholder={getLangText('Copy paste the message on the bottom of your Certificate of Authenticity')}
+                        autoComplete="on"
+                        defaultValue={message}
+                        required />
+                </Property>
+                <Property
+                    name='signature'
+                    label="Signature"
+                    editable={true}
+                    overrideForm={true}>
+                    <InputTextAreaToggable
+                        rows={3}
+                        placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
+                        defaultValue={signature}
+                        required />
+                </Property>
+                <hr />
+            </Form>
         );
     }
 });
diff --git a/js/components/error_not_found_page.js b/js/components/error_not_found_page.js
index a0e4cbb5..046c07a0 100644
--- a/js/components/error_not_found_page.js
+++ b/js/components/error_not_found_page.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import { History } from 'react-router';
 
 import { getLangText } from '../utils/lang_utils';
 
@@ -17,12 +18,25 @@ let ErrorNotFoundPage = React.createClass({
         location: React.PropTypes.object
     },
 
+    mixins: [History],
+
     getDefaultProps() {
         return {
             message: getLangText("Oops, the page you are looking for doesn't exist.")
         };
     },
 
+    componentDidMount() {
+        // The previous page, if any, is the second item in the locationQueue
+        const { locationQueue: [ , previousPage ] } = this.history;
+
+        if (previousPage) {
+            console.logGlobal('Page not found', {
+                previousPath: previousPage.pathname
+            });
+        }
+    },
+
     render() {
         return (
             <div className="row">
diff --git a/js/components/footer.js b/js/components/footer.js
index f2e35dfc..3010da4d 100644
--- a/js/components/footer.js
+++ b/js/components/footer.js
@@ -5,8 +5,12 @@ import React from 'react';
 import { getLangText } from '../utils/lang_utils';
 
 let Footer = React.createClass({
+    propTypes: {
+        activeRoute: React.PropTypes.object.isRequired
+    },
+
     render() {
-        return (
+        return !this.props.activeRoute.hideFooter ? (
             <div className="ascribe-footer hidden-print">
                 <p className="ascribe-sub-sub-statement">
                   <br />
@@ -24,7 +28,7 @@ let Footer = React.createClass({
                     <a href="https://www.linkedin.com/company/4816284?trk=vsrp_companies_res_name&trkInfo=VSRPsearchId%3A122827941425632318075%2CVSRPtargetId%3A4816284%2CVSRPcmpt%3Aprimary" className="social social-linked-in" target="_blank"></a>
                 </p>
             </div>
-        );
+        ) : null;
     }
 });
 
diff --git a/js/components/global_action.js b/js/components/global_action.js
deleted file mode 100644
index 80df0c75..00000000
--- a/js/components/global_action.js
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-let GlobalAction = React.createClass({
-    propTypes: {
-        requestActions: React.PropTypes.object
-    },
-
-    render() {
-        let pieceActions = null;
-        if (this.props.requestActions && this.props.requestActions.pieces){
-            pieceActions = this.props.requestActions.pieces.map((item) => {
-                return (
-                    <div className="ascribe-global-action">
-                        {item}
-                    </div>);
-            });
-        }
-        let editionActions = null;
-        if (this.props.requestActions && this.props.requestActions.editions){
-            editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => {
-                return this.props.requestActions.editions[pieceId].map((item) => {
-                    return (
-                        <div className="ascribe-global-action">
-                            {item}
-                        </div>);
-                });
-            });
-        }
-
-        if (pieceActions || editionActions) {
-            return (
-                <div className="ascribe-global-action-wrapper">
-                    {pieceActions}
-                    {editionActions}
-                </div>);
-        }
-        return null;
-    }
-});
-
-export default GlobalAction;
\ No newline at end of file
diff --git a/js/components/header.js b/js/components/header.js
index fcc19e31..ce1cc4d8 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -16,6 +16,8 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 import EventActions from '../actions/event_actions';
 
+import PieceListStore from '../stores/piece_list_store';
+
 import AclProxy from './acl_proxy';
 import HeaderNotifications from './header_notification';
 import HeaderNotificationDebug from './header_notification_debug';
@@ -27,12 +29,21 @@ import { constructHead } from '../utils/dom_utils';
 
 let Header = React.createClass({
     propTypes: {
+        // Provided from AscribeApp
         currentUser: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
         whitelabel: React.PropTypes.object.isRequired
     },
 
+    getInitialState() {
+        return PieceListStore.getState();
+    },
+
     componentDidMount() {
+        // Listen to the piece list store, but don't fetch immediately to avoid
+        // conflicts with routes that may need to wait to load the piece list
+        PieceListStore.listen(this.onChange);
+
         // react-bootstrap 0.25.1 has a bug in which it doesn't
         // close the mobile expanded navigation after a click by itself.
         // To get rid of this, we set the state of the component ourselves.
@@ -40,9 +51,14 @@ let Header = React.createClass({
     },
 
     componentWillUnmount() {
+        PieceListStore.unlisten(this.onChange);
         //history.unlisten(this.onRouteChange);
     },
 
+    onChange(state) {
+        this.setState(state);
+    },
+
     getLogo() {
         const { whitelabel } = this.props;
 
@@ -115,7 +131,9 @@ let Header = React.createClass({
     },
 
     render() {
-        const { currentUser, routes } = this.props;
+        const { currentUser, routes  } = this.props;
+        const { unfilteredPieceListCount } = this.state;
+
         let account;
         let signup;
         let navRoutesLinks;
@@ -124,6 +142,7 @@ let Header = React.createClass({
             account = (
                 <DropdownButton
                     ref='dropdownbutton'
+                    id="nav-route-user-dropdown"
                     eventKey="1"
                     title={currentUser.username}>
                     <LinkContainer
@@ -153,12 +172,18 @@ let Header = React.createClass({
                 </DropdownButton>
             );
 
+            // Let's assume that if the piece list hasn't loaded yet (ie. when unfilteredPieceListCount === -1)
+            // then the user has pieces
+            // FIXME: this doesn't work that well as the user may not load their piece list
+            // until much later, so we would show the 'Collection' header as available until
+            // they actually click on it and get redirected to piece registration.
             navRoutesLinks = (
                 <NavRoutesLinks
-                    routes={routes}
-                    userAcl={currentUser.acl}
                     navbar
-                    right />
+                    right
+                    hasPieces={!!unfilteredPieceListCount}
+                    routes={routes}
+                    userAcl={currentUser.acl} />
             );
         } else {
             account = (
diff --git a/js/components/header_notification.js b/js/components/header_notification.js
index 4b375685..784f8786 100644
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@@ -126,6 +126,7 @@ let HeaderNotifications = React.createClass({
                 <Nav navbar right>
                     <DropdownButton
                         ref='dropdownbutton'
+                        id="header-notification-dropdown"
                         eventKey="1"
                         title={
                             <span>
diff --git a/js/components/nav_routes_links.js b/js/components/nav_routes_links.js
index b2c9d9c3..676a9896 100644
--- a/js/components/nav_routes_links.js
+++ b/js/components/nav_routes_links.js
@@ -11,14 +11,33 @@ import AclProxy from './acl_proxy';
 import { sanitizeList } from '../utils/general_utils';
 
 
+const DISABLE_ENUM = ['hasPieces', 'noPieces'];
+
 let NavRoutesLinks = React.createClass({
     propTypes: {
+        hasPieces: React.PropTypes.bool,
         routes: React.PropTypes.arrayOf(React.PropTypes.object),
         userAcl: React.PropTypes.object
     },
 
+    isRouteDisabled(disableOn) {
+        const { hasPieces } = this.props;
+
+        if (disableOn) {
+            if (!DISABLE_ENUM.includes(disableOn)) {
+                throw new Error(`"disableOn" must be one of: [${DISABLE_ENUM.join(', ')}] got "${disableOn}" instead`);
+            }
+
+            if (disableOn === 'hasPieces') {
+                return hasPieces;
+            } else if (disableOn === 'noPieces') {
+                return !hasPieces;
+            }
+        }
+    },
+
     /**
-     * This method generales a bunch of react-bootstrap specific links
+     * This method generates a bunch of react-bootstrap specific links
      * from the routes we defined in one of the specific routes.js file
      *
      * We can define a headerTitle as well as a aclName and according to that the
@@ -29,48 +48,50 @@ let NavRoutesLinks = React.createClass({
      * @return {Array}         Array of ReactElements that can be displayed to the user
      */
     extractLinksFromRoutes(node, userAcl, i) {
-        if(!node) {
+        if (!node) {
             return;
         }
 
-        let links = node.childRoutes.map((child, j) => {
-            let childrenFn = null;
-            let { aclName, headerTitle, path, childRoutes } = child;
-
-            // If the node has children that could be rendered, then we want
-            // to execute this function again with the child as the root
-            //
-            // Otherwise we'll just pass childrenFn as false
-            if(child.childRoutes && child.childRoutes.length > 0) {
-                childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
-            }
+        const links = node.childRoutes.map((child, j) => {
+            const { aclName, disableOn, headerTitle, path, childRoutes } = child;
 
             // We validate if the user has set the title correctly,
             // otherwise we're not going to render his route
-            if(headerTitle && typeof headerTitle === 'string') {
+            if (headerTitle && typeof headerTitle === 'string') {
+                let nestedChildren = null;
+
+                // If the node has children that could be rendered, then we want
+                // to execute this function again with the child as the root
+                //
+                // Otherwise we'll just pass nestedChildren as false
+                if (child.childRoutes && child.childRoutes.length) {
+                    nestedChildren = this.extractLinksFromRoutes(child, userAcl, i++);
+                }
+
+                const navLinkProps = {
+                    headerTitle,
+                    children: nestedChildren,
+                    depth: i,
+                    disabled: this.isRouteDisabled(disableOn),
+                    routePath: `/${path}`
+                };
+
                 // if there is an aclName present on the route definition,
                 // we evaluate it against the user's acl
-                if(aclName && typeof aclName !== 'undefined') {
+                if (aclName && typeof aclName !== 'undefined') {
                     return (
                         <AclProxy
                             key={j}
                             aclName={aclName}
                             aclObject={this.props.userAcl}>
-                            <NavRoutesLinksLink
-                                headerTitle={headerTitle}
-                                routePath={'/' + path}
-                                depth={i}
-                                children={childrenFn}/>
+                            <NavRoutesLinksLink {...navLinkProps} />
                         </AclProxy>
                     );
                 } else {
                     return (
                         <NavRoutesLinksLink
                             key={j}
-                            headerTitle={headerTitle}
-                            routePath={'/' + path}
-                            depth={i}
-                            children={childrenFn}/>
+                            {...navLinkProps} />
                     );
                 }
             } else {
@@ -84,7 +105,7 @@ let NavRoutesLinks = React.createClass({
     },
 
     render() {
-        let {routes, userAcl} = this.props;
+        const {routes, userAcl} = this.props;
 
         return (
             <Nav {...this.props}>
@@ -94,4 +115,4 @@ let NavRoutesLinks = React.createClass({
     }
 });
 
-export default NavRoutesLinks;
\ No newline at end of file
+export default NavRoutesLinks;
diff --git a/js/components/nav_routes_links_link.js b/js/components/nav_routes_links_link.js
index 11235ccd..94fd91a2 100644
--- a/js/components/nav_routes_links_link.js
+++ b/js/components/nav_routes_links_link.js
@@ -11,40 +11,46 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
 
 let NavRoutesLinksLink = React.createClass({
     propTypes: {
-        headerTitle: React.PropTypes.string,
-        routePath: React.PropTypes.string,
-
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
         ]),
-
-        depth: React.PropTypes.number
+        disabled: React.PropTypes.bool,
+        depth: React.PropTypes.number,
+        headerTitle: React.PropTypes.string,
+        routePath: React.PropTypes.string
     },
 
     render() {
-        let { children, headerTitle, depth, routePath } = this.props;
+        const { children, headerTitle, depth, disabled, routePath } = this.props;
 
         // if the route has children, we're returning a DropdownButton that will get filled
         // with MenuItems
-        if(children) {
+        if (children) {
             return (
-                <DropdownButton title={headerTitle}>
+                <DropdownButton
+                    disabled={disabled}
+                    id={`nav-route-${headerTitle.toLowerCase()}-dropdown`}
+                    title={headerTitle}>
                     {children}
                 </DropdownButton>
             );
         } else {
-            if(depth === 1) {
+            if (depth === 1) {
                 // if the node's child is actually a node of level one (a child of a node), we're
                 // returning a DropdownButton matching MenuItem
                 return (
-                    <LinkContainer to={routePath}>
+                    <LinkContainer
+                        disabled={disabled}
+                        to={routePath}>
                         <MenuItem>{headerTitle}</MenuItem>
                     </LinkContainer>
                 );
-            } else if(depth === 0) {
+            } else if (depth === 0) {
                 return (
-                    <LinkContainer to={routePath}>
+                    <LinkContainer
+                        disabled={disabled}
+                        to={routePath}>
                         <NavItem>{headerTitle}</NavItem>
                     </LinkContainer>
                 );
@@ -55,4 +61,4 @@ let NavRoutesLinksLink = React.createClass({
     }
 });
 
-export default NavRoutesLinksLink;
\ No newline at end of file
+export default NavRoutesLinksLink;
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 3a4484ef..8c1e73f0 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -36,7 +36,10 @@ let PieceList = React.createClass({
         accordionListItemType: React.PropTypes.func,
         bulkModalButtonListType: React.PropTypes.func,
         canLoadPieceList: React.PropTypes.bool,
-        redirectTo: React.PropTypes.string,
+        redirectTo: React.PropTypes.shape({
+            pathname: React.PropTypes.string,
+            query: React.PropTypes.object
+        }),
         shouldRedirect: React.PropTypes.func,
         customSubmitButton: React.PropTypes.element,
         customThumbnailPlaceholder: React.PropTypes.func,
@@ -59,7 +62,6 @@ let PieceList = React.createClass({
             accordionListItemType: AccordionListItemWallet,
             bulkModalButtonListType: AclButtonList,
             canLoadPieceList: true,
-            orderParams: ['artist_name', 'title'],
             filterParams: [{
                 label: getLangText('Show works I can'),
                 items: [
@@ -67,7 +69,13 @@ let PieceList = React.createClass({
                     'acl_consign',
                     'acl_create_editions'
                 ]
-            }]
+            }],
+            orderParams: ['artist_name', 'title'],
+            redirectTo: {
+                pathname: '/register_piece',
+                query: null
+            },
+            shouldRedirect: (pieceCount) => !pieceCount
         };
     },
 
@@ -124,10 +132,16 @@ let PieceList = React.createClass({
         const { location: { query }, redirectTo, shouldRedirect } = this.props;
         const { unfilteredPieceListCount } = this.state;
 
-        if (redirectTo && unfilteredPieceListCount === 0 &&
+        if (redirectTo && redirectTo.pathname &&
             (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
+            window.setTimeout(() => this.history.push({
+                // Occasionally, the back end also sets query parameters for Onion.
+                // We need to consider this by merging all passed query parameters, as we'll
+                // otherwise end up in a 404 screen
+                query: Object.assign({}, query, redirectTo.query),
+                pathname: redirectTo.pathname
+            }), 0);
         }
     },
 
@@ -201,13 +215,14 @@ let PieceList = React.createClass({
                 this.state.pieceList
                     .forEach((piece) => {
                         // but only if they're actually open
-                        if(this.state.isEditionListOpenForPieceId[piece.id].show) {
+                        const isEditionListOpenForPiece = this.state.isEditionListOpenForPieceId[piece.id];
+
+                        if (isEditionListOpenForPiece && isEditionListOpenForPiece.show) {
                             EditionListActions.refreshEditionList({
                                 pieceId: piece.id,
                                 filterBy
                             });
                         }
-
                     });
             });
 
@@ -217,15 +232,15 @@ let PieceList = React.createClass({
     },
 
     applyOrderBy(orderBy) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, page, pageSize, search } = this.state;
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
+        const { orderAsc, pageSize } = this.state;
         const orderBy = this.state.orderBy || this.props.orderBy;
 
-        return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
-                                               orderBy, this.state.orderAsc, filterBy);
+        return PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     fetchSelectedPieceEditionList() {
@@ -250,8 +265,9 @@ let PieceList = React.createClass({
     },
 
     handleAclSuccess() {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderBy, orderAsc, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         this.fetchSelectedPieceEditionList()
             .forEach((pieceId) => {
@@ -310,12 +326,12 @@ let PieceList = React.createClass({
                         className="text-center ascribe-button-list collapse-group">
                         <DeleteButton
                             handleSuccess={this.handleAclSuccess}
-                            editions={selectedEditions}/>
+                            editions={selectedEditions} />
                     </BulkModalButtonListType>
                 </PieceListBulkModal>
                 <PieceListFilterDisplay
                     filterBy={this.state.filterBy}
-                    filterParams={filterParams}/>
+                    filterParams={filterParams} />
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 5ee192aa..d9de0c92 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -55,20 +55,15 @@ let RegisterPiece = React.createClass( {
         this.setState(state);
     },
 
-    handleSuccess(response){
+    handleSuccess(response) {
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
         const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
         // once the user was able to register a piece successfully, we need to make sure to keep
         // the piece list up to date
-        PieceListActions.fetchPieceList(
-            this.state.page,
-            this.state.pageSize,
-            this.state.searchTerm,
-            this.state.orderBy,
-            this.state.orderAsc,
-            this.state.filterBy
-        );
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         this.history.push(`/pieces/${response.piece.id}`);
     },
@@ -84,7 +79,8 @@ let RegisterPiece = React.createClass( {
                     <input
                         type="number"
                         placeholder="(e.g. 32)"
-                        min={0}/>
+                        min={1}
+                        max={100} />
                 </Property>
             );
         }
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index e4bcb810..43242bc3 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -3,19 +3,21 @@
 import React from 'react';
 import { History } from 'react-router';
 
+import GlobalNotificationModel from '../../../../../../models/global_notification_model';
+import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
+
 import Form from '../../../../../ascribe_forms/form';
 import Property from '../../../../../ascribe_forms/property';
 import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
 
-import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
 import InputFineuploader from '../../../../../ascribe_forms/input_fineuploader';
+import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
+
 import AscribeSpinner from '../../../../../ascribe_spinner';
 
-import GlobalNotificationModel from '../../../../../../models/global_notification_model';
-import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
-
-import AppConstants from '../../../../../../constants/application_constants';
 import ApiUrls from '../../../../../../constants/api_urls';
+import AppConstants from '../../../../../../constants/application_constants';
+import { validationParts, validationTypes } from '../../../../../../constants/uploader_constants';
 
 import requests from '../../../../../../utils/requests';
 
@@ -192,11 +194,12 @@ const PRRegisterPieceForm = React.createClass({
 
     render() {
         const { location } = this.props;
+        const maxThumbnailSize = validationTypes.workThumbnail.sizeLimit / 1000000;
 
         return (
             <div className="register-piece--form">
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered"
                     ref="registerPieceForm">
                     <Property
@@ -233,7 +236,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                 </Form>
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered"
                     ref="additionalDataForm">
                     <Property
@@ -285,7 +288,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                 </Form>
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered"
                     ref="uploadersForm">
                     <Property
@@ -303,8 +306,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'digitalwork'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
+                                itemLimit: validationTypes.registerWork.itemLimit,
+                                sizeLimit: validationTypes.additionalData.sizeLimit,
                                 allowedExtensions: ['pdf']
                             }}
                             location={location}
@@ -316,7 +319,7 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                     <Property
                         name="thumbnailKey"
-                        label={getLangText('Featured Cover photo (max 5MB)')}>
+                        label={`${getLangText('Featured Cover photo')} (max ${maxThumbnailSize}MB)`}>
                         <InputFineuploader
                             fileInputElement={UploadButton()}
                             createBlobRoutine={{
@@ -329,9 +332,9 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'thumbnail'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
-                                allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                                itemLimit: validationTypes.workThumbnail.itemLimit,
+                                sizeLimit: validationTypes.workThumbnail.sizeLimit,
+                                allowedExtensions: validationParts.allowedExtensions.images
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -354,8 +357,8 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'otherdata'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
+                                itemLimit: validationParts.itemLimit.single,
+                                sizeLimit: validationTypes.additionalData.sizeLimit
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -376,9 +379,9 @@ const PRRegisterPieceForm = React.createClass({
                                 fileClass: 'otherdata'
                             }}
                             validation={{
-                                itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
-                                sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
-                                allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
+                                itemLimit: validationParts.itemLimit.single,
+                                sizeLimit: validationTypes.additionalData.sizeLimit,
+                                allowedExtensions: validationParts.allowedExtensions.images
                             }}
                             location={location}
                             fileClassToUpload={{
@@ -389,12 +392,11 @@ const PRRegisterPieceForm = React.createClass({
                     </Property>
                 </Form>
                 <Form
-                    buttons={{}}
+                    buttons={null}
                     className="ascribe-form-bordered">
                     <Property
                         name="terms"
-                        className="ascribe-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
+                        className="ascribe-property-collapsible-toggle">
                         <span>
                             {getLangText('By submitting this form, you agree to the') + ' '}
                             <a
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index a34e7968..dcb95892 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -1,70 +1,47 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import EventActions from '../../../../actions/event_actions';
 
 import UserStore from '../../../../stores/user_store';
 import UserActions from '../../../../actions/user_actions';
 
-import WhitelabelActions from '../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../stores/whitelabel_store';
-
-import AppRouteWrapper from '../../../app_route_wrapper';
 import Hero from './components/pr_hero';
-import Header from '../../../header';
-import GlobalNotification from '../../../global_notification';
 
-import { getSubdomain, mergeOptions } from '../../../../utils/general_utils';
+import AppBase from '../../../app_base';
+import AppRouteWrapper from '../../../app_route_wrapper';
+import Footer from '../../../footer';
+import Header from '../../../header';
+
+import { getSubdomain } from '../../../../utils/general_utils';
 import { getCookie } from '../../../../utils/fetch_api_utils';
 
 
 let PRApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelActions.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { children, history, routes } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
+        const path = activeRoute && activeRoute.path;
 
         let style = {};
         let header;
         if (currentUser && currentUser.email && history.isActive(`/pieces/${getCookie(currentUser.email)}`)) {
             header = (<Hero currentUser={currentUser} />);
             style = { paddingTop: '0 !important' };
-        } else if(currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
+        } else if (currentUser && (currentUser.is_admin || currentUser.is_jury || currentUser.is_judge)) {
             header = (
                 <Header
                     currentUser={currentUser}
@@ -77,23 +54,20 @@ let PRApp = React.createClass({
         }
 
         return (
-            <div>
+            <div
+                style={style}
+                className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
-                <div
-                    style={style}
-                    className={'container ascribe-prize-app client--' + subdomain}>
-                    <AppRouteWrapper
-                        currentUser={currentUser}
-                        whitelabel={whitelabel}>
-                        {/* Routes are injected here */}
-                        {children}
-                    </AppRouteWrapper>
-                    <GlobalNotification />
-                    <div id="modal" className="container"></div>
-                </div>
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
+                    {/* Routes are injected here */}
+                    {children}
+                </AppRouteWrapper>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
 });
 
-export default PRApp;
+export default AppBase(PRApp);
diff --git a/js/components/whitelabel/prize/prize_routes.js b/js/components/whitelabel/prize/prize_routes.js
index e727b3e4..8d380222 100644
--- a/js/components/whitelabel/prize/prize_routes.js
+++ b/js/components/whitelabel/prize/prize_routes.js
@@ -31,74 +31,116 @@ import { AuthPrizeRoleRedirect } from './portfolioreview/components/pr_routes/pr
 const ROUTES = {
     sluice: (
         <Route path='/' component={SPApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLanding)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPLoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPSignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SPSignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPRegisterPiece)}
-                headerTitle='+ NEW WORK'/>
+                headerTitle='+ NEW WORK'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='COLLECTION'/>
-            <Route path='pieces/:pieceId' component={SluicePieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                headerTitle='COLLECTION'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={SluicePieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     portfolioreview: (
         <Route path='/' component={PRApp}>
-            <IndexRoute component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }))(PRLanding)}
+                hideFooter />
             <Route
                 path='register_piece'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PRRegisterPiece)}/>
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PRRegisterPiece)}
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
-                headerTitle='SUBMISSIONS'/>
+                headerTitle='SUBMISSIONS'
+                hideFooter />
             <Route
                 path='login'
                 component={ProxyHandler(
                     AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
                     AuthRedirect({to: '/register_piece', when: 'loggedIn'})
-                )(SPLoginContainer)} />
+                )(SPLoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
                 component={ProxyHandler(
                     AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
                     AuthRedirect({to: '/register_piece', when: 'loggedIn'})
-                )(SPSignupContainer)} />
+                )(SPSignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
                 component={ProxyHandler(
                     AuthPrizeRoleRedirect({ to: '/collection', when: ['is_admin', 'is_judge', 'is_jury'] }),
                     AuthRedirect({to: '/register_piece', when: 'loggedIn'})
-                )(PasswordResetContainer)} />
+                )(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}/>
-            <Route path='pieces/:pieceId' component={SPPieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPSettingsContainer)}
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={SPPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     )
 };
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
index 4ab94091..b5103bf1 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@@ -52,8 +52,9 @@ let AccordionListItemPrize = React.createClass({
     },
 
     handleSubmitPrizeSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
@@ -133,8 +134,9 @@ let AccordionListItemPrize = React.createClass({
     },
 
     refreshPieceData() {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     onSelectChange() {
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index c660103a..a2141d0e 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -14,10 +14,10 @@ import PrizeStore from '../../stores/prize_store';
 import PrizeRatingActions from '../../actions/prize_rating_actions';
 import PrizeRatingStore from '../../stores/prize_rating_store';
 
-import PieceActions from '../../../../../../actions/piece_actions';
-import PieceStore from '../../../../../../stores/piece_store';
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
+import PieceActions from '../../../../../../actions/piece_actions';
+import PieceStore from '../../../../../../stores/piece_store';
 
 import Piece from '../../../../../../components/ascribe_detail/piece';
 import Note from '../../../../../../components/ascribe_detail/note';
@@ -64,16 +64,7 @@ let PrizePieceContainer = React.createClass({
     mixins: [ReactError],
 
     getInitialState() {
-        //FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data
-        //       It should instead use something like getInitialState() where that call also resets the state.
-        return {};
-    },
-
-    componentWillMount() {
-        // Every time we enter the piece detail page, just reset the piece
-        // store as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PieceActions.updatePiece({});
+        return PieceStore.getInitialState();
     },
 
     componentDidMount() {
@@ -83,18 +74,19 @@ let PrizePieceContainer = React.createClass({
     },
 
     // This is done to update the container when the user clicks on the prev or next
-    // button to update the URL parameter (and therefore to switch pieces)
+    // button to update the URL parameter (and therefore to switch pieces) or
+    // when the user clicks on a notification while being in another piece view
     componentWillReceiveProps(nextProps) {
         if (this.props.params.pieceId !== nextProps.params.pieceId) {
-            PieceActions.updatePiece({});
+            PieceActions.flushPiece();
             this.loadPiece(nextProps.params.pieceId);
         }
     },
 
     componentDidUpdate() {
-        const { pieceError } = this.state;
+        const { pieceMeta: { err: pieceErr } } = this.state;
 
-        if (pieceError && pieceError.status === 404) {
+        if (pieceErr && pieceErr.status === 404) {
             this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
         }
     },
@@ -111,25 +103,25 @@ let PrizePieceContainer = React.createClass({
         const { currentUser } = this.props;
         const { piece } = this.state;
 
-        if (piece && piece.notifications && piece.notifications.length > 0) {
+        if (piece.notifications && piece.notifications.length > 0) {
             return (
                 <ListRequestActions
                     pieceOrEditions={piece}
                     currentUser={currentUser}
                     handleSuccess={this.loadPiece}
-                    notifications={piece.notifications}/>);
+                    notifications={piece.notifications} />);
         }
     },
 
     loadPiece(pieceId = this.props.params.pieceId) {
-        PieceActions.fetchOne(pieceId);
+        PieceActions.fetchPiece(pieceId);
     },
 
     render() {
         const { currentUser, selectedPrizeActionButton } = this.props;
         const { piece } = this.state;
 
-        if (piece && piece.id) {
+        if (piece.id) {
             /*
 
                 This really needs a refactor!
@@ -140,16 +132,19 @@ let PrizePieceContainer = React.createClass({
             // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
             let artistName;
             if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) {
-                artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>;
+                artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true" />;
                 setDocumentTitle(piece.title);
             } else {
                 artistName = piece.artist_name;
-                setDocumentTitle([artistName, piece.title].join(', '));
+                setDocumentTitle(`${artistName}, ${piece.title}`);
             }
 
             // Only show the artist email if you are a judge and the piece is shortlisted
-            const artistEmail = (currentUser.is_judge && piece.selected ) ?
-                <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } /> : null;
+            const artistEmail = currentUser.is_judge && piece.selected ? (
+                <DetailProperty
+                    label={getLangText('REGISTREE')}
+                    value={piece.user_registered} />
+            ) : null;
 
             return (
                 <Piece
@@ -159,16 +154,16 @@ let PrizePieceContainer = React.createClass({
                         <div className="ascribe-detail-header">
                             <NavigationHeader
                                 piece={piece}
-                                currentUser={currentUser}/>
+                                currentUser={currentUser} />
 
                             <h1 className="ascribe-detail-title">{piece.title}</h1>
                             <DetailProperty label={getLangText('BY')} value={artistName} />
                             <DetailProperty label={getLangText('DATE')} value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
                             {artistEmail}
                             {this.getActions()}
-                            <hr/>
+                            <hr />
                         </div>
-                        }
+                    }
                     subheader={
                         <PrizePieceRatings
                             loadPiece={this.loadPiece}
@@ -191,16 +186,15 @@ let PrizePieceContainer = React.createClass({
 
 let NavigationHeader = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
-        currentUser: React.PropTypes.object
+        currentUser: React.PropTypes.object.isRequired,
+        piece: React.PropTypes.object.isRequired
     },
 
     render() {
         const { currentUser, piece } = this.props;
 
-        if (currentUser && currentUser.email && currentUser.is_judge && currentUser.is_jury &&
-            !currentUser.is_admin && piece && piece.navigation) {
-            let nav = piece.navigation;
+        if (currentUser.email && currentUser.is_judge && currentUser.is_jury && !currentUser.is_admin && piece.navigation) {
+            const nav = piece.navigation;
 
             return (
                 <div style={{marginBottom: '1em'}}>
@@ -220,17 +214,19 @@ let NavigationHeader = React.createClass({
                     <hr/>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
 
 let PrizePieceRatings = React.createClass({
     propTypes: {
-        loadPiece: React.PropTypes.func,
-        piece: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        loadPiece: React.PropTypes.func.isRequired,
+        piece: React.PropTypes.object.isRequired,
+
         selectedPrizeActionButton: React.PropTypes.func
     },
 
@@ -243,12 +239,18 @@ let PrizePieceRatings = React.createClass({
     },
 
     componentDidMount() {
-        PieceListStore.listen(this.onChange);
-        PrizeStore.listen(this.onChange);
         PrizeRatingStore.listen(this.onChange);
+        PrizeStore.listen(this.onChange);
+        PieceListStore.listen(this.onChange);
 
         PrizeActions.fetchPrize();
-        this.fetchPrizeRatings();
+        this.fetchRatingsIfAuthorized();
+    },
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.currentUser.email !== this.props.currentUser.email) {
+            this.fetchRatingsIfAuthorized();
+        }
     },
 
     componentWillUnmount() {
@@ -263,7 +265,7 @@ let PrizePieceRatings = React.createClass({
     // with the problem.
     onChange(state) {
         if (state.prize && state.prize.active_round != this.state.prize.active_round) {
-            this.fetchPrizeRatings(state);
+            this.fetchRatingsIfAuthorized(state);
         }
 
         this.setState(state);
@@ -278,9 +280,19 @@ let PrizePieceRatings = React.createClass({
         }
     },
 
-    fetchPrizeRatings(state = this.state) {
-        PrizeRatingActions.fetchOne(this.props.piece.id, state.prize.active_round);
-        PrizeRatingActions.fetchAverage(this.props.piece.id, state.prize.active_round);
+    fetchRatingsIfAuthorized(state = this.state) {
+        const {
+            currentUser: {
+                is_admin: isAdmin,
+                is_judge: isJudge,
+                is_jury: isJury
+            },
+            piece: { id: pieceId } } = this.props;
+
+        if (state.prize && 'active_round' in state.prize && (isAdmin || isJudge || isJury)) {
+            PrizeRatingActions.fetchOne(pieceId, state.prize.active_round);
+            PrizeRatingActions.fetchAverage(pieceId, state.prize.active_round);
+        }
     },
 
     onRatingClick(event, args) {
@@ -305,9 +317,10 @@ let PrizePieceRatings = React.createClass({
     },
 
     refreshPieceData() {
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
         this.props.loadPiece();
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     onSelectChange() {
@@ -324,7 +337,7 @@ let PrizePieceRatings = React.createClass({
     },
 
     render() {
-        if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
+        if (this.props.piece.id && this.props.currentUser.is_judge && this.state.average) {
             // Judge sees shortlisting, average and per-jury notes
             return (
                 <div>
@@ -356,7 +369,7 @@ let PrizePieceRatings = React.createClass({
                                 size='md'
                                 step={0.5}
                                 rating={this.state.average}
-                                ratingAmount={5}/>
+                                ratingAmount={5} />
                         </div>
                         <hr />
                         {this.state.ratings.map((item, i) => {
@@ -381,7 +394,7 @@ let PrizePieceRatings = React.createClass({
                                             size='sm'
                                             step={0.5}
                                             rating={item.rating}
-                                            ratingAmount={5}/>
+                                            ratingAmount={5} />
                                     </span>
                                     <span> {item.user}</span>
                                         {note}
@@ -392,7 +405,7 @@ let PrizePieceRatings = React.createClass({
                         <hr />
                     </CollapsibleParagraph>
                 </div>);
-        } else if (this.props.currentUser && this.props.currentUser.is_jury) {
+        } else if (this.props.currentUser.is_jury) {
             // Jury can set rating and note
             return (
                 <CollapsibleParagraph
@@ -410,14 +423,14 @@ let PrizePieceRatings = React.createClass({
                             ratingAmount={5} />
                         </div>
                     <Note
-                        id={() => {return {'piece_id': this.props.piece.id}; }}
+                        id={() => ({ 'piece_id': this.props.piece.id })}
                         label={getLangText('Jury note')}
-                        defaultValue={this.props.piece && this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null}
+                        defaultValue={this.props.piece.note_from_user || null}
                         placeholder={getLangText('Enter your comments ...')}
                         editable={true}
                         successMessage={getLangText('Jury note saved')}
                         url={ApiUrls.notes}
-                        currentUser={this.props.currentUser}/>
+                        currentUser={this.props.currentUser} />
                 </CollapsibleParagraph>);
         } else {
             return null;
@@ -428,39 +441,40 @@ let PrizePieceRatings = React.createClass({
 
 let PrizePieceDetails = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object
+        piece: React.PropTypes.object.isRequired
     },
 
     render() {
         const { piece } = this.props;
 
-        if (piece &&
-            piece.prize &&
-            piece.prize.name &&
-            Object.keys(piece.extra_data).length !== 0) {
+        if (piece.prize && piece.prize.name && Object.keys(piece.extra_data).length) {
             return (
                 <CollapsibleParagraph
                     title={getLangText('Prize Details')}
                     defaultExpanded={true}>
-                    <Form ref='form'>
-                        {Object.keys(piece.extra_data).sort().map((data) => {
-                            // Remove leading number (for sorting), if any, and underscores with spaces
-                            let label = data.replace(/^\d-/, '').replace(/_/g, ' ');
-                            const value = piece.extra_data[data] || 'N/A';
+                    <Form>
+                        {Object
+                            .keys(piece.extra_data)
+                            .sort()
+                            .map((data) => {
+                                // Remove leading number (for sorting), if any, and underscores with spaces
+                                const label = data.replace(/^\d-/, '').replace(/_/g, ' ');
+                                const value = piece.extra_data[data] || 'N/A';
 
-                            return (
-                                <Property
-                                    key={label}
-                                    name={data}
-                                    label={label}
-                                    editable={false}
-                                    overrideForm={true}>
-                                    <InputTextAreaToggable
-                                        rows={1}
-                                        defaultValue={value}/>
-                                </Property>
-                            );
-                        })}
+                                return (
+                                    <Property
+                                        key={label}
+                                        name={data}
+                                        label={label}
+                                        editable={false}
+                                        overrideForm={true}>
+                                        <InputTextAreaToggable
+                                            rows={1}
+                                            defaultValue={value} />
+                                    </Property>
+                                );
+                            })
+                        }
                         <FurtherDetailsFileuploader
                             submitFile={() => {}}
                             setIsUploadReady={() => {}}
@@ -473,8 +487,9 @@ let PrizePieceDetails = React.createClass({
                     </Form>
                 </CollapsibleParagraph>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index 207fac30..1e2c7c9c 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -75,12 +75,11 @@ let PrizePieceList = React.createClass({
             <PieceList
                 ref="list"
                 {...this.props}
-                redirectTo="/register_piece"
                 accordionListItemType={AccordionListItemPrize}
-                orderParams={orderParams}
-                orderBy={currentUser.is_jury ? 'rating' : null}
+                customSubmitButton={this.getButtonSubmit()}
                 filterParams={[]}
-                customSubmitButton={this.getButtonSubmit()} />
+                orderParams={orderParams}
+                orderBy={currentUser.is_jury ? 'rating' : null} />
         );
     }
 });
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
index fcb304ca..12e6af27 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_register_piece.js
@@ -75,8 +75,7 @@ let PrizeRegisterPiece = React.createClass({
                     </Property>
                     <Property
                         name="terms"
-                        className="ascribe-property-collapsible-toggle"
-                        style={{paddingBottom: 0}}>
+                        className="ascribe-property-collapsible-toggle">
                         <InputCheckbox>
                             <span>
                                 {' ' + getLangText('I agree to the Terms of Service the art price') + ' '}
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index 9ca99ca3..7a7c5cbb 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -1,66 +1,34 @@
 'use strict';
 
 import React from 'react';
-
-import UserStore from '../../../../stores/user_store';
-import UserActions from '../../../../actions/user_actions';
-
-import WhitelabelActions from '../../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../../stores/whitelabel_store';
+import classNames from 'classnames';
 
 import Hero from './components/prize_hero';
 
+import AppBase from '../../../app_base';
 import AppRouteWrapper from '../../../app_route_wrapper';
-import Header from '../../../header';
 import Footer from '../../../footer';
-import GlobalNotification from '../../../global_notification';
+import Header from '../../../header';
 
-import { getSubdomain, mergeOptions } from '../../../../utils/general_utils';
+import { getSubdomain } from '../../../../utils/general_utils';
 
 
 let PrizeApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelActions.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { children, history, routes } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
-
-        // The second element of routes is always the active component object, where we can
-        // extract the path.
-        let path = routes[1] ? routes[1].path : null;
+        const path = activeRoute && activeRoute.path;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
@@ -76,7 +44,7 @@ let PrizeApp = React.createClass({
         }
 
         return (
-            <div className={'container ascribe-prize-app client--' + subdomain}>
+            <div className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
                 <AppRouteWrapper
                     currentUser={currentUser}
@@ -84,12 +52,10 @@ let PrizeApp = React.createClass({
                     {/* Routes are injected here */}
                     {children}
                 </AppRouteWrapper>
-                <Footer />
-                <GlobalNotification />
-                <div id="modal" className="container"></div>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
 });
 
-export default PrizeApp;
+export default AppBase(PrizeApp);
diff --git a/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js b/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
index 6c478f3c..d3544f71 100644
--- a/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
+++ b/js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
@@ -14,6 +14,18 @@ class PrizeRatingStore {
         });
     }
 
+    getInitialState() {
+        this.ratings = [];
+        this.currentRating = null;
+        this.average = null;
+
+        return {
+            ratings: this.ratings,
+            currentRating: this.currentRating,
+            average: this.average
+        };
+    }
+
     onUpdatePrizeRatings(ratings) {
         this.ratings = ratings;
     }
@@ -30,18 +42,6 @@ class PrizeRatingStore {
     onResetPrizeRatings() {
         this.getInitialState();
     }
-
-    getInitialState() {
-        this.ratings = [];
-        this.currentRating = null;
-        this.average = null;
-
-        return {
-            ratings: this.ratings,
-            currentRating: this.currentRating,
-            average: this.average
-        };
-    }
 }
 
-export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');
\ No newline at end of file
+export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
index 78056a1b..41c979d9 100644
--- a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 import Moment from 'moment';
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
index f360c932..3a9b3943 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
index 386f2145..421eb3d3 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -26,7 +26,7 @@ let Vivi23Landing = React.createClass({
 
     render() {
         return (
-            <div className="container ascribe-form-wrapper vivi23-landing">
+            <div className="ascribe-form-wrapper vivi23-landing">
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row vivi23-landing--header">
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
index bb64fc9a..e8bcabfc 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import React from 'react';
 
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
index 3ed7830e..0eb83d0c 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
@@ -46,8 +46,9 @@ let CylandAccordionListItem = React.createClass({
     },
 
     handleSubmitSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
index d0315979..0b18ce9e 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
@@ -44,7 +44,7 @@ let CylandPieceContainer = React.createClass({
 
     getInitialState() {
         return mergeOptions(
-            PieceStore.getState(),
+            PieceStore.getInitialState(),
             PieceListStore.getState()
         );
     },
@@ -53,14 +53,17 @@ let CylandPieceContainer = React.createClass({
         PieceStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
-        // Every time we enter the piece detail page, just reset the piece
-        // store as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PieceActions.updatePiece({});
-
         this.loadPiece();
     },
 
+    // We need this for when the user clicks on a notification while being in another piece view
+    componentWillReceiveProps(nextProps) {
+        if (this.props.params.pieceId !== nextProps.params.pieceId) {
+            PieceActions.flushPiece();
+            this.loadPiece();
+        }
+    },
+
     componentWillUnmount() {
         PieceStore.unlisten(this.onChange);
         PieceListStore.listen(this.onChange);
@@ -71,12 +74,13 @@ let CylandPieceContainer = React.createClass({
     },
 
     loadPiece() {
-        PieceActions.fetchOne(this.props.params.pieceId);
+        PieceActions.fetchPiece(this.props.params.pieceId);
     },
 
     handleDeleteSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         // since we're deleting a piece, we just need to close
         // all editions dialogs and not reload them
@@ -90,10 +94,12 @@ let CylandPieceContainer = React.createClass({
     },
 
     render() {
-        if (this.state.piece && this.state.piece.id) {
+        const { piece } = this.state;
+
+        if (piece.id) {
             const { currentUser } = this.props;
 
-            setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
+            setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
 
             return (
                 <WalletPieceContainer
@@ -107,14 +113,13 @@ let CylandPieceContainer = React.createClass({
                         title={getLangText('Further Details')}
                         defaultExpanded={true}>
                         <CylandAdditionalDataForm
-                            piece={this.state.piece}
-                            disabled={!this.state.piece.acl.acl_edit}
+                            piece={piece}
+                            disabled={!piece.acl.acl_edit}
                             isInline={true} />
                     </CollapsibleParagraph>
                 </WalletPieceContainer>
             );
-        }
-        else {
+        } else {
             return (
                 <div className="fullpage-spinner">
                     <AscribeSpinner color='dark-blue' size='lg' />
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
index 93cc515a..c41caa76 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
@@ -23,9 +23,10 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_
 
 let CylandAdditionalDataForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
+
         disabled: React.PropTypes.bool,
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool
     },
 
@@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({
     },
 
     handleSuccess() {
-        let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({
     },
 
     render() {
-        let { piece, isInline, disabled, handleSuccess, location } = this.props;
-        let buttons, spinner, heading;
+        const { disabled, handleSuccess, isInline, piece } = this.props;
 
-        if(!isInline) {
+        let buttons;
+        let spinner;
+        let heading;
+
+        if (!isInline) {
             buttons = (
                 <button
                     type="submit"
@@ -87,7 +91,7 @@ let CylandAdditionalDataForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        <AscribeSpinner color='dark-blue' size='md'/>
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -101,13 +105,15 @@ let CylandAdditionalDataForm = React.createClass({
             );
         }
 
-        if(piece && piece.id) {
+        if (piece.id) {
+            const { extra_data: extraData = {} } = piece;
+
             return (
                 <Form
                     disabled={disabled}
                     className="ascribe-form-bordered"
                     ref='form'
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
                     handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
@@ -116,65 +122,66 @@ let CylandAdditionalDataForm = React.createClass({
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}
-                        expanded={!disabled || !!piece.extra_data.artist_bio}>
+                        expanded={!disabled || !!extraData.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.artist_bio}
-                            placeholder={getLangText('Enter the artist\'s biography...')}/>
+                            defaultValue={extraData.artist_bio}
+                            placeholder={getLangText('Enter the artist\'s biography...')} />
                     </Property>
                     <Property
                         name='artist_contact_information'
                         label={getLangText('Artist Contact Information')}
-                        expanded={!disabled || !!piece.extra_data.artist_contact_information}>
+                        expanded={!disabled || !!extraData.artist_contact_information}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.artist_contact_information}
-                            placeholder={getLangText('Enter the artist\'s contact information...')}/>
+                            convertLinks
+                            defaultValue={extraData.artist_contact_information}
+                            placeholder={getLangText('Enter the artist\'s contact information...')} />
                     </Property>
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Conceptual Overview')}
-                        expanded={!disabled || !!piece.extra_data.conceptual_overview}>
+                        expanded={!disabled || !!extraData.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.conceptual_overview}
-                            placeholder={getLangText('Enter a conceptual overview...')}/>
+                            defaultValue={extraData.conceptual_overview}
+                            placeholder={getLangText('Enter a conceptual overview...')} />
                     </Property>
                     <Property
                         name='medium'
                         label={getLangText('Medium (technical specifications)')}
-                        expanded={!disabled || !!piece.extra_data.medium}>
+                        expanded={!disabled || !!extraData.medium}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.medium}
-                            placeholder={getLangText('Enter the medium (and other technical specifications)...')}/>
+                            defaultValue={extraData.medium}
+                            placeholder={getLangText('Enter the medium (and other technical specifications)...')} />
                     </Property>
                     <Property
                         name='size_duration'
                         label={getLangText('Size / Duration')}
-                        expanded={!disabled || !!piece.extra_data.size_duration}>
+                        expanded={!disabled || !!extraData.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.size_duration}
-                            placeholder={getLangText('Enter the size / duration...')}/>
+                            defaultValue={extraData.size_duration}
+                            placeholder={getLangText('Enter the size / duration...')} />
                     </Property>
                     <Property
                         name='display_instructions'
                         label={getLangText('Display instructions')}
-                        expanded={!disabled || !!piece.extra_data.display_instructions}>
+                        expanded={!disabled || !!extraData.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.display_instructions}
-                            placeholder={getLangText('Enter the display instructions...')}/>
+                            defaultValue={extraData.display_instructions}
+                            placeholder={getLangText('Enter the display instructions...')} />
                     </Property>
                     <Property
                         name='additional_details'
                         label={getLangText('Additional details')}
-                        expanded={!disabled || !!piece.extra_data.additional_details}>
+                        expanded={!disabled || !!extraData.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.additional_details}
-                            placeholder={getLangText('Enter additional details...')}/>
+                            defaultValue={extraData.additional_details}
+                            placeholder={getLangText('Enter additional details...')} />
                     </Property>
                     <FurtherDetailsFileuploader
                         label={getLangText('Additional files (e.g. still images, pdf)')}
@@ -189,7 +196,7 @@ let CylandAdditionalDataForm = React.createClass({
         } else {
             return (
                 <div className="ascribe-loading-position">
-                    <AscribeSpinner color='dark-blue' size='md'/>
+                    <AscribeSpinner color='dark-blue' size='md' />
                 </div>
             );
         }
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 7919fec4..197673fd 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -26,7 +26,7 @@ let CylandLanding = React.createClass({
         setDocumentTitle('CYLAND MediaArtLab');
 
         return (
-            <div className="container ascribe-form-wrapper cyland-landing">
+            <div className="ascribe-form-wrapper cyland-landing">
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
index 76556139..1c2420d2 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
@@ -8,7 +8,6 @@ import CylandAccordionListItem from './cyland_accordion_list/cyland_accordion_li
 import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
-
 let CylandPieceList = React.createClass({
     propTypes: {
         // Provided from PrizeApp
@@ -19,23 +18,36 @@ let CylandPieceList = React.createClass({
         location: React.PropTypes.object
     },
 
+    shouldRedirect(pieceCount) {
+        const { currentUser: { email: userEmail },
+                whitelabel: {
+                    user: whitelabelAdminEmail
+                } } = this.props;
+
+         return userEmail !== whitelabelAdminEmail && !pieceCount;
+    },
+
     render() {
         setDocumentTitle(getLangText('Collection'));
 
         return (
-            <div>
-                <PieceList
-                    {...this.props}
-                    redirectTo="/register_piece?slide_num=0"
-                    accordionListItemType={CylandAccordionListItem}
-                    filterParams={[{
-                        label: getLangText('Show works I have'),
-                        items: [{
-                            key: 'acl_loaned',
-                            label: getLangText('loaned to Cyland')
-                        }]
-                    }]} />
-            </div>
+            <PieceList
+                {...this.props}
+                accordionListItemType={CylandAccordionListItem}
+                filterParams={[{
+                    label: getLangText('Show works I have'),
+                    items: [{
+                        key: 'acl_loaned',
+                        label: getLangText('loaned to Cyland')
+                    }]
+                }]}
+                redirectTo={{
+                    pathname: '/register_piece',
+                    query: {
+                        'slide_num': 0
+                    }
+                }}
+                shouldRedirect={this.shouldRedirect} />
         );
     }
 });
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index 3c828299..7a0d2b66 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -49,7 +49,7 @@ let CylandRegisterPiece = React.createClass({
     getInitialState(){
         return mergeOptions(
             PieceListStore.getState(),
-            PieceStore.getState(),
+            PieceStore.getInitialState(),
             {
                 step: 0
             });
@@ -68,8 +68,8 @@ let CylandRegisterPiece = React.createClass({
         //
         // We're using 'in' here as we want to know if 'piece_id' is present in the url,
         // we don't care about the value.
-        if (queryParams && 'piece_id' in queryParams) {
-            PieceActions.fetchOne(queryParams.piece_id);
+        if ('piece_id' in queryParams) {
+            PieceActions.fetchPiece(queryParams.piece_id);
         }
     },
 
@@ -82,31 +82,26 @@ let CylandRegisterPiece = React.createClass({
         this.setState(state);
     },
 
-    handleRegisterSuccess(response){
+    handleRegisterSuccess(response) {
         this.refreshPieceList();
 
-        // also start loading the piece for the next step
+        // Also load the newly registered piece for the next step
         if (response && response.piece) {
-            PieceActions.updatePiece({});
             PieceActions.updatePiece(response.piece);
         }
 
-        this.incrementStep();
-
-        this.refs.slidesContainer.nextSlide({ piece_id: response.piece.id });
+        this.nextSlide({ piece_id: response.piece.id });
     },
 
     handleAdditionalDataSuccess() {
         // We need to refetch the piece again after submitting the additional data
-        // since we want it's otherData to be displayed when the user choses to click
+        // since we want its otherData to be displayed when the user choses to click
         // on the browsers back button.
-        PieceActions.fetchOne(this.state.piece.id);
+        PieceActions.fetchPiece(this.state.piece.id);
 
         this.refreshPieceList();
 
-        this.incrementStep();
-
-        this.refs.slidesContainer.nextSlide();
+        this.nextSlide();
     },
 
     handleLoanSuccess(response) {
@@ -115,29 +110,22 @@ let CylandRegisterPiece = React.createClass({
 
         this.refreshPieceList();
 
-        PieceActions.fetchOne(this.state.piece.id);
-
         this.history.push(`/pieces/${this.state.piece.id}`);
     },
 
-    // We need to increase the step to lock the forms that are already filled out
-    incrementStep() {
-        // also increase step
-        let newStep = this.state.step + 1;
+    nextSlide(queryParams) {
+        // We need to increase the step to lock the forms that are already filled out
         this.setState({
-            step: newStep
+            step: this.state.step + 1
         });
+
+        this.refs.slidesContainer.nextSlide(queryParams);
     },
 
     refreshPieceList() {
-        PieceListActions.fetchPieceList(
-            this.state.page,
-            this.state.pageSize,
-            this.state.searchTerm,
-            this.state.orderBy,
-            this.state.orderAsc,
-            this.state.filterBy
-        );
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     render() {
@@ -145,8 +133,7 @@ let CylandRegisterPiece = React.createClass({
         const { piece, step } = this.state;
 
         const today = new Moment();
-        const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment();
-        datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years');
+        const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment().add(1000, 'years');
 
         const loanHeading = getLangText('Loan to Cyland archive');
         const loanButtons = (
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
index 53f04c41..41853e85 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
@@ -48,8 +48,9 @@ let IkonotvAccordionListItem = React.createClass({
     },
 
     handleSubmitSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
index 60e5f10d..33f70aff 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
@@ -75,7 +75,7 @@ let IkonotvContractNotifications = React.createClass({
                     <a href={blob.url_safe} target="_blank">
                         <Glyphicon glyph='download-alt'/>
                         <span style={{padding: '0.3em'}}>
-                            Download contract
+                            {getLangText('Download contract')}
                         </span>
                     </a>
                 </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
index 68e3c2eb..61a30572 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
@@ -8,12 +8,12 @@ import EditionListActions from '../../../../../../actions/edition_list_actions';
 import GlobalNotificationModel from '../../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
-import PieceActions from '../../../../../../actions/piece_actions';
-import PieceStore from '../../../../../../stores/piece_store';
-
 import PieceListStore from '../../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../../actions/piece_list_actions';
 
+import PieceActions from '../../../../../../actions/piece_actions';
+import PieceStore from '../../../../../../stores/piece_store';
+
 import IkonotvSubmitButton from '../ikonotv_buttons/ikonotv_submit_button';
 
 import IkonotvArtistDetailsForm from '../ikonotv_forms/ikonotv_artist_details_form';
@@ -45,8 +45,8 @@ let IkonotvPieceContainer = React.createClass({
 
     getInitialState() {
         return mergeOptions(
-            PieceStore.getState(),
-            PieceListStore.getState()
+            PieceListStore.getState(),
+            PieceStore.getInitialState()
         );
     },
 
@@ -54,19 +54,14 @@ let IkonotvPieceContainer = React.createClass({
         PieceStore.listen(this.onChange);
         PieceListStore.listen(this.onChange);
 
-        // Every time we enter the piece detail page, just reset the piece
-        // store as it will otherwise display wrong/old data once the user loads
-        // the piece detail a second time
-        PieceActions.updatePiece({});
-
         this.loadPiece();
     },
 
-     // We need this for when the user clicks on a notification while being in another piece view
+    // We need this for when the user clicks on a notification while being in another piece view
     componentWillReceiveProps(nextProps) {
         if (this.props.params.pieceId !== nextProps.params.pieceId) {
-            PieceActions.updatePiece({});
-            PieceActions.fetchOne(nextProps.params.pieceId);
+            PieceActions.flushPiece();
+            this.loadPiece();
         }
     },
 
@@ -80,12 +75,13 @@ let IkonotvPieceContainer = React.createClass({
     },
 
     loadPiece() {
-        PieceActions.fetchOne(this.props.params.pieceId);
+        PieceActions.fetchPiece(this.props.params.pieceId);
     },
 
     handleDeleteSuccess(response) {
-        PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
-                                        this.state.orderBy, this.state.orderAsc, this.state.filterBy);
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
         // since we're deleting a piece, we just need to close
         // all editions dialogs and not reload them
@@ -110,7 +106,7 @@ let IkonotvPieceContainer = React.createClass({
             </CollapsibleParagraph>
         );
 
-        if (piece.extra_data && Object.keys(piece.extra_data).length > 0 && piece.acl) {
+        if (piece.extra_data && Object.keys(piece.extra_data).length && piece.acl) {
             furtherDetails = (
                 <CollapsibleParagraph
                     title={getLangText('Further Details')}
@@ -127,8 +123,8 @@ let IkonotvPieceContainer = React.createClass({
             );
         }
 
-        if (piece && piece.id) {
-            setDocumentTitle([piece.artist_name, piece.title].join(', '));
+        if (piece.id) {
+            setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
 
             return (
                 <WalletPieceContainer
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
index 0b97c8dd..49ead8ec 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
@@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 let IkonotvArtistDetailsForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
 
         disabled: React.PropTypes.bool,
-
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool
     },
 
@@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -53,20 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({
     },
 
     handleSuccess() {
-        let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Artist details successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        let buttons, spinner, heading;
-        let { isInline, handleSuccess } = this.props;
+        const { disabled, isInline, handleSuccess, piece } = this.props;
+
+        let buttons;
+        let spinner;
+        let heading;
 
         if (!isInline) {
             buttons = (
                 <button
                     type="submit"
                     className="btn btn-default btn-wide"
-                    disabled={this.props.disabled}>
+                    disabled={disabled}>
                     {getLangText('Proceed to loan')}
                 </button>
             );
@@ -74,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        <AscribeSpinner color='dark-blue' size='md'/>
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -88,13 +90,15 @@ let IkonotvArtistDetailsForm = React.createClass({
             );
         }
 
-        if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+        if (piece.id) {
+            const { extra_data: extraData = {} } = piece;
+
             return (
                 <Form
-                    disabled={this.props.disabled}
+                    disabled={disabled}
                     className="ascribe-form-bordered"
                     ref='form'
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
                     handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
@@ -103,39 +107,41 @@ let IkonotvArtistDetailsForm = React.createClass({
                     <Property
                         name='artist_website'
                         label={getLangText('Artist Website')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
+                        expanded={!disabled || !!extraData.artist_website}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.artist_website}
-                            placeholder={getLangText('The artist\'s website if present...')}/>
+                            convertLinks
+                            defaultValue={extraData.artist_website}
+                            placeholder={getLangText('The artist\'s website if present...')} />
                     </Property>
                     <Property
                         name='gallery_website'
                         label={getLangText('Website of related Gallery, Museum, etc.')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
+                        expanded={!disabled || !!extraData.gallery_website}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.gallery_website}
-                            placeholder={getLangText('The website of any related Gallery or Museum')}/>
+                            convertLinks
+                            defaultValue={extraData.gallery_website}
+                            placeholder={getLangText('The website of any related Gallery or Museum')} />
                     </Property>
                     <Property
                         name='additional_websites'
                         label={getLangText('Additional Websites/Publications/Museums/Galleries')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
+                        expanded={!disabled || !!extraData.additional_websites}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.additional_websites}
-                            placeholder={getLangText('Enter additional Websites/Publications if any')}/>
+                            convertLinks
+                            defaultValue={extraData.additional_websites}
+                            placeholder={getLangText('Enter additional Websites/Publications if any')} />
                     </Property>
                     <Property
                         name='conceptual_overview'
                         label={getLangText('Short text about the Artist')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
+                        expanded={!disabled || !!extraData.conceptual_overview}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.conceptual_overview}
-                            placeholder={getLangText('Enter a short bio about the Artist')}
-                            />
+                            defaultValue={extraData.conceptual_overview}
+                            placeholder={getLangText('Enter a short bio about the Artist')} />
                     </Property>
                 </Form>
             );
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
index bcf6830d..28c67c94 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
@@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 let IkonotvArtworkDetailsForm = React.createClass({
     propTypes: {
-        handleSuccess: React.PropTypes.func,
         piece: React.PropTypes.object.isRequired,
 
         disabled: React.PropTypes.bool,
-
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool
     },
 
@@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({
     },
 
     handleSuccess() {
-        let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000);
+        const notification = new GlobalNotificationModel(getLangText('Artwork details successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        let buttons, spinner, heading;
-        let { isInline, handleSuccess } = this.props;
+        const { disabled, isInline, handleSuccess, piece } = this.props;
+
+        let buttons;
+        let spinner;
+        let heading;
 
         if (!isInline) {
             buttons = (
                 <button
                     type="submit"
                     className="btn btn-default btn-wide"
-                    disabled={this.props.disabled}>
+                    disabled={disabled}>
                     {getLangText('Proceed to artist details')}
                 </button>
             );
@@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        <AscribeSpinner color='dark-blue' size='md'/>
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -88,13 +90,15 @@ let IkonotvArtworkDetailsForm = React.createClass({
             );
         }
 
-        if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
+        if (piece.id && piece.extra_data) {
+            const { extra_data: extraData = {} } = piece;
+
             return (
                 <Form
-                    disabled={this.props.disabled}
+                    disabled={disabled}
                     className="ascribe-form-bordered"
                     ref='form'
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
                     handleSuccess={handleSuccess || this.handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
@@ -103,56 +107,56 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     <Property
                         name='medium'
                         label={getLangText('Medium')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
+                        expanded={!disabled || !!extraData.medium}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.medium}
-                            placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/>
+                            defaultValue={extraData.medium}
+                            placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} />
                     </Property>
                     <Property
                         name='size_duration'
                         label={getLangText('Size/Duration')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
+                        expanded={!disabled || !!extraData.size_duration}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.size_duration}
-                            placeholder={getLangText('Size in centimeters. Duration in minutes.')}/>
+                            defaultValue={extraData.size_duration}
+                            placeholder={getLangText('Size in centimeters. Duration in minutes.')} />
                     </Property>
                     <Property
                         name='copyright'
                         label={getLangText('Copyright')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
+                        expanded={!disabled || !!extraData.copyright}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.copyright}
-                            placeholder={getLangText('Which copyright is attached to this work?')}/>
+                            defaultValue={extraData.copyright}
+                            placeholder={getLangText('Which copyright is attached to this work?')} />
                     </Property>
                     <Property
                         name='courtesy_of'
                         label={getLangText('Courtesy of')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
+                        expanded={!disabled || !!extraData.courtesy_of}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.courtesy_of}
-                            placeholder={getLangText('The current owner of the artwork')}/>
+                            defaultValue={extraData.courtesy_of}
+                            placeholder={getLangText('The current owner of the artwork')} />
                     </Property>
                     <Property
                         name='copyright_of_photography'
                         label={getLangText('Copyright of Photography')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
+                        expanded={!disabled || !!extraData.copyright_of_photography}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.copyright_of_photography}
-                            placeholder={getLangText('Who should be attributed for the photography?')}/>
+                            defaultValue={extraData.copyright_of_photography}
+                            placeholder={getLangText('Who should be attributed for the photography?')} />
                     </Property>
                     <Property
                         name='additional_details'
                         label={getLangText('Additional Details about the artwork')}
-                        expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
+                        expanded={!disabled || !!extraData.additional_details}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.piece.extra_data.additional_details}
-                            placeholder={getLangText('Insert artwork overview')}/>
+                            defaultValue={extraData.additional_details}
+                            placeholder={getLangText('Insert artwork overview')} />
                     </Property>
                 </Form>
             );
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
index 4661cc32..d1811994 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
@@ -38,10 +38,17 @@ let IkonotvPieceList = React.createClass({
         this.setState(state);
     },
 
-    redirectIfNoContractNotifications() {
+    shouldRedirect(pieceCount) {
+        const { currentUser: { email: userEmail },
+                whitelabel: {
+                    user: whitelabelAdminEmail
+                } } = this.props;
         const { contractAgreementListNotifications } = this.state;
 
-        return contractAgreementListNotifications && !contractAgreementListNotifications.length;
+        return contractAgreementListNotifications &&
+               !contractAgreementListNotifications.length &&
+               userEmail !== whitelabelAdminEmail &&
+               !pieceCount;
     },
 
     render() {
@@ -51,8 +58,6 @@ let IkonotvPieceList = React.createClass({
             <div>
                 <PieceList
                     {...this.props}
-                    redirectTo="/register_piece?slide_num=0"
-                    shouldRedirect={this.redirectIfNoContractNotifications}
                     accordionListItemType={IkonotvAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),
@@ -66,7 +71,14 @@ let IkonotvPieceList = React.createClass({
                                 label: getLangText('loaned')
                             }
                         ]
-                    }]} />
+                    }]}
+                    redirectTo={{
+                        pathname: '/register_piece',
+                        query: {
+                            'slide_num': 0
+                        }
+                    }}
+                    shouldRedirect={this.shouldRedirect} />
             </div>
         );
     }
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index 466aa9fe..3684fb29 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -47,7 +47,7 @@ let IkonotvRegisterPiece = React.createClass({
     getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
-            PieceStore.getState(),
+            PieceStore.getInitialState(),
             {
                 step: 0,
                 pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
@@ -59,9 +59,7 @@ let IkonotvRegisterPiece = React.createClass({
         PieceListStore.listen(this.onChange);
         PieceStore.listen(this.onChange);
 
-        // Before we load the new piece, we reset the piece store to delete old data that we do
-        // not want to display to the user.
-        PieceActions.updatePiece({});
+        const queryParams = this.props.location.query;
 
         // Since every step of this register process is atomic,
         // we may need to enter the process at step 1 or 2.
@@ -70,9 +68,8 @@ let IkonotvRegisterPiece = React.createClass({
         //
         // We're using 'in' here as we want to know if 'piece_id' is present in the url,
         // we don't care about the value.
-        const queryParams = this.props.location.query;
-        if (queryParams && 'piece_id' in queryParams) {
-            PieceActions.fetchOne(queryParams.piece_id);
+        if ('piece_id' in queryParams) {
+            PieceActions.fetchPiece(queryParams.piece_id);
         }
     },
 
@@ -86,33 +83,30 @@ let IkonotvRegisterPiece = React.createClass({
     },
 
 
-    handleRegisterSuccess(response){
+    handleRegisterSuccess(response) {
         this.refreshPieceList();
 
-        // also start loading the piece for the next step
+        // Also load the newly registered piece for the next step
         if (response && response.piece) {
             PieceActions.updatePiece(response.piece);
         }
+
         if (!this.canSubmit()) {
             this.history.push('/collection');
         } else {
-            this.incrementStep();
-            this.refs.slidesContainer.nextSlide();
+            this.nextSlide({ piece_id: response.piece.id });
         }
     },
 
     handleAdditionalDataSuccess() {
-
         // We need to refetch the piece again after submitting the additional data
         // since we want it's otherData to be displayed when the user choses to click
         // on the browsers back button.
-        PieceActions.fetchOne(this.state.piece.id);
+        PieceActions.fetchPiece(this.state.piece.id);
 
         this.refreshPieceList();
 
-        this.incrementStep();
-
-        this.refs.slidesContainer.nextSlide();
+        this.nextSlide();
     },
 
     handleLoanSuccess(response) {
@@ -123,33 +117,27 @@ let IkonotvRegisterPiece = React.createClass({
 
         this.refreshPieceList();
 
-        PieceActions.fetchOne(this.state.piece.id);
         this.history.push(`/pieces/${this.state.piece.id}`);
     },
 
-    // We need to increase the step to lock the forms that are already filled out
-    incrementStep() {
-        // also increase step
-        let newStep = this.state.step + 1;
+    nextSlide(queryParams) {
+        // We need to increase the step to lock the forms that are already filled out
         this.setState({
-            step: newStep
+            step: this.state.step + 1
         });
+
+        this.refs.slidesContainer.nextSlide(queryParams);
     },
 
     refreshPieceList() {
-        PieceListActions.fetchPieceList(
-            this.state.page,
-            this.state.pageSize,
-            this.state.searchTerm,
-            this.state.orderBy,
-            this.state.orderAsc,
-            this.state.filterBy
-        );
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     canSubmit() {
         const { currentUser, whitelabel } = this.props;
-        return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
+        return currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel.user;
     },
 
     getSlideArtistDetails() {
@@ -160,13 +148,14 @@ let IkonotvRegisterPiece = React.createClass({
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <IkonotvArtistDetailsForm
                                 handleSuccess={this.handleAdditionalDataSuccess}
-                                piece={this.state.piece}/>
+                                piece={this.state.piece} />
                         </Col>
                     </Row>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     getSlideArtworkDetails() {
@@ -177,13 +166,14 @@ let IkonotvRegisterPiece = React.createClass({
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <IkonotvArtworkDetailsForm
                                 handleSuccess={this.handleAdditionalDataSuccess}
-                                piece={this.state.piece}/>
+                                piece={this.state.piece} />
                         </Col>
                     </Row>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     getSlideLoan() {
@@ -214,8 +204,9 @@ let IkonotvRegisterPiece = React.createClass({
                     </Row>
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     },
 
     render() {
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
index c0f58380..8892a856 100644
--- a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import PieceActions from '../../../../../../actions/piece_actions';
+import EditionActions from '../../../../../../actions/edition_actions';
 
 import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
 
@@ -24,30 +24,28 @@ let MarketSubmitButton = React.createClass({
         availableAcls: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
         editions: React.PropTypes.array.isRequired,
-        handleSuccess: React.PropTypes.func.isRequired,
-        whitelabel: React.PropTypes.object.isRequired,
 
         className: React.PropTypes.string,
+        handleSuccess: React.PropTypes.func
     },
 
     canEditionBeSubmitted(edition) {
         if (edition && edition.extra_data && edition.other_data) {
-            const { extra_data, other_data } = edition;
+            const {
+                extra_data: {
+                    artist_bio: artistBio,
+                    display_instructions: displayInstructions,
+                    technology_details: technologyDetails,
+                    work_description: workDescription
+                },
+                other_data: otherData } = edition;
 
-            if (extra_data.artist_bio && extra_data.work_description &&
-                extra_data.technology_details && extra_data.display_instructions &&
-                other_data.length > 0) {
-                return true;
-            }
+            return artistBio && displayInstructions && technologyDetails && workDescription && otherData.length;
         }
 
         return false;
     },
 
-    getFormDataId() {
-        return getAclFormDataId(false, this.props.editions);
-    },
-
     getAggregateEditionDetails() {
         const { editions } = this.props;
 
@@ -64,13 +62,20 @@ let MarketSubmitButton = React.createClass({
         });
     },
 
-    handleAdditionalDataSuccess(pieceId) {
-        // Fetch newly updated piece to update the views
-        PieceActions.fetchOne(pieceId);
+    getFormDataId() {
+        return getAclFormDataId(false, this.props.editions);
+    },
 
+    handleAdditionalDataSuccess() {
         this.refs.consignModal.show();
     },
 
+    refreshEdition() {
+        if (this.props.editions.length === 1) {
+            EditionActions.fetchEdition(this.props.editions[0].bitcoin_id);
+        }
+    },
+
     render() {
         const {
             availableAcls,
@@ -89,6 +94,10 @@ let MarketSubmitButton = React.createClass({
             senderName: currentUser.username
         });
 
+        // If only a single piece is selected, all the edition's extra_data and other_data will
+        // be the same, so we just take the first edition's
+        const { extra_data: extraData, other_data: otherData } = solePieceId ? editions[0] : {};
+
         const triggerButton = (
             <button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
                 {getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
@@ -115,16 +124,25 @@ let MarketSubmitButton = React.createClass({
                     aclName='acl_consign'>
                     <ModalWrapper
                         trigger={triggerButton}
-                        handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
+                        handleSuccess={this.handleAdditionalDataSuccess}
                         title={getLangText('Add additional information')}>
                         <MarketAdditionalDataForm
+                            extraData={extraData}
+                            otherData={otherData}
                             pieceId={solePieceId}
                             submitLabel={getLangText('Continue to consignment')} />
                     </ModalWrapper>
 
                     <ModalWrapper
                         ref="consignModal"
-                        handleSuccess={handleSuccess}
+                        handleCancel={this.refreshEdition}
+                        handleSuccess={(...params) => {
+                            if (typeof handleSuccess === 'function') {
+                                handleSuccess(...params);
+                            }
+
+                            this.refreshEdition();
+                        }}
                         title={getLangText('Consign artwork')}>
                         {consignForm}
                     </ModalWrapper>
diff --git a/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js b/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
index 4e1e3ee8..064936c9 100644
--- a/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
+++ b/js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
@@ -6,8 +6,12 @@ import MarketAdditionalDataForm from '../market_forms/market_additional_data_for
 
 let MarketFurtherDetails = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.number,
+        pieceId: React.PropTypes.number.isRequired,
+
+        editable: React.PropTypes.bool,
+        extraData: React.PropTypes.object,
         handleSuccess: React.PropTypes.func,
+        otherData: React.PropTypes.arrayOf(React.PropTypes.object)
     },
 
     render() {
diff --git a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
index 0698088f..a7bbb56d 100644
--- a/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
@@ -2,42 +2,39 @@
 
 import React from 'react';
 
-import Form from '../../../../../ascribe_forms/form';
-import Property from '../../../../../ascribe_forms/property';
-
-import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
-
-import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
-import AscribeSpinner from '../../../../../ascribe_spinner';
-
 import GlobalNotificationModel from '../../../../../../models/global_notification_model';
 import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
 
-import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
+import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
 
-import PieceActions from '../../../../../../actions/piece_actions';
-import PieceStore from '../../../../../../stores/piece_store';
+import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
+import Form from '../../../../../ascribe_forms/form';
+import Property from '../../../../../ascribe_forms/property';
+
+import AscribeSpinner from '../../../../../ascribe_spinner';
 
 import ApiUrls from '../../../../../../constants/api_urls';
-import AppConstants from '../../../../../../constants/application_constants';
+import { validationParts, validationTypes } from '../../../../../../constants/uploader_constants';
 
 import requests from '../../../../../../utils/requests';
+
+import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';
 import { getLangText } from '../../../../../../utils/lang_utils';
 
 
 let MarketAdditionalDataForm = React.createClass({
     propTypes: {
-        pieceId: React.PropTypes.oneOfType([
-            React.PropTypes.number,
-            React.PropTypes.string
-        ]),
+        pieceId: React.PropTypes.number.isRequired,
+
         editable: React.PropTypes.bool,
+        extraData: React.PropTypes.object,
+        handleSuccess: React.PropTypes.func,
         isInline: React.PropTypes.bool,
+        otherData: React.PropTypes.arrayOf(React.PropTypes.object),
         showHeading: React.PropTypes.bool,
         showNotification: React.PropTypes.bool,
-        submitLabel: React.PropTypes.string,
-        handleSuccess: React.PropTypes.func
+        submitLabel: React.PropTypes.string
     },
 
     getDefaultProps() {
@@ -48,50 +45,34 @@ let MarketAdditionalDataForm = React.createClass({
     },
 
     getInitialState() {
-        const pieceStore = PieceStore.getState();
-
-        return mergeOptions(
-            pieceStore,
-            {
-                // Allow the form to be submitted if there's already an additional image uploaded
-                isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
-                forceUpdateKey: 0
-            });
-    },
-
-    componentDidMount() {
-        PieceStore.listen(this.onChange);
-
-        if (this.props.pieceId) {
-            PieceActions.fetchOne(this.props.pieceId);
+        return {
+            // Allow the form to be submitted if there's already an additional image uploaded
+            isUploadReady: this.isUploadReadyOnChange(),
+            forceUpdateKey: 0
         }
     },
 
-    componentWillUnmount() {
-        PieceStore.unlisten(this.onChange);
-    },
+    componentWillReceiveProps(nextProps) {
+        if (this.props.extraData !== nextProps.extraData || this.props.otherData !== nextProps.otherData) {
+            this.setState({
+                // Allow the form to be submitted if the updated piece has an additional image uploaded
+                isUploadReady: this.isUploadReadyOnChange(),
 
-    onChange(state) {
-        Object.assign({}, state, {
-            // Allow the form to be submitted if the updated piece already has an additional image uploaded
-            isUploadReady: this.isUploadReadyOnChange(state.piece),
-
-            /**
-             * Increment the forceUpdateKey to force the form to rerender on each change
-             *
-             * THIS IS A HACK TO MAKE SURE THE FORM ALWAYS DISPLAYS THE MOST RECENT STATE
-             * BECAUSE SOME OF OUR FORM ELEMENTS DON'T UPDATE FROM PROP CHANGES (ie.
-             * InputTextAreaToggable).
-             */
-            forceUpdateKey: this.state.forceUpdateKey + 1
-        });
-
-        this.setState(state);
+                /**
+                 * Increment the forceUpdateKey to force the form to rerender on each change
+                 *
+                 * THIS IS A HACK TO MAKE SURE THE FORM ALWAYS DISPLAYS THE MOST RECENT STATE
+                 * BECAUSE SOME OF OUR FORM ELEMENTS DON'T UPDATE FROM PROP CHANGES (ie.
+                 * InputTextAreaToggable).
+                 */
+                forceUpdateKey: this.state.forceUpdateKey + 1
+            });
+        }
     },
 
     getFormData() {
-        let extradata = {};
-        let formRefs = this.refs.form.refs;
+        const extradata = {};
+        const formRefs = this.refs.form.refs;
 
         // Put additional fields in extra data object
         Object
@@ -102,12 +83,12 @@ let MarketAdditionalDataForm = React.createClass({
 
         return {
             extradata: extradata,
-            piece_id: this.state.piece.id
+            piece_id: this.props.pieceId
         };
     },
 
-    isUploadReadyOnChange(piece) {
-        return piece && piece.other_data && piece.other_data.length > 0;
+    isUploadReadyOnChange() {
+        return this.props.otherData && this.props.otherData.length;
     },
 
     handleSuccessWithNotification() {
@@ -126,12 +107,20 @@ let MarketAdditionalDataForm = React.createClass({
     },
 
     render() {
-        const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
-        const { piece } = this.state;
+        const {
+            editable,
+            extraData = {},
+            isInline,
+            handleSuccess,
+            otherData,
+            pieceId,
+            showHeading,
+            showNotification,
+            submitLabel } = this.props;
+
         let buttons;
         let heading;
-
-        let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
+        let spinner;
 
         if (!isInline) {
             buttons = (
@@ -146,7 +135,7 @@ let MarketAdditionalDataForm = React.createClass({
             spinner = (
                 <div className="modal-footer">
                     <p className="pull-right">
-                        {spinner}
+                        <AscribeSpinner color='dark-blue' size='md' />
                     </p>
                 </div>
             );
@@ -160,64 +149,70 @@ let MarketAdditionalDataForm = React.createClass({
             ) : null;
         }
 
-        if (piece && piece.id) {
+        if (pieceId) {
             return (
                 <Form
                     className="ascribe-form-bordered"
                     ref='form'
                     key={this.state.forceUpdateKey}
-                    url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
+                    url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}
                     handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
                     getFormData={this.getFormData}
                     buttons={buttons}
                     spinner={spinner}
-                    disabled={!this.props.editable || !piece.acl.acl_edit}>
+                    disabled={!this.props.editable}>
                     {heading}
                     <FurtherDetailsFileuploader
-                        label={getLangText('Marketplace Thumbnail Image')}
-                        submitFile={function () {}}
-                        setIsUploadReady={this.setIsUploadReady}
+                        areAssetsDownloadable={!!isInline}
+                        editable={editable}
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                        pieceId={piece.id}
-                        otherData={piece.other_data}
-                        editable={editable} />
+                        label={getLangText('Marketplace Thumbnail Image')}
+                        otherData={otherData}
+                        pieceId={pieceId}
+                        setIsUploadReady={this.setIsUploadReady}
+                        submitFile={function () {}}
+                        validation={{
+                            itemLimit: validationTypes.workThumbnail.itemLimit,
+                            sizeLimit: validationTypes.workThumbnail.sizeLimit,
+                            allowedExtensions: validationParts.allowedExtensions.images
+                        }} />
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Bio')}
-                        expanded={editable || !!piece.extra_data.artist_bio}>
+                        expanded={editable || !!extraData.artist_bio}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.artist_bio}
+                            defaultValue={extraData.artist_bio}
                             placeholder={getLangText('Enter a biography of the artist...')}
                             required />
                     </Property>
                     <Property
                         name='work_description'
                         label={getLangText('Work Description')}
-                        expanded={editable || !!piece.extra_data.work_description}>
+                        expanded={editable || !!extraData.work_description}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.work_description}
+                            defaultValue={extraData.work_description}
                             placeholder={getLangText('Enter a description of the work...')}
                             required />
                     </Property>
                     <Property
                         name='technology_details'
                         label={getLangText('Technology Details')}
-                        expanded={editable || !!piece.extra_data.technology_details}>
+                        expanded={editable || !!extraData.technology_details}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.technology_details}
+                            defaultValue={extraData.technology_details}
                             placeholder={getLangText('Enter technological details about the work...')}
                             required />
                     </Property>
                     <Property
                         name='display_instructions'
                         label={getLangText('Display Instructions')}
-                        expanded={editable || !!piece.extra_data.display_instructions}>
+                        expanded={editable || !!extraData.display_instructions}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={piece.extra_data.display_instructions}
+                            defaultValue={extraData.display_instructions}
                             placeholder={getLangText('Enter instructions on how to best display the work...')}
                             required />
                     </Property>
@@ -226,7 +221,7 @@ let MarketAdditionalDataForm = React.createClass({
         } else {
             return (
                 <div className="ascribe-loading-position">
-                    {spinner}
+                    <AscribeSpinner color='dark-blue' size='lg' />
                 </div>
             );
         }
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
index 4fb89e7c..8db8bcf8 100644
--- a/js/components/whitelabel/wallet/components/market/market_piece_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -35,11 +35,12 @@ let MarketPieceList = React.createClass({
             } } = this.props;
 
         let filterParams = null;
+        let isUserAdmin = null;
         let canLoadPieceList = false;
 
         if (userEmail && whitelabelAdminEmail) {
             canLoadPieceList = true;
-            const isUserAdmin = userEmail === whitelabelAdminEmail;
+            isUserAdmin = userEmail === whitelabelAdminEmail;
 
             filterParams = [{
                 label: getLangText('Show works I can'),
@@ -55,7 +56,13 @@ let MarketPieceList = React.createClass({
             <PieceList
                 {...this.props}
                 canLoadPieceList={canLoadPieceList}
-                redirectTo="/register_piece?slide_num=0"
+                redirectTo={{
+                    pathname: '/register_piece',
+                    query: {
+                        'slide_num': 0
+                    }
+                }}
+                shouldRedirect={(pieceCount) => !isUserAdmin && !pieceCount}
                 bulkModalButtonListType={MarketAclButtonList}
                 filterParams={filterParams} />
         );
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index 381835e2..ac8f423d 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -6,10 +6,12 @@ import { History } from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import PieceActions from '../../../../../actions/piece_actions';
 import PieceListStore from '../../../../../stores/piece_list_store';
 import PieceListActions from '../../../../../actions/piece_list_actions';
 
+import PieceStore from '../../../../../stores/piece_store';
+import PieceActions from '../../../../../actions/piece_actions';
+
 import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
 
 import Property from '../../../../ascribe_forms/property';
@@ -36,6 +38,7 @@ let MarketRegisterPiece = React.createClass({
     getInitialState(){
         return mergeOptions(
             PieceListStore.getState(),
+            PieceStore.getInitialState(),
             {
                 step: 0
             });
@@ -43,14 +46,22 @@ let MarketRegisterPiece = React.createClass({
 
     componentDidMount() {
         PieceListStore.listen(this.onChange);
+        PieceStore.listen(this.onChange);
 
-        // Reset the piece store to make sure that we don't display old data
-        // if the user repeatedly registers works
-        PieceActions.updatePiece({});
+        const queryParams = this.props.location.query;
+
+        // Load the correct piece if the user loads the second step directly
+        // by pressing on the back button or using the url
+        // We're using 'in' here as we want to know if 'piece_id' is present in the url,
+        // we don't care about the value.
+        if ('piece_id' in queryParams) {
+            PieceActions.fetchPiece(queryParams.piece_id);
+        }
     },
 
     componentWillUnmount() {
         PieceListStore.unlisten(this.onChange);
+        PieceStore.unlisten(this.onChange);
     },
 
     onChange(state) {
@@ -60,15 +71,12 @@ let MarketRegisterPiece = React.createClass({
     handleRegisterSuccess(response) {
         this.refreshPieceList();
 
-        // Use the response's piece for the next step if available
-        let pieceId = null;
+        // Also load the newly registered piece for the next step
         if (response && response.piece) {
-            pieceId = response.piece.id;
             PieceActions.updatePiece(response.piece);
         }
 
-        this.incrementStep();
-        this.refs.slidesContainer.nextSlide({ piece_id: pieceId });
+        this.nextSlide({ piece_id: response.piece.id });
     },
 
     handleAdditionalDataSuccess() {
@@ -77,42 +85,28 @@ let MarketRegisterPiece = React.createClass({
         this.history.push('/collection');
     },
 
-    // We need to increase the step to lock the forms that are already filled out
-    incrementStep() {
+    nextSlide(queryParams) {
+        // We need to increase the step to lock the forms that are already filled out
         this.setState({
             step: this.state.step + 1
         });
-    },
 
-    getPieceFromQueryParam() {
-        const queryParams = this.props.location.query;
-
-        // Since every step of this register process is atomic,
-        // we may need to enter the process at step 1 or 2.
-        // If this is the case, we'll need the piece number to complete submission.
-        // It is encoded in the URL as a queryParam and we're checking for it here.
-        return queryParams && queryParams.piece_id;
+        this.refs.slidesContainer.nextSlide(queryParams);
     },
 
     refreshPieceList() {
-        PieceListActions.fetchPieceList(
-            this.state.page,
-            this.state.pageSize,
-            this.state.searchTerm,
-            this.state.orderBy,
-            this.state.orderAsc,
-            this.state.filterBy
-        );
+        const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
+
+        PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
     },
 
     render() {
         const {
-            currentUser,
             location,
             whitelabel: {
                 name: whitelabelName = 'Market'
             } } = this.props
-        const { step } = this.state;
+        const { piece, step } = this.state;
 
         setDocumentTitle(getLangText('Register a new piece'));
 
@@ -129,15 +123,14 @@ let MarketRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <RegisterPieceForm
-                                currentUser={currentUser}
+                                {...this.props}
                                 disabled={step > 0}
                                 enableLocalHashing={false}
-                                headerMessage={getLangText('Consign to %s', whitelabelName)}
-                                submitMessage={getLangText('Proceed to additional details')}
-                                isFineUploaderActive={true}
                                 enableSeparateThumbnail={false}
                                 handleSuccess={this.handleRegisterSuccess}
-                                location={location}>
+                                headerMessage={getLangText('Consign to %s', whitelabelName)}
+                                isFineUploaderActive={true}
+                                submitMessage={getLangText('Proceed to additional details')}>
                                 <Property
                                     name="num_editions"
                                     label={getLangText('Specify editions')}>
@@ -155,8 +148,10 @@ let MarketRegisterPiece = React.createClass({
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
                             <MarketAdditionalDataForm
+                                extraData={piece.extra_data}
                                 handleSuccess={this.handleAdditionalDataSuccess}
-                                pieceId={this.getPieceFromQueryParam()}
+                                otherData={piece.other_data}
+                                pieceId={piece.id}
                                 showHeading />
                         </Col>
                     </Row>
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index c5b3d062..b9663772 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -3,69 +3,37 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import UserStore from '../../../stores/user_store';
-import UserActions from '../../../actions/user_actions';
-
-import WhitelabelActions from '../../../actions/whitelabel_actions';
-import WhitelabelStore from '../../../stores/whitelabel_store';
-
+import AppBase from '../../app_base';
 import AppRouteWrapper from '../../app_route_wrapper';
-import Header from '../../header';
 import Footer from '../../footer';
-import GlobalNotification from '../../global_notification';
+import Header from '../../header';
 
-import { getSubdomain, mergeOptions } from '../../../utils/general_utils';
+import { getSubdomain } from '../../../utils/general_utils';
 
 
 let WalletApp = React.createClass({
     propTypes: {
+        activeRoute: React.PropTypes.object.isRequired,
+        children: React.PropTypes.element.isRequired,
         history: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
-    },
-
-    getInitialState() {
-        return mergeOptions(
-            UserStore.getState(),
-            WhitelabelStore.getState()
-        );
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-        WhitelabelStore.listen(this.onChange);
-
-        UserActions.fetchCurrentUser();
-        WhitelabelActions.fetchWhitelabel();
-    },
-
-    componentWillUnmount() {
-        UserStore.unlisten(this.onChange);
-        WhitelabelActions.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
+        // Provided from AppBase
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object
     },
 
     render() {
-        const { children, history, routes } = this.props;
-        const { currentUser, whitelabel } = this.state;
+        const { activeRoute, children, currentUser, history, routes, whitelabel } = this.props;
         const subdomain = getSubdomain();
-
-        // The second element of routes is always the active component object, where we can
-        // extract the path.
-        let path = routes[1] ? routes[1].path : null;
+        const path = activeRoute && activeRoute.path;
 
         let header = null;
         // if the path of the current activeRoute is not defined, then this is the IndexRoute
-        if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
-            && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
-            header = (<div className="hero"/>);
+        if ((!path || history.isActive('/login') || history.isActive('/signup') ||
+            history.isActive('/contract_notifications')) &&
+            (['cyland', 'ikonotv', 'lumenus', '23vivi']).includes(subdomain)) {
+            header = (<div className="hero" />);
         } else {
             header = (
                 <Header
@@ -78,22 +46,18 @@ let WalletApp = React.createClass({
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
         // we split the path by the first occurring slash and take the first splitter.
         return (
-            <div className={classNames('ascribe-wallet-app', 'route--' + (path ? path.split('/')[0] : 'landing'))}>
-                <div className='container'>
-                    {header}
-                    <AppRouteWrapper
-                        currentUser={currentUser}
-                        whitelabel={whitelabel}>
-                        {/* Routes are injected here */}
-                        {children}
-                    </AppRouteWrapper>
-                    <Footer />
-                    <GlobalNotification />
-                    <div id="modal" className="container"></div>
-                </div>
+            <div className={classNames('ascribe-wallet-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+                {header}
+                <AppRouteWrapper
+                    currentUser={currentUser}
+                    whitelabel={whitelabel}>
+                    {/* Routes are injected here */}
+                    {children}
+                </AppRouteWrapper>
+                <Footer activeRoute={activeRoute} />
             </div>
         );
     }
 });
 
-export default WalletApp;
+export default AppBase(WalletApp);
diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js
index d59f47f5..a5643519 100644
--- a/js/components/whitelabel/wallet/wallet_routes.js
+++ b/js/components/whitelabel/wallet/wallet_routes.js
@@ -48,188 +48,302 @@ import WalletApp from './wallet_app';
 let ROUTES = {
     'cyland': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(CylandLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(CylandLanding)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
-                headerTitle='COLLECTION' />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='pieces/:pieceId' component={CylandPieceContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                headerTitle='COLLECTION'
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={CylandPieceContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     'cc': (
         <Route path='/' component={WalletApp}>
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CCRegisterPiece)}
-                headerTitle='+ NEW WORK' />
+                headerTitle='+ NEW WORK'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
-                headerTitle='COLLECTION' />
-            <Route path='pieces/:pieceId' component={PieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                headerTitle='COLLECTION'
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={PieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     'ikonotv': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(IkonotvLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(IkonotvLanding)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='request_loan'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SendContractAgreementForm)}
                 headerTitle='SEND NEW CONTRACT'
-                aclName='acl_create_contractagreement' />
+                aclName='acl_create_contractagreement'
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)}
-                headerTitle='COLLECTION' />
+                headerTitle='COLLECTION'
+                disableOn='noPieces'
+                hideFooter />
             <Route
                 path='contract_notifications'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
-            <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
-            <Route path='editions/:editionId' component={EditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)}
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={IkonotvPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={EditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     'lumenus': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LumenusLanding)} />
+            <IndexRoute
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LumenusLanding)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
-                headerTitle='COLLECTION' />
-            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
-            <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                headerTitle='COLLECTION'
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={MarketPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={MarketEditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     ),
     '23vivi': (
         <Route path='/' component={WalletApp}>
-            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(Vivi23Landing)} />
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(Vivi23Landing)}
+                hideFooter />
             <Route
                 path='login'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)}
+                hideFooter />
             <Route
                 path='logout'
-                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}
+                hideFooter />
             <Route
                 path='signup'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)}
+                hideFooter />
             <Route
                 path='password_reset'
-                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)}
+                hideFooter />
             <Route
                 path='settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}
+                hideFooter />
             <Route
                 path='contract_settings'
-                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}
+                hideFooter />
             <Route
                 path='register_piece'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
                 headerTitle='+ NEW WORK'
-                aclName='acl_wallet_submit' />
+                aclName='acl_wallet_submit'
+                hideFooter />
             <Route
                 path='collection'
                 component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
-                headerTitle='COLLECTION' />
-            <Route path='pieces/:pieceId' component={MarketPieceContainer} />
-            <Route path='editions/:editionId' component={MarketEditionContainer} />
-            <Route path='verify' component={CoaVerifyContainer} />
-            <Route path='*' component={ErrorNotFoundPage} />
+                headerTitle='COLLECTION'
+                disableOn='noPieces'
+                hideFooter />
+            <Route
+                path='pieces/:pieceId'
+                component={MarketPieceContainer}
+                hideFooter />
+            <Route
+                path='editions/:editionId'
+                component={MarketEditionContainer}
+                hideFooter />
+            <Route
+                path='coa_verify'
+                component={CoaVerifyContainer}
+                hideFooter />
+            <Route
+                path='*'
+                component={ErrorNotFoundPage}
+                hideFooter />
         </Route>
     )
 };
diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js
index e7f11141..f7bac317 100644
--- a/js/constants/api_urls.js
+++ b/js/constants/api_urls.js
@@ -76,8 +76,7 @@ let ApiUrls = {
     'webhooks': AppConstants.apiEndpoint + 'webhooks/',
     'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
     'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
-    'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
-    'prize_list': AppConstants.apiEndpoint + 'prize/'
+    'delete_s3_file': AppConstants.serverUrl + 's3/delete/'
 };
 
 
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 824ed4b2..faa3d6eb 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -24,52 +24,38 @@ const constants = {
         {
             'subdomain': 'cc',
             'name': 'Creative Commons France',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/public/creativecommons/cc.logo.sm.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet',
             'ga': 'UA-60614729-4'
         },
         {
             'subdomain': 'sluice',
             'name': 'Sluice Art Fair',
-            'logo': 'http://sluice.info/images/logo.gif',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'prize',
             'ga': 'UA-60614729-5'
         },
         {
             'subdomain': 'cyland',
             'name': 'Cyland media art lab',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/cyland/logo.gif',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': 'ikonotv',
             'name': 'IkonoTV',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono-logo-black.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': 'lumenus',
             'name': 'Lumenus',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': '23vivi',
             'name': '23VIVI',
-            'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'wallet'
         },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',
-            'logo': 'http://notfoundlogo.de',
-            'permissions': ['register', 'edit', 'share', 'del_from_collection'],
             'type': 'prize'
         }
     ],
@@ -82,28 +68,13 @@ const constants = {
     // Source: http://www.w3schools.com/tags/att_input_type.asp
     'possibleInputTypes': ['button', 'checkbox', 'color', 'date', 'datetime', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'],
 
-    'fineUploader': {
-        'validation': {
-            'additionalData': {
-                'itemLimit': 100,
-                'sizeLimit': '25000000000'
-            },
-            'registerWork': {
-                'itemLimit': 1,
-                'sizeLimit': '25000000000'
-            },
-            'workThumbnail': {
-                'itemLimit': 1,
-                'sizeLimit': '5000000'
-            }
-        }
-    },
-
     'copyrightAssociations': ['ARS', 'DACS', 'Bildkunst', 'Pictoright', 'SODRAC', 'Copyright Agency/Viscopy', 'SAVA',
         'Bildrecht GmbH', 'SABAM', 'AUTVIS', 'CREAIMAGEN', 'SONECA', 'Copydan', 'EAU', 'Kuvasto', 'GCA', 'HUNGART',
         'IVARO', 'SIAE', 'JASPAR-SPDA', 'AKKA/LAA', 'LATGA-A', 'SOMAAP', 'ARTEGESTION', 'CARIER', 'BONO', 'APSAV',
         'SPA', 'GESTOR', 'VISaRTA', 'RAO', 'LITA', 'DALRO', 'VeGaP', 'BUS', 'ProLitteris', 'AGADU', 'AUTORARTE', 'BUBEDRA', 'BBDA', 'BCDA', 'BURIDA', 'ADAVIS', 'BSDA'],
 
+    'locationThreshold': 10,
+
     'searchThreshold': 500,
 
     'supportedThumbnailFileFormats': [
diff --git a/js/constants/uploader_constants.js b/js/constants/uploader_constants.js
new file mode 100644
index 00000000..c2f8559b
--- /dev/null
+++ b/js/constants/uploader_constants.js
@@ -0,0 +1,32 @@
+'use strict';
+
+export const validationParts = {
+    allowedExtensions: {
+        images: ['png', 'jpg', 'jpeg', 'gif']
+    },
+    itemLimit: {
+        single: 1,
+        multiple: 100
+    },
+    sizeLimit: {
+        default: 50000000000,
+        thumbnail: 5000000
+    }
+};
+
+const { allowedExtensions, itemLimit, sizeLimit } = validationParts;
+
+export const validationTypes = {
+    additionalData: {
+        itemLimit: itemLimit.multiple,
+        sizeLimit: sizeLimit.default
+    },
+    registerWork: {
+        itemLimit: itemLimit.single,
+        sizeLimit: sizeLimit.default
+    },
+    workThumbnail: {
+        itemLimit: itemLimit.single,
+        sizeLimit: sizeLimit.thumbnail
+    }
+};
diff --git a/js/fetchers/edition_list_fetcher.js b/js/fetchers/edition_list_fetcher.js
index 93e4553d..4a97680f 100644
--- a/js/fetchers/edition_list_fetcher.js
+++ b/js/fetchers/edition_list_fetcher.js
@@ -9,10 +9,10 @@ let EditionListFetcher = {
     /**
      * Fetches a list of editions from the API.
      */
-    fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy) {
-        let ordering = generateOrderingQueryParams(orderBy, orderAsc);
+    fetch({ pieceId, page, pageSize, orderBy, orderAsc, filterBy }) {
+        const ordering = generateOrderingQueryParams(orderBy, orderAsc);
 
-        let queryParams = mergeOptions(
+        const queryParams = mergeOptions(
             {
                 page,
                 pageSize,
diff --git a/js/fetchers/ownership_fetcher.js b/js/fetchers/ownership_fetcher.js
index b0d88927..f498ffa1 100644
--- a/js/fetchers/ownership_fetcher.js
+++ b/js/fetchers/ownership_fetcher.js
@@ -15,7 +15,7 @@ let OwnershipFetcher = {
     /**
      * Fetch the contracts of the logged-in user from the API.
      */
-    fetchContractList(isActive, isPublic, issuer){
+    fetchContractList(isActive, isPublic, issuer) {
         let queryParams = {
             isActive,
             isPublic,
@@ -28,7 +28,7 @@ let OwnershipFetcher = {
     /**
      * Create a contractagreement between the logged-in user and the email from the API with contract.
      */
-    createContractAgreement(signee, contractObj){
+    createContractAgreement(signee, contractObj) {
         return requests.post(ApiUrls.ownership_contract_agreements, { body: {signee: signee, contract: contractObj.id }});
     },
 
@@ -44,23 +44,23 @@ let OwnershipFetcher = {
         return requests.get(ApiUrls.ownership_contract_agreements, queryParams);
     },
 
-    confirmContractAgreement(contractAgreement){
+    confirmContractAgreement(contractAgreement) {
         return requests.put(ApiUrls.ownership_contract_agreements_confirm, {contract_agreement_id: contractAgreement.id});
     },
 
-    denyContractAgreement(contractAgreement){
+    denyContractAgreement(contractAgreement) {
         return requests.put(ApiUrls.ownership_contract_agreements_deny, {contract_agreement_id: contractAgreement.id});
     },
 
-    fetchLoanPieceRequestList(){
+    fetchLoanPieceRequestList() {
         return requests.get(ApiUrls.ownership_loans_pieces_request);
     },
 
-    changeContract(contractObj){
+    changeContract(contractObj) {
         return requests.put(ApiUrls.ownership_contract, { body: contractObj, contract_id: contractObj.id });
     },
 
-    deleteContract(contractObjId){
+    deleteContract(contractObjId) {
         return requests.delete(ApiUrls.ownership_contract, {contract_id: contractObjId});
     }
 };
diff --git a/js/fetchers/piece_fetcher.js b/js/fetchers/piece_fetcher.js
deleted file mode 100644
index 481b79fe..00000000
--- a/js/fetchers/piece_fetcher.js
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict';
-
-import requests from '../utils/requests';
-
-
-let PieceFetcher = {
-    /**
-     * Fetch a piece from the API.
-     */
-    fetchOne(id) {
-        return requests.get('piece', {'piece_id': id});
-    }
-};
-
-export default PieceFetcher;
diff --git a/js/fetchers/piece_list_fetcher.js b/js/fetchers/piece_list_fetcher.js
index 6bd4eb3a..ed095b37 100644
--- a/js/fetchers/piece_list_fetcher.js
+++ b/js/fetchers/piece_list_fetcher.js
@@ -10,12 +10,12 @@ let PieceListFetcher = {
      * Fetches a list of pieces from the API.
      * Can be called with all supplied queryparams the API.
      */
-    fetch(page, pageSize, search, orderBy, orderAsc, filterBy) {
-        let ordering = generateOrderingQueryParams(orderBy, orderAsc);
+    fetch({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
+        const ordering = generateOrderingQueryParams(orderBy, orderAsc);
 
         // filterBy is an object of acl key-value pairs.
         // The values are booleans
-        let queryParams = mergeOptions(
+        const queryParams = mergeOptions(
             {
                 page,
                 pageSize,
diff --git a/js/fetchers/prize_list_fetcher.js b/js/fetchers/prize_list_fetcher.js
deleted file mode 100644
index 150f07a1..00000000
--- a/js/fetchers/prize_list_fetcher.js
+++ /dev/null
@@ -1,12 +0,0 @@
-'use strict';
-
-import requests from '../utils/requests';
-
-
-let PrizeListFetcher = {
-    fetch() {
-        return requests.get('prize_list');
-    }
-};
-
-export default PrizeListFetcher;
diff --git a/js/history.js b/js/history.js
index 4e8c03c7..3d0ecff5 100644
--- a/js/history.js
+++ b/js/history.js
@@ -7,8 +7,12 @@ import AppConstants from './constants/application_constants';
 
 
 // Remove the trailing slash if present
-let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
+const baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
 
-export default useBasename(useQueries(createBrowserHistory))({
+const history = useBasename(useQueries(createBrowserHistory))({
     basename: baseUrl
 });
+
+history.locationQueue = [];
+
+export default history;
diff --git a/js/routes.js b/js/routes.js
index 49a284af..d7a1d0c4 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -6,7 +6,7 @@ import { Route } from 'react-router';
 import getPrizeRoutes from './components/whitelabel/prize/prize_routes';
 import getWalletRoutes from './components/whitelabel/wallet/wallet_routes';
 
-import App from './components/ascribe_app';
+import AscribeApp from './components/ascribe_app';
 
 import PieceList from './components/piece_list';
 import PieceContainer from './components/ascribe_detail/piece_container';
@@ -28,19 +28,20 @@ import RegisterPiece from './components/register_piece';
 import { ProxyHandler, AuthRedirect } from './components/ascribe_routes/proxy_handler';
 
 
-let COMMON_ROUTES = (
-    <Route path='/' component={App}>
+const COMMON_ROUTES = (
+    <Route path='/' component={AscribeApp}>
         <Route
             path='login'
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
         <Route
             path='register_piece'
             component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(RegisterPiece)}
-            headerTitle='+ NEW WORK'/>
+            headerTitle='+ NEW WORK' />
         <Route
             path='collection'
             component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
-            headerTitle='COLLECTION'/>
+            headerTitle='COLLECTION'
+            disableOn='noPieces' />
         <Route
             path='signup'
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@@ -54,10 +55,10 @@ let COMMON_ROUTES = (
             component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
         <Route
             path='settings'
-            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/>
+            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
         <Route
             path='contract_settings'
-            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/>
+            component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
         <Route path='coa_verify' component={CoaVerifyContainer} />
         <Route path='*' component={ErrorNotFoundPage} />
     </Route>
@@ -65,17 +66,13 @@ let COMMON_ROUTES = (
 
 
 function getRoutes(type, subdomain) {
-    let routes = null;
-
     if (type === 'prize') {
-        routes = getPrizeRoutes(COMMON_ROUTES, subdomain);
+        return getPrizeRoutes(COMMON_ROUTES, subdomain);
     } else if(type === 'wallet') {
-        routes = getWalletRoutes(COMMON_ROUTES, subdomain);
+        return getWalletRoutes(COMMON_ROUTES, subdomain);
     } else {
-        routes = COMMON_ROUTES;
+        return COMMON_ROUTES;
     }
-
-    return routes;
 }
 
 
diff --git a/js/sources/NAMING_CONVENTIONS.md b/js/sources/NAMING_CONVENTIONS.md
index 81158793..17898ce1 100644
--- a/js/sources/NAMING_CONVENTIONS.md
+++ b/js/sources/NAMING_CONVENTIONS.md
@@ -22,12 +22,8 @@ refreshApplicationToken
 we cannot repeat this for a sources' methods as patterns like this would emerge in the stores:
 
 ```javascript
-onFetchCurrentUser(invalidateCache) {
-    this.invalidateCache = invalidateCache;
-
-    if(!this.getInstance().isLoading()) {
-        this.getInstance().fetchCurrentUser(); // does not call a flux "action" but a method in user_source.js - which is confusing
-    }
+onFetchCurrentUser() {
+    this.getInstance().fetchCurrentUser(); // does not call a flux "action" but a method in user_source.js - which is confusing
 }
 ```
 
@@ -67,4 +63,4 @@ lookupCurrentUser: {
 UserActions.logoutCurrentUser
 UserStore.onLogoutCurrentUser
 UserSource.performLogoutCurrentUser
-```
\ No newline at end of file
+```
diff --git a/js/sources/coa_source.js b/js/sources/coa_source.js
index bf1d8d0f..3a949a1b 100644
--- a/js/sources/coa_source.js
+++ b/js/sources/coa_source.js
@@ -7,9 +7,9 @@ import EditionActions from '../actions/edition_actions';
 
 const CoaSource = {
     lookupCoa: {
-        remote(state) {
+        remote(state, coaId) {
             return requests
-                .get('coa', { id: state.edition.coa })
+                .get('coa', { id: coaId })
                 .then((res) => {
                     // If no coa is found here, fake a 404 error so the error action can pick it up
                     return (res && res.coa) ? res : Promise.reject({ json: { status: 404 } });
@@ -20,10 +20,11 @@ const CoaSource = {
         error: EditionActions.errorCoa
     },
 
-    performCreateCoa: {
-        remote(state) {
-            return requests.post('coa_create', {body: { bitcoin_id: state.edition.bitcoin_id }});
+    performCreateCoaForEdition: {
+        remote(state, editionId) {
+            return requests.post('coa_create', { body: { bitcoin_id: editionId } });
         },
+
         success: EditionActions.successFetchCoa,
         error: EditionActions.errorCoa
     }
diff --git a/js/sources/edition_source.js b/js/sources/edition_source.js
index 3e48d257..dd295352 100644
--- a/js/sources/edition_source.js
+++ b/js/sources/edition_source.js
@@ -7,8 +7,8 @@ import EditionActions from '../actions/edition_actions';
 
 const EditionSource = {
     lookupEdition: {
-        remote(state) {
-            return requests.get('edition', { bitcoin_id: state.editionMeta.idToFetch });
+        remote(state, editionId) {
+            return requests.get('edition', { bitcoin_id: editionId });
         },
 
         success: EditionActions.successFetchEdition,
@@ -16,4 +16,4 @@ const EditionSource = {
     }
 };
 
-export default EditionSource;
\ No newline at end of file
+export default EditionSource;
diff --git a/js/sources/piece_source.js b/js/sources/piece_source.js
new file mode 100644
index 00000000..393c844c
--- /dev/null
+++ b/js/sources/piece_source.js
@@ -0,0 +1,19 @@
+'use strict';
+
+import requests from '../utils/requests';
+
+import PieceActions from '../actions/piece_actions';
+
+
+const PieceSource = {
+    lookupPiece: {
+        remote(state, pieceId) {
+            return requests.get('piece', { piece_id: pieceId });
+        },
+
+        success: PieceActions.successFetchPiece,
+        error: PieceActions.errorPiece
+    }
+};
+
+export default PieceSource;
diff --git a/js/sources/user_source.js b/js/sources/user_source.js
index 872b060b..04e36fb9 100644
--- a/js/sources/user_source.js
+++ b/js/sources/user_source.js
@@ -13,12 +13,14 @@ const UserSource = {
         },
 
         local(state) {
-            return state.currentUser && state.currentUser.email ? state : {};
+            return !Object.keys(state.currentUser).length ? state : {};
         },
+
         success: UserActions.successFetchCurrentUser,
         error: UserActions.errorCurrentUser,
-        shouldFetch(state) {
-            return state.userMeta.invalidateCache || state.currentUser && !state.currentUser.email;
+
+        shouldFetch(state, invalidateCache) {
+            return invalidateCache || !Object.keys(state.currentUser).length;
         }
     },
 
@@ -26,9 +28,10 @@ const UserSource = {
         remote() {
             return requests.get(ApiUrls.users_logout);
         },
+
         success: UserActions.successLogoutCurrentUser,
         error: UserActions.errorCurrentUser
     }
 };
 
-export default UserSource;
\ No newline at end of file
+export default UserSource;
diff --git a/js/sources/webhook_source.js b/js/sources/webhook_source.js
index 5351c89c..7174d74a 100644
--- a/js/sources/webhook_source.js
+++ b/js/sources/webhook_source.js
@@ -10,13 +10,16 @@ const WebhookSource = {
         remote() {
             return requests.get('webhooks');
         },
+
         local(state) {
-            return state.webhooks && !Object.keys(state.webhooks).length ? state : {};
+            return !Object.keys(state.webhooks).length ? state : {};
         },
+
         success: WebhookActions.successFetchWebhooks,
         error: WebhookActions.errorWebhooks,
-        shouldFetch(state) {
-            return state.webhookMeta.invalidateCache || state.webhooks && !Object.keys(state.webhooks).length;
+
+        shouldFetch(state, invalidateCache) {
+            return invalidateCache || !Object.keys(state.webhooks).length;
         }
     },
 
@@ -24,23 +27,27 @@ const WebhookSource = {
         remote() {
             return requests.get('webhooks_events');
         },
+
         local(state) {
-            return state.webhookEvents && !Object.keys(state.webhookEvents).length ? state : {};
+            return !Object.keys(state.webhookEvents).length ? state : {};
         },
+
         success: WebhookActions.successFetchWebhookEvents,
         error: WebhookActions.errorWebhookEvents,
-        shouldFetch(state) {
-            return state.webhookEventsMeta.invalidateCache || state.webhookEvents && !Object.keys(state.webhookEvents).length;
+
+        shouldFetch(state, invalidateCache) {
+            return invalidateCache || !Object.keys(state.webhookEvents).length;
         }
     },
 
     performRemoveWebhook: {
-        remote(state) {
-            return requests.delete('webhook', {'webhook_id': state.webhookMeta.idToDelete });
+        remote(state, webhookId) {
+            return requests.delete('webhook', { 'webhook_id': webhookId });
         },
+
         success: WebhookActions.successRemoveWebhook,
         error: WebhookActions.errorWebhooks
     }
 };
 
-export default WebhookSource;
\ No newline at end of file
+export default WebhookSource;
diff --git a/js/sources/whitelabel_source.js b/js/sources/whitelabel_source.js
index 07bea746..3d5770ad 100644
--- a/js/sources/whitelabel_source.js
+++ b/js/sources/whitelabel_source.js
@@ -9,17 +9,20 @@ import { getSubdomain } from '../utils/general_utils';
 const WhitelabelSource = {
     lookupWhitelabel: {
         remote() {
-            return requests.get('whitelabel_settings', {'subdomain': getSubdomain()});
+            return requests.get('whitelabel_settings', { 'subdomain': getSubdomain() });
         },
+
         local(state) {
-            return Object.keys(state.whitelabel).length > 0 ? state : {};
+            return Object.keys(state.whitelabel).length ? state : {};
         },
+
         success: WhitelabelActions.successFetchWhitelabel,
         error: WhitelabelActions.errorWhitelabel,
-        shouldFetch(state) {
-            return state.whitelabelMeta.invalidateCache || Object.keys(state.whitelabel).length === 0;
+
+        shouldFetch(state, invalidateCache) {
+            return invalidateCache || !Object.keys(state.whitelabel).length;
         }
     }
 };
 
-export default WhitelabelSource;
\ No newline at end of file
+export default WhitelabelSource;
diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js
index 107f9af4..683e40ca 100644
--- a/js/stores/edition_list_store.js
+++ b/js/stores/edition_list_store.js
@@ -12,7 +12,11 @@ class EditionListStore {
         this.bindActions(EditionsListActions);
     }
 
-    onUpdateEditionList({pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy}) {
+    onUpdateEditionList({ pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy, maxEdition }) {
+        // if editionList for a specific piece does not exist yet,
+        // just initialize a new array
+        const pieceEditionList = this.editionList[pieceId] || [];
+
         /*
             Basically there are two modes an edition list can be updated.
 
@@ -20,93 +24,107 @@ class EditionListStore {
                 2. The elements are already defined => merge current objects with the new ones from the server
 
          */
-        for(let i = 0; i < editionListOfPiece.length; i++) {
+        editionListOfPiece.forEach((updatedEdition, index) => {
+            // this is the index formula for accessing an edition starting from a specific page
+            const storeEditionIndex = (page - 1) * pageSize + index;
 
-            // if editionList for a specific piece does not exist yet,
-            // just initialize a new array
-            if(!this.editionList[pieceId]) {
-                this.editionList[pieceId] = [];
-            }
-
-            // this is the index formula for accessing an edition of a specific
-            // page
-            let storeEditionIndex = (page - 1) * pageSize + i;
-            let editionsForPieces = this.editionList[pieceId];
-            
             // if edition already exists, just merge
-            if(editionsForPieces[storeEditionIndex]) {
-                editionsForPieces[storeEditionIndex] = React.addons.update(editionsForPieces[storeEditionIndex], {$merge: editionListOfPiece[i]});
+            if (pieceEditionList[storeEditionIndex]) {
+                pieceEditionList[storeEditionIndex] = React.addons.update(pieceEditionList[storeEditionIndex], { $merge: updatedEdition });
             } else {
                 // if does not exist, assign
-                editionsForPieces[storeEditionIndex] = editionListOfPiece[i];
+                pieceEditionList[storeEditionIndex] = updatedEdition;
+            }
+        });
+
+        // Remove editions after specified max by finding the index of the first
+        // edition larger than the max edition and using that to cut off the rest of the list
+        if (typeof maxEdition === 'number') {
+            const largerThanMaxIndex = pieceEditionList.findIndex(edition => edition.edition_number > maxEdition);
+
+            if (largerThanMaxIndex !== -1) {
+                // The API defines inflexible page buckets based on the page number
+                // and page size, so we cannot just arbitrarily cut off the end of
+                // a page and expect get the rest of it on the next pagination request.
+                // Hence, we use the max edition index as a guide for which page to
+                // cut off to so as to always provide complete pages.
+                page = Math.ceil(largerThanMaxIndex / pageSize);
+
+                // We only want to cut off the list if there are more editions than
+                // there should be (ie. we're not already at the end of the editions)
+                const totalPageSize = page * pageSize;
+                if (pieceEditionList.length > totalPageSize) {
+                    pieceEditionList.length = totalPageSize;
+                }
             }
         }
 
+        const lastEdition = pieceEditionList[pieceEditionList.length - 1];
+
         /**
          * page, pageSize, orderBy, orderAsc and count are specific to a single list of editions
          * therefore they need to be saved in relation to their parent-piece.
          *
          * Default values for both are set in the editon_list_actions.
          */
-        this.editionList[pieceId].page = page;
-        this.editionList[pieceId].pageSize = pageSize;
-        this.editionList[pieceId].orderBy = orderBy;
-        this.editionList[pieceId].orderAsc = orderAsc;
-        this.editionList[pieceId].count = count;
-        this.editionList[pieceId].filterBy = filterBy;
+        pieceEditionList.page = page;
+        pieceEditionList.pageSize = pageSize;
+        pieceEditionList.orderBy = orderBy;
+        pieceEditionList.orderAsc = orderAsc;
+        pieceEditionList.count = count;
+        pieceEditionList.filterBy = filterBy;
+
+        if (pieceEditionList.maxSeen == null || lastEdition.edition_number > pieceEditionList.maxSeen) {
+            pieceEditionList.maxSeen = lastEdition.edition_number;
+        }
+
+        this.editionList[pieceId] = pieceEditionList;
     }
 
     /**
      * We often just have to refresh the edition list for a certain pieceId,
      * this method provides exactly that functionality without any side effects
      */
-    onRefreshEditionList({pieceId, filterBy = {}}) {
+    onRefreshEditionList({ pieceId, filterBy }) {
+        const pieceEditionList = this.editionList[pieceId];
+
         // It may happen that the user enters the site logged in already
         // through /editions
         // If he then tries to delete a piece/edition and this method is called,
         // we'll not be able to refresh his edition list since its not yet there.
         // Therefore we can just return, since there is no data to be refreshed
-        if(!this.editionList[pieceId]) {
+        if (!this.editionList[pieceId]) {
             return;
         }
 
-        let prevEditionListLength = this.editionList[pieceId].length;
-        let prevEditionListPage = this.editionList[pieceId].page;
-        let prevEditionListPageSize = this.editionList[pieceId].pageSize;
-
-        // we can also refresh the edition list using filterBy,
-        // if we decide not to do that then the old filter will just be applied.
-        if(filterBy && Object.keys(filterBy).length <= 0) {
-            filterBy = this.editionList[pieceId].filterBy;
-            prevEditionListLength = 10;
-            prevEditionListPage = 1;
-            prevEditionListPageSize = 10;
+        if (typeof filterBy !== 'object') {
+            filterBy = pieceEditionList.filterBy;
         }
 
+        const { maxSeen, orderAsc, orderBy, pageSize } = pieceEditionList;
+
         // to clear an array, david walsh recommends to just set it's length to zero
         // http://davidwalsh.name/empty-array
-        this.editionList[pieceId].length = 0;
+        pieceEditionList.length = 0;
 
-        // refetch editions with adjusted page size
-        EditionsListActions.fetchEditionList(pieceId, 1, prevEditionListLength,
-                                             this.editionList[pieceId].orderBy,
-                                             this.editionList[pieceId].orderAsc,
-                                             filterBy)
-            .then(() => {
-                // reset back to the normal pageSize and page
-                this.editionList[pieceId].page = prevEditionListPage;
-                this.editionList[pieceId].pageSize = prevEditionListPageSize;
+        EditionsListActions
+            .fetchEditionList({
+                pieceId,
+                pageSize,
+                orderBy,
+                orderAsc,
+                filterBy,
+                maxSeen,
+                page: 1
             })
-            .catch((err) => {
-                console.logGlobal(err);
-            });
+            .catch(console.logGlobal);
     }
 
-    onSelectEdition({pieceId, editionId, toValue}) {
+    onSelectEdition({ pieceId, editionId, toValue }) {
         this.editionList[pieceId].forEach((edition) => {
 
             // Taken from: http://stackoverflow.com/a/519157/1263876
-            if(typeof toValue !== 'undefined' && edition.id === editionId) {
+            if (typeof toValue !== 'undefined' && edition.id === editionId) {
                 edition.selected = toValue;
             } else if(edition.id === editionId) {
                 if(edition.selected) {
@@ -132,7 +150,6 @@ class EditionListStore {
     }
 
     onToggleEditionList(pieceId) {
-
         this.isEditionListOpenForPieceId[pieceId] = {
             show: this.isEditionListOpenForPieceId[pieceId] ? !this.isEditionListOpenForPieceId[pieceId].show : true
         };
@@ -141,10 +158,10 @@ class EditionListStore {
         // the merge fails, as the edition list is not refreshed when closed.
         // Therefore in the case of a filter application when closed, we need to reload the
         // edition list
-        if(!this.isEditionListOpenForPieceId[pieceId].show) {
+        if (!this.isEditionListOpenForPieceId[pieceId].show) {
             // to clear an array, david walsh recommends to just set it's length to zero
             // http://davidwalsh.name/empty-array
-            
+
             this.editionList[pieceId].length = 0;
         }
     }
diff --git a/js/stores/edition_store.js b/js/stores/edition_store.js
index 3bf01a90..ebb7ccf9 100644
--- a/js/stores/edition_store.js
+++ b/js/stores/edition_store.js
@@ -12,39 +12,55 @@ import { mergeOptions } from '../utils/general_utils';
 
 class EditionStore {
     constructor() {
+        this.getInitialState();
+
+        this.bindActions(EditionActions);
+        this.registerAsync(mergeOptions(EditionSource, CoaSource));
+        this.exportPublicMethods({
+            getInitialState: this.getInitialState.bind(this)
+        });
+    }
+
+    getInitialState() {
         this.edition = {};
         this.editionMeta = {
-            err: null,
-            idToFetch: null
+            err: null
         };
         this.coaMeta = {
             err: null
         };
 
-        this.bindActions(EditionActions);
-        this.registerAsync(mergeOptions(EditionSource, CoaSource));
+        return {
+            edition: this.edition,
+            editionMeta: this.editionMeta,
+            coaMeta: this.coaMeta
+        };
     }
 
-    onFetchEdition(idToFetch) {
-        this.editionMeta.idToFetch = idToFetch;
+    onFetchEdition(editionId) {
+        this.getInstance().lookupEdition(editionId);
 
-        this.getInstance().lookupEdition();
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessFetchEdition({ edition }) {
         if (edition) {
             this.edition = edition;
             this.editionMeta.err = null;
-            this.editionMeta.idToFetch = null;
 
-            if (this.edition.coa && this.edition.acl.acl_coa &&
-                typeof this.edition.coa.constructor !== Object) {
-                this.getInstance().lookupCoa();
-            } else if (!this.edition.coa && this.edition.acl.acl_coa) {
-                this.getInstance().performCreateCoa();
+            // Also fetch coa if allowed
+            if (edition.acl.acl_coa) {
+                if (edition.coa && typeof edition.coa.constructor !== Object) {
+                    this.getInstance().lookupCoa(edition.coa);
+                } else if (!edition.coa) {
+                    this.getInstance().performCreateCoaForEdition(edition.bitcoin_id);
+                }
             }
         } else {
             this.editionMeta.err = new Error('Problem fetching the edition');
+            console.logGlobal(this.editionMeta.err);
         }
     }
 
@@ -54,32 +70,28 @@ class EditionStore {
             this.coaMeta.err = null;
         } else {
             this.coaMeta.err = new Error('Problem generating/fetching the COA');
+            console.logGlobal(this.coaMeta.err);
         }
     }
 
-    onFlushEdition() {
-        this.edition = {};
-        this.editionMeta = {
-            err: null,
-            idToFetch: null
-        };
-        this.coaMeta = {
-            err: null
-        };
-    }
-
     onErrorEdition(err) {
+        console.logGlobal(err);
         this.editionMeta.err = err;
     }
 
     onErrorCoa(err) {
         // On 404s, create a new COA as the COA has not been made yet
         if (err && err.json && err.json.status === 404) {
-            this.getInstance().performCreateCoa();
+            this.getInstance().performCreateCoaForEdition(this.edition.bitcoin_id);
         } else {
+            console.logGlobal(err);
             this.coaMeta.err = err;
         }
     }
+
+    onFlushEdition() {
+        this.getInitialState();
+    }
 }
 
 export default alt.createStore(EditionStore, 'EditionStore');
diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js
index 94c57113..22d35c51 100644
--- a/js/stores/piece_list_store.js
+++ b/js/stores/piece_list_store.js
@@ -31,7 +31,7 @@ class PieceListStore {
         this.requestActions = {};
         this.bindActions(PieceListActions);
     }
-    
+
     onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount, unfilteredPieceListCount, filterBy }) {
         this.page = page;
         this.pageSize = pageSize;
@@ -60,13 +60,13 @@ class PieceListStore {
          * point anyway. Then, this problem is automatically resolved.
          */
         pieceList.forEach((piece, i) => {
-            let oldPiece = this.pieceList[i];
-            if(oldPiece) {
+            const oldPiece = this.pieceList[i];
+            if (oldPiece) {
                 piece = React.addons.update(piece, {
                     show: { $set: oldPiece.show }
                 });
             }
-            
+
         });
 
         this.pieceList = pieceList;
@@ -76,12 +76,11 @@ class PieceListStore {
         this.requestActions = res.actions;
     }
 
-    onUpdatePropertyForPiece({pieceId, key, value}) {
-        let filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId);
+    onUpdatePropertyForPiece({ pieceId, key, value }) {
+        const filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId);
 
-        if(filteredPieceList.length === 1) {
-
-            let piece = filteredPieceList[0];
+        if (filteredPieceList.length === 1) {
+            const piece = filteredPieceList[0];
             piece[key] = value;
         } else {
             throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.');
diff --git a/js/stores/piece_store.js b/js/stores/piece_store.js
index 3b04736b..5ae80e74 100644
--- a/js/stores/piece_store.js
+++ b/js/stores/piece_store.js
@@ -1,32 +1,73 @@
 'use strict';
 
 import { alt } from '../alt';
+
 import PieceActions from '../actions/piece_actions';
 
+import PieceSource from '../sources/piece_source';
+
 
 class PieceStore {
     constructor() {
-        this.piece = {};
-        this.pieceError = null;
+        this.getInitialState();
+
         this.bindActions(PieceActions);
+        this.registerAsync(PieceSource);
+        this.exportPublicMethods({
+            getInitialState: this.getInitialState.bind(this)
+        });
+    }
+
+    getInitialState() {
+        this.piece = {};
+        this.pieceMeta = {
+            err: null
+        };
+
+        return {
+            piece: this.piece,
+            pieceMeta: this.pieceMeta
+        }
+    }
+
+    onFetchPiece(pieceId) {
+        this.getInstance().lookupPiece(pieceId);
+
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
+    }
+
+    onSuccessFetchPiece({ piece }) {
+        if (piece) {
+            this.onUpdatePiece(piece);
+        } else {
+            this.pieceMeta.err = new Error('Problem fetching the piece');
+            console.logGlobal(this.pieceMeta.err);
+        }
+    }
+
+    onErrorPiece(err) {
+        console.logGlobal(err);
+        this.pieceMeta.err = err;
+    }
+
+    onFlushPiece() {
+        this.getInitialState();
     }
 
     onUpdatePiece(piece) {
         this.piece = piece;
-        this.pieceError = null;
+        this.pieceMeta.err = null;
     }
 
-    onUpdateProperty({key, value}) {
-        if(this.piece && key in this.piece) {
+    onUpdateProperty({ key, value }) {
+        if (this.piece && key in this.piece) {
             this.piece[key] = value;
         } else {
             throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
         }
     }
-
-    onPieceFailed(err) {
-        this.pieceError = err;
-    }
 }
 
 export default alt.createStore(PieceStore, 'PieceStore');
diff --git a/js/stores/prize_list_store.js b/js/stores/prize_list_store.js
deleted file mode 100644
index 87b94f01..00000000
--- a/js/stores/prize_list_store.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-import { alt } from '../alt';
-
-import PrizeListActions from '../actions/prize_list_actions';
-
-class PrizeListStore {
-    constructor() {
-        this.prizeList = [];
-        this.prizeListCount = -1;
-        this.bindActions(PrizeListActions);
-    }
-
-    onUpdatePrizeList({ prizeList, prizeListCount }) {
-        this.prizeList = prizeList;
-        this.prizeListCount = prizeListCount;
-    }
-}
-
-export default alt.createStore(PrizeListStore, 'PrizeListStore');
\ No newline at end of file
diff --git a/js/stores/user_store.js b/js/stores/user_store.js
index 6289af5e..fe96eaa8 100644
--- a/js/stores/user_store.js
+++ b/js/stores/user_store.js
@@ -13,7 +13,6 @@ class UserStore {
         this.currentUser = {};
         this.userMeta = {
             hasLoaded: false,
-            invalidateCache: false,
             err: null
         };
 
@@ -25,16 +24,17 @@ class UserStore {
     }
 
     onFetchCurrentUser(invalidateCache) {
-        this.userMeta.invalidateCache = invalidateCache;
-
-        if (!this.getInstance().isLoading()) {
-            this.getInstance().lookupCurrentUser();
+        if (invalidateCache || !this.getInstance().isLoading()) {
+            this.getInstance().lookupCurrentUser(invalidateCache);
         }
+
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessFetchCurrentUser({ users: [ user = {} ] = [] }) {
         this.userMeta.hasLoaded = true;
-        this.userMeta.invalidateCache = false;
         this.userMeta.err = null;
 
         if (user.email && user.email !== this.currentUser.email) {
@@ -46,6 +46,10 @@ class UserStore {
 
     onLogoutCurrentUser() {
         this.getInstance().performLogoutCurrentUser();
+
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessLogoutCurrentUser() {
diff --git a/js/stores/webhook_store.js b/js/stores/webhook_store.js
index 942ff748..ebc84d51 100644
--- a/js/stores/webhook_store.js
+++ b/js/stores/webhook_store.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import { alt } from '../alt';
+
 import WebhookActions from '../actions/webhook_actions';
 
 import WebhookSource from '../sources/webhook_source';
@@ -10,12 +11,9 @@ class WebhookStore {
         this.webhooks = [];
         this.webhookEvents = [];
         this.webhookMeta = {
-            invalidateCache: false,
-            err: null,
-            idToDelete: null
+            err: null
         };
         this.webhookEventsMeta = {
-            invalidateCache: false,
             err: null
         };
 
@@ -24,54 +22,57 @@ class WebhookStore {
     }
 
     onFetchWebhooks(invalidateCache) {
-        this.webhookMeta.invalidateCache = invalidateCache;
-        this.getInstance().lookupWebhooks();
+        if (invalidateCache || !this.getInstance().isLoading()) {
+            this.getInstance().lookupWebhooks(invalidateCache);
+        }
+
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessFetchWebhooks({ webhooks = [] }) {
-        this.webhookMeta.invalidateCache = false;
         this.webhookMeta.err = null;
         this.webhooks = webhooks;
 
-        this.webhookEventsMeta.invalidateCache = true;
-        this.getInstance().lookupWebhookEvents();
+        this.onFetchWebhookEvents(true);
     }
 
     onFetchWebhookEvents(invalidateCache) {
-        this.webhookEventsMeta.invalidateCache = invalidateCache;
-        this.getInstance().lookupWebhookEvents();
+        if (invalidateCache || !this.getInstance().isLoading()) {
+            this.getInstance().lookupWebhookEvents(invalidateCache);
+        }
+
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessFetchWebhookEvents({ events }) {
-        this.webhookEventsMeta.invalidateCache = false;
         this.webhookEventsMeta.err = null;
 
         // remove all events that have already been used.
         const usedEvents = this.webhooks
-                                .reduce((tempUsedEvents, webhook) => {
-                                    tempUsedEvents.push(webhook.event.split('.')[0]);
-                                    return tempUsedEvents;
-                                }, []);
+                               .reduce((tempUsedEvents, webhook) => {
+                                   tempUsedEvents.push(webhook.event.split('.')[0]);
+                                   return tempUsedEvents;
+                               }, []);
 
         this.webhookEvents = events.filter((event) => {
             return usedEvents.indexOf(event) === -1;
         });
     }
 
-    onRemoveWebhook(id) {
-        this.webhookMeta.invalidateCache = true;
-        this.webhookMeta.idToDelete = id;
+    onRemoveWebhook(webhookId) {
+        this.getInstance().performRemoveWebhook(webhookId);
 
-        if(!this.getInstance().isLoading()) {
-            this.getInstance().performRemoveWebhook();
-        }
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessRemoveWebhook() {
-        this.webhookMeta.idToDelete = null;
-        if(!this.getInstance().isLoading()) {
-            this.getInstance().lookupWebhooks();
-        }
+        this.getInstance().lookupWebhooks(true);
     }
 
     onErrorWebhooks(err) {
diff --git a/js/stores/whitelabel_store.js b/js/stores/whitelabel_store.js
index b6cd0662..a2664ccb 100644
--- a/js/stores/whitelabel_store.js
+++ b/js/stores/whitelabel_store.js
@@ -1,7 +1,9 @@
 'use strict';
 
 import { altWhitelabel } from '../alt';
+
 import WhitelabelActions from '../actions/whitelabel_actions';
+
 import WhitelabelSource from '../sources/whitelabel_source';
 
 
@@ -9,7 +11,6 @@ class WhitelabelStore {
     constructor() {
         this.whitelabel = {};
         this.whitelabelMeta = {
-            invalidateCache: false,
             err: null
         };
 
@@ -18,15 +19,16 @@ class WhitelabelStore {
     }
 
     onFetchWhitelabel(invalidateCache) {
-        this.whitelabelMeta.invalidateCache = invalidateCache;
-
-        if(!this.getInstance().isLoading()) {
-            this.getInstance().lookupWhitelabel();
+        if (invalidateCache || !this.getInstance().isLoading()) {
+            this.getInstance().lookupWhitelabel(invalidateCache);
         }
+
+        // Prevent alt from sending an empty change event when a request is sent
+        // off to the source
+        this.preventDefault();
     }
 
     onSuccessFetchWhitelabel({ whitelabel = {} }) {
-        this.whitelabelMeta.invalidateCache = false;
         this.whitelabelMeta.err = null;
         this.whitelabel = whitelabel;
     }
diff --git a/js/third_party/debug.js b/js/third_party/debug_handler.js
similarity index 99%
rename from js/third_party/debug.js
rename to js/third_party/debug_handler.js
index 23fe4d04..cd11bf72 100644
--- a/js/third_party/debug.js
+++ b/js/third_party/debug_handler.js
@@ -4,7 +4,6 @@ import { altThirdParty } from '../alt';
 import EventActions from '../actions/event_actions';
 
 
-
 class DebugHandler {
     constructor() {
         let symbols = [];
diff --git a/js/third_party/facebook.js b/js/third_party/facebook_handler.js
similarity index 67%
rename from js/third_party/facebook.js
rename to js/third_party/facebook_handler.js
index eab0b0e0..9e40e7ab 100644
--- a/js/third_party/facebook.js
+++ b/js/third_party/facebook_handler.js
@@ -1,13 +1,18 @@
 'use strict';
 
 import { altThirdParty } from '../alt';
+
 import EventActions from '../actions/event_actions';
+import FacebookActions from '../actions/facebook_actions';
 
 import AppConstants from '../constants/application_constants'
 
 class FacebookHandler {
     constructor() {
+        this.loaded = false;
+
         this.bindActions(EventActions);
+        this.bindActions(FacebookActions);
     }
 
     onApplicationWillBoot(settings) {
@@ -16,15 +21,19 @@ class FacebookHandler {
         window.fbAsyncInit = () => {
             FB.init({
                 appId: AppConstants.facebook.appId,
-                // Force FB to parse everything on first load to make sure all the XFBML components are initialized.
-                // If we don't do this, we can run into issues with components on the first load who are not be
-                // initialized.
-                xfbml: true,
+                // Don't parse anything on the first load as we will parse all XFBML components as necessary.
+                xfbml: false,
                 version: 'v2.5',
                 cookie: false
             });
+
+            FacebookActions.sdkReady();
         };
     }
+
+    onSdkReady() {
+        this.loaded = true;
+    }
 }
 
 export default altThirdParty.createStore(FacebookHandler, 'FacebookHandler');
diff --git a/js/third_party/ga.js b/js/third_party/ga_handler.js
similarity index 100%
rename from js/third_party/ga.js
rename to js/third_party/ga_handler.js
diff --git a/js/third_party/intercom.js b/js/third_party/intercom_handler.js
similarity index 100%
rename from js/third_party/intercom.js
rename to js/third_party/intercom_handler.js
diff --git a/js/third_party/notifications.js b/js/third_party/notifications_handler.js
similarity index 100%
rename from js/third_party/notifications.js
rename to js/third_party/notifications_handler.js
diff --git a/js/third_party/raven.js b/js/third_party/raven_handler.js
similarity index 100%
rename from js/third_party/raven.js
rename to js/third_party/raven_handler.js
diff --git a/js/utils/constants_utils.js b/js/utils/constants_utils.js
index 8bf408d1..b42db817 100644
--- a/js/utils/constants_utils.js
+++ b/js/utils/constants_utils.js
@@ -1,15 +1,19 @@
 'use strict';
 
-import appConstants from '../constants/application_constants';
+import AppConstants from '../constants/application_constants';
+
+export function getDefaultSubdomainSettings() {
+    return AppConstants.defaultDomain;
+}
 
 export function getSubdomainSettings(subdomain) {
-    let settings = appConstants.subdomains.filter((sdSettings) => subdomain === sdSettings.subdomain);
+    const settings = AppConstants.subdomains.filter((sdSettings) => subdomain === sdSettings.subdomain);
 
-    if(settings.length === 1) {
+    if (settings.length === 1) {
         return settings[0];
-    } else if(settings.length === 0) {
+    } else if (settings.length === 0) {
         console.warn('There are no subdomain settings for the subdomain: ' + subdomain);
-        return appConstants.defaultDomain;
+        return AppConstants.defaultDomain;
     } else {
         throw new Error('Matched multiple subdomains. Adjust constants file.');
     }
diff --git a/js/utils/dom_utils.js b/js/utils/dom_utils.js
index d009f90f..f0cd852c 100644
--- a/js/utils/dom_utils.js
+++ b/js/utils/dom_utils.js
@@ -1,5 +1,9 @@
 'use strict';
 
+import React from 'react';
+
+import { getLinkRegex, isEmail } from './regex_utils';
+
 /**
  * Set the title in the browser window.
  */
@@ -13,21 +17,24 @@ export function setDocumentTitle(title) {
  * @param  {object} elementAttributes: hash table containing the attributes of the relevant element
  */
 function constructHeadElement(elementType, elementId, elementAttributes) {
-    let head = (document.head || document.getElementsByTagName('head')[0]);
-    let element = document.createElement(elementType);
-    let oldElement = document.getElementById(elementId);
+    const head = (document.head || document.getElementsByTagName('head')[0]);
+    const element = document.createElement(elementType);
+    const oldElement = document.getElementById(elementId);
+
     element.setAttribute('id', elementId);
-    for (let k in elementAttributes){
+
+    for (let k in elementAttributes) {
         try {
             element.setAttribute(k, elementAttributes[k]);
-        }
-        catch(e){
+        } catch(e) {
             console.warn(e.message);
         }
     }
+
     if (oldElement) {
         head.removeChild(oldElement);
     }
+
     head.appendChild(element);
 }
 
@@ -37,9 +44,68 @@ function constructHeadElement(elementType, elementId, elementAttributes) {
  */
 export function constructHead(headObject){
     for (let k in headObject){
-        let favicons = headObject[k];
+        const favicons = headObject[k];
         for (let f in favicons){
             constructHeadElement(k, f, favicons[f]);
         }
     }
-}
\ No newline at end of file
+}
+
+/**
+ * Replaces the links and emails in a given string with anchor elements.
+ *
+ * @param  {string} string          String to anchorize
+ * @param  {(object)} options       Options object for anchorizing
+ * @param  {(boolean)} emails         Whether or not to replace emails (default: true)
+ * @param  {(boolean)} links          Whether or not to replace links (default: true)
+ * @param  {(string)} target          Anchor target attribute (default: '_blank')
+ * @return {string|React.element[]} Anchorized string as usable react element, either as an array of
+ *                                  elements or just a string
+ */
+export function anchorize(string, { emails: replaceEmail = true, links: replaceLink = true, target = '_blank' } = {}) {
+    if (!replaceEmail && !replaceLink) {
+        return string;
+    }
+
+    const linkRegex = getLinkRegex();
+    const strWithAnchorElems = [];
+    let lastMatchIndex = 0;
+    let regexMatch;
+
+    while (regexMatch = linkRegex.exec(string)) {
+        const [ matchedStr, schemeName ] = regexMatch;
+        const matchedStrIsEmail = isEmail(matchedStr);
+
+        let anchorizedMatch;
+        if (matchedStrIsEmail && replaceEmail) {
+            anchorizedMatch = (<a href={`mailto:${matchedStr}`}>{matchedStr}</a>);
+        } else if (!matchedStrIsEmail && replaceLink) {
+            anchorizedMatch = (<a href={`${schemeName ? matchedStr : ('http://' + matchedStr)}`} target={target}>{matchedStr}</a>);
+        }
+
+        // We only need to add an element to the array and update the lastMatchIndex if we actually create an anchor
+        if (anchorizedMatch) {
+            // First add the string between the end of the last anchor text and the start of the current match
+            const currentMatchStartIndex = linkRegex.lastIndex - matchedStr.length;
+
+            if (lastMatchIndex !== currentMatchStartIndex) {
+                strWithAnchorElems.push(string.substring(lastMatchIndex, currentMatchStartIndex));
+            }
+
+            strWithAnchorElems.push(anchorizedMatch);
+
+            lastMatchIndex = linkRegex.lastIndex;
+        }
+    }
+
+    if (strWithAnchorElems.length) {
+        // Add the string between the end of the last anchor and the end of the string
+        if (lastMatchIndex !== string.length) {
+            strWithAnchorElems.push(string.substring(lastMatchIndex));
+        }
+
+        return strWithAnchorElems;
+    } else {
+        return string;
+    }
+}
diff --git a/js/utils/error_utils.js b/js/utils/error_utils.js
index eefe40d8..a29f59a0 100644
--- a/js/utils/error_utils.js
+++ b/js/utils/error_utils.js
@@ -13,22 +13,19 @@ import AppConstants from '../constants/application_constants';
  * @param  {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
  * @param  {string} comment  Will also be submitted to Sentry, but will not be logged
  */
-function logGlobal(error, comment, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1) {
+function logGlobal(error, comment, ignoreSentry) {
     console.error(error);
 
-    if(!ignoreSentry) {
-        if(comment) {
-            Raven.captureException(error, {extra: { comment }});
-        } else {
-            Raven.captureException(error);
-        }
+    if (!ignoreSentry) {
+        Raven.captureException(error, comment ? { extra: { comment } } : undefined);
     }
 }
 
 export function initLogging() {
     // Initialize Raven for logging on Sentry
     Raven.config(AppConstants.raven.url, {
-        release: AppConstants.version
+        release: AppConstants.version,
+        ignoreErrors: AppConstants.errorMessagesToIgnore
     }).install();
 
     window.onerror = Raven.process;
diff --git a/js/utils/file_utils.js b/js/utils/file_utils.js
index 9c1423b3..1e4998f8 100644
--- a/js/utils/file_utils.js
+++ b/js/utils/file_utils.js
@@ -78,7 +78,7 @@ export function computeHashOfFile(file) {
                 progress: start / file.size,
                 reject
             });
-            
+
             fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
         }
 
@@ -101,4 +101,4 @@ export function extractFileExtensionFromString(s) {
     const explodedFileName = s.split('.');
     return explodedFileName.length > 1 ? explodedFileName.pop()
                                        : '';
-}
\ No newline at end of file
+}
diff --git a/js/utils/regex_utils.js b/js/utils/regex_utils.js
index af948b2b..13c14ecd 100644
--- a/js/utils/regex_utils.js
+++ b/js/utils/regex_utils.js
@@ -1,7 +1,56 @@
-'use strict'
+'use strict';
 
-export function isEmail(string) {
+// TODO: Create Unittests that test all functions
+
+// We return new regexes everytime as opposed to using a constant regex because
+// regexes with the global flag maintain internal iterators that can cause problems:
+// http://bjorn.tipling.com/state-and-regular-expressions-in-javascript
+// http://www.2ality.com/2013/08/regexp-g.html
+export function getEmailRegex() {
     // This is a bit of a weak test for an email, but you really can't win them all
     // http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address
-    return !!string && string.match(/.*@.*\..*/);
+    return /.*@.*\..*/g;
+}
+
+export function getLinkRegex() {
+    // You really can't win them all with urls too (unless a 500 character regex that adheres
+    // to a strict interpretation of urls sounds like fun!)
+    // https://mathiasbynens.be/demo/url-regex
+    //
+    // This was initially based off of the one angular uses for its linky
+    // (https://github.com/angular/angular.js/blob/master/src/ngSanitize/filter/linky.js)...
+    // but then it evovled into its own thing to support capturing groups for filtering the
+    // hostname and other technically valid urls.
+    //
+    // Capturing groups:
+    //   1. URL scheme
+    //   2. URL without scheme
+    //   3. Host name
+    //   4. Path
+    //   5. Fragment
+    //
+    // Passes most tests of https://mathiasbynens.be/demo/url-regex, but provides a few false
+    // positives for some tests that are too strict (like `foo.com`). There are a few other
+    // false positives, such as `http://www.foo.bar./` but c'mon, that one's not my fault.
+    // I'd argue we would want to match that as a link anyway.
+    //
+    // Note: This also catches emails, as otherwise it would match the `ascribe.io` in `hi@ascribe.io`,
+    // producing (what I think is) more surprising behaviour than the alternative.
+    return /\b(https?:\/\/)?((?:www\.)?((?:[^\s.,;()\/]+\.)+[^\s$_!*()$&.,;=?+\/\#]+)((?:\/|\?|\/\?)[^\s#^`{}<>?"\[\]\/\|]+)*\/?(#[^\s#%^`{}<>?"\[\]\/\|]*)?)/g;
+}
+
+/**
+ * @param  {string} string String to check
+ * @return {boolean}       Whether string is an email or not
+ */
+export function isEmail(string) {
+    return !!string && string.match(getEmailRegex());
+}
+
+/**
+ * @param  {string} string String to check
+ * @return {boolean}       Whether string is an link or not
+ */
+export function isLink(string) {
+    return !!string && string.match(getLinkRegex());
 }
diff --git a/js/utils/url_utils.js b/js/utils/url_utils.js
index 94584026..41306498 100644
--- a/js/utils/url_utils.js
+++ b/js/utils/url_utils.js
@@ -1,4 +1,4 @@
-'use strict'
+'use strict';
 
 import camelCase from 'camelcase';
 import decamelize from 'decamelize';
diff --git a/package.json b/package.json
index ee1456fb..9ec357d4 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,28 @@
   },
   "scripts": {
     "lint": "eslint ./js",
+    "preinstall": "export SAUCE_CONNECT_DOWNLOAD_ON_INSTALL=true",
     "postinstall": "npm run build",
     "build": "gulp build --production",
-    "start": "node server.js"
+    "start": "node server.js",
+    "test": "npm run sauce-test",
+
+    "sauce-test": "mocha ./test/integration/tests/",
+    "tunnel": "node ./test/integration/tunnel.js",
+
+    "vi-clean": "rm -rf ./gemini-report",
+    "vi-phantom": "phantomjs --webdriver=4444",
+    "vi-update": "gemini update -c ./test/gemini/.gemini.yml",
+    "vi-test": "npm run vi-test:base || true",
+    "vi-test:base": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat",
+    "vi-test:all": "npm run vi-test",
+    "vi-test:main": "npm run vi-test:base -- --browser MainDesktop --browser MainMobile || true",
+    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test:base || true",
+    "vi-test:cc": "npm run vi-test:base -- --browser CcDesktop --browser CcMobile",
+    "vi-test:cyland": "npm run vi-test:base -- --browser CylandDesktop --browser CylandMobile || true",
+    "vi-test:ikonotv": "npm run vi-test:base -- --browser IkonotvDesktop --browser IkonotvMobile || true",
+    "vi-test:lumenus": "npm run vi-test:base -- --browser LumenusDesktop --browser LumenusMobile || true",
+    "vi-test:23vivi": "npm run vi-test:base -- --browser 23viviDesktop --browser 23viviMobile || true"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"
@@ -35,8 +54,16 @@
   "devDependencies": {
     "babel-eslint": "^3.1.11",
     "babel-jest": "^5.2.0",
-    "gulp-sass": "^2.1.1",
-    "jest-cli": "^0.4.0"
+    "chai": "^3.4.1",
+    "chai-as-promised": "^5.1.0",
+    "colors": "^1.1.2",
+    "dotenv": "^1.2.0",
+    "gemini": "^2.1.0",
+    "jest-cli": "^0.4.0",
+    "mocha": "^2.3.4",
+    "phantomjs2": "^2.0.2",
+    "sauce-connect-launcher": "^0.13.0",
+    "wd": "^0.4.0"
   },
   "dependencies": {
     "alt": "^0.16.5",
@@ -48,6 +75,7 @@
     "browserify": "^9.0.8",
     "browserify-shim": "^3.8.10",
     "camelcase": "^1.2.1",
+    "classlist-polyfill": "^1.0.2",
     "classnames": "^1.2.2",
     "compression": "^1.4.4",
     "decamelize": "^1.1.1",
@@ -61,7 +89,7 @@
     "gulp-if": "^1.2.5",
     "gulp-minify-css": "^1.1.6",
     "gulp-notify": "^2.2.0",
-    "gulp-sass": "^2.0.1",
+    "gulp-sass": "^2.1.1",
     "gulp-sourcemaps": "^1.5.2",
     "gulp-template": "~3.0.0",
     "gulp-uglify": "^1.2.0",
diff --git a/phantomjs/launch_app_and_login.js b/phantomjs/launch_app_and_login.js
new file mode 100644
index 00000000..e5418519
--- /dev/null
+++ b/phantomjs/launch_app_and_login.js
@@ -0,0 +1,62 @@
+'use strict';
+
+var liveEnv = 'https://www.ascribe.io/app/login';
+// Note that if you are trying to access staging, you will need to use
+// the --ignore-ssl-errors=true flag on phantomjs
+var stagingEnv = 'https://www.ascribe.ninja/app/login';
+var localEnv = 'http://localhost.com:3000/login';
+
+var page = require('webpage').create();
+page.open(localEnv, function(status) {
+    var attemptedToLogIn;
+    var loginCheckInterval;
+
+    console.log('Status: ' + status);
+
+    if (status === 'success') {
+        console.log('Attempting to log in...');
+
+        attemptedToLogIn = page.evaluate(function () {
+            try {
+                var inputForm = document.querySelector('.ascribe-login-wrapper');
+                var email = inputForm.querySelector('input[type=email]');
+                var password = inputForm.querySelector('input[type=password]');
+                var submitBtn = inputForm.querySelector('button[type=submit]');
+
+                email.value = 'dimi@mailinator.com';
+                password.value = '0000000000';
+                submitBtn.click();
+
+                return true;
+            } catch (ex) {
+                console.log('Error while trying to find login elements, not logging in.');
+                return false;
+            }
+        });
+
+        if (attemptedToLogIn) {
+            loginCheckInterval = setInterval(function () {
+                var loggedIn = page.evaluate(function () {
+                    // When they log in, they are taken to the collections page.
+                    // When the piece list is loaded, the accordion list is either available or
+                    // shows a placeholder, so let's check for these elements to determine
+                    // when login is finished
+                    return !!(document.querySelector('.ascribe-accordion-list:not(.ascribe-loading-position)') ||
+                              document.querySelector('.ascribe-accordion-list-placeholder'));
+                });
+
+                if (loggedIn) {
+                    clearInterval(loginCheckInterval);
+                    console.log('Successfully logged in.');
+                }
+            }, 1000);
+        } else {
+            console.log('Something happened while trying to log in, aborting...');
+            phantom.exit();
+        }
+
+    } else {
+        console.log('Failed to load page, exiing...');
+        phantom.exit();
+    }
+});
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index 96b97783..55fe2868 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -447,9 +447,9 @@ fieldset[disabled] .btn-secondary.active {
 }
 
 .search-bar > .form-group > .input-group {
-    border: 1px solid rgba(0, 0, 0, 0);
+    border: 1px solid $ascribe-blue-border;
     &:hover, &:focus, &:active {
-        border-color: $ascribe-blue-border;
+        border-color: $ascribe-blue-border-active;
     }
     input::-webkit-input-placeholder {
         color: rgba($ascribe-dark-blue, 0.5);
diff --git a/sass/ascribe_global_notification.scss b/sass/ascribe_global_notification.scss
index 5286a32c..a2540ea7 100644
--- a/sass/ascribe_global_notification.scss
+++ b/sass/ascribe_global_notification.scss
@@ -7,23 +7,25 @@
     position: fixed;
     transition: .2s bottom cubic-bezier(.77, 0, .175, 1);
     width: 100%;
-}
 
-.ascribe-global-notification-off {
-    bottom: -3.5em;
-}
+    z-index: 9999;
 
-.ascribe-global-notification-on {
-    bottom: 0;
-}
+    > div {
+        padding: .5em 1em;
+        text-align: center;
+    }
 
-.ascribe-global-notification > div,
-.ascribe-global-notification-bubble > div {
-    display: table-cell;
-    font-size: 1.25em;
-    padding-right: 3em;
-    text-align: right;
-    vertical-align: middle;
+    &.ascribe-global-notification-off {
+        bottom: -5em;
+    }
+
+    &.ascribe-global-notification-on {
+        bottom: 0;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.2s;
+    }
 }
 
 .ascribe-global-notification-bubble {
@@ -33,21 +35,35 @@
     color: white;
     display: table;
     height: 3.5em;
+    max-width: 75%;
     position: fixed;
-    right: -50em;
-    transition: 1s right ease;
+    transition: 0.5s right ease;
+
+    z-index: 9999;
 
     > div {
         padding: .75em 1.5em;
+        text-align: left;
+    }
+
+    &.ascribe-global-notification-bubble-off {
+        right: -100em;
+    }
+
+    &.ascribe-global-notification-bubble-on {
+        right: 3.5em;
+
+        // React can sometimes take some time to load the notification message,
+        // so add a small delay before showing the notification
+        transition-delay: 0.5s;
     }
 }
 
-.ascribe-global-notification-bubble-off {
-    right: -100em;
-}
-
-.ascribe-global-notification-bubble-on {
-    right: 3.5em;
+.ascribe-global-notification > div,
+.ascribe-global-notification-bubble > div {
+    display: table-cell;
+    font-size: 1.25em;
+    vertical-align: middle;
 }
 
 .ascribe-global-notification-danger {
diff --git a/sass/ascribe_property.scss b/sass/ascribe_property.scss
index d214c57e..ee12f413 100644
--- a/sass/ascribe_property.scss
+++ b/sass/ascribe_property.scss
@@ -3,7 +3,6 @@ $ascribe-red-error: rgb(169, 68, 66);
 .ascribe-property-wrapper {
     background-color: white;
     border-left: 3px solid rgba(0, 0, 0, 0);
-    padding-bottom: 1em;
     text-align: center;
     width: 100%;
 
@@ -37,7 +36,6 @@ $ascribe-red-error: rgb(169, 68, 66);
                 margin-right: 1em;
             }
         }
-        
 
         > input,
         > textarea {
@@ -74,9 +72,7 @@ $ascribe-red-error: rgb(169, 68, 66);
     border-top: 1px solid rgba(0, 0, 0, .05);
     cursor: pointer;
     display: inline-block;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    padding-top: 1em;
+    padding: 1em 1.5em;
     text-align: left;
     width: 100%;
 
@@ -233,4 +229,4 @@ $ascribe-red-error: rgb(169, 68, 66);
     > span > span {
         margin-top: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/sass/ascribe_social_share.scss b/sass/ascribe_social_share.scss
index 0a577fb6..64e6e06b 100644
--- a/sass/ascribe_social_share.scss
+++ b/sass/ascribe_social_share.scss
@@ -7,4 +7,8 @@
     width: 56px;
     box-sizing: content-box;   /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */
     padding: 1px 0;
+
+    &:not(:first-child) {
+        margin-left: 1px;
+    }
 }
diff --git a/sass/ascribe_textarea.scss b/sass/ascribe_textarea.scss
index bcd0502a..e241e442 100644
--- a/sass/ascribe_textarea.scss
+++ b/sass/ascribe_textarea.scss
@@ -14,7 +14,7 @@
     font-family: inherit;
     margin: 0;
     padding: 0;
-    text-align: justify;
+    text-align: left;
     white-space: -moz-pre-wrap;
     white-space: -o-pre-wrap;
     white-space: -pre-wrap;
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index fc772cd6..63d0c127 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -9,6 +9,12 @@
     text-align: center;
     vertical-align: middle;
     padding-top: 1.5em;
+
+    @media screen and (max-width: 625px) {
+        .file-name {
+            display: block;
+        }
+    }
 }
 
 .inactive-dropzone {
@@ -78,12 +84,6 @@
     }
 }
 
-.file-drag-and-drop-preview-table-wrapper {
-    display: table;
-    height: 94px;
-    width: 104px;
-}
-
 .file-drag-and-drop-preview {
     background-color: #eeeeee;
     border: 1px solid #616161;
@@ -131,7 +131,7 @@
     width: 104px;
 
     // REFACTOR TO USE TABLE CELL
-    .action-file, .spinner-file, .icon-ascribe-ok {
+    .action-file, .spinner-file {
         margin-top: 1em;
         line-height: 1.3;
     }
@@ -142,23 +142,21 @@
 }
 
 .file-drag-and-drop-preview-other {
-    display: table-cell;
+    height: 94px;
     text-align: center;
-    vertical-align: middle;
+    width: 104px;
 
     p {
         margin-top: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .action-file:not(.icon-ascribe-ok), .spinner-file {
         margin-top: 0;
         position: relative;
-        top: .3em;
-
-        span:not(:first-child) {
-            display: block;
-            margin-top: .5em;
-        }
+        top: 0.8em;
     }
 }
 
@@ -182,15 +180,20 @@
     height: 12px;
 }
 
-.upload-button-wrapper {
+.ascribe-upload-button {
+    display: inline-block;
     text-align: left;
 
-    .btn {
-        font-size: 1em;
-        margin-right: 1em;
-    }
+    &.ascribe-upload-button-has-label {
+        display: block;
 
-    span + .btn {
-        margin-left: 1em;
+        .btn {
+            font-size: 1em;
+            margin-right: 1em;
+        }
+
+        span + .btn {
+            margin-left: 1em;
+        }
     }
 }
diff --git a/sass/ascribe_variables.scss b/sass/ascribe_variables.scss
index c3263f4d..cdff14da 100644
--- a/sass/ascribe_variables.scss
+++ b/sass/ascribe_variables.scss
@@ -5,6 +5,7 @@ $ascribe-light-blue: #D3DEE4;
 $ascribe-white: #F8F8F8;
 $ascribe-pink: #D10074;
 $ascribe-blue-border: rgba(0, 60, 105, 0.1);
+$ascribe-blue-border-active: rgba(0, 60, 105, 0.2);
 $ascribe-red-error: rgb(169, 68, 66);
 
 
diff --git a/sass/whitelabel/prize/index.scss b/sass/whitelabel/prize/index.scss
index dfdcaebd..664fe7a1 100644
--- a/sass/whitelabel/prize/index.scss
+++ b/sass/whitelabel/prize/index.scss
@@ -1,9 +1,10 @@
+@import 'simple_prize/simple_prize_variables';
 @import 'simple_prize/simple_prize_custom_style';
+@import 'sluice/sluice_custom_style';
 @import 'portfolioreview/portfolioreview_custom_style';
 
 .ascribe-prize-app {
     border-radius: 0;
-    min-height: 100vh;
     padding-top: 70px;
     padding-bottom: 10px;
 }
diff --git a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
index 0759cf49..385f4ed7 100644
--- a/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
+++ b/sass/whitelabel/prize/portfolioreview/portfolioreview_custom_style.scss
@@ -2,7 +2,6 @@ $pr--nav-fg-prim-color: black;
 $pr--button-color: $pr--nav-fg-prim-color;
 
 .client--portfolioreview {
-
     .btn-wide,
     .btn-default {
         background-color: $pr--button-color;
@@ -90,7 +89,7 @@ $pr--button-color: $pr--nav-fg-prim-color;
 
     .register-piece--info {
         text-align: center;
-        
+
         h1, h2 {
             font-variant: small-caps;
         }
diff --git a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
index 4cfb7c82..e022f34e 100644
--- a/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
+++ b/sass/whitelabel/prize/simple_prize/simple_prize_custom_style.scss
@@ -1,7 +1,3 @@
-$sluice--nav-bg-color: #fcfcfc;
-$sluice--nav-fg-prim-color: #1E1E1E;
-$sluice--button-color: $sluice--nav-fg-prim-color;
-
 .wp {
     height: 100%;
     max-width: 90%;
@@ -37,10 +33,10 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
 
 
 .rating-container {
-    color: lighten($sluice--nav-fg-prim-color, 80%) !important;
+    color: lighten($simple-prize--nav-fg-prim-color, 80%) !important;
     .rating-stars {
         width: 25px;
-        color: $sluice--nav-fg-prim-color !important;
+        color: $simple-prize--nav-fg-prim-color !important;
     }
 }
 
@@ -72,186 +68,3 @@ $sluice--button-color: $sluice--nav-fg-prim-color;
     padding: 0.7em;
 
 }
-
-.client--sluice {
-    .navbar-default {
-        background-color: $sluice--nav-bg-color;
-        box-shadow: none;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    }
-    .navbar-nav > li > a,
-    .navbar-nav > li > .active a {
-        color: $sluice--nav-fg-prim-color;
-        background-color: $sluice--nav-bg-color;
-    }
-    .navbar-nav > li > a:hover {
-        color: lighten($sluice--nav-fg-prim-color, 40%);
-    }
-    .navbar-nav > .active a,
-    .navbar-nav > .active a:hover,
-    .navbar-nav > .active a:focus {
-        color: $sluice--nav-fg-prim-color;
-        border-bottom-color: $sluice--nav-fg-prim-color;
-        background-color: $sluice--nav-bg-color;
-    }
-    .dropdown-menu > li > a:hover,
-    .dropdown-menu > li > a:focus {
-        color: lighten($sluice--nav-fg-prim-color, 40%);
-        background-color: $sluice--nav-bg-color;
-    }
-    .navbar-nav > .open > a,
-    .navbar-nav > .open > a:hover,
-    .navbar-nav > .open > a:focus,
-    .dropdown-menu > .active > a,
-    .dropdown-menu > .active > a:hover,
-    .dropdown-menu > .active > a:focus {
-        color: lighten($sluice--nav-fg-prim-color, 40%);
-        background-color: $sluice--nav-bg-color;
-    }
-    .dropdown-menu {
-        background-color: $sluice--nav-bg-color;
-    }
-
-    .dropdown-menu > li > a {
-        color: $sluice--nav-fg-prim-color;
-    }
-
-    .navbar-toggle .icon-bar {
-        background-color: $sluice--nav-fg-prim-color;
-    }
-
-    .navbar-toggle:hover,
-    .navbar-toggle:focus {
-        background-color: $sluice--nav-bg-color;
-    }
-}
-
-.client--sluice .ascribe-footer {
-    display: none;
-}
-
-
-.client--sluice .icon-ascribe-search{
-    color: $sluice--button-color;
-}
-
-.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
-    display: none;
-}
-
-// disabled buttons
-.client--sluice {
-    .btn-default.disabled,
-    .btn-default.disabled:hover,
-    .btn-default.disabled:focus,
-    .btn-default.disabled.focus,
-    .btn-default.disabled:active,
-    .btn-default.disabled.active,
-    .btn-default[disabled],
-    .btn-default[disabled]:hover,
-    .btn-default[disabled]:focus,
-    .btn-default[disabled].focus,
-    .btn-default[disabled]:active,
-    .btn-default[disabled].active,
-    fieldset[disabled] .btn-default,
-    fieldset[disabled] .btn-default:hover,
-    fieldset[disabled] .btn-default:focus,
-    fieldset[disabled] .btn-default.focus,
-    fieldset[disabled] .btn-default:active,
-    fieldset[disabled] .btn-default.active {
-        background-color: darken($sluice--button-color, 20%);
-        border-color: darken($sluice--button-color, 20%);
-    }
-}
-
-// buttons!
-// thought of the day:
-// "every great atrocity is the result of people just following orders"
-.client--sluice {
-    .ascribe-piece-list-toolbar-filter-widget button {
-        color: $sluice--button-color !important;
-        background-color: transparent !important;
-        border-color: transparent !important;
-
-        &:hover,
-        &:active {
-            background-color: $sluice--button-color !important;
-            border-color: $sluice--button-color !important;
-            color: white !important;
-        }
-    }
-
-    .btn-wide,
-    .btn-default {
-        background-color: $sluice--button-color;
-        border-color: $sluice--button-color;
-
-        &:hover,
-        &:active,
-        &:focus,
-        &:active:hover,
-        &:active:focus,
-        &:active.focus,
-        &.active:hover,
-        &.active:focus,
-        &.active.focus {
-            background-color: lighten($sluice--button-color, 20%);
-            border-color: lighten($sluice--button-color, 20%);
-        }
-    }
-
-    .open > .btn-default.dropdown-toggle:hover,
-    .open > .btn-default.dropdown-toggle:focus,
-    .open > .btn-default.dropdown-toggle.focus,
-    .open > .btn-default.dropdown-toggle.dropdown-toggle {
-        background-color: darken($sluice--button-color, 20%);
-        border-color: darken($sluice--button-color, 20%);
-    }
-
-    .pager li > a, .pager li > span {
-        background-color: $sluice--button-color;
-        border-color: $sluice--button-color;
-    }
-
-    .pager li.disabled > a,
-    .pager li.disabled > span {
-        background-color: $sluice--button-color !important;
-        border-color: $sluice--button-color;
-    }
-}
-
-// spinner!
-.client--sluice {
-    .btn-spinner {
-        color: $sluice--button-color;
-    }
-    .spinner-circle {
-        border-color: $sluice--button-color;
-    }
-    .spinner-inner {
-        color: $sluice--button-color;
-        display: none;
-    }
-}
-
-// intercom stuff
-.client--sluice {
-    #intercom-container .intercom-launcher-button {
-        background-color: $sluice--button-color !important;;
-        border-color: $sluice--button-color !important;;
-    }
-}
-
-// notifications
-.client--sluice .ascribe-global-notification-success {
-    background-color: lighten($sluice--button-color, 50%);
-}
-
-// progress bar
-.client--sluice .ascribe-progress-bar > .progress-bar {
-    background-color: $sluice--button-color;
-}
-
-.client--sluice .acl-information-dropdown-list .title {
-    color: $sluice--button-color;
-}
\ No newline at end of file
diff --git a/sass/whitelabel/prize/simple_prize/simple_prize_variables.scss b/sass/whitelabel/prize/simple_prize/simple_prize_variables.scss
new file mode 100644
index 00000000..64ec5c9c
--- /dev/null
+++ b/sass/whitelabel/prize/simple_prize/simple_prize_variables.scss
@@ -0,0 +1,3 @@
+$simple-prize--nav-bg-color: #fcfcfc;
+$simple-prize--nav-fg-prim-color: #1E1E1E;
+$simple-prize--button-color: $simple-prize--nav-fg-prim-color;
diff --git a/sass/whitelabel/prize/sluice/sluice_custom_style.scss b/sass/whitelabel/prize/sluice/sluice_custom_style.scss
new file mode 100644
index 00000000..bcc4978c
--- /dev/null
+++ b/sass/whitelabel/prize/sluice/sluice_custom_style.scss
@@ -0,0 +1,182 @@
+.client--sluice {
+    .navbar-default {
+        background-color: $simple-prize--nav-bg-color;
+        box-shadow: none;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    .navbar-nav > li > a,
+    .navbar-nav > li > .active a {
+        color: $simple-prize--nav-fg-prim-color;
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .navbar-nav > li > a:hover {
+        color: lighten($simple-prize--nav-fg-prim-color, 40%);
+    }
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        color: $simple-prize--nav-fg-prim-color;
+        border-bottom-color: $simple-prize--nav-fg-prim-color;
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .dropdown-menu > li > a:hover,
+    .dropdown-menu > li > a:focus {
+        color: lighten($simple-prize--nav-fg-prim-color, 40%);
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .navbar-nav > .open > a,
+    .navbar-nav > .open > a:hover,
+    .navbar-nav > .open > a:focus,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > .active > a:hover,
+    .dropdown-menu > .active > a:focus {
+        color: lighten($simple-prize--nav-fg-prim-color, 40%);
+        background-color: $simple-prize--nav-bg-color;
+    }
+    .dropdown-menu {
+        background-color: $simple-prize--nav-bg-color;
+    }
+
+    .dropdown-menu > li > a {
+        color: $simple-prize--nav-fg-prim-color;
+    }
+
+    .navbar-toggle .icon-bar {
+        background-color: $simple-prize--nav-fg-prim-color;
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        background-color: $simple-prize--nav-bg-color;
+    }
+}
+
+.client--sluice .ascribe-footer {
+    display: none;
+}
+
+
+.client--sluice .icon-ascribe-search{
+    color: $simple-prize--button-color;
+}
+
+.client--sluice .ascribe-piece-list-toolbar .btn-ascribe-add{
+    display: none;
+}
+
+// disabled buttons
+.client--sluice {
+    .btn-default.disabled,
+    .btn-default.disabled:hover,
+    .btn-default.disabled:focus,
+    .btn-default.disabled.focus,
+    .btn-default.disabled:active,
+    .btn-default.disabled.active,
+    .btn-default[disabled],
+    .btn-default[disabled]:hover,
+    .btn-default[disabled]:focus,
+    .btn-default[disabled].focus,
+    .btn-default[disabled]:active,
+    .btn-default[disabled].active,
+    fieldset[disabled] .btn-default,
+    fieldset[disabled] .btn-default:hover,
+    fieldset[disabled] .btn-default:focus,
+    fieldset[disabled] .btn-default.focus,
+    fieldset[disabled] .btn-default:active,
+    fieldset[disabled] .btn-default.active {
+        background-color: darken($simple-prize--button-color, 20%);
+        border-color: darken($simple-prize--button-color, 20%);
+    }
+}
+
+// buttons!
+// thought of the day:
+// "every great atrocity is the result of people just following orders"
+.client--sluice {
+    .ascribe-piece-list-toolbar-filter-widget button {
+        color: $simple-prize--button-color !important;
+        background-color: transparent !important;
+        border-color: transparent !important;
+
+        &:hover,
+        &:active {
+            background-color: $simple-prize--button-color !important;
+            border-color: $simple-prize--button-color !important;
+            color: white !important;
+        }
+    }
+
+    .btn-wide,
+    .btn-default {
+        background-color: $simple-prize--button-color;
+        border-color: $simple-prize--button-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($simple-prize--button-color, 20%);
+            border-color: lighten($simple-prize--button-color, 20%);
+        }
+    }
+
+    .open > .btn-default.dropdown-toggle:hover,
+    .open > .btn-default.dropdown-toggle:focus,
+    .open > .btn-default.dropdown-toggle.focus,
+    .open > .btn-default.dropdown-toggle.dropdown-toggle {
+        background-color: darken($simple-prize--button-color, 20%);
+        border-color: darken($simple-prize--button-color, 20%);
+    }
+
+    .pager li > a, .pager li > span {
+        background-color: $simple-prize--button-color;
+        border-color: $simple-prize--button-color;
+    }
+
+    .pager li.disabled > a,
+    .pager li.disabled > span {
+        background-color: $simple-prize--button-color !important;
+        border-color: $simple-prize--button-color;
+    }
+}
+
+// spinner!
+.client--sluice {
+    .btn-spinner {
+        color: $simple-prize--button-color;
+    }
+    .spinner-circle {
+        border-color: $simple-prize--button-color;
+    }
+    .spinner-inner {
+        color: $simple-prize--button-color;
+        display: none;
+    }
+}
+
+// intercom stuff
+.client--sluice {
+    #intercom-container .intercom-launcher-button {
+        background-color: $simple-prize--button-color !important;;
+        border-color: $simple-prize--button-color !important;;
+    }
+}
+
+// notifications
+.client--sluice .ascribe-global-notification-success {
+    background-color: lighten($simple-prize--button-color, 50%);
+}
+
+// progress bar
+.client--sluice .ascribe-progress-bar > .progress-bar {
+    background-color: $simple-prize--button-color;
+}
+
+.client--sluice .acl-information-dropdown-list .title {
+    color: $simple-prize--button-color;
+}
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index 348564bc..eee8d43e 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
@@ -13,6 +13,7 @@ $vivi23--highlight-color: #de2600;
     /** Landing page **/
     .route--landing {
         display: table;
+        min-height: 100vh;
 
         > .container {
             display: table-cell;
@@ -20,8 +21,13 @@ $vivi23--highlight-color: #de2600;
             vertical-align: middle;
         }
 
+        .hero {
+            display: none;
+        }
+
         .vivi23-landing {
             font-weight: normal;
+            padding: 0 15px;
             text-align: center;
         }
 
@@ -237,7 +243,7 @@ $vivi23--highlight-color: #de2600;
         &.active:hover{
             background-color: $vivi23--highlight-color;
             border-color: $vivi23--highlight-color;
-            color: $vivi23--highlight-color;
+            color: $vivi23--bg-color;
         }
     }
 
@@ -246,10 +252,6 @@ $vivi23--highlight-color: #de2600;
         display: none;
     }
 
-    .ascribe-footer {
-        display: none;
-    }
-
     .ascribe-accordion-list-table-toggle:hover {
         color: $vivi23--fg-color;
     }
diff --git a/sass/whitelabel/wallet/cc/cc_custom_style.scss b/sass/whitelabel/wallet/cc/cc_custom_style.scss
index 774f5b27..348fca1f 100644
--- a/sass/whitelabel/wallet/cc/cc_custom_style.scss
+++ b/sass/whitelabel/wallet/cc/cc_custom_style.scss
@@ -55,16 +55,11 @@ $cc--button-color: $cc--nav-fg-prim-color;
     }
 }
 
-.client--cc .ascribe-footer {
-    display: none;
-}
-
-
-.client--cc .icon-ascribe-search{
+.client--cc .icon-ascribe-search {
     color: $cc--button-color;
 }
 
-.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add{
+.client--cc .ascribe-piece-list-toolbar .btn-ascribe-add {
     display: none;
 }
 
@@ -223,4 +218,4 @@ $cc--button-color: $cc--nav-fg-prim-color;
 
 .client--cc  .upload-button-wrapper > span {
     color: $cc--button-color;
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
index 9af18fcf..0a7226ac 100644
--- a/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
+++ b/sass/whitelabel/wallet/cyland/cyland_custom_style.scss
@@ -56,10 +56,6 @@ $cyland--button-sec-color: #515151;
     }
 }
 
-.client--cyland .ascribe-footer {
-    display: none;
-}
-
 .client--cyland .icon-ascribe-search {
     color: $cyland--button-color;
 }
@@ -171,6 +167,7 @@ $cyland--button-sec-color: #515151;
 .client--cyland {
     .route--landing {
         display: table;
+        min-height: 100vh;
 
         > .container {
             display: table-cell;
@@ -178,8 +175,13 @@ $cyland--button-sec-color: #515151;
             vertical-align: middle;
         }
 
+        .hero {
+            display: none;
+        }
+
         .cyland-landing {
             font-weight: normal;
+            padding: 0 15px;
             text-align: center;
         }
     }
diff --git a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
index 8f330911..1d7a4461 100644
--- a/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
+++ b/sass/whitelabel/wallet/ikonotv/ikonotv_custom_style.scss
@@ -108,24 +108,36 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 }
 
 
+.client--ikonotv {
+    .route--landing,
+    .route--login,
+    .route--signup {
+        background-color: $ikono--landing-bg-color;
+        min-height: 100vh;
+    }
+
+    .route--login,
+    .route--signup {
+        .ascribe-form-bordered {
+            border: none;
+        }
+    }
+}
+
 .client--ikonotv .route--landing {
-    background-color: $ikono--landing-bg-color;
     animation: color-loop 20s;
     -o-animation: color-loop 20s infinite;
     -ms-animation: color-loop 20s infinite;
     -moz-animation: color-loop 20s infinite;
     -webkit-animation: color-loop 20s infinite;
-    
+
     margin: 0;
     width: 100%;
     padding: 5em 1em;
 }
 
-
 .client--ikonotv .route--login,
 .client--ikonotv .route--signup {
-    background-color: $ikono--landing-bg-color;
-
     .btn-wide {
         display: block;
         margin: 50px auto 0;
@@ -209,27 +221,11 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 }
 
 
-.client--ikonotv {
-    .route--login,
-    .route--signup {
-        .ascribe-form-bordered {
-            border: none;
-        }
-    }
-}
-
-.client--ikonotv .ascribe-login-wrapper {
-}
-
-.client--ikonotv .ascribe-footer {
-    display: none;
-}
-
-.client--ikonotv .icon-ascribe-search{
+.client--ikonotv .icon-ascribe-search {
     color: $ikono--button-color;
 }
 
-.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add{
+.client--ikonotv .ascribe-piece-list-toolbar .btn-ascribe-add {
     display: none;
 }
 
@@ -560,4 +556,4 @@ $ikono--font: 'Helvetica Neue', 'Helvetica', sans-serif !important;
 
 .client--ikonotv  .upload-button-wrapper > span {
     color: $ikono--button-color;
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/index.scss b/sass/whitelabel/wallet/index.scss
index 647bb16c..f480ac8d 100644
--- a/sass/whitelabel/wallet/index.scss
+++ b/sass/whitelabel/wallet/index.scss
@@ -5,7 +5,6 @@
 
 .ascribe-wallet-app {
     border-radius: 0;
-    min-height: 100vh;
     padding-top: 70px;
     padding-bottom: 10px;
 }
diff --git a/test/.eslintrc b/test/.eslintrc
new file mode 100644
index 00000000..64f8d90a
--- /dev/null
+++ b/test/.eslintrc
@@ -0,0 +1,36 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "mocha": true,
+        "node": true
+    },
+    "rules": {
+        "new-cap": [2, {newIsCap: true, capIsNew: false}],
+        "quotes": [2, "single"],
+        "eol-last": [0],
+        "no-mixed-requires": [0],
+        "no-underscore-dangle": [0],
+        "global-strict": [2, "always"],
+        "no-trailing-spaces": [2, { skipBlankLines: true }],
+        "no-console": 0,
+        "camelcase": [2, {"properties": "never"}],
+    },
+    "globals": {},
+    "plugins": [],
+    "ecmaFeatures": {
+        "modules": 1,
+        "arrowFunctions",
+        "classes": 1,
+        "blockBindings": 1,
+        "defaultParams": 1,
+        "destructuring": 1,
+        "objectLiteralComputedProperties": 1,
+        "objectLiteralDuplicateProperties": 0,
+        "objectLiteralShorthandMethods": 1,
+        "objectLiteralShorthandProperties": 1,
+        "restParams": 1,
+        "spread": 1,
+        "superInFunctions": 1,
+        "templateStrings": 1
+    }
+}
diff --git a/test/gemini/.gemini.yml b/test/gemini/.gemini.yml
new file mode 100644
index 00000000..0c7b8b77
--- /dev/null
+++ b/test/gemini/.gemini.yml
@@ -0,0 +1,133 @@
+rootUrl: http://localhost.com:3000/
+sessionsPerBrowser: 1
+
+browsers:
+    MainDesktop:
+        rootUrl: http://localhost.com:3000/
+        screenshotsDir: './screenshots/main-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    MainMobile:
+        rootUrl: http://localhost.com:3000/
+        screenshotsDir: './screenshots/main-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CcDesktop:
+        rootUrl: http://cc.localhost.com:3000/
+        screenshotsDir: './screenshots/cc-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CcMobile:
+        rootUrl: http://cc.localhost.com:3000/
+        screenshotsDir: './screenshots/cc-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CylandDesktop:
+        rootUrl: http://cyland.localhost.com:3000/
+        screenshotsDir: './screenshots/cyland-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    CylandMobile:
+        rootUrl: http://cyland.localhost.com:3000/
+        screenshotsDir: './screenshots/cyland-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    IkonotvDesktop:
+        rootUrl: http://ikonotv.localhost.com:3000/
+        screenshotsDir: './screenshots/ikonotv-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    IkonotvMobile:
+        rootUrl: http://ikonotv.localhost.com:3000/
+        screenshotsDir: './screenshots/ikonotv-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    LumenusDesktop:
+        rootUrl: http://lumenus.localhost.com:3000/
+        screenshotsDir: './screenshots/lumenus-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    LumenusMobile:
+        rootUrl: http://lumenus.localhost.com:3000/
+        screenshotsDir: './screenshots/lumenus-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+    23viviDesktop:
+        rootUrl: http://23vivi.localhost.com:3000/
+        screenshotsDir: './screenshots/23vivi-desktop'
+        windowSize: 1900x1080
+        desiredCapabilities:
+            browserName: phantomjs
+
+    23viviMobile:
+        rootUrl: http://23vivi.localhost.com:3000/
+        screenshotsDir: './screenshots/23vivi-mobile'
+        windowSize: 600x1056
+        desiredCapabilities:
+            browserName: phantomjs
+
+sets:
+    main:
+        files:
+            - tests/main
+        browsers:
+            - MainDesktop
+            - MainMobile
+    cc:
+        files:
+            - tests/whitelabel/shared
+        browsers:
+            - CcDesktop
+            - CcMobile
+
+    cyland:
+        files:
+            - tests/whitelabel/shared
+            - tests/whitelabel/cyland
+        browsers:
+            - CylandDesktop
+            - CylandMobile
+
+    ikonotv:
+        files:
+            - tests/whitelabel/shared
+            - tests/whitelabel/ikonotv
+        browsers:
+            - IkonotvDesktop
+            - IkonotvMobile
+
+    lumenus:
+        files:
+            - tests/whitelabel/shared
+            - tests/whitelabel/lumenus
+        browsers:
+            - LumenusDesktop
+            - LumenusMobile
+
+    23vivi:
+        files:
+            - tests/whitelabel/shared
+            - tests/whitelabel/23vivi
+        browsers:
+            - 23viviDesktop
+            - 23viviMobile
diff --git a/test/gemini/README.md b/test/gemini/README.md
new file mode 100644
index 00000000..3521056e
--- /dev/null
+++ b/test/gemini/README.md
@@ -0,0 +1,208 @@
+Introduction
+============
+
+When in doubt, see [Gemini](https://github.com/gemini-testing/gemini) and [their
+docs](https://github.com/gemini-testing/gemini/tree/master/doc) for more information as well as configuration options.
+
+Contents
+========
+
+  1. [Installation](#installation)
+  1. [Running Tests](#running-tests)
+  1. [Gemini Usage and Writing Tests](#gemini-usage-and-writing-tests)
+  1. [PhantomJS](#phantomjs)
+  1. [TODO](#todo)
+
+
+Installation
+============
+
+First make sure that you're using NodeJS 5.0+ as the tests are written using ES6 syntax.
+
+Then, install [PhantomJS2](https://www.npmjs.com/package/phantomjs2):
+
+```bash
+# Until phantomjs2 is updated for the new 2.1 version of PhantomJS, use the following (go to https://bitbucket.org/ariya/phantomjs/downloads to find a build for your OS)
+npm install -g phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
+npm install --save-dev phantomjs2 --phantomjs_downloadurl=https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-macosx.zip
+
+# If using OSX, you may have to install upx and decompress the binary downloaded by npm manually:
+brew install upx
+
+# Navigate to the binary, ie. /Users/Brett/.nvm/versions/node/v5.4.0/lib/node_modules/phantomjs2/lib/phantom/bin/phantomjs
+upx -d phantomjs
+
+```
+
+Finally, [install Gemini globally and locally with npm](https://github.com/gemini-testing/gemini/blob/master/README.md#installation).
+
+
+Running Tests
+=============
+
+Run PhantomJS:
+
+```bash
+npm run vi-phantom
+```
+
+And then run Gemini tests:
+
+```bash
+npm run vi-test
+
+# Run only main tests
+npm run vi-test:main
+
+# Run only whitelabel tests
+npm run vi-test:whitelabel
+
+# Run only specific whitelabel tests
+npm run vi-test:cyland
+```
+
+If you've made changes and want them to be the new baseline (ie. it's a correct change--**make sure** to test there are
+no regressions first!), use
+
+```bash
+npm run vi-update
+
+# Update just the main app for desktop and mobile
+npm run vi-update -- --browser MainDesktop --browser MainMobile
+```
+
+
+Gemini Usage and Writing Tests
+==============================
+
+While Gemini itself is easy to use on simple, static pages, there are some nice to knows when dealing with a single page
+app like ours (where much of it is behind an authentication barrier as well).
+
+Command Line Interface
+----------------------
+
+See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/commands.md) on the commands that are available.
+`npm run vi-*` is set up with some of these commands, but you may want to build your own or learn about some of the
+other functions.
+
+Authentication
+--------------
+
+Authentication presents a tricky problem with Gemini, since we can't inject any cookies or even run a start up script
+through the browser before letting Gemini hook in. The solution is to script the log in process through Gemini, and put
+waits for the log in to succeed, before testing parts of the app that require the authentication.
+
+Browser Session States
+----------------------
+
+Gemini will start a new instance of the browser for each browser configuration defined in the .gemini.yml file when
+Gemini's launched (ie. `gemini update`, `gemini test`, etc).
+
+Although each new suite will cause the testing browser to be refreshed, the above means that cookies and other
+persistent state will be kept across suites for a browser across all runs, even if the suites are from different files.
+
+**What this comes down to is**: once you've logged in, you'll stay logged in until you decide to log out or the running
+instance of Gemini ends. In general practice, it's a good idea to clear the state of the app at the end of each suite of
+tests by logging out.
+
+(**Note**: Persistent storage, such as local storage, has not been explicitly tested as to whether they are kept, but as
+the cookies are cleared each time, this seems unlikely)
+
+Test Reporting
+--------------
+
+Using the `--reporter html` flag with Gemini will produce a webpage with the test's results in `onion/gemini-report`
+that will show the old, new, and diff images. Using this is highly recommended (and fun!) and is used by default in `npm
+run vi-test`.
+
+Writing Tests
+-------------
+
+See [the docs](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md), and the [section on the available
+actions](https://github.com/gemini-testing/gemini/blob/master/doc/tests.md#available-actions) for what scripted actions
+are available.
+
+Our tests are located in `onion/test/gemini/tests/`. For now, the tests use the environment defined in
+`onion/test/gemini/tests/environment.js` for which user, piece, and edition to run tests against. In the future, it'd be
+nice if we had some db scripts that we could use to populate a test db for these regression tests.
+
+**It would also be nice if we kept the whitelabels up to date, so if you add one, please also test (at least) its landing
+page.**
+
+Some useful tips:
+  * The `find()` method in the callbacks is equivalent to `document.querySelector`; it will only return the first
+    element found that matches the selector. Use pseudo classes like `nth-of-type()`, `nth-child()`, and etc. to select
+    later elements.
+  * Nested suites inherit from their parent suites' configurations, but will **override** their inherited configuration
+    if another is specified. For example, if `parentSuite` had a `.before()` method, all children of `parentSuite` would
+    run its `.before()`, but if any of the children specified their own `.before()`, those children would **not** run
+    `parentSuite`'s `.before()`.
+  * Gemini takes a screenshot of the minimum bounding rect for all specified selectors, so this means you can't take a
+    screenshot of two items far away from each other without the rest being considered (ie. trying to get the header and
+    footer)
+  * Unfortunately, `setCaptureElements` and `ignoreElements` will only apply for the first element found matching those
+    selectors.
+
+PhantomJS
+=========
+
+[PhantomJS](http://phantomjs.org/) is a headless browser that allows us to run tests and take screenshots without
+needing a browser.
+
+Its second version (PhantomJS2) uses a much more recent version of Webkit, and is a big reason why Gemini (as opposed to
+other utilities, ie. PhantomCSS) was chosen. Due to the large number of breaking changes introduced between PhantomJS
+1.9 to 2.0, a large number of tools (ie. CasperJS) are, at the time of writing, lacking support for 2.0.
+
+While you don't need to know too much about PhantomJS to use and write Gemini tests, there are still a number of useful
+things to know about.
+
+Useful features
+---------------
+
+You can find the full list of CLI commands in the [documentation](http://phantomjs.org/api/command-line.html).
+
+Flags that are of particular interest to us:
+ * `--webdriver=4444`: sets the webdriver port to be 4444, the default webdriver port that Gemini expects.
+ * `--ignore-ssl-errors=true`: ignores any SSL errors that may occur. Particular useful when hooking up the tests to
+   staging, as the certificate we use is self-signed.
+ * `--ssl-protocol=any`: allows any ssl protocol to be used. May be useful when `--ignore-ssl-errors=true` doesn't work.
+ * '--remote-debugger-port`: allows for remote debugging the running PhantomJS instance. More on this later.
+
+Troubleshooting and Debugging
+-----------------------------
+
+Remote debugging is possible with PhantomJS using the `--remote-debugger-port` option. See the [troubleshooting
+docs](http://phantomjs.org/troubleshooting.html).
+
+To begin using it, add `debugger;` statements to the file being run by `phantomjs`, and access the port number specified
+after `--remote-debugger-port` on localhost:
+
+```bash
+phantomjs --remote-debugger-port=9000 debug.js
+```
+
+PhantomJS will start and then immediately breakpoint. Go to http://localhost:9000/webkit/inspector/inspector.html?page=1
+and then to its console tab. Go to your first breakpoint (the first `debugger;` statement executed) by running `__run()`
+in the console tab. Subsequent breakpoints can be reached by successively running `__run()` in that same console tab.
+
+At each breakpoint, you can to http://localhost:9000 on a new browser tab and click on one of the links to go to the
+current execution state of that breakpoint on the page you're on.
+
+---
+
+To simplify triaging simple issues and test if everything is working, The repo had a short test script that can be run
+with PhantomJS to check if it can access the web app and log in. Find `onion/test/phantomjs/launch_app_and_login.js` in
+the repo's history, restore it, and then run:
+
+```bash
+# In root /onion folder
+phantomjs test/phantomjs/launch_app_and_login.js
+```
+
+
+TODO
+====
+
+* Write scripts to automate creation of test users (and modify tests to accomodate)
+* Set scripts with rootUrls pointing to staging / live using environment variables
+* Set up with Sauce Labs
diff --git a/test/gemini/tests/environment.js b/test/gemini/tests/environment.js
new file mode 100644
index 00000000..abc5e436
--- /dev/null
+++ b/test/gemini/tests/environment.js
@@ -0,0 +1,35 @@
+'use strict';
+
+const MAIN_USER = {
+    email: 'dimi@mailinator.com',
+    password: '0000000000'
+};
+const MAIN_PIECE_ID = '12374';
+const MAIN_EDITION_ID = '14gw9x3VA9oJaxp4cHaAuK2bvJzvEj4Xvc';
+
+const TIMEOUTS = {
+    SHORT: 3000,
+    NORMAL: 5000,
+    LONG: 10000,
+    SUPER_DUPER_EXTRA_LONG: 30000
+};
+
+console.log('==================  Test environment  ==================\n');
+console.log('Main user:');
+console.log(`    Email: ${MAIN_USER.email}`);
+console.log(`    Password: ${MAIN_USER.password}\n`);
+console.log(`Main piece: ${MAIN_PIECE_ID}`);
+console.log(`Main edition: ${MAIN_EDITION_ID}\n`);
+console.log('Timeouts:');
+console.log(`    Short: ${TIMEOUTS.SHORT}`);
+console.log(`    Normal: ${TIMEOUTS.NORMAL}`);
+console.log(`    Long: ${TIMEOUTS.LONG}`);
+console.log(`    Super duper extra long: ${TIMEOUTS.SUPER_DUPER_EXTRA_LONG}\n`);
+console.log('========================================================\n');
+
+module.exports = {
+    MAIN_USER,
+    MAIN_PIECE_ID,
+    MAIN_EDITION_ID,
+    TIMEOUTS
+};
diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
new file mode 100644
index 00000000..7adfe16d
--- /dev/null
+++ b/test/gemini/tests/main/authenticated.js
@@ -0,0 +1,218 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Suite of tests against routes that require the user to be authenticated.
+*/
+gemini.suite('Authenticated', (suite) => {
+    suite
+        .setUrl('/collection')
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.app',
+            // when we can use this file with the whitelabels
+            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+        });
+
+    // Suite just to log us in before any other suites run
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            .ignoreElements('.ascribe-body')
+            .capture('logged in', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
+                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
+
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+            });
+    });
+
+    gemini.suite('Header-desktop', (headerSuite) => {
+        headerSuite
+            .setCaptureElements('nav.navbar .container')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.client--cyland img.img-brand')
+            .skip(/Mobile/)
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+            })
+            .capture('desktop header');
+
+        gemini.suite('User dropdown', (headerUserSuite) => {
+            headerUserSuite
+                .setCaptureElements('#nav-route-user-dropdown ~ .dropdown-menu')
+                .capture('expanded user dropdown', (actions, find) => {
+                    actions.click(find('#nav-route-user-dropdown'));
+                });
+        });
+
+        gemini.suite('Notification dropdown', (headerNotificationSuite) => {
+            headerNotificationSuite
+                .setCaptureElements('#header-notification-dropdown ~ .dropdown-menu')
+                .capture('expanded notifications dropdown', (actions, find) => {
+                    actions.click(find('#header-notification-dropdown'));
+                });
+        });
+    });
+
+    // Test for the collapsed header in mobile
+    gemini.suite('Header-mobile', (headerMobileSuite) => {
+        headerMobileSuite
+            .setCaptureElements('nav.navbar .container')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.client--cyland img.img-brand')
+            .skip(/Desktop/)
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+            })
+            .capture('mobile header')
+            .capture('expanded mobile header', (actions, find) => {
+                actions.click(find('nav.navbar .navbar-toggle'));
+                // Wait for the header to expand
+                actions.wait(500);
+            })
+            .capture('expanded user dropdown', (actions, find) => {
+                actions.click(find('#nav-route-user-dropdown'));
+            })
+            .capture('expanded notifications dropdown', (actions, find) => {
+                actions.click(find('#header-notification-dropdown'));
+            });
+    });
+
+    gemini.suite('Collection', (collectionSuite) => {
+        collectionSuite
+            .setCaptureElements('.ascribe-accordion-list')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+                // Wait for the images to load
+                // FIXME: unfortuntately gemini doesn't support ignoring multiple elements from a single selector
+                // so we're forced to wait and hope that the images will all finish loading after 5s.
+                // We could also change the thumbnails with JS, but setting up a test user is probably easier.
+                actions.wait(TIMEOUTS.NORMAL);
+            })
+            .capture('collection')
+            .capture('expanded edition in collection', (actions, find) => {
+                actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
+                // Wait for editions to load
+                actions.waitForElementToShow('.ascribe-accordion-list-item-table', TIMEOUTS.LONG);
+            })
+
+        gemini.suite('Collection placeholder', (collectionPlaceholderSuite) => {
+            collectionPlaceholderSuite
+                .setCaptureElements('.ascribe-accordion-list-placeholder')
+                .capture('collection empty search', (actions, find) => {
+                    actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'no search result');
+                    actions.waitForElementToShow('.ascribe-accordion-list-placeholder', TIMEOUTS.NORMAL);
+                });
+        });
+
+        gemini.suite('PieceListBulkModal', (pieceListBulkModalSuite) => {
+            pieceListBulkModalSuite
+                .setCaptureElements('.piece-list-bulk-modal')
+                .capture('items selected', (actions, find) => {
+                    actions.click(find('.ascribe-accordion-list-item .ascribe-accordion-list-item-edition-widget'));
+                    // Wait for editions to load
+                    actions.waitForElementToShow('.ascribe-accordion-list-item-table', TIMEOUTS.NORMAL);
+
+                    actions.click('.ascribe-table thead tr input[type="checkbox"]');
+                    actions.waitForElementToShow('.piece-list-bulk-modal');
+                });
+        });
+    });
+
+    gemini.suite('PieceListToolbar', (pieceListToolbarSuite) => {
+        pieceListToolbarSuite
+            .setCaptureElements('.ascribe-piece-list-toolbar')
+            .capture('piece list toolbar')
+            .capture('piece list toolbar search filled', (actions, find) => {
+                actions.sendKeys(find('.ascribe-piece-list-toolbar .search-bar input[type="text"]'), 'search text');
+                actions.waitForElementToShow('.ascribe-piece-list-toolbar .search-bar .icon-ascribe-search', TIMEOUTS.NORMAL);
+            })
+
+        gemini.suite('Order widget dropdown', (pieceListToolbarOrderWidgetSuite) => {
+            pieceListToolbarOrderWidgetSuite
+                .setCaptureElements('#ascribe-piece-list-toolbar-order-widget-dropdown',
+                                    '#ascribe-piece-list-toolbar-order-widget-dropdown ~ .dropdown-menu')
+                .capture('expanded order dropdown', (actions, find) => {
+                    actions.click(find('#ascribe-piece-list-toolbar-order-widget-dropdown'));
+
+                    // Wait as the dropdown screenshot still includes the collection in the background
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+                });
+        });
+
+        gemini.suite('Filter widget dropdown', (pieceListToolbarFilterWidgetSuite) => {
+            pieceListToolbarFilterWidgetSuite
+                .setCaptureElements('#ascribe-piece-list-toolbar-filter-widget-dropdown',
+                                    '#ascribe-piece-list-toolbar-filter-widget-dropdown ~ .dropdown-menu')
+                .capture('expanded filter dropdown', (actions, find) => {
+                    actions.click(find('#ascribe-piece-list-toolbar-filter-widget-dropdown'));
+
+                    // Wait as the dropdown screenshot still includes the collection in the background
+                    actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+                });
+        });
+    });
+
+    gemini.suite('Register work', (registerSuite) => {
+        registerSuite
+            .setUrl('/register_piece')
+            .capture('register work', (actions, find) => {
+                // The uploader options are only rendered after the user is fetched, so
+                // we have to wait for it here
+                actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', TIMEOUTS.NORMAL);
+            })
+            .capture('register work filled', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="artist_name"]'), 'artist name');
+                actions.sendKeys(find('.ascribe-form input[name="title"]'), 'title');
+                actions.sendKeys(find('.ascribe-form input[name="date_created"]'), 'date created');
+            })
+            .capture('register work filled with editions', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                actions.wait(500);
+                actions.sendKeys(find('.ascribe-form input[name="num_editions"]'), '50');
+            });
+
+        gemini.suite('Register work hash', (registerHashSuite) => {
+            registerHashSuite
+                .setUrl('/register_piece?method=hash')
+                .capture('register work hash method');
+        });
+
+        gemini.suite('Register work upload', (registerUploadSuite) => {
+            registerUploadSuite
+                .setUrl('/register_piece?method=upload')
+                .capture('register work upload method');
+        });
+    });
+
+    gemini.suite('User settings', (userSettingsSuite) => {
+        userSettingsSuite
+            .setUrl('/settings')
+            .before((actions, find) => {
+                // This will be called before every nested suite begins unless that suite
+                // also defines a `.before()`
+                actions.waitForElementToShow('.settings-container', TIMEOUTS.NORMAL);
+            })
+            .capture('user settings');
+    });
+
+    // Suite just to log out after suites have run
+    gemini.suite('Log out', (logoutSuite) => {
+        logoutSuite
+            .setUrl('/logout')
+            .ignoreElements('.ascribe-body')
+            .capture('logout', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-login-wrapper', TIMEOUTS.LONG);
+            });
+    });
+});
diff --git a/test/gemini/tests/main/basic.js b/test/gemini/tests/main/basic.js
new file mode 100644
index 00000000..5657f77f
--- /dev/null
+++ b/test/gemini/tests/main/basic.js
@@ -0,0 +1,148 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Basic suite of tests against routes that do not require the user to be authenticated.
+*/
+gemini.suite('Basic', (suite) => {
+    suite
+        .setUrl('/login')
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+        });
+
+    gemini.suite('Header-desktop', (headerSuite) => {
+        headerSuite
+            .setCaptureElements('nav.navbar .container')
+            .skip(/Mobile/)
+            .capture('desktop header', (actions, find) => {
+                actions.waitForElementToShow('nav.navbar .container', TIMEOUTS.NORMAL);
+            })
+            .capture('hover on active item', (actions, find) => {
+                const activeItem = find('nav.navbar li.active');
+                actions.mouseMove(activeItem);
+            })
+            .capture('hover on inactive item', (actions, find) => {
+                const inactiveItem = find('nav.navbar li:not(.active)');
+                actions.mouseMove(inactiveItem);
+            });
+    });
+
+    // Test for the collapsed header in mobile
+    gemini.suite('Header-mobile', (headerMobileSuite) => {
+        headerMobileSuite
+            .setCaptureElements('nav.navbar .container')
+            .skip(/Desktop/)
+            .capture('mobile header', (actions, find) => {
+                actions.waitForElementToShow('nav.navbar .container', TIMEOUTS.NORMAL);
+            })
+            .capture('expanded mobile header', (actions, find) => {
+                actions.click(find('nav.navbar .navbar-toggle'));
+                // Wait for the header to expand
+                actions.wait(500);
+            })
+            .capture('hover on expanded mobile header item', (actions, find) => {
+                actions.mouseMove(find('nav.navbar li'));
+            });
+    });
+
+    gemini.suite('Footer', (footerSuite) => {
+        footerSuite
+            .setCaptureElements('.ascribe-footer')
+            .capture('footer', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-footer', TIMEOUTS.NORMAL);
+            })
+            .capture('hover on footer item', (actions, find) => {
+                const footerItem = find('.ascribe-footer a:not(.social)');
+                actions.mouseMove(footerItem);
+            })
+            .capture('hover on footer social item', (actions, find) => {
+                const footerSocialItem = find('.ascribe-footer a.social')
+                actions.mouseMove(footerSocialItem);
+            });
+    });
+
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .capture('login', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+            })
+            .capture('hover on login submit', (actions, find) => {
+                actions.mouseMove(find('.ascribe-form button[type=submit]'));
+            })
+            .capture('hover on sign up link', (actions, find) => {
+                actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+            })
+            .capture('login form filled with focus', (actions, find) => {
+                const emailInput = find('.ascribe-form input[name=email]');
+
+                // Remove hover from sign up link
+                actions.click(emailInput);
+
+                actions.sendKeys(emailInput, MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+            })
+            .capture('login form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Sign up', (signUpSuite) => {
+        signUpSuite
+            .setUrl('/signup')
+            .capture('sign up', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+            })
+            .capture('sign up form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), MAIN_USER.password);
+            })
+            .capture('sign up form filled with check', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+            });
+    });
+
+    gemini.suite('Password reset', (passwordResetSuite) => {
+        passwordResetSuite
+            .setUrl('/password_reset')
+            .capture('password reset', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+            })
+            .capture('password reset form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), MAIN_USER.email);
+            })
+            .capture('password reset form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Coa verify', (coaVerifySuite) => {
+        coaVerifySuite
+            .setUrl('/coa_verify')
+            .capture('coa verify', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+            })
+            .capture('coa verify form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
+                actions.sendKeys(find('.ascribe-form .ascribe-property-wrapper:nth-of-type(2) textarea'), 'sample signature');
+            })
+            .capture('coa verify form filled', (actions, find) => {
+                actions.click(find('.ascribe-login-header'));
+            });
+    });
+
+    gemini.suite('Not found', (notFoundSuite) => {
+        notFoundSuite
+            .setUrl('/not_found_page')
+            .capture('not found page');
+    });
+});
diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
new file mode 100644
index 00000000..39e83d70
--- /dev/null
+++ b/test/gemini/tests/main/detail.js
@@ -0,0 +1,134 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
+
+const pieceUrl = `/pieces/${environment.MAIN_PIECE_ID}`;
+const editionUrl = `/editions/${environment.MAIN_EDITION_ID}`;
+
+/**
+ * Suite of tests against the piece and edition routes.
+ * Tests include accessing the piece / edition as the owner or as another user
+ * (we can just use an anonymous user in this case).
+*/
+gemini.suite('Work detail', (suite) => {
+    suite
+        .setCaptureElements('.ascribe-body')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.app',
+            // when we can use this file with the whitelabels
+            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+
+            // Wait for the social media buttons to appear
+            actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
+            actions.waitForElementToShow('.ascribe-social-button-list .twitter-share-button', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
+            actions.waitForElementToShow('.ascribe-media-player', TIMEOUTS.LONG);
+        });
+
+    gemini.suite('Basic piece', (basicPieceSuite) => {
+        basicPieceSuite
+            .setUrl(pieceUrl)
+            .capture('basic piece')
+
+        gemini.suite('Shmui', (shmuiSuite) => {
+            shmuiSuite.
+                setCaptureElements('.shmui-wrap')
+                .capture('shmui', (actions, find) => {
+                    actions.click(find('.ascribe-media-player'));
+                    actions.waitForElementToShow('.shmui-wrap:not(.loading)', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
+                    // Wait for the transition to end
+                    actions.wait(1000);
+                });
+        });
+    });
+
+    gemini.suite('Basic edition', (basicEditionSuite) => {
+        basicEditionSuite
+            .setUrl(editionUrl)
+            .capture('basic edition');
+    });
+
+    // Suite just to log us in before any other suites run
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            .ignoreElements('.ascribe-body')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+            })
+            .capture('logged in', (actions, find) => {
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-login-wrapper input[name=password]'), MAIN_USER.password);
+                actions.click(find('.ascribe-login-wrapper button[type=submit]'));
+
+                actions.waitForElementToShow('.ascribe-accordion-list:not(.ascribe-loading-position)', TIMEOUTS.NORMAL);
+            });
+    });
+
+    gemini.suite('Authorized piece', (authorizedPieceSuite) => {
+        authorizedPieceSuite
+            .setUrl(pieceUrl)
+            .capture('authorized piece');
+    });
+
+    gemini.suite('Authorized edition', (authorizedEditionSuite) => {
+        authorizedEditionSuite
+            .setUrl(editionUrl)
+            .capture('authorized edition')
+    });
+
+    gemini.suite('Detail action buttons', (detailActionButtonSuite) => {
+        detailActionButtonSuite
+            .setUrl(editionUrl)
+            .capture('hover on action button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-default'));
+            })
+            .capture('hover on delete button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.btn-tertiary'));
+            })
+            .capture('hover on info button', (actions, find) => {
+                actions.mouseMove(find('.ascribe-detail-property .ascribe-button-list button.glyphicon-question-sign'));
+            })
+            .capture('expand info text', (actions, find) => {
+                actions.click(find('.ascribe-detail-property .ascribe-button-list button.glyphicon-question-sign'));
+            });
+    });
+
+    gemini.suite('Action form modal', (actionFormModalSuite) => {
+        actionFormModalSuite
+            .setUrl(editionUrl)
+            .setCaptureElements('.modal-dialog')
+            .capture('open email form', (actions, find) => {
+                // Add class names to make the action buttons easier to select
+                actions.executeJS(function (window) {
+                    var actionButtons = window.document.querySelectorAll('.ascribe-detail-property .ascribe-button-list button.btn-default');
+                    for (var ii = 0; ii < actionButtons.length; ++ii) {
+                        if (actionButtons[ii].textContent) {
+                            actionButtons[ii].className += ' ascribe-action-button-' + actionButtons[ii].textContent.toLowerCase();
+                        }
+                    }
+                });
+                actions.click(find('.ascribe-detail-property .ascribe-button-list button.ascribe-action-button-email'));
+
+                // Wait for transition
+                actions.wait(1000);
+            });
+    });
+
+    // Suite just to log out after suites have run
+    gemini.suite('Log out', (logoutSuite) => {
+        logoutSuite
+            .setUrl('/logout')
+            .ignoreElements('.ascribe-body')
+            .before((actions, find) => {
+                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+            })
+            .capture('logout', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-login-wrapper', TIMEOUTS.LONG);
+            });
+    });
+});
diff --git a/test/gemini/tests/whitelabel/23vivi/23vivi.js b/test/gemini/tests/whitelabel/23vivi/23vivi.js
new file mode 100644
index 00000000..99efb310
--- /dev/null
+++ b/test/gemini/tests/whitelabel/23vivi/23vivi.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../../environment');
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Suite of tests against 23vivi specific routes
+ */
+gemini.suite('23vivi', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            .capture('landing', (actions, find) => {
+                // Wait for the logo to appear
+                actions.waitForElementToShow('.vivi23-landing--header-logo', TIMEOUTS.LONG);
+            });
+    });
+
+    // TODO: add more tests for market specific pages after authentication
+});
diff --git a/test/gemini/tests/whitelabel/cyland/cyland.js b/test/gemini/tests/whitelabel/cyland/cyland.js
new file mode 100644
index 00000000..8159f53e
--- /dev/null
+++ b/test/gemini/tests/whitelabel/cyland/cyland.js
@@ -0,0 +1,30 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../../environment');
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Suite of tests against Cyland specific routes
+ */
+gemini.suite('Cyland', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            // Ignore Cyland's logo as it's a gif
+            .ignoreElements('.cyland-landing img')
+            .capture('landing', (actions, find) => {
+                actions.waitForElementToShow('.cyland-landing img', TIMEOUTS.LONG);
+            });
+    });
+
+    // TODO: add more tests for cyland specific pages after authentication
+});
diff --git a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
new file mode 100644
index 00000000..84d743c0
--- /dev/null
+++ b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
@@ -0,0 +1,98 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Suite of tests against Cyland specific routes
+ */
+gemini.suite('Ikonotv', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            // Gemini complains if we try to capture the entire app for Ikonotv's landing page for some reason
+            .setCaptureElements('.ikonotv-landing')
+            .setTolerance(5)
+            .capture('landing', (actions, find) => {
+                // Stop background animation
+                actions.executeJS(function (window) {
+                    var landingBackground = window.document.querySelector('.client--ikonotv .route--landing');
+                    landingBackground.style.animation = 'none';
+                    landingBackground.style.webkitAnimation = 'none';
+                });
+
+                // Wait for logo to appear
+                actions.waitForElementToShow('.ikonotv-landing header img', TIMEOUTS.LONG);
+            });
+    });
+
+    // Ikono needs its own set of tests for some pre-authorization pages to wait for
+    // its logo to appear
+    gemini.suite('Ikonotv basic', (suite) => {
+        suite
+            .setCaptureElements('.ascribe-wallet-app')
+            .before((actions, find) => {
+                // This will be called before every nested suite begins unless that suite
+                // also defines a `.before()`
+                // FIXME: use a more generic class for this, like just '.app',
+                // when we can use this file with the whitelabels
+                actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+
+                // Wait for the forms to appear
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+
+                // Just use a dumb wait because the logo is set as a background image
+                actions.wait(TIMEOUTS.SHORT);
+            });
+
+        gemini.suite('Login', (loginSuite) => {
+            loginSuite
+                .setUrl('/login')
+                .capture('login')
+                .capture('hover on login submit', (actions, find) => {
+                    actions.mouseMove(find('.ascribe-form button[type=submit]'));
+                })
+                .capture('hover on sign up link', (actions, find) => {
+                    actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+                })
+                .capture('login form filled with focus', (actions, find) => {
+                    const emailInput = find('.ascribe-form input[name=email]');
+
+                    // Remove hover from sign up link
+                    actions.click(emailInput);
+
+                    actions.sendKeys(emailInput, MAIN_USER.email);
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                })
+                .capture('login form filled', (actions, find) => {
+                    actions.click(find('.ascribe-form-header'));
+                });
+        });
+
+        gemini.suite('Sign up', (signUpSuite) => {
+            signUpSuite
+                .setUrl('/signup')
+                .capture('sign up')
+                .capture('sign up form filled with focus', (actions, find) => {
+                    actions.sendKeys(find('.ascribe-form input[name=email]'), MAIN_USER.email);
+                    actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                    actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), MAIN_USER.password);
+                })
+                .capture('sign up form filled with check', (actions, find) => {
+                    actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                });
+        });
+    });
+
+    // TODO: add more tests for ikonotv specific pages after authentication
+});
diff --git a/test/gemini/tests/whitelabel/lumenus/lumenus.js b/test/gemini/tests/whitelabel/lumenus/lumenus.js
new file mode 100644
index 00000000..8e8f568d
--- /dev/null
+++ b/test/gemini/tests/whitelabel/lumenus/lumenus.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../../environment');
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Suite of tests against lumenus specific routes
+ */
+gemini.suite('Lumenus', (suite) => {
+    suite
+        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
+        .setCaptureElements('.ascribe-wallet-app')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+        });
+
+    gemini.suite('Landing', (landingSuite) => {
+        landingSuite
+            .setUrl('/')
+            .capture('landing', (actions, find) => {
+                // Wait for the logo to appear
+                actions.waitForElementToShow('.wp-landing-wrapper img', TIMEOUTS.LONG);
+            });
+    });
+
+    // TODO: add more tests for market specific pages after authentication
+});
diff --git a/test/gemini/tests/whitelabel/shared/whitelabel_basic.js b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
new file mode 100644
index 00000000..0d5ac26b
--- /dev/null
+++ b/test/gemini/tests/whitelabel/shared/whitelabel_basic.js
@@ -0,0 +1,115 @@
+'use strict';
+
+const gemini = require('gemini');
+const environment = require('../../environment');
+const MAIN_USER = environment.MAIN_USER;
+const TIMEOUTS = environment.TIMEOUTS;
+
+/**
+ * Basic suite of tests against whitelabel routes that do not require authentication.
+*/
+gemini.suite('Whitelabel basic', (suite) => {
+    suite
+        .setCaptureElements('.ascribe-wallet-app > .container')
+        .before((actions, find) => {
+            // This will be called before every nested suite begins unless that suite
+            // also defines a `.before()`
+            // FIXME: use a more generic class for this, like just '.ascribe-app'
+            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+
+            // Use a dumb wait in case we're still waiting for other assets, like fonts, to load
+            actions.wait(1000);
+        });
+
+    gemini.suite('Login', (loginSuite) => {
+        loginSuite
+            .setUrl('/login')
+            // See Ikono
+            .skip(/Ikono/)
+            .capture('login', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+                // For some reason, the screenshots seem to keep catching the whitelabel login form
+                // on a refresh and without fonts loaded (maybe because they're the first tests run
+                // and the cache isn't hot yet?).
+                // Let's wait a bit and hope they load.
+                actions.wait(TIMEOUTS.SHORT);
+            })
+            .capture('hover on login submit', (actions, find) => {
+                actions.mouseMove(find('.ascribe-form button[type=submit]'));
+            })
+            .capture('hover on sign up link', (actions, find) => {
+                actions.mouseMove(find('.ascribe-login-text a[href="/signup"]'));
+            })
+            .capture('login form filled with focus', (actions, find) => {
+                const emailInput = find('.ascribe-form input[name=email]');
+
+                // Remove hover from sign up link
+                actions.click(emailInput);
+
+                actions.sendKeys(emailInput, MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+            })
+            .capture('login form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Sign up', (signUpSuite) => {
+        signUpSuite
+            .setUrl('/signup')
+            // See Ikono
+            .skip(/Ikono/)
+            .capture('sign up', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('sign up form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name=email]'), MAIN_USER.email);
+                actions.sendKeys(find('.ascribe-form input[name=password]'), MAIN_USER.password);
+                actions.sendKeys(find('.ascribe-form input[name=password_confirm]'), MAIN_USER.password);
+            })
+            .capture('sign up form filled with check', (actions, find) => {
+                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+            });
+    });
+
+    gemini.suite('Password reset', (passwordResetSuite) => {
+        passwordResetSuite
+            .setUrl('/password_reset')
+            .capture('password reset', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('password reset form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="email"]'), MAIN_USER.email);
+            })
+            .capture('password reset form filled', (actions, find) => {
+                actions.click(find('.ascribe-form-header'));
+            });
+    });
+
+    gemini.suite('Coa verify', (coaVerifySuite) => {
+        coaVerifySuite
+            .setUrl('/coa_verify')
+            .capture('coa verify', (actions, find) => {
+                actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
+                // Wait in case the form reloads due to other assets loading
+                actions.wait(500);
+            })
+            .capture('coa verify form filled with focus', (actions, find) => {
+                actions.sendKeys(find('.ascribe-form input[name="message"]'), 'sample text');
+                actions.sendKeys(find('.ascribe-form .ascribe-property-wrapper:nth-of-type(2) textarea'), 'sample signature');
+            })
+            .capture('coa verify form filled', (actions, find) => {
+                actions.click(find('.ascribe-login-header'));
+            });
+    });
+
+    gemini.suite('Not found', (notFoundSuite) => {
+        notFoundSuite
+            .setUrl('/not_found_page')
+            .capture('not found page');
+    });
+});
diff --git a/test/integration/README.md b/test/integration/README.md
new file mode 100644
index 00000000..8fca1cac
--- /dev/null
+++ b/test/integration/README.md
@@ -0,0 +1,256 @@
+# TL;DR
+Copy the contents of `.env-template` to `.env` and [fill up the missing keys with
+information from your SauceLabs account](#how-to-set-up-your-env-config-file).
+
+```bash
+$ npm install
+$ npm run tunnel
+$ npm test && git commit
+```
+
+
+# TODO
+* Use gulp to parallelize mocha invocations with different browsers
+* Figure out good system for changing subdomain through test scripts
+
+
+# Welcome to our test suite, let me be your guide
+
+Dear reader, first of all thanks for taking your time reading this document.
+The purpose of this document is to give you an overview on what we want to test
+and how we are doing it.
+
+
+# How it works (bird's-eye view)
+
+You will notice that the setup is a bit convoluted. This section will explain
+you why.  Testing single functions in JavaScript is not that hard (if you don't
+need to interact with the DOM), and can be easily achieved using frameworks
+like [Mocha](https://mochajs.org/). Integration and cross browser testing is,
+on the other side, a huge PITA.  Moreover, "browser testing" includes also
+"mobile browser testing". On the top of that the same browser (type and
+version) can behave in a different way on different operating systems.
+
+To achieve that you can have your own cluster of machines with different
+operating systems and browsers or, if you don't want to spend the rest of your
+life configuring an average of 100 browsers for each different operating
+system, you can pay someone else to do that. Check out [this
+article](https://saucelabs.com/selenium/selenium-grid) if you want to know why
+using Selenium Grid is better than a DIY approach.
+
+We decided to use [saucelabs](https://saucelabs.com/) cloud (they support [over
+700 combinations](https://saucelabs.com/platforms/) of operating systems and
+browsers) to run our tests.
+
+
+## Components and tools
+
+Right now we are just running the test locally, so no Continuous Integration™.
+
+The components involved are:
+ - **[Selenium WebDriver](https://www.npmjs.com/package/wd)**: it's a library
+   that can control a browser.  You can use the **WebDriver** to load new URLs,
+   click around, fill out forms, submit forms etc.  It's basically a way to
+   control remotely a browser. The protocol (language agnostic) is called
+   [JsonWire](https://code.google.com/p/selenium/wiki/JsonWireProtocol), `wd`
+   wraps it and gives you a nice
+   [API](https://github.com/admc/wd/blob/master/doc/jsonwire-full-mapping.md)
+   you can use in JavaScript. There are other implementations in Python, PHP,
+   Java, etc. Also, a **WebDriver** can be initialized with a list of [desired
+   capabilities](https://code.google.com/p/selenium/wiki/DesiredCapabilities)
+   describing which features (like the platform, browser name and version) you
+   want to use to run your tests.
+
+ - **[Selenium Grid](https://github.com/SeleniumHQ/selenium/wiki/Grid2)**: it's
+   the controller for the cluster of machines/devices that can run browsers.
+   Selenium Grid is able to scale by distributing tests on several machines,
+   manage multiple environments from a central point, making it easy to run the
+   tests against a vast combination of browsers / OS, minimize the maintenance
+   time for the grid by allowing you to implement custom hooks to leverage
+   virtual infrastructure for instance.
+
+ - **[Saucelabs](https://saucelabs.com/)**: a private company providing a
+   cluster to run your tests on over 700 combinations of browsers/operating
+   systems. (They do other things, check out their websites).
+
+ - **[SauceConnect](https://wiki.saucelabs.com/display/DOCS/Setting+Up+Sauce+Connect)**:
+   is a Java software by Saucelabs to connect to your `localhost` to test the
+   application. There is also a Node.js wrapper
+   [sauce-connect-launcher](https://www.npmjs.com/package/sauce-connect-launcher),
+   so you can use it programmatically within your code for tests. Please note
+   that this module is just a wrapper around the actual software. Running `npm
+   install` should install the additional Java software as well.
+
+
+On the JavaScript side, we use:
+ - [Mocha](https://mochajs.org/): a test framework running on Node.js.
+
+ - [chai](http://chaijs.com/): a BDD/TDD assertion library for node that can be
+   paired with any javascript testing framework.
+
+ - [chaiAsPromised](https://github.com/domenic/chai-as-promised/): an extension
+   for Chai with a fluent language for asserting facts about promises. The
+   extension is actually quite cool, we can do assertions on promises without
+   writing callbacks but just chaining operators. Check out their `README` on
+   GitHub to see an example.
+
+ - [dotenv](https://github.com/motdotla/dotenv): a super nice package to load
+   environment variables from `.env` into `process.env`.
+
+
+## How to set up your `.env` config file
+In the root of this repository there is a file called `.env-template`. Create a
+copy and call it `.env`. This file will store some values we need to connect to
+Saucelabs.
+
+There are two values to be set:
+ - `SAUCE_ACCESS_KEY`
+ - `SAUCE_USERNAME`
+
+The two keys are the [default
+ones](https://github.com/admc/wd#environment-variables-for-saucelabs) used by
+many products related to Saucelabs. This allow us to keep the configuration
+fairly straightforward and simple.
+
+After logging in to https://saucelabs.com/, you can find your **api key** under
+the **My Account**. Copy paste the value in your `.env` file.
+
+
+## Anatomy of a test
+
+First, you need to learn how [Mocha](https://mochajs.org/) works. Brew a coffee
+(or tea, if coffee is not your cup of tea), sit down and read the docs.
+
+Done? Great, let's move on and analyze how a test is written.
+
+From a very high level, the flow of a test is the following:
+ 1. load a page with a specific URL
+ 2. do something on the page (click a button, submit a form, etc.)
+ 3. maybe wait some seconds, or wait if something has changed
+ 4. check if the new page contains some text you expect to be there
+
+This is not set in stone, so go crazy if you want. But keep in mind that we
+have a one page application, there might be some gotchas on how to wait for
+stuff to happen. I suggest you to read the section [Wait for
+something](https://github.com/admc/wd#waiting-for-something) to understand
+better which tools you have to solve this problem.
+Again, take a look to the [`wd` implementation of the JsonWire
+protocol](https://github.com/admc/wd/blob/master/doc/jsonwire-full-mapping.md)
+to know all the methods you can use to control the browser.
+
+
+Import the libraries we need.
+
+```javascript
+'use strict';
+
+require('dotenv').load();
+
+const wd = require('wd');
+const chai = require('chai');
+const chaiAsPromised = require('chai-as-promised');
+```
+
+
+Set up `chai` to use `chaiAsPromised`.
+
+```javascript
+chai.use(chaiAsPromised);
+chai.should();
+```
+
+`browser` is the main object to interact with Saucelab "real" browsers. We will
+use this object a lot. It allows us to load pages, click around, check if a
+specific text is present, etc.
+
+```javascript
+describe('Login logs users in', function() {
+    let browser;
+```
+
+Create the driver to control the browser. `before` will be executed once at the
+start of the test before any `it` functions. Use `beforeEach` instead if you'd
+like to run some code before each `it` function.
+
+```javascript
+    before(function() {
+        browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
+
+        // Start the browser, go to /login, and wait for the react app to render
+        return browser
+            .init({ browserName, version, platform })
+            .get(config.APP_URL + '/login')
+            .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000);
+    });
+```
+
+Close the browser after finishing all tests. `after` will be executed at the end
+of all `it` functions. Use `afterEach` instead if you'd like to run some code
+after each `it` function.
+
+```javascript
+    after(function() {
+        // Destroys the browser session
+        return browser.quit();
+    });
+```
+
+The actual test. We query the `browser` object to get the title of the page.
+Note that `.title()` returns a `promise` **but**, since we are using
+`chaiAsPromised`, we have some syntactic sugar to handle the promise in line,
+without writing new functions.
+
+```javascript
+    it('should contain "Log in" in the title', function() {
+        return browser.title().should.become('Log in');
+    });
+});
+```
+
+All together:
+
+```javascript
+function testSuite(browserName, version, platform) {
+    describe(`[${browserName} ${version} ${platform}] Login logs users in`, function() {
+        // Set timeout to zero so Mocha won't time out.
+        this.timeout(0);
+        let browser;
+
+        before(function() {
+            // No need to inject `username` or `access_key`, by default the constructor
+            // looks up the values in `process.env.SAUCE_USERNAME` and `process.env.SAUCE_ACCESS_KEY`
+            browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
+
+            // Start the browser, go to /login, and wait for the react app to render
+            return browser
+                .init({ browserName, version, platform })
+                .get(config.APP_URL + '/login')
+                .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000);
+        });
+
+        after(function() {
+            return browser.quit();
+        });
+
+        it('should contain "Log in" in the title', function() {
+            return browser.title().should.become('Log in');
+        });
+    });
+}
+```
+
+## How to run the test suite
+To run the tests, type:
+```bash
+$ mocha
+```
+
+By default the test suite runs on `http://www.localhost.com:3000/`, if you
+want to change the URL, change the `APP_URL` env variable.
+
+
+# How to have fun
+Try this!
+```bash
+$ mocha -R nyan
+```
diff --git a/test/integration/config.js b/test/integration/config.js
new file mode 100644
index 00000000..400c6d90
--- /dev/null
+++ b/test/integration/config.js
@@ -0,0 +1,18 @@
+'use strict';
+
+require('dotenv').load();
+
+
+// https://code.google.com/p/selenium/wiki/DesiredCapabilities
+const BROWSERS = [
+    'chrome,47,WINDOWS',
+    'chrome,46,WINDOWS',
+    'firefox,43,MAC',
+    'internet explorer,10,VISTA'
+];
+
+
+module.exports = {
+    BROWSERS: BROWSERS.map(x => x.split(',')),
+    APP_URL: process.env.SAUCE_DEFAULT_URL || 'http://www.localhost.com:3000'
+};
diff --git a/test/integration/setup.js b/test/integration/setup.js
new file mode 100644
index 00000000..334423e7
--- /dev/null
+++ b/test/integration/setup.js
@@ -0,0 +1,50 @@
+'use strict';
+
+const config = require('./config');
+const colors = require('colors');
+const sauceConnectLauncher = require('sauce-connect-launcher');
+
+
+let globalSauceProcess;
+
+if (!process.env.SAUCE_USERNAME) {
+    console.log(colors.red('SAUCE_USERNAME is missing. Please check the README.md file.'));
+    process.exit(1); //eslint-disable-line no-process-exit
+}
+
+if (!process.env.SAUCE_ACCESS_KEY) {
+    console.log(colors.red('SAUCE_ACCESS_KEY is missing. Please check the README.md file.'));
+    process.exit(1); //eslint-disable-line no-process-exit
+}
+
+
+if (process.env.SAUCE_AUTO_CONNECT) {
+    before(function(done) {
+        console.log(colors.yellow('Setting up tunnel from Saucelabs to your lovely computer, will take a while.'));
+        // Creating the tunnel takes a bit of time. For this case we can safely disable Mocha timeouts.
+        this.timeout(0);
+
+        sauceConnectLauncher(function (err, sauceConnectProcess) {
+            if (err) {
+                console.error(err.message);
+                return;
+            }
+            globalSauceProcess = sauceConnectProcess;
+            done();
+        });
+    });
+
+
+    after(function (done) {
+        // Creating the tunnel takes a bit of time. For this case we can safely disable it.
+        this.timeout(0);
+
+        if (globalSauceProcess) {
+            globalSauceProcess.close(done);
+        }
+    });
+} else if (config.APP_URL.match(/localhost/)) {
+    console.log(colors.yellow(`You are running tests on ${config.APP_URL}, make sure you already have a tunnel running.`));
+    console.log(colors.yellow('To create the tunnel, run:'));
+    console.log(colors.yellow(' $ node test/tunnel.js'));
+}
diff --git a/test/integration/tests/test-login.js b/test/integration/tests/test-login.js
new file mode 100644
index 00000000..853d48e5
--- /dev/null
+++ b/test/integration/tests/test-login.js
@@ -0,0 +1,50 @@
+'use strict';
+
+const Q = require('q');
+const wd = require('wd');
+const asserters = wd.asserters;   // Commonly used asserters for async waits in the browser
+const chai = require('chai');
+const chaiAsPromised = require('chai-as-promised');
+const config = require('../config.js');
+
+chai.use(chaiAsPromised);
+chai.should();
+
+
+function testSuite(browserName, version, platform) {
+    describe(`[${browserName} ${version} ${platform}] Login logs users in`, function() {
+        // Set timeout to zero so Mocha won't time out.
+        this.timeout(0);
+        let browser;
+
+        before(function() {
+            // No need to inject `username` or `access_key`, by default the constructor
+            // looks up the values in `process.env.SAUCE_USERNAME` and `process.env.SAUCE_ACCESS_KEY`
+            browser = wd.promiseChainRemote('ondemand.saucelabs.com', 80);
+
+            // Start the browser, go to /login, and wait for the react app to render
+            return browser
+                .configureHttp({ baseUrl: config.APP_URL })
+                .init({ browserName, version, platform })
+                .get('/login')
+                .waitForElementByCss('.ascribe-default-app', asserters.isDisplayed, 10000)
+                .catch(function (err) {
+                    console.log('Failure -- unable to load app.');
+                    console.log('Skipping tests for this browser...');
+                    return Q.reject(err);
+                });
+        });
+
+        after(function() {
+            return browser.quit();
+        });
+
+        it('should contain "Log in" in the title', function() {
+            return browser.
+                waitForElementByCss('.ascribe-login-wrapper', asserters.isDisplayed, 2000)
+                title().should.become('Log in');
+        });
+    });
+}
+
+config.BROWSERS.map(x => testSuite(...x));
diff --git a/test/integration/tunnel.js b/test/integration/tunnel.js
new file mode 100644
index 00000000..2a7fa371
--- /dev/null
+++ b/test/integration/tunnel.js
@@ -0,0 +1,23 @@
+'use strict';
+
+const config = require('./config'); //eslint-disable-line no-unused-vars
+const colors = require('colors');
+const sauceConnectLauncher = require('sauce-connect-launcher');
+
+
+function connect() {
+    console.log(colors.yellow('Setting up tunnel from Saucelabs to your lovely computer, will take a while.'));
+    // Creating the tunnel takes a bit of time. For this case we can safely disable Mocha timeouts.
+
+    sauceConnectLauncher(function (err) {
+        if (err) {
+            console.error(err.message);
+            return;
+        }
+        console.log(colors.green('Connected! Keep this process running and execute your tests.'));
+    });
+}
+
+if (require.main === module) {
+    connect();
+}

From 8927ccb847ec8569971d154bd2fa4c8cb54962a6 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 10:39:24 +0100
Subject: [PATCH 184/197] Guard against the notification dropdown button
 missing a function

---
 js/components/header_notification.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/js/components/header_notification.js b/js/components/header_notification.js
index 784f8786..84b71177 100644
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@@ -11,16 +11,12 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NotificationActions from '../actions/notification_actions';
 import NotificationStore from '../stores/notification_store';
 
-import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 
 
 let HeaderNotifications = React.createClass({
-
     getInitialState() {
-        return mergeOptions(
-            NotificationStore.getState()
-        );
+        return NotificationStore.getState();
     },
 
     componentDidMount() {
@@ -59,10 +55,14 @@ let HeaderNotifications = React.createClass({
         NOW, THAT DIDN'T WORK - the onSelect routine isnt triggered in all cases
         Hence, we do this manually
         */
-        this.refs.dropdownbutton.setDropdownState(false);
+        const { dropdownButton } = this.refs;
+
+        if (dropdownButton && typeof dropdownButton.setDropdownState === 'function') {
+            dropdownbutton.setDropdownState(false);
+        }
     },
 
-    getPieceNotifications(){
+    getPieceNotifications() {
         if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) {
             return (
                 <div>
@@ -87,7 +87,7 @@ let HeaderNotifications = React.createClass({
         return null;
     },
 
-    getEditionNotifications(){
+    getEditionNotifications() {
         if (this.state.editionListNotifications && this.state.editionListNotifications.length > 0) {
             return (
                 <div>
@@ -114,7 +114,7 @@ let HeaderNotifications = React.createClass({
 
     render() {
         if ((this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) ||
-            (this.state.editionListNotifications && this.state.editionListNotifications.length > 0)){
+            (this.state.editionListNotifications && this.state.editionListNotifications.length > 0)) {
             let numNotifications = 0;
             if (this.state.pieceListNotifications && this.state.pieceListNotifications.length > 0) {
                 numNotifications += this.state.pieceListNotifications.length;
@@ -125,7 +125,7 @@ let HeaderNotifications = React.createClass({
             return (
                 <Nav navbar right>
                     <DropdownButton
-                        ref='dropdownbutton'
+                        ref='dropdownButton'
                         id="header-notification-dropdown"
                         eventKey="1"
                         title={

From 1091e7644713904f2eac11c6076c5483ad9806ec Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 10:39:46 +0100
Subject: [PATCH 185/197] Clean up the prize AccordionList and fix merge bug

---
 .../accordion_list_item_prize.js              | 57 +++++++++----------
 .../components/prize_piece_list.js            |  9 ++-
 2 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
index b5103bf1..dbc2c5c4 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@@ -89,7 +89,8 @@ let AccordionListItemPrize = React.createClass({
                                 rating={rating}
                                 ratingAmount={5} />
                         </Link>
-                    </div>);
+                    </div>
+                );
             } else {
                 if (currentUser.is_judge) {
                     return (
@@ -108,23 +109,21 @@ let AccordionListItemPrize = React.createClass({
                     );
                 }
             }
+        } else {
+            return this.getPrizeButtonsParticipant();
         }
-        return this.getPrizeButtonsParticipant();
-
     },
 
     getPrizeButtonsParticipant() {
         return (
-            <div>
-                <AclProxy
-                    aclObject={this.props.content.acl}
-                    aclName="acl_wallet_submit">
-                    <SubmitToPrizeButton
-                        className="pull-right"
-                        piece={this.props.content}
-                        handleSuccess={this.handleSubmitPrizeSuccess}/>
-                </AclProxy>
-            </div>
+            <AclProxy
+                aclObject={this.props.content.acl}
+                aclName="acl_wallet_submit">
+                <SubmitToPrizeButton
+                    className="pull-right"
+                    piece={this.props.content}
+                    handleSuccess={this.handleSubmitPrizeSuccess} />
+            </AclProxy>
         );
     },
 
@@ -149,12 +148,14 @@ let AccordionListItemPrize = React.createClass({
     },
 
     getPrizeBadge() {
+        const { currentUser } = this.props;
+
         if (currentUser && currentUser.is_judge) {
             return (
                 <span className="pull-right ascribe-checkbox-wrapper ascribe-checkbox-badge">
                     <InputCheckbox
                         defaultChecked={this.props.content.selected}
-                        onChange={this.onSelectChange}/>
+                        onChange={this.onSelectChange} />
                 </span>
             );
         } else {
@@ -170,21 +171,19 @@ let AccordionListItemPrize = React.createClass({
                 <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : content.artist_name;
 
         return (
-            <div>
-                <AccordionListItemPiece
-                    className={className}
-                    piece={content}
-                    artistName={artistName}
-                    subsubheading={
-                        <div>
-                            <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
-                        </div>
-                    }
-                    buttons={this.getPrizeButtons()}
-                    badge={this.getPrizeBadge()}>
-                    {children}
-                </AccordionListItemPiece>
-            </div>
+            <AccordionListItemPiece
+                className={className}
+                piece={content}
+                artistName={artistName}
+                subsubheading={
+                    <div>
+                        <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
+                    </div>
+                }
+                buttons={this.getPrizeButtons()}
+                badge={this.getPrizeBadge()}>
+                {children}
+            </AccordionListItemPiece>
         );
     }
 });
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index 1e2c7c9c..fd24d7f1 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -58,6 +58,12 @@ let PrizePieceList = React.createClass({
         }
     },
 
+    shouldRedirect(pieceCount) {
+        const { currentUser } = this.props;
+
+        return !currentUser.is_admin && !currentUser.is_jury && !currentUser.is_judge && !pieceCount;
+    },
+
     render() {
         const { currentUser, location } = this.props;
 
@@ -79,7 +85,8 @@ let PrizePieceList = React.createClass({
                 customSubmitButton={this.getButtonSubmit()}
                 filterParams={[]}
                 orderParams={orderParams}
-                orderBy={currentUser.is_jury ? 'rating' : null} />
+                orderBy={currentUser.is_jury ? 'rating' : null}
+                shouldRedirect={this.shouldRedirect} />
         );
     }
 });

From 8ba9eb20b60ec094b33f07b5eafa2f114607a61b Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 11:53:33 +0100
Subject: [PATCH 186/197] Add better PropType validation for components

---
 .../accordion_list_item_wallet.js             |  8 ++--
 .../ascribe_buttons/acls/acl_button.js        | 15 +++----
 .../unconsign_request_button.js               | 13 +++---
 .../ascribe_detail/edition_container.js       |  4 +-
 js/components/ascribe_detail/note.js          | 44 ++++++++++---------
 js/components/ascribe_detail/piece.js         |  5 ++-
 .../ascribe_detail/piece_container.js         |  2 +-
 .../ascribe_forms/acl_form_factory.js         | 15 ++++---
 .../form_copyright_association.js             | 29 ++++++------
 .../ascribe_forms/form_request_action.js      |  3 +-
 js/components/ascribe_forms/form_transfer.js  | 20 ++++-----
 .../list_form_request_actions.js              | 23 +++++-----
 js/components/ascribe_modal/modal_wrapper.js  | 10 ++---
 js/components/ascribe_routes/proxy_handler.js |  4 +-
 .../ascribe_settings/account_settings.js      | 26 ++++++-----
 .../ascribe_settings/contract_settings.js     |  4 +-
 .../ascribe_settings/settings_container.js    |  6 +--
 js/components/header.js                       |  1 -
 js/components/piece_list.js                   |  4 +-
 js/components/register_piece.js               |  6 ++-
 .../pr_forms/pr_register_piece_form.js        |  2 +-
 .../portfolioreview/components/pr_hero.js     |  2 +-
 .../components/pr_register_piece.js           |  4 +-
 .../accordion_list_item_prize.js              |  4 +-
 .../ascribe_detail/prize_piece_container.js   |  2 +-
 .../components/prize_piece_list.js            |  2 +-
 .../components/prize_settings_container.js    |  2 +-
 .../sluice_selected_prize_action_button.js    |  5 ++-
 .../components/23vivi/23vivi_landing.js       |  2 +-
 .../ascribe_detail/wallet_action_panel.js     |  2 +-
 .../ascribe_detail/wallet_piece_container.js  |  3 +-
 .../cyland_detail/cyland_piece_container.js   |  2 +-
 .../components/cyland/cyland_landing.js       |  4 +-
 .../components/cyland/cyland_piece_list.js    |  4 +-
 .../cyland/cyland_register_piece.js           |  4 +-
 .../ikonotv_accordion_list_item.js            |  4 +-
 .../ikonotv/ikonotv_contract_notifications.js |  8 ++--
 .../components/ikonotv/ikonotv_landing.js     |  4 +-
 .../components/ikonotv/ikonotv_piece_list.js  |  4 +-
 .../ikonotv/ikonotv_register_piece.js         |  4 +-
 .../components/lumenus/lumenus_landing.js     |  4 +-
 .../market_buttons/market_submit_button.js    |  1 +
 .../components/market/market_piece_list.js    |  4 +-
 .../market/market_register_piece.js           |  2 +-
 44 files changed, 170 insertions(+), 151 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
index c586b926..e752451e 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js
@@ -111,13 +111,15 @@ let AccordionListItemWallet = React.createClass({
     },
 
     getLicences() {
+        const { content, whitelabel } = this.props;
+
         // convert this to acl_view_licences later
-        if (this.props.whitelabel && this.props.whitelabel.name === 'Creative Commons France') {
+        if (whitelabel.name === 'Creative Commons France') {
             return (
                 <span>
                     <span>, </span>
-                    <a href={this.props.content.license_type.url} target="_blank">
-                        {getLangText('%s license', this.props.content.license_type.code)}
+                    <a href={content.license_type.url} target="_blank">
+                        {getLangText('%s license', content.license_type.code)}
                     </a>
                 </span>
             );
diff --git a/js/components/ascribe_buttons/acls/acl_button.js b/js/components/ascribe_buttons/acls/acl_button.js
index df349152..d40a779a 100644
--- a/js/components/ascribe_buttons/acls/acl_button.js
+++ b/js/components/ascribe_buttons/acls/acl_button.js
@@ -24,23 +24,20 @@ export default function AclButton({ action, displayName, title, tooltip }) {
 
         propTypes: {
             availableAcls: React.PropTypes.object.isRequired,
-            handleSuccess: React.PropTypes.func.isRequired,
+            pieceOrEditions: React.PropTypes.oneOfType([
+                React.PropTypes.object,
+                React.PropTypes.array
+            ]).isRequired,
 
             buttonAcceptName: React.PropTypes.string,
             buttonAcceptClassName: React.PropTypes.string,
             currentUser: React.PropTypes.object,
             email: React.PropTypes.string,
-            pieceOrEditions: React.PropTypes.oneOfType([
-                React.PropTypes.object,
-                React.PropTypes.array
-            ]).isRequired,
-            className: React.PropTypes.string
+            handleSuccess: React.PropTypes.func
         },
 
         sanitizeAction() {
-            const { buttonAcceptName } = this.props;
-
-            return buttonAcceptName || AclInformationText.titles[action];
+            return this.props.buttonAcceptName || AclInformationText.titles[action];
         },
 
         render() {
diff --git a/js/components/ascribe_buttons/unconsign_request_button.js b/js/components/ascribe_buttons/unconsign_request_button.js
index e5e1c661..c324ff28 100644
--- a/js/components/ascribe_buttons/unconsign_request_button.js
+++ b/js/components/ascribe_buttons/unconsign_request_button.js
@@ -15,10 +15,12 @@ let UnConsignRequestButton = React.createClass({
     propTypes: {
         currentUser: React.PropTypes.object.isRequired,
         edition: React.PropTypes.object.isRequired,
-        handleSuccess: React.PropTypes.func.isRequired
+
+        handleSuccess: React.PropTypes.func
     },
 
     render: function () {
+        const { currentUser, edition, handleSuccess } = this.props;
         return (
             <ModalWrapper
                 trigger={
@@ -26,17 +28,18 @@ let UnConsignRequestButton = React.createClass({
                         REQUEST UNCONSIGN
                     </Button>
                 }
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 title='Request to Un-Consign'>
                 <UnConsignRequestForm
                     url={ApiUrls.ownership_unconsigns_request}
-                    id={{'bitcoin_id': this.props.edition.bitcoin_id}}
+                    id={{'bitcoin_id': edition.bitcoin_id}}
                     message={`${getLangText('Hi')},
 
-${getLangText('I request you to un-consign')} \" ${this.props.edition.title} \".
+${getLangText('I request you to un-consign')} \" ${edition.title} \".
 
 ${getLangText('Truly yours')},
-${this.props.currentUser.username}`}/>
+${currentUser.username}`
+                    } />
             </ModalWrapper>
         );
     }
diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index b9696d0a..77ebed48 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -26,8 +26,8 @@ let EditionContainer = React.createClass({
         furtherDetailsType: React.PropTypes.func,
 
         // Provided from AscribeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object,
diff --git a/js/components/ascribe_detail/note.js b/js/components/ascribe_detail/note.js
index c739b937..693a0400 100644
--- a/js/components/ascribe_detail/note.js
+++ b/js/components/ascribe_detail/note.js
@@ -2,64 +2,68 @@
 
 import React from 'react';
 
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
 import Form from './../ascribe_forms/form';
 import Property from './../ascribe_forms/property';
 import InputTextAreaToggable from './../ascribe_forms/input_textarea_toggable';
 
-import GlobalNotificationModel from '../../models/global_notification_model';
-import GlobalNotificationActions from '../../actions/global_notification_actions';
-
 import { getLangText } from '../../utils/lang_utils';
 
 let Note = React.createClass({
     propTypes: {
-        url: React.PropTypes.string,
-        id: React.PropTypes.func,
-        label: React.PropTypes.string,
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        id: React.PropTypes.func.isRequired,
+        url: React.PropTypes.string.isRequired,
+
         defaultValue: React.PropTypes.string,
         editable: React.PropTypes.bool,
-        show: React.PropTypes.bool,
+        label: React.PropTypes.string,
         placeholder: React.PropTypes.string,
+        show: React.PropTypes.bool,
         successMessage: React.PropTypes.string
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            show: true,
             placeholder: getLangText('Enter a note'),
+            show: true,
             successMessage: getLangText('Note saved')
         };
     },
 
-    showNotification(){
-        let notification = new GlobalNotificationModel(this.props.successMessage, 'success');
+    showNotification() {
+        const notification = new GlobalNotificationModel(this.props.successMessage, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
     render() {
-        if ((!!this.props.currentUser.username && this.props.editable || !this.props.editable ) && this.props.show) {
+        const { currentUser, defaultValue, editable, id, label, placeholder, show, url } = this.props;
+
+        if ((!!currentUser.username && editable || !editable ) && show) {
             return (
                 <Form
-                    url={this.props.url}
-                    getFormData={this.props.id}
+                    url={url}
+                    getFormData={id}
                     handleSuccess={this.showNotification}
-                    disabled={!this.props.editable}>
+                    disabled={!editable}>
                     <Property
                         name='note'
-                        label={this.props.label}>
+                        label={label}>
                         <InputTextAreaToggable
                             rows={1}
-                            defaultValue={this.props.defaultValue}
-                            placeholder={this.props.placeholder}/>
+                            defaultValue={defaultValue}
+                            placeholder={placeholder} />
                     </Property>
                     <hr />
                 </Form>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
-export default Note;
\ No newline at end of file
+export default Note;
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index 31cf0574..9864cf95 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -15,11 +15,12 @@ import MediaContainer from './media_container';
  */
 let Piece = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
+        piece: React.PropTypes.object.isRequired,
+
+        buttons: React.PropTypes.object,
         currentUser: React.PropTypes.object,
         header: React.PropTypes.object,
         subheader: React.PropTypes.object,
-        buttons: React.PropTypes.object,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 30dc2566..0f9df8f6 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -52,7 +52,7 @@ let PieceContainer = React.createClass({
         furtherDetailsType: React.PropTypes.func,
 
         // Provided from AscribeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
diff --git a/js/components/ascribe_forms/acl_form_factory.js b/js/components/ascribe_forms/acl_form_factory.js
index 9422a351..b129f343 100644
--- a/js/components/ascribe_forms/acl_form_factory.js
+++ b/js/components/ascribe_forms/acl_form_factory.js
@@ -20,16 +20,17 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
 let AclFormFactory = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        autoFocusProperty: React.PropTypes.string,
-        currentUser: React.PropTypes.object,
-        email: React.PropTypes.string,
-        message: React.PropTypes.string,
-        labels: React.PropTypes.object,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
+
+        autoFocusProperty: React.PropTypes.string,
+        currentUser: React.PropTypes.object,
+        email: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
+        message: React.PropTypes.string,
+        labels: React.PropTypes.object,
         showNotification: React.PropTypes.bool
     },
 
@@ -105,7 +106,7 @@ let AclFormFactory = React.createClass({
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={this.isPiece() ? ApiUrls.ownership_loans_pieces
-                        : ApiUrls.ownership_loans_editions}
+                                        : ApiUrls.ownership_loans_editions}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else if (action === 'acl_loan_request') {
@@ -122,7 +123,7 @@ let AclFormFactory = React.createClass({
                     message={formMessage}
                     id={this.getFormDataId()}
                     url={this.isPiece() ? ApiUrls.ownership_shares_pieces
-                        : ApiUrls.ownership_shares_editions}
+                                        : ApiUrls.ownership_shares_editions}
                     handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
             );
         } else {
diff --git a/js/components/ascribe_forms/form_copyright_association.js b/js/components/ascribe_forms/form_copyright_association.js
index 124a980a..f9b68f48 100644
--- a/js/components/ascribe_forms/form_copyright_association.js
+++ b/js/components/ascribe_forms/form_copyright_association.js
@@ -15,30 +15,30 @@ import { getLangText } from '../../utils/lang_utils';
 
 let CopyrightAssociationForm = React.createClass({
     propTypes: {
-        currentUser: React.PropTypes.object
+        currentUser: React.PropTypes.object.isRequired
     },
 
-    handleSubmitSuccess(){
-        let notification = getLangText('Copyright association updated');
-        notification = new GlobalNotificationModel(notification, 'success', 10000);
+    handleSubmitSuccess() {
+        const notification = new GlobalNotificationModel(getLangText('Copyright association updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getProfileFormData(){
-        return {email: this.props.currentUser.email};
+    getProfileFormData() {
+        return { email: this.props.currentUser.email };
     },
 
     render() {
-        let selectedState;
-        let selectDefaultValue = ' -- ' + getLangText('select an association') + ' -- ';
+        const { currentUser } = this.props;
+        const selectDefaultValue = ' -- ' + getLangText('select an association') + ' -- ';
 
-        if (this.props.currentUser && this.props.currentUser.profile
-            && this.props.currentUser.profile.copyright_association) {
-            selectedState = AppConstants.copyrightAssociations.indexOf(this.props.currentUser.profile.copyright_association);
-            selectedState = selectedState !== -1 ? AppConstants.copyrightAssociations[selectedState] : selectDefaultValue;
+        let selectedState = selectDefaultValue;
+        if (currentUser.profile && currentUser.profile.copyright_association) {
+            if (AppConstants.copyrightAssociations.indexOf(currentUser.profile.copyright_association) !== -1) {
+                selectedState = AppConstants.copyrightAssociations[selectedState];
+            }
         }
 
-        if (this.props.currentUser && this.props.currentUser.email){
+        if (currentUser.email) {
             return (
                 <Form
                     ref='form'
@@ -71,8 +71,9 @@ let CopyrightAssociationForm = React.createClass({
                     <hr />
                 </Form>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
diff --git a/js/components/ascribe_forms/form_request_action.js b/js/components/ascribe_forms/form_request_action.js
index d3d1bc71..9dbd43e4 100644
--- a/js/components/ascribe_forms/form_request_action.js
+++ b/js/components/ascribe_forms/form_request_action.js
@@ -21,11 +21,12 @@ import { getLangText } from '../../utils/lang_utils.js';
 
 let RequestActionForm = React.createClass({
     propTypes: {
+        notifications: React.PropTypes.object.isRequired,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
-        notifications: React.PropTypes.object,
+
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func
     },
diff --git a/js/components/ascribe_forms/form_transfer.js b/js/components/ascribe_forms/form_transfer.js
index 956d766c..245de177 100644
--- a/js/components/ascribe_forms/form_transfer.js
+++ b/js/components/ascribe_forms/form_transfer.js
@@ -18,26 +18,26 @@ import { getLangText } from '../../utils/lang_utils.js';
 
 let TransferForm = React.createClass({
     propTypes: {
-        url: React.PropTypes.string,
-        id: React.PropTypes.object,
-        message: React.PropTypes.string,
-        editions: React.PropTypes.array,
-        currentUser: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func
+        id: React.PropTypes.object.isRequired,
+        url: React.PropTypes.string.isRequired,
+
+        handleSuccess: React.PropTypes.func,
+        message: React.PropTypes.string
     },
 
-    getFormData(){
+    getFormData() {
         return this.props.id;
     },
 
     render() {
+        const { handleSuccess, message, url } = this.props;
 
         return (
             <Form
                 ref='form'
-                url={this.props.url}
+                url={url}
                 getFormData={this.getFormData}
-                handleSuccess={this.props.handleSuccess}
+                handleSuccess={handleSuccess}
                 buttons={
                     <div className="modal-footer">
                         <p className="pull-right">
@@ -70,7 +70,7 @@ let TransferForm = React.createClass({
                     overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        defaultValue={this.props.message}
+                        defaultValue={message}
                         placeholder={getLangText('Enter a message...')}
                         required />
                 </Property>
diff --git a/js/components/ascribe_forms/list_form_request_actions.js b/js/components/ascribe_forms/list_form_request_actions.js
index 4ec01b46..3aa61359 100644
--- a/js/components/ascribe_forms/list_form_request_actions.js
+++ b/js/components/ascribe_forms/list_form_request_actions.js
@@ -4,32 +4,35 @@ import React from 'react';
 import RequestActionForm from './form_request_action';
 
 let ListRequestActions = React.createClass({
-
     propTypes: {
+        notifications: React.PropTypes.array.isRequired,
         pieceOrEditions: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
         ]).isRequired,
+
         currentUser: React.PropTypes.object,
-        handleSuccess: React.PropTypes.func.isRequired,
-        notifications: React.PropTypes.array.isRequired
+        handleSuccess: React.PropTypes.func
     },
 
     render () {
-        if (this.props.notifications &&
-            this.props.notifications.length > 0) {
+        const { currentUser, handleSuccess, notifications, pieceOrEditions } = this.props;
+
+        if (notifications.length) {
             return (
                 <div>
-                    {this.props.notifications.map((notification) =>
+                    {notifications.map((notification) =>
                         <RequestActionForm
-                            currentUser={this.props.currentUser}
-                            pieceOrEditions={ this.props.pieceOrEditions }
+                            currentUser={currentUser}
+                            handleSuccess={handleSuccess}
                             notifications={notification}
-                            handleSuccess={this.props.handleSuccess}/>)}
+                            pieceOrEditions={pieceOrEditions} />
+                    )}
                 </div>
             );
+        } else {
+            return null;
         }
-        return null;
     }
 });
 
diff --git a/js/components/ascribe_modal/modal_wrapper.js b/js/components/ascribe_modal/modal_wrapper.js
index 511e7f8c..53f1c90b 100644
--- a/js/components/ascribe_modal/modal_wrapper.js
+++ b/js/components/ascribe_modal/modal_wrapper.js
@@ -6,6 +6,10 @@ import Modal from 'react-bootstrap/lib/Modal';
 
 let ModalWrapper = React.createClass({
     propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]).isRequired,
         title: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element,
@@ -14,11 +18,7 @@ let ModalWrapper = React.createClass({
 
         handleCancel: React.PropTypes.func,
         handleSuccess: React.PropTypes.func,
-        trigger: React.PropTypes.element,
-        children: React.PropTypes.oneOfType([
-            React.PropTypes.arrayOf(React.PropTypes.element),
-            React.PropTypes.element
-        ])
+        trigger: React.PropTypes.element
     },
 
     getInitialState() {
diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js
index 225420b0..52084e6b 100644
--- a/js/components/ascribe_routes/proxy_handler.js
+++ b/js/components/ascribe_routes/proxy_handler.js
@@ -34,7 +34,7 @@ export function AuthRedirect({to, when}) {
         //
         // So if when === 'loggedIn', we're checking if the user is logged in (and
         // vice versa)
-        const isLoggedIn = currentUser && Object.keys(currentUser).length && currentUser.email;
+        const isLoggedIn = Object.keys(currentUser).length && currentUser.email;
         const exprToValidate = when === 'loggedIn' ? isLoggedIn : !isLoggedIn;
 
         // and redirect if `true`.
@@ -81,7 +81,7 @@ export function ProxyHandler(...redirectFunctions) {
 
             propTypes: {
                 // Provided from AscribeApp
-                currentUser: React.PropTypes.object,
+                currentUser: React.PropTypes.object.isRequired,
                 whitelabel: React.PropTypes.object,
 
                 // Provided from router
diff --git a/js/components/ascribe_settings/account_settings.js b/js/components/ascribe_settings/account_settings.js
index 57d66171..c8d4d64a 100644
--- a/js/components/ascribe_settings/account_settings.js
+++ b/js/components/ascribe_settings/account_settings.js
@@ -26,21 +26,23 @@ let AccountSettings = React.createClass({
         whitelabel: React.PropTypes.object.isRequired
     },
 
-    handleSuccess(){
+    handleSuccess() {
         this.props.loadUser(true);
-        let notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000);
+
+        const notification = new GlobalNotificationModel(getLangText('Settings succesfully updated'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },
 
-    getFormDataProfile(){
-        return {'email': this.props.currentUser.email};
+    getFormDataProfile() {
+        return { 'email': this.props.currentUser.email };
     },
 
     render() {
-        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
+        const { currentUser, whitelabel } = this.props;
+        let content = <AscribeSpinner color='dark-blue' size='lg' />;
         let profile = null;
 
-        if (this.props.currentUser.username) {
+        if (currentUser.username) {
             content = (
                 <Form
                     url={ApiUrls.users_username}
@@ -50,7 +52,7 @@ let AccountSettings = React.createClass({
                         label={getLangText('Username')}>
                         <input
                             type="text"
-                            defaultValue={this.props.currentUser.username}
+                            defaultValue={currentUser.username}
                             placeholder={getLangText('Enter your username')}
                             required/>
                     </Property>
@@ -61,7 +63,7 @@ let AccountSettings = React.createClass({
                         editable={false}>
                         <input
                             type="text"
-                            defaultValue={this.props.currentUser.email}
+                            defaultValue={currentUser.email}
                             placeholder={getLangText('Enter your username')}
                             required/>
                     </Property>
@@ -70,7 +72,7 @@ let AccountSettings = React.createClass({
             );
             profile = (
                 <AclProxy
-                    aclObject={this.props.whitelabel}
+                    aclObject={whitelabel}
                     aclName="acl_view_settings_account_hash">
                     <Form
                         url={ApiUrls.users_profile}
@@ -80,7 +82,7 @@ let AccountSettings = React.createClass({
                             name="hash_locally"
                             className="ascribe-property-collapsible-toggle">
                             <InputCheckbox
-                                defaultChecked={this.props.currentUser.profile.hash_locally}>
+                                defaultChecked={currentUser.profile.hash_locally}>
                                 <span>
                                     {' ' + getLangText('Enable hash option, e.g. slow connections or to keep piece private')}
                                 </span>
@@ -96,9 +98,9 @@ let AccountSettings = React.createClass({
                 defaultExpanded={true}>
                 {content}
                 <AclProxy
-                    aclObject={this.props.whitelabel}
+                    aclObject={whitelabel}
                     aclName="acl_view_settings_copyright_association">
-                    <CopyrightAssociationForm currentUser={this.props.currentUser}/>
+                    <CopyrightAssociationForm currentUser={currentUser} />
                 </AclProxy>
                 {profile}
             </CollapsibleParagraph>
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index 3b5654cb..37305381 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -24,8 +24,8 @@ import { truncateTextAtCharIndex } from '../../utils/general_utils';
 let ContractSettings = React.createClass({
     propTypes: {
         // Provided from AscribeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js
index f36e1e70..9e94d638 100644
--- a/js/components/ascribe_settings/settings_container.js
+++ b/js/components/ascribe_settings/settings_container.js
@@ -24,8 +24,8 @@ let SettingsContainer = React.createClass({
         ]),
 
         // Provided from AscribeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
@@ -40,7 +40,7 @@ let SettingsContainer = React.createClass({
 
         setDocumentTitle(getLangText('Account settings'));
 
-        if (currentUser && currentUser.username) {
+        if (currentUser.username) {
             return (
                 <div className="settings-container">
                     <AccountSettings
diff --git a/js/components/header.js b/js/components/header.js
index ce1cc4d8..ed04a736 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -29,7 +29,6 @@ import { constructHead } from '../utils/dom_utils';
 
 let Header = React.createClass({
     propTypes: {
-        // Provided from AscribeApp
         currentUser: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
         whitelabel: React.PropTypes.object.isRequired
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 8c1e73f0..431422d8 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -48,8 +48,8 @@ let PieceList = React.createClass({
         orderBy: React.PropTypes.string,
 
         // Provided from AscribeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index d9de0c92..04568bb0 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -31,7 +31,7 @@ let RegisterPiece = React.createClass( {
 
         // Provided from AscribeApp
         currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
@@ -69,7 +69,9 @@ let RegisterPiece = React.createClass( {
     },
 
     getSpecifyEditions() {
-        if (this.props.whitelabel && (this.props.whitelabel.acl_create_editions || Object.keys(this.props.whitelabel).length)) {
+        const { whitelabel } = this.props;
+
+        if (whitelabel.acl_create_editions || Object.keys(whitelabel).length) {
             return (
                 <Property
                     name="num_editions"
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
index 43242bc3..205a5634 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
@@ -32,7 +32,7 @@ const { object } = React.PropTypes;
 
 const PRRegisterPieceForm = React.createClass({
     propTypes: {
-        currentUser: object,
+        currentUser: object.isRequired,
         location: object
     },
 
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_hero.js b/js/components/whitelabel/prize/portfolioreview/components/pr_hero.js
index 15d32b84..e5ec57db 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_hero.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_hero.js
@@ -12,7 +12,7 @@ const PRHero = React.createClass({
     propTypes: {
         currentUser: React.PropTypes.shape({
             email: React.PropTypes.object
-        })
+        }).isRequired
     },
 
     render() {
diff --git a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
index 46c34f6c..5f459ecd 100644
--- a/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
+++ b/js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
@@ -18,7 +18,7 @@ const { object } = React.PropTypes;
 const PRRegisterPiece = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
@@ -29,7 +29,7 @@ const PRRegisterPiece = React.createClass({
 
     componentDidUpdate() {
         const { currentUser } = this.props;
-        if (currentUser && currentUser.email) {
+        if (currentUser.email) {
             const submittedPieceId = getCookie(currentUser.email);
             if (submittedPieceId) {
                 this.history.push(`/pieces/${submittedPieceId}`);
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
index dbc2c5c4..938f654f 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@@ -28,11 +28,11 @@ let AccordionListItemPrize = React.createClass({
         content: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
 
-        className: React.PropTypes.string,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     getInitialState() {
diff --git a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
index a2141d0e..8e53c28e 100644
--- a/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
@@ -53,7 +53,7 @@ let PrizePieceContainer = React.createClass({
         selectedPrizeActionButton: React.PropTypes.func,
 
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
index fd24d7f1..c20ee27d 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
@@ -18,7 +18,7 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 let PrizePieceList = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
diff --git a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
index ab17e440..e274533b 100644
--- a/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
+++ b/js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
@@ -28,7 +28,7 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 let Settings = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
diff --git a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
index 41c979d9..59cf0832 100644
--- a/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
+++ b/js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js
@@ -16,8 +16,9 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 
 const SluiceSelectedPrizeActionButton = React.createClass({
     propTypes: {
-        piece: React.PropTypes.object,
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        piece: React.PropTypes.object.isRequired,
+
         startLoanDate: React.PropTypes.object,
         endLoanDate: React.PropTypes.object,
         className: React.PropTypes.string,
diff --git a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
index 421eb3d3..e006af47 100644
--- a/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
+++ b/js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js
@@ -14,7 +14,7 @@ let Vivi23Landing = React.createClass({
 
         // Provided from PrizeApp
         currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
index acccbde8..84e48e2d 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_action_panel.js
@@ -15,8 +15,8 @@ let WalletActionPanel = React.createClass({
     propTypes: {
         piece: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
-        loadPiece: React.PropTypes.func.isRequired,
         handleDeleteSuccess: React.PropTypes.func.isRequired,
+        loadPiece: React.PropTypes.func.isRequired,
         submitButtonType: React.PropTypes.func.isRequired
     },
 
diff --git a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
index 3b207776..409bec9d 100644
--- a/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
+++ b/js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
@@ -23,9 +23,10 @@ let WalletPieceContainer = React.createClass({
     propTypes: {
         piece: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
-        loadPiece: React.PropTypes.func.isRequired,
         handleDeleteSuccess: React.PropTypes.func.isRequired,
+        loadPiece: React.PropTypes.func.isRequired,
         submitButtonType: React.PropTypes.func.isRequired,
+
         children: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
index 0b18ce9e..f8b2de97 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
@@ -32,7 +32,7 @@ import { mergeOptions } from '../../../../../../utils/general_utils';
 let CylandPieceContainer = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
index 197673fd..bebc1816 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_landing.js
@@ -16,7 +16,7 @@ let CylandLanding = React.createClass({
     propTypes: {
         // Provided from PrizeApp
         currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
@@ -30,7 +30,7 @@ let CylandLanding = React.createClass({
                 <div className="row">
                     <div className="col-xs-12">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.props.whitelabel.logo} height="115"/>
+                            <img src={this.props.whitelabel.logo} height="115" />
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Submissions to Cyland Archive are powered by') + ' '}
                                 <span>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
index 1c2420d2..e441b492 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js
@@ -11,8 +11,8 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 let CylandPieceList = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index 7a0d2b66..a04ad691 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -37,8 +37,8 @@ import { getAclFormMessage } from '../../../../../utils/form_utils';
 let CylandRegisterPiece = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
index 41853e85..bc20c367 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
@@ -24,11 +24,11 @@ let IkonotvAccordionListItem = React.createClass({
         content: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
 
-        className: React.PropTypes.string,
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        className: React.PropTypes.string
     },
 
     getInitialState() {
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
index 33f70aff..a08c56e4 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
@@ -26,8 +26,8 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 let IkonotvContractNotifications = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
@@ -135,7 +135,7 @@ let IkonotvContractNotifications = React.createClass({
     getCopyrightAssociationForm(){
         const { currentUser } = this.props;
 
-        if (currentUser && currentUser.profile && !currentUser.profile.copyright_association) {
+        if (currentUser.profile && !currentUser.profile.copyright_association) {
             return (
                 <div className='notification-contract-footer'>
                     <h1>{getLangText('Are you a member of any copyright societies?')}</h1>
@@ -165,7 +165,7 @@ let IkonotvContractNotifications = React.createClass({
                 <div className='container'>
                     <div className='notification-contract-wrapper'>
                         <div className='notification-contract-logo'>
-                            <img src={whitelabel.logo}/>
+                            <img src={whitelabel.logo} />
                             <div className='notification-contract-header'>
                                 {getLangText('Contract')}
                             </div>
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
index c960be12..e1e07dd5 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js
@@ -13,7 +13,7 @@ import { setDocumentTitle } from '../../../../../utils/dom_utils';
 let IkonotvLanding = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
 
         // Provided from router
@@ -24,7 +24,7 @@ let IkonotvLanding = React.createClass({
         const { currentUser, location } = this.props;
         let redirect = '/login';
 
-        if (currentUser && currentUser.email) {
+        if (currentUser.email) {
             redirect = '/collection';
         } else if (location.query.redirect) {
             redirect = '/' + location.query.redirect;
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
index d1811994..defabec2 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
@@ -15,8 +15,8 @@ import { getLangText } from '../../../../../utils/lang_utils';
 let IkonotvPieceList = React.createClass({
     propTypes: {
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
index 3684fb29..bb46d76d 100644
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@@ -35,8 +35,8 @@ let IkonotvRegisterPiece = React.createClass({
         handleSuccess: React.PropTypes.func,
 
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
index 9674ef3f..f48f8151 100644
--- a/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
+++ b/js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js
@@ -13,7 +13,7 @@ let LumenusLanding = React.createClass({
     propTypes: {
         // Provided from PrizeApp
         currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
@@ -29,7 +29,7 @@ let LumenusLanding = React.createClass({
                 <div className="row">
                     <div className="col-xs-12 wp-landing-wrapper">
                         <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
-                            <img src={this.props.whitelabel.logo} height="150"/>
+                            <img src={this.props.whitelabel.logo} height="150" />
                             <div style={{marginTop: '1em'}}>
                                 {getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
                                 <span>
diff --git a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
index 8892a856..b5dd5d50 100644
--- a/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
+++ b/js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
@@ -24,6 +24,7 @@ let MarketSubmitButton = React.createClass({
         availableAcls: React.PropTypes.object.isRequired,
         currentUser: React.PropTypes.object.isRequired,
         editions: React.PropTypes.array.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         className: React.PropTypes.string,
         handleSuccess: React.PropTypes.func
diff --git a/js/components/whitelabel/wallet/components/market/market_piece_list.js b/js/components/whitelabel/wallet/components/market/market_piece_list.js
index 8db8bcf8..893be333 100644
--- a/js/components/whitelabel/wallet/components/market/market_piece_list.js
+++ b/js/components/whitelabel/wallet/components/market/market_piece_list.js
@@ -15,8 +15,8 @@ let MarketPieceList = React.createClass({
         customThumbnailPlaceholder: React.PropTypes.func,
 
         // Provided from PrizeApp
-        currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        currentUser: React.PropTypes.object.isRequired,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object
diff --git a/js/components/whitelabel/wallet/components/market/market_register_piece.js b/js/components/whitelabel/wallet/components/market/market_register_piece.js
index ac8f423d..92a0b1d3 100644
--- a/js/components/whitelabel/wallet/components/market/market_register_piece.js
+++ b/js/components/whitelabel/wallet/components/market/market_register_piece.js
@@ -27,7 +27,7 @@ let MarketRegisterPiece = React.createClass({
     propTypes: {
         // Provided from PrizeApp
         currentUser: React.PropTypes.object,
-        whitelabel: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired,
 
         // Provided from router
         location: React.PropTypes.object

From 15cf6498a8f0ae4b12740d3a273b4955fa618cf5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 11:54:02 +0100
Subject: [PATCH 187/197] Remove unused Cyland hero component

---
 .../wallet/components/cyland/cyland_hero.js   | 20 -------------------
 1 file changed, 20 deletions(-)
 delete mode 100644 js/components/whitelabel/wallet/components/cyland/cyland_hero.js

diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_hero.js b/js/components/whitelabel/wallet/components/cyland/cyland_hero.js
deleted file mode 100644
index 8b144435..00000000
--- a/js/components/whitelabel/wallet/components/cyland/cyland_hero.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use strict';
-
-import React from 'react';
-import AppConstants from '../../../../constants/application_constants';
-
-
-let Hero = React.createClass({
-    render() {
-        return (
-            <div className="hero">
-                <img
-                    className="logo" src={AppConstants.whitelabel.logo}
-                    alt="Cyland Video Archive"
-                    height="200px"/>
-            </div>
-        );
-    }
-});
-
-export default Hero;

From a020ed6a283cee6d4387b50572578fe04020e908 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 12:04:23 +0100
Subject: [PATCH 188/197] Revert against
 8927ccb847ec8569971d154bd2fa4c8cb54962a6
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apparently the lack of the `setDropdownState` function is what causes
the page refresh to happen when clicking on a header notification…
---
 js/components/header_notification.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/js/components/header_notification.js b/js/components/header_notification.js
index 84b71177..fe50e150 100644
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@@ -55,11 +55,7 @@ let HeaderNotifications = React.createClass({
         NOW, THAT DIDN'T WORK - the onSelect routine isnt triggered in all cases
         Hence, we do this manually
         */
-        const { dropdownButton } = this.refs;
-
-        if (dropdownButton && typeof dropdownButton.setDropdownState === 'function') {
-            dropdownbutton.setDropdownState(false);
-        }
+        this.refs.dropdownbutton.setDropdownState(false);
     },
 
     getPieceNotifications() {

From 325651b581d9cd7573e0942e4c67f649d04b0349 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 13:12:58 +0100
Subject: [PATCH 189/197] Remove altUser since the UserStore is now always
 being passed as a prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also don’t recycle altWhitelabel on logout as the whitelabel stores
aren’t dependent on the user.
---
 js/actions/user_actions.js | 4 ++--
 js/alt.js                  | 1 -
 js/stores/user_store.js    | 7 +++----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/js/actions/user_actions.js b/js/actions/user_actions.js
index a661b8de..9d59044f 100644
--- a/js/actions/user_actions.js
+++ b/js/actions/user_actions.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import { altUser } from '../alt';
+import { alt } from '../alt';
 
 
 class UserActions {
@@ -15,4 +15,4 @@ class UserActions {
     }
 }
 
-export default altUser.createActions(UserActions);
+export default alt.createActions(UserActions);
diff --git a/js/alt.js b/js/alt.js
index 141248c1..3e1d3fae 100644
--- a/js/alt.js
+++ b/js/alt.js
@@ -4,5 +4,4 @@ import Alt from 'alt';
 
 export let alt = new Alt();
 export let altThirdParty = new Alt();
-export let altUser = new Alt();
 export let altWhitelabel = new Alt();
diff --git a/js/stores/user_store.js b/js/stores/user_store.js
index fe96eaa8..4c6725e3 100644
--- a/js/stores/user_store.js
+++ b/js/stores/user_store.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import { alt, altWhitelabel, altUser, altThirdParty } from '../alt';
+import { alt, altThirdParty } from '../alt';
 
 import EventActions from '../actions/event_actions';
 
@@ -56,9 +56,8 @@ class UserStore {
         EventActions.userDidLogout();
 
         // Reset all stores back to their initial state
+        // Don't recycle the whitelabel stores since they're not dependent on login
         alt.recycle();
-        altWhitelabel.recycle();
-        altUser.recycle();
         altThirdParty.recycle();
 
         // Since we've just logged out, we can set this store's
@@ -77,4 +76,4 @@ class UserStore {
     }
 }
 
-export default altUser.createStore(UserStore, 'UserStore');
+export default alt.createStore(UserStore, 'UserStore');

From 01b258334a8ce60768d71f70a725c1207640488e Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 14:21:31 +0100
Subject: [PATCH 190/197] Fix register work visual test

---
 js/components/ascribe_forms/property.js | 10 +++++-----
 test/gemini/tests/main/authenticated.js | 11 +++++++++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index 6d46a9d3..16238802 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -294,18 +294,18 @@ const Property = React.createClass({
     },
 
     getCheckbox() {
-        const { checkboxLabel } = this.props;
+        const { checkboxLabel, name } = this.props;
 
-        if(checkboxLabel) {
+        if (checkboxLabel) {
             return (
                 <div
                     className="ascribe-property-collapsible-toggle"
                     onClick={this.handleCheckboxToggle}>
                     <input
-                        onChange={this.handleCheckboxToggle}
-                        type="checkbox"
+                        name={`${name}-checkbox`}
                         checked={this.state.expanded}
-                        ref="checkboxCollapsible"/>
+                        onChange={this.handleCheckboxToggle}
+                        type="checkbox" />
                     <span className="checkbox">{' ' + checkboxLabel}</span>
                 </div>
             );
diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
index 7adfe16d..95eb62bd 100644
--- a/test/gemini/tests/main/authenticated.js
+++ b/test/gemini/tests/main/authenticated.js
@@ -166,9 +166,15 @@ gemini.suite('Authenticated', (suite) => {
     gemini.suite('Register work', (registerSuite) => {
         registerSuite
             .setUrl('/register_piece')
+            .before((actions, find) => {
+                // The editions options are only rendered after the whitelabel is fetched, so
+                // we have to wait for it here
+                // We have to check for the sibling checkbox class as the input itself is hidden
+                actions.waitForElementToShow('.ascribe-form input[name="num_editions-checkbox"] ~ .checkbox', TIMEOUTS.NORMAL);
+            })
             .capture('register work', (actions, find) => {
                 // The uploader options are only rendered after the user is fetched, so
-                // we have to wait for it here
+                // we also have to wait for it here
                 actions.waitForElementToShow('.file-drag-and-drop-dialog .present-options', TIMEOUTS.NORMAL);
             })
             .capture('register work filled', (actions, find) => {
@@ -177,7 +183,8 @@ gemini.suite('Authenticated', (suite) => {
                 actions.sendKeys(find('.ascribe-form input[name="date_created"]'), 'date created');
             })
             .capture('register work filled with editions', (actions, find) => {
-                actions.click(find('.ascribe-form input[type="checkbox"] ~ .checkbox'));
+                actions.click(find('.ascribe-form input[name="num_editions-checkbox"] ~ .checkbox'));
+                // Wait for transition
                 actions.wait(500);
                 actions.sendKeys(find('.ascribe-form input[name="num_editions"]'), '50');
             });

From 40894cfea60268d38854c5228d738676d236feb8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 14:22:42 +0100
Subject: [PATCH 191/197] Use the 'ascribe-app' class for all apps

Simplifies testing so we can just look for a single class throughout
all the apps when ensuring React has loaded our app
---
 js/components/ascribe_app.js                          |  2 +-
 .../whitelabel/prize/portfolioreview/pr_app.js        |  2 +-
 .../whitelabel/prize/simple_prize/prize_app.js        |  2 +-
 js/components/whitelabel/wallet/wallet_app.js         |  2 +-
 test/gemini/tests/main/authenticated.js               |  4 +---
 test/gemini/tests/main/basic.js                       |  3 +--
 test/gemini/tests/main/detail.js                      |  8 +++-----
 test/gemini/tests/whitelabel/23vivi/23vivi.js         |  5 ++---
 test/gemini/tests/whitelabel/cyland/cyland.js         |  5 ++---
 test/gemini/tests/whitelabel/ikonotv/ikonotv.js       | 11 ++++-------
 test/gemini/tests/whitelabel/lumenus/lumenus.js       |  5 ++---
 11 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 863bffc0..87ab1daf 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -23,7 +23,7 @@ let AscribeApp = React.createClass({
         const { activeRoute, children, currentUser, routes, whitelabel } = this.props;
 
         return (
-            <div className="ascribe-default-app">
+            <div className="ascribe-app ascribe-default-app">
                 <Header
                     currentUser={currentUser}
                     routes={routes}
diff --git a/js/components/whitelabel/prize/portfolioreview/pr_app.js b/js/components/whitelabel/prize/portfolioreview/pr_app.js
index dcb95892..d8b9f982 100644
--- a/js/components/whitelabel/prize/portfolioreview/pr_app.js
+++ b/js/components/whitelabel/prize/portfolioreview/pr_app.js
@@ -56,7 +56,7 @@ let PRApp = React.createClass({
         return (
             <div
                 style={style}
-                className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+                className={classNames('ascribe-app', 'ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
                 <AppRouteWrapper
                     currentUser={currentUser}
diff --git a/js/components/whitelabel/prize/simple_prize/prize_app.js b/js/components/whitelabel/prize/simple_prize/prize_app.js
index 7a7c5cbb..7e0facc9 100644
--- a/js/components/whitelabel/prize/simple_prize/prize_app.js
+++ b/js/components/whitelabel/prize/simple_prize/prize_app.js
@@ -44,7 +44,7 @@ let PrizeApp = React.createClass({
         }
 
         return (
-            <div className={classNames('ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+            <div className={classNames('ascribe-app', 'ascribe-prize-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
                 <AppRouteWrapper
                     currentUser={currentUser}
diff --git a/js/components/whitelabel/wallet/wallet_app.js b/js/components/whitelabel/wallet/wallet_app.js
index b9663772..c5f732c3 100644
--- a/js/components/whitelabel/wallet/wallet_app.js
+++ b/js/components/whitelabel/wallet/wallet_app.js
@@ -46,7 +46,7 @@ let WalletApp = React.createClass({
         // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
         // we split the path by the first occurring slash and take the first splitter.
         return (
-            <div className={classNames('ascribe-wallet-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
+            <div className={classNames('ascribe-app', 'ascribe-wallet-app', `route--${(path ? path.split('/')[0] : 'landing')}`)}>
                 {header}
                 <AppRouteWrapper
                     currentUser={currentUser}
diff --git a/test/gemini/tests/main/authenticated.js b/test/gemini/tests/main/authenticated.js
index 95eb62bd..28e4b120 100644
--- a/test/gemini/tests/main/authenticated.js
+++ b/test/gemini/tests/main/authenticated.js
@@ -15,9 +15,7 @@ gemini.suite('Authenticated', (suite) => {
         .before((actions, find) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
-            // FIXME: use a more generic class for this, like just '.app',
-            // when we can use this file with the whitelabels
-            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     // Suite just to log us in before any other suites run
diff --git a/test/gemini/tests/main/basic.js b/test/gemini/tests/main/basic.js
index 5657f77f..fd07af2b 100644
--- a/test/gemini/tests/main/basic.js
+++ b/test/gemini/tests/main/basic.js
@@ -15,8 +15,7 @@ gemini.suite('Basic', (suite) => {
         .before((actions, find) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
-            // FIXME: use a more generic class for this, like just '.ascribe-app'
-            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Header-desktop', (headerSuite) => {
diff --git a/test/gemini/tests/main/detail.js b/test/gemini/tests/main/detail.js
index 39e83d70..1a51836b 100644
--- a/test/gemini/tests/main/detail.js
+++ b/test/gemini/tests/main/detail.js
@@ -19,9 +19,7 @@ gemini.suite('Work detail', (suite) => {
         .before((actions, find) => {
             // This will be called before every nested suite begins unless that suite
             // also defines a `.before()`
-            // FIXME: use a more generic class for this, like just '.app',
-            // when we can use this file with the whitelabels
-            actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
 
             // Wait for the social media buttons to appear
             actions.waitForElementToShow('.ascribe-social-button-list .fb-share-button iframe', TIMEOUTS.SUPER_DUPER_EXTRA_LONG);
@@ -58,7 +56,7 @@ gemini.suite('Work detail', (suite) => {
             .setUrl('/login')
             .ignoreElements('.ascribe-body')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
             })
             .capture('logged in', (actions, find) => {
                 actions.sendKeys(find('.ascribe-login-wrapper input[name=email]'), MAIN_USER.email);
@@ -125,7 +123,7 @@ gemini.suite('Work detail', (suite) => {
             .setUrl('/logout')
             .ignoreElements('.ascribe-body')
             .before((actions, find) => {
-                actions.waitForElementToShow('.ascribe-default-app', TIMEOUTS.NORMAL);
+                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
             })
             .capture('logout', (actions, find) => {
                 actions.waitForElementToShow('.ascribe-login-wrapper', TIMEOUTS.LONG);
diff --git a/test/gemini/tests/whitelabel/23vivi/23vivi.js b/test/gemini/tests/whitelabel/23vivi/23vivi.js
index 99efb310..9d0c397e 100644
--- a/test/gemini/tests/whitelabel/23vivi/23vivi.js
+++ b/test/gemini/tests/whitelabel/23vivi/23vivi.js
@@ -9,11 +9,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('23vivi', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
-        .setCaptureElements('.ascribe-wallet-app')
+        .setCaptureElements('.ascribe-body')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
diff --git a/test/gemini/tests/whitelabel/cyland/cyland.js b/test/gemini/tests/whitelabel/cyland/cyland.js
index 8159f53e..9228186a 100644
--- a/test/gemini/tests/whitelabel/cyland/cyland.js
+++ b/test/gemini/tests/whitelabel/cyland/cyland.js
@@ -9,11 +9,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('Cyland', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
-        .setCaptureElements('.ascribe-wallet-app')
+        .setCaptureElements('.ascribe-body')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
diff --git a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
index 84d743c0..81e936e9 100644
--- a/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
+++ b/test/gemini/tests/whitelabel/ikonotv/ikonotv.js
@@ -10,11 +10,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('Ikonotv', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
-        .setCaptureElements('.ascribe-wallet-app')
+        .setCaptureElements('.ascribe-body')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {
@@ -40,13 +39,11 @@ gemini.suite('Ikonotv', (suite) => {
     // its logo to appear
     gemini.suite('Ikonotv basic', (suite) => {
         suite
-            .setCaptureElements('.ascribe-wallet-app')
+            .setCaptureElements('.ascribe-app')
             .before((actions, find) => {
                 // This will be called before every nested suite begins unless that suite
                 // also defines a `.before()`
-                // FIXME: use a more generic class for this, like just '.app',
-                // when we can use this file with the whitelabels
-                actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+                actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
 
                 // Wait for the forms to appear
                 actions.waitForElementToShow('.ascribe-form', TIMEOUTS.NORMAL);
diff --git a/test/gemini/tests/whitelabel/lumenus/lumenus.js b/test/gemini/tests/whitelabel/lumenus/lumenus.js
index 8e8f568d..b15f31ee 100644
--- a/test/gemini/tests/whitelabel/lumenus/lumenus.js
+++ b/test/gemini/tests/whitelabel/lumenus/lumenus.js
@@ -9,11 +9,10 @@ const TIMEOUTS = environment.TIMEOUTS;
  */
 gemini.suite('Lumenus', (suite) => {
     suite
-        //TODO: maybe this should be changed to .ascribe-body once the PR that does this is merged
-        .setCaptureElements('.ascribe-wallet-app')
+        .setCaptureElements('.ascribe-body')
         .before((actions, find) => {
             // This will be called before every nested suite begins
-            actions.waitForElementToShow('.ascribe-wallet-app', TIMEOUTS.NORMAL);
+            actions.waitForElementToShow('.ascribe-app', TIMEOUTS.NORMAL);
         });
 
     gemini.suite('Landing', (landingSuite) => {

From a79c0f27845e422cfe6b68f689c72687f258b4ee Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 14:43:20 +0100
Subject: [PATCH 192/197] Remove trailing trues on visual regression scripts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Doesn’t seem to be eliminating the node failure logs, so we’ll use the
silent flag instead
---
 package.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 9ec357d4..f50b951d 100644
--- a/package.json
+++ b/package.json
@@ -20,16 +20,16 @@
     "vi-clean": "rm -rf ./gemini-report",
     "vi-phantom": "phantomjs --webdriver=4444",
     "vi-update": "gemini update -c ./test/gemini/.gemini.yml",
-    "vi-test": "npm run vi-test:base || true",
+    "vi-test": "npm run -s vi-test:base",
     "vi-test:base": "npm run vi-clean && gemini test -c ./test/gemini/.gemini.yml --reporter html --reporter vflat",
-    "vi-test:all": "npm run vi-test",
-    "vi-test:main": "npm run vi-test:base -- --browser MainDesktop --browser MainMobile || true",
-    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run vi-test:base || true",
-    "vi-test:cc": "npm run vi-test:base -- --browser CcDesktop --browser CcMobile",
-    "vi-test:cyland": "npm run vi-test:base -- --browser CylandDesktop --browser CylandMobile || true",
-    "vi-test:ikonotv": "npm run vi-test:base -- --browser IkonotvDesktop --browser IkonotvMobile || true",
-    "vi-test:lumenus": "npm run vi-test:base -- --browser LumenusDesktop --browser LumenusMobile || true",
-    "vi-test:23vivi": "npm run vi-test:base -- --browser 23viviDesktop --browser 23viviMobile || true"
+    "vi-test:all": "npm run -s vi-test",
+    "vi-test:main": "npm run -s vi-test:base -- --browser MainDesktop --browser MainMobile",
+    "vi-test:whitelabel": "GEMINI_BROWSERS='CcDesktop, CcMobile, CylandDesktop, CylandMobile, IkonotvDesktop, IkonotvMobile, LumenusDesktop, LumenusMobile, 23viviDesktop, 23viviMobile' npm run -s vi-test:base",
+    "vi-test:cc": "npm run -s vi-test:base -- --browser CcDesktop --browser CcMobile",
+    "vi-test:cyland": "npm run -s vi-test:base -- --browser CylandDesktop --browser CylandMobile",
+    "vi-test:ikonotv": "npm run -s vi-test:base -- --browser IkonotvDesktop --browser IkonotvMobile",
+    "vi-test:lumenus": "npm run -s vi-test:base -- --browser LumenusDesktop --browser LumenusMobile",
+    "vi-test:23vivi": "npm run -s vi-test:base -- --browser 23viviDesktop --browser 23viviMobile"
   },
   "browser": {
     "fineUploader": "./js/components/ascribe_uploader/vendor/s3.fine-uploader.js"

From acd7c0f0a3ff5524e66d15210da2bd292f17eee0 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 5 Feb 2016 15:17:59 +0100
Subject: [PATCH 193/197] Fix PR comments

---
 .../file_drag_and_drop.js                     |  8 ++---
 .../file_drag_and_drop_error_dialog.js        |  2 +-
 .../react_s3_fine_uploader.js                 | 34 +++++++++----------
 .../react_s3_fine_uploader_utils.js           | 33 ++++++++----------
 js/constants/error_constants.js               |  5 +--
 js/utils/general_utils.js                     |  9 ++---
 6 files changed, 43 insertions(+), 48 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
index 9ad1facb..37fc3f23 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@@ -191,9 +191,9 @@ let FileDragAndDrop = React.createClass({
         const hasFiles = filesToUpload
                             .filter((file) => {
                                 return file.status !== FileStatus.DELETED &&
-                                    file.status !== FileStatus.CANCELED &&
-                                    file.status !== FileStatus.UPLOAD_FAILED &&
-                                    file.size !== -1;
+                                       file.status !== FileStatus.CANCELED &&
+                                       file.status !== FileStatus.UPLOAD_FAILED &&
+                                       file.size !== -1;
                             })
                             .length > 0;
 
@@ -201,7 +201,7 @@ let FileDragAndDrop = React.createClass({
         let hasError = showError && errorClass && failedFiles.length > 0;
 
         // if !== -2: triggers a FileDragAndDrop-global spinner
-        if(hashingProgress !== -2) {
+        if (hashingProgress !== -2) {
             return (
                 <div className="file-drag-and-drop-hashing-dialog">
                     <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
index 0e4bfaa2..a88d2e35 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_error_dialog.js
@@ -37,7 +37,7 @@ let FileDragAndDropErrorDialog = React.createClass({
     getContactUsDetail() {
         return (
             <div className='file-drag-and-drop-error'>
-                <h4>Let us help you</h4>
+                <h4>{getLangText('Let us help you')}</h4>
                 <p>{getLangText('Still having problems? Send us a message.')}</p>
                 {this.getRetryButton('Contact us', true)}
             </div>
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 19705925..ca802b6a 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -208,7 +208,7 @@ const ReactS3FineUploader = React.createClass({
             messages: {
                 unsupportedBrowser: '<h3>' + getLangText('Upload is not functional in IE7 as IE7 has no support for CORS!') + '</h3>'
             },
-            formatFileName: function(name){// fix maybe
+            formatFileName: function(name) { // fix maybe
                 if (name !== undefined && name.length > 26) {
                     name = name.slice(0, 15) + '...' + name.slice(-15);
                 }
@@ -224,7 +224,7 @@ const ReactS3FineUploader = React.createClass({
             csrfToken: getCookie(AppConstants.csrftoken),
             errorState: {
                 manualRetryAttempt: 0,
-                errorClass: undefined
+                errorClass: null
             },
             uploadInProgress: false,
 
@@ -472,19 +472,19 @@ const ReactS3FineUploader = React.createClass({
         const { manualRetryAttempt } = this.state.errorState;
         let matchedErrorClass;
 
-        // Use the contact us error class if they've retried a number of times
-        // and are still unsuccessful
-        if (manualRetryAttempt === RETRY_ATTEMPT_TO_SHOW_CONTACT_US) {
+        if ('onLine' in window.navigator && !window.navigator.onLine) {
+            // If the user's offline, this is definitely the most important error to show.
+            // TODO: use a better mechanism for checking network state, ie. offline.js
+            matchedErrorClass = ErrorClasses.upload.offline;
+        } else if (manualRetryAttempt === RETRY_ATTEMPT_TO_SHOW_CONTACT_US) {
+            // Use the contact us error class if they've retried a number of times
+            // and are still unsuccessful
             matchedErrorClass = ErrorClasses.upload.contactUs;
         } else {
             matchedErrorClass = testErrorAgainstAll({ type, reason, xhr });
 
-            // If none found, check the internet connection
-            // TODO: use a better mechanism for checking network state, ie. offline.js
-            if ('onLine' in window.navigator && !window.navigator.onLine) {
-                matchedErrorClass = ErrorClasses.upload.offline;
-            } else {
-                // Otherwise, show the next error message in the queue
+            if (!matchedErrorClass) {
+                // If none found, show the next error message in the queue for upload errors
                 matchedErrorClass = ErrorQueueStore.getNextError('upload');
             }
         }
@@ -1030,14 +1030,14 @@ const ReactS3FineUploader = React.createClass({
 
         const filesToDisplay = filesToUpload.filter((file) => {
             return file.status !== FileStatus.DELETED &&
-                        file.status !== FileStatus.CANCELED &&
-                        file.status !== FileStatus.UPLOAD_FAILED &&
-                        file.size !== -1;
+                   file.status !== FileStatus.CANCELED &&
+                   file.status !== FileStatus.UPLOAD_FAILED &&
+                   file.size !== -1;
         });
 
         if ((enableLocalHashing && !uploadMethod) || !areAssetsEditable ||
-                (showErrorPrompt && errorState.errorClass) ||
-                (!multiple && filesToDisplay.length > 0)) {
+            (showErrorPrompt && errorState.errorClass) ||
+            (!multiple && filesToDisplay.length > 0)) {
             return true;
         } else {
             return false;
@@ -1047,7 +1047,7 @@ const ReactS3FineUploader = React.createClass({
     getAllowedExtensions() {
         const { validation } = this.props;
 
-        if(validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
+        if (validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
             return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions);
         } else {
             return null;
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
index 05fb565e..615e8879 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
@@ -1,9 +1,10 @@
 'use strict';
 
 import fineUploader from 'fineUploader';
+
 // Re-export qq.status from FineUploader with an additional online
 // state that we use to keep track of files from S3.
-export const FileStatus = Object.assign(fineUploader.status, {
+export const FileStatus = Object.assign({}, fineUploader.status, {
     ONLINE: 'online'
 });
 
@@ -17,11 +18,11 @@ export const formSubmissionValidation = {
     atLeastOneUploadedFile(files) {
         files = files.filter((file) => {
             return file.status !== FileStatus.DELETED &&
-                    file.status !== FileStatus.CANCELED &&
-                    file.status != FileStatus.UPLOADED_FAILED
+                   file.status !== FileStatus.CANCELED &&
+                   file.status != FileStatus.UPLOADED_FAILED
         });
 
-        if (files.length > 0 && files[0].status === FileStatus.UPLOAD_SUCCESSFUL) {
+        if (files.length && files[0].status === FileStatus.UPLOAD_SUCCESSFUL) {
             return true;
         } else {
             return false;
@@ -35,13 +36,9 @@ export const formSubmissionValidation = {
      * @return {boolean}       [description]
      */
     fileOptional(files) {
-        let uploadingFiles = files.filter((file) => file.status === FileStatus.SUBMITTING);
+        const uploadingFiles = files.filter((file) => file.status === FileStatus.SUBMITTING);
 
-        if (uploadingFiles.length === 0) {
-            return true;
-        } else {
-            return false;
-        }
+        return uploadFiles.length === 0;
     }
 };
 
@@ -52,8 +49,8 @@ export const formSubmissionValidation = {
  */
 export function displayValidFilesFilter(file) {
     return file.status !== FileStatus.DELETED &&
-            file.status !== FileStatus.CANCELED &&
-            file.status !== FileStatus.UPLOAD_FAILED;
+           file.status !== FileStatus.CANCELED &&
+           file.status !== FileStatus.UPLOAD_FAILED;
 }
 
 /**
@@ -63,8 +60,8 @@ export function displayValidFilesFilter(file) {
  */
 export function displayRemovedFilesFilter(file) {
     return file.status === FileStatus.DELETED ||
-            file.status === FileStatus.CANCELED ||
-            file.status === FileStatus.UPLOAD_FAILED;
+           file.status === FileStatus.CANCELED ||
+           file.status === FileStatus.UPLOAD_FAILED;
 }
 
 
@@ -75,9 +72,9 @@ export function displayRemovedFilesFilter(file) {
  */
 export function displayValidProgressFilesFilter(file) {
     return file.status !== FileStatus.DELETED &&
-            file.status !== FileStatus.CANCELED &&
-            file.status !== FileStatus.UPLOAD_FAILED &&
-            file.status !== FileStatus.ONLINE;
+           file.status !== FileStatus.CANCELED &&
+           file.status !== FileStatus.UPLOAD_FAILED &&
+           file.status !== FileStatus.ONLINE;
 }
 
 
@@ -93,7 +90,7 @@ export function displayValidProgressFilesFilter(file) {
  */
 export function transformAllowedExtensionsToInputAcceptProp(allowedExtensions) {
     // add a dot in front of the extension
-    let prefixedAllowedExtensions = allowedExtensions.map((ext) => '.' + ext);
+    const prefixedAllowedExtensions = allowedExtensions.map((ext) => '.' + ext);
 
     // generate a comma separated list to add them to the DOM element
     // See: http://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file
diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index 96d5f61f..4df095ee 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -179,7 +179,7 @@ function getPrettifiedError(error, errorClass) {
  * @return {(object)} Matched error class
  */
 function testErrorAgainstAll(error) {
-    const type = error.type != null ? error.type : 'default';
+    const type = error.type || 'default';
     const errorGroup = ErrorClasses[type];
 
     return Object
@@ -198,7 +198,8 @@ function testErrorAgainstAll(error) {
  * @return {(object)} Returns the given class if the test succeeds.
  */
 function testErrorAgainstClass(error, errorClass) {
-    // Automatically fail classes if no tests present
+    // Automatically fail classes if no tests present, since some of the error classes
+    // may not have an error to test against.
     if (!errorClass.test) {
         return;
     }
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index a3336d80..ea36bff9 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -223,15 +223,12 @@ export function omitFromObject(obj, filter) {
  *                             By default, applies strict equality using ===
  * @return {boolean}           True if obj matches the "match" object
  */
-export function deepMatchObject(obj, match, testFn) {
+export function deepMatchObject(obj, match, testFn = (objProp, matchProp) => objProp === matchProp) {
     if (typeof match !== 'object') {
         throw new Error('Your specified match argument was not an object');
     }
-
     if (typeof testFn !== 'function') {
-        testFn = (objProp, matchProp) => {
-            return objProp === matchProp;
-        };
+        throw new Error('Your specified test function was not a function');
     }
 
     return Object
@@ -239,7 +236,7 @@ export function deepMatchObject(obj, match, testFn) {
             .reduce((result, matchKey) => {
                 if (!result) { return false; }
 
-                const objProp = obj[matchKey];
+                const objProp = obj && obj[matchKey];
                 const matchProp = match[matchKey];
 
                 if (typeof matchProp === 'object') {

From 9b0f06b8cf1588ebfa37f37f84f8155f647df12e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 8 Feb 2016 10:08:01 +0100
Subject: [PATCH 194/197] Github isn't updating the issue


From 91f9e83e814282695ccc7817b7b1567977b736ec Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 8 Feb 2016 10:40:46 +0100
Subject: [PATCH 195/197] Fix FileDragAndDropDialog merge mistake

---
 .../file_drag_and_drop_dialog.js              | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
index 923f1572..6a59b8fc 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
@@ -102,19 +102,19 @@ let FileDragAndDropDialog = React.createClass({
                     </span>)
                 ];
             }
-
-            return (
-                <div className="file-drag-and-drop-dialog">
-                    <div className="hidden-print">
-                        {dialogElement}
-                    </div>
-                    {/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
-                    <p className="text-align-center visible-print">
-                        {getLangText('No files uploaded')}
-                    </p>
-                </div>
-            );
         }
+
+        return (
+            <div className="file-drag-and-drop-dialog">
+                <div className="hidden-print">
+                    {dialogElement}
+                </div>
+                {/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
+                <p className="text-align-center visible-print">
+                    {getLangText('No files uploaded')}
+                </p>
+            </div>
+        );
     }
 });
 

From 537d6d52e84c4977ddf0cda0a1ccbc3aafddf8e8 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 8 Feb 2016 10:41:36 +0100
Subject: [PATCH 196/197] Small fixes for warnings

---
 js/components/ascribe_routes/proxy_handler.js               | 6 +++---
 .../ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js | 2 ++
 js/components/ascribe_uploader/react_s3_fine_uploader.js    | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_routes/proxy_handler.js b/js/components/ascribe_routes/proxy_handler.js
index 52084e6b..882fe65c 100644
--- a/js/components/ascribe_routes/proxy_handler.js
+++ b/js/components/ascribe_routes/proxy_handler.js
@@ -17,7 +17,7 @@ const WHEN_ENUM = ['loggedIn', 'loggedOut'];
  *
  * @param {enum/string} options.when ('loggedIn' || 'loggedOut')
  */
-export function AuthRedirect({to, when}) {
+export function AuthRedirect({ to, when }) {
     // validate `when`, must be contained in `WHEN_ENUM`.
     // Throw an error otherwise.
     if (WHEN_ENUM.indexOf(when) === -1) {
@@ -80,8 +80,8 @@ export function ProxyHandler(...redirectFunctions) {
             displayName: 'ProxyHandler',
 
             propTypes: {
-                // Provided from AscribeApp
-                currentUser: React.PropTypes.object.isRequired,
+                // Provided from AscribeApp, after the routes have been initialized
+                currentUser: React.PropTypes.object,
                 whitelabel: React.PropTypes.object,
 
                 // Provided from router
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
index 6a59b8fc..5df3558c 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
@@ -84,6 +84,7 @@ let FileDragAndDropDialog = React.createClass({
                 dialogElement = [
                     this.getDragDialog(fileClassToUpload.plural),
                     (<span
+                        key='mutlipleFilesBtn'
                         className="btn btn-default"
                         onClick={onClick}>
                             {getLangText('choose %s to upload', fileClassToUpload.plural)}
@@ -96,6 +97,7 @@ let FileDragAndDropDialog = React.createClass({
                 dialogElement = [
                     this.getDragDialog(fileClassToUpload.singular),
                     (<span
+                        key='singleFileBtn'
                         className="btn btn-default"
                         onClick={onClick}>
                             {dialog}
diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index ff44b294..90a72157 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -487,7 +487,7 @@ const ReactS3FineUploader = React.createClass({
         return (enableLocalHashing && !uploadMethod) ||
                 !areAssetsEditable ||
                 (showErrorPrompt && errorState.errorClass) ||
-                (!multiple && filesToDisplay.length);
+                (!multiple && filesToDisplay.length > 0);
     },
 
     isFileValid(file) {

From 028058a12f01af117674b307991063985c4bc55d Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Mon, 8 Feb 2016 11:03:41 +0100
Subject: [PATCH 197/197] Small things that could only be fixed after merging

---
 js/components/ascribe_uploader/react_s3_fine_uploader.js | 4 +---
 js/constants/error_constants.js                          | 9 ++++++---
 js/constants/uploader_constants.js                       | 3 +++
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js
index 90a72157..cbdc6ab1 100644
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@@ -15,6 +15,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 
 import AppConstants from '../../constants/application_constants';
 import { ErrorClasses, testErrorAgainstAll } from '../../constants/error_constants';
+import { RETRY_ATTEMPT_TO_SHOW_CONTACT_US } from '../../constants/uploader_constants';
 
 import { displayValidFilesFilter, FileStatus, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
@@ -34,9 +35,6 @@ const { shape,
         element,
         arrayOf } = React.PropTypes;
 
-// After 5 manual retries, show the contact us prompt.
-const RETRY_ATTEMPT_TO_SHOW_CONTACT_US = 5;
-
 const ReactS3FineUploader = React.createClass({
     propTypes: {
         areAssetsDownloadable: bool,
diff --git a/js/constants/error_constants.js b/js/constants/error_constants.js
index 4df095ee..2baeaf10 100644
--- a/js/constants/error_constants.js
+++ b/js/constants/error_constants.js
@@ -1,5 +1,7 @@
 'use strict'
 
+import { validationParts } from './uploader_constants';
+
 import { deepMatchObject } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';
 
@@ -112,9 +114,10 @@ const ErrorClasses = {
 
         // Fallback error tips
         'largeFileSize': {
-            'prettifiedText': getLangText('We handle files up to 25GB but your Internet connection may not. With ' +
-                                          'large files and limited bandwith, it may take some time to complete. If ' +
-                                          'it doesn’t seem to progress at all, try restarting the process.')
+            'prettifiedText': getLangText(`We handle files up to ${validationParts.sizeLimit.default / 1000000000}GB ` +
+                                          'but your Internet connection may not. With large files and limited ' +
+                                          'bandwith, it may take some time to complete. If it doesn’t seem to ' +
+                                          'progress at all, try restarting the process.')
         },
         'tryDifferentBrowser': {
             'prettifiedText': getLangText("We're still having trouble uploading your file. It might be your " +
diff --git a/js/constants/uploader_constants.js b/js/constants/uploader_constants.js
index c2f8559b..ae7787fe 100644
--- a/js/constants/uploader_constants.js
+++ b/js/constants/uploader_constants.js
@@ -30,3 +30,6 @@ export const validationTypes = {
         sizeLimit: sizeLimit.thumbnail
     }
 };
+
+// Number of manual retries before showing a contact us screen on the uploader.
+export const RETRY_ATTEMPT_TO_SHOW_CONTACT_US = 5;