Add logout button, fix # 23

This commit is contained in:
Pieter Vander Vennet 2020-07-01 17:51:55 +02:00
parent b1775d8184
commit 118a60c805
4 changed files with 113 additions and 7 deletions

View file

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

View file

@ -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 https://commons.wikimedia.org/wiki/File:OOjs_UI_indicator_search-rtl.svg
Search Icon, MIT Search Icon, MIT
https://commons.wikimedia.org/wiki/File:Home-icon.svg https://commons.wikimedia.org/wiki/File:Home-icon.svg
Home icon by Timothy Miller, CC-BY-SA 3.0 Home icon by Timothy Miller, CC-BY-SA 3.0

View file

@ -23,14 +23,19 @@ export class UserBadge extends UIElement {
this._pendingChanges = pendingChanges; this._pendingChanges = pendingChanges;
this._basemap = basemap; 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 () { userDetails.addCallback(function () {
const profilePic = document.getElementById("profile-pic"); const profilePic = document.getElementById("profile-pic");
if (profilePic) {
profilePic.onload = function () { profilePic.onload = function () {
profilePic.style.opacity = "1" profilePic.style.opacity = "1"
}; };
}
}); });
} }
@ -92,6 +97,7 @@ export class UserBadge extends UIElement {
"<span id='csCount'> " + "<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 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> " + "</a></span> " +
this._logout.Render() +
this._pendingChanges.Render() + this._pendingChanges.Render() +
"</p>" + "</p>" +
@ -112,6 +118,7 @@ export class UserBadge extends UIElement {
} }
} }
this._logout.Update();
} }
Activate() { Activate() {

94
assets/logout.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 3.6 KiB