Add logout button, fix # 23

Logic/OsmConnection.ts

@@ -49,6 +49,9 @@ export class OsmConnection {
 
     public LogOut() {
         this.auth.logout();
+        this.userDetails.data.loggedIn = false;
+        this.userDetails.ping();
+        console.log("Logged out")
     }
 
     public AttemptLogin() {
@@ -76,7 +79,7 @@ export class OsmConnection {
 
             let data = self.userDetails.data;
             data.loggedIn = true;
-            console.log(userInfo);
+            console.log("Log incompleted, userinfo is ", userInfo);
             data.name = userInfo.getAttribute('display_name');
             data.csCount = userInfo.getElementsByTagName("changesets")[0].getAttribute("count");
 

README.md

@@ -78,5 +78,7 @@ Camera Icon, Dave Gandy, CC-BY-SA 3.0
 https://commons.wikimedia.org/wiki/File:OOjs_UI_indicator_search-rtl.svg
 Search Icon, MIT
 
+
+ 	
 https://commons.wikimedia.org/wiki/File:Home-icon.svg
 Home icon by Timothy Miller, CC-BY-SA 3.0

UI/UserBadge.ts

@@ -23,14 +23,19 @@ export class UserBadge extends UIElement {
         this._pendingChanges = pendingChanges;
         this._basemap = basemap;
 
-        this._logout = new FixedUiElement("<img src='assets/logout.svg' alt='logout'>")
+        this._logout = new FixedUiElement("<img src='assets/logout.svg' class='small-userbadge-icon' alt='logout'>")
-            .onClick(() => {userDetails.data.osmConnection.LogOut();});
+            .onClick(() => {
+                userDetails.data.osmConnection.LogOut();
+            });
 
         userDetails.addCallback(function () {
             const profilePic = document.getElementById("profile-pic");
+            if (profilePic) {
+
                 profilePic.onload = function () {
                     profilePic.style.opacity = "1"
                 };
+            }
         });
 
     }
@@ -92,6 +97,7 @@ export class UserBadge extends UIElement {
             "<span id='csCount'> " +
             "   <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='small-userbadge-icon' src='./assets/star.svg' alt='star'/> " + user.csCount +
             "</a></span> " +
+            this._logout.Render() +
             this._pendingChanges.Render() +
             "</p>" +
        
@@ -112,6 +118,7 @@ export class UserBadge extends UIElement {
 
             }
         }
+        this._logout.Update();
     }
     
     Activate() {

assets/logout.svg

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100"
+   height="100"
+   viewBox="0 0 26.458333 26.458334"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="logout.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="23.385148"
+     inkscape:cy="69.345626"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="1013"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-nodes="false">
+    <sodipodi:guide
+       position="13.229167,23.859748"
+       orientation="1,0"
+       id="guide815"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="14.944824,13.229167"
+       orientation="0,1"
+       id="guide817"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-270.54165)">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2.80336833;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 18.611217,277.1845 c 0,0 6.517226,4.80116 6.540324,6.59809 0.02311,1.79692 -6.540324,6.61409 -6.540324,6.61409"
+       id="path821"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2.38125001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 24.831034,283.7682 H 9.9804997 v 0"
+       id="path815"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2.21004868;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 11.765496,277.99911 v -2.01547 c 0,-2.34108 -1.8943631,-2.37258 -1.8943631,-2.37258 0,0 -3.7205638,-0.0526 -6.0661374,-0.0526 -2.3455737,0 -2.087099,2.36246 -2.087099,2.36246 l -0.015829,7.9293"
+       id="path819"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cscscc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2.21004868;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 11.765496,289.70121 v 2.01546 c 0,2.34108 -1.8943631,2.37258 -1.8943631,2.37258 0,0 -3.7205636,0.0527 -6.0661373,0.0527 -2.3455738,0 -2.1574723,-2.33048 -2.1574723,-2.33048 l 0.054544,-7.96128"
+       id="path819-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cscscc" />
+  </g>
+</svg>