Initial version of a carousel working for sign in with steps for email sign up

- Google sign in is pending with the gsi client code. Will see if I can get that working
- Check in relevant image assets

src/interface/web/app/common/layoutHelper.tsx

@@ -4,11 +4,12 @@ export function ContentSecurityPolicy() {
             httpEquiv="Content-Security-Policy"
             content="default-src 'self' https://assets.khoj.dev;
                media-src * blob:;
-               script-src 'self' https://assets.khoj.dev https://app.chatwoot.com 'unsafe-inline' 'unsafe-eval';
+               script-src 'self' https://assets.khoj.dev https://app.chatwoot.com https://accounts.google.com 'unsafe-inline' 'unsafe-eval';
-               connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110;
+               connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110 https://accounts.google.com;
-               style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
+               style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com https://accounts.google.com;
-               img-src 'self' data: blob: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
+               img-src 'self' data: blob: https://*.khoj.dev https://accounts.google.com https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
                font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
+               frame-src 'self' https://accounts.google.com;
                child-src 'self' https://app.chatwoot.com;
                object-src 'none';"
         ></meta>

src/interface/web/app/components/loginPrompt/GoogleSignIn.tsx

@@ -0,0 +1,20 @@
+// GoogleSignIn.tsx
+"use client";
+
+import Script from "next/script";
+
+interface GoogleSignInProps {
+    onLoad?: () => void;
+}
+
+export function GoogleSignIn({ onLoad }: GoogleSignInProps) {
+    return (
+        <Script
+            id="google-signin"
+            src="https://accounts.google.com/gsi/client"
+            async
+            defer
+            onLoad={onLoad}
+        />
+    );
+}

src/interface/web/app/components/loginPrompt/loginPrompt.tsx

@@ -18,10 +18,23 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { ArrowLeft, GoogleCardboardLogo, GoogleLogo, Spinner } from "@phosphor-icons/react";
+import {
+    ArrowLeft,
+    ArrowsClockwise,
+    GoogleCardboardLogo,
+    GoogleLogo,
+    LineVertical,
+    PaperPlane,
+    PaperPlaneTilt,
+    PencilSimple,
+    Spinner,
+    CaretLeft,
+    CaretRight,
+} from "@phosphor-icons/react";
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import useSWR from "swr";
+import { GoogleSignIn } from "./GoogleSignIn";
 
 export interface LoginPromptProps {
     loginRedirectMessage: string;
@@ -46,6 +59,20 @@ export default function LoginPrompt(props: LoginPromptProps) {
 
     const [email, setEmail] = useState("");
     const [checkEmail, setCheckEmail] = useState(false);
+    const [recheckEmail, setRecheckEmail] = useState(false);
+
+    const [currentTip, setCurrentTip] = useState(0);
+    const [autoRotate, setAutoRotate] = useState(true);
+
+    // Add these handler functions in your component
+    const nextSlide = () => {
+        setCurrentTip((prev) => (prev + 1) % tips.length);
+        setAutoRotate(false);
+    };
+    const prevSlide = () => {
+        setCurrentTip((prev) => (prev - 1 + tips.length) % tips.length);
+        setAutoRotate(false);
+    };
 
     const handleGoogleSignIn = () => {
         if (!data?.google?.client_id || !data?.google?.redirect_uri) return;
@@ -67,6 +94,39 @@ export default function LoginPrompt(props: LoginPromptProps) {
         window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?${params}`;
     };
 
+    const handleGoogleScriptLoad = () => {
+        // Initialize Google Sign In after script loads
+        window.google.accounts.id.initialize({
+            client_id: "blahblahblah.apps.googleusercontent.com",
+            callback: handleGoogleSignIn,
+            auto_select: false,
+            login_uri: "http://localhost:42110/auth/redirect",
+        });
+
+        // Render the button
+        window.google.accounts.id.renderButton(document.getElementById("g_id_signin")!, {
+            theme: "outline",
+            size: "large",
+            width: "100%",
+        });
+    };
+
+    const tips = [
+        { src: "/documents_tip.png", alt: "Documents tip" },
+        { src: "/personalize_tip.png", alt: "Personalize tip" },
+        { src: "/automate_tip.png", alt: "Automate tip" },
+    ];
+
+    useEffect(() => {
+        if (!autoRotate) return;
+
+        const timer = setInterval(() => {
+            setCurrentTip((prev) => (prev + 1) % tips.length);
+        }, 3000); // Rotate every 3 seconds
+
+        return () => clearInterval(timer);
+    }, [autoRotate]);
+
     function handleMagicLinkSignIn() {
         fetch("/auth/magic", {
             method: "POST",
@@ -78,6 +138,9 @@ export default function LoginPrompt(props: LoginPromptProps) {
             .then((res) => {
                 if (res.ok) {
                     setCheckEmail(true);
+                    if (checkEmail) {
+                        setRecheckEmail(true);
+                    }
                     return res.json();
                 } else {
                     throw new Error("Failed to send magic link");
@@ -93,72 +156,156 @@ export default function LoginPrompt(props: LoginPromptProps) {
 
     return (
         <Dialog open={true} onOpenChange={props.onOpenChange}>
-            <DialogContent className="flex flex-row gap-4 max-w-3xl">
+            <DialogContent
+                className={`flex flex-col gap-4 max-w-xl ${!useEmailSignIn ? "p-0 pb-4 m-0" : ""}`}
+            >
                 <div>
-                    <DialogHeader>
+                    {/* <DialogHeader>
                         <DialogTitle>Sign in to Khoj to continue</DialogTitle>
                     </DialogHeader>
                     <DialogDescription className="py-4">
                         {props.loginRedirectMessage}.
-                    </DialogDescription>
+                    </DialogDescription> */}
+
                     {useEmailSignIn && (
                         <div className="flex flex-col gap-4 py-4">
                             <Button
                                 variant="ghost"
-                                className="w-fit p-0 m-0 flex gap-2 items-center justify-center text-sm"
+                                className="w-fit p-0 m-0 flex gap-2 items-center justify-center text-sm absolute top-5 left-5"
                                 onClick={() => {
                                     setUseEmailSignIn(false);
                                 }}
                             >
                                 <ArrowLeft className="h-6 w-6" />
                             </Button>
+                            <DialogHeader className="text-center">
+                                <DialogTitle className="text-center">
+                                    {checkEmail ? "Check your email" : "Sign in with Email"}
+                                </DialogTitle>
+                            </DialogHeader>
+                            <DialogDescription className="text-center">
+                                {checkEmail
+                                    ? recheckEmail
+                                        ? "A new link has been sent. Click on the link in your email to sign-in"
+                                        : "Click on the link in your email to sign-in"
+                                    : "You will receive a sign-in link on the email address you provide below"}
+                            </DialogDescription>
                             <Input
                                 placeholder="Email"
+                                className="p-6"
+                                disabled={isLoading || checkEmail}
                                 value={email}
                                 onChange={(e) => setEmail(e.target.value)}
                             />
                             <Button
                                 variant="default"
+                                className="p-6"
                                 onClick={handleMagicLinkSignIn}
-                                disabled={isLoading || checkEmail}
+                                disabled={isLoading || checkEmail || !email}
                             >
-                                {checkEmail ? "Check your email" : "Send magic link"}
+                                <PaperPlaneTilt className="h-6 w-6 mr-2" />
+                                {checkEmail ? "Check your email" : "Send sign in link"}
                             </Button>
+                            {checkEmail && (
+                                <DialogDescription className="text-center flex items-center justify-center gap-4">
+                                    <Button
+                                        variant="ghost"
+                                        className="p-0"
+                                        disabled={recheckEmail}
+                                        onClick={() => {
+                                            handleMagicLinkSignIn();
+                                        }}
+                                    >
+                                        <ArrowsClockwise className="h-6 w-6 mr-2" />
+                                        Resend email
+                                    </Button>
+                                    <LineVertical className="h-6 w-6" />
+                                    <Button
+                                        variant="ghost"
+                                        className="p-0"
+                                        disabled={recheckEmail}
+                                        onClick={() => {
+                                            setEmail("");
+                                            setCheckEmail(false);
+                                        }}
+                                    >
+                                        <PencilSimple className="h-6 w-6 mr-2" />
+                                        Use a different email
+                                    </Button>
+                                </DialogDescription>
+                            )}
                         </div>
                     )}
                     {!useEmailSignIn && (
-                        <div className="flex flex-col gap-4 py-4">
+                        <div>
-                            <Button
+                            <div className="relative w-full h-80 overflow-hidden rounded-lg">
-                                variant="outline"
+                                {tips.map((tip, index) => (
-                                className="w-full flex gap-2 items-center justify-center"
+                                    <img
-                                onClick={handleGoogleSignIn}
+                                        key={tip.src}
-                                disabled={isLoading || !data?.google}
+                                        src={tip.src}
-                            >
+                                        alt={tip.alt}
-                                {isLoading ? (
+                                        className={`absolute w-full h-full object-cover transition-all duration-500 ease-in-out ${
-                                    <Spinner className="h-6 w-6" />
+                                            index === currentTip
-                                ) : (
+                                                ? "opacity-100 translate-x-0"
-                                    <GoogleLogo className="h-6 w-6" />
+                                                : "opacity-0 translate-x-full"
-                                )}
+                                        }`}
-                                Continue with Google
+                                    />
-                            </Button>
+                                ))}
+                                <Button
+                                    onClick={prevSlide}
+                                    className="absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white/90 rounded-full p-2 shadow-lg"
+                                >
+                                    <CaretLeft className="text-black h-6 w-6" />
+                                </Button>
+                                <Button
+                                    onClick={nextSlide}
+                                    className="absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white/90 rounded-full p-2 shadow-lg"
+                                >
+                                    <CaretRight className="text-black h-6 w-6" />
+                                </Button>
+                            </div>
+                            <DialogHeader className="flex flex-col gap-4 text-center p-4">
+                                <DialogTitle className="text-base text-center font-bold">
+                                    Sign In for free to start using Khoj: Your AI-powered second
+                                    brain
+                                </DialogTitle>
+                            </DialogHeader>
+                            <div className="flex flex-col gap-4 py-4 text-center align-middle items-center">
+                                <GoogleSignIn onLoad={handleGoogleScriptLoad} />
+                                {/* <div id="g_id_signin" /> */}
+                                <Button
+                                    variant="outline"
+                                    className="w-[300px] p-6 flex gap-2 items-center justify-center"
+                                    onClick={handleGoogleSignIn}
+                                    disabled={isLoading || !data?.google}
+                                >
+                                    {isLoading ? (
+                                        <Spinner className="h-6 w-6" />
+                                    ) : (
+                                        <GoogleLogo className="h-6 w-6" />
+                                    )}
+                                    Continue with Google
+                                </Button>
 
-                            <Button
+                                <Button
-                                variant="default"
+                                    variant="default"
-                                onClick={() => {
+                                    className="w-[300px] p-6 flex gap-2 items-center justify-center"
-                                    setUseEmailSignIn(true);
+                                    onClick={() => {
-                                }}
+                                        setUseEmailSignIn(true);
-                            >
+                                    }}
-                                Continue with Email
+                                >
-                            </Button>
+                                    <PaperPlaneTilt className="h-6 w-6" />
+                                    Continue with Email
+                                </Button>
+                            </div>
+                            <DialogDescription className="text-center">
+                                By logging in, you agree to our{" "}
+                                <Link href="https://khoj.dev/terms-of-service">
+                                    Terms of Service.
+                                </Link>
+                            </DialogDescription>
                         </div>
                     )}
-                    <DialogDescription>
-                        By logging in, you agree to our{" "}
-                        <Link href="https://khoj.dev/terms-of-service">Terms of Service.</Link>
-                    </DialogDescription>
-                </div>
-                <div className="flex flex-col gap-4">
-                    <img src="https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNGl0NHR5Nm0wdmFreGRoYjJmanJqYnZ1dzd3OHBqNGY3OGxiczZldyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9dg/SVZ7jzFPStbMsnjDWA/giphy.gif" />
                 </div>
             </DialogContent>
         </Dialog>