From 032be08c425bccbfaf5961f4b4397359e289cdfe Mon Sep 17 00:00:00 2001 From: mawkone Date: Wed, 13 May 2026 20:52:31 -0700 Subject: [PATCH] feat(auth): redesign signin page to match new dark premium aesthetic --- vibn-frontend/app/auth/layout.tsx | 25 +-- .../app/components/NextAuthComponent.tsx | 204 +++++------------- 2 files changed, 57 insertions(+), 172 deletions(-) diff --git a/vibn-frontend/app/auth/layout.tsx b/vibn-frontend/app/auth/layout.tsx index 6f0908c3..0e9fb78c 100644 --- a/vibn-frontend/app/auth/layout.tsx +++ b/vibn-frontend/app/auth/layout.tsx @@ -1,19 +1,9 @@ import type { Metadata } from "next"; -import { Plus_Jakarta_Sans } from "next/font/google"; import { Toaster } from "sonner"; -import { JustineAuthShell } from "@/marketing/components/justine/JustineAuthShell"; -import "../styles/justine/02-signup.css"; - -const justineJakarta = Plus_Jakarta_Sans({ - subsets: ["latin"], - weight: ["400", "500", "600", "700", "800"], - variable: "--font-justine-jakarta", - display: "swap", -}); +import "../styles/new-site.css"; export const metadata: Metadata = { - title: "Sign in · vibn", - description: "Sign in to your vibn workspace with Google.", + title: "Vibn — Sign In", }; export default function AuthLayout({ @@ -22,12 +12,11 @@ export default function AuthLayout({ children: React.ReactNode; }) { return ( -
- {children} - +
+
+ {children} +
+
); } diff --git a/vibn-frontend/app/components/NextAuthComponent.tsx b/vibn-frontend/app/components/NextAuthComponent.tsx index 19f2debb..0cd0fd83 100644 --- a/vibn-frontend/app/components/NextAuthComponent.tsx +++ b/vibn-frontend/app/components/NextAuthComponent.tsx @@ -8,193 +8,89 @@ import { Suspense, useState } from "react"; function authErrorMessage(code: string | null): string | null { if (!code) return null; if (code === "Callback") { - return ( - "Google could not complete sign-in. Most often: DATABASE_URL in vibn-frontend/.env.local must reach Postgres from " + - "this machine (Coolify internal hostnames only work inside Docker). Use a public host/port, tunnel, or proxy; " + - "then run npx prisma db push. Also confirm NEXTAUTH_URL matches the browser (http://localhost:3000) and " + - "Google redirect URI http://localhost:3000/api/auth/callback/google. Dev check: GET /api/debug/prisma — see terminal for [next-auth] logs." - ); - } - if (code === "Configuration") { - return "Auth is misconfigured (check GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_SECRET)."; - } - if (code === "AccessDenied") { - return "Access was denied. You may need to be added as a test user if the OAuth app is in testing mode."; - } - return `Sign-in error: ${code}`; -} - -const showDevLocalSignIn = - process.env.NODE_ENV === "development" && - Boolean(process.env.NEXT_PUBLIC_DEV_LOCAL_AUTH_EMAIL?.trim()); - -function NextAuthForm() { - const [isLoading, setIsLoading] = useState(false); - const [devSecret, setDevSecret] = useState(""); - const searchParams = useSearchParams(); - const callbackUrl = searchParams.get("callbackUrl") ?? "/auth"; - const errorCode = searchParams.get("error"); - const errorHint = authErrorMessage(errorCode); - - const handleGoogleSignIn = async () => { - setIsLoading(true); - try { - await signIn("google", { callbackUrl }); - } catch (error) { - console.error("Google sign-in error:", error); - setIsLoading(false); - } - }; - - const handleDevLocalSignIn = async () => { - setIsLoading(true); - try { - await signIn("dev-local", { - callbackUrl, - password: devSecret, - redirect: true, - }); - } catch (error) { - console.error("Dev local sign-in error:", error); - setIsLoading(false); - } - }; - - // Detect new-vs-returning purely from local search params; we - // don't have a session at this render path, but the homepage - // sends "Get started" links with `?new=1` and "Sign in" links - // without it. Fall back to neutral copy that works for both. - const isNewUser = searchParams.get("new") === "1"; - const title = isNewUser ? "Create your account" : "Sign in or sign up"; - const subtitle = isNewUser - ? "Continue with Google to set up your Vibn workspace." - : "Continue with Google. New here? An account is created automatically on first sign-in."; - + return ( -
-
-

{title}

-

{subtitle}

+
+ {/* Logo */} +
+ + + + + vibn + +
+ + {/* Card */} +
+
+

+ {title} +

+

+ {subtitle} +

+
{errorHint && ( -
+
{errorHint}
)} {showDevLocalSignIn && ( -
-

- Local only: sign in without Google as{" "} - {process.env.NEXT_PUBLIC_DEV_LOCAL_AUTH_EMAIL} +

+

+ Local only: sign in without Google as
+ {process.env.NEXT_PUBLIC_DEV_LOCAL_AUTH_EMAIL}

-
{ - e.preventDefault(); - void handleDevLocalSignIn(); - }} - > + { e.preventDefault(); void handleDevLocalSignIn(); }} style={{ display: 'flex', gap: 8 }}> setDevSecret(e.target.value)} - className="justine-auth-dev-input" style={{ - width: "100%", - marginBottom: 10, - padding: "10px 12px", - borderRadius: 8, - border: "1px solid rgba(0,0,0,0.12)", - fontSize: 14, + flex: 1, padding: "0 14px", height: "40px", borderRadius: "8px", + background: "oklch(0.16 0.008 60)", border: "1px solid var(--hairline)", + color: "var(--fg)", fontSize: "14px", outline: "none" }} /> -
)} +
-

- By continuing, you agree to our{" "} - Terms and Privacy Policy. -

+
+ By continuing, you agree to Vibn's Terms of Service and Privacy Policy.
); } - -function NextAuthFallback() { - return ( -
-
-
-

Loading…

-
-
- ); -} - -export default function NextAuthComponent() { - return ( - }> - - - ); -}