signedin page, client avatar

apps/login/app/(login)/accounts/page.tsx

@@ -1,5 +1,5 @@
 import { listSessions, server } from "#/lib/zitadel";
-import { Avatar, AvatarSize } from "#/ui/Avatar";
+import { Avatar } from "#/ui/Avatar";
 import { getAllSessionIds } from "#/utils/cookies";
 import {
   ExclamationTriangleIcon,
@@ -18,7 +18,6 @@ async function loadSessions() {
       server,
       ids.filter((id: string | undefined) => !!id)
     ).then((sessions) => {
-      console.log("ss", sessions.sessions);
       return sessions;
     });
   } else {
@@ -37,16 +36,26 @@ export default async function Page() {
       <div className="flex flex-col w-full space-y-1">
         {sessions ? (
           sessions.map((session: any) => {
+            const validPassword = session.factors.password?.verifiedAt;
+            console.log(session);
             return (
               <Link
                 href={
-                  `/password?` + new URLSearchParams({ session: session.id })
+                  validPassword
+                    ? `/signedin?` +
+                      new URLSearchParams({
+                        loginName: session.factors.user.loginName,
+                      })
+                    : `/password?` +
+                      new URLSearchParams({
+                        loginName: session.factors.user.loginName,
+                      })
                 }
                 className="group flex flex-row items-center hover:bg-black/10 dark:hover:bg-white/10 py-3 px-4 rounded-md"
               >
                 <div className="pr-4">
                   <Avatar
-                    size={AvatarSize.SMALL}
+                    size="small"
                     loginName={session.factors.user.loginName}
                     name={session.factors.user.displayName}
                   />
@@ -57,18 +66,16 @@ export default async function Page() {
                   <span className="text-xs opacity-80">
                     {session.factors.user.loginName}
                   </span>
-                  {session.factors.password?.verifiedAt && (
+                  {validPassword && (
                     <span className="text-xs opacity-80">
-                      {moment(
+                      {moment(new Date(validPassword)).fromNow()}
-                        new Date(session.factors.password.verifiedAt)
-                      ).fromNow()}
                     </span>
                   )}
                 </div>
 
                 <span className="flex-grow"></span>
                 <div className="relative flex flex-row items-center">
-                  {session.factors.password?.verifiedAt ? (
+                  {validPassword ? (
                     <div className="absolute h-2 w-2 bg-green-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>
                   ) : (
                     <div className="absolute h-2 w-2 bg-red-500 rounded-full mx-2 transform right-0 group-hover:right-6 transition-all"></div>

apps/login/app/(login)/password/page.tsx

@@ -8,7 +8,6 @@ async function loadSession(loginName: string) {
     const recent = await getMostRecentCookieWithLoginname(`${loginName}`);
 
     return getSession(server, recent.id, recent.token).then(({ session }) => {
-      console.log("ss", session);
       return session;
     });
   } catch (error) {
@@ -18,8 +17,6 @@ async function loadSession(loginName: string) {
 
 export default async function Page({ searchParams }: { searchParams: any }) {
   const { loginName } = searchParams;
-
-  console.log(loginName);
   const sessionFactors = await loadSession(loginName);
 
   return (

apps/login/app/(login)/signedin/page.tsx

@@ -0,0 +1,34 @@
+import { getSession, server } from "#/lib/zitadel";
+import PasswordForm from "#/ui/PasswordForm";
+import UserAvatar from "#/ui/UserAvatar";
+import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
+
+async function loadSession(loginName: string) {
+  try {
+    const recent = await getMostRecentCookieWithLoginname(`${loginName}`);
+
+    return getSession(server, recent.id, recent.token).then(({ session }) => {
+      return session;
+    });
+  } catch (error) {
+    throw new Error("Session could not be loaded!");
+  }
+}
+
+export default async function Page({ searchParams }: { searchParams: any }) {
+  const { loginName } = searchParams;
+  const sessionFactors = await loadSession(loginName);
+
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <h1>{`Welcome ${sessionFactors.factors?.user?.displayName}`}</h1>
+      <p className="ztdl-p mb-6 block">You are signed in.</p>
+
+      <UserAvatar
+        loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+        displayName={sessionFactors.factors?.user?.displayName}
+        showDropdown
+      ></UserAvatar>
+    </div>
+  );
+}

apps/login/ui/Avatar.tsx

@@ -1,32 +1,18 @@
+"use client";
+
 import { ColorShade, getColorHash } from "#/utils/colors";
 import { useTheme } from "next-themes";
-import { FC } from "react";
-
-export enum AvatarSize {
-  SMALL = "small",
-  BASE = "base",
-  LARGE = "large",
-}
 
 interface AvatarProps {
   name: string | null | undefined;
   loginName: string;
   imageUrl?: string;
-  size?: AvatarSize;
+  size?: "small" | "base" | "large";
   shadow?: boolean;
 }
 
-export const Avatar: FC<AvatarProps> = ({
+function getCredentials(name: string, loginName: string) {
-  size = AvatarSize.BASE,
-  name,
-  loginName,
-  imageUrl,
-  shadow,
-}) => {
-  //   const { resolvedTheme } = useTheme();
   let credentials = "";
-
-  console.log(name, loginName);
   if (name) {
     const split = name.split(" ");
     if (split) {
@@ -34,7 +20,7 @@ export const Avatar: FC<AvatarProps> = ({
         split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
       credentials = initials;
     } else {
-      return name.charAt(0);
+      credentials = name.charAt(0);
     }
   } else {
     const username = loginName.split("@")[0];
@@ -50,32 +36,51 @@ export const Avatar: FC<AvatarProps> = ({
     credentials = initials;
   }
 
+  return credentials;
+}
+
+export function Avatar({
+  size = "base",
+  name,
+  loginName,
+  imageUrl,
+  shadow,
+}: AvatarProps) {
+  const { resolvedTheme } = useTheme();
+  const credentials = getCredentials(name ?? loginName, loginName);
+
   const color: ColorShade = getColorHash(loginName);
 
-  //   const avatarStyleDark = {
+  const avatarStyleDark = {
-  //     backgroundColor: color[900],
+    backgroundColor: color[900],
-  //     color: color[200],
+    color: color[200],
-  //   };
+  };
 
-  //   const avatarStyleLight = {
+  const avatarStyleLight = {
-  //     backgroundColor: color[200],
+    backgroundColor: color[200],
-  //     color: color[900],
+    color: color[900],
-  //   };
+  };
+
+  //   const [mounted, setMounted] = useState<boolean>(false);
+  //   // useEffect only runs on the client, so now we can safely show the UI
+  //   useEffect(() => {
+  //     setMounted(true);
+  //   }, []);
 
   return (
     <div
       className={`w-full h-full flex-shrink-0 flex justify-center items-center cursor-default pointer-events-none group-focus:outline-none group-focus:ring-2 transition-colors duration-200 dark:group-focus:ring-offset-blue bg-primary-light-500 text-primary-light-contrast-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-500 group-focus:ring-primary-light-200 dark:group-focus:ring-primary-dark-400 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 dark:text-blue rounded-full ${
         shadow ? "shadow" : ""
       } ${
-        size === AvatarSize.LARGE
+        size === "large"
           ? "h-20 w-20 font-normal"
-          : size === AvatarSize.BASE
+          : size === "base"
           ? "w-[38px] h-[38px] font-bold"
-          : size === AvatarSize.SMALL
+          : size === "small"
-          ? "w-[32px] h-[32px] font-bold"
+          ? "w-[32px] h-[32px] font-bold text-[13px]"
           : ""
       }`}
-      //   style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}
+      style={resolvedTheme === "light" ? avatarStyleLight : avatarStyleDark}
     >
       {imageUrl ? (
         <img
@@ -84,13 +89,11 @@ export const Avatar: FC<AvatarProps> = ({
         />
       ) : (
         <span
-          className={`uppercase ${
+          className={`uppercase ${size === "large" ? "text-xl" : "text-13px"}`}
-            size === AvatarSize.LARGE ? "text-xl" : "text-13px"
-          }`}
         >
           {credentials}
         </span>
       )}
     </div>
   );
-};
+}

apps/login/ui/UserAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarSize } from "#/ui/Avatar";
+import { Avatar } from "#/ui/Avatar";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 
@@ -17,7 +17,7 @@ export default function UserAvatar({
     <div className="flex h-full w-full flex-row items-center rounded-full border p-[1px] dark:border-white/20">
       <div>
         <Avatar
-          size={AvatarSize.SMALL}
+          size="small"
           name={displayName ?? loginName}
           loginName={loginName}
         />

apps/login/utils/cookies.ts

@@ -88,7 +88,7 @@ export async function removeSessionFromCookie(
 
   // @ts-ignore
   return cookiesList.set({
-    name: "sessions",
+    name: "__Secure-sessions",
     value: JSON.stringify(filteredSessions),
     httpOnly: true,
     path: "/",