Merge branch 'AD-421-add-signup-functionality'

Conflicts:
	js/constants/api_urls.js
	js/constants/application_constants.js

js/app.js

@@ -15,15 +15,11 @@ let headers = {
     'Content-Type': 'application/json'
 };
 
-if (window.DEBUG) {
-    headers.Authorization = 'Basic ' + window.CREDENTIALS;
-}
-
 fetch.defaults({
     urlMap: ApiUrls,
     http: {
         headers: headers,
-        credentials: 'same-origin'
+        credentials: 'include'
     },
     fatalErrorHandler: (err) => {
         console.log(err);

js/components/ascribe_buttons/button_submit.js

@@ -0,0 +1,27 @@
+'use strict';
+
+import React from 'react';
+
+let ButtonSubmitOrClose = React.createClass({
+    propTypes: {
+        submitted: React.PropTypes.bool.isRequired,
+        text: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        if (this.props.submitted){
+            return (
+                <div className="modal-footer">
+                    <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                </div>
+            );
+        }
+        return (
+            <div className="modal-footer">
+                <button type="submit" className="btn btn-ascribe-inv">{this.props.text}</button>
+            </div>
+        );
+    }
+});
+
+export default ButtonSubmitOrClose;

js/components/ascribe_buttons/delete_button.js

@@ -49,7 +49,7 @@ let DeleteButton = React.createClass({
             btnDelete = <Button bsStyle="danger" bsSize="small">REMOVE FROM COLLECTION</Button>;
         }
         else{
-            return <div></div>;
+            return null;
         }
         return (
             <ModalWrapper

js/components/ascribe_forms/form_login.js

@@ -0,0 +1,63 @@
+'use strict';
+
+import React from 'react';
+
+import apiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+
+import SignupModal from '../ascribe_modal/modal_signup';
+import PasswordResetRequestModal from '../ascribe_modal/modal_password_request_reset';
+
+let LoginForm = React.createClass({
+    mixins: [FormMixin],
+
+
+    url() {
+        return apiUrls.users_login;
+    },
+    
+    getFormData() {
+        return {
+            email: this.refs.email.state.value,
+            password: this.refs.password.state.value
+        };
+    },
+    renderForm() {
+        return (
+            <form id="login_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="Email"
+                    required="required"
+                    type="email"
+                    submitted={this.state.submitted}/>
+                <InputText
+                    ref="password"
+                    placeHolder="Password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+                <div>
+                    Forgot your password&#63;
+                    <PasswordResetRequestModal
+                        button={<a className="button" href="#"> Reset password</a>}/>
+                </div>
+                <div>
+                    Not a member yet&#63;
+                    <SignupModal
+                        button={<a className="button" href="#"> Sign up</a>}/>
+                </div>
+                <ButtonSubmitOrClose
+                    text="LOGIN"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default LoginForm;

js/components/ascribe_forms/form_password_reset.js

@@ -0,0 +1,50 @@
+'use strict';
+
+import React from 'react';
+
+import apiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import ButtonSubmit from '../ascribe_buttons/button_submit';
+
+let PasswordResetForm = React.createClass({
+    mixins: [FormMixin],
+
+    url() {
+        return apiUrls.users_password_reset;
+    },
+
+    getFormData() {
+        return {
+            email: this.props.email,
+            token: this.props.token,
+            password: this.refs.password.state.value,
+            password_confirm: this.refs.password_confirm.state.value
+        };
+    },
+
+    renderForm() {
+        return (
+            <form id="reset_password_modal_content" role="form" onSubmit={this.submit}>
+                <div>Reset the password for {this.props.email}:</div>
+                <InputText
+                    ref="password"
+                    placeHolder="Choose a password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+                <InputText
+                    ref="password_confirm"
+                    placeHolder="Confirm password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+                <ButtonSubmit
+                    text="RESET PASSWORD"
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default PasswordResetForm;

js/components/ascribe_forms/form_password_reset_request.js

@@ -0,0 +1,41 @@
+'use strict';
+
+import React from 'react';
+
+import apiUrls from '../../constants/api_urls';
+import FormMixin from '../../mixins/form_mixin';
+import InputText from './input_text';
+import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+
+let PasswordResetRequestForm = React.createClass({
+    mixins: [FormMixin],
+
+    url() {
+        return apiUrls.users_password_reset_request;
+    },
+    
+    getFormData() {
+        return {
+            email: this.refs.email.state.value
+        };
+    },
+
+    renderForm() {
+        return (
+            <form id="request_reset_password_modal_content" role="form" onSubmit={this.submit}>
+                <InputText
+                    ref="email"
+                    placeHolder="Email"
+                    required="required"
+                    type="email"
+                    submitted={this.state.submitted}/>
+                <ButtonSubmitOrClose
+                    text="RESET PASSWORD"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default PasswordResetRequestForm;

js/components/ascribe_forms/form_signup.js

@@ -0,0 +1,79 @@
+'use strict';
+
+import React from 'react';
+
+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';
+
+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
+        };
+    },
+
+    renderForm() {
+        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="Email"
+                    required="required"
+                    type="email"
+                    submitted={this.state.submitted}/>
+                <InputText
+                    ref="password"
+                    placeHolder="Choose a password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+                <InputText
+                    ref="password_confirm"
+                    placeHolder="Confirm password"
+                    required="required"
+                    type="password"
+                    submitted={this.state.submitted}/>
+                <div>
+                    Your password must be at least 10 characters.
+                    This password is securing your digital property like a bank account.
+                    Store it in a safe place!
+                </div>
+                <InputCheckbox
+                    ref="terms"
+                    required="required"
+                    label={
+                        <div>
+                            I agree to the&nbsp;
+                            <a href="/terms" target="_blank"> Terms of Service</a>
+                        </div>}/>
+                <InputText
+                    ref="promo_code"
+                    placeHolder="Promocode (Optional)"
+                    required=""
+                    type="text"
+                    submitted={this.state.submitted}/>
+                <ButtonSubmitOrClose
+                    text="JOIN US"
+                    onClose={this.props.onRequestHide}
+                    submitted={this.state.submitted} />
+            </form>
+        );
+    }
+});
+
+export default SignupForm;

js/components/ascribe_modal/modal_login.js

@@ -0,0 +1,32 @@
+'use strict';
+
+import React from 'react';
+
+import ModalWrapper from './modal_wrapper';
+import LoginForm from '../ascribe_forms/form_login';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+let LoginModal = React.createClass({
+    handleLoginSuccess(){
+        this.props.handleSuccess();
+        let notificationText = 'Login successful';
+        let notification = new GlobalNotificationModel(notificationText, 'success');
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    render() {
+        return (
+            <ModalWrapper
+                button={this.props.button}
+                title='Log in to ascribe'
+                handleSuccess={this.handleLoginSuccess}
+                tooltip='Log in to ascribe'>
+                <LoginForm />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default LoginModal;

js/components/ascribe_modal/modal_password_request_reset.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+
+import ModalWrapper from './modal_wrapper';
+import PasswordResetRequestForm from '../ascribe_forms/form_password_reset_request';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+let PasswordResetRequestModal = React.createClass({
+    handleResetSuccess(){
+        let notificationText = 'Request succesfully sent, check your email';
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+    render() {
+        return (
+            <ModalWrapper
+                button={this.props.button}
+                title='Reset your password'
+                handleSuccess={this.handleResetSuccess}
+                tooltip='Reset your password'>
+                <PasswordResetRequestForm />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default PasswordResetRequestModal;

js/components/ascribe_modal/modal_signup.js

@@ -0,0 +1,31 @@
+'use strict';
+
+import React from 'react';
+
+import ModalWrapper from './modal_wrapper';
+import SignupForm from '../ascribe_forms/form_signup';
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+let SignupModal = React.createClass({
+    handleSignupSuccess(response){
+        let notificationText = 'We sent an email to your address ' + response.user.email + ', please confirm.';
+        let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+
+    render() {
+        return (
+            <ModalWrapper
+                button={this.props.button}
+                title='Create an account'
+                handleSuccess={this.handleSignupSuccess}
+                tooltip='Sign up to ascribe'>
+                <SignupForm />
+            </ModalWrapper>
+        );
+    }
+});
+
+export default SignupModal;

js/components/header.js

@@ -6,11 +6,19 @@ import Router from 'react-router';
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
+import apiUrls from '../constants/api_urls.js';
+import PieceListActions from '../actions/piece_list_actions';
+
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
+import NavItem from 'react-bootstrap/lib/NavItem';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
 
+import LoginModal from '../components/ascribe_modal/modal_login';
+import SignupModal from '../components/ascribe_modal/modal_signup';
+
+
 import { getLangText } from '../utils/lang_utils';
 
 let Link = Router.Link;
@@ -34,7 +42,34 @@ let Header = React.createClass({
         this.setState(state);
     },
 
+    refreshData(){
+        UserActions.fetchCurrentUser();
+        PieceListActions.fetchPieceList(1, 10);
+    },
     render() {
+        let account = null;
+        let signup = null;
+        if (this.state.currentUser.username){
+            account = (
+                <DropdownButton eventKey="1" title={this.state.currentUser.username}>
+                        <MenuItem eventKey="1" href="/art/account_settings/">{getLangText('Account Settings')}</MenuItem>
+                        <li className="divider"></li>
+                        <MenuItem eventKey="2" href="/art/faq/">{getLangText('FAQ')}</MenuItem>
+                        <MenuItem eventKey="3" href="/art/terms/">{getLangText('Terms of Service')}</MenuItem>
+                        <MenuItem divider />
+                        <MenuItem eventKey="4" href={apiUrls.users_logout}>{getLangText('Log out')}</MenuItem>
+                  </DropdownButton>
+            );
+        }
+        else {
+            account = (
+                <LoginModal
+                    button={<NavItem to="pieces">LOGIN</NavItem>}
+                    handleSuccess={this.refreshData}/>);
+            signup = (
+                <SignupModal
+                    button={<NavItem to="pieces">SIGNUP</NavItem>} />);
+        }
         return (
             <Navbar>
                 <Nav>
@@ -44,14 +79,8 @@ let Header = React.createClass({
                     </Link>
                 </Nav>
                 <Nav right>
-                    <DropdownButton eventKey="1" title={this.state.currentUser.username}>
-                        <MenuItem eventKey="1" href="/art/account_settings/">{getLangText('Account Settings')}</MenuItem>
-                        <li className="divider"></li>
-                        <MenuItem eventKey="2" href="/art/faq/">{getLangText('FAQ')}</MenuItem>
-                        <MenuItem eventKey="3" href="/art/terms/">{getLangText('Terms of Service')}</MenuItem>
-                        <MenuItem divider />
-                        <MenuItem eventKey="4" href="/api/users/logout/">{getLangText('Log out')}</MenuItem>
-                  </DropdownButton>
+                    {account}
+                    {signup}
                 </Nav>
             </Navbar>
         );

js/components/login_modal_handler.js

@@ -0,0 +1,42 @@
+'use strict';
+
+import React from 'react';
+
+import Button from 'react-bootstrap/lib/Button';
+import Modal from 'react-bootstrap/lib/Modal';
+import OverlayMixin from 'react-bootstrap/lib/OverlayMixin';
+
+let LoginModalHandler = React.createClass({
+  mixins: [OverlayMixin],
+
+  getInitialState() {
+    return {
+      isModalOpen: true
+    };
+  },
+
+  handleToggle() {
+    this.setState({
+      isModalOpen: !this.state.isModalOpen
+    });
+  },
+
+  render() {
+    if (!this.state.isModalOpen || !(this.props.query.login === '')) {
+      return <span/>;
+    }
+
+    return (
+      <Modal title='Modal heading' onRequestHide={this.handleToggle}>
+        <div className='modal-body'>
+          This modal is controlled by our custom trigger component.
+        </div>
+        <div className='modal-footer'>
+          <Button onClick={this.handleToggle}>Close</Button>
+        </div>
+      </Modal>
+    );
+  }
+});
+
+export default LoginModalHandler;

js/components/password_reset_container.js

@@ -0,0 +1,30 @@
+'use strict';
+
+import React from 'react';
+import Router from 'react-router';
+
+import PasswordResetForm from './ascribe_forms/form_password_reset';
+
+import GlobalNotificationModel from '../models/global_notification_model';
+import GlobalNotificationActions from '../actions/global_notification_actions';
+
+let PasswordResetContainer = React.createClass({
+    mixins: [Router.Navigation],
+
+    handleSuccess(){
+        this.transitionTo('pieces');
+        let notification = new GlobalNotificationModel('password succesfully updated', 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+    },
+    render() {
+        return (
+            <PasswordResetForm
+                email={this.props.query.email}
+                token={this.props.query.token}
+                handleSuccess={this.handleSuccess}
+            />
+      );
+  }
+});
+
+export default PasswordResetContainer;

js/constants/api_urls.js

@@ -3,26 +3,31 @@
 import AppConstants from './application_constants';
 
 let apiUrls = {
-    'user': AppConstants.apiEndpoint + 'users/',
-    'piece': AppConstants.apiEndpoint + 'pieces/${piece_id}',
-    'pieces_list': AppConstants.apiEndpoint + 'pieces/',
-    'piece_extradata': AppConstants.apiEndpoint + 'pieces/${piece_id}/extradata/',
     'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/',
-    'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
     'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
     'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
-    'ownership_shares_mail': AppConstants.apiEndpoint + 'ownership/shares/mail/',
-    'ownership_transfers': AppConstants.apiEndpoint + 'ownership/transfers/',
+    'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
+    'note_notes': AppConstants.apiEndpoint + 'note/notes/',
     'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/',
     'ownership_consigns_confirm': AppConstants.apiEndpoint + 'ownership/consigns/confirm/',
     'ownership_consigns_deny': AppConstants.apiEndpoint + 'ownership/consigns/deny/',
-    'ownership_unconsigns': AppConstants.apiEndpoint + 'ownership/unconsigns/',
-    'ownership_unconsigns_request': AppConstants.apiEndpoint + 'ownership/unconsigns/request/',
-    'ownership_unconsigns_deny': AppConstants.apiEndpoint + 'ownership/unconsigns/deny/',
     'ownership_loans': AppConstants.apiEndpoint + 'ownership/loans/',
     'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/confirm/',
     'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/deny/',
-    'note_notes': AppConstants.apiEndpoint + 'note/notes/'
+    'ownership_shares_mail': AppConstants.apiEndpoint + 'ownership/shares/mail/',
+    'ownership_transfers': AppConstants.apiEndpoint + 'ownership/transfers/',
+    'ownership_unconsigns': AppConstants.apiEndpoint + 'ownership/unconsigns/',
+    'ownership_unconsigns_deny': AppConstants.apiEndpoint + 'ownership/unconsigns/deny/',
+    'ownership_unconsigns_request': AppConstants.apiEndpoint + 'ownership/unconsigns/request/',
+    'piece': AppConstants.apiEndpoint + 'pieces/${piece_id}',
+    'piece_extradata': AppConstants.apiEndpoint + 'pieces/${piece_id}/extradata/',
+    'pieces_list': AppConstants.apiEndpoint + 'pieces/',
+    'user': AppConstants.apiEndpoint + 'users/',
+    'users_login': AppConstants.apiEndpoint + 'users/login/',
+    'users_logout': AppConstants.apiEndpoint + 'users/logout/',
+    'users_password_reset': AppConstants.apiEndpoint + 'users/reset_password/',
+    'users_password_reset_request': AppConstants.apiEndpoint + 'users/request_reset_password/',
+    'users_signup': AppConstants.apiEndpoint + 'users/'
 };
 
 export default apiUrls;

js/constants/application_constants.js

@@ -5,11 +5,11 @@ let constants = {
 
     //FIXME: referring to a global variable in `window` is not
     //       super pro. What if we render stuff on the server?
-    'baseUrl': window.BASE_URL,
+    //'baseUrl': window.BASE_URL,
     'apiEndpoint': window.API_ENDPOINT,
-    'debugCredentialBase64': 'ZGltaUBtYWlsaW5hdG9yLmNvbTowMDAwMDAwMDAw', // dimi@mailinator:0000000000
+    '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']
 };
 
 export default constants;

js/routes.js

@@ -6,8 +6,9 @@ import Router from 'react-router';
 import AscribeApp from './components/ascribe_app';
 import PieceList from './components/piece_list';
 import EditionContainer from './components/edition_container';
-
+import PasswordResetContainer from './components/password_reset_container';
 import AppConstants from './constants/application_constants';
+//import LoginModalHandler from './components/login_modal_handler';
 
 let Route = Router.Route;
 let Redirect = Router.Redirect;
@@ -18,6 +19,7 @@ let routes = (
     <Route name="app" path={baseUrl} handler={AscribeApp}>
         <Route name="pieces" path="collection" handler={PieceList} />
         <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
+        <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
 
         <Redirect from={baseUrl} to="pieces" />
         <Redirect from={baseUrl + '/'} to="pieces" />

js/stores/edition_list_store.js

@@ -75,4 +75,4 @@ class EditionListStore {
     }
 }
 
-export default alt.createStore(EditionListStore, 'EditionListStore');
+export default alt.createStore(EditionListStore, 'EditionListStore');