1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

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

Conflicts:
	js/constants/api_urls.js
	js/constants/application_constants.js
This commit is contained in:
vrde 2015-06-16 10:58:41 +02:00
commit a247e111c0
19 changed files with 487 additions and 30 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

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

View File

@ -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;

View File

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

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -6,11 +6,19 @@ import Router from 'react-router';
import UserActions from '../actions/user_actions'; import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store'; 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 Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar'; import Navbar from 'react-bootstrap/lib/Navbar';
import NavItem from 'react-bootstrap/lib/NavItem';
import DropdownButton from 'react-bootstrap/lib/DropdownButton'; import DropdownButton from 'react-bootstrap/lib/DropdownButton';
import MenuItem from 'react-bootstrap/lib/MenuItem'; 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'; import { getLangText } from '../utils/lang_utils';
let Link = Router.Link; let Link = Router.Link;
@ -34,7 +42,34 @@ let Header = React.createClass({
this.setState(state); this.setState(state);
}, },
refreshData(){
UserActions.fetchCurrentUser();
PieceListActions.fetchPieceList(1, 10);
},
render() { 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 ( return (
<Navbar> <Navbar>
<Nav> <Nav>
@ -44,14 +79,8 @@ let Header = React.createClass({
</Link> </Link>
</Nav> </Nav>
<Nav right> <Nav right>
<DropdownButton eventKey="1" title={this.state.currentUser.username}> {account}
<MenuItem eventKey="1" href="/art/account_settings/">{getLangText('Account Settings')}</MenuItem> {signup}
<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>
</Nav> </Nav>
</Navbar> </Navbar>
); );

View File

@ -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;

View File

@ -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;

View File

@ -3,26 +3,31 @@
import AppConstants from './application_constants'; import AppConstants from './application_constants';
let apiUrls = { 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}/', 'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/',
'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/', 'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/', 'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
'ownership_shares_mail': AppConstants.apiEndpoint + 'ownership/shares/mail/', 'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
'ownership_transfers': AppConstants.apiEndpoint + 'ownership/transfers/', 'note_notes': AppConstants.apiEndpoint + 'note/notes/',
'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/', 'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/',
'ownership_consigns_confirm': AppConstants.apiEndpoint + 'ownership/consigns/confirm/', 'ownership_consigns_confirm': AppConstants.apiEndpoint + 'ownership/consigns/confirm/',
'ownership_consigns_deny': AppConstants.apiEndpoint + 'ownership/consigns/deny/', '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': AppConstants.apiEndpoint + 'ownership/loans/',
'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/confirm/', 'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/confirm/',
'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/deny/', '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; export default apiUrls;

View File

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

View File

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