forked from MapComplete/MapComplete
564 lines
20 KiB
TypeScript
564 lines
20 KiB
TypeScript
import osmAuth from "osm-auth"
|
|
import { Store, Stores, UIEventSource } from "../UIEventSource"
|
|
import { OsmPreferences } from "./OsmPreferences"
|
|
import { ChangesetHandler } from "./ChangesetHandler"
|
|
import { ElementStorage } from "../ElementStorage"
|
|
import Svg from "../../Svg"
|
|
import Img from "../../UI/Base/Img"
|
|
import { Utils } from "../../Utils"
|
|
import { OsmObject } from "./OsmObject"
|
|
import { Changes } from "./Changes"
|
|
|
|
export default class UserDetails {
|
|
public loggedIn = false
|
|
public name = "Not logged in"
|
|
public uid: number
|
|
public csCount = 0
|
|
public img?: string
|
|
public unreadMessages = 0
|
|
public totalMessages: number = 0
|
|
public home: { lon: number; lat: number }
|
|
public backend: string
|
|
public account_created: string
|
|
public tracesCount: number = 0
|
|
public description: string
|
|
|
|
constructor(backend: string) {
|
|
this.backend = backend
|
|
}
|
|
}
|
|
|
|
export type OsmServiceState = "online" | "readonly" | "offline" | "unknown" | "unreachable"
|
|
|
|
export class OsmConnection {
|
|
public static readonly oauth_configs = {
|
|
osm: {
|
|
oauth_consumer_key: "hivV7ec2o49Two8g9h8Is1VIiVOgxQ1iYexCbvem",
|
|
oauth_secret: "wDBRTCem0vxD7txrg1y6p5r8nvmz8tAhET7zDASI",
|
|
url: "https://www.openstreetmap.org",
|
|
// OAUTH 1.0 application
|
|
// https://www.openstreetmap.org/user/Pieter%20Vander%20Vennet/oauth_clients/7404
|
|
},
|
|
"osm-test": {
|
|
oauth_consumer_key: "Zgr7EoKb93uwPv2EOFkIlf3n9NLwj5wbyfjZMhz2",
|
|
oauth_secret: "3am1i1sykHDMZ66SGq4wI2Z7cJMKgzneCHp3nctn",
|
|
url: "https://master.apis.dev.openstreetmap.org",
|
|
},
|
|
}
|
|
public auth
|
|
public userDetails: UIEventSource<UserDetails>
|
|
public isLoggedIn: Store<boolean>
|
|
public gpxServiceIsOnline: UIEventSource<OsmServiceState> = new UIEventSource<OsmServiceState>(
|
|
"unknown"
|
|
)
|
|
public apiIsOnline: UIEventSource<OsmServiceState> = new UIEventSource<OsmServiceState>(
|
|
"unknown"
|
|
)
|
|
|
|
public loadingStatus = new UIEventSource<"not-attempted" | "loading" | "error" | "logged-in">(
|
|
"not-attempted"
|
|
)
|
|
public preferencesHandler: OsmPreferences
|
|
public readonly _oauth_config: {
|
|
oauth_consumer_key: string
|
|
oauth_secret: string
|
|
url: string
|
|
}
|
|
private readonly _dryRun: UIEventSource<boolean>
|
|
private fakeUser: boolean
|
|
private _onLoggedIn: ((userDetails: UserDetails) => void)[] = []
|
|
private readonly _iframeMode: Boolean | boolean
|
|
private readonly _singlePage: boolean
|
|
private isChecking = false
|
|
|
|
constructor(options?: {
|
|
dryRun?: UIEventSource<boolean>
|
|
fakeUser?: false | boolean
|
|
oauth_token?: UIEventSource<string>
|
|
// Used to keep multiple changesets open and to write to the correct changeset
|
|
singlePage?: boolean
|
|
osmConfiguration?: "osm" | "osm-test"
|
|
attemptLogin?: true | boolean
|
|
}) {
|
|
options = options ?? {}
|
|
this.fakeUser = options.fakeUser ?? false
|
|
this._singlePage = options.singlePage ?? true
|
|
this._oauth_config =
|
|
OsmConnection.oauth_configs[options.osmConfiguration ?? "osm"] ??
|
|
OsmConnection.oauth_configs.osm
|
|
console.debug("Using backend", this._oauth_config.url)
|
|
OsmObject.SetBackendUrl(this._oauth_config.url + "/")
|
|
this._iframeMode = Utils.runningFromConsole ? false : window !== window.top
|
|
|
|
this.userDetails = new UIEventSource<UserDetails>(
|
|
new UserDetails(this._oauth_config.url),
|
|
"userDetails"
|
|
)
|
|
if (options.fakeUser) {
|
|
const ud = this.userDetails.data
|
|
ud.csCount = 5678
|
|
ud.loggedIn = true
|
|
ud.unreadMessages = 0
|
|
ud.name = "Fake user"
|
|
ud.totalMessages = 42
|
|
}
|
|
const self = this
|
|
this.UpdateCapabilities()
|
|
this.isLoggedIn = this.userDetails.map(
|
|
(user) =>
|
|
user.loggedIn &&
|
|
(self.apiIsOnline.data === "unknown" || self.apiIsOnline.data === "online"),
|
|
[this.apiIsOnline]
|
|
)
|
|
this.isLoggedIn.addCallback((isLoggedIn) => {
|
|
if (self.userDetails.data.loggedIn == false && isLoggedIn == true) {
|
|
// We have an inconsistency: the userdetails say we _didn't_ log in, but this actor says we do
|
|
// This means someone attempted to toggle this; so we attempt to login!
|
|
self.AttemptLogin()
|
|
}
|
|
})
|
|
|
|
this._dryRun = options.dryRun ?? new UIEventSource<boolean>(false)
|
|
|
|
this.updateAuthObject()
|
|
|
|
this.preferencesHandler = new OsmPreferences(
|
|
this.auth,
|
|
<any /*This is needed to make the tests work*/>this
|
|
)
|
|
|
|
if (options.oauth_token?.data !== undefined) {
|
|
console.log(options.oauth_token.data)
|
|
const self = this
|
|
this.auth.bootstrapToken(
|
|
options.oauth_token.data,
|
|
(x) => {
|
|
console.log("Called back: ", x)
|
|
self.AttemptLogin()
|
|
},
|
|
this.auth
|
|
)
|
|
|
|
options.oauth_token.setData(undefined)
|
|
}
|
|
if (this.auth.authenticated() && options.attemptLogin !== false) {
|
|
this.AttemptLogin() // Also updates the user badge
|
|
} else {
|
|
console.log("Not authenticated")
|
|
}
|
|
}
|
|
|
|
public CreateChangesetHandler(allElements: ElementStorage, changes: Changes) {
|
|
return new ChangesetHandler(
|
|
this._dryRun,
|
|
<any>/*casting is needed to make the tests work*/ this,
|
|
allElements,
|
|
changes,
|
|
this.auth
|
|
)
|
|
}
|
|
|
|
public GetPreference(
|
|
key: string,
|
|
defaultValue: string = undefined,
|
|
options?: {
|
|
documentation?: string
|
|
prefix?: string
|
|
}
|
|
): UIEventSource<string> {
|
|
return this.preferencesHandler.GetPreference(key, defaultValue, options)
|
|
}
|
|
|
|
public GetLongPreference(key: string, prefix: string = "mapcomplete-"): UIEventSource<string> {
|
|
return this.preferencesHandler.GetLongPreference(key, prefix)
|
|
}
|
|
|
|
public OnLoggedIn(action: (userDetails: UserDetails) => void) {
|
|
this._onLoggedIn.push(action)
|
|
}
|
|
|
|
public LogOut() {
|
|
this.auth.logout()
|
|
this.userDetails.data.loggedIn = false
|
|
this.userDetails.data.csCount = 0
|
|
this.userDetails.data.name = ""
|
|
this.userDetails.ping()
|
|
console.log("Logged out")
|
|
this.loadingStatus.setData("not-attempted")
|
|
}
|
|
|
|
/**
|
|
* The backend host, without path or trailing '/'
|
|
*
|
|
* new OsmConnection().Backend() // => "https://www.openstreetmap.org"
|
|
*/
|
|
public Backend(): string {
|
|
return this._oauth_config.url
|
|
}
|
|
|
|
public AttemptLogin() {
|
|
this.UpdateCapabilities()
|
|
this.loadingStatus.setData("loading")
|
|
if (this.fakeUser) {
|
|
this.loadingStatus.setData("logged-in")
|
|
console.log("AttemptLogin called, but ignored as fakeUser is set")
|
|
return
|
|
}
|
|
const self = this
|
|
console.log("Trying to log in...")
|
|
this.updateAuthObject()
|
|
this.auth.xhr(
|
|
{
|
|
method: "GET",
|
|
path: "/api/0.6/user/details",
|
|
},
|
|
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
|
|
// Reset all the tokens
|
|
const tokens = [
|
|
"https://www.openstreetmap.orgoauth_request_token_secret",
|
|
"https://www.openstreetmap.orgoauth_token",
|
|
"https://www.openstreetmap.orgoauth_token_secret",
|
|
]
|
|
tokens.forEach((token) => localStorage.removeItem(token))
|
|
}
|
|
return
|
|
}
|
|
|
|
if (details == null) {
|
|
self.loadingStatus.setData("error")
|
|
return
|
|
}
|
|
|
|
self.CheckForMessagesContinuously()
|
|
|
|
// details is an XML DOM of user details
|
|
let userInfo = details.getElementsByTagName("user")[0]
|
|
|
|
// let moreDetails = new DOMParser().parseFromString(userInfo.innerHTML, "text/xml");
|
|
|
|
let data = self.userDetails.data
|
|
data.loggedIn = true
|
|
console.log("Login completed, userinfo is ", userInfo)
|
|
data.name = userInfo.getAttribute("display_name")
|
|
data.account_created = userInfo.getAttribute("account_created")
|
|
data.uid = Number(userInfo.getAttribute("id"))
|
|
data.csCount = Number.parseInt(
|
|
userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? 0
|
|
)
|
|
data.tracesCount = Number.parseInt(
|
|
userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? 0
|
|
)
|
|
|
|
data.img = undefined
|
|
const imgEl = userInfo.getElementsByTagName("img")
|
|
if (imgEl !== undefined && imgEl[0] !== undefined) {
|
|
data.img = imgEl[0].getAttribute("href")
|
|
}
|
|
|
|
const description = userInfo.getElementsByTagName("description")
|
|
if (description !== undefined && description[0] !== undefined) {
|
|
data.description = description[0]?.innerHTML
|
|
}
|
|
const homeEl = userInfo.getElementsByTagName("home")
|
|
if (homeEl !== undefined && homeEl[0] !== undefined) {
|
|
const lat = parseFloat(homeEl[0].getAttribute("lat"))
|
|
const lon = parseFloat(homeEl[0].getAttribute("lon"))
|
|
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"))
|
|
|
|
self.userDetails.ping()
|
|
for (const action of self._onLoggedIn) {
|
|
action(self.userDetails.data)
|
|
}
|
|
self._onLoggedIn = []
|
|
}
|
|
)
|
|
}
|
|
|
|
public closeNote(id: number | string, text?: string): Promise<void> {
|
|
let textSuffix = ""
|
|
if ((text ?? "") !== "") {
|
|
textSuffix = "?text=" + encodeURIComponent(text)
|
|
}
|
|
if (this._dryRun.data) {
|
|
console.warn("Dryrun enabled - not actually closing note ", id, " with text ", text)
|
|
return new Promise((ok) => {
|
|
ok()
|
|
})
|
|
}
|
|
return new Promise((ok, error) => {
|
|
this.auth.xhr(
|
|
{
|
|
method: "POST",
|
|
path: `/api/0.6/notes/${id}/close${textSuffix}`,
|
|
},
|
|
function (err, _) {
|
|
if (err !== null) {
|
|
error(err)
|
|
} else {
|
|
ok()
|
|
}
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
public reopenNote(id: number | string, text?: string): Promise<void> {
|
|
if (this._dryRun.data) {
|
|
console.warn("Dryrun enabled - not actually reopening note ", id, " with text ", text)
|
|
return new Promise((ok) => {
|
|
ok()
|
|
})
|
|
}
|
|
let textSuffix = ""
|
|
if ((text ?? "") !== "") {
|
|
textSuffix = "?text=" + encodeURIComponent(text)
|
|
}
|
|
return new Promise((ok, error) => {
|
|
this.auth.xhr(
|
|
{
|
|
method: "POST",
|
|
path: `/api/0.6/notes/${id}/reopen${textSuffix}`,
|
|
},
|
|
function (err, _) {
|
|
if (err !== null) {
|
|
error(err)
|
|
} else {
|
|
ok()
|
|
}
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
public openNote(lat: number, lon: number, text: string): Promise<{ id: number }> {
|
|
if (this._dryRun.data) {
|
|
console.warn("Dryrun enabled - not actually opening note with text ", text)
|
|
return new Promise<{ id: number }>((ok) => {
|
|
window.setTimeout(
|
|
() => ok({ id: Math.floor(Math.random() * 1000) }),
|
|
Math.random() * 5000
|
|
)
|
|
})
|
|
}
|
|
const auth = this.auth
|
|
const content = { lat, lon, text }
|
|
return new Promise((ok, error) => {
|
|
auth.xhr(
|
|
{
|
|
method: "POST",
|
|
path: `/api/0.6/notes.json`,
|
|
options: {
|
|
header: { "Content-Type": "application/json" },
|
|
},
|
|
content: JSON.stringify(content),
|
|
},
|
|
function (err, response: string) {
|
|
console.log("RESPONSE IS", response)
|
|
if (err !== null) {
|
|
error(err)
|
|
} else {
|
|
const parsed = JSON.parse(response)
|
|
const id = parsed.properties.id
|
|
console.log("OPENED NOTE", id)
|
|
ok({ id })
|
|
}
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
public async uploadGpxTrack(
|
|
gpx: string,
|
|
options: {
|
|
description: string
|
|
visibility: "private" | "public" | "trackable" | "identifiable"
|
|
filename?: string
|
|
/**
|
|
* Some words to give some properties;
|
|
*
|
|
* Note: these are called 'tags' on the wiki, but I opted to name them 'labels' instead as they aren't "key=value" tags, but just words.
|
|
*/
|
|
labels: string[]
|
|
}
|
|
): Promise<{ id: number }> {
|
|
if (this._dryRun.data) {
|
|
console.warn("Dryrun enabled - not actually uploading GPX ", gpx)
|
|
return new Promise<{ id: number }>((ok, error) => {
|
|
window.setTimeout(
|
|
() => ok({ id: Math.floor(Math.random() * 1000) }),
|
|
Math.random() * 5000
|
|
)
|
|
})
|
|
}
|
|
|
|
const contents = {
|
|
file: gpx,
|
|
description: options.description ?? "",
|
|
tags: options.labels?.join(",") ?? "",
|
|
visibility: options.visibility,
|
|
}
|
|
|
|
const extras = {
|
|
file:
|
|
'; filename="' +
|
|
(options.filename ?? "gpx_track_mapcomplete_" + new Date().toISOString()) +
|
|
'"\r\nContent-Type: application/gpx+xml',
|
|
}
|
|
|
|
const auth = this.auth
|
|
const boundary = "987654"
|
|
|
|
let body = ""
|
|
for (const key in contents) {
|
|
body += "--" + boundary + "\r\n"
|
|
body += 'Content-Disposition: form-data; name="' + key + '"'
|
|
if (extras[key] !== undefined) {
|
|
body += extras[key]
|
|
}
|
|
body += "\r\n\r\n"
|
|
body += contents[key] + "\r\n"
|
|
}
|
|
body += "--" + boundary + "--\r\n"
|
|
|
|
return new Promise((ok, error) => {
|
|
auth.xhr(
|
|
{
|
|
method: "POST",
|
|
path: `/api/0.6/gpx/create`,
|
|
options: {
|
|
header: {
|
|
"Content-Type": "multipart/form-data; boundary=" + boundary,
|
|
"Content-Length": body.length,
|
|
},
|
|
},
|
|
content: body,
|
|
},
|
|
function (err, response: string) {
|
|
console.log("RESPONSE IS", response)
|
|
if (err !== null) {
|
|
error(err)
|
|
} else {
|
|
const parsed = JSON.parse(response)
|
|
console.log("Uploaded GPX track", parsed)
|
|
ok({ id: parsed })
|
|
}
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
public addCommentToNote(id: number | string, text: string): Promise<void> {
|
|
if (this._dryRun.data) {
|
|
console.warn("Dryrun enabled - not actually adding comment ", text, "to note ", id)
|
|
return new Promise((ok) => {
|
|
ok()
|
|
})
|
|
}
|
|
if ((text ?? "") === "") {
|
|
throw "Invalid text!"
|
|
}
|
|
|
|
return new Promise((ok, error) => {
|
|
this.auth.xhr(
|
|
{
|
|
method: "POST",
|
|
|
|
path: `/api/0.6/notes/${id}/comment?text=${encodeURIComponent(text)}`,
|
|
},
|
|
function (err, _) {
|
|
if (err !== null) {
|
|
error(err)
|
|
} else {
|
|
ok()
|
|
}
|
|
}
|
|
)
|
|
})
|
|
}
|
|
|
|
private updateAuthObject() {
|
|
let pwaStandAloneMode = false
|
|
try {
|
|
if (Utils.runningFromConsole) {
|
|
pwaStandAloneMode = true
|
|
} else if (
|
|
window.matchMedia("(display-mode: standalone)").matches ||
|
|
window.matchMedia("(display-mode: fullscreen)").matches
|
|
) {
|
|
pwaStandAloneMode = true
|
|
}
|
|
} catch (e) {
|
|
console.warn(
|
|
"Detecting standalone mode failed",
|
|
e,
|
|
". Assuming in browser and not worrying furhter"
|
|
)
|
|
}
|
|
const standalone = this._iframeMode || pwaStandAloneMode || !this._singlePage
|
|
|
|
// In standalone mode, we DON'T use single page login, as 'redirecting' opens a new window anyway...
|
|
// Same for an iframe...
|
|
|
|
this.auth = new osmAuth({
|
|
oauth_consumer_key: this._oauth_config.oauth_consumer_key,
|
|
oauth_secret: this._oauth_config.oauth_secret,
|
|
url: this._oauth_config.url,
|
|
landing: standalone ? undefined : window.location.href,
|
|
singlepage: !standalone,
|
|
auto: true,
|
|
})
|
|
}
|
|
|
|
private CheckForMessagesContinuously() {
|
|
const self = this
|
|
if (this.isChecking) {
|
|
return
|
|
}
|
|
this.isChecking = true
|
|
Stores.Chronic(5 * 60 * 1000).addCallback((_) => {
|
|
if (self.isLoggedIn.data) {
|
|
console.log("Checking for messages")
|
|
self.AttemptLogin()
|
|
}
|
|
})
|
|
}
|
|
|
|
private UpdateCapabilities(): void {
|
|
const self = this
|
|
this.FetchCapabilities().then(({ api, gpx }) => {
|
|
self.apiIsOnline.setData(api)
|
|
self.gpxServiceIsOnline.setData(gpx)
|
|
})
|
|
}
|
|
|
|
private async FetchCapabilities(): Promise<{ api: OsmServiceState; gpx: OsmServiceState }> {
|
|
if (Utils.runningFromConsole) {
|
|
return { api: "online", gpx: "online" }
|
|
}
|
|
const result = await Utils.downloadAdvanced(this.Backend() + "/api/0.6/capabilities")
|
|
if (result["content"] === undefined) {
|
|
console.log("Something went wrong:", result)
|
|
return { api: "unreachable", gpx: "unreachable" }
|
|
}
|
|
const xmlRaw = result["content"]
|
|
const parsed = new DOMParser().parseFromString(xmlRaw, "text/xml")
|
|
const statusEl = parsed.getElementsByTagName("status")[0]
|
|
const api = <OsmServiceState>statusEl.getAttribute("api")
|
|
const gpx = <OsmServiceState>statusEl.getAttribute("gpx")
|
|
return { api, gpx }
|
|
}
|
|
}
|