From 9e1a76a08e33825f977a3815c61652dbb8906423 Mon Sep 17 00:00:00 2001 From: ddejongh Date: Mon, 22 Jun 2015 17:33:25 +0200 Subject: [PATCH] api settings complete --- gulpfile.js | 2 +- js/actions/application_actions.js | 34 +++++ js/components/ascribe_forms/form.js | 6 +- js/components/register_piece.js | 28 ++-- js/components/settings_container.js | 226 ++++++++++++++++++---------- js/constants/api_urls.js | 2 + js/fetchers/application_fetcher.js | 17 +++ js/stores/application_store.js | 18 +++ package.json | 2 +- sass/ascribe_settings.scss | 18 ++- 10 files changed, 251 insertions(+), 102 deletions(-) create mode 100644 js/actions/application_actions.js create mode 100644 js/fetchers/application_fetcher.js create mode 100644 js/stores/application_store.js diff --git a/gulpfile.js b/gulpfile.js index d40726a2..e570c2ff 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -69,7 +69,7 @@ gulp.task('js:build', function() { bundle(false); }); -gulp.task('serve', ['browser-sync', 'run-server', 'sass:watch', 'copy'], function() { +gulp.task('serve', ['browser-sync', 'run-server', 'lint:watch', 'sass:build', 'sass:watch', 'copy'], function() { bundle(true); }); diff --git a/js/actions/application_actions.js b/js/actions/application_actions.js new file mode 100644 index 00000000..33932ebd --- /dev/null +++ b/js/actions/application_actions.js @@ -0,0 +1,34 @@ +'use strict'; + +import alt from '../alt'; +import ApplicationFetcher from '../fetchers/application_fetcher'; + + +class ApplicationActions { + constructor() { + this.generateActions( + 'updateApplications' + ); + } + + fetchApplication() { + ApplicationFetcher.fetch() + .then((res) => { + this.actions.updateApplications(res.applications); + }) + .catch((err) => { + console.log(err); + }); + } + refreshApplicationToken(applicationName) { + ApplicationFetcher.refreshToken(applicationName) + .then((res) => { + this.actions.updateApplications(res.applications); + }) + .catch((err) => { + console.log(err); + }); + } +} + +export default alt.createActions(ApplicationActions); diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 403100c8..6cd8638a 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -66,7 +66,7 @@ let Form = React.createClass({ this.refs[ref].handleSuccess(); } } - this.setState({edited: false}); + this.setState({edited: false, submitted: false}); }, handleError(err){ if (err.json) { @@ -102,10 +102,10 @@ let Form = React.createClass({ if (this.state.edited){ buttons = ( -
+

-

+

); } diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 3a3520b5..1687fe3f 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -17,6 +17,8 @@ import apiUrls from '../constants/api_urls'; import ReactS3FineUploader from 'ReactS3FineUploader'; +import DatePicker from 'react-datepicker/dist/react-datepicker'; + let RegisterPiece = React.createClass( { render() { @@ -26,7 +28,7 @@ let RegisterPiece = React.createClass( {
- +
); @@ -99,7 +101,7 @@ let FileUploader = React.createClass( { } }); -let LoginForm = React.createClass({ +let RegisterPieceForm = React.createClass({ mixins: [Router.Navigation], @@ -124,28 +126,22 @@ let LoginForm = React.createClass({ }> + name='artist_name' + label="Artist Name"> + name='title' + label="Artwork title">
-
- Not an ascribe user? Sign up...
- Forgot my password? Rescue me... -
); } diff --git a/js/components/settings_container.js b/js/components/settings_container.js index b07c69c0..d6fc4bcc 100644 --- a/js/components/settings_container.js +++ b/js/components/settings_container.js @@ -9,6 +9,9 @@ import UserStore from '../stores/user_store'; import WalletSettingsActions from '../actions/wallet_settings_actions'; import WalletSettingsStore from '../stores/wallet_settings_store'; +import ApplicationActions from '../actions/application_actions'; +import ApplicationStore from '../stores/application_store'; + import GlobalNotificationModel from '../models/global_notification_model'; import GlobalNotificationActions from '../actions/global_notification_actions'; @@ -28,6 +31,7 @@ let SettingsContainer = React.createClass({
+
); } @@ -54,47 +58,48 @@ let AccountSettings = React.createClass({ handleSuccess(){ UserActions.fetchCurrentUser(); - let notification = new GlobalNotificationModel('username succesfully updated', 'success', 10000); + let notification = new GlobalNotificationModel('username succesfully updated', 'success', 5000); GlobalNotificationActions.appendGlobalNotification(notification); }, render() { + let content = ; if (this.state.currentUser.username) { - return ( - -
- - - - - - -
- - ); - } - else { - return ( - + content = ( +
+ + + + + + +
+
); } + return ( + + {content} + + + ); } }); @@ -120,42 +125,39 @@ let BitcoinWalletSettings = React.createClass({ }, render() { - if (this.state.walletSettings.btc_public_key) { - return ( - -
- - - - - - -
- - ); - } - else { - return ( - - ); + let content = ; + if (this.state.walletSettings.btc_public_key) { + content = ( +
+ + + + + + +
+
); } + return ( + + {content} + + ); } }); @@ -177,18 +179,86 @@ let ContractSettings = React.createClass({ }); let APISettings = React.createClass({ - - propTypes: { - currentUser: React.PropTypes.object + getInitialState() { + return ApplicationStore.getState(); }, - render() { + componentDidMount() { + ApplicationStore.listen(this.onChange); + ApplicationActions.fetchApplication(); + }, + componentWillUnmount() { + ApplicationStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + handleCreateSuccess: function(){ + ApplicationActions.fetchApplication(); + let notification = new GlobalNotificationModel('Application successfully created', 'success', 5000); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + + handleTokenRefresh: function(event){ + let applicationName = event.target.getAttribute('data-id'); + ApplicationActions.refreshApplicationToken(applicationName); + let notification = new GlobalNotificationModel('Token refreshed', 'success'); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + render() { + let content = ; + if (this.state.applications.length > 0) { + content = this.state.applications.map(function(app) { + return ( + +
+
+ {'Bearer ' + app.bearer_token.token} +
+
+ +
+
+ ); + }, this); + content = ( +
+
+ {content} +
+
+
); + + } return ( -
-
Username: {this.props.currentUser.username}
-
Email: {this.props.currentUser.email}
-
+ +
+ + + +
+
+ {content} + ); } }); diff --git a/js/constants/api_urls.js b/js/constants/api_urls.js index 461ed453..e284b7b1 100644 --- a/js/constants/api_urls.js +++ b/js/constants/api_urls.js @@ -3,6 +3,8 @@ import AppConstants from './application_constants'; let apiUrls = { + 'applications': AppConstants.apiEndpoint + 'applications/', + 'application_token_refresh': AppConstants.apiEndpoint + 'applications/refresh_token/', 'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/', 'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/', 'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/', diff --git a/js/fetchers/application_fetcher.js b/js/fetchers/application_fetcher.js new file mode 100644 index 00000000..f87d76f7 --- /dev/null +++ b/js/fetchers/application_fetcher.js @@ -0,0 +1,17 @@ +'use strict'; + +import requests from '../utils/requests'; + +let ApplicationFetcher = { + /** + * Fetch the registered applications of a user from the API. + */ + fetch() { + return requests.get('applications'); + }, + refreshToken(applicationName) { + return requests.post('application_token_refresh', { body: {'name': applicationName}}); + } +}; + +export default ApplicationFetcher; diff --git a/js/stores/application_store.js b/js/stores/application_store.js new file mode 100644 index 00000000..5eb89e24 --- /dev/null +++ b/js/stores/application_store.js @@ -0,0 +1,18 @@ +'use strict'; + +import alt from '../alt'; +import ApplicationActions from '../actions/application_actions'; + + +class ApplicationStore { + constructor() { + this.applications = {}; + this.bindActions(ApplicationActions); + } + + onUpdateApplications(applications) { + this.applications = applications; + } +} + +export default alt.createStore(ApplicationStore, 'ApplicationStore'); diff --git a/package.json b/package.json index 6c37fccc..8ca3e4fa 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "gulp-notify": "^2.2.0", "gulp-sass": "^2.0.1", "gulp-sourcemaps": "^1.5.2", - "gulp-template": "^3.0.0", + "gulp-template": "~3.0.0", "gulp-uglify": "^1.2.0", "gulp-util": "^3.0.4", "harmonize": "^1.4.2", diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index 37a8c31e..85cfa926 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -25,9 +25,6 @@ color: rgba(169, 68, 66, 1); font-size: 0.9em; margin-right: 1em; - } - span { - } input { color: #666; @@ -42,6 +39,9 @@ span { cursor: default; } + div { + color: #666; + } input { cursor: default; color: #666; @@ -67,6 +67,18 @@ color: rgba(0,0,0,.7); } + div { + margin-top: 10px; + div { + padding-left: 0; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: normal; + font-size: 1.1em; + cursor: default; + color: rgba(0, 0, 0, .7); + } + } + input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400;