diff --git a/.gitignore b/.gitignore index cfd50c6..fb4a2e7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ hackathon.sublime-project hackathon.sublime-workspace -node_modules \ No newline at end of file +node_modules +.sass-cache/ +**/.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000..94eac4d --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +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 or Upgrade + +[Install it!](https://nodejs.org/) +or +[Upgrade it!](http://davidwalsh.name/upgrade-nodejs) +if the version if less then 0.12.0 + +### 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 (/public/gulp_derived) + +### Production minimize mode +The default view doesn't reference minimized js and css to make development easier. To enable css and javascript minimization +for production set the `MINIMIZE` environment variable to `true`; + +``` +export MINIMIZE=true +``` diff --git a/css/fonts.min.css b/css/fonts.min.css deleted file mode 100644 index eee68a4..0000000 --- a/css/fonts.min.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-family:"Gill Sans W02_n4";src:url(../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix)format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix);src:url(../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix)format("eot"),url(../fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff)format("woff"),url(../fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf)format("truetype"),url(../fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg#782849e5-a129-4cc1-8fa5-934ae2a82537)format("svg");font-weight:400;font-style:normal}@font-face{font-family:"Gill Sans W02_n7";src:url(../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix)format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix);src:url(../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix)format("eot"),url(../fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff)format("woff"),url(../fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf)format("truetype"),url(../fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg#7bf70546-8c62-412f-9a7f-ea4d750a97b9)format("svg");font-weight:700;font-style:normal}@font-face{font-family:"Gill Sans W02_i7";src:url(../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix)format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix);src:url(../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix)format("eot"),url(../fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff)format("woff"),url(../fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf)format("truetype"),url(../fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg#cba5f716-e0e3-43b2-accd-b5f4173e4695)format("svg");font-weight:700;font-style:italic}@font-face{font-family:"Gill Sans W02_i4";src:url(../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix)format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix);src:url(../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix)format("eot"),url(../fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff)format("woff"),url(../fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf)format("truetype"),url(../fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg#f317c23c-bff8-4972-b8d3-db5a0da45fdf)format("svg");font-weight:400;font-style:italic}@font-face{font-family:"Gill Sans W02_n3";src:url(../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix)format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix);src:url(../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix)format("eot"),url(../fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff)format("woff"),url(../fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf)format("truetype"),url(../fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg#59939f92-3d8b-46f6-8852-3a0db259dea0)format("svg");font-weight:300;font-style:normal} \ No newline at end of file diff --git a/css/style.min.css b/css/style.min.css deleted file mode 100644 index e42e402..0000000 --- a/css/style.min.css +++ /dev/null @@ -1 +0,0 @@ -body{color:#494A4C;font-family:'Gill Sans W02',Helvetica,sans-serif}h1,h2,h3{color:#a6ce39}label,p,ul{font-size:18px}table{margin:40px 20px;background-color:#fff;border-radius:16px;box-shadow:0 0 5px #999}td{padding:16px;color:#9B9B9B;font-size:1.2em}tr{border-bottom:1px solid #d2d2d2;vertical-align:center}.api-chart img{width:64px}.api-chart h3{text-transform:uppercase}tr:last-of-type{border-bottom:none}.btn-default{background:#338caf;color:#FFF;border:none}.btn-default:hover{background:#a6ce39;color:#FFF;border:none}.wizard-btn-container{text-align:right;position:absolute;left:15px;right:15px;bottom:15px;border-top:1px solid #d2d2d2;padding-top:15px}.wizard-btn-container .wizard-nav-btn,.wizard-btn-container .wizard-nav-btn:hover,.wizard-btn-container input[type=submit],.wizard-btn-container input[type=submit]:hover{background:#f3f3f3;border:none;background-image:linear-gradient(#fbfbfb,#f3f3f3);border:1px solid rgba(0,0,0,.1);border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.1);margin-left:15px;margin-right:0;height:30px;color:#444;display:inline-block;font-weight:700;margin-bottom:0;padding:4px 12px;text-decoration:none;text-shadow:none}.wizard-btn-container .wizard-nav-btn.disabled-button,.wizard-btn-container .wizard-nav-btn.disabled-button:hover,.wizard-btn-container input[type=submit].disabled-button,.wizard-btn-container input[type=submit].disabled-button:hover{background-color:#e4e4e4;background-image:linear-gradient(#e8e8e8,#e4e4e4);color:#c2c2c2;border-radius:2px;box-shadow:none}.steps-pane-container{border:none;float:left;min-width:15%;width:auto;height:100vh;box-sizing:border-box;background:#FFF;border-right:1px solid #d2d2d2}.steps-pane-container ul{list-style:none;padding:0;margin:0}.steps-pane-container ul li{border-bottom:1px solid #d2d2d2;text-shadow:none;cursor:default;padding:15px;color:#9b9b9b;position:relative;font-size:18px}.steps-pane-container ul li.current-step{text-shadow:none;background:#338caf;border-color:#a6ce39;border-style:none solid none none;border-width:5px;color:#FFF;font-weight:700}.steps-pane-container ul li.completed-step{color:#777;text-shadow:none}.steps-pane-container ul li.clickable-step-link{cursor:pointer}.steps-pane-container ul li.clickable-step-link:hover{color:#333}.steps-pane-container .logo{width:100%;text-align:left;padding:6px 0 0 15px;height:60px;border-bottom:1px solid #d2d2d2}.wizard-ext-container{overflow:hidden;box-sizing:border-box;box-shadow:0 0 4px rgba(0,0,0,.3)}.contents-pane-container{float:left;padding:15px;min-width:85%;width:auto;height:100vh;position:relative;box-sizing:border-box;background:#F8F8F8;border:none}.contents-pane{overflow:auto;position:absolute;left:15px;right:15px;top:15px;bottom:61px;border:none;padding-left:2px}.hidden-form-slide{display:none}.disabled-button{color:rgba(0,0,0,.3)} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 7f86980..421f7dd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -5,31 +5,53 @@ var gulp = require('gulp'), uglify = require('gulp-uglify'), rename = require('gulp-rename'), concat = require('gulp-concat'), + nodemon = require('gulp-nodemon'), notify = require('gulp-notify'), 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/gulp_derived/css')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) - .pipe(gulp.dest('./css')) + .pipe(gulp.dest('./public/gulp_derived/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(concat('client.js')) + .pipe(gulp.dest('./public/gulp_derived/js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) - .pipe(gulp.dest('./js')) + .pipe(gulp.dest('./public/gulp_derived/js')) .pipe(notify({ message: 'Custom Scripts task complete' })); }); @@ -38,17 +60,23 @@ gulp.task('scripts', function() { gulp.task('watch', function() { gulp.watch('./src/scss/*.scss', ['styles']); gulp.watch('./src/js/*.js', ['scripts']); + gulp.watch('./public/**', notifyLiveReload); + gulp.watch('./views/**', notifyLiveReload); }); -// Default task -gulp.task('default', ['watch'], function() { - gulp.start('styles','scripts'); -}); - - - - - - +// run express +gulp.task('express', function () { + nodemon({ script: 'server.js' + , ext: 'html js' + , ignore: ['ignored.js'] + , tasks: ['lint'] }) + .on('restart', function () { + console.log('restarted!') + }) +}); +// Default task +gulp.task('default', ['express','livereload','watch'], function() { + gulp.start('styles','scripts'); +}); \ No newline at end of file diff --git a/js/.DS_Store b/js/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/js/.DS_Store and /dev/null differ diff --git a/js/app.min.js b/js/app.min.js deleted file mode 100644 index fd22121..0000000 --- a/js/app.min.js +++ /dev/null @@ -1 +0,0 @@ -var wizardNgModule=angular.module("wizardApp",["ngCookies","ngResource"]).config(["$locationProvider","$resourceProvider",function(e,o){e.html5Mode(!0),o.defaults.stripTrailingSlashes=!0}]);wizardNgModule.controller("stepsController",["$scope","wizardSrvc","$location",function(e,o,t){e.steps=[{title:"Introduction"},{title:"Accessing the API"},{title:"Technologies"},{title:"Get access token"},{title:"Get token"},{title:"Show token"},{title:"Read record"},{title:"Update record"}],e.init=function(){var o=t.search().code;void 0===o||null===o?console.log("Nothing here"):e.wizardSrvc.current=4},e.wizardSrvc=o,e.init()}]),wizardNgModule.controller("controlsController",["$scope","wizardSrvc",function(e,o){e.wizardSrvc=o,e.next=function(){o.next()},e.finish=function(){o.finish()},e.back=function(){o.back()}}]),wizardNgModule.controller("authorizationCodeController",["$scope","$cookies","wizardSrvc",function(e,o,t){"localhost"==location.hostname&&(e.form={},e.form.client_id="APP-1X454QYQ66U6XW7X"),e.authString="http://[api_url]/oauth/authorize?client_id=[client_id]&response_type=code&redirect_uri=[redirect_uri]&scope=[scope]",e.wizardSrvc=t,e.getAuthorizationCode=function(){var t=e.authString;t=t.replace("[api_url]","sandbox.orcid.org"),t=t.replace("[client_id]",e.form.client_id),t=t.replace("[redirect_uri]","http://"+location.hostname+":8000"),t=t.replace("[scope]",e.form.scope),console.log(t),o.put("current",e.wizardSrvc.current),o.put("orcid_oauth2_client_id",e.form.client_id),o.put("orcid_oauth2_redirect_uri","http://"+location.hostname+":8000"),setTimeout(function(){window.location.href=t},125)}}]),wizardNgModule.controller("tokenController",["$scope","$location","$cookies","$http",function(e,o,t,c){e.show_access_token=!1,e.expires_in=!1,e.name=!1,e.orcid=!1,e.scope=!1,e.token_type=!1,"localhost"==location.hostname&&(e.client_secret="8fa38bea-48e2-4238-9479-e55448ffa225"),e.access_code=null,e.client_id=null,e.getCode=function(){e.access_code=o.search().code,e.client_id=t.get("orcid_oauth2_client_id"),(void 0===e.access_code||null===e.access_code)&&o.path("/")},e.exchangeCode=function(){c({url:"http://pub.sandbox.orcid.org/oauth/token",method:"post",headers:{"Content-Type":"application/x-www-form-urlencoded",Accept:"application/json"},transformRequest:function(e){var o=[];for(var t in e)o.push(encodeURIComponent(t)+"="+encodeURIComponent(e[t]));var c=o.join("&");return console.log("****RETURNING "+c),c},data:{client_id:e.client_id,client_secret:e.client_secret,grant_type:"authorization_code",redirect_uri:"http://localhost:8000",code:e.access_code}}).success(function(o){e.wizardSrvc.current=5,e.token=o}).error(function(e,o,t,c){console.log("***OOPS "+o+" H: "+angular.toJson(e))})},e.show=function(o){switch(e.show_access_token=!1,e.show_expires_in=!1,e.show_name=!1,e.show_orcid=!1,e.show_scope=!1,e.show_token_type=!1,console.log(o),o){case"token":e.show_access_token=!0;break;case"expiration":e.show_expires_in=!0;break;case"name":e.show_name=!0;break;case"orcid":e.show_orcid=!0;break;case"scope":e.show_scope=!0;break;case"type":e.show_token_type=!0}},e.getCode()}]),wizardNgModule.service("wizardSrvc",["$rootScope",function(e){var o={current:0,elements:document.getElementsByClassName("step"),back:function(){o.current>0&&o.current--},next:function(){o.current==o.elements.length-1?o.current=0:o.current++},finish:function(){o.current=0}};return o}]); \ No newline at end of file diff --git a/js/controllers.js b/js/controllers.js deleted file mode 100644 index c1a475f..0000000 --- a/js/controllers.js +++ /dev/null @@ -1,112 +0,0 @@ -wizardNgModule.controller('name', ['$scope', function($scope){ - -}]); - - - -wizardNgModule.service('wizard', ['$scope', function($scope){ - -}]) - - -/* -OauthController.controller("IntroductionController", [ '$scope', '$http','$routeParams', '$location', - function($scope, $http, $routeParams, $location) { - var code = $location.search()['code']; - if (code === undefined || code === null) { - $location.path("/"); - } else { - $location.path("/get_token"); - } - } -]); - -OauthController.controller("GetPermissionsController",['$scope','$http','$cookies',function GetCodeController($scope, $http, $cookies) { - $scope.authString = "http://[api_url]/oauth/authorize?client_id=[client_id]&response_type=code&redirect_uri=[redirect_uri]&scope=[scope]"; - - $scope.load = function() { - console.log("In get code controller"); - } - - $scope.getCode = function() { - // Build the string - var apiUri = $scope.authString; - apiUri = apiUri.replace('[api_url]', - 'qa.orcid.org'); - apiUri = apiUri.replace('[client_id]', - $scope.form.client_id); - apiUri = apiUri - .replace('[redirect_uri]', - 'http://localhost:8080/orcid-api-walkthrough/'); - apiUri = apiUri.replace('[scope]', - $scope.form.scope); - console.log(apiUri); - - // Save values in cookies so we can use - // them later - $cookies.put('orcid_oauth2_client_id', - $scope.form.client_id); - $cookies - .put( - 'orcid_oauth2_redirect_uri', - 'http://localhost:8080/orcid-api-walkthrough/'); - - setTimeout(function() { - window.location.href = apiUri; - }, 125); - }; - - $scope.load(); -} ]); - -OauthController.controller("GetTokenController",['$scope','$http','$location','$cookies',function($scope, $http, $location, $cookies) { - - $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'); - console.log($scope.access_code); - console.log($scope.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("/"); - } - }; - - $scope.exchangeCode = function() { - - $http({ - url:'http://pub.qa.orcid.org/oauth/token', - method:'post', - headers: {'Content-Type': 'application/x-www-form-urlencoded', - 'Accept': 'application/json', - }, - transformRequest: function(obj) { - var str = []; - for(var p in obj) - str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); - var foo= str.join("&"); - console.log ("****RETURNING "+foo); - return foo; - }, - data: {client_id:'0000-0003-3064-5929', - client_secret:'20877677-5001-4d86-820e-5f527aa9bd14', - grant_type:'authorization_code', - redirect_uri:'http://localhost:8080/orcid-api-walkthrough/', - code:$scope.access_code - }}) - .success (function(data){ - console.log(data); - }) - .error(function(data, status, headers, config){ - console.log("***OOPS "+status + " H: "+ angular.toJson(data)); - }); - }; - - $scope.getCode(); - } -]); -*/ \ No newline at end of file diff --git a/package.json b/package.json index 50bab7c..c073d73 100644 --- a/package.json +++ b/package.json @@ -4,20 +4,28 @@ "description": "A walkthrough page that will show you how the orcid api works and how you can interact with it", "main": "gulpfile.js", "dependencies": { - "gulp": "^3.8.11", "gulp-autoprefixer": "^2.2.0", "gulp-cache": "^0.2.9", "gulp-concat": "^2.5.2", "gulp-livereload": "^3.8.0", "gulp-minify-css": "^1.1.1", "gulp-notify": "^2.2.0", + "gulp-nodemon": "^2.0.3", "gulp-plumber": "^1.0.0", "gulp-ruby-sass": "^1.0.5", "gulp-rename": "^1.2.2", "gulp-uglify": "^1.2.0", - "gulp-jshint": "^1.10.0" + "ejs": "^1.0.0", + "nodelint": "^0.6.2", + "simple-oauth2": "https://github.com/ORCID/simple-oauth2/archive/MASTER_2015_06_03.tar.gz", + "body-parser": "^1.12.4" + }, + "devDependencies": { + "connect-livereload": "^0.5.3", + "express": "^4.12.4", + "gulp": "^3.8.11", + "tiny-lr": "^0.1.5" }, - "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, @@ -25,6 +33,10 @@ "type": "git", "url": "git+https://github.com/hexplus/orcid-api-walkthrough.git" }, + "engines": { + "node": ">= 0.12.0", + "npm": ">= 2.0.0" + }, "keywords": [ "orcid", "hackaton", @@ -36,5 +48,6 @@ "bugs": { "url": "https://github.com/hexplus/orcid-api-walkthrough/issues" }, - "homepage": "https://github.com/hexplus/orcid-api-walkthrough#readme" + "homepage": "https://github.com/hexplus/orcid-api-walkthrough#readme", + "main": "server.js" } diff --git a/fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf b/public/fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf similarity index 100% rename from fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf rename to public/fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf diff --git a/fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff b/public/fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff similarity index 100% rename from fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff rename to public/fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff diff --git a/fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot b/public/fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot similarity index 100% rename from fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot rename to public/fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot diff --git a/fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff b/public/fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff similarity index 100% rename from fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff rename to public/fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff diff --git a/fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf b/public/fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf similarity index 100% rename from fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf rename to public/fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf diff --git a/fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg b/public/fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg similarity index 100% rename from fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg rename to public/fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg diff --git a/fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff b/public/fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff similarity index 100% rename from fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff rename to public/fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff diff --git a/fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg b/public/fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg similarity index 100% rename from fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg rename to public/fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg diff --git a/fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg b/public/fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg similarity index 100% rename from fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg rename to public/fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg diff --git a/fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff b/public/fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff similarity index 100% rename from fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff rename to public/fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff diff --git a/fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot b/public/fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot similarity index 100% rename from fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot rename to public/fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot diff --git a/fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot b/public/fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot similarity index 100% rename from fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot rename to public/fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot diff --git a/fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf b/public/fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf similarity index 100% rename from fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf rename to public/fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf diff --git a/fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg b/public/fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg similarity index 100% rename from fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg rename to public/fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg diff --git a/fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf b/public/fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf similarity index 100% rename from fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf rename to public/fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf diff --git a/fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot b/public/fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot similarity index 100% rename from fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot rename to public/fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot diff --git a/fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff b/public/fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff similarity index 100% rename from fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff rename to public/fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff diff --git a/fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg b/public/fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg similarity index 100% rename from fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg rename to public/fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg diff --git a/fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf b/public/fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf similarity index 100% rename from fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf rename to public/fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf diff --git a/fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot b/public/fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot similarity index 100% rename from fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot rename to public/fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot diff --git a/public/gulp_derived/css/.keep b/public/gulp_derived/css/.keep new file mode 100644 index 0000000..e69de29 diff --git a/public/gulp_derived/css/fonts.css b/public/gulp_derived/css/fonts.css new file mode 100644 index 0000000..8376b28 --- /dev/null +++ b/public/gulp_derived/css/fonts.css @@ -0,0 +1,45 @@ +@font-face { + font-family: "Gill Sans W02_n4"; + src: url("../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix") format("eot"); } +@font-face { + font-family: "Gill Sans W02"; + src: url("../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix"); + src: url("../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix") format("eot"), url("../fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff") format("woff"), url("../fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf") format("truetype"), url("../fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg#782849e5-a129-4cc1-8fa5-934ae2a82537") format("svg"); + font-weight: 400; + font-style: normal; } +@font-face { + font-family: "Gill Sans W02_n7"; + src: url("../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix") format("eot"); } +@font-face { + font-family: "Gill Sans W02"; + src: url("../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix"); + src: url("../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix") format("eot"), url("../fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff") format("woff"), url("../fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf") format("truetype"), url("../fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg#7bf70546-8c62-412f-9a7f-ea4d750a97b9") format("svg"); + font-weight: 700; + font-style: normal; } +@font-face { + font-family: "Gill Sans W02_i7"; + src: url("../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix") format("eot"); } +@font-face { + font-family: "Gill Sans W02"; + src: url("../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix"); + src: url("../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix") format("eot"), url("../fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff") format("woff"), url("../fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf") format("truetype"), url("../fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg#cba5f716-e0e3-43b2-accd-b5f4173e4695") format("svg"); + font-weight: 700; + font-style: italic; } +@font-face { + font-family: "Gill Sans W02_i4"; + src: url("../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix") format("eot"); } +@font-face { + font-family: "Gill Sans W02"; + src: url("../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix"); + src: url("../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix") format("eot"), url("../fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff") format("woff"), url("../fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf") format("truetype"), url("../fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg#f317c23c-bff8-4972-b8d3-db5a0da45fdf") format("svg"); + font-weight: 400; + font-style: italic; } +@font-face { + font-family: "Gill Sans W02_n3"; + src: url("../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix") format("eot"); } +@font-face { + font-family: "Gill Sans W02"; + src: url("../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix"); + src: url("../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix") format("eot"), url("../fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff") format("woff"), url("../fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf") format("truetype"), url("../fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg#59939f92-3d8b-46f6-8852-3a0db259dea0") format("svg"); + font-weight: 300; + font-style: normal; } diff --git a/public/gulp_derived/css/fonts.min.css b/public/gulp_derived/css/fonts.min.css new file mode 100644 index 0000000..8fb4ec5 --- /dev/null +++ b/public/gulp_derived/css/fonts.min.css @@ -0,0 +1 @@ +@font-face{font-family:"Gill Sans W02_n4";src:url(../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix) format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix);src:url(../fonts/df888e01-3d42-4e4a-bbb8-7b8bbd7d55f0.eot?#iefix) format("eot"),url(../fonts/ecb83bdf-e0aa-4a30-9394-c5a32be731ff.woff) format("woff"),url(../fonts/28878a98-b041-4ebc-a448-f6d4b50c87b2.ttf) format("truetype"),url(../fonts/782849e5-a129-4cc1-8fa5-934ae2a82537.svg#782849e5-a129-4cc1-8fa5-934ae2a82537) format("svg");font-weight:400;font-style:normal}@font-face{font-family:"Gill Sans W02_n7";src:url(../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix) format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix);src:url(../fonts/f5eeb9ee-aa7f-48ee-8450-4034d3587f6d.eot?#iefix) format("eot"),url(../fonts/41a107ac-0cb7-4bdf-92fa-3953ffd3624e.woff) format("woff"),url(../fonts/da53b951-50dc-4a3c-a55a-932bdde8347e.ttf) format("truetype"),url(../fonts/7bf70546-8c62-412f-9a7f-ea4d750a97b9.svg#7bf70546-8c62-412f-9a7f-ea4d750a97b9) format("svg");font-weight:700;font-style:normal}@font-face{font-family:"Gill Sans W02_i7";src:url(../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix) format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix);src:url(../fonts/a4c5f6d1-f02d-4144-aadf-10f97a718263.eot?#iefix) format("eot"),url(../fonts/a02a57aa-1a49-4b8c-ab1d-08fbd790aabe.woff) format("woff"),url(../fonts/53ead41e-c0ab-44c3-bb7c-74d70d2c7ed7.ttf) format("truetype"),url(../fonts/cba5f716-e0e3-43b2-accd-b5f4173e4695.svg#cba5f716-e0e3-43b2-accd-b5f4173e4695) format("svg");font-weight:700;font-style:italic}@font-face{font-family:"Gill Sans W02_i4";src:url(../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix) format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix);src:url(../fonts/b88d89de-e476-4fd9-83a7-15f1178d78bd.eot?#iefix) format("eot"),url(../fonts/5b426dca-cc4e-4627-9ff8-9f4dc55b0290.woff) format("woff"),url(../fonts/f54382aa-da70-46c5-bb6f-735919625300.ttf) format("truetype"),url(../fonts/f317c23c-bff8-4972-b8d3-db5a0da45fdf.svg#f317c23c-bff8-4972-b8d3-db5a0da45fdf) format("svg");font-weight:400;font-style:italic}@font-face{font-family:"Gill Sans W02_n3";src:url(../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix) format("eot")}@font-face{font-family:"Gill Sans W02";src:url(../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix);src:url(../fonts/3d3ae305-c5f8-44e9-a93f-68343ef13a1e.eot?#iefix) format("eot"),url(../fonts/2b43682c-fbbf-4d2c-aa8f-53c5e9c07b89.woff) format("woff"),url(../fonts/c7502fea-5840-46ed-9666-3479a56bf828.ttf) format("truetype"),url(../fonts/59939f92-3d8b-46f6-8852-3a0db259dea0.svg#59939f92-3d8b-46f6-8852-3a0db259dea0) format("svg");font-weight:300;font-style:normal} \ No newline at end of file diff --git a/public/gulp_derived/css/style.css b/public/gulp_derived/css/style.css new file mode 100644 index 0000000..1e65919 --- /dev/null +++ b/public/gulp_derived/css/style.css @@ -0,0 +1,238 @@ +/* Wizard */ +body { + color: #494A4C; + font-family: 'Gill Sans W02', 'Helvetica', sans-serif; } + +h1, h2, h3 { + color: #a6ce39; } + +p, ul, ol, label { + font-size: 18px; } + +table { + margin: 40px 20px; + background-color: #fff; + border-radius: 16px; + box-shadow: 0 0 5px #999; } + +td { + padding: 16px; + color: #9B9B9B; + font-size: 1.2em; } + +tr { + border-bottom: 1px solid #d2d2d2; + vertical-align: center; } + +.api-chart img { + width: 64px; } + +.api-chart h3 { + text-transform: uppercase; } + +tr:last-of-type { + border-bottom: none; } + +.btn-default { + background: #338caf; + color: #FFF; + border: none; } + +.btn-default:hover { + background: #a6ce39; + color: #FFF; + border: none; } + +.wizard-btn-container { + text-align: right; + position: absolute; + left: 15px; + right: 15px; + bottom: 15px; + border-top: 1px solid #d2d2d2; + padding-top: 15px; } + .wizard-btn-container .wizard-nav-btn, + .wizard-btn-container .wizard-nav-btn:hover, + .wizard-btn-container input[type="submit"]:hover, + .wizard-btn-container input[type="submit"] { + background: none; + border: none medium; + text-decoration: none; + text-shadow: none; + box-shadow: none; + background-color: #f3f3f3; + background-image: linear-gradient(#fbfbfb, #f3f3f3); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 2px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + margin-left: 15px; + margin-right: 0; + height: 30px; + color: #444444; + display: inline-block; + font-weight: bold; + margin-bottom: 0; + padding: 4px 12px; + text-decoration: none; + text-shadow: none; } + .wizard-btn-container .wizard-nav-btn.disabled-button, + .wizard-btn-container .wizard-nav-btn.disabled-button:hover, + .wizard-btn-container input[type="submit"].disabled-button, + .wizard-btn-container input[type="submit"].disabled-button:hover { + background-color: #e4e4e4; + background-image: linear-gradient(#e8e8e8, #e4e4e4); + color: #c2c2c2; + border-radius: 2px; + box-shadow: none; } + +.steps-pane-container { + border: none; + float: left; + width: 20%; + height: 100vh; + box-sizing: border-box; + background: none repeat scroll 0 0 #FFFFFF; + border-right: 1px solid #d2d2d2; } + .steps-pane-container ul { + list-style: none; + padding: 0; + margin: 0; } + .steps-pane-container ul li { + border-bottom: 1px solid #d2d2d2; + text-shadow: none; + cursor: default; + padding: 15px; + color: #9b9b9b; + position: relative; + font-size: 18px; } + .steps-pane-container ul li.current-step { + font-weight: normal; + text-shadow: none; + background: none repeat scroll 0 0 #338caf; + border-color: #a6ce39; + border-style: none solid none none; + border-width: 5px; + color: #FFF; + font-weight: bold; } + .steps-pane-container ul li.completed-step { + color: #777; + text-shadow: none; } + .steps-pane-container ul li.clickable-step-link { + cursor: pointer; } + .steps-pane-container ul li.clickable-step-link:hover { + color: #333; } + .steps-pane-container .logo { + width: 100%; + text-align: left; + padding: 6px 0 0 15px; + height: 60px; + border-bottom: 1px solid #d2d2d2; } + +.wizard-ext-container { + overflow: hidden; + box-sizing: border-box; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); } + +.contents-pane-container { + float: left; + padding: 15px; + width: 80%; + height: 100vh; + position: relative; + box-sizing: border-box; + background: #F8F8F8; + border: none; } + +.contents-pane { + overflow: auto; + position: absolute; + left: 15px; + right: 15px; + top: 15px; + bottom: 61px; + border: none; + padding-left: 2px; } + +.hidden-form-slide { + display: none; } + +.disabled-button { + color: rgba(0, 0, 0, 0.3); } + +.token_items pre { + background-color: #fff; + overflow: hidden; } + +.token_items, +.token_items a { + width: 60%; + float: left; + margin: 0; + padding: 0; + outline: none; } + +.token_items a:hover, +.token_items a:visited { + text-decoration: none; } + +.key, +.value { + float: left; } + +.token_items_descriptions { + width: 20%; + margin-left: 20px; + margin-top: 60px; } + +.token_items_descriptions, +p.description { + padding: 0; + float: left; } + +#btn-menu-toggle { + display: none; + position: absolute; + top: 1.25em; + right: 5%; + z-index: 100; + padding: 0.4em 2% 0.2em 2%; + color: #fff; + font-weight: bold; + text-transform: uppercase; + text-align: center; + border-radius: 0.25em; + background-color: #5b5756; + background-image: -webkit-linear-gradient(top, #6b6766, #5b5756); + background-image: -moz-linear-gradient(top, #6b6766, #5b5756); + background-image: -ms-linear-gradient(top, #6b6766, #5b5756); + background-image: -o-linear-gradient(top, #6b6766, #5b5756); + background-image: linear-gradient(top, #6b6766, #5b5756); } + +#btn-menu-toggle:hover { + background-color: #7b7776; + background-image: -webkit-linear-gradient(top, #8b8786, #7b7776); + background-image: -moz-linear-gradient(top, #8b8786, #7b7776); + background-image: -ms-linear-gradient(top, #8b8786, #7b7776); + background-image: -o-linear-gradient(top, #8b8786, #7b7776); + background-image: linear-gradient(top, #8b8786, #7b7776); } + +@media all and (max-width: 48em) { + .steps-pane-container { + float: left; + margin-left: -100%; + width: 300px; + z-index: 2; } + + .contents-pane-container { + float: left; + margin-left: 0; + width: 100%; } + + #btn-menu-toggle { + display: inline; + text-decoration: none; + cursor: pointer; } + + .show-menu { + margin-left: 0; + position: absolute; } } diff --git a/public/gulp_derived/css/style.min.css b/public/gulp_derived/css/style.min.css new file mode 100644 index 0000000..9b6849f --- /dev/null +++ b/public/gulp_derived/css/style.min.css @@ -0,0 +1 @@ +#btn-menu-toggle,.api-chart h3{text-transform:uppercase}body{color:#494A4C;font-family:'Gill Sans W02',Helvetica,sans-serif}h1,h2,h3{color:#a6ce39}label,ol,p,ul{font-size:18px}table{margin:40px 20px;background-color:#fff;border-radius:16px;box-shadow:0 0 5px #999}td{padding:16px;color:#9B9B9B;font-size:1.2em}tr{border-bottom:1px solid #d2d2d2;vertical-align:center}.api-chart img{width:64px}tr:last-of-type{border-bottom:none}.btn-default{background:#338caf;color:#FFF;border:none}.btn-default:hover{background:#a6ce39;color:#FFF;border:none}.wizard-btn-container{text-align:right;position:absolute;left:15px;right:15px;bottom:15px;border-top:1px solid #d2d2d2;padding-top:15px}.wizard-btn-container .wizard-nav-btn,.wizard-btn-container .wizard-nav-btn:hover,.wizard-btn-container input[type=submit],.wizard-btn-container input[type=submit]:hover{background:#f3f3f3;border:none;background-image:linear-gradient(#fbfbfb,#f3f3f3);border:1px solid rgba(0,0,0,.1);border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.1);margin-left:15px;margin-right:0;height:30px;color:#444;display:inline-block;font-weight:700;margin-bottom:0;padding:4px 12px;text-decoration:none;text-shadow:none}.wizard-btn-container .wizard-nav-btn.disabled-button,.wizard-btn-container .wizard-nav-btn.disabled-button:hover,.wizard-btn-container input[type=submit].disabled-button,.wizard-btn-container input[type=submit].disabled-button:hover{background-color:#e4e4e4;background-image:linear-gradient(#e8e8e8,#e4e4e4);color:#c2c2c2;border-radius:2px;box-shadow:none}.steps-pane-container{border:none;float:left;width:20%;height:100vh;box-sizing:border-box;background:#FFF;border-right:1px solid #d2d2d2}.steps-pane-container ul{list-style:none;padding:0;margin:0}.steps-pane-container ul li{border-bottom:1px solid #d2d2d2;text-shadow:none;cursor:default;padding:15px;color:#9b9b9b;position:relative;font-size:18px}.steps-pane-container ul li.current-step{text-shadow:none;background:#338caf;border-color:#a6ce39;border-style:none solid none none;border-width:5px;color:#FFF;font-weight:700}.steps-pane-container ul li.completed-step{color:#777;text-shadow:none}.steps-pane-container ul li.clickable-step-link{cursor:pointer}.steps-pane-container ul li.clickable-step-link:hover{color:#333}.steps-pane-container .logo{width:100%;text-align:left;padding:6px 0 0 15px;height:60px;border-bottom:1px solid #d2d2d2}.wizard-ext-container{overflow:hidden;box-sizing:border-box;box-shadow:0 0 4px rgba(0,0,0,.3)}.contents-pane-container{float:left;padding:15px;width:80%;height:100vh;position:relative;box-sizing:border-box;background:#F8F8F8;border:none}.contents-pane{overflow:auto;position:absolute;left:15px;right:15px;top:15px;bottom:61px;border:none;padding-left:2px}.hidden-form-slide{display:none}.disabled-button{color:rgba(0,0,0,.3)}.token_items pre{background-color:#fff;overflow:hidden}.token_items,.token_items a{width:60%;float:left;margin:0;padding:0;outline:0}.token_items a:hover,.token_items a:visited{text-decoration:none}.key,.value{float:left}.token_items_descriptions{width:20%;margin-left:20px;margin-top:60px}.token_items_descriptions,p.description{padding:0;float:left}#btn-menu-toggle{display:none;position:absolute;top:1.25em;right:5%;z-index:100;padding:.4em 2% .2em;color:#fff;font-weight:700;text-align:center;border-radius:.25em;background-color:#5b5756;background-image:-webkit-linear-gradient(top,#6b6766,#5b5756);background-image:-moz-linear-gradient(top,#6b6766,#5b5756);background-image:-ms-linear-gradient(top,#6b6766,#5b5756);background-image:-o-linear-gradient(top,#6b6766,#5b5756);background-image:linear-gradient(top,#6b6766,#5b5756)}#btn-menu-toggle:hover{background-color:#7b7776;background-image:-webkit-linear-gradient(top,#8b8786,#7b7776);background-image:-moz-linear-gradient(top,#8b8786,#7b7776);background-image:-ms-linear-gradient(top,#8b8786,#7b7776);background-image:-o-linear-gradient(top,#8b8786,#7b7776);background-image:linear-gradient(top,#8b8786,#7b7776)}@media all and (max-width:48em){.steps-pane-container{float:left;margin-left:-100%;width:300px;z-index:2}.contents-pane-container{float:left;margin-left:0;width:100%}#btn-menu-toggle{display:inline;text-decoration:none;cursor:pointer}.show-menu{margin-left:0;position:absolute}} \ No newline at end of file diff --git a/public/gulp_derived/js/.keep b/public/gulp_derived/js/.keep new file mode 100644 index 0000000..e69de29 diff --git a/js/app.js b/public/gulp_derived/js/client.js similarity index 86% rename from js/app.js rename to public/gulp_derived/js/client.js index 15f79de..97469d4 100644 --- a/js/app.js +++ b/public/gulp_derived/js/client.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(); }]); diff --git a/public/gulp_derived/js/client.min.js b/public/gulp_derived/js/client.min.js new file mode 100644 index 0000000..18f7300 --- /dev/null +++ b/public/gulp_derived/js/client.min.js @@ -0,0 +1 @@ +var wizardNgModule=angular.module("wizardApp",["ngCookies","ngResource"]).config(["$locationProvider","$resourceProvider",function(e,o){e.html5Mode(!0),o.defaults.stripTrailingSlashes=!0}]);wizardNgModule.controller("stepsController",["$scope","wizardSrvc","$location",function(e,o,t){e.steps=[{title:"Introduction"},{title:"Accessing the API"},{title:"Using the API"},{title:"Get access token"},{title:"Get token"},{title:"Show token"},{title:"Read record"},{title:"Update record"}],e.init=function(){var o=t.search().code;void 0===o||null===o?console.log("Nothing here"):(o=o.substr(0,6),e.wizardSrvc.current=4)},e.wizardSrvc=o,e.init()}]),wizardNgModule.controller("controlsController",["$scope","wizardSrvc",function(e,o){e.wizardSrvc=o,e.next=function(){o.next()},e.finish=function(){o.finish()},e.back=function(){o.back()}}]),wizardNgModule.controller("authorizationCodeController",["$scope","$cookies","wizardSrvc",function(e,o,t){"localhost"==location.hostname&&(e.form={},e.form.client_id="APP-1X454QYQ66U6XW7X"),e.authString="http://[api_url]/oauth/authorize?client_id=[client_id]&response_type=code&redirect_uri=[redirect_uri]&scope=[scope]",e.wizardSrvc=t,e.getAuthorizationCode=function(){var t=e.authString;t=t.replace("[api_url]","sandbox.orcid.org"),t=t.replace("[client_id]",e.form.client_id),t=t.replace("[redirect_uri]","http://"+location.hostname+":8000"),t=t.replace("[scope]","/activities/read-limited /activities/update /orcid-profile/read-limited"),console.log(t),o.put("current",e.wizardSrvc.current),o.put("orcid_oauth2_client_id",e.form.client_id),o.put("orcid_oauth2_redirect_uri","http://"+location.hostname+":8000"),setTimeout(function(){window.location.href=t},125)}}]),wizardNgModule.controller("tokenController",["$scope","$location","$cookies","$http",function(e,o,t,c){e.show_access_token=!1,e.expires_in=!1,e.name=!1,e.orcid=!1,e.scope=!1,e.token_type=!1,e.access_token=null,e.user_orcid=null,e.access_code=null,e.client_id=null,e.show_xml=!1,"localhost"==location.hostname&&(e.client_secret="8fa38bea-48e2-4238-9479-e55448ffa225"),e.getCode=function(){if(e.access_code=o.search().code,e.client_id=t.get("orcid_oauth2_client_id"),void 0===e.access_code||null===e.access_code)o.path("/");else{var c=o.search().code;e.access_code=c.substr(0,6)}},e.exchangeCode=function(){c({url:"http://pub.sandbox.orcid.org/oauth/token",method:"post",headers:{"Content-Type":"application/x-www-form-urlencoded",Accept:"application/json"},transformRequest:function(e){var o=[];for(var t in e)o.push(encodeURIComponent(t)+"="+encodeURIComponent(e[t]));var c=o.join("&");return console.log("****RETURNING "+c),c},data:{client_id:e.client_id,client_secret:e.client_secret,grant_type:"authorization_code",redirect_uri:"http://localhost:8000",code:e.access_code}}).success(function(o){e.wizardSrvc.current=5,e.token=o,e.access_token=o.access_token,e.user_orcid=o.orcid}).error(function(e,o,t,c){console.log("***OOPS "+o+" H: "+angular.toJson(e))})},e.show=function(o){switch(e.show_access_token=!1,e.show_expires_in=!1,e.show_name=!1,e.show_orcid=!1,e.show_scope=!1,e.show_token_type=!1,console.log(o),o){case"token":e.show_access_token=!0;break;case"expiration":e.show_expires_in=!0;break;case"name":e.show_name=!0;break;case"orcid":e.show_orcid=!0;break;case"scope":e.show_scope=!0;break;case"type":e.show_token_type=!0}},e.readRecord=function(){e.show_xml=!0},e.getCode()}]),wizardNgModule.service("wizardSrvc",["$rootScope",function(e){var o={current:0,elements:document.getElementsByClassName("step"),back:function(){o.current>0&&o.current--},next:function(){o.current==o.elements.length-1?o.current=0:o.current++},finish:function(){o.current=0}};return o}]); \ No newline at end of file diff --git a/img/ID_symbol.svg b/public/img/ID_symbol.svg similarity index 100% rename from img/ID_symbol.svg rename to public/img/ID_symbol.svg diff --git a/img/glyphicons-28-search-A6CE39.svg b/public/img/glyphicons-28-search-A6CE39.svg similarity index 100% rename from img/glyphicons-28-search-A6CE39.svg rename to public/img/glyphicons-28-search-A6CE39.svg diff --git a/img/glyphicons-31-pencil-A6CE39.svg b/public/img/glyphicons-31-pencil-A6CE39.svg similarity index 100% rename from img/glyphicons-31-pencil-A6CE39.svg rename to public/img/glyphicons-31-pencil-A6CE39.svg diff --git a/img/glyphicons-365-cloud-upload-A6CE39.svg b/public/img/glyphicons-365-cloud-upload-A6CE39.svg similarity index 100% rename from img/glyphicons-365-cloud-upload-A6CE39.svg rename to public/img/glyphicons-365-cloud-upload-A6CE39.svg diff --git a/img/glyphicons-433-plus-A6CE39.svg b/public/img/glyphicons-433-plus-A6CE39.svg similarity index 100% rename from img/glyphicons-433-plus-A6CE39.svg rename to public/img/glyphicons-433-plus-A6CE39.svg diff --git a/img/glyphicons-52-eye-open-A6CE39.svg b/public/img/glyphicons-52-eye-open-A6CE39.svg similarity index 100% rename from img/glyphicons-52-eye-open-A6CE39.svg rename to public/img/glyphicons-52-eye-open-A6CE39.svg diff --git a/img/glyphicons-86-repeat-A6CE39.svg b/public/img/glyphicons-86-repeat-A6CE39.svg similarity index 100% rename from img/glyphicons-86-repeat-A6CE39.svg rename to public/img/glyphicons-86-repeat-A6CE39.svg diff --git a/img/id-logo.png b/public/img/id-logo.png similarity index 100% rename from img/id-logo.png rename to public/img/id-logo.png diff --git a/img/orcid-logo.png b/public/img/orcid-logo.png similarity index 100% rename from img/orcid-logo.png rename to public/img/orcid-logo.png diff --git a/readme.MD b/readme.MD deleted file mode 100644 index f423756..0000000 --- a/readme.MD +++ /dev/null @@ -1,34 +0,0 @@ -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 dependencies - -``` -npm install gulp --save-dev -``` - -``` -npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-notify gulp-cache gulp-livereload gulp-plumber --save-dev -``` - -### Run web server - -``` -python3 -m http.server 8000 - -or - -python -m SimpleHTTPServer 8000 - -``` - -### Run gulp - -``` -gulp -``` - -Source JavaScript and SCSS files are under /src folder, do not modify files that are in the root (/CSS and /JS) \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 0000000..538eb5c --- /dev/null +++ b/server.js @@ -0,0 +1,299 @@ +var express = require('express'); +var https = require('https'); +var bodyParser = require('body-parser') + +var port = process.env.EXPRESSPORT != undefined ? process.env.EXPRESSPORT: '8000' + +var app = express(); +app.set('view engine', 'ejs'); +app.use(require('connect-livereload')({port: 35729})); +app.use(express.static(__dirname + '/public')); +app.use(bodyParser.urlencoded({ extended: false })) + +// Set the client credentials and the OAuth2 server +var credentials = { + clientID: '', + clientSecret: '', + site: 'https://sandbox.orcid.org', + tokenPath:'https://api.sandbox.orcid.org/oauth/token' +}; + +// Initialize the OAuth2 Library +var oauth2 = require('simple-oauth2')(credentials); + +//Local variables +var access_code = ''; +var my_token = ''; + +var get_record_msg = { + host : 'api.sandbox.orcid.org', + port : 443, + path : '/v1.2/[orcid]/orcid-profile', + method : 'GET', + headers: { + 'Accept': 'application/vnd.orcid+xml' + } // We will need to add the authorization header here, like this: 'Authorization': 'Bearer [bearer]', +}; + +var post_work_msg = { + host : 'api.sandbox.orcid.org', + port : 443, + path : '/v2.0_rc1/[orcid]/work', + method : 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + } // We will need to add the authorization header here, like this: 'Authorization': 'Bearer [bearer]', +}; + +var get_work_msg = { + host : 'api.sandbox.orcid.org', + port : 443, + path : '/v2.0_rc1/[orcid]/work/[work_id]', + method : 'GET', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + } // We will need to add the authorization header here, like this: 'Authorization': 'Bearer [bearer]', +}; + +var edit_work_msg = { + host : 'api.sandbox.orcid.org', + port : 443, + path : '/v2.0_rc1/[orcid]/work/[work_id]', + method : 'PUT', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + } // We will need to add the authorization header here, like this: 'Authorization': 'Bearer [bearer]', +}; + +// index page +app.get('/', function(req, res) { + res.render('pages/index', { + min: process.env.MINIMIZE == 'true' ? '.min':'' + }); +}); + +app.get('/introduction', function(req, res) { + res.render('pages/introduction'); +}); + +app.get('/accessing-api', function(req, res) { + res.render('pages/accessing_api'); +}); + +app.get('/using-api', function(req, res) { + res.render('pages/using_api'); +}); + +app.get('/get-authorization-code', function(req, res) { + res.render('pages/get_authorization_code'); +}); + +app.post('/get-authorization-code-action', function(req, res) { + credentials.clientID = req.body.client_id; + credentials.clientSecret = req.body.secret; + + var authorization_uri = oauth2.authCode.authorizeURL({ + redirect_uri: 'http://localhost:8000/callback', + scope: '/activities/update /activities/read-limited /orcid-profile/read-limited', + state: 'nope' + }); + + res.redirect(authorization_uri); +}); + +// Get the access token object (the authorization code is given from the previous step). +app.get('/callback', function(req, res) { + access_code = req.query.code; + res.render('pages/show_authorization_code', { + 'access_code' : access_code + }); +}); + +app.get('/get-access-token', function(req, res) { + oauth2.authCode.getToken({ + code: access_code, + redirect_uri: 'http://localhost:8000/callback' + }, function(error, result){ + my_token = oauth2.accessToken.create(result); + res.redirect('http://localhost:8000/show-token'); + }); +}); + +app.get('/show-token', function(req, res) { + res.render('pages/token', { + 'access_token': my_token.token.access_token, + 'token_type': my_token.token.token_type, + 'expires_in': my_token.token.expires_in, + 'scope': my_token.token.scope, + 'orcid': my_token.token.orcid, + 'name': my_token.token.name, + 'expires_at': my_token.token.expires_at + }) +}); + +app.get('/get-record', function(req, res){ + //Add bearer header + get_record_msg.headers['Authorization'] = 'Bearer ' + my_token.token.access_token; + //Replace the orcid placeholder in the path + get_record_msg.path = get_record_msg.path.replace('[orcid]', my_token.token.orcid); + + var record_data = ''; + + var req_get_record = https.request(get_record_msg, function(resp) { + resp.on('data', function(d) { + record_data += d; + }); + resp.on('error', function(e){ + console.error(e); + }); + resp.on('end', function(){ + res.render('pages/record', { + 'record': record_data, + 'orcid': my_token.token.orcid + }) + }); + }); + + req_get_record.end(); +}); + +app.get('/add-work', function(req, res){ + res.render('pages/add_work', { + 'orcid': my_token.token.orcid, + 'success_message': '' + }) +}); + +app.post('/add-work-action', function(req, res){ + var new_work = { + title : { title : req.body.title}, + type : req.body.type + } + + var work_string = JSON.stringify(new_work); + var content_length = work_string.length + + //Add bearer header + post_work_msg.headers['Authorization'] = 'Bearer ' + my_token.token.access_token; + //Add content length + post_work_msg.headers['Content-Length'] = content_length; + //Replace the orcid placeholder in the path + post_work_msg.path = post_work_msg.path.replace('[orcid]', my_token.token.orcid); + + var record_data = ''; + var req_post_work = https.request(post_work_msg, function(resp) { + resp.on('data', function(d) { + record_data += d; + }); + resp.on('error', function(e){ + console.error(e); + }); + resp.on('end', function(){ + var new_work_id = (resp.headers.location).substring((resp.headers.location).lastIndexOf('/') + 1); + res.render('pages/add_work', { + 'orcid': my_token.token.orcid, + 'success_message': 'Your work has been added!', + 'work_id': new_work_id + }) + }); + }); + req_post_work.write(work_string); + req_post_work.end(); +}); + +app.get('/edit-work', function(req, res){ + var work_id = req.query.work_id; + var updated = req.query.updated; + get_work_msg.path = get_work_msg.path.replace('[orcid]', my_token.token.orcid); + get_work_msg.path = get_work_msg.path.replace('[work_id]', work_id); + get_work_msg.headers['Authorization'] = 'Bearer ' + my_token.token.access_token; + var work_data = ''; + + var req_get_work = https.request(get_work_msg, function(resp) { + resp.on('data', function(d) { + work_data += d; + }); + resp.on('error', function(e){ + console.error(e); + }); + resp.on('end', function(){ + var work_obj = JSON.parse(work_data); + res.render('pages/edit_work', { + 'work_data': work_data, + 'work_id': work_obj['put-code'], + 'title': work_obj.title.title.value, + 'type': work_obj.type, + 'visibility': work_obj.visibility, + 'updated': updated + }) + }); + }); + + req_get_work.end(); +}); + +app.post('/edit-work-action', function(req, res){ + var work_id = req.body.work_id; + var work_title = req.body.title; + var work_type = req.body.type; + + var edit_work = { + 'put-code': work_id, + title : { title : work_title}, + type : work_type + } + + var work_string = JSON.stringify(edit_work); + var content_length = work_string.length + + console.log('content lenght: ' + content_length) + + //Add bearer header + edit_work_msg.headers['Authorization'] = 'Bearer ' + my_token.token.access_token; + //Add content length + edit_work_msg.headers['Content-Length'] = content_length; + //Replace the orcid place holder in the path + edit_work_msg.path = edit_work_msg.path.replace('[orcid]', my_token.token.orcid); + //Replace the work_id place holder in the path + edit_work_msg.path = edit_work_msg.path.replace('[work_id]', work_id); + + console.log(JSON.stringify(edit_work_msg)) + + var work_data = ''; + var req_put_work = https.request(edit_work_msg, function(resp) { + resp.on('data', function(d) { + work_data += d; + }); + resp.on('error', function(e){ + console.error(e); + }); + resp.on('end', function(){ + var work_obj = JSON.parse(work_data); + console.log('Updted work obj:'); + console.log(JSON.stringify(work_obj)); + res.redirect('http://localhost:8000/edit-work?work_id=' + work_id + '&updated=true'); + }); + }); + req_put_work.write(work_string); + req_put_work.end(); + +}); + + + + + + + + + + + + + +app.listen(port, function (){ + console.log('server started on ' + port); +}); diff --git a/src/.DS_Store b/src/.DS_Store deleted file mode 100644 index 43353c9..0000000 Binary files a/src/.DS_Store and /dev/null differ diff --git a/src/js/app.js b/src/js/client.js similarity index 100% rename from src/js/app.js rename to src/js/client.js diff --git a/src/scss/style.scss b/src/scss/style.scss index 4b35358..52ce138 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -111,8 +111,9 @@ tr:last-of-type{ .steps-pane-container { border: none; float: left; - min-width: 15%; - width: auto; + //min-width: 15%; + //width: auto; + width: 20%; height: 100vh; box-sizing: border-box; background: none repeat scroll 0 0 #FFFFFF; @@ -169,8 +170,9 @@ tr:last-of-type{ .contents-pane-container { float: left; padding: 15px; - min-width: 85%; - width: auto; + //min-width: 85%; + //width: auto; + width: 80%; height: 100vh; position: relative; box-sizing: border-box; @@ -232,4 +234,48 @@ p.description { padding: 0; float: left; } +//responsive menu + +#btn-menu-toggle { + display: none; + position: absolute; + top: 1.25em; + right: 5%; + z-index: 100; + padding: 0.4em 2% 0.2em 2%; + color: #fff; + font-weight: bold; + text-transform: uppercase; + text-align: center; + border-radius: 0.25em; + background-color: #5b5756; + background-image: -webkit-linear-gradient(top, #6b6766, #5b5756); + background-image: -moz-linear-gradient(top, #6b6766, #5b5756); + background-image: -ms-linear-gradient(top, #6b6766, #5b5756); + background-image: -o-linear-gradient(top, #6b6766, #5b5756); + background-image: linear-gradient(top, #6b6766, #5b5756); +} + +#btn-menu-toggle:hover { + background-color: #7b7776; + background-image: -webkit-linear-gradient(top, #8b8786, #7b7776); + background-image: -moz-linear-gradient(top, #8b8786, #7b7776); + background-image: -ms-linear-gradient(top, #8b8786, #7b7776); + background-image: -o-linear-gradient(top, #8b8786, #7b7776); + background-image: linear-gradient(top, #8b8786, #7b7776); +} + + +//if mobile, hide the menu + +@media all and (max-width:48.000em){ +.steps-pane-container { float: left; margin-left: -100%; width: 300px; z-index: 2; } +.contents-pane-container { float: left; margin-left: 0; width: 100%; } +#btn-menu-toggle {display: inline; text-decoration: none; cursor: pointer;} +.show-menu{margin-left: 0; position: absolute;} + + +} + + diff --git a/views/layouts/.keep b/views/layouts/.keep new file mode 100644 index 0000000..e69de29 diff --git a/views/pages/accessing_api.ejs b/views/pages/accessing_api.ejs new file mode 100644 index 0000000..aee3baf --- /dev/null +++ b/views/pages/accessing_api.ejs @@ -0,0 +1,49 @@ + + +
+ <% include ../partials/head %> + + +
+ To access any of the ORCID APIs, you'll need a set of credentials consisting of:
+These credentials are simliar to a username and password.
+For this tutorial, we'll provide a set of credentials for you.
+When you start building your own application, you'll need to Get Your Own ORCID API Credentials
+
+ Here, we create a new work and add it to the record of user <%= orcid %>
+ <% if (success_message) { %> +<%= success_message %>
+
+ Work as a JSON string:
+ <% if (updated) { %> +You just updated this work!
+ <% } %> ++<%=work_data%> ++ +
This work is stored in ORCID with the id <%= work_id %>
+Title: <%= title %>
+Type: <%= type %>
+Do you want to update this work?
+ +
+ Here, we ask the user for permissions over his ORCID record
+ +