diff --git a/src-11ty/redirect-page.html b/src-11ty/redirect-page.html index 12b72e3d..8ad0dfcd 100644 --- a/src-11ty/redirect-page.html +++ b/src-11ty/redirect-page.html @@ -25,6 +25,11 @@ .card-actions a { text-decoration: none; } + .open-card-actions { + display: flex; + gap: 10px; + align-items: end; + } .fake-button { padding: 0 24px; line-height: 40px; @@ -108,12 +113,18 @@

Open page in your Home Assistant?

{% if redirect.redirect == "oauth" %}
- +
+ + +
{% else %}
- +
+ + +
{% endif %} diff --git a/src/entrypoints/my-redirect.ts b/src/entrypoints/my-redirect.ts index 62b48d41..dbea8cda 100644 --- a/src/entrypoints/my-redirect.ts +++ b/src/entrypoints/my-redirect.ts @@ -5,7 +5,7 @@ import { extractSearchParamsObject, } from "../util/search-params"; import { getInstanceUrl } from "../data/instance_info"; -import { Redirect } from "../const"; +import { MOBILE_URL, Redirect } from "../const"; import { svgPencil } from "../components/svg-pencil"; import { isMobile } from "../data/is_mobile"; import { validateParam } from "../util/validate"; @@ -37,6 +37,12 @@ const createRedirectParams = (): string => { let changingInstance = false; +const getRedirectUrl = (baseUrl: string, params) => { + return window.redirect.redirect === "oauth" + ? `${baseUrl}/auth/external/callback${params}` + : `${baseUrl}/_my_redirect/${window.redirect.redirect}${params}`; +} + const render = (showTroubleshooting: boolean) => { const instanceUrl = getInstanceUrl(); @@ -57,23 +63,35 @@ const render = (showTroubleshooting: boolean) => { window.redirect.redirect + "/" + params )}`; - if (instanceUrl === null) { - changingInstance = true; - document.location.assign(changeUrl); - return; - } + const redirectUrlToNativeApp = getRedirectUrl(MOBILE_URL, params); + const openLinkNative = document.querySelector(".open-link-native") as HTMLElement; + openLinkNative.outerHTML = ` + + ${isMobile ? 'Open link' : openLinkNative.innerText} + + `; + openLinkNative.style.visibility = "visible"; - const redirectUrl = - window.redirect.redirect === "oauth" - ? `${instanceUrl}/auth/external/callback${params}` - : `${instanceUrl}/_my_redirect/${window.redirect.redirect}${params}`; + const redirectUrl = + instanceUrl === null + ? changeUrl + : getRedirectUrl(instanceUrl, params); const openLink = document.querySelector(".open-link") as HTMLElement; - openLink.outerHTML = ` - - ${openLink.innerText} - - `; + if (isMobile) { + openLink.style.display = "none"; + } else { + openLink.outerHTML = ` + + ${openLink.innerText} + + `; + if (instanceUrl === null) { + document.querySelector(".open-link")!.addEventListener("click", () => { + changingInstance = true; + }); + } + } if (window.redirect.redirect === "oauth") { const params = extractSearchParamsObject(); @@ -87,6 +105,8 @@ const render = (showTroubleshooting: boolean) => { buttonCaption = "Notify Home Assistant of rejection"; (document.querySelector(".open-link") as HTMLElement).style.visibility = "hidden"; + (document.querySelector(".open-link-native") as HTMLElement).style.visibility = + "hidden"; } const declineLink = document.querySelector(".decline-link")!; @@ -107,16 +127,18 @@ const render = (showTroubleshooting: boolean) => { return; } - let changeInstanceEl = document.querySelector(".instance-footer")!; - changeInstanceEl.innerHTML = ` - Your instance URL: ${instanceUrl} - - ${svgPencil} - - `; - changeInstanceEl.querySelector("a")!.addEventListener("click", () => { - changingInstance = true; - }); + if (instanceUrl !== null) { + let changeInstanceEl = document.querySelector(".instance-footer")!; + changeInstanceEl.innerHTML = ` + Your instance URL: ${instanceUrl} + + ${svgPencil} + + `; + changeInstanceEl.querySelector("a")!.addEventListener("click", () => { + changingInstance = true; + }); + } // When we were changing the instance, we're not going to mess with troubleshooting. if (changingInstance) {