From bf2fcc6641643018bd5224ec2f8308173d54cfa4 Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 9 May 2022 23:47:05 +0200 Subject: feat(pwa): enhance connectivity checks Also add support to auth proxy such as Authelia --- src/components/ConnectivityChecker.vue | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'src/components') diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 02cbd7f..a717bcf 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -29,15 +29,40 @@ export default { }, false ); + window.addEventListener( + "online", + function () { + that.checkOffline(); + }, + false + ); + window.addEventListener( + "offline", + function () { + this.offline = true; + }, + false + ); }, methods: { checkOffline: function () { + if (!navigator.onLine) { + this.offline = true; + return; + } + + // extra check to make sure we're not offline let that = this; return fetch(window.location.href + "?alive", { method: "HEAD", cache: "no-store", + redirect: "manual" }) .then(function (response) { + // opaqueredirect means request has been redirected, to auth provider probably + if (response.type === "opaqueredirect" && !response.ok) { + window.location.reload(true); + } that.offline = !response.ok; }) .catch(function () { -- cgit v1.2.3 From 98b460d6fe0e09cbdbf37f882f5e5bf7daa48e73 Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Tue, 10 May 2022 09:46:42 +0200 Subject: fix(auth): add timestamp in URL to prevent infinite redirection loop --- src/components/ConnectivityChecker.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index a717bcf..1c677d2 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -17,6 +17,9 @@ export default { }; }, created: function () { + if (/t=\d+/.test(window.location.href)) { + window.history.replaceState({}, document.title, window.location.pathname); + } let that = this; this.checkOffline(); @@ -61,7 +64,7 @@ export default { .then(function (response) { // opaqueredirect means request has been redirected, to auth provider probably if (response.type === "opaqueredirect" && !response.ok) { - window.location.reload(true); + window.location.href = window.location.href + "?t="+(new Date().valueOf()); } that.offline = !response.ok; }) -- cgit v1.2.3 From 4353f5e03658778b526dca6b7dd3f5bd6e31e121 Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 16 May 2022 14:52:46 +0200 Subject: feat(auth): handle unauthorized request in connectivity Reload page without cache if 401 and 403 status in response --- src/components/ConnectivityChecker.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 1c677d2..0d7e79f 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -63,7 +63,7 @@ export default { }) .then(function (response) { // opaqueredirect means request has been redirected, to auth provider probably - if (response.type === "opaqueredirect" && !response.ok) { + if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) { window.location.href = window.location.href + "?t="+(new Date().valueOf()); } that.offline = !response.ok; -- cgit v1.2.3 From f64278d41d9850461871c1c7908f0c35cbca05cd Mon Sep 17 00:00:00 2001 From: Pierre <397503+bemble@users.noreply.github.com> Date: Mon, 30 May 2022 17:03:28 +0200 Subject: feat(connectivity): change query parameter to change connectivity Always use timestamp as query parameter instead of alive --- src/components/ConnectivityChecker.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue index 0d7e79f..f2be652 100644 --- a/src/components/ConnectivityChecker.vue +++ b/src/components/ConnectivityChecker.vue @@ -56,7 +56,8 @@ export default { // extra check to make sure we're not offline let that = this; - return fetch(window.location.href + "?alive", { + const aliveCheckUrl = window.location.href + "?t="+(new Date().valueOf()); + return fetch(aliveCheckUrl, { method: "HEAD", cache: "no-store", redirect: "manual" @@ -64,7 +65,7 @@ export default { .then(function (response) { // opaqueredirect means request has been redirected, to auth provider probably if ((response.type === "opaqueredirect" && !response.ok) || [401, 403].indexOf(response.status) != -1) { - window.location.href = window.location.href + "?t="+(new Date().valueOf()); + window.location.href = aliveCheckUrl; } that.offline = !response.ok; }) -- cgit v1.2.3