sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-18 18:47:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

Break up the parts of the login dialog into smaller modules to extend for mobile

Browse source
This commit is contained in:
sabaimran 2024-12-11 17:18:43 -08:00
parent d35db99c6f
commit de6ed2352a
1 changed files with 199 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
src/interface/web/app/components/loginPrompt/loginPrompt.tsx
View file

@ -1,13 +1,3 @@
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@ -21,10 +11,8 @@ import { Input } from "@/components/ui/input";
import { import {
ArrowLeft, ArrowLeft,
ArrowsClockwise, ArrowsClockwise,
GoogleCardboardLogo,
GoogleLogo, GoogleLogo,
LineVertical, LineVertical,
PaperPlane,
PaperPlaneTilt, PaperPlaneTilt,
PencilSimple, PencilSimple,
Spinner, Spinner,
@ -39,6 +27,7 @@ import { GoogleSignIn } from "./GoogleSignIn";
export interface LoginPromptProps { export interface LoginPromptProps {
loginRedirectMessage: string; loginRedirectMessage: string;
onOpenChange: (open: boolean) => void; onOpenChange: (open: boolean) => void;
isMobileWidth?: boolean;
} }
const fetcher = (url: string) => fetch(url).then((res) => res.json()); const fetcher = (url: string) => fetch(url).then((res) => res.json());
@ -168,6 +157,55 @@ export default function LoginPrompt(props: LoginPromptProps) {
</DialogDescription> */} </DialogDescription> */}
{useEmailSignIn && ( {useEmailSignIn && (
<EmailSignInContext
email={email}
setEmail={setEmail}
checkEmail={checkEmail}
setCheckEmail={setCheckEmail}
setUseEmailSignIn={setUseEmailSignIn}
recheckEmail={recheckEmail}
setRecheckEmail={setRecheckEmail}
handleMagicLinkSignIn={handleMagicLinkSignIn}
/>
)}
{!useEmailSignIn && (
<MainSignInContext
tips={tips}
currentTip={currentTip}
nextSlide={nextSlide}
prevSlide={prevSlide}
handleGoogleScriptLoad={handleGoogleScriptLoad}
handleGoogleSignIn={handleGoogleSignIn}
isLoading={isLoading}
data={data}
setUseEmailSignIn={setUseEmailSignIn}
/>
)}
</div>
</DialogContent>
</Dialog>
);
}
function EmailSignInContext({
email,
setEmail,
checkEmail,
setCheckEmail,
setUseEmailSignIn,
recheckEmail,
handleMagicLinkSignIn,
}: {
email: string;
setEmail: (email: string) => void;
checkEmail: boolean;
setCheckEmail: (checkEmail: boolean) => void;
setUseEmailSignIn: (useEmailSignIn: boolean) => void;
recheckEmail: boolean;
setRecheckEmail: (recheckEmail: boolean) => void;
handleMagicLinkSignIn: () => void;
}) {
return (
<div className="flex flex-col gap-4 py-4"> <div className="flex flex-col gap-4 py-4">
<Button <Button
variant="ghost" variant="ghost"
@ -178,22 +216,20 @@ export default function LoginPrompt(props: LoginPromptProps) {
> >
<ArrowLeft className="h-6 w-6" /> <ArrowLeft className="h-6 w-6" />
</Button> </Button>
<DialogHeader className="text-center"> <div>
<DialogTitle className="text-center"> <div className="text-center font-bold text-lg">Sign in with Email</div>
{checkEmail ? "Check your email" : "Sign in with Email"} </div>
</DialogTitle> <div className="text-center text-sm text-muted-foreground">
</DialogHeader>
<DialogDescription className="text-center">
{checkEmail {checkEmail
? recheckEmail ? recheckEmail
? "A new link has been sent. Click on the link in your email to sign-in" ? "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" : "Click on the link in your email to sign-in"
: "You will receive a sign-in link on the email address you provide below"} : "You will receive a sign-in link on the email address you provide below"}
</DialogDescription> </div>
<Input <Input
placeholder="Email" placeholder="Email"
className="p-6" className="p-6"
disabled={isLoading || checkEmail} disabled={checkEmail}
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
@ -201,13 +237,13 @@ export default function LoginPrompt(props: LoginPromptProps) {
variant="default" variant="default"
className="p-6" className="p-6"
onClick={handleMagicLinkSignIn} onClick={handleMagicLinkSignIn}
disabled={isLoading || checkEmail || !email} disabled={!email}
> >
<PaperPlaneTilt className="h-6 w-6 mr-2" /> <PaperPlaneTilt className="h-6 w-6 mr-2" />
{checkEmail ? "Check your email" : "Send sign in link"} {checkEmail ? "Check your email" : "Send sign in link"}
</Button> </Button>
{checkEmail && ( {checkEmail && (
<DialogDescription className="text-center flex items-center justify-center gap-4"> <div className="flex items-center justify-center gap-4 text-muted-foreground">
<Button <Button
variant="ghost" variant="ghost"
className="p-0" className="p-0"
@ -232,13 +268,36 @@ export default function LoginPrompt(props: LoginPromptProps) {
<PencilSimple className="h-6 w-6 mr-2" /> <PencilSimple className="h-6 w-6 mr-2" />
Use a different email Use a different email
</Button> </Button>
</DialogDescription>
)}
</div> </div>
)} )}
{!useEmailSignIn && ( </div>
);
}
function MainSignInContext({
tips,
currentTip,
nextSlide,
prevSlide,
handleGoogleScriptLoad,
handleGoogleSignIn,
isLoading,
data,
setUseEmailSignIn,
}: {
tips: { src: string; alt: string }[];
currentTip: number;
nextSlide: () => void;
prevSlide: () => void;
handleGoogleScriptLoad: () => void;
handleGoogleSignIn: () => void;
isLoading: boolean;
data: CredentialsData | undefined;
setUseEmailSignIn: (useEmailSignIn: boolean) => void;
}) {
return (
<div> <div>
<div className="relative w-full h-80 overflow-hidden rounded-lg"> <div className="relative w-full h-80 overflow-hidden rounded-t-lg">
{tips.map((tip, index) => ( {tips.map((tip, index) => (
<img <img
key={tip.src} key={tip.src}
@ -264,12 +323,11 @@ export default function LoginPrompt(props: LoginPromptProps) {
<CaretRight className="text-black h-6 w-6" /> <CaretRight className="text-black h-6 w-6" />
</Button> </Button>
</div> </div>
<DialogHeader className="flex flex-col gap-4 text-center p-4"> <div className="flex flex-col gap-4 text-center p-4">
<DialogTitle className="text-base text-center font-bold"> <div className="text-center font-bold text-lg">
Sign In for free to start using Khoj: Your AI-powered second Sign In for free to start using Khoj: Your AI-powered second brain
brain </div>
</DialogTitle> </div>
</DialogHeader>
<div className="flex flex-col gap-4 py-4 text-center align-middle items-center"> <div className="flex flex-col gap-4 py-4 text-center align-middle items-center">
<GoogleSignIn onLoad={handleGoogleScriptLoad} /> <GoogleSignIn onLoad={handleGoogleScriptLoad} />
{/* <div id="g_id_signin" /> */} {/* <div id="g_id_signin" /> */}
@ -298,16 +356,10 @@ export default function LoginPrompt(props: LoginPromptProps) {
Continue with Email Continue with Email
</Button> </Button>
</div> </div>
<DialogDescription className="text-center"> <div className="text-center text-muted-foreground text-xs">
By logging in, you agree to our{" "} By logging in, you agree to our{" "}
<Link href="https://khoj.dev/terms-of-service"> <Link href="https://khoj.dev/terms-of-service">Terms of Service.</Link>
Terms of Service.
</Link>
</DialogDescription>
</div> </div>
)}
</div> </div>
</DialogContent>
</Dialog>
); );
} }