Parse and display user image if available. Fixes #174 and #329

css/app.css

@@ -853,6 +853,15 @@ div.typeahead a:first-child {
     max-height: 160px;
 }
 
+.commit-modal .user-details {
+    float: right;
+}
+
+.user-icon {
+    max-width: 50px;
+    max-height: 50px;
+}
+
 .modal-section {
     padding: 20px;
     border-bottom: 1px solid #ccc;

js/id/connection.js

@@ -130,9 +130,15 @@ iD.Connection = function() {
 
     function userDetails(callback) {
         function done(err, user_details) {
-            var u = user_details.getElementsByTagName('user')[0];
+            var u = user_details.getElementsByTagName('user')[0],
+                img = u.getElementsByTagName('img'),
+                image_url = '';
+            if (img && img[0].getAttribute('href')) {
+                image_url = img[0].getAttribute('href');
+            }
             callback(connection.user({
                 display_name: u.attributes.display_name.nodeValue,
+                image_url: image_url,
                 id: u.attributes.id.nodeValue
             }).user());
         }

js/id/id.js

@@ -143,9 +143,11 @@ window.iD = function(container) {
                 if (has_changes) {
                     connection.authenticate(function(err) {
                         var modal = iD.modal();
+                        var changes = history.changes();
+                        changes.connection = connection;
                         modal.select('.content')
                             .classed('commit-modal', true)
-                            .datum(history.changes())
+                            .datum(changes)
                             .call(iD.commit()
                                 .on('cancel', function() {
                                     modal.remove();

js/id/ui/commit.js

@@ -1,12 +1,61 @@
 iD.commit = function() {
     var event = d3.dispatch('cancel', 'save');
+    
+    function zipSame(d) {
+        var c = [], n = -1;
+        for (var i = 0; i < d.length; i++) {
+            var desc = {
+                name: d[i].friendlyName(),
+                type: d[i].type,
+                count: 1,
+                tagText: iD.util.tagText(d[i])
+            };
+            if (c[n] &&
+                c[n].name == desc.name &&
+                c[n].tagText == desc.tagText) {
+                c[n].count++;
+            } else {
+                c[++n] = desc;
+            }
+        }
+        return c;
+    }
 
     function commit(selection) {
+
+        function changesLength(d) { return changes[d].length; }
+
         var changes = selection.datum(),
+            connection = changes.connection,
+            user = connection.user(),
             header = selection.append('div').attr('class', 'header modal-section'),
             body = selection.append('div').attr('class', 'body');
 
+
+        var user_details = header
+            .append('div')
+            .attr('class', 'user-details');
+
+        var user_link = user_details
+            .append('div')
+            .append('a')
+                .attr('href', connection.url() + '/user/' +
+                      user.display_name)
+                .attr('target', '_blank');
+
+        if (user.image_url) {
+            user_link
+                .append('img')
+                .attr('src', user.image_url)
+                .attr('class', 'user-icon');
+        }
+
+        user_link
+            .append('div')
+            .text(user.display_name);
+
         header.append('h2').text('Upload Changes to OpenStreetMap');
+
         header.append('p').text('The changes you upload will be visible on all maps that use OpenStreetMap data.');
 
         var commit = body.append('div').attr('class','modal-section');
@@ -35,8 +84,6 @@ iD.commit = function() {
             cancelbutton.append('span').attr('class','icon close icon-pre-text');
             cancelbutton.append('span').attr('class','label').text('Cancel');
 
-        function changesLength(d) { return changes[d].length; }
-
         var section = body.selectAll('div.commit-section')
             .data(['modified', 'deleted', 'created'].filter(changesLength))
             .enter()
@@ -47,26 +94,6 @@ iD.commit = function() {
             .attr('class', 'count')
             .text(changesLength);
 
-        function zipSame(d) {
-            var c = [], n = -1;
-            for (var i = 0; i < d.length; i++) {
-                var desc = {
-                    name: d[i].friendlyName(),
-                    type: d[i].type,
-                    count: 1,
-                    tagText: iD.util.tagText(d[i])
-                };
-                if (c[n] &&
-                    c[n].name == desc.name &&
-                    c[n].tagText == desc.tagText) {
-                    c[n].count++;
-                } else {
-                    c[++n] = desc;
-                }
-            }
-            return c;
-        }
-
         var li = section.append('ul')
             .attr('class','changeset-list')
             .selectAll('li')

js/id/ui/userpanel.js

@@ -7,7 +7,14 @@ iD.userpanel = function(connection) {
             if (connection.authenticated()) {
                 selection.style('display', 'block');
                 connection.userDetails(function(user_details) {
-                    selection.append('span').attr('class','icon avatar icon-pre-text');
+                    if (user_details.image_url) {
+                        selection.append('img')
+                            .attr('class', 'icon icon-pre-text')
+                            .attr('src', user_details.image_url);
+                    } else {
+                        selection.append('span')
+                            .attr('class','icon avatar icon-pre-text');
+                    }
                     selection.append('span')
                         .append('a')
                             .attr('href', connection.url() + '/user/' +