From d5ea4e515d8cedf0cd50ed0a26eaf98343fbcf4b Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Fri, 10 Jul 2015 16:43:35 +0200
Subject: [PATCH 1/8] Use distinct routers for different apps

---
 js/app.js                                     | 40 +++++++++++++++----
 js/components/routes.js                       | 25 ++++++++++++
 js/components/whitelabel/prize/app.js         | 24 +++++++++++
 .../whitelabel/prize/components/landing.js    | 15 +++++++
 js/components/whitelabel/prize/routes.js      | 26 ++++++++++++
 js/routes.js                                  | 27 ++++++++++---
 6 files changed, 144 insertions(+), 13 deletions(-)
 create mode 100644 js/components/routes.js
 create mode 100644 js/components/whitelabel/prize/app.js
 create mode 100644 js/components/whitelabel/prize/components/landing.js
 create mode 100644 js/components/whitelabel/prize/routes.js

diff --git a/js/app.js b/js/app.js
index a54f01d9..38fcbd40 100644
--- a/js/app.js
+++ b/js/app.js
@@ -8,7 +8,7 @@ import Router from 'react-router';
 import fetch from 'isomorphic-fetch';
 
 import ApiUrls from './constants/api_urls';
-import routes from './routes';
+import getRoutes from './routes';
 import requests from './utils/requests';
 
 let headers = {
@@ -28,9 +28,35 @@ requests.defaults({
     }
 });
 
-Router.run(routes, Router.HistoryLocation, (AscribeApp) => {
-    React.render(
-        <AscribeApp />,
-        document.getElementById('main')
-    );
-});
+
+class AppGateway {
+
+    start() {
+        let subdomain = window.location.host.split('.')[0];
+        requests.get('whitelabel_settings', {'subdomain': subdomain})
+            .then(this.loadSubdomain.bind(this))
+            .catch(this.loadDefault.bind(this));
+    }
+
+    loadSubdomain(data) {
+        let settings = data.whitelabel;
+
+        this.load('prize');
+    }
+
+    loadDefault() {
+        this.load('default');
+    }
+
+    load(type) {
+        Router.run(getRoutes(type), Router.HistoryLocation, (App) => {
+            React.render(
+                <App />,
+                document.getElementById('main')
+            );
+        });
+    }
+}
+
+let ag = new AppGateway();
+ag.start();
diff --git a/js/components/routes.js b/js/components/routes.js
new file mode 100644
index 00000000..431d02fb
--- /dev/null
+++ b/js/components/routes.js
@@ -0,0 +1,25 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import App from './ascribe_app';
+import AppConstants from '../constants/application_constants';
+
+let Route = Router.Route;
+let Redirect = Router.Redirect;
+let baseUrl = AppConstants.baseUrl;
+
+
+function getRoutes(commonRoutes) {
+    return (
+        <Route name="app" path={baseUrl} handler={App}>
+            {commonRoutes}
+            <Redirect from={baseUrl} to="login" />
+            <Redirect from={baseUrl + '/'} to="login" />
+        </Route>
+    );
+}
+
+
+export default getRoutes;
diff --git a/js/components/whitelabel/prize/app.js b/js/components/whitelabel/prize/app.js
new file mode 100644
index 00000000..c2ca7993
--- /dev/null
+++ b/js/components/whitelabel/prize/app.js
@@ -0,0 +1,24 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+import Footer from '../../footer';
+import GlobalNotification from '../../global_notification';
+
+let RouteHandler = Router.RouteHandler;
+
+
+let PrizeApp = React.createClass({
+    render() {
+        return (
+            <div>
+                <RouteHandler />
+                <Footer />
+                <GlobalNotification />
+                <div id="modal" className="container"></div>
+            </div>
+        );
+    }
+});
+
+export default PrizeApp;
diff --git a/js/components/whitelabel/prize/components/landing.js b/js/components/whitelabel/prize/components/landing.js
new file mode 100644
index 00000000..e4fb2df8
--- /dev/null
+++ b/js/components/whitelabel/prize/components/landing.js
@@ -0,0 +1,15 @@
+'use strict';
+
+import React from 'react';
+
+let Landing = React.createClass({
+    render() {
+        return (
+            <div>
+                Hello from landing
+            </div>
+        );
+    }
+});
+
+export default Landing;
diff --git a/js/components/whitelabel/prize/routes.js b/js/components/whitelabel/prize/routes.js
new file mode 100644
index 00000000..e5abb074
--- /dev/null
+++ b/js/components/whitelabel/prize/routes.js
@@ -0,0 +1,26 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import Landing from './components/landing';
+
+import App from './app';
+import AppConstants from '../../../constants/application_constants';
+
+let Route = Router.Route;
+// let Redirect = Router.Redirect;
+let baseUrl = AppConstants.baseUrl;
+
+
+function getRoutes(commonRoutes) {
+    return (
+        <Route name="app" path={baseUrl} handler={App}>
+            <Route name="landing" path="/" handler={Landing} />
+            {commonRoutes}
+        </Route>
+    );
+}
+
+
+export default getRoutes;
diff --git a/js/routes.js b/js/routes.js
index db8ed171..0da2f6de 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -4,6 +4,10 @@ import React from 'react';
 import Router from 'react-router';
 
 import AscribeApp from './components/ascribe_app';
+
+import getPrizeRoutes from './components/whitelabel/prize/routes';
+import getDefaultRoutes from './components/routes';
+
 import PieceList from './components/piece_list';
 import PieceContainer from './components/ascribe_detail/piece_container';
 import EditionContainer from './components/ascribe_detail/edition_container';
@@ -22,8 +26,9 @@ let Route = Router.Route;
 let Redirect = Router.Redirect;
 let baseUrl = AppConstants.baseUrl;
 
-let routes = (
-    <Route name="app" path={baseUrl} handler={AscribeApp}>
+
+const COMMON_ROUTES = (
+    <Route>
         <Route name="signup" path="signup" handler={SignupContainer} />
         <Route name="login" path="login" handler={LoginContainer} />
         <Route name="pieces" path="collection" handler={PieceList} />
@@ -33,10 +38,20 @@ let routes = (
         <Route name="register_piece" path="register_piece" handler={RegisterPiece} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
-
-        <Redirect from={baseUrl} to="login" />
-        <Redirect from={baseUrl + '/'} to="login" />
     </Route>
 );
 
-export default routes;
+
+function getRoutes(type) {
+    let routes = null;
+    if (type === 'prize') {
+        routes = getPrizeRoutes(COMMON_ROUTES);
+    } else {
+        routes = getDefaultRoutes(COMMON_ROUTES);
+    }
+
+    return routes;
+}
+
+
+export default getRoutes;

From df5295dffd11a69e7e76e09dbebcbecce5e60db8 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Fri, 10 Jul 2015 18:21:42 +0200
Subject: [PATCH 2/8] Cleanup and reorder routes

---
 js/app.js                                | 2 +-
 js/components/ascribe_app.js             | 2 +-
 js/components/routes.js                  | 2 +-
 js/components/whitelabel/prize/routes.js | 1 -
 js/routes.js                             | 5 -----
 5 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/js/app.js b/js/app.js
index 38fcbd40..7d627c82 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,6 +1,6 @@
 'use strict';
 
-require("babel/polyfill");
+require('babel/polyfill');
 
 import React from 'react';
 import Router from 'react-router';
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index 9000094f..c34e3462 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -6,7 +6,7 @@ import Header from '../components/header';
 import Footer from '../components/footer';
 import GlobalNotification from './global_notification';
 
-let Link = Router.Link;
+// let Link = Router.Link;
 let RouteHandler = Router.RouteHandler;
 
 
diff --git a/js/components/routes.js b/js/components/routes.js
index 431d02fb..8b230a5a 100644
--- a/js/components/routes.js
+++ b/js/components/routes.js
@@ -14,9 +14,9 @@ let baseUrl = AppConstants.baseUrl;
 function getRoutes(commonRoutes) {
     return (
         <Route name="app" path={baseUrl} handler={App}>
-            {commonRoutes}
             <Redirect from={baseUrl} to="login" />
             <Redirect from={baseUrl + '/'} to="login" />
+            {commonRoutes}
         </Route>
     );
 }
diff --git a/js/components/whitelabel/prize/routes.js b/js/components/whitelabel/prize/routes.js
index e5abb074..6003a698 100644
--- a/js/components/whitelabel/prize/routes.js
+++ b/js/components/whitelabel/prize/routes.js
@@ -9,7 +9,6 @@ import App from './app';
 import AppConstants from '../../../constants/application_constants';
 
 let Route = Router.Route;
-// let Redirect = Router.Redirect;
 let baseUrl = AppConstants.baseUrl;
 
 
diff --git a/js/routes.js b/js/routes.js
index 0da2f6de..3dbc6ca8 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -3,8 +3,6 @@
 import React from 'react';
 import Router from 'react-router';
 
-import AscribeApp from './components/ascribe_app';
-
 import getPrizeRoutes from './components/whitelabel/prize/routes';
 import getDefaultRoutes from './components/routes';
 
@@ -19,12 +17,9 @@ import PasswordResetContainer from './components/password_reset_container';
 import SettingsContainer from './components/settings_container';
 import CoaVerifyContainer from './components/coa_verify_container';
 
-import AppConstants from './constants/application_constants';
 import RegisterPiece from './components/register_piece';
 
 let Route = Router.Route;
-let Redirect = Router.Redirect;
-let baseUrl = AppConstants.baseUrl;
 
 
 const COMMON_ROUTES = (

From 33d599b9235e574800e20cf465c19176a570fe5a Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Fri, 10 Jul 2015 18:45:26 +0200
Subject: [PATCH 3/8] Start to work on custom landing

---
 js/components/whitelabel/prize/app.js               |  2 +-
 .../whitelabel/prize/components/landing.js          | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/js/components/whitelabel/prize/app.js b/js/components/whitelabel/prize/app.js
index c2ca7993..cd6928de 100644
--- a/js/components/whitelabel/prize/app.js
+++ b/js/components/whitelabel/prize/app.js
@@ -11,7 +11,7 @@ let RouteHandler = Router.RouteHandler;
 let PrizeApp = React.createClass({
     render() {
         return (
-            <div>
+            <div class="whitelabel-prize">
                 <RouteHandler />
                 <Footer />
                 <GlobalNotification />
diff --git a/js/components/whitelabel/prize/components/landing.js b/js/components/whitelabel/prize/components/landing.js
index e4fb2df8..9890c1a6 100644
--- a/js/components/whitelabel/prize/components/landing.js
+++ b/js/components/whitelabel/prize/components/landing.js
@@ -1,12 +1,23 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
+
+let Link = Router.Link;
+
 
 let Landing = React.createClass({
     render() {
         return (
             <div>
-                Hello from landing
+                <div class="hero">
+                    Yay art prize!
+                </div>
+
+                <div class="buttons">
+                    <Link to="login">Login</Link>
+                    <Link to="signup">Signup</Link>
+                </div>
             </div>
         );
     }

From 3fbe60692e0c15b871c8ec653d14bac23d41a6d0 Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 13 Jul 2015 14:29:20 +0200
Subject: [PATCH 4/8] Working on landing

---
 index.html                                    |  2 +-
 js/app.js                                     |  3 ++-
 js/components/ascribe_app.js                  |  2 +-
 js/components/whitelabel/prize/app.js         |  5 ++---
 .../whitelabel/prize/components/landing.js    | 22 ++++++++++++++-----
 js/constants/application_constants.js         |  5 ++++-
 sass/ascribe_app.scss                         |  5 +++++
 sass/main.scss                                | 14 ++++++++----
 sass/whitelabel/index.scss                    |  1 +
 sass/whitelabel/prize/index.scss              |  1 +
 sass/whitelabel/prize/landing.scss            | 16 ++++++++++++++
 11 files changed, 59 insertions(+), 17 deletions(-)
 create mode 100644 sass/ascribe_app.scss
 create mode 100644 sass/whitelabel/index.scss
 create mode 100644 sass/whitelabel/prize/index.scss
 create mode 100644 sass/whitelabel/prize/landing.scss

diff --git a/index.html b/index.html
index af9deda9..d5fe491e 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         </script>
     </head>
     <body>
-        <div id="main" class="container"></div>
+        <div id="main"></div>
         <script src="<%= BASE_URL %>static/js/app.js"></script>
     </body>
 </html>
diff --git a/js/app.js b/js/app.js
index 7d627c82..15942bb4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -8,6 +8,7 @@ import Router from 'react-router';
 import fetch from 'isomorphic-fetch';
 
 import ApiUrls from './constants/api_urls';
+import constants from './constants/application_constants';
 import getRoutes from './routes';
 import requests from './utils/requests';
 
@@ -40,7 +41,7 @@ class AppGateway {
 
     loadSubdomain(data) {
         let settings = data.whitelabel;
-
+        constants.whitelabel = settings;
         this.load('prize');
     }
 
diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js
index c34e3462..b4a894a3 100644
--- a/js/components/ascribe_app.js
+++ b/js/components/ascribe_app.js
@@ -13,7 +13,7 @@ let RouteHandler = Router.RouteHandler;
 let AscribeApp = React.createClass({
     render() {
         return (
-            <div>
+            <div className="container ascribe-default-app">
                 <Header />
                 <RouteHandler />
                 <Footer />
diff --git a/js/components/whitelabel/prize/app.js b/js/components/whitelabel/prize/app.js
index cd6928de..4cb6a75a 100644
--- a/js/components/whitelabel/prize/app.js
+++ b/js/components/whitelabel/prize/app.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Router from 'react-router';
-import Footer from '../../footer';
+// import Footer from '../../footer';
 import GlobalNotification from '../../global_notification';
 
 let RouteHandler = Router.RouteHandler;
@@ -11,9 +11,8 @@ let RouteHandler = Router.RouteHandler;
 let PrizeApp = React.createClass({
     render() {
         return (
-            <div class="whitelabel-prize">
+            <div className="whitelabel-prize">
                 <RouteHandler />
-                <Footer />
                 <GlobalNotification />
                 <div id="modal" className="container"></div>
             </div>
diff --git a/js/components/whitelabel/prize/components/landing.js b/js/components/whitelabel/prize/components/landing.js
index 9890c1a6..13747d7b 100644
--- a/js/components/whitelabel/prize/components/landing.js
+++ b/js/components/whitelabel/prize/components/landing.js
@@ -2,21 +2,31 @@
 
 import React from 'react';
 import Router from 'react-router';
+import constants from '../../../../constants/application_constants';
 
-let Link = Router.Link;
+import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
+import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
 
 let Landing = React.createClass({
     render() {
         return (
             <div>
-                <div class="hero">
-                    Yay art prize!
+                <div className="hero">
+                    <img className="logo" src={constants.whitelabel.logo} alt="Sluice Art Prize" />
+                    <h1>Sluice Art Prize 2015</h1>
                 </div>
 
-                <div class="buttons">
-                    <Link to="login">Login</Link>
-                    <Link to="signup">Signup</Link>
+                <div className="container">
+                    <ButtonGroup className="enter" bsSize="large" vertical block>
+                        <ButtonLink to="signup">
+                            Signup
+                        </ButtonLink>
+
+                        <ButtonLink to="login">
+                            Login
+                        </ButtonLink>
+                    </ButtonGroup>
                 </div>
             </div>
         );
diff --git a/js/constants/application_constants.js b/js/constants/application_constants.js
index 0c7a5893..61955469 100644
--- a/js/constants/application_constants.js
+++ b/js/constants/application_constants.js
@@ -10,7 +10,10 @@ let constants = {
     'serverUrl': window.SERVER_URL,
     'baseUrl': window.BASE_URL,
     'aclList': ['edit', 'consign', 'consign_request', 'unconsign', 'unconsign_request', 'transfer',
-                'loan', 'loan_request', 'share', 'download', 'view', 'delete', 'del_from_collection', 'add_to_collection']
+                'loan', 'loan_request', 'share', 'download', 'view', 'delete', 'del_from_collection', 'add_to_collection'],
+
+    // in case of whitelabel cusomization, we store stuff here
+    'whitelabel': {}
 };
 
 export default constants;
diff --git a/sass/ascribe_app.scss b/sass/ascribe_app.scss
new file mode 100644
index 00000000..ed811263
--- /dev/null
+++ b/sass/ascribe_app.scss
@@ -0,0 +1,5 @@
+.ascribe-default-app {
+    background-color: #FDFDFD;
+    border-radius: 0;
+    padding-top: 70px;
+}
diff --git a/sass/main.scss b/sass/main.scss
index df8b4285..4fc1ee6d 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -11,6 +11,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_theme';
 @import './ascribe-fonts/style';
 @import './ascribe-fonts/ascribe-fonts';
+@import 'ascribe_app';
 @import 'ascribe_login';
 @import 'ascribe_table';
 @import 'ascribe_accordion_list';
@@ -28,10 +29,11 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_slides_container';
 @import 'ascribe_form';
 
-body {
-    background-color: #FDFDFD;
-    border-radius: 0;
-    margin-top: 70px;
+@import 'whitelabel/index';
+
+
+html, body {
+    height: 100%;
 }
 
 html {
@@ -42,6 +44,10 @@ hr {
     margin-bottom: 15px;
 }
 
+#main {
+    height: 100%;
+}
+
 .hidden {
     display: none;
 }
diff --git a/sass/whitelabel/index.scss b/sass/whitelabel/index.scss
new file mode 100644
index 00000000..54b9f41e
--- /dev/null
+++ b/sass/whitelabel/index.scss
@@ -0,0 +1 @@
+@import 'prize/index';
diff --git a/sass/whitelabel/prize/index.scss b/sass/whitelabel/prize/index.scss
new file mode 100644
index 00000000..203c0985
--- /dev/null
+++ b/sass/whitelabel/prize/index.scss
@@ -0,0 +1 @@
+@import 'landing'
diff --git a/sass/whitelabel/prize/landing.scss b/sass/whitelabel/prize/landing.scss
new file mode 100644
index 00000000..968fee29
--- /dev/null
+++ b/sass/whitelabel/prize/landing.scss
@@ -0,0 +1,16 @@
+.whitelabel-prize {
+    .hero {
+        overflow: hidden;
+
+        .logo {
+            float: left;
+            padding-right: 2em;
+        }
+    }
+
+    .enter {
+
+    }
+}
+
+

From 8f07abc39b4cc5681b31c7999381a4de7e96cfba Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 13 Jul 2015 16:34:26 +0200
Subject: [PATCH 5/8] WIP

---
 js/components/whitelabel/prize/app.js          | 13 +++++++++++++
 .../whitelabel/prize/components/hero.js        | 18 ++++++++++++++++++
 .../whitelabel/prize/components/landing.js     | 13 +++----------
 js/components/whitelabel/prize/routes.js       |  1 +
 4 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 js/components/whitelabel/prize/components/hero.js

diff --git a/js/components/whitelabel/prize/app.js b/js/components/whitelabel/prize/app.js
index 4cb6a75a..a59f57a6 100644
--- a/js/components/whitelabel/prize/app.js
+++ b/js/components/whitelabel/prize/app.js
@@ -2,6 +2,8 @@
 
 import React from 'react';
 import Router from 'react-router';
+import Hero from './components/hero';
+import Header from '../../header';
 // import Footer from '../../footer';
 import GlobalNotification from '../../global_notification';
 
@@ -9,9 +11,20 @@ let RouteHandler = Router.RouteHandler;
 
 
 let PrizeApp = React.createClass({
+    mixins: [Router.State],
+
     render() {
+        let header = null;
+        if (this.isActive('pieces')) {
+            header = (
+                <Header />
+            );
+        }
+
         return (
             <div className="whitelabel-prize">
+                <Hero />
+                {header}
                 <RouteHandler />
                 <GlobalNotification />
                 <div id="modal" className="container"></div>
diff --git a/js/components/whitelabel/prize/components/hero.js b/js/components/whitelabel/prize/components/hero.js
new file mode 100644
index 00000000..101d599a
--- /dev/null
+++ b/js/components/whitelabel/prize/components/hero.js
@@ -0,0 +1,18 @@
+'use strict';
+
+import React from 'react';
+import constants from '../../../../constants/application_constants';
+
+
+let Hero = React.createClass({
+    render() {
+        return (
+            <div className="hero">
+                <img className="logo" src={constants.whitelabel.logo} alt="Sluice Art Prize" />
+                <h1>Sluice Art Prize 2015</h1>
+            </div>
+        );
+    }
+});
+
+export default Hero;
diff --git a/js/components/whitelabel/prize/components/landing.js b/js/components/whitelabel/prize/components/landing.js
index 13747d7b..b7f1fa95 100644
--- a/js/components/whitelabel/prize/components/landing.js
+++ b/js/components/whitelabel/prize/components/landing.js
@@ -2,30 +2,23 @@
 
 import React from 'react';
 import Router from 'react-router';
-import constants from '../../../../constants/application_constants';
 
 import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
 import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
 
+let Link = Router.Link;
 
 let Landing = React.createClass({
     render() {
         return (
             <div>
-                <div className="hero">
-                    <img className="logo" src={constants.whitelabel.logo} alt="Sluice Art Prize" />
-                    <h1>Sluice Art Prize 2015</h1>
-                </div>
-
                 <div className="container">
                     <ButtonGroup className="enter" bsSize="large" vertical block>
                         <ButtonLink to="signup">
-                            Signup
+                            Signup to the prize
                         </ButtonLink>
 
-                        <ButtonLink to="login">
-                            Login
-                        </ButtonLink>
+                        Already a user? <Link to="login">log in</Link>
                     </ButtonGroup>
                 </div>
             </div>
diff --git a/js/components/whitelabel/prize/routes.js b/js/components/whitelabel/prize/routes.js
index 6003a698..634fc531 100644
--- a/js/components/whitelabel/prize/routes.js
+++ b/js/components/whitelabel/prize/routes.js
@@ -16,6 +16,7 @@ function getRoutes(commonRoutes) {
     return (
         <Route name="app" path={baseUrl} handler={App}>
             <Route name="landing" path="/" handler={Landing} />
+
             {commonRoutes}
         </Route>
     );

From db1c6a530aec48273fe726766560c3b60b650d8a Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 13 Jul 2015 16:57:25 +0200
Subject: [PATCH 6/8] Refactor login/signup containers

---
 js/components/ascribe_forms/form_signup.js | 182 +++++++++++++--------
 js/components/login_container.js           | 115 +------------
 js/components/signup_container.js          | 133 +--------------
 3 files changed, 126 insertions(+), 304 deletions(-)

diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 9fa96d6d..258a3923 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -1,80 +1,132 @@
 'use strict';
 
 import React from 'react';
+import Router from 'react-router';
+
+import { getLangText } from '../../utils/lang_utils';
+
+import UserStore from '../../stores/user_store';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import Form from './form';
+import Property from './property';
+import FormPropertyHeader from './form_property_header';
+import InputCheckbox from './input_checkbox';
 
 import apiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
-import InputText from './input_text';
-import InputCheckbox from './input_checkbox';
-import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
-import { getLangText } from '../../utils/lang_utils.js'
+
 
 let SignupForm = React.createClass({
-    mixins: [FormMixin],
 
-    url() {
-        return apiUrls.users_signup;
-    },
-    
-    getFormData() {
-        return {
-            email: this.refs.email.state.value,
-            password: this.refs.password.state.value,
-            password_confirm: this.refs.password_confirm.state.value,
-            terms: this.refs.terms.state.value,
-            promo_code: this.refs.promo_code.state.value
-        };
+    propTypes: {
+        handleSuccess: React.PropTypes.func
     },
 
-    renderForm() {
+    mixins: [Router.Navigation],
+
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        UserStore.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) {
+            this.transitionTo('pieces');
+        }
+    },
+
+    handleSuccess(response){
+
+        let notificationText = getLangText('Sign up successful');
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+        this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email +
+                                 ', ' + getLangText('please confirm') + '.');
+
+    },
+    getFormData(){
+        return {terms: this.refs.form.refs.terms.refs.input.state.value};
+    },
+    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') + '!';
         return (
-            <form id="signup_modal_content" role="form" onSubmit={this.submit}>
-                <input className="invisible" type="email" name="fake_consignee"/>
-                <input className="invisible" type="password" name="fake_password"/>
-                <InputText
-                    ref="email"
-                    placeHolder={getLangText('Email')}
-                    required="required"
-                    type="email"
-                    submitted={this.state.submitted}/>
-                <InputText
-                    ref="password"
-                    placeHolder={getLangText('Choose a password')}
-                    required="required"
-                    type="password"
-                    submitted={this.state.submitted}/>
-                <InputText
-                    ref="password_confirm"
-                    placeHolder={getLangText('Confirm password')}
-                    required="required"
-                    type="password"
-                    submitted={this.state.submitted}/>
-                <div>
-                    {getLangText('Your password must be at least 10 characters')}.
-                    {getLangText('This password is securing your digital property like a bank account')}.
-                    {getLangText('Store it in a safe place')}!
-                </div>
-                <InputCheckbox
-                    ref="terms"
-                    required="required"
-                    label={
-                        <div>
-                            {getLangText('I agree to the')}&nbsp;
-                            <a href="/terms" target="_blank"> {getLangText('Terms of Service')}</a>
-                        </div>}/>
-                <InputText
-                    ref="promo_code"
-                    placeHolder={getLangText('Promocode (Optional)')}
-                    required=""
-                    type="text"
-                    submitted={this.state.submitted}/>
-                <ButtonSubmitOrClose
-                    text={getLangText('JOIN US')}
-                    onClose={this.props.onRequestHide}
-                    submitted={this.state.submitted} />
-            </form>
+            <Form
+                className="ascribe-form-bordered"
+                ref='form'
+                url={apiUrls.users_signup}
+                handleSuccess={this.handleSuccess}
+                getFormData={this.getFormData}
+                buttons={
+                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                        {getLangText('Sign up to ascribe')}
+                    </button>}
+                spinner={
+                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </button>
+                    }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Welcome to ascribe')}</h3>
+                </FormPropertyHeader>
+                <Property
+                    name='email'
+                    label={getLangText('Email')}>
+                    <input
+                        type="email"
+                        placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
+                        autoComplete="on"
+                        required/>
+                </Property>
+                <Property
+                    name='password'
+                    label={getLangText('Password')}
+                    tooltip={tooltipPassword}>
+                    <input
+                        type="password"
+                        placeholder={getLangText('Use a combination of minimum 10 chars and numbers')}
+                        autoComplete="on"
+                        required/>
+                </Property>
+                <Property
+                    name='password_confirm'
+                    label={getLangText('Confirm Password')}
+                    tooltip={tooltipPassword}>
+                    <input
+                        type="password"
+                        placeholder={getLangText('Enter your password once again')}
+                        autoComplete="on"
+                        required/>
+                </Property>
+                <Property
+                    name='promo_code'
+                    label={getLangText('Promocode')}>
+                    <input
+                        type="text"
+                        placeholder={getLangText('Enter a promocode here (Optional)')}/>
+                </Property>
+                <Property
+                    name="terms"
+                    className="ascribe-settings-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputCheckbox/>
+                </Property>
+            </Form>
         );
     }
 });
 
-export default SignupForm;
\ No newline at end of file
+export default SignupForm;
diff --git a/js/components/login_container.js b/js/components/login_container.js
index 1645e206..7832c17f 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -3,60 +3,24 @@
 import React from 'react';
 import Router 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 './ascribe_forms/form';
-import Property from './ascribe_forms/property';
-
-import apiUrls from '../constants/api_urls';
-import AppConstants from '../constants/application_constants';
+import LoginForm from './ascribe_forms/form_login';
 
 import { getLangText } from '../utils/lang_utils';
 
 let Link = Router.Link;
 
+
 let LoginContainer = React.createClass({
     propTypes: {
-        message: React.PropTypes.string,
-        redirectOnLoggedIn: React.PropTypes.bool,
-        redirectOnLoginSuccess: React.PropTypes.bool
+        message: React.PropTypes.string
     },
 
-    mixins: [Router.Navigation],
-
     getDefaultProps() {
         return {
-            message: getLangText('Enter') + ' ascribe',
-            redirectOnLoggedIn: true,
-            redirectOnLoginSuccess: true
+            message: getLangText('Enter') + ' ascribe'
         };
     },
 
-    getInitialState() {
-        return UserStore.getState();
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.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 && this.props.redirectOnLoggedIn) {
-            this.transitionTo('pieces');
-        }
-    },
-
     render() {
         return (
             <div className="ascribe-login-wrapper">
@@ -75,76 +39,5 @@ let LoginContainer = React.createClass({
 });
 
 
-let LoginForm = React.createClass({
-    propTypes: {
-        redirectOnLoginSuccess: React.PropTypes.bool
-    },
-
-    handleSuccess(){
-        let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-
-        // register_piece is waiting for a login success as login_container and it is wrapped
-        // in a slides_container component.
-        // The easiest way to check if the user was successfully logged in is to fetch the user
-        // in the user store (which is obviously only possible if the user is logged in), since
-        // register_piece is listening to the changes of the user_store.
-        UserActions.fetchCurrentUser();
-
-        /* Taken from http://stackoverflow.com/a/14916411 */
-        /*
-        We actually have to trick the Browser into showing the "save password" dialog
-        as Chrome expects the login page to be reloaded after the login.
-        Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
-        Until then, we redirect the HARD way, but reloading the whole page using window.location
-        */
-        if(this.props.redirectOnLoginSuccess) {
-            window.location = AppConstants.baseUrl + 'collection';
-        }
-    },
-
-    render() {
-        return (
-            <Form
-                ref="loginForm"
-                url={apiUrls.users_login}
-                handleSuccess={this.handleSuccess}
-                buttons={
-                    <button
-                        type="submit"
-                        className="btn ascribe-btn ascribe-btn-login">
-                        {getLangText('Enter')} ascribe
-                    </button>}
-                spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
-                    }>
-                <Property
-                    name='email'
-                    label={getLangText('Email')}>
-                    <input
-                        type="email"
-                        placeholder={getLangText('Enter your email')}
-                        autoComplete="on"
-                        name="username"
-                        required/>
-                </Property>
-                <Property
-                    name='password'
-                    label={getLangText('Password')}>
-                    <input
-                        type="password"
-                        placeholder={getLangText('Enter your password')}
-                        autoComplete="on"
-                        name="password"
-                        required/>
-                </Property>
-                <hr />
-            </Form>
-        );
-    }
-});
-
 
 export default LoginContainer;
diff --git a/js/components/signup_container.js b/js/components/signup_container.js
index 654b9c03..4824b891 100644
--- a/js/components/signup_container.js
+++ b/js/components/signup_container.js
@@ -1,50 +1,16 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
-
-import { mergeOptions } from '../utils/general_utils';
-import { getLangText } from '../utils/lang_utils';
-
-import UserStore from '../stores/user_store';
-
-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 FormPropertyHeader from './ascribe_forms/form_property_header';
-import InputCheckbox from './ascribe_forms/input_checkbox';
-
-
-import apiUrls from '../constants/api_urls';
+import SignupForm from './ascribe_forms/form_signup';
 
+// import { getLangText } from '../utils/lang_utils';
 
 let SignupContainer = React.createClass({
-    mixins: [Router.Navigation],
-
     getInitialState() {
-        return mergeOptions({
+        return {
             submitted: false,
             message: null
-        }, UserStore.getState());
-    },
-
-    componentDidMount() {
-        UserStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        UserStore.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) {
-            this.transitionTo('pieces');
-        }
+        };
     },
 
     handleSuccess(message){
@@ -75,93 +41,4 @@ let SignupContainer = React.createClass({
 });
 
 
-let SignupForm = React.createClass({
-    propTypes: {
-        handleSuccess: React.PropTypes.func
-    },
-
-    mixins: [Router.Navigation],
-
-    handleSuccess(response){
-
-        let notificationText = getLangText('Sign up successful');
-        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
-        GlobalNotificationActions.appendGlobalNotification(notification);
-        this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email +
-                                 ', ' + getLangText('please confirm') + '.');
-
-    },
-    getFormData(){
-        return {terms: this.refs.form.refs.terms.refs.input.state.value};
-    },
-    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') + '!';
-        return (
-            <Form
-                className="ascribe-form-bordered"
-                ref='form'
-                url={apiUrls.users_signup}
-                handleSuccess={this.handleSuccess}
-                getFormData={this.getFormData}
-                buttons={
-                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
-                        {getLangText('Sign up to ascribe')}
-                    </button>}
-                spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
-                    }>
-                <FormPropertyHeader>
-                    <h3>{getLangText('Welcome to ascribe')}</h3>
-                </FormPropertyHeader>
-                <Property
-                    name='email'
-                    label={getLangText('Email')}>
-                    <input
-                        type="email"
-                        placeholder={getLangText('(e.g. andy@warhol.co.uk)')}
-                        autoComplete="on"
-                        required/>
-                </Property>
-                <Property
-                    name='password'
-                    label={getLangText('Password')}
-                    tooltip={tooltipPassword}>
-                    <input
-                        type="password"
-                        placeholder={getLangText('Use a combination of minimum 10 chars and numbers')}
-                        autoComplete="on"
-                        required/>
-                </Property>
-                <Property
-                    name='password_confirm'
-                    label={getLangText('Confirm Password')}
-                    tooltip={tooltipPassword}>
-                    <input
-                        type="password"
-                        placeholder={getLangText('Enter your password once again')}
-                        autoComplete="on"
-                        required/>
-                </Property>
-                <Property
-                    name='promo_code'
-                    label={getLangText('Promocode')}>
-                    <input
-                        type="text"
-                        placeholder={getLangText('Enter a promocode here (Optional)')}/>
-                </Property>
-                <Property
-                    name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
-                    <InputCheckbox/>
-                </Property>
-            </Form>
-        );
-    }
-});
-
-export default SignupContainer;
\ No newline at end of file
+export default SignupContainer;

From 232a4ede921cc756caddc3c061447b487839964a Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Mon, 13 Jul 2015 16:59:12 +0200
Subject: [PATCH 7/8] Add form_login

---
 js/components/ascribe_forms/form_login.js | 123 ++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 js/components/ascribe_forms/form_login.js

diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
new file mode 100644
index 00000000..fbc2e80e
--- /dev/null
+++ b/js/components/ascribe_forms/form_login.js
@@ -0,0 +1,123 @@
+'use strict';
+
+import React from 'react';
+import Router 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';
+import Property from './property';
+
+import apiUrls from '../../constants/api_urls';
+import AppConstants from '../../constants/application_constants';
+
+import { getLangText } from '../../utils/lang_utils';
+
+
+let LoginForm = React.createClass({
+    propTypes: {
+        redirectOnLoggedIn: React.PropTypes.bool,
+        redirectOnLoginSuccess: React.PropTypes.bool
+    },
+
+    getDefaultProps() {
+        return {
+            redirectOnLoggedIn: true,
+            redirectOnLoginSuccess: true
+        };
+    },
+
+    mixins: [Router.Navigation],
+
+    getInitialState() {
+        return UserStore.getState();
+    },
+
+    componentDidMount() {
+        UserStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        UserStore.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 && this.props.redirectOnLoggedIn) {
+            this.transitionTo('pieces');
+        }
+    },
+
+    handleSuccess(){
+        let notification = new GlobalNotificationModel('Login successful', 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+
+        // register_piece is waiting for a login success as login_container and it is wrapped
+        // in a slides_container component.
+        // The easiest way to check if the user was successfully logged in is to fetch the user
+        // in the user store (which is obviously only possible if the user is logged in), since
+        // register_piece is listening to the changes of the user_store.
+        UserActions.fetchCurrentUser();
+
+        /* Taken from http://stackoverflow.com/a/14916411 */
+        /*
+        We actually have to trick the Browser into showing the "save password" dialog
+        as Chrome expects the login page to be reloaded after the login.
+        Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future.
+        Until then, we redirect the HARD way, but reloading the whole page using window.location
+        */
+        if(this.props.redirectOnLoginSuccess) {
+            window.location = AppConstants.baseUrl + 'collection';
+        }
+    },
+
+    render() {
+        return (
+            <Form
+                ref="loginForm"
+                url={apiUrls.users_login}
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <button
+                        type="submit"
+                        className="btn ascribe-btn ascribe-btn-login">
+                        {getLangText('Enter')} ascribe
+                    </button>}
+                spinner={
+                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </button>
+                    }>
+                <Property
+                    name='email'
+                    label={getLangText('Email')}>
+                    <input
+                        type="email"
+                        placeholder={getLangText('Enter your email')}
+                        autoComplete="on"
+                        name="username"
+                        required/>
+                </Property>
+                <Property
+                    name='password'
+                    label={getLangText('Password')}>
+                    <input
+                        type="password"
+                        placeholder={getLangText('Enter your password')}
+                        autoComplete="on"
+                        name="password"
+                        required/>
+                </Property>
+                <hr />
+            </Form>
+        );
+    }
+});
+
+export default LoginForm;

From 1f73811950a736c4db08b78c4b9ee131a0ba988b Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Mon, 13 Jul 2015 18:13:47 +0200
Subject: [PATCH 8/8] register form separate spinner => spans

---
 .../accordion_list_item_create_editions.js    |   4 +-
 js/components/ascribe_forms/form_login.js     |   8 +-
 .../ascribe_forms/form_register_piece.js      | 165 ++++++++++++++++++
 js/components/ascribe_forms/form_signup.js    |   4 +-
 js/components/coa_verify_container.js         |   4 +-
 js/components/login_container.js              |  10 +-
 js/components/password_reset_container.js     |   8 +-
 js/components/register_piece.js               | 147 +---------------
 8 files changed, 193 insertions(+), 157 deletions(-)
 create mode 100644 js/components/ascribe_forms/form_register_piece.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
index 30a6efbc..66fadd8d 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_create_editions.js
@@ -30,9 +30,9 @@ let AccordionListItemCreateEditions = React.createClass({
                     getFormData={this.getFormData}
                     handleSuccess={this.props.handleSuccess}
                     spinner={
-                        <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                             <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                        </button>
+                        </span>
                         }>
                     <Property
                         name='num_editions'
diff --git a/js/components/ascribe_forms/form_login.js b/js/components/ascribe_forms/form_login.js
index fbc2e80e..de483874 100644
--- a/js/components/ascribe_forms/form_login.js
+++ b/js/components/ascribe_forms/form_login.js
@@ -24,6 +24,8 @@ let LoginForm = React.createClass({
         redirectOnLoginSuccess: React.PropTypes.bool
     },
 
+    mixins: [Router.Navigation],
+
     getDefaultProps() {
         return {
             redirectOnLoggedIn: true,
@@ -31,8 +33,6 @@ let LoginForm = React.createClass({
         };
     },
 
-    mixins: [Router.Navigation],
-
     getInitialState() {
         return UserStore.getState();
     },
@@ -90,9 +90,9 @@ let LoginForm = React.createClass({
                         {getLangText('Enter')} ascribe
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <Property
                     name='email'
diff --git a/js/components/ascribe_forms/form_register_piece.js b/js/components/ascribe_forms/form_register_piece.js
new file mode 100644
index 00000000..41d0834f
--- /dev/null
+++ b/js/components/ascribe_forms/form_register_piece.js
@@ -0,0 +1,165 @@
+'use strict';
+
+import React from 'react';
+
+import AppConstants from '../../constants/application_constants';
+
+import Form from './form';
+import Property from './property';
+import FormPropertyHeader from './form_property_header';
+
+import apiUrls from '../../constants/api_urls';
+
+import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
+
+import { getCookie } from '../../utils/fetch_api_utils';
+import { getLangText } from '../../utils/lang_utils';
+
+
+let RegisterPieceForm = React.createClass({
+    getInitialState(){
+        return {
+            digitalWorkKey: null,
+            isUploadReady: false
+        };
+    },
+
+    getFormData(){
+        return {
+            digital_work_key: this.state.digitalWorkKey
+        };
+    },
+
+    submitKey(key){
+        this.setState({
+            digitalWorkKey: key
+        });
+    },
+
+    setIsUploadReady(isReady) {
+        this.setState({
+            isUploadReady: isReady
+        });
+    },
+
+    isReadyForFormSubmission(files) {
+        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+        if (files.length > 0 && files[0].status === 'upload successful') {
+            return true;
+        } else {
+            return false;
+        }
+    },
+
+    render() {
+        return (
+            <Form
+                className="ascribe-form-bordered"
+                ref='form'
+                url={apiUrls.pieces_list}
+                getFormData={this.getFormData}
+                handleSuccess={this.props.handleSuccess}
+                buttons={<button
+                            type="submit"
+                            className="btn ascribe-btn ascribe-btn-login"
+                            disabled={!this.state.isUploadReady}>
+                            {getLangText('Register work')}
+                        </button>}
+                spinner={
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                    </span>
+                    }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Register your work')}</h3>
+                </FormPropertyHeader>
+                <Property
+                    ignoreFocus={true}>
+                    <FileUploader
+                        submitKey={this.submitKey}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                        editable={this.props.isFineUploaderEditable}/>
+                </Property>
+                <Property
+                    name='artist_name'
+                    label={getLangText('Artist Name')}>
+                    <input
+                        type="text"
+                        placeholder="(e.g. Andy Warhol)"
+                        required/>
+                </Property>
+                <Property
+                    name='title'
+                    label={getLangText('Title')}>
+                    <input
+                        type="text"
+                        placeholder="(e.g. 32 Campbell's Soup Cans)"
+                        required/>
+                </Property>
+                <Property
+                    name='date_created'
+                    label={getLangText('Year Created')}>
+                    <input
+                        type="number"
+                        placeholder="(e.g. 1962)"
+                        min={0}
+                        required/>
+                </Property>
+                {this.props.children}
+            </Form>
+        );
+    }
+});
+
+let FileUploader = React.createClass({
+    propTypes: {
+        setIsUploadReady: React.PropTypes.func,
+        submitKey: React.PropTypes.func,
+        isReadyForFormSubmission: React.PropTypes.func,
+        onClick: React.PropTypes.func,
+        // editable is used to lock react fine uploader in case
+        // a user is actually not logged in already to prevent him from droping files
+        // before login in
+        editable: React.PropTypes.bool
+    },
+
+    render() {
+        return (
+            <ReactS3FineUploader
+                onClick={this.props.onClick}
+                keyRoutine={{
+                    url: AppConstants.serverUrl + 's3/key/',
+                    fileClass: 'digitalwork'
+                }}
+                createBlobRoutine={{
+                    url: apiUrls.blob_digitalworks
+                }}
+                submitKey={this.props.submitKey}
+                validation={{
+                    itemLimit: 100000,
+                    sizeLimit: '25000000000'
+                }}
+                setIsUploadReady={this.props.setIsUploadReady}
+                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
+                areAssetsDownloadable={false}
+                areAssetsEditable={this.props.editable}
+                signature={{
+                    endpoint: AppConstants.serverUrl + 's3/signature/',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
+                }}
+                deleteFile={{
+                    enabled: true,
+                    method: 'DELETE',
+                    endpoint: AppConstants.serverUrl + 's3/delete',
+                    customHeaders: {
+                       'X-CSRFToken': getCookie('csrftoken')
+                    }
+                }}/>
+        );
+    }
+});
+
+export default RegisterPieceForm;
\ No newline at end of file
diff --git a/js/components/ascribe_forms/form_signup.js b/js/components/ascribe_forms/form_signup.js
index 258a3923..3c50c7fd 100644
--- a/js/components/ascribe_forms/form_signup.js
+++ b/js/components/ascribe_forms/form_signup.js
@@ -75,9 +75,9 @@ let SignupForm = React.createClass({
                         {getLangText('Sign up to ascribe')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <FormPropertyHeader>
                     <h3>{getLangText('Welcome to ascribe')}</h3>
diff --git a/js/components/coa_verify_container.js b/js/components/coa_verify_container.js
index 6afbdfa5..8c2f2e77 100644
--- a/js/components/coa_verify_container.js
+++ b/js/components/coa_verify_container.js
@@ -68,9 +68,9 @@ let CoaVerifyForm = React.createClass({
                             {getLangText('Verify your Certificate of Authenticity')}
                         </button>}
                     spinner={
-                        <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                             <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                        </button>
+                        </span>
                         }>
                     <Property
                         name='message'
diff --git a/js/components/login_container.js b/js/components/login_container.js
index b3bfc3b4..90e0e37a 100644
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@@ -12,12 +12,16 @@ let Link = Router.Link;
 
 let LoginContainer = React.createClass({
     propTypes: {
-        message: React.PropTypes.string
+        message: React.PropTypes.string,
+        redirectOnLoggedIn: React.PropTypes.bool,
+        redirectOnLoginSuccess: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
-            message: getLangText('Enter') + ' ascribe'
+            message: getLangText('Enter') + ' ascribe',
+            redirectOnLoggedIn: true,
+            redirectOnLoginSuccess: true
         };
     },
 
@@ -26,6 +30,8 @@ let LoginContainer = React.createClass({
             <div className="ascribe-login-wrapper">
                 <br/>
                 <LoginForm
+                    redirectOnLoggedIn={this.props.redirectOnLoggedIn}
+                    redirectOnLoginSuccess={this.props.redirectOnLoginSuccess}
                     message={this.props.message} />
                 <div className="ascribe-login-text">
                     {getLangText('Not an ascribe user')}&#63; <Link to="signup">{getLangText('Sign up')}...</Link><br/>
diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index 5ab258b0..b149d45d 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -82,9 +82,9 @@ let PasswordRequestResetForm = React.createClass({
                         {getLangText('Reset your password')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <Property
                     name='email'
@@ -129,9 +129,9 @@ let PasswordResetForm = React.createClass({
                         {getLangText('Reset your password')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                    </button>
+                    </span>
                     }>
                 <Property
                     name='password'
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index cb3a7946..f0a59ab0 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -2,14 +2,10 @@
 
 import React from 'react';
 
-import DatePicker from 'react-datepicker/dist/react-datepicker';
-
 import Router from 'react-router';
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
 
-import AppConstants from '../constants/application_constants';
-
 import LicenseActions from '../actions/license_actions';
 import LicenseStore from '../stores/license_store';
 
@@ -21,17 +17,14 @@ import UserStore from '../stores/user_store';
 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 PropertyCollapsible from './ascribe_forms/property_collapsible';
-import FormPropertyHeader from './ascribe_forms/form_property_header';
+import RegisterPieceForm from './ascribe_forms/form_register_piece';
+//import FormPropertyHeader from './ascribe_forms/form_property_header';
 
 import LoginContainer from './login_container';
 import SlidesContainer from './ascribe_slides_container/slides_container';
 
-import apiUrls from '../constants/api_urls';
-
-import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
 
 import { mergeOptions } from '../utils/general_utils';
 import { getCookie } from '../utils/fetch_api_utils';
@@ -46,8 +39,6 @@ let RegisterPiece = React.createClass( {
             UserStore.getState(),
             PieceListStore.getState(),
             {
-                digitalWorkKey: null,
-                uploadStatus: false,
                 selectedLicense: 0,
                 isFineUploaderEditable: false
             });
@@ -97,32 +88,6 @@ let RegisterPiece = React.createClass( {
         this.transitionTo('piece', {pieceId: response.piece.id});
     },
 
-    getFormData(){
-        return {
-            digital_work_key: this.state.digitalWorkKey
-        };
-    },
-
-    submitKey(key){
-        this.setState({
-            digitalWorkKey: key
-        });
-    },
-
-    setIsUploadReady(isReady) {
-        this.setState({
-            isUploadReady: isReady
-        });
-    },
-
-    isReadyForFormSubmission(files) {
-        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
-        if (files.length > 0 && files[0].status === 'upload successful') {
-            return true;
-        } else {
-            return false;
-        }
-    },
     onLicenseChange(event){
         //console.log(this.state.licenses[event.target.selectedIndex].url);
         this.setState({selectedLicense: event.target.selectedIndex});
@@ -170,59 +135,9 @@ let RegisterPiece = React.createClass( {
                     onFocus={this.changeSlide}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
-                            <Form
-                                className="ascribe-form-bordered"
-                                ref='form'
-                                url={apiUrls.pieces_list}
-                                getFormData={this.getFormData}
-                                handleSuccess={this.handleSuccess}
-                                buttons={<button
-                                            type="submit"
-                                            className="btn ascribe-btn ascribe-btn-login"
-                                            disabled={!this.state.isUploadReady}>
-                                            {getLangText('Register work')}
-                                        </button>}
-                                spinner={
-                                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
-                                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
-                                    </button>
-                                    }>
-                                <FormPropertyHeader>
-                                    <h3>{getLangText('Register your work')}</h3>
-                                </FormPropertyHeader>
-                                <Property
-                                    ignoreFocus={true}>
-                                    <FileUploader
-                                        submitKey={this.submitKey}
-                                        setIsUploadReady={this.setIsUploadReady}
-                                        isReadyForFormSubmission={this.isReadyForFormSubmission}
-                                        editable={this.state.isFineUploaderEditable}/>
-                                </Property>
-                                <Property
-                                    name='artist_name'
-                                    label={getLangText('Artist Name')}>
-                                    <input
-                                        type="text"
-                                        placeholder="(e.g. Andy Warhol)"
-                                        required/>
-                                </Property>
-                                <Property
-                                    name='title'
-                                    label={getLangText('Title')}>
-                                    <input
-                                        type="text"
-                                        placeholder="(e.g. 32 Campbell's Soup Cans)"
-                                        required/>
-                                </Property>
-                                <Property
-                                    name='date_created'
-                                    label={getLangText('Year Created')}>
-                                    <input
-                                        type="number"
-                                        placeholder="(e.g. 1962)"
-                                        min={0}
-                                        required/>
-                                </Property>
+                            <RegisterPieceForm
+                                isFineUploaderEditable={this.state.isFineUploaderEditable}
+                                handleSuccess={this.handleSuccess}>
                                 <PropertyCollapsible
                                     checkboxLabel={getLangText('Specify editions')}>
                                     <span>{getLangText('Editions')}</span>
@@ -232,7 +147,7 @@ let RegisterPiece = React.createClass( {
                                         min={0}/>
                                 </PropertyCollapsible>
                                 {this.getLicenses()}
-                            </Form>
+                            </RegisterPieceForm>
                         </Col>
                     </Row>
                 </div>
@@ -248,54 +163,4 @@ let RegisterPiece = React.createClass( {
 });
 
 
-let FileUploader = React.createClass({
-    propTypes: {
-        setIsUploadReady: React.PropTypes.func,
-        submitKey: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func,
-        onClick: React.PropTypes.func,
-        // editable is used to lock react fine uploader in case
-        // a user is actually not logged in already to prevent him from droping files
-        // before login in
-        editable: React.PropTypes.bool
-    },
-
-    render() {
-        return (
-            <ReactS3FineUploader
-                onClick={this.props.onClick}
-                keyRoutine={{
-                    url: AppConstants.serverUrl + 's3/key/',
-                    fileClass: 'digitalwork'
-                }}
-                createBlobRoutine={{
-                    url: apiUrls.blob_digitalworks
-                }}
-                submitKey={this.props.submitKey}
-                validation={{
-                    itemLimit: 100000,
-                    sizeLimit: '25000000000'
-                }}
-                setIsUploadReady={this.props.setIsUploadReady}
-                isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                areAssetsDownloadable={false}
-                areAssetsEditable={this.props.editable}
-                signature={{
-                    endpoint: AppConstants.serverUrl + 's3/signature/',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie('csrftoken')
-                    }
-                }}
-                deleteFile={{
-                    enabled: true,
-                    method: 'DELETE',
-                    endpoint: AppConstants.serverUrl + 's3/delete',
-                    customHeaders: {
-                       'X-CSRFToken': getCookie('csrftoken')
-                    }
-                }}/>
-        );
-    }
-});
-
 export default RegisterPiece;