mirror of https://github.com/kortix-ai/suna.git
Login UI and login with google
This commit is contained in:
Adam Cohen Hillel
parent
db07dbdce8
commit
b72614cd67
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 39 KiB |
|
|
@ -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="w-full max-w-md flex flex-col items-center">
|
||||
<div className="text-center mb-16">
|
||||
<h1 className="text-5xl font-serif tracking-tight mb-4 text-black dark:text-white">
|
||||
Your ideas,<br />amplified
|
||||
<div className="flex min-h-screen">
|
||||
{/* Left side - Login Form */}
|
||||
<div className="w-1/2 flex items-center justify-center px-16 bg-white dark:bg-[#121212]">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold mb-3 text-black dark:text-white">
|
||||
{isSignUp ? "Create an account" : "Welcome back"}
|
||||
</h1>
|
||||
<p className="text-xl text-neutral-700 dark:text-neutral-300">
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400">
|
||||
Privacy-first AI that helps you create in confidence.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-6">
|
||||
<button
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
Continue with Google
|
||||
</button>
|
||||
<div className="mb-8">
|
||||
<GoogleSignIn returnUrl={searchParams.returnUrl} />
|
||||
</div>
|
||||
|
||||
<div className="relative my-6">
|
||||
<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">
|
||||
OR
|
||||
</span>
|
||||
<span className="px-2 bg-white dark:bg-[#121212] text-gray-500">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 && (
|
||||
<div>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
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="space-y-4">
|
||||
{!isSignUp ? (
|
||||
<>
|
||||
<SubmitButton
|
||||
formAction={signIn}
|
||||
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"
|
||||
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="Signing in..."
|
||||
>
|
||||
Sign in
|
||||
</SubmitButton>
|
||||
|
||||
<SubmitButton
|
||||
formAction={signUp}
|
||||
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"
|
||||
pendingText="Creating account..."
|
||||
<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 && (
|
||||
<div className="text-center">
|
||||
<Link href="#" className="text-sm text-primary hover:underline">
|
||||
Forgot password?
|
||||
</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">
|
||||
By continuing, you acknowledge our{' '}
|
||||
<div className="mt-6 text-center text-xs text-gray-500">
|
||||
By continuing, you agree to our{' '}
|
||||
<Link href="/privacy" className="text-black dark:text-white hover:underline">
|
||||
Privacy Policy
|
||||
</Link>.
|
||||
Terms of Service
|
||||
</Link>{' '}
|
||||
and{' '}<Link href="/privacy" className="text-black dark:text-white hover:underline">Privacy Policy</Link>
|
||||
</div>
|
||||
|
||||
<div className="mt-16">
|
||||
<button className="mx-auto flex items-center text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 transition">
|
||||
Learn more <ChevronDown className="ml-1 h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Right side - Video Background */}
|
||||
<div className="w-1/2 relative overflow-hidden">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue