feat: separate interface for decoded accounts

web/src/context/db/db.ts

@@ -3,11 +3,13 @@ import { createContext, useContext } from "react";
 
 interface DbContextValues {
   db: IDBPDatabase | null;
+  connected: boolean;
   setDb: (db: IDBPDatabase) => void;
 }
 
 export const DbContext = createContext<DbContextValues>({
   db: null,
+  connected: false,
   setDb: () => {},
 });
 

web/src/context/db/provider.tsx

@@ -15,6 +15,7 @@ export const DbProvider: FC<IDBProvider> = ({ children }) => {
     <DbContext.Provider
       value={{
         db,
+        connected: Boolean(db),
         setDb,
       }}
     >

web/src/pages/Index/index.tsx

@@ -1,14 +1,72 @@
-import { useAccountRepo } from "@/repository/account";
+import { useDbContext } from "@/context/db/db";
-import { useEffect, type FC } from "react";
+import { useAccountRepo, type LocalAccount } from "@/repository/account";
+import { useEffect, useState, type FC } from "react";
+
+import overlay from "@/assets/overlay.jpg";
+import { Card, CardContent } from "@/components/ui/card";
+import { User } from "lucide-react";
 
 const IndexPage: FC = () => {
+  const [accounts, setAccounts] = useState<LocalAccount[]>([]);
+
   const repo = useAccountRepo();
+  const { connected } = useDbContext();
 
   useEffect(() => {
-    repo.loadAll().then((res) => console.log({ res }));
+    if (connected) repo.loadAll().then(setAccounts);
-  }, [repo]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connected]);
 
-  return <div></div>;
+  return (
+    <div
+      className="relative min-h-screen bg-cover bg-center bg-white"
+      style={{ backgroundImage: `url(${overlay})` }}
+    >
+      <div className="relative z-10 flex items-center justify-center min-h-screen">
+        <Card className="sm:w-[700px] sm:min-w-[700px] sm:max-w-96 sm:min-h-auto p-3 min-h-screen w-full min-w-full shadow-lg bg-white/90 backdrop-blur-md">
+          <div className="flex sm:flex-row flex-col sm:items-start items-center pt-16 sm:pt-0">
+            <div className="flex flex-col items-center flex-5/6">
+              <img
+                src="/icon.png"
+                alt="icon"
+                className="w-16 h-16 mb-4 mt-2 sm:mt-6"
+              />
+
+              <div className="px-4 sm:mt-4 mt-8">
+                <h2 className="text-2xl font-bold text-gray-800 text-left w-full">
+                  Select Account
+                </h2>
+                <h4 className="text-base mb-3 text-gray-400 text-left">
+                  Choose one of the accounts below in order to proceed to home
+                  lab services and tools.
+                </h4>
+              </div>
+            </div>
+
+            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
+            <CardContent className="w-full space-y-4">
+              {accounts.map((account) => (
+                <div
+                  key={account.accountId}
+                  className="flex flex-row items-center p-4 border-gray-200 border sm:border-l sm:border-r border-r-0 border-l-0 sm:rounded-xl select-none cursor-pointer hover:bg-gray-50 transition-colors mb-2"
+                >
+                  <div>
+                    <div className="rounded-full p-2 bg-gray-100 mr-3">
+                      <User />
+                    </div>
+                  </div>
+                  <div className="flex flex-col">
+                    <p className="text-base">{account.label}</p>
+                    <p className="text-gray-500 text-sm">{account.email}</p>
+                  </div>
+                </div>
+              ))}
+            </CardContent>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default IndexPage;

web/src/pages/Login/index.tsx

@@ -92,7 +92,6 @@ export default function LoginPage() {
               </h4>
             </div>
 
-            {/* <LogIn className="w-8 h-8 text-gray-700 mb-4" /> */}
             <CardContent className="w-full space-y-4">
               <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="mb-4">

web/src/repository/account.ts

@@ -2,7 +2,7 @@ import { useDbContext } from "@/context/db/db";
 import { deriveDeviceKey, getDeviceId } from "@/util/deviceId";
 import { useCallback } from "react";
 
-export interface LocalAccount {
+export interface RawLocalAccount {
   accountId: string;
   label: string;
   email: string;
@@ -11,6 +11,15 @@ export interface LocalAccount {
   updatedAt: string;
 }
 
+export interface LocalAccount {
+  accountId: string;
+  label: string;
+  email: string;
+  access: string;
+  refresh: string;
+  updatedAt: string;
+}
+
 export interface CreateAccountRequest {
   accountId: string;
   label: string;
@@ -96,25 +105,28 @@ export const useAccountRepo = () => {
     const tx = db.transaction("accounts", "readonly");
     const store = tx.objectStore("accounts");
 
-    const accounts: LocalAccount[] = await store.getAll();
+    const accounts: RawLocalAccount[] = await store.getAll();
 
-    const results = [];
+    const results: LocalAccount[] = (
-    for (const account of accounts) {
+      await Promise.all(
+        accounts.map(async (account) => {
           try {
             const accessToken = await decryptToken(account.access);
             const refreshToken = await decryptToken(account.refresh);
-        results.push({
+            return {
               accountId: account.accountId,
               label: account.label,
               email: account.email,
               access: accessToken,
               refresh: refreshToken,
               updatedAt: account.updatedAt,
-        });
+            };
           } catch (err) {
             console.warn(`Failed to decrypt account ${account.label}:`, err);
           }
-    }
+        })
+      )
+    ).filter((acc) => acc !== undefined);
 
     return results;
   }, [db, decryptToken]);