Spaces:

JackHuggingFace88
/

WebArena-ShopSmart

Runtime error

App Files Files Community

Jack commited on Mar 22

Commit

f3845d0

1 Parent(s): 240bc36

account page fixes

Browse files

Files changed (6) hide show

README.md +1 -1
app/layout.tsx +5 -1
components/auth/auth-card.tsx +57 -5
lib/auth.ts +48 -33
lib/demo-auth-seed.ts +175 -0
server-actions/auth.ts +11 -5

README.md CHANGED Viewed

@@ -61,4 +61,4 @@ docker compose run --rm db-reset
 - No third-party auth dashboard is required for local development.
 - No hosted payment provider is required for checkout in the local demo.
 - Seeded grocery catalog data and images are local once the vendoring step has run.
-- Product cards still have local fallback imagery for newly created items without image URLs.

 - No third-party auth dashboard is required for local development.
 - No hosted payment provider is required for checkout in the local demo.
 - Seeded grocery catalog data and images are local once the vendoring step has run.
+- Product cards still have local fallback imagery for newly created items without image URLs.

app/layout.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 // app/layout.tsx
 import type { Metadata } from "next";
 import "./globals.css";
 import "../styles/globals.css";
@@ -15,7 +16,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
     </html>
   );
 }

 // app/layout.tsx
 import type { Metadata } from "next";
+import { Toaster } from "@/components/ui/Toaster";
 import "./globals.css";
 import "../styles/globals.css";
 }) {
   return (
     <html lang="en">
+      <body>
+        {children}
+        <Toaster />
+      </body>
     </html>
   );
 }

components/auth/auth-card.tsx CHANGED Viewed

@@ -8,8 +8,7 @@ import { routes } from "@/lib/routes";
 import { signIn, signUp } from "@/server-actions/auth";
 import { Loader2 } from "lucide-react";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 const demoAccounts = [
   "buyer@shopsmart.local / demo1234",
@@ -19,9 +18,14 @@ const demoAccounts = [
 ];
 export function AuthCard(props: { mode: "signIn" | "signUp" }) {
-  const router = useRouter();
   const { toast } = useToast();
   const [isLoading, setIsLoading] = useState(false);
   const [formValues, setFormValues] = useState({
     name: "",
     email: "",
@@ -30,6 +34,10 @@ export function AuthCard(props: { mode: "signIn" | "signUp" }) {
   const isSignIn = props.mode === "signIn";
   return (
     <div className="grid w-full max-w-5xl gap-8 rounded-3xl border border-border bg-white p-4 shadow-sm md:grid-cols-[1.15fr_0.85fr] md:p-8">
       <div className="overflow-hidden rounded-[1.5rem] bg-slate-950 p-8 text-white">
@@ -58,6 +66,7 @@ export function AuthCard(props: { mode: "signIn" | "signUp" }) {
         onSubmit={(event) => {
           event.preventDefault();
           setIsLoading(true);
           const action = isSignIn
             ? signIn({
@@ -68,16 +77,28 @@ export function AuthCard(props: { mode: "signIn" | "signUp" }) {
           action
             .then((result) => {
               toast({
                 title: result.message,
                 description: result.action,
               });
               if (!result.error) {
-                router.push(routes.account);
-                router.refresh();
               }
             })
             .finally(() => setIsLoading(false));
         }}
       >
@@ -88,6 +109,12 @@ export function AuthCard(props: { mode: "signIn" | "signUp" }) {
           <h2 className="mt-2 text-2xl font-semibold">
             {isSignIn ? "Sign in to your account" : "Create your account"}
           </h2>
         </div>
         {!isSignIn && (
@@ -147,6 +174,31 @@ export function AuthCard(props: { mode: "signIn" | "signUp" }) {
           {isSignIn ? "Sign In" : "Create Account"}
         </Button>
         <p className="text-sm text-muted-foreground">
           {isSignIn ? "Need an account?" : "Already have an account?"}{" "}
           <Link

 import { signIn, signUp } from "@/server-actions/auth";
 import { Loader2 } from "lucide-react";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 const demoAccounts = [
   "buyer@shopsmart.local / demo1234",
 ];
 export function AuthCard(props: { mode: "signIn" | "signUp" }) {
   const { toast } = useToast();
   const [isLoading, setIsLoading] = useState(false);
+  const [isEmbedded, setIsEmbedded] = useState(false);
+  const [status, setStatus] = useState<{
+    tone: "error" | "success";
+    title: string;
+    description: string;
+  } | null>(null);
   const [formValues, setFormValues] = useState({
     name: "",
     email: "",
   const isSignIn = props.mode === "signIn";
+  useEffect(() => {
+    setIsEmbedded(window.self !== window.top);
+  }, []);
   return (
     <div className="grid w-full max-w-5xl gap-8 rounded-3xl border border-border bg-white p-4 shadow-sm md:grid-cols-[1.15fr_0.85fr] md:p-8">
       <div className="overflow-hidden rounded-[1.5rem] bg-slate-950 p-8 text-white">
         onSubmit={(event) => {
           event.preventDefault();
           setIsLoading(true);
+          setStatus(null);
           const action = isSignIn
             ? signIn({
           action
             .then((result) => {
+              setStatus({
+                tone: result.error ? "error" : "success",
+                title: result.message,
+                description: result.action,
+              });
               toast({
                 title: result.message,
                 description: result.action,
               });
               if (!result.error) {
+                window.location.assign(routes.account);
               }
             })
+            .catch(() => {
+              setStatus({
+                tone: "error",
+                title: isSignIn ? "Sign in failed" : "Sign up failed",
+                description: "The request did not complete. Please try again.",
+              });
+            })
             .finally(() => setIsLoading(false));
         }}
       >
           <h2 className="mt-2 text-2xl font-semibold">
             {isSignIn ? "Sign in to your account" : "Create your account"}
           </h2>
+          {isEmbedded ? (
+            <p className="mt-3 text-sm text-muted-foreground">
+              If this Space is embedded on Hugging Face, open it in a new tab
+              before signing in so the browser can keep the session cookie.
+            </p>
+          ) : null}
         </div>
         {!isSignIn && (
           {isSignIn ? "Sign In" : "Create Account"}
         </Button>
+        {status ? (
+          <div
+            className={
+              status.tone === "error"
+                ? "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
+                : "rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700"
+            }
+          >
+            <p className="font-medium">{status.title}</p>
+            <p className="mt-1">{status.description}</p>
+          </div>
+        ) : null}
+        {isEmbedded ? (
+          <Button asChild variant="outline">
+            <a
+              href={isSignIn ? routes.signIn : routes.signUp}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Open This Page In A New Tab
+            </a>
+          </Button>
+        ) : null}
         <p className="text-sm text-muted-foreground">
           {isSignIn ? "Need an account?" : "Already have an account?"}{" "}
           <Link

lib/auth.ts CHANGED Viewed

@@ -10,6 +10,20 @@ import { cache } from "react";
 const SESSION_COOKIE_NAME = "shopsmart_session";
 const SESSION_DURATION_SECONDS = 60 * 60 * 24 * 30;
 export function hashPassword(password: string) {
   const salt = randomBytes(16).toString("hex");
   const hash = scryptSync(password, salt, 64).toString("hex");
@@ -37,25 +51,30 @@ export const getCurrentUser = cache(async () => {
     return null;
   }
-  const [record] = await db
-    .select({
-      id: users.id,
-      name: users.name,
-      email: users.email,
-      passwordHash: users.passwordHash,
-      storeId: users.storeId,
-      createdAt: users.createdAt,
-    })
-    .from(sessions)
-    .innerJoin(users, eq(sessions.userId, users.id))
-    .where(
-      and(
-        eq(sessions.sessionToken, sessionToken),
-        gt(sessions.expiresAt, Math.floor(Date.now() / 1000))
-      )
-    );
-  return record ?? null;
 });
 export async function requireUser() {
@@ -79,13 +98,11 @@ export async function createSession(userId: number) {
     expiresAt,
   });
-  cookies().set(SESSION_COOKIE_NAME, sessionToken, {
-    httpOnly: true,
-    sameSite: "lax",
-    secure: process.env.NODE_ENV === "production",
-    expires: new Date(expiresAt * 1000),
-    path: "/",
-  });
 }
 export async function destroySession() {
@@ -95,11 +112,9 @@ export async function destroySession() {
     await db.delete(sessions).where(eq(sessions.sessionToken, sessionToken));
   }
-  cookies().set(SESSION_COOKIE_NAME, "", {
-    httpOnly: true,
-    sameSite: "lax",
-    secure: process.env.NODE_ENV === "production",
-    expires: new Date(0),
-    path: "/",
-  });
 }

 const SESSION_COOKIE_NAME = "shopsmart_session";
 const SESSION_DURATION_SECONDS = 60 * 60 * 24 * 30;
+function getSessionCookieOptions(expires: Date) {
+  const isProduction = process.env.NODE_ENV === "production";
+  const isHuggingFaceSpace = Boolean(process.env.SPACE_HOST);
+  const useCrossSiteCookie = isProduction && isHuggingFaceSpace;
+  return {
+    httpOnly: true,
+    sameSite: useCrossSiteCookie ? "none" : "lax",
+    secure: isProduction,
+    expires,
+    path: "/",
+  } as const;
+}
 export function hashPassword(password: string) {
   const salt = randomBytes(16).toString("hex");
   const hash = scryptSync(password, salt, 64).toString("hex");
     return null;
   }
+  try {
+    const [record] = await db
+      .select({
+        id: users.id,
+        name: users.name,
+        email: users.email,
+        passwordHash: users.passwordHash,
+        storeId: users.storeId,
+        createdAt: users.createdAt,
+      })
+      .from(sessions)
+      .innerJoin(users, eq(sessions.userId, users.id))
+      .where(
+        and(
+          eq(sessions.sessionToken, sessionToken),
+          gt(sessions.expiresAt, Math.floor(Date.now() / 1000))
+        )
+      );
+    return record ?? null;
+  } catch (error) {
+    console.error("Failed to load the current user from the session store.", error);
+    return null;
+  }
 });
 export async function requireUser() {
     expiresAt,
   });
+  cookies().set(
+    SESSION_COOKIE_NAME,
+    sessionToken,
+    getSessionCookieOptions(new Date(expiresAt * 1000))
+  );
 }
 export async function destroySession() {
     await db.delete(sessions).where(eq(sessions.sessionToken, sessionToken));
   }
+  cookies().set(
+    SESSION_COOKIE_NAME,
+    "",
+    getSessionCookieOptions(new Date(0))
+  );
 }

lib/demo-auth-seed.ts ADDED Viewed

	@@ -0,0 +1,175 @@

+import "server-only";
+import { db } from "@/db/db";
+import { stores, users } from "@/db/schema";
+import { eq } from "drizzle-orm";
+const buyerPasswordHash =
+  "cb8e410fc0d517520d05c38b0bc25243:091a527d3595b8bd2c93c5129b83363fa786417d9eb40f0f42693e10b5f307a655063a8fbfa5697d825ef4edb6ca1e184af3dd304bcdaa2ab21ab30eb3dd4e94";
+const sellerPasswordHash =
+  "456a6918668c20e44ccd0129385afdd8:6afaf4c3a3b13023157ac0bab318e77ef05c4cfa8cd5751b10f095a000288de4e77cb82ba5b8e64db2202a527b41d1bd03fd8918268c25a66a6e9ec911a8309c";
+const demoBuyer = {
+  name: "Demo Buyer",
+  email: "buyer@shopsmart.local",
+  passwordHash: buyerPasswordHash,
+  storeId: null as number | null,
+};
+const demoStores = [
+  {
+    name: "Orchard Market",
+    slug: "orchard-market",
+    email: "orchard@shopsmart.local",
+    industry: "Produce Market",
+    description:
+      "Peak-season fruit, greens, herbs, and produce-box essentials for the week ahead.",
+  },
+  {
+    name: "Pantry Lane",
+    slug: "pantry-lane",
+    email: "pantry@shopsmart.local",
+    industry: "Pantry & Drinks",
+    description:
+      "Shelf staples, breakfast basics, drinks, and everyday pantry refills in one stop.",
+  },
+  {
+    name: "FreshMart",
+    slug: "freshmart",
+    email: "freshmart@shopsmart.local",
+    industry: "Neighborhood Grocery",
+    description:
+      "Everyday grocery basics with fruit, dairy, eggs, and bakery staples for fast weekly orders.",
+  },
+  {
+    name: "GreenBasket",
+    slug: "greenbasket",
+    email: "greenbasket@shopsmart.local",
+    industry: "Organic Grocer",
+    description:
+      "Organic produce and pantry staples curated for lighter cooking, meal prep, and low-waste baskets.",
+  },
+  {
+    name: "Family Fare",
+    slug: "family-fare",
+    email: "family@shopsmart.local",
+    industry: "Family Grocer",
+    description:
+      "Protein picks, freezer favorites, bulk produce, and family-size grocery staples.",
+  },
+  {
+    name: "Ready Table",
+    slug: "ready-table",
+    email: "readytable@shopsmart.local",
+    industry: "Prepared Meals",
+    description:
+      "Heat-and-eat dinners, pasta bowls, curries, and quick mains for busy nights.",
+  },
+  {
+    name: "Green Spoon",
+    slug: "green-spoon",
+    email: "greenspoon@shopsmart.local",
+    industry: "Fresh Deli",
+    description:
+      "Fresh salads, grain bowls, wraps, and lighter prepared foods for everyday lunches.",
+  },
+  {
+    name: "Oven & Crumb",
+    slug: "oven-and-crumb",
+    email: "oven@shopsmart.local",
+    industry: "Bakery & Cafe",
+    description:
+      "Bakery favorites, cafe-style sides, desserts, and grab-and-go comfort food.",
+  },
+] as const;
+const demoUsers = [
+  demoBuyer,
+  ...demoStores.map((store) => ({
+    name: `${store.name} Seller`,
+    email: store.email,
+    passwordHash: sellerPasswordHash,
+    storeSlug: store.slug,
+  })),
+] as const;
+const demoUserByEmail = new Map(
+  demoUsers.map((user) => [user.email.toLowerCase(), user])
+);
+export function isDemoAccountEmail(email: string) {
+  return demoUserByEmail.has(email.trim().toLowerCase());
+}
+async function ensureDemoStore(store: (typeof demoStores)[number]) {
+  const [existingStore] = await db
+    .select({ id: stores.id })
+    .from(stores)
+    .where(eq(stores.slug, store.slug));
+  if (existingStore) {
+    await db
+      .update(stores)
+      .set({
+        name: store.name,
+        industry: store.industry,
+        description: store.description,
+      })
+      .where(eq(stores.id, existingStore.id));
+    return existingStore.id;
+  }
+  const [{ insertId }] = await db.insert(stores).values({
+    name: store.name,
+    slug: store.slug,
+    industry: store.industry,
+    description: store.description,
+  });
+  return insertId;
+}
+export async function ensureDemoAccountSeed(email: string) {
+  const normalizedEmail = email.trim().toLowerCase();
+  const demoUser = demoUserByEmail.get(normalizedEmail);
+  if (!demoUser) {
+    return;
+  }
+  let storeId: number | null = null;
+  if ("storeSlug" in demoUser) {
+    const store = demoStores.find(
+      (candidate) => candidate.slug === demoUser.storeSlug
+    );
+    if (!store) {
+      throw new Error(`Missing demo store config for ${demoUser.email}`);
+    }
+    storeId = await ensureDemoStore(store);
+  }
+  const [existingUser] = await db
+    .select({ id: users.id })
+    .from(users)
+    .where(eq(users.email, demoUser.email));
+  const nextValues = {
+    name: demoUser.name,
+    email: demoUser.email,
+    passwordHash: demoUser.passwordHash,
+    storeId,
+    createdAt: Math.floor(Date.now() / 1000),
+  };
+  if (existingUser) {
+    await db.update(users).set(nextValues).where(eq(users.id, existingUser.id));
+    return;
+  }
+  await db.insert(users).values(nextValues);
+}

server-actions/auth.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import {
   hashPassword,
   verifyPassword,
 } from "@/lib/auth";
 import { eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
@@ -26,7 +27,11 @@ const signUpSchema = z.object({
 export async function signIn(values: { email: string; password: string }) {
   try {
-    const { email, password } = signInSchema.parse(values);
     const [user] = await db.select().from(users).where(eq(users.email, email));
@@ -47,7 +52,7 @@ export async function signIn(values: { email: string; password: string }) {
       action: "Welcome back to ShopSmart.",
     };
   } catch (error) {
-    console.log(error);
     return {
       error: true,
@@ -64,10 +69,11 @@ export async function signUp(values: {
 }) {
   try {
     const input = signUpSchema.parse(values);
     const [existingUser] = await db
       .select({ id: users.id })
       .from(users)
-      .where(eq(users.email, input.email));
     if (existingUser) {
       return {
@@ -79,7 +85,7 @@ export async function signUp(values: {
     const result = await db.insert(users).values({
       name: input.name,
-      email: input.email,
       passwordHash: hashPassword(input.password),
       createdAt: Math.floor(Date.now() / 1000),
     });
@@ -93,7 +99,7 @@ export async function signUp(values: {
       action: "You're ready to start shopping.",
     };
   } catch (error) {
-    console.log(error);
     return {
       error: true,

   hashPassword,
   verifyPassword,
 } from "@/lib/auth";
+import { ensureDemoAccountSeed } from "@/lib/demo-auth-seed";
 import { eq } from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import { z } from "zod";
 export async function signIn(values: { email: string; password: string }) {
   try {
+    const parsed = signInSchema.parse(values);
+    const email = parsed.email.toLowerCase();
+    const { password } = parsed;
+    await ensureDemoAccountSeed(email);
     const [user] = await db.select().from(users).where(eq(users.email, email));
       action: "Welcome back to ShopSmart.",
     };
   } catch (error) {
+    console.error("Sign in failed.", error);
     return {
       error: true,
 }) {
   try {
     const input = signUpSchema.parse(values);
+    const email = input.email.toLowerCase();
     const [existingUser] = await db
       .select({ id: users.id })
       .from(users)
+      .where(eq(users.email, email));
     if (existingUser) {
       return {
     const result = await db.insert(users).values({
       name: input.name,
+      email,
       passwordHash: hashPassword(input.password),
       createdAt: Math.floor(Date.now() / 1000),
     });
       action: "You're ready to start shopping.",
     };
   } catch (error) {
+    console.error("Sign up failed.", error);
     return {
       error: true,