Skip to content

Commit

Permalink
Show loading screen when logging in
Browse files Browse the repository at this point in the history
  • Loading branch information
@pietervdvn
pietervdvn committed Feb 15, 2022
1 parent 0a43a69 commit e721146
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 353 deletions.
9 changes: 8 additions & 1 deletion Logic/Osm/OsmConnection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export class OsmConnection {
public auth;
public userDetails: UIEventSource<UserDetails>;
public isLoggedIn: UIEventSource<boolean>
public loadingStatus = new UIEventSource<"not-attempted" | "loading" | "error" | "logged-in">("not-attempted")
public preferencesHandler: OsmPreferences;
public changesetHandler: ChangesetHandler;
public readonly _oauth_config: {
Expand Down Expand Up @@ -141,10 +142,13 @@ export class OsmConnection {
this.userDetails.data.name = "";
this.userDetails.ping();
console.log("Logged out")
this.loadingStatus.setData("not-attempted")
}

public AttemptLogin() {
this.loadingStatus.setData("loading")
if (this.fakeUser) {
this.loadingStatus.setData("logged-in")
console.log("AttemptLogin called, but ignored as fakeUser is set")
return;
}
Expand All @@ -157,6 +161,7 @@ export class OsmConnection {
}, function (err, details) {
if (err != null) {
console.log(err);
self.loadingStatus.setData("error")
if (err.status == 401) {
console.log("Clearing tokens...")
// Not authorized - our token probably got revoked
Expand All @@ -171,6 +176,7 @@ export class OsmConnection {
}

if (details == null) {
self.loadingStatus.setData("error")
return;
}

Expand Down Expand Up @@ -202,6 +208,7 @@ export class OsmConnection {
data.home = {lat: lat, lon: lon};
}

self.loadingStatus.setData("logged-in")
const messages = userInfo.getElementsByTagName("messages")[0].getElementsByTagName("received")[0];
data.unreadMessages = parseInt(messages.getAttribute("unread"));
data.totalMessages = parseInt(messages.getAttribute("count"));
Expand Down Expand Up @@ -305,7 +312,7 @@ export class OsmConnection {
})

}

public addCommentToNode(id: number | string, text: string): Promise<any> {
if (this._dryRun.data) {
console.warn("Dryrun enabled - not actually adding comment ", text, "to note ", id)
Expand Down
24 changes: 7 additions & 17 deletions UI/BigComponents/UserBadge.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,12 @@ import Link from "../Base/Link";
import Toggle from "../Input/Toggle";
import Img from "../Base/Img";
import MapState from "../../Logic/State/MapState";
import {LoginToggle} from "../Popup/LoginButton";

export default class UserBadge extends Toggle {
export default class UserBadge extends LoginToggle {

constructor(state: MapState) {


const userDetails = state.osmConnection.userDetails;

const loginButton = Translations.t.general.loginWithOpenStreetMap
.Clone()
.SetClass("userbadge-login inline-flex justify-center items-center w-full h-full text-lg font-bold min-w-[20em]")
.onClick(() => state.osmConnection.AttemptLogin());


const logout =
Svg.logout_svg()
.onClick(() => {
Expand Down Expand Up @@ -126,16 +118,14 @@ export default class UserBadge extends Toggle {
}
}));

userBadge.SetClass("inline-block m-0 w-full").SetStyle("pointer-events: all")
super(
userBadge,
loginButton,
state.osmConnection.isLoggedIn
new Combine([userBadge.SetClass("inline-block m-0 w-full").SetStyle("pointer-events: all")])
.SetClass("shadow rounded-full h-min overflow-hidden block w-full md:w-max"),
Translations.t.general.loginWithOpenStreetMap,
state
)


this.SetClass("shadow rounded-full h-min overflow-hidden block w-full md:w-max")

}


Expand Down
24 changes: 9 additions & 15 deletions UI/ImportFlow/ImportViewerGui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ import Table from "../Base/Table";
import LeftIndex from "../Base/LeftIndex";
import Toggleable, {Accordeon} from "../Base/Toggleable";
import TableOfContents from "../Base/TableOfContents";
import LoginButton from "../Popup/LoginButton";
import BackToIndex from "../BigComponents/BackToIndex";
import {LoginToggle} from "../Popup/LoginButton";
import {QueryParameters} from "../../Logic/Web/QueryParameters";

interface NoteProperties {
Expand Down Expand Up @@ -89,7 +88,7 @@ class MassAction extends Combine {
},
shown:"On every open note, read the 'note='-tag and and this note as comment. (This action ignores the textfield)"
},//*/

])

const handledNotesCounter = new UIEventSource<number>(undefined)
Expand Down Expand Up @@ -127,7 +126,7 @@ class MassAction extends Combine {
handledNotesCounter.map(s => s === undefined)
)

, new VariableUiElement(textField.GetValue().map(txt => "Type a text of at least 15 characters to apply the action. Currently, there are "+(txt?.length ?? 0)+" characters")).SetClass("alert"),
, new VariableUiElement(textField.GetValue().map(txt => "Type a text of at least 15 characters to apply the action. Currently, there are " + (txt?.length ?? 0) + " characters")).SetClass("alert"),
actions.GetValue().map(v => v !== undefined && textField.GetValue()?.data?.length > 15, [textField.GetValue()])
),
new Toggle(
Expand Down Expand Up @@ -212,7 +211,7 @@ class ImportInspector extends VariableUiElement {

constructor(userDetails: { uid: number } | { display_name: string, search?: string }, state: UserRelatedState) {
let url;

if (userDetails["uid"] !== undefined) {
url = "https://api.openstreetmap.org/api/0.6/notes/search.json?user=" + userDetails["uid"] + "&closed=730&limit=10000&sort=created_at&q=%23import"
} else {
Expand Down Expand Up @@ -303,28 +302,23 @@ class ImportInspector extends VariableUiElement {
}
}

class ImportViewerGui extends Combine {
class ImportViewerGui extends LoginToggle {

constructor() {
const state = new UserRelatedState(undefined)
const displayNameParam = QueryParameters.GetQueryParameter("user", "", "The username of the person whom you want to see the notes for");
const searchParam = QueryParameters.GetQueryParameter("search", "", "A text that should be included in the first comment of the note to be shown")
super([
super(
new VariableUiElement(state.osmConnection.userDetails.map(ud => {
const display_name = displayNameParam.data;
const search = searchParam.data;
if (display_name !== "" && search !== "") {
return new ImportInspector({display_name, search}, undefined);
}

if (ud === undefined || ud.loggedIn === false) {
return new Combine([new LoginButton("Login to inspect your import flows", state),
new BackToIndex()
])
}
return new ImportInspector(ud, state);
}, [displayNameParam, searchParam]))
]);
}, [displayNameParam, searchParam])),
"Login to inspect your import flows", state
)
}
}

Expand Down
31 changes: 26 additions & 5 deletions UI/Popup/LoginButton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,45 @@ import BaseUIElement from "../BaseUIElement";
import Svg from "../../Svg";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import Toggle from "../Input/Toggle";
import {VariableUiElement} from "../Base/VariableUIElement";
import Loading from "../Base/Loading";
import Translations from "../i18n/Translations";

export default class LoginButton extends SubtleButton {
class LoginButton extends SubtleButton {

constructor(text: BaseUIElement | string, state: {
osmConnection: OsmConnection
}) {
super(Svg.osm_logo_ui(), text);
}, icon?: BaseUIElement | string) {
super(icon ?? Svg.osm_logo_ui(), text);
this.onClick(() => {
state.osmConnection.AttemptLogin()
})
}

}

export class LoginToggle extends Toggle {
export class LoginToggle extends VariableUiElement {
constructor(el, text: BaseUIElement | string, state: {
osmConnection: OsmConnection
}) {
super(el, new LoginButton(text, state), state.osmConnection.isLoggedIn)
const loading = new Loading("Trying to log in...")
const login = new LoginButton(text, state)
super(
state.osmConnection.loadingStatus.map(osmConnectionState => {
console.trace("Current osm state is ", osmConnectionState)
if(osmConnectionState === "loading"){
return loading
}
if(osmConnectionState === "not-attempted"){
return login
}
if(osmConnectionState === "logged-in"){
return el
}

// Error!
return new LoginButton(Translations.t.general.loginFailed, state, Svg.invalid_svg())
})
)
}
}
1 change: 1 addition & 0 deletions assets/layers/gps_track/gps_track.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
}
},
"export_as_gpx",
"export_as_geojson",
"minimap",
{
"id": "delete",
Expand Down
1 change: 1 addition & 0 deletions langs/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
"loginWithOpenStreetMap": "Login with OpenStreetMap",
"welcomeBack": "You are logged in, welcome back!",
"loginToStart": "Log in to answer this question",
"loginFailed": "Logging in into OpenStreetMap failed",
"openStreetMapIntro": "<h3>An Open Map</h3><p>One that everyone can use and edit freely. A single place to store all geo-info. Different, small, incompatible and outdated maps are not needed anywhere.</p><p><b><a href='https://OpenStreetMap.org' target='_blank'>OpenStreetMap</a></b> is not the enemy map. The map data can be used freely (with <a href='https://osm.org/copyright' target='_blank'>attribution and publication of changes to that data</a>). Everyone can add new data and fix errors. This website uses OpenStreetMap. All the data is from there, and your answers and corrections are used all over.</p><p>Many people and apps already use OpenStreetMap: <a href='https://organicmaps.app/' target='_blank'>Organic Maps</a>, <a href='https://osmAnd.net' target='_blank'>OsmAnd</a>, but also the maps at Facebook, Instagram, Apple-maps and Bing-maps are (partly) powered by OpenStreetMap.</p>",
"search": {
"search": "Search a location",
Expand Down
Loading

0 comments on commit e721146

Please sign in to comment.