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(
-                        new Date(session.factors.password.verifiedAt)
-                      ).fromNow()}
+                      {moment(new Date(validPassword)).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>
+  );
+}