From 3379779c04a5a1862b5a3b926d9c959eb786f364 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Wed, 21 Jun 2023 14:11:04 +0200
Subject: [PATCH] user avatar fallback

---
 apps/login/app/(login)/passkey/add/page.tsx | 2 +-
 apps/login/app/(login)/passkey/page.tsx     | 5 +----
 apps/login/app/(login)/password/page.tsx    | 2 +-
 apps/login/ui/UserAvatar.tsx                | 6 +++---
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/login/app/(login)/passkey/add/page.tsx b/apps/login/app/(login)/passkey/add/page.tsx
index f669185451c..eab8fa47ae6 100644
--- a/apps/login/app/(login)/passkey/add/page.tsx
+++ b/apps/login/app/(login)/passkey/add/page.tsx
@@ -34,7 +34,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>
diff --git a/apps/login/app/(login)/passkey/page.tsx b/apps/login/app/(login)/passkey/page.tsx
index d448e9da60a..7f867b784d4 100644
--- a/apps/login/app/(login)/passkey/page.tsx
+++ b/apps/login/app/(login)/passkey/page.tsx
@@ -2,15 +2,12 @@ import { getSession, server } from "#/lib/zitadel";
 import Alert from "#/ui/Alert";
 import UserAvatar from "#/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
-import { useRouter } from "next/navigation";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Record<string | number | symbol, string | undefined>;
 }) {
-  const router = useRouter();
-
   const { loginName } = searchParams;
   const sessionFactors = await loadSession(loginName);
 
@@ -39,7 +36,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>
diff --git a/apps/login/app/(login)/password/page.tsx b/apps/login/app/(login)/password/page.tsx
index e7c0eb21808..dbd0bcdc42f 100644
--- a/apps/login/app/(login)/password/page.tsx
+++ b/apps/login/app/(login)/password/page.tsx
@@ -38,7 +38,7 @@ export default async function Page({
 
       {sessionFactors && (
         <UserAvatar
-          loginName={loginName ?? sessionFactors.factors?.user?.loginName ?? ""}
+          loginName={loginName ?? sessionFactors.factors?.user?.loginName}
           displayName={sessionFactors.factors?.user?.displayName}
           showDropdown
         ></UserAvatar>
diff --git a/apps/login/ui/UserAvatar.tsx b/apps/login/ui/UserAvatar.tsx
index e12ddecdb74..6ab823bc4d1 100644
--- a/apps/login/ui/UserAvatar.tsx
+++ b/apps/login/ui/UserAvatar.tsx
@@ -3,7 +3,7 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
 type Props = {
-  loginName: string;
+  loginName?: string;
   displayName?: string;
   showDropdown: boolean;
 };
@@ -18,8 +18,8 @@ export default function UserAvatar({
       <div>
         <Avatar
           size="small"
-          name={displayName ?? loginName}
-          loginName={loginName}
+          name={displayName ?? loginName ?? "A"}
+          loginName={loginName ?? "A"}
         />
       </div>
       <span className="ml-4 text-14px">{loginName}</span>