From f0b60dac9f0f1ae5f572ba30f8eb377623fa3526 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Mon, 26 Nov 2012 15:33:41 -0500 Subject: [PATCH] Namespace oauth keys, link to user, fixup modal style --- css/app.css | 19 ++++++++++++++++- js/iD/Connection.js | 14 ++++++------- js/iD/OAuth.js | 50 +++++++++++++++++++++++++++++---------------- js/iD/id.js | 15 +++++++++++--- 4 files changed, 69 insertions(+), 29 deletions(-) diff --git a/css/app.css b/css/app.css index 359c3031b..cdadef524 100644 --- a/css/app.css +++ b/css/app.css @@ -82,6 +82,16 @@ input[type=text]:focus { right:200px; top:0; padding:10px; + overflow:hidden; + width:100px; +} + +#bar .user { + width:200px; + position:absolute; + right:300px; + top:0; + padding:10px; } #bar button[disabled] { @@ -98,7 +108,7 @@ input[type=text]:focus { color:#000; } -#bar button#save { +#bar button.save { position:absolute; top:0; right:100px; @@ -210,3 +220,10 @@ button small { margin-left:-330px; box-shadow:0 0 5px #000; } + +.shaded:before { + content:''; + background:rgba(0,0,0,0.5); + position:fixed; + left:0px; right:0px; top:0px; bottom:0px; +} diff --git a/js/iD/Connection.js b/js/iD/Connection.js index fd5948560..765fdfd6d 100644 --- a/js/iD/Connection.js +++ b/js/iD/Connection.js @@ -1,5 +1,5 @@ iD.Connection = function() { - var apiURL = 'http://www.openstreetmap.org/api/0.6', + var apiURL = 'http://www.openstreetmap.org', connection = {}, refNodes = {}, user = {}, @@ -7,13 +7,13 @@ iD.Connection = function() { // Request data within the bbox from an external OSM server. function bboxFromAPI(box, callback) { - loadFromURL(apiURL + '/map?bbox=' + + loadFromURL(apiURL + '/api/0.6/map?bbox=' + [box[0][0], box[1][1], box[1][0], box[0][1]], callback); } // Request data within the bbox from an external OSM server. function wayFromAPI(id, callback) { - loadFromURL(apiURL + '/way/' + id + '/full', callback); + loadFromURL(apiURL + '/api/0.6/way/' + id + '/full', callback); } function loadFromURL(url, callback) { @@ -100,20 +100,20 @@ iD.Connection = function() { function createChangeset(changes) { oauth.xhr({ method: 'PUT', - path: '/changeset/create', + path: '/api/0.6/changeset/create', options: { header: { 'Content-Type': 'text/xml' } }, content: iD.format.XML.changeset() }, function (changeset_id) { oauth.xhr({ method: 'POST', - path: '/changeset/' + changeset_id + '/upload', + path: '/api/0.6/changeset/' + changeset_id + '/upload', options: { header: { 'Content-Type': 'text/xml' } }, content: iD.format.XML.osmChange(user.id, changeset_id, changes) }, function () { oauth.xhr({ method: 'PUT', - path: '/changeset/' + changeset_id + '/close' + path: '/api/0.6/changeset/' + changeset_id + '/close' }, function () { alert('saved! ' + apiURL.replace('/api/0.6', '/browse') + '/changeset/' + changeset_id); }); @@ -122,7 +122,7 @@ iD.Connection = function() { } function userDetails(callback) { - oauth.xhr({ method: 'GET', path: '/user/details' }, function(user_details) { + oauth.xhr({ method: 'GET', path: '/api/0.6/user/details' }, function(user_details) { var u = user_details.getElementsByTagName('user')[0]; callback({ display_name: u.attributes.display_name.nodeValue, diff --git a/js/iD/OAuth.js b/js/iD/OAuth.js index ffb638349..e5f90df75 100644 --- a/js/iD/OAuth.js +++ b/js/iD/OAuth.js @@ -1,6 +1,6 @@ iD.OAuth = function() { var baseurl = 'http://api06.dev.openstreetmap.org', - apibase = 'http://api06.dev.openstreetmap.org/api/0.6', + apibase = 'http://api06.dev.openstreetmap.org', oauth_secret = 'aMnOOCwExO2XYtRVWJ1bI9QOdqh1cay2UgpbhA6p', oauth = {}; @@ -9,6 +9,8 @@ iD.OAuth = function() { oauth_signature_method: 'HMAC-SHA1' }; + function keyclean(x) { return x.replace(/\W/g, ''); } + if (localStorage.oauth_token) { o.oauth_token = localStorage.oauth_token; } @@ -19,19 +21,30 @@ iD.OAuth = function() { return o; } + function token(k, x) { + if (arguments.length == 2) { + localStorage[keyclean(apibase) + k] = x; + } + return localStorage[keyclean(apibase) + k]; + } + oauth.authenticated = function() { - return localStorage.oauth_token && - localStorage.oauth_token_secret; + return token('oauth_token') && token('oauth_token_secret'); + }; + + oauth.logout = function() { + token('oauth_token', ''); + token('oauth_token_secret', ''); + return ouath; }; oauth.xhr = function(options, callback) { - if (localStorage.oauth_token) { - o.oauth_token = localStorage.oauth_token; + if (token('oauth_token')) { + o.oauth_token = token('oauth_token'); } o = timenonce(o); var url = apibase + options.path; - console.log(apibase, options.path); - var oauth_token_secret = localStorage.oauth_token_secret; + var oauth_token_secret = token('oauth_token_secret'); o.oauth_signature = ohauth.signature(oauth_secret, oauth_token_secret, ohauth.baseString(options.method, url, o)); ohauth.xhr(options.method, url, o, options.content, options.options, function(xhr) { @@ -44,10 +57,11 @@ iD.OAuth = function() { // TODO: deal with changing the api endpoint if (oauth.authenticated()) return callback(); - var d = d3.select(document.body) - .append('div').attr('class', 'modal'), - ifr = d.append('iframe') - .attr({ width: 640, height: 550, frameborder: 'no' }); + var shaded = d3.select(document.body) + .append('div').attr('class', 'shaded'); + var modal = shaded.append('div').attr('class', 'modal'); + var ifr = modal.append('iframe') + .attr({ width: 640, height: 550, frameborder: 'no' }); o = timenonce(o); var url = baseurl + '/oauth/request_token'; @@ -55,11 +69,11 @@ iD.OAuth = function() { ohauth.baseString('POST', url, o)); ohauth.xhr('POST', url, o, null, {}, function(xhr) { - var token = ohauth.stringQs(xhr.response); - localStorage.oauth_request_token_secret = token.oauth_token_secret; + var resp = ohauth.stringQs(xhr.response); + token('oauth_request_token_secret', resp.oauth_token_secret); var at = baseurl + '/oauth/authorize?'; ifr.attr('src', at + ohauth.qsString({ - oauth_token: token.oauth_token, oauth_callback: location.href + oauth_token: resp.oauth_token, oauth_callback: location.href })); }); ifr.on('load', function() { @@ -68,16 +82,16 @@ iD.OAuth = function() { oauth_token = ohauth.stringQs(search.slice(1)), url = baseurl + '/oauth/access_token'; o = timenonce(o); - d.remove(); + shaded.remove(); o.oauth_token = oauth_token.oauth_token; - var request_token_secret = localStorage.oauth_request_token_secret; + var request_token_secret = token('oauth_request_token_secret'); o.oauth_signature = ohauth.signature(oauth_secret, request_token_secret, ohauth.baseString('POST', url, o)); ohauth.xhr('POST', url, o, null, {}, function(xhr) { var access_token = ohauth.stringQs(xhr.response); - localStorage.oauth_token = access_token.oauth_token; - localStorage.oauth_token_secret = access_token.oauth_token_secret; + token('oauth_token', access_token.oauth_token); + token('oauth_token_secret', access_token.oauth_token_secret); callback(); }); } diff --git a/js/iD/id.js b/js/iD/id.js index e228635d6..27407cfad 100644 --- a/js/iD/id.js +++ b/js/iD/id.js @@ -5,7 +5,7 @@ var iD = function(container) { .attr('id', 'map'); var connection = iD.Connection() - .url('http://api06.dev.openstreetmap.org/api/0.6'); + .url('http://api06.dev.openstreetmap.org'); var map = iD.Map(m.node(), connection); @@ -58,8 +58,13 @@ var iD = function(container) { bar.append('div') .attr('class', 'messages'); + bar.append('div') + .attr('class', 'user') + .append('div') + .attr('class', 'hello'); + bar.append('button') - .attr('id', 'save') + .attr('class', 'save') .html("Save") .on('click', function() { connection.authenticate(function() { @@ -129,7 +134,11 @@ var iD = function(container) { if (connection.authenticated()) { connection.userDetails(function(user_details) { connection.user(user_details); - d3.select('.messages').text('logged in as ' + user_details.display_name); + d3.select('.user .hello').text('hi, ') + .append('a') + .attr('href', connection.url() + '/user/' + user_details.display_name) + .attr('target', '_blank') + .text(user_details.display_name); }); } };