Show location name in auth page, if available. (#8119)

src/auth/ha-authorize.ts

@@ -12,6 +12,10 @@ import {
   fetchAuthProviders,
   AuthUrlSearchParams,
 } from "../data/auth";
+import {
+  DiscoveryInformation,
+  fetchDiscoveryInformation,
+} from "../data/discovery";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
@@ -31,6 +35,8 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @internalProperty() private _authProviders?: AuthProvider[];
 
+  @internalProperty() private _discovery?: DiscoveryInformation;
+
   constructor() {
     super();
     this.translationFragment = "page-authorize";
@@ -58,14 +64,17 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     // the name with a bold tag.
     const loggingInWith = document.createElement("div");
     loggingInWith.innerText = this.localize(
-      "ui.panel.page-authorize.logging_in_with",
+      this._discovery?.location_name
+        ? "ui.panel.page-authorize.logging_in_to_with"
+        : "ui.panel.page-authorize.logging_in_with",
+      "locationName",
+      "LOCATION",
       "authProviderName",
       "NAME"
     );
-    loggingInWith.innerHTML = loggingInWith.innerHTML.replace(
-      "**NAME**",
-      `<b>${this._authProvider!.name}</b>`
-    );
+    loggingInWith.innerHTML = loggingInWith.innerHTML
+      .replace("**LOCATION**", `<b>${this._discovery?.location_name}</b>`)
+      .replace("**NAME**", `<b>${this._authProvider!.name}</b>`);
 
     const inactiveProviders = this._authProviders.filter(
       (prv) => prv !== this._authProvider
@@ -105,6 +114,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._fetchAuthProviders();
+    this._fetchDiscoveryInfo();
 
     if (!this.redirectUri) {
       return;
@@ -126,6 +136,10 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
+  private async _fetchDiscoveryInfo() {
+    this._discovery = await fetchDiscoveryInformation();
+  }
+
   private async _fetchAuthProviders() {
     // Fetch auth providers
     try {

src/translations/en.json

@@ -2977,6 +2977,7 @@
       "page-authorize": {
         "initializing": "Initializing",
         "authorizing_client": "You're about to give {clientId} access to your Home Assistant instance.",
+        "logging_in_to_with": "Logging in to **{locationName}** with **{authProviderName}**.",
         "logging_in_with": "Logging in with **{authProviderName}**.",
         "pick_auth_provider": "Or log in with",
         "abort_intro": "Login aborted",