midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Loginbutton now shows a warning if the API is offline, fix #880

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-01-06 03:32:17 +01:00
parent 29b0b2871b
commit e4c586ef99
3 changed files with 69 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

75
UI/Popup/LoginButton.ts
View file

@ -1,11 +1,13 @@
import { SubtleButton } from "../Base/SubtleButton"
import BaseUIElement from "../BaseUIElement"
import Svg from "../../Svg"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import Toggle from "../Input/Toggle"
import { OsmConnection, OsmServiceState } from "../../Logic/Osm/OsmConnection"
import { VariableUiElement } from "../Base/VariableUIElement"
import Loading from "../Base/Loading"
import Translations from "../i18n/Translations"
import { Store } from "../../Logic/UIEventSource"
import Combine from "../Base/Combine"
import { Translation } from "../i18n/Translation"
class LoginButton extends SubtleButton {
constructor(
@ -23,30 +25,67 @@ class LoginButton extends SubtleButton {
}
export class LoginToggle extends VariableUiElement {
/**
* Constructs an element which shows 'el' if the user is logged in
* If not logged in, 'text' is shown on the button which invites to login.
*
* If logging in is not possible for some reason, an appropriate error message is shown
*
* State contains the 'osmConnection' to work with
*/
constructor(
el: BaseUIElement,
text: BaseUIElement | string,
state: {
osmConnection: OsmConnection
readonly osmConnection: OsmConnection
readonly featureSwitchUserbadge: Store<boolean>
}
) {
const loading = new Loading("Trying to log in...")
const login = new LoginButton(text, state)
super(
state.osmConnection.loadingStatus.map((osmConnectionState) => {
if (osmConnectionState === "loading") {
return loading
}
if (osmConnectionState === "not-attempted") {
return login
}
if (osmConnectionState === "logged-in") {
return el
}
const login = text === undefined ? undefined : new LoginButton(text, state)
const t = Translations.t.general
const offlineModes: Partial<Record<OsmServiceState, Translation>> = {
offline: t.loginFailedOfflineMode,
unreachable: t.loginFailedUnreachableMode,
readonly: t.loginFailedReadonlyMode,
}
// Error!
return new LoginButton(Translations.t.general.loginFailed, state, Svg.invalid_svg())
})
super(
state.osmConnection.loadingStatus.map(
(osmConnectionState) => {
if (state.featureSwitchUserbadge.data == false) {
// All features to login with are disabled
return undefined
}
const apiState = state.osmConnection.apiIsOnline.data
const apiTranslation = offlineModes[apiState]
if (apiTranslation !== undefined) {
return new Combine([
Svg.invalid_svg().SetClass("w-8 h-8 m-2 shrink-0"),
apiTranslation,
]).SetClass("flex items-center alert max-w-64")
}
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()
)
},
[state.featureSwitchUserbadge, state.osmConnection.apiIsOnline]
)
)
}
}