MapComplete/UI/Popup/LoginButton.ts

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 { VariableUiElement } from "../Base/VariableUIElement"
import Loading from "../Base/Loading"
import Translations from "../i18n/Translations"

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

export class LoginToggle extends VariableUiElement {
    constructor(
        el: BaseUIElement,
        text: BaseUIElement | string,
        state: {
            osmConnection: OsmConnection
        }
    ) {
        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
                }

                // Error!
                return new LoginButton(Translations.t.general.loginFailed, state, Svg.invalid_svg())
            })
        )
    }
}