Create userpanel, fix user logging in and out, fixes #122

index.html

@@ -26,6 +26,7 @@
         <script type='text/javascript' src='js/iD/renderer/markers.js'></script>
         <script type='text/javascript' src='js/iD/ui/Inspector.js'></script>
         <script type='text/javascript' src='js/iD/ui/commit.js'></script>
+        <script type='text/javascript' src='js/iD/ui/userpanel.js'></script>
 
         <script type='text/javascript' src='js/iD/actions/modes.js'></script>
         <script type='text/javascript' src='js/iD/actions/actions.js'></script>

js/iD/Connection.js

@@ -1,5 +1,6 @@
 iD.Connection = function() {
-    var apiURL = 'http://www.openstreetmap.org',
+    var event = d3.dispatch('auth'),
+        apiURL = 'http://www.openstreetmap.org',
         connection = {},
         refNodes = {},
         user = {},
@@ -90,7 +91,10 @@ iD.Connection = function() {
     }
 
     function authenticate(callback) {
-        return oauth.authenticate(callback);
+        return oauth.authenticate(function() {
+            event.auth();
+            if (callback) callback();
+        });
     }
 
     function authenticated() {
@@ -124,10 +128,10 @@ iD.Connection = function() {
     function userDetails(callback) {
         oauth.xhr({ method: 'GET', path: '/api/0.6/user/details' }, function(user_details) {
             var u = user_details.getElementsByTagName('user')[0];
-            callback({
+            callback(connection.user({
                 display_name: u.attributes.display_name.nodeValue,
                 id: u.attributes.id.nodeValue
-            });
+            }).user());
         });
     }
 
@@ -146,6 +150,7 @@ iD.Connection = function() {
 
     connection.logout = function() {
         oauth.logout();
+        event.auth();
         return connection;
     };
 
@@ -160,5 +165,5 @@ iD.Connection = function() {
     connection.objectData = objectData;
     connection.apiURL = apiURL;
 
-    return connection;
+    return d3.rebind(connection, event, 'on');
 };

js/iD/id.js

@@ -125,7 +125,6 @@ var iD = function(container) {
     };
 
     d3.select(document).on('keydown', function() {
-        // console.log(d3.event);
         // cmd-z
         if (d3.event.which === 90 && d3.event.metaKey) {
             map.undo();
@@ -134,31 +133,13 @@ var iD = function(container) {
         if (d3.event.which === 90 && d3.event.metaKey && d3.event.shiftKey) {
             map.redo();
         }
-        // if (d3.event.which === 80) controller.enter(iD.modes.AddPlace); // p
-        // if (d3.event.which === 82) controller.enter(iD.modes.AddRoad); // r
-        // if (d3.event.which === 65) controller.enter(iD.modes.AddArea); // a
     });
 
     var hash = iD.Hash().map(map);
     if (!hash.hadHash) map.setZoom(19).setCenter([-1.49475, 51.87502]);
-    if (connection.authenticated()) {
-        connection.userDetails(function(user_details) {
-            connection.user(user_details);
-            d3.select('.user').html('');
-            d3.select('.user')
-                .append('span')
-                .text('signed in as ')
-                .append('a')
-                    .attr('href', connection.url() + '/user/' + user_details.display_name)
-                    .attr('target', '_blank')
-                    .text(user_details.display_name);
-            d3.select('.user')
-                .append('a')
-                .attr('class', 'logout')
-                .text('logout')
-                .on('click', connection.logout);
-        });
-    }
+    d3.select('.user').call(iD.userpanel(connection)
+        .on('logout', connection.logout)
+        .on('login', connection.authenticate));
 };
 
 iD.supported = function() {

js/iD/ui/userpanel.js

@@ -0,0 +1,35 @@
+iD.userpanel = function(connection) {
+    var event = d3.dispatch('logout', 'login');
+
+    function user(selection) {
+        function update() {
+            selection.html('');
+            if (connection.authenticated()) {
+                connection.userDetails(function(user_details) {
+                    selection.append('span')
+                        .text('signed in as ')
+                        .append('a')
+                            .attr('href', connection.url() + '/user/' +
+                                  user_details.display_name)
+                            .attr('target', '_blank')
+                            .text(user_details.display_name);
+                    selection
+                        .append('a')
+                        .attr('class', 'logout')
+                        .text('logout')
+                        .on('click', event.logout);
+                });
+            } else {
+                selection
+                    .append('a')
+                    .attr('class', 'login')
+                    .text('login')
+                    .on('click', event.login);
+            }
+        }
+        connection.on('auth', update);
+        update();
+    }
+
+    return d3.rebind(user, event, 'on');
+};