accounts page, list all sessions

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

@@ -0,0 +1,92 @@
+import { listSessions, server } from "#/lib/zitadel";
+import { Avatar, AvatarSize } from "#/ui/Avatar";
+import { getAllSessionIds } from "#/utils/cookies";
+import {
+  ChevronRightIcon,
+  ExclamationTriangleIcon,
+  XCircleIcon,
+} from "@heroicons/react/24/outline";
+import moment from "moment";
+import Link from "next/link";
+
+async function loadSessions() {
+  const ids = await getAllSessionIds().catch((error) => {
+    console.log("err", error);
+  });
+
+  if (ids && ids.length) {
+    return listSessions(
+      server,
+      ids.filter((id: string | undefined) => !!id)
+    ).then((sessions) => {
+      console.log("ss", sessions.sessions);
+      return sessions;
+    });
+  } else {
+    return [];
+  }
+}
+
+export default async function Page() {
+  const { sessions } = await loadSessions();
+
+  return (
+    <div className="flex flex-col items-center space-y-4">
+      <h1>Accounts</h1>
+      <p className="ztdl-p mb-6 block">Use your ZITADEL Account</p>
+
+      <div className="flex flex-col w-full space-y-1">
+        {sessions ? (
+          sessions.map((session: any) => {
+            return (
+              <Link
+                href={
+                  `/password?` + new URLSearchParams({ session: session.id })
+                }
+                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}
+                    loginName={session.factors.user.loginName}
+                    name={session.factors.user.displayName}
+                  />
+                </div>
+
+                <div className="flex flex-col">
+                  <span className="">{session.factors.user.displayName}</span>
+                  <span className="text-xs opacity-80">
+                    {session.factors.user.loginName}
+                  </span>
+                  {session.factors.password?.verifiedAt && (
+                    <span className="text-xs opacity-80">
+                      {moment(
+                        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 ? (
+                    <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>
+                  )}
+
+                  <XCircleIcon className="hidden group-hover:block h-5 w-5 transition-all opacity-50 hover:opacity-100" />
+                </div>
+              </Link>
+            );
+          })
+        ) : (
+          <div className="flex flex-row items-center justify-center border border-yellow-600/40 dark:border-yellow-500/20 bg-yellow-200/30 text-yellow-600 dark:bg-yellow-700/20 dark:text-yellow-200 rounded-md py-2 scroll-px-40">
+            <ExclamationTriangleIcon className="h-5 w-5 mr-2" />
+            <span className="text-center text-sm">No Sessions available!</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -5,45 +5,28 @@ import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
 
 async function loadSession(loginName: string) {
   const recent = await getMostRecentCookieWithLoginname(loginName);
-  console.log("found recent cookie: ", recent);
 
   return getSession(server, recent.id, recent.token).then(({ session }) => {
-    console.log(session);
+    console.log("ss", session);
     return session;
   });
-  //   const res = await fetch(
-  //     `http://localhost:3000/session?` +
-  //       new URLSearchParams({
-  //         loginName: loginName,
-  //       }),
-  //     {
-  //       method: "GET",
-  //       headers: {
-  //         "Content-Type": "application/json",
-  //       },
-  //     }
-  //   );
-
-  //   if (!res.ok) {
-  //     throw new Error("Failed to load session");
-  //   }
-
-  //   return res.json();
 }
 
 export default async function Page({ searchParams }: { searchParams: any }) {
   const { loginName } = searchParams;
-  console.log(loginName);
 
   const sessionFactors = await loadSession(loginName);
-  console.log(sessionFactors);
 
   return (
     <div className="flex flex-col items-center space-y-4">
-      <h1>{sessionFactors.factors.user.displayName}</h1>
+      <h1>{sessionFactors.factors?.user?.displayName ?? "Password"}</h1>
       <p className="ztdl-p mb-6 block">Enter your password.</p>
 
-      <UserAvatar loginName={loginName} showDropdown></UserAvatar>
+      <UserAvatar
+        loginName={loginName ?? sessionFactors.factors?.user?.loginName}
+        displayName={sessionFactors.factors?.user?.displayName}
+        showDropdown
+      ></UserAvatar>
 
       <PasswordForm />
     </div>

apps/login/lib/zitadel.ts

@@ -110,6 +110,17 @@ export function getSession(
   return sessionService.getSession({ sessionId, sessionToken }, {});
 }
 
+export function listSessions(
+  server: ZitadelServer,
+  ids: string[]
+): Promise<any | undefined> {
+  const sessionService = session.getSession(server);
+  const query = { offset: 0, limit: 100, asc: true };
+  console.log(ids);
+  const queries = [{ idsQuery: { ids } }];
+  return sessionService.listSessions({ queries: queries }, {});
+}
+
 export type AddHumanUserData = {
   firstName: string;
   lastName: string;

apps/login/package.json

@@ -27,6 +27,7 @@
     "@zitadel/server": "workspace:*",
     "clsx": "1.2.1",
     "date-fns": "2.29.3",
+    "moment": "^2.29.4",
     "next": "13.4.2",
     "next-themes": "^0.2.1",
     "nice-grpc": "2.0.1",

apps/login/ui/Avatar.tsx

@@ -26,10 +26,16 @@ export const Avatar: FC<AvatarProps> = ({
   //   const { resolvedTheme } = useTheme();
   let credentials = "";
 
+  console.log(name, loginName);
   if (name) {
     const split = name.split(" ");
-    const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
-    credentials = initials;
+    if (split) {
+      const initials =
+        split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
+      credentials = initials;
+    } else {
+      return name.charAt(0);
+    }
   } else {
     const username = loginName.split("@")[0];
     let separator = "_";

apps/login/ui/PasswordForm.tsx

@@ -46,7 +46,7 @@ export default function PasswordForm() {
   function submitPasswordAndContinue(value: Inputs): Promise<boolean | void> {
     console.log(value);
     return submitPassword(value).then((resp: any) => {
-      return router.push(`/success`);
+      return router.push(`/accounts`);
     });
   }
 

apps/login/ui/UserAvatar.tsx

@@ -4,16 +4,21 @@ import Link from "next/link";
 
 type Props = {
   loginName: string;
+  displayName?: string;
   showDropdown: boolean;
 };
 
-export default function UserAvatar({ loginName, showDropdown }: Props) {
+export default function UserAvatar({
+  loginName,
+  displayName,
+  showDropdown,
+}: Props) {
   return (
     <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}
-          name={loginName}
+          name={displayName ?? loginName}
           loginName={loginName}
         />
       </div>

apps/login/utils/cookies.ts

@@ -100,8 +100,6 @@ export async function removeSessionFromCookie(
 
 export async function getMostRecentSessionCookie(): Promise<any> {
   const cookiesList = cookies();
-  //   const hasSessions = cookiesList.has("sessions");
-  //   if (hasSessions) {
   const stringifiedCookie = cookiesList.get("sessions");
 
   if (stringifiedCookie?.value) {
@@ -119,13 +117,27 @@ export async function getMostRecentSessionCookie(): Promise<any> {
   } else {
     return Promise.reject();
   }
-  //   } else {
-  //     return Promise.reject();
-  //   }
 }
 
+export async function getAllSessionIds(): Promise<any> {
+  const cookiesList = cookies();
+  const stringifiedCookie = cookiesList.get("sessions");
+
+  if (stringifiedCookie?.value) {
+    const sessions: SessionCookie[] = JSON.parse(stringifiedCookie?.value);
+    return sessions.map((session) => session.id);
+  } else {
+    return Promise.reject();
+  }
+}
+
+/**
+ * Returns most recent session filtered by optinal loginName
+ * @param loginName
+ * @returns most recent session
+ */
 export async function getMostRecentCookieWithLoginname(
-  loginName: string
+  loginName?: string
 ): Promise<any> {
   const cookiesList = cookies();
 
@@ -135,7 +147,7 @@ export async function getMostRecentCookieWithLoginname(
     const sessions: SessionCookie[] = JSON.parse(stringifiedCookie?.value);
 
     const latest = sessions
-      .filter((cookie) => cookie.loginName === loginName)
+      .filter((cookie) => (loginName ? cookie.loginName === loginName : true))
       .reduce((prev, current) => {
         return new Date(prev.changeDate).getTime() >
           new Date(current.changeDate).getTime()

pnpm-lock.yaml

@@ -41,6 +41,7 @@ importers:
       grpc-tools: 1.11.3
       lint-staged: 13.0.3
       make-dir-cli: 3.0.0
+      moment: ^2.29.4
       next: 13.4.2
       next-themes: ^0.2.1
       nice-grpc: 2.0.1
@@ -65,6 +66,7 @@ importers:
       '@zitadel/server': link:../../packages/zitadel-server
       clsx: 1.2.1
       date-fns: 2.29.3
+      moment: 2.29.4
       next: 13.4.2_krg7tz6h6n3fx3eq7tclunioeu
       next-themes: 0.2.1_cmp7sjki5xcmfyvhcokzzink7a
       nice-grpc: 2.0.1
@@ -3581,6 +3583,10 @@ packages:
     hasBin: true
     dev: true
 
+  /moment/2.29.4:
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
+    dev: false
+
   /ms/2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: false