mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-12-18 18:47:11 +00:00
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
This commit is contained in:
sabaimran
parent
530b44cf56
commit
d35db99c6f
6 changed files with 209 additions and 41 deletions
|
|
@ -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';
|
||||
connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110;
|
||||
style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
|
||||
img-src 'self' data: blob: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
|
||||
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 https://accounts.google.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://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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -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">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full 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>
|
||||
<div>
|
||||
<div className="relative w-full h-80 overflow-hidden rounded-lg">
|
||||
{tips.map((tip, index) => (
|
||||
<img
|
||||
key={tip.src}
|
||||
src={tip.src}
|
||||
alt={tip.alt}
|
||||
className={`absolute w-full h-full object-cover transition-all duration-500 ease-in-out ${
|
||||
index === currentTip
|
||||
? "opacity-100 translate-x-0"
|
||||
: "opacity-0 translate-x-full"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
<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
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
setUseEmailSignIn(true);
|
||||
}}
|
||||
>
|
||||
Continue with Email
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
className="w-[300px] p-6 flex gap-2 items-center justify-center"
|
||||
onClick={() => {
|
||||
setUseEmailSignIn(true);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
|
|
|
|||
BIN
src/interface/web/public/automate_tip.png
Normal file
BIN
src/interface/web/public/automate_tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
BIN
src/interface/web/public/documents_tip.png
Normal file
BIN
src/interface/web/public/documents_tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
src/interface/web/public/personalize_tip.png
Normal file
BIN
src/interface/web/public/personalize_tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Loading…
Reference in a new issue