Fix: use popup when in an iframe

This commit is contained in:
Pieter Vander Vennet 2024-10-17 14:39:42 +02:00
parent 22c03af035
commit 63162c58e1

View file

@ -45,14 +45,14 @@ export class OsmConnection {
public userDetails: UIEventSource<UserDetails>
public isLoggedIn: Store<boolean>
public gpxServiceIsOnline: UIEventSource<OsmServiceState> = new UIEventSource<OsmServiceState>(
"unknown"
"unknown",
)
public apiIsOnline: UIEventSource<OsmServiceState> = new UIEventSource<OsmServiceState>(
"unknown"
"unknown",
)
public loadingStatus = new UIEventSource<"not-attempted" | "loading" | "error" | "logged-in">(
"not-attempted"
"not-attempted",
)
public preferencesHandler: OsmPreferences
public readonly _oauth_config: AuthConfig
@ -96,7 +96,7 @@ export class OsmConnection {
this.userDetails = new UIEventSource<UserDetails>(
new UserDetails(this._oauth_config.url),
"userDetails"
"userDetails",
)
if (options.fakeUser) {
const ud = this.userDetails.data
@ -117,7 +117,7 @@ export class OsmConnection {
(user) =>
user.loggedIn &&
(this.apiIsOnline.data === "unknown" || this.apiIsOnline.data === "online"),
[this.apiIsOnline]
[this.apiIsOnline],
)
this.isLoggedIn.addCallback((isLoggedIn) => {
if (this.userDetails.data.loggedIn == false && isLoggedIn == true) {
@ -154,24 +154,27 @@ export class OsmConnection {
console.log("Not authenticated")
}
}
public GetPreference<T extends string = string>(
key: string,
defaultValue: string = undefined,
options?: {
prefix?: string
}
},
): UIEventSource<T | undefined> {
const prefix =options?.prefix ?? "mapcomplete-"
const prefix = options?.prefix ?? "mapcomplete-"
return <UIEventSource<T>>this.preferencesHandler.getPreference(key, defaultValue, prefix)
}
public getPreference<T extends string = string>(
key: string,
defaultValue: string = undefined,
prefix: string = "mapcomplete-"
prefix: string = "mapcomplete-",
): UIEventSource<T | undefined> {
return <UIEventSource<T>>this.preferencesHandler.getPreference(key, defaultValue, prefix)
}
public OnLoggedIn(action: (userDetails: UserDetails) => void) {
this._onLoggedIn.push(action)
}
@ -211,7 +214,7 @@ export class OsmConnection {
this.updateAuthObject()
LocalStorageSource.get("location_before_login").setData(
Utils.runningFromConsole ? undefined : window.location.href
Utils.runningFromConsole ? undefined : window.location.href,
)
this.auth.xhr(
{
@ -249,13 +252,13 @@ export class OsmConnection {
data.account_created = userInfo.getAttribute("account_created")
data.uid = Number(userInfo.getAttribute("id"))
data.languages = Array.from(
userInfo.getElementsByTagName("languages")[0].getElementsByTagName("lang")
userInfo.getElementsByTagName("languages")[0].getElementsByTagName("lang"),
).map((l) => l.textContent)
data.csCount = Number.parseInt(
userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? "0"
userInfo.getElementsByTagName("changesets")[0].getAttribute("count") ?? "0",
)
data.tracesCount = Number.parseInt(
userInfo.getElementsByTagName("traces")[0].getAttribute("count") ?? "0"
userInfo.getElementsByTagName("traces")[0].getAttribute("count") ?? "0",
)
data.img = undefined
@ -287,7 +290,7 @@ export class OsmConnection {
action(this.userDetails.data)
}
this._onLoggedIn = []
}
},
)
}
@ -305,7 +308,7 @@ export class OsmConnection {
method: "GET" | "POST" | "PUT" | "DELETE",
header?: Record<string, string>,
content?: string,
allowAnonymous: boolean = false
allowAnonymous: boolean = false,
): Promise<string> {
const connection: osmAuth = this.auth
if (allowAnonymous && !this.auth.authenticated()) {
@ -313,7 +316,7 @@ export class OsmConnection {
`${this.Backend()}/api/0.6/${path}`,
header,
method,
content
content,
)
if (possibleResult["content"]) {
return possibleResult["content"]
@ -330,13 +333,13 @@ export class OsmConnection {
content,
path: `/api/0.6/${path}`,
},
function (err, response) {
function(err, response) {
if (err !== null) {
error(err)
} else {
ok(response)
}
}
},
)
})
}
@ -345,7 +348,7 @@ export class OsmConnection {
path: string,
content?: string,
header?: Record<string, string>,
allowAnonymous: boolean = false
allowAnonymous: boolean = false,
): Promise<T> {
return <T>await this.interact(path, "POST", header, content, allowAnonymous)
}
@ -353,7 +356,7 @@ export class OsmConnection {
public async put<T extends string>(
path: string,
content?: string,
header?: Record<string, string>
header?: Record<string, string>,
): Promise<T> {
return <T>await this.interact(path, "PUT", header, content)
}
@ -361,7 +364,7 @@ export class OsmConnection {
public async get(
path: string,
header?: Record<string, string>,
allowAnonymous: boolean = false
allowAnonymous: boolean = false,
): Promise<string> {
return await this.interact(path, "GET", header, undefined, allowAnonymous)
}
@ -400,7 +403,7 @@ export class OsmConnection {
return new Promise<{ id: number }>((ok) => {
window.setTimeout(
() => ok({ id: Math.floor(Math.random() * 1000) }),
Math.random() * 5000
Math.random() * 5000,
)
})
}
@ -412,7 +415,7 @@ export class OsmConnection {
{
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
true
true,
)
const parsed = JSON.parse(response)
console.log("Got result:", parsed)
@ -435,14 +438,14 @@ export class OsmConnection {
* 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) => {
window.setTimeout(
() => ok({ id: Math.floor(Math.random() * 1000) }),
Math.random() * 5000
Math.random() * 5000,
)
})
}
@ -459,9 +462,9 @@ export class OsmConnection {
}
const extras = {
file:
'; filename="' +
"; filename=\"" +
(options.filename ?? "gpx_track_mapcomplete_" + new Date().toISOString()) +
'"\r\nContent-Type: application/gpx+xml',
"\"\r\nContent-Type: application/gpx+xml",
}
const boundary = "987654"
@ -469,7 +472,7 @@ export class OsmConnection {
let body = ""
for (const key in contents) {
body += "--" + boundary + "\r\n"
body += 'Content-Disposition: form-data; name="' + key + '"'
body += "Content-Disposition: form-data; name=\"" + key + "\""
if (extras[key] !== undefined) {
body += extras[key]
}
@ -503,13 +506,13 @@ export class OsmConnection {
path: `/api/0.6/notes/${id}/comment?text=${encodeURIComponent(text)}`,
},
function (err) {
function(err) {
if (err !== null) {
error(err)
} else {
ok()
}
}
},
)
})
}
@ -518,7 +521,7 @@ export class OsmConnection {
* To be called by land.html
*/
public finishLogin(callback: (previousURL: string) => void) {
this.auth.authenticate(function () {
this.auth.authenticate(function() {
// Fully authed at this point
console.log("Authentication successful!")
const previousLocation = LocalStorageSource.get("location_before_login")
@ -534,7 +537,10 @@ export class OsmConnection {
redirect_uri: Utils.runningFromConsole
? "https://mapcomplete.org/land.html"
: window.location.protocol + "//" + window.location.host + "/land.html",
singlepage: true, // We always use 'singlePage', it is the most stable - including in PWA
/* We use 'singlePage' as much as possible, it is the most stable - including in PWA.
* However, this breaks in iframes so we open a popup in that case
*/
singlepage: !this._iframeMode,
auto: true,
apiUrl: this._oauth_config.api_url ?? this._oauth_config.url,
})