From 33c7e5c1859d16f9bc2f60ab6b8dc714f022391a Mon Sep 17 00:00:00 2001
From: Yuchen Shi <yuchenshi@google.com>
Date: Wed, 22 Sep 2021 15:32:30 -0700
Subject: [PATCH] Minor fixes for Auth Emulator IDP widget. (#3774)

* Minor fixes for Auth Emulator IDP widget.

* Changelog.
---
 CHANGELOG.md                   | 1 +
 src/emulator/auth/handlers.ts  | 6 ++++--
 src/emulator/auth/widget_ui.ts | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a99a4249af6..135ecd2b1ed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,2 +1,3 @@
 - `ext:dev:publish` and `ext:update` now support --force and --non-interactive flags.
 - Fixes issue where account specified by `login:use` was not being correctly loaded (#3759).
+- Fixes minor layout issues in Auth Emulator IDP sign-in page (#3774).
diff --git a/src/emulator/auth/handlers.ts b/src/emulator/auth/handlers.ts
index f08ed8dca14..b0d22252d97 100644
--- a/src/emulator/auth/handlers.ts
+++ b/src/emulator/auth/handlers.ts
@@ -195,9 +195,11 @@ export function registerHandlers(
             <span class="mdc-list-item__graphic material-icons" aria-hidden=true>person</span>`
           }
           <span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">${
-            info.displayName
+            info.displayName || "(No display name)"
+          }</span>
+          <span class="mdc-list-item__secondary-text fallback-secondary-text">${
+            info.email || ""
           }</span>
-          <span class="mdc-list-item__secondary-text fallback-secondary-text">${info.email}</span>
       </li>`
       )
       .join("\n");
diff --git a/src/emulator/auth/widget_ui.ts b/src/emulator/auth/widget_ui.ts
index a5b8696613c..ce862e75d33 100644
--- a/src/emulator/auth/widget_ui.ts
+++ b/src/emulator/auth/widget_ui.ts
@@ -491,7 +491,7 @@ export const WIDGET_UI = `
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Auth Emulator IDP Login Widget</title>
-<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+<link href="https://unpkg.com/material-components-web@10/dist/material-components-web.min.css" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
 <style>${STYLE}</style>
@@ -604,6 +604,6 @@ export const WIDGET_UI = `
     </div>
   </div>
 </div>
-<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+<script src="https://unpkg.com/material-components-web@10/dist/material-components-web.min.js"></script>
 <script>${SCRIPT}</script>
 `;