AWS SES preview

App.tsx

@@ -1,31 +1,76 @@
-import { useState } from "react";
-import { Dashboard } from "./components/Dashboard";
-import { Inventory } from "./components/Inventory";
-import { ProtocolChecker } from "./components/ProtocolChecker";
-import { useSession, signIn, signOut } from "./lib/auth-client";
-import { Button } from "./components/ui/button";
-import { Card, CardContent } from "./components/ui/card";
-import {
-  LayoutDashboard,
-  Package,
-  FileCheck,
-  LogOut,
-} from "lucide-react";
-const logo = "/logo.png";
+import { useState, useEffect } from 'react';
+import { Dashboard } from './components/Dashboard';
+import { Inventory } from './components/Inventory';
+import { ProtocolChecker } from './components/ProtocolChecker';
+import { Onboarding } from './components/Onboarding';
+import { LoginForm } from './components/auth/LoginForm';
+import { SignUpForm } from './components/auth/SignUpForm';
+import { EmailVerification } from './components/auth/EmailVerification';
+import { ForgotPassword } from './components/auth/ForgotPassword';
+import { ResetPassword } from './components/auth/ResetPassword';
+import { useSession, signOut } from './lib/auth-client';
+import { LayoutDashboard, Package, FileCheck, LogOut } from 'lucide-react';
 
-type Tab = "dashboard" | "inventory" | "protocol";
+const logo = '/logo.png';
+
+type AppView =
+  | 'loading'
+  | 'login'
+  | 'signup'
+  | 'verify-email'
+  | 'forgot-password'
+  | 'reset-password'
+  | 'onboarding'
+  | 'app';
+
+type Tab = 'dashboard' | 'inventory' | 'protocol';
+
+function isResetPasswordRoute() {
+  return (
+    window.location.pathname === '/reset-password' &&
+    Boolean(new URLSearchParams(window.location.search).get('token'))
+  );
+}
 
 export default function App() {
   const { data: session, isPending } = useSession();
-  const [activeTab, setActiveTab] = useState<Tab>("dashboard");
+  const [view, setView] = useState<AppView>(
+    isResetPasswordRoute() ? 'reset-password' : 'loading'
+  );
+  const [activeTab, setActiveTab] = useState<Tab>('dashboard');
 
-  const navItems = [
-    { id: "dashboard" as Tab, label: "Dashboard", icon: LayoutDashboard },
-    { id: "inventory" as Tab, label: "Inventory", icon: Package },
-    { id: "protocol" as Tab, label: "Protocol Checker", icon: FileCheck },
-  ];
+  useEffect(() => {
+    if (view === 'reset-password') return;
+    if (isPending) return;
 
-  if (isPending) {
+    if (!session) {
+      setView('login');
+      return;
+    }
+
+    if (!session.user.emailVerified) {
+      setView('verify-email');
+      return;
+    }
+
+    // Check if lab profile exists
+    fetch('/api/profile', { credentials: 'include' }).then(r => {
+      setView(r.ok ? 'app' : 'onboarding');
+    });
+  }, [session, isPending, view]);
+
+  if (view === 'reset-password') {
+    return (
+      <ResetPassword
+        onSuccess={() => {
+          window.history.replaceState({}, '', '/');
+          setView('login');
+        }}
+      />
+    );
+  }
+
+  if (view === 'loading') {
     return (
       <div className="flex h-screen items-center justify-center bg-secondary">
         <img src={logo} alt="LabWise" className="h-12 opacity-50 animate-pulse" />
@@ -34,45 +79,45 @@ export default function App() {
   }
 
   if (!session) {
+    if (view === 'signup')
+      return (
+        <SignUpForm
+          onLogin={() => setView('login')}
+          onVerify={() => setView('verify-email')}
+        />
+      );
+    if (view === 'forgot-password')
+      return <ForgotPassword onBack={() => setView('login')} />;
     return (
-      <div className="flex h-screen items-center justify-center bg-secondary">
-        <Card className="w-full max-w-sm">
-          <CardContent className="p-8 space-y-6">
-            <div className="flex justify-center">
-              <img src={logo} alt="LabWise" className="h-12" />
-            </div>
-            <p className="text-center text-muted-foreground text-sm">
-              Sign in to access your lab inventory and protocols.
-            </p>
-            <Button
-              variant="outline"
-              className="w-full flex items-center gap-3"
-              onClick={() => signIn.social({ provider: "google", callbackURL: window.location.origin })}
-            >
-              <svg viewBox="0 0 24 24" className="h-4 w-4" xmlns="http://www.w3.org/2000/svg">
-                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
-                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
-                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
-                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
-              </svg>
-              Sign in with Google
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
+      <LoginForm
+        onSignUp={() => setView('signup')}
+        onForgotPassword={() => setView('forgot-password')}
+      />
     );
   }
 
+  if (view === 'verify-email')
+    return <EmailVerification email={session.user.email} />;
+
+  if (view === 'onboarding')
+    return <Onboarding onComplete={() => setView('app')} />;
+
+  if (view !== 'app') return null;
+
+  const navItems = [
+    { id: 'dashboard' as Tab, label: 'Dashboard', icon: LayoutDashboard },
+    { id: 'inventory' as Tab, label: 'Inventory', icon: Package },
+    { id: 'protocol' as Tab, label: 'Protocol Checker', icon: FileCheck },
+  ];
+
   return (
     <div className="flex h-screen bg-secondary">
-      {/* Sidebar */}
       <aside className="w-64 bg-card border-r border-border flex flex-col">
         <div className="p-6 border-b border-border flex items-center justify-center">
           <img src={logo} alt="labwise" className="h-15" />
         </div>
-
         <nav className="flex-1 p-4">
-          {navItems.map((item) => {
+          {navItems.map(item => {
             const Icon = item.icon;
             return (
               <button
@@ -80,8 +125,8 @@ export default function App() {
                 onClick={() => setActiveTab(item.id)}
                 className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors ${
                   activeTab === item.id
-                    ? "bg-accent text-primary"
-                    : "text-muted-foreground hover:bg-muted"
+                    ? 'bg-accent text-primary'
+                    : 'text-muted-foreground hover:bg-muted'
                 }`}
               >
                 <Icon className="w-5 h-5" />
@@ -90,7 +135,6 @@ export default function App() {
             );
           })}
         </nav>
-
         <div className="p-4 border-t border-border">
           <div className="text-xs text-muted-foreground mb-2 truncate px-1">
             {session.user.email}
@@ -104,13 +148,11 @@ export default function App() {
           </button>
         </div>
       </aside>
-
-      {/* Main Content */}
       <main className="flex-1 overflow-auto">
-        {activeTab === "dashboard" && <Dashboard setActiveTab={setActiveTab} />}
-        {activeTab === "inventory" && <Inventory />}
-        {activeTab === "protocol" && <ProtocolChecker />}
+        {activeTab === 'dashboard' && <Dashboard setActiveTab={setActiveTab} />}
+        {activeTab === 'inventory' && <Inventory />}
+        {activeTab === 'protocol' && <ProtocolChecker />}
       </main>
     </div>
   );
-}
+}