[#32] added check is no name or lastname

__test__/components/Menubar.test.tsx

@@ -38,6 +38,23 @@ describe("Calendar App Component Display Tests", () => {
     expect(screen.getByText("JD")).toBeInTheDocument();
   });
 
+  it("shows avatar with email initials when no user name", () => {
+    (window as any).appList = [{ name: "test", icon: "test", link: "test" }];
+    const preloadedState = {
+      user: {
+        userData: {
+          sub: "test",
+          email: "test@test.com",
+          family_name: "Doe",
+          sid: "mockSid",
+          openpaasId: "667037022b752d0026472254",
+        },
+      },
+    };
+    renderWithProviders(<Menubar />, preloadedState);
+    expect(screen.getByText("t")).toBeInTheDocument();
+  });
+
   it("shows AppsIcon when applist is not empty", () => {
     (window as any).appList = [{ name: "test", icon: "test", link: "test" }];
     renderWithProviders(<Menubar />, preloadedState);

src/components/Menubar/Menubar.tsx

@@ -46,11 +46,16 @@ export function Menubar() {
             </IconButton>
           )}
           <Avatar
-            sx={{ bgcolor: stringToColor(user.family_name) }}
+            sx={{
+              bgcolor: stringToColor(
+                user.family_name ? user.family_name : user.email
+              ),
+            }}
             sizes="large"
           >
-            {user.name[0]}
-            {user.family_name[0]}
+            {user.name && user.family_name
+              ? `${user.name[0]}${user.family_name[0]}`
+              : user.email[0]}
           </Avatar>
         </div>
       </header>