Merge pull request #163 from ascribe/demo-consignment-wallet

Add demo whitelabel page

README.md

@@ -35,6 +35,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
 127.0.0.1   23vivi.localhost.com
 127.0.0.1   polline.localhost.com
 127.0.0.1   artcity.localhost.com
+127.0.0.1   demo.localhost.com
 ```
 
 

js/components/whitelabel/wallet/components/demo/demo_landing.js

@@ -0,0 +1,67 @@
+'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 DemoLanding = React.createClass({
+    propTypes: {
+        // Provided from WalletApp
+        currentUser: React.PropTypes.object,
+        whitelabel: React.PropTypes.object.isRequired
+    },
+
+    componentWillMount() {
+        setDocumentTitle('Demo Marketplace');
+    },
+
+    render() {
+        return (
+            <div className="container ascribe-form-wrapper demo-landing">
+                <div className="row">
+                    <div className="col-xs-12">
+                        <div className="row demo-landing--header">
+                            <img className="demo-landing--header-logo" src={this.props.whitelabel.logo} />
+                            <div>
+                                {getLangText('Demo Art Marketplace is powered by') + ' '}
+                                <span className="icon-ascribe-logo" />
+                            </div>
+                        </div>
+                        <div className="row demo-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 DemoLanding;

js/components/whitelabel/wallet/constants/wallet_api_urls.js

@@ -18,7 +18,8 @@ function getWalletApiUrls(subdomain) {
             'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
         };
     } else if (subdomain === 'lumenus' || subdomain === '23vivi' ||
-               subdomain === 'polline' || subdomain === 'artcity') {
+               subdomain === 'polline' || subdomain === 'artcity' ||
+               subdomain === 'demo') {
         return {
             'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
             'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',

js/components/whitelabel/wallet/wallet_app.js

@@ -31,7 +31,7 @@ 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', 'polline', 'artcity']).includes(subdomain)) {
+            && (['cyland', 'ikonotv', 'lumenus', '23vivi', 'polline', 'artcity', 'demo']).includes(subdomain)) {
             header = (<div className="hero"/>);
         } else {
             header = (

js/components/whitelabel/wallet/wallet_routes.js

@@ -44,6 +44,8 @@ import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
 
 import PollineLanding from './components/polline/polline_landing';
 
+import DemoLanding from './components/demo/demo_landing';
+
 import ArtcityLanding from './components/artcity/artcity_landing';
 
 import WalletApp from './wallet_app';
@@ -425,6 +427,43 @@ let ROUTES = {
             <Route path='verify' component={CoaVerifyContainer} />
             <Route path='*' component={ErrorNotFoundPage} />
         </Route>
+    ),
+    'demo': (
+        <Route path='/' component={WalletApp}>
+            <IndexRoute component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(DemoLanding)} />
+            <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={getLangText('+ NEW WORK')}
+                aclName='acl_wallet_submit' />
+            <Route
+                path='collection'
+                component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
+                headerTitle={getLangText('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>
     )
 };
 

js/constants/application_constants.js

@@ -63,6 +63,11 @@ const constants = {
             'name': 'Artcity',
             'type': 'wallet'
         },
+        {
+            'subdomain': 'demo',
+            'name': 'Demo',
+            'type': 'wallet'
+        },
         {
             'subdomain': 'portfolioreview',
             'name': 'Portfolio Review',

sass/whitelabel/wallet/demo/demo_custom_style.scss

@@ -0,0 +1,385 @@
+$demo--fg-color: black;
+$demo--bg-color: white;
+$demo--nav-fg-prim-color: $demo--fg-color;
+$demo--nav-fg-sec-color: #3a3a3a;
+$demo--nav-bg-color: $demo--bg-color;
+$demo--nav-highlight-color: #f8f8f8;
+$demo--button-default-color: $demo--fg-color;
+$demo--highlight-color: #2882fa;
+
+
+.client--demo {
+    /** Landing page **/
+    .route--landing {
+        display: table;
+        min-height: 100vh;
+
+        > .container {
+            display: table-cell;
+            padding-bottom: 100px;
+            vertical-align: middle;
+        }
+
+        .hero {
+            display: none;
+        }
+
+        .demo-landing {
+            font-weight: normal;
+            text-align: center;
+        }
+
+        .demo-landing--header {
+            background-color: $demo--bg-color;
+            border: 1px solid darken($demo--bg-color, 20%);
+            color: $demo--fg-color;
+            padding: 2em;
+
+            .demo-landing--header-logo {
+                margin: 1em 0 2em 0;
+                height: 175px;
+            }
+        }
+
+        .demo-landing--content {
+            background-color: $demo--bg-color;
+            border: 1px solid darken($demo--bg-color, 20%);
+            border-top: none;
+            padding: 2em;
+        }
+    }
+
+    /** Navbar **/
+    .navbar-default {
+        background-color: $demo--bg-color;
+
+        .navbar-brand .img-brand {
+            height: 115%;
+        }
+
+        .navbar-brand .icon-ascribe-logo {
+            color: $demo--nav-fg-prim-color;
+            &:hover {
+                color: darken($demo--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: $demo--nav-fg-prim-color;
+    }
+
+    .navbar-nav > li > a:hover {
+        color: darken($demo--nav-fg-prim-color, 20%);
+    }
+
+    .navbar-nav > .active a,
+    .navbar-nav > .active a:hover,
+    .navbar-nav > .active a:focus {
+        background-color: $demo--nav-bg-color;
+        border-bottom-color: $demo--nav-fg-prim-color;
+        color: $demo--nav-fg-prim-color;
+    }
+
+    .navbar-nav > .open > a,
+    .dropdown-menu > .active > a,
+    .dropdown-menu > li > a {
+        color: $demo--nav-fg-prim-color;
+        background-color: $demo--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($demo--nav-fg-prim-color, 20%);
+        background-color: $demo--nav-highlight-color;
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.collapse.in {
+        background-color: $demo--nav-bg-color;
+
+        .navbar-nav > .open > a,
+        .navbar-nav > .active > a {
+            background-color: $demo--nav-highlight-color;
+        }
+    }
+
+    .navbar-collapse.collapsing li a,
+    .navbar-collapse.collapse.in li a {
+        color: $demo--nav-fg-prim-color;
+    }
+    .navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
+        color: lighten($demo--nav-fg-prim-color, 20%);
+        background-color: $demo--nav-highlight-color;
+    }
+
+    .navbar-toggle {
+        border-color: $demo--highlight-color;
+
+        .icon-bar {
+            background-color: $demo--highlight-color;
+        }
+    }
+
+    .navbar-toggle:hover,
+    .navbar-toggle:focus {
+        border-color: lighten($demo--highlight-color, 10%);
+        background-color: $demo--nav-fg-prim-color;
+
+        .icon-bar {
+            background-color: lighten($demo--highlight-color, 10%);
+        }
+    }
+
+    .notification-menu {
+        .dropdown-menu {
+            background-color: $demo--nav-bg-color;
+        }
+
+        .notification-header {
+            background-color: $demo--nav-fg-sec-color;
+            border-top-width: 0;
+            color: $demo--nav-bg-color;
+        }
+
+        .notification-action {
+            color: $demo--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($demo--button-default-color, 30%);
+        border-color: lighten($demo--button-default-color, 30%);
+    }
+
+    .btn-default {
+        background-color: $demo--button-default-color;
+        border-color: $demo--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: lighten($demo--button-default-color, 30%);
+            border-color: lighten($demo--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($demo--bg-color, 20%);
+        border-color: $demo--button-default-color;
+    }
+
+    .btn-secondary {
+        border-color: $demo--button-default-color;
+        color: $demo--button-default-color;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:active:hover,
+        &:active:focus,
+        &:active.focus,
+        &.active:hover,
+        &.active:focus,
+        &.active.focus {
+            background-color: $demo--button-default-color;
+            border-color: $demo--button-default-color;
+            color: $demo--bg-color;
+        }
+    }
+
+    .btn-tertiary {
+        &:hover,
+        &:active,
+        &ctive:hover,
+        &.active:hover{
+            background-color: $demo--highlight-color;
+            border-color: $demo--highlight-color;
+            color: $demo--bg-color;
+        }
+    }
+
+    /** Other components **/
+    .ascribe-piece-list-toolbar .btn-ascribe-add {
+        display: none;
+    }
+
+    .ascribe-footer {
+        display: none;
+    }
+
+    .ascribe-accordion-list-table-toggle:hover {
+        color: $demo--fg-color;
+    }
+
+    .request-action-badge {
+        color: $demo--fg-color;
+    }
+
+    .acl-information-dropdown-list .title {
+        color: $demo--fg-color;
+    }
+
+    // filter widget
+    .ascribe-piece-list-toolbar-widget button {
+        background-color: transparent !important;
+        border-color: transparent !important;
+        color: $demo--button-default-color !important;
+
+        &:hover,
+        &:active {
+            background-color: $demo--button-default-color !important;
+            border-color: $demo--button-default-color !important;
+            color: $demo--bg-color !important;
+        }
+    }
+
+    .icon-ascribe-search {
+        color: $demo--fg-color;
+    }
+
+    // forms
+    .ascribe-property-wrapper:hover {
+        border-left-color: rgba($demo--fg-color, 0.5);
+    }
+
+    .ascribe-property textarea,
+    .ascribe-property input,
+    .search-bar > .form-group > .input-group input {
+        &::-webkit-input-placeholder {
+            color: rgba($demo--fg-color, 0.5);
+        }
+        &::-moz-placeholder {
+            color: rgba($demo--fg-color, 0.5);
+        }
+        &:-ms-input-placeholder {
+            color: rgba($demo--fg-color, 0.5);
+        }
+        &:-moz-placeholder {
+            color: rgba($demo--fg-color, 0.5);
+        }
+    }
+
+    .ascribe-property {
+        > div,
+        > input,
+        > pre,
+        > select,
+        > span:not(.glyphicon),
+        > p,
+        > p > span,
+        > textarea {
+            color: $demo--fg-color;
+        }
+    }
+
+    // global notification
+    .ascribe-global-notification-success {
+        background-color: lighten($demo--fg-color, 20%);
+    }
+
+    // uploader progress
+    .ascribe-progress-bar > .progress-bar {
+        background-color: lighten($demo--fg-color, 20%);
+    }
+
+    .ascribe-progress-bar span {
+        text-shadow: -1px 0 lighten($demo--fg-color, 20%),
+                     0 1px lighten($demo--fg-color, 20%),
+                     1px 0 lighten($demo--fg-color, 20%),
+                     0 -1px lighten($demo--fg-color, 20%);
+    }
+
+    .action-file.icon-ascribe-ok,
+    .action-file.icon-ascribe-ok:hover {
+        color: lighten($demo--fg-color, 20%);
+    }
+
+    // spinner
+    .spinner-circle {
+        border-color: $demo--fg-color;
+    }
+    .spinner-inner {
+        display: none;
+    }
+    .btn-secondary .spinner-circle {
+        border-color: $demo--bg-color;
+    }
+
+    // video player
+    .ascribe-media-player .vjs-default-skin {
+        .vjs-play-progress,
+        .vjs-volume-level {
+            background-color: $demo--highlight-color;
+        }
+    }
+
+    // pager
+    .pager li > a,
+    .pager li > span {
+        background-color: $demo--fg-color;
+        border-color: $demo--fg-color;
+    }
+    .pager .disabled > a,
+    .pager .disabled > span {
+        background-color: $demo--fg-color !important;
+        border-color: $demo--fg-color;
+    }
+
+    // intercom
+    #intercom-container .intercom-launcher-button {
+        background-color: $demo--button-default-color !important;
+        border-color: $demo--button-default-color !important;
+    }
+}

sass/whitelabel/wallet/index.scss

@@ -4,6 +4,7 @@
 @import '23vivi/23vivi_custom_style';
 @import 'polline/polline_custom_style';
 @import 'artcity/artcity_custom_style';
+@import 'demo/demo_custom_style';
 
 .ascribe-wallet-app {
     border-radius: 0;