Guard for no person for user (#18812)

src/auth/ha-local-auth-flow.ts

@@ -17,7 +17,7 @@ import {
   submitLoginFlow,
 } from "../data/auth";
 import { DataEntryFlowStep } from "../data/data_entry_flow";
-import { listPersons } from "../data/person";
+import { BasePerson, listUserPersons } from "../data/person";
 import "./ha-auth-textfield";
 import type { HaAuthTextField } from "./ha-auth-textfield";
 
@@ -43,7 +43,7 @@ export class HaLocalAuthFlow extends LitElement {
 
   @state() private _submitting = false;
 
-  @state() private _persons?: Promise<Record<string, string>>;
+  @state() private _persons?: Record<string, BasePerson>;
 
   @state() private _selectedUser?: string;
 
@@ -65,7 +65,9 @@ export class HaLocalAuthFlow extends LitElement {
     if (!this.authProvider?.users || !this._persons) {
       return nothing;
     }
-    const userIds = Object.keys(this.authProvider.users);
+    const userIds = Object.keys(this.authProvider.users).filter(
+      (userId) => userId in this._persons!
+    );
     return html`
       <style>
         .content {
@@ -198,9 +200,9 @@ export class HaLocalAuthFlow extends LitElement {
         : this._selectedUser
           ? html`<div class="login-form"><div class="person">
               <ha-person-badge
-                .person=${this._persons![this._selectedUser]}
+                .person=${this._persons[this._selectedUser]}
               ></ha-person-badge>
-              <p>${this._persons![this._selectedUser].name}</p>
+              <p>${this._persons[this._selectedUser].name}</p>
             </div>
             <form>
               <input
@@ -273,6 +275,7 @@ export class HaLocalAuthFlow extends LitElement {
               >
                 ${userIds.map((userId) => {
                   const person = this._persons![userId];
+
                   return html`<div
                     class="person"
                     .userId=${userId}
@@ -316,7 +319,12 @@ export class HaLocalAuthFlow extends LitElement {
   }
 
   private async _load() {
-    this._persons = await (await listPersons()).json();
+    try {
+      this._persons = await listUserPersons();
+    } catch {
+      this._persons = {};
+      this._error = "Failed to fetch persons";
+    }
   }
 
   private _restart() {

src/components/user/ha-person-badge.ts

@@ -2,12 +2,12 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { Person } from "../../data/person";
+import { BasePerson } from "../../data/person";
 import { computeUserInitials } from "../../data/user";
 
 @customElement("ha-person-badge")
 class PersonBadge extends LitElement {
-  @property({ attribute: false }) public person?: Person;
+  @property({ attribute: false }) public person?: BasePerson;
 
   protected render() {
     if (!this.person) {

src/data/person.ts

@@ -1,11 +1,14 @@
 import { HomeAssistant } from "../types";
 
-export interface Person {
-  id: string;
+export interface BasePerson {
   name: string;
+  picture?: string;
+}
+
+export interface Person extends BasePerson {
+  id: string;
   user_id?: string;
   device_trackers?: string[];
-  picture?: string;
 }
 
 export interface PersonMutableParams {
@@ -21,9 +24,14 @@ export const fetchPersons = (hass: HomeAssistant) =>
     config: Person[];
   }>({ type: "person/list" });
 
-export const listPersons = () =>
+export const listUserPersons = (): Promise<Record<string, BasePerson>> =>
   fetch("/api/person/list", {
     credentials: "same-origin",
+  }).then((resp) => {
+    if (resp.ok) {
+      return resp.json();
+    }
+    throw new Error(resp.statusText);
   });
 
 export const createPerson = (