Login UI and login with google

frontend/src/app/login/page.tsx

@@ -4,13 +4,15 @@ import { createClient } from "@/lib/supabase/server";
 import { redirect } from "next/navigation";
 import { SubmitButton } from "@/components/ui/submit-button";
 import { Input } from "@/components/ui/input";
-import { ChevronDown } from "lucide-react";
+import GoogleSignIn from "@/components/GoogleSignIn";
 
 export default function Login({
   searchParams,
 }: {
-  searchParams: { message: string, returnUrl?: string };
+  searchParams: { message: string, returnUrl?: string, mode?: 'signin' | 'signup' };
 }) {
+  const isSignUp = searchParams.mode === 'signup';
+
   const signIn = async (prevState: any, formData: FormData) => {
     "use server";
 
@@ -45,6 +47,7 @@ export default function Login({
     const origin = headers().get("origin");
     const email = formData.get("email") as string;
     const password = formData.get("password") as string;
+    const confirmPassword = formData.get("confirmPassword") as string;
     
     if (!email || !email.includes('@')) {
       return { message: "Please enter a valid email address" };
@@ -54,6 +57,10 @@ export default function Login({
       return { message: "Password must be at least 6 characters" };
     }
 
+    if (password !== confirmPassword) {
+      return { message: "Passwords do not match" };
+    }
+
     const supabase = createClient();
 
     const { error } = await supabase.auth.signUp({
@@ -82,63 +89,40 @@ export default function Login({
   };
 
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center bg-[#FFFCF5] dark:bg-[#121212] py-16 px-4">
+    <div className="flex min-h-screen">
-      <div className="w-full max-w-md flex flex-col items-center">
+      {/* Left side - Login Form */}
-        <div className="text-center mb-16">
+      <div className="w-1/2 flex items-center justify-center px-16 bg-white dark:bg-[#121212]">
-          <h1 className="text-5xl font-serif tracking-tight mb-4 text-black dark:text-white">
-            Your ideas,<br />amplified
-          </h1>
-          <p className="text-xl text-neutral-700 dark:text-neutral-300">
-            Privacy-first AI that helps you create in confidence.
-          </p>
-        </div>
-
         <div className="w-full max-w-md">
-          <div className="mb-6">
+          <div className="mb-12">
-            <button
+            <h1 className="text-4xl font-bold mb-3 text-black dark:text-white">
-              className="w-full flex items-center justify-center bg-white dark:bg-background-secondary text-black dark:text-white border border-gray-300 dark:border-gray-700 rounded-full py-3 px-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+              {isSignUp ? "Create an account" : "Welcome back"}
-            >
+            </h1>
-              <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
+            <p className="text-lg text-neutral-600 dark:text-neutral-400">
-                <path
+              Privacy-first AI that helps you create in confidence.
-                  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"
+            </p>
-                  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.93l2.85-2.22.81-.62z"
-                  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>
-              Continue with Google
-            </button>
           </div>
 
-          <div className="relative my-6">
+          <div className="mb-8">
+            <GoogleSignIn returnUrl={searchParams.returnUrl} />
+          </div>
+
+          <div className="relative my-8">
             <div className="absolute inset-0 flex items-center">
               <div className="w-full border-t border-gray-200 dark:border-gray-800"></div>
             </div>
             <div className="relative flex justify-center text-sm">
-              <span className="px-2 bg-[#FFFCF5] dark:bg-[#121212] text-gray-500">
+              <span className="px-2 bg-white dark:bg-[#121212] text-gray-500">OR</span>
-                OR
-              </span>
             </div>
           </div>
 
-          <form className="space-y-4">
+          <form className="space-y-5">
             <div>
               <Input
                 id="email"
                 name="email"
                 type="email"
                 placeholder="Email address"
-                className="w-full h-14 px-4 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-background-secondary text-black dark:text-white"
+                className="w-full h-12 px-4 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-background-secondary text-black dark:text-white"
                 required
               />
             </div>
@@ -149,54 +133,106 @@ export default function Login({
                 name="password"
                 type="password"
                 placeholder="Password"
-                className="w-full h-14 px-4 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-background-secondary text-black dark:text-white"
+                className="w-full h-12 px-4 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-background-secondary text-black dark:text-white"
                 required
               />
             </div>
 
-            <div className="pt-2 space-y-3">
+            {isSignUp && (
-              <SubmitButton
+              <div>
-                formAction={signIn}
+                <Input
-                className="w-full bg-black dark:bg-white text-white dark:text-black rounded-full py-3 font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition"
+                  id="confirmPassword"
-                pendingText="Signing in..."
+                  name="confirmPassword"
-              >
+                  type="password"
-                Sign in
+                  placeholder="Confirm password"
-              </SubmitButton>
+                  className="w-full h-12 px-4 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-background-secondary text-black dark:text-white"
+                  required
+                />
+              </div>
+            )}
             
-              <SubmitButton
+            <div className="space-y-4">
-                formAction={signUp}
+              {!isSignUp ? (
-                variant="outline"
+                <>
-                className="w-full border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-full py-3"
+                  <SubmitButton
-                pendingText="Creating account..."
+                    formAction={signIn}
-              >
+                    className="w-full bg-black dark:bg-white text-white dark:text-black rounded-lg py-3 font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition"
-                Create new account
+                    pendingText="Signing in..."
-              </SubmitButton>
+                  >
+                    Sign in
+                  </SubmitButton>
+                  
+                  <Link
+                    href={`/login?mode=signup${searchParams.returnUrl ? `&returnUrl=${searchParams.returnUrl}` : ''}`}
+                    className="block w-full text-center border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg py-3"
+                  >
+                    Create new account
+                  </Link>
+                </>
+              ) : (
+                <>
+                  <SubmitButton
+                    formAction={signUp}
+                    className="w-full bg-black dark:bg-white text-white dark:text-black rounded-lg py-3 font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition"
+                    pendingText="Creating account..."
+                  >
+                    Sign up
+                  </SubmitButton>
+                  
+                  <Link
+                    href={`/login${searchParams.returnUrl ? `?returnUrl=${searchParams.returnUrl}` : ''}`}
+                    className="block w-full text-center border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg py-3"
+                  >
+                    Back to sign in
+                  </Link>
+                </>
+              )}
             </div>
 
-            <div className="text-center pt-1">
+            {!isSignUp && (
-              <Link href="#" className="text-sm text-primary hover:underline">
+              <div className="text-center">
-                Forgot password?
+                <Link href="#" className="text-sm text-primary hover:underline">
-              </Link>
+                  Forgot password?
-            </div>
+                </Link>
+              </div>
+            )}
 
             {searchParams?.message && (
-              <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-lg text-center text-sm">
+              <div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800 text-amber-800 dark:text-amber-200 rounded-lg text-center text-sm">
                 {searchParams.message}
               </div>
             )}
           </form>
 
-          <div className="mt-6 text-center text-sm text-gray-500">
+          <div className="mt-6 text-center text-xs text-gray-500">
-            By continuing, you acknowledge our{' '}
+            By continuing, you agree to our{' '}
             <Link href="/privacy" className="text-black dark:text-white hover:underline">
-              Privacy Policy
+              Terms of Service
-            </Link>.
+            </Link>{' '}
+            and{' '}<Link href="/privacy" className="text-black dark:text-white hover:underline">Privacy Policy</Link>
           </div>
-          
+        </div>
-          <div className="mt-16">
+      </div>
-            <button className="mx-auto flex items-center text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 transition">
+      {/* Right side - Video Background */}
-              Learn more <ChevronDown className="ml-1 h-4 w-4" />
+      <div className="w-1/2 relative overflow-hidden">
-            </button>
+        <div className="absolute inset-0 bg-black/80 z-10"></div>
+        <video
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="absolute inset-0 w-full h-full object-cover"
+        >
+          <source src="/worldoscollage.mp4" type="video/mp4" />
+        </video>
+        <img 
+          src="/mac.png" 
+          alt="Mac" 
+          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/3 h-1/3 object-contain z-20"
+        />
+        <div className="relative z-30 flex items-center p-16">
+          <div className="text-left text-white">
+            <h2 className="text-2xl font-bold mb-6">General AI Agent,<br/>That do tasks for you</h2>
           </div>
         </div>
       </div>

frontend/src/components/GoogleSignIn.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import Script from 'next/script';
+import { createClient } from '@/lib/supabase/client';
+
+// Add type declarations for Google One Tap
+declare global {
+  interface Window {
+    handleGoogleSignIn?: (response: GoogleSignInResponse) => void;
+    google: {
+      accounts: {
+        id: {
+          initialize: (config: GoogleInitializeConfig) => void;
+          renderButton: (element: HTMLElement, options: GoogleButtonOptions) => void;
+          prompt: (callback?: (notification: GoogleNotification) => void) => void;
+          cancel: () => void;
+        };
+      };
+    };
+  }
+}
+
+// Define types for Google Sign-In
+interface GoogleSignInResponse {
+  credential: string;
+  clientId?: string;
+  select_by?: string;
+}
+
+interface GoogleInitializeConfig {
+  client_id: string | undefined;
+  callback: ((response: GoogleSignInResponse) => void) | undefined;
+  nonce?: string;
+  use_fedcm?: boolean;
+  context?: string;
+  itp_support?: boolean;
+}
+
+interface GoogleButtonOptions {
+  type?: string;
+  theme?: string;
+  size?: string;
+  text?: string;
+  shape?: string;
+}
+
+interface GoogleNotification {
+  isNotDisplayed: () => boolean;
+  getNotDisplayedReason: () => string;
+  isSkippedMoment: () => boolean;
+  getSkippedReason: () => string;
+  isDismissedMoment: () => boolean;
+  getDismissedReason: () => string;
+}
+
+interface GoogleSignInProps {
+  returnUrl?: string;
+}
+
+export default function GoogleSignIn({ returnUrl }: GoogleSignInProps) {
+  const googleClientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
+
+  const handleGoogleSignIn = useCallback(async (response: GoogleSignInResponse) => {
+    try {
+      const supabase = createClient();
+      const { error } = await supabase.auth.signInWithIdToken({
+        provider: 'google',
+        token: response.credential,
+      });
+
+      if (error) throw error;
+      window.location.href = returnUrl || "/dashboard";
+    } catch (error) {
+      console.error('Error signing in with Google:', error);
+    }
+  }, [returnUrl]);
+
+  useEffect(() => {
+    // Assign the callback to window object so it can be called from the Google button
+    window.handleGoogleSignIn = handleGoogleSignIn;
+
+    if (window.google && googleClientId) {
+      window.google.accounts.id.initialize({
+        client_id: googleClientId,
+        callback: handleGoogleSignIn,
+        use_fedcm: true,
+        context: 'signin',
+        itp_support: true
+      });
+    }
+
+    return () => {
+      // Cleanup
+      delete window.handleGoogleSignIn;
+      if (window.google) {
+        window.google.accounts.id.cancel();
+      }
+    };
+  }, [googleClientId, handleGoogleSignIn]);
+
+  if (!googleClientId) {
+    return (
+      <button disabled className="w-full flex items-center justify-center bg-white dark:bg-background-secondary text-black dark:text-white border border-gray-300 dark:border-gray-700 rounded-lg py-3 px-4 opacity-60 cursor-not-allowed">
+        <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
+          <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.93l2.85-2.22.81-.62z" 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>
+        Google Sign-In Not Configured
+      </button>
+    );
+  }
+
+  return (
+    <>
+      {/* Hidden div for One Tap popup */}
+      <div 
+        id="g_id_onload"
+        data-client_id={googleClientId}
+        data-context="signin"
+        data-ux_mode="popup"
+        data-auto_prompt="false"
+        data-itp_support="true"
+        data-callback="handleGoogleSignIn"
+      />
+      {/* The actual sign-in button that will be shown */}
+      <div
+        className="g_id_signin flex justify-center"
+        data-type="standard"
+        data-size="large"
+        data-theme="outline"
+        data-text="sign_in_with"
+        data-shape="rectangular"
+        data-logo_alignment="left"
+        data-width="100%"
+      />
+      <Script
+        src="https://accounts.google.com/gsi/client"
+        strategy="afterInteractive"
+      />
+    </>
+  );
+}