Add express and live reload

.gitignore

@@ -1,3 +1,5 @@
 hackathon.sublime-project
 hackathon.sublime-workspace
-node_modules
+node_modules
+.sass-cache/
+**/.DS_Store

README.md

@@ -0,0 +1,25 @@
+An step by step live demo to explain how the Oauth2 dance works in the ORCID API and how to use the access tokens to edit an ORCID record.
+
+#### Install NodeJS
+
+[Install it!](https://nodejs.org/)
+
+### Install Gulp
+
+```
+sudo npm install --global gulp 
+```
+
+### Install dependencies
+
+```
+npm install 
+```
+
+### Run gulp, includes express web server
+
+```
+gulp
+```
+
+Source JavaScript and SCSS files are under /src folder, do not modify files that are in the root (/CSS and /JS)

gulpfile.js

@@ -9,27 +9,47 @@ var gulp = require('gulp'),
     cache = require('gulp-cache'),
     livereload = require('gulp-livereload'),
     plumber = require('gulp-plumber');
+
 
+// run livereload
+gulp.task('livereload', function() {
+    tinylr = require('tiny-lr')();
+    tinylr.listen(35729);
+});
+
+function notifyLiveReload(event) {
+    var fileName = require('path').relative(__dirname, event.path);
+
+    tinylr.changed({
+        body: {
+            files: [fileName]
+        }
+    });
+}
+
 
+// Styles gulp task
 gulp.task('styles', function () {
     return (sass('./src/scss'))
         .on('error', function (err) { console.log(err.message); })
         .pipe(plumber())
+        .pipe(gulp.dest('./public/css'))
         .pipe(rename({ suffix: '.min' }))
         .pipe(minifycss())
-        .pipe(gulp.dest('./css'))
+        .pipe(gulp.dest('./public/css'))
         .pipe(notify({ message: 'Styles task complete' }));
 });
 
+
 // Scripts
 gulp.task('scripts', function() {
   return gulp.src('./src/js/*.js')
     .pipe(plumber())
     .pipe(concat('app.js'))
-    .pipe(gulp.dest('./js'))
+    .pipe(gulp.dest('./public/js'))
     .pipe(rename({ suffix: '.min' }))
     .pipe(uglify())
-    .pipe(gulp.dest('./js'))
+    .pipe(gulp.dest('./public/js'))
     .pipe(notify({ message: 'Custom Scripts task complete' }));
 });
 
@@ -38,10 +58,23 @@ gulp.task('scripts', function() {
 gulp.task('watch', function() {
   gulp.watch('./src/scss/*.scss', ['styles']);
   gulp.watch('./src/js/*.js', ['scripts']);
+  gulp.watch('./js/*', notifyLiveReload);
+  gulp.watch('./public/*', notifyLiveReload);
 });
 
+
+// run express
+gulp.task('express', function() {
+  var express = require('express');
+  var app = express();
+  app.use(require('connect-livereload')({port: 35729}));
+  app.use(express.static(__dirname + '/public'));
+  app.listen(8000);
+});
+
+
 // Default task
-gulp.task('default', ['watch'], function() {
+gulp.task('default', ['express','livereload','watch'], function() {
     gulp.start('styles','scripts');
 });
 

package.json

@@ -17,7 +17,12 @@
     "gulp-uglify": "^1.2.0",
     "gulp-jshint": "^1.10.0"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "connect-livereload": "^0.5.3",
+    "express": "^4.12.4",
+    "gulp": "^3.8.11",
+    "tiny-lr": "^0.1.5"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

js/app.js → public/js/app.js

@@ -8,7 +8,7 @@ wizardNgModule.controller('stepsController', ['$scope','wizardSrvc','$location',
 	$scope.steps = [
 		{'title' : 'Introduction'},
 		{'title' : 'Accessing the API'},
-		{'title' : 'Technologies'},
+		{'title' : 'Using the API'},
 		{'title' : 'Get access token'},
 		{'title' : 'Get token'},
 		{'title' : 'Show token'},
@@ -18,9 +18,12 @@ wizardNgModule.controller('stepsController', ['$scope','wizardSrvc','$location',
 
 	$scope.init = function() {
 		var code = $location.search()['code'];
+
 		if (code === undefined || code === null) {
 			console.log('Nothing here');
 		} else {
+			//strip extra characters from code
+			code = code.substr(0,6);
 			$scope.wizardSrvc.current = 4;
 		}
 	}
@@ -64,12 +67,13 @@ wizardNgModule.controller('authorizationCodeController', ['$scope','$cookies', '
 		apiUri = apiUri.replace('[api_url]', 'sandbox.orcid.org');
 		apiUri = apiUri.replace('[client_id]', $scope.form.client_id);
 		apiUri = apiUri.replace('[redirect_uri]', 'http://' + location.hostname + ':8000');
-		apiUri = apiUri.replace('[scope]', $scope.form.scope);
+		apiUri = apiUri.replace('[scope]', '/activities/read-limited /activities/update /orcid-profile/read-limited');
 
 		console.log(apiUri);
 
 		// Save values in cookies so we can use them later
-		$cookies.put('current', $scope.wizardSrvc.current); //Current Wizard location
+		//Current Wizard location
+		$cookies.put('current', $scope.wizardSrvc.current); 
 		$cookies.put('orcid_oauth2_client_id', $scope.form.client_id);
 		$cookies.put('orcid_oauth2_redirect_uri', 'http://' + location.hostname+ ':8000');
 
@@ -79,8 +83,6 @@ wizardNgModule.controller('authorizationCodeController', ['$scope','$cookies', '
 		}, 125);
 
 	};
-
-
 }]);
 
 wizardNgModule.controller('tokenController', ['$scope','$location', '$cookies', '$http', function($scope, $location, $cookies, $http){
@@ -91,33 +93,38 @@ wizardNgModule.controller('tokenController', ['$scope','$location', '$cookies',
 	$scope.orcid=false;
 	$scope.scope=false;
 	$scope.token_type=false;
-
-	/* THIS CONTROLLER NEEDS TO BE UPDATED */
-
+	$scope.access_token=null;
+	$scope.user_orcid=null;
+	$scope.access_code = null;
+	$scope.client_id = null;
+	$scope.show_xml=false;
+
 	/* Only for dev environment */
 	if (location.hostname == 'localhost'){
 		$scope.client_secret = '8fa38bea-48e2-4238-9479-e55448ffa225';
 	}	
-
-	$scope.access_code = null;
-	$scope.client_id = null;
-
+
 	$scope.getCode = function() {
+
 		$scope.access_code = $location.search()['code'];
 		$scope.client_id = $cookies.get('orcid_oauth2_client_id');																			
 		// If the code is not specified, return the view
 		// to the root view
 		if ($scope.access_code === undefined || $scope.access_code === null) {
 			$location.path("/");
+		} else{
+			//strip extra characters from code
+			var rawCode = $location.search()['code'];
+			$scope.access_code = rawCode.substr(0,6);
 		}
 	};
 
-	$scope.exchangeCode = function() {				
+	$scope.exchangeCode = function() {	
 		$http({
 		   	url:'http://pub.sandbox.orcid.org/oauth/token',
 		    method:'post',
 		    headers: {'Content-Type': 'application/x-www-form-urlencoded',
-		              'Accept': 'application/json',
+		              'Accept': 'application/json'
 		    },
 		    transformRequest: function(obj) {
 		       var str = [];
@@ -137,6 +144,8 @@ wizardNgModule.controller('tokenController', ['$scope','$location', '$cookies',
 			.success (function(data){			  		
 				$scope.wizardSrvc.current = 5;
 				$scope.token = data;
+				$scope.access_token = data.access_token;
+				$scope.user_orcid = data.orcid;
 			})
 			.error(function(data, status, headers, config){
 		        console.log("***OOPS "+status + " H: "+ angular.toJson(data));
@@ -157,7 +166,7 @@ wizardNgModule.controller('tokenController', ['$scope','$location', '$cookies',
 				break;
 			case 'expiration':
 				$scope.show_expires_in=true;
-				break;
+				break; 
 			case 'name':
 				$scope.show_name=true;
 				break;
@@ -173,7 +182,44 @@ wizardNgModule.controller('tokenController', ['$scope','$location', '$cookies',
 
 		}
 	};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+	$scope.readRecord = function() {
+		$scope.show_xml=true;				
+	};
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 	$scope.getCode();
 }]);