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 {
Dialog,
@ -21,10 +11,8 @@ import { Input } from "@/components/ui/input";
import {
ArrowLeft,
ArrowsClockwise,
GoogleCardboardLogo,
GoogleLogo,
LineVertical,
PaperPlane,
PaperPlaneTilt,
PencilSimple,
Spinner,
@ -39,6 +27,7 @@ import { GoogleSignIn } from "./GoogleSignIn";
export interface LoginPromptProps {
loginRedirectMessage: string;
onOpenChange: (open: boolean) => void;
isMobileWidth?: boolean;
}
const fetcher = (url: string) => fetch(url).then((res) => res.json());
@ -168,6 +157,55 @@ export default function LoginPrompt(props: LoginPromptProps) {
</DialogDescription> */}
{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">
<Button
variant="ghost"
@ -178,22 +216,20 @@ export default function LoginPrompt(props: LoginPromptProps) {
>
<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">
<div>
<div className="text-center font-bold text-lg">Sign in with Email</div>
</div>
<div className="text-center text-sm text-muted-foreground">
{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>
</div>
<Input
placeholder="Email"
className="p-6"
disabled={isLoading || checkEmail}
disabled={checkEmail}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
@ -201,13 +237,13 @@ export default function LoginPrompt(props: LoginPromptProps) {
variant="default"
className="p-6"
onClick={handleMagicLinkSignIn}
disabled={isLoading || checkEmail || !email}
disabled={!email}
>
<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">
<div className="flex items-center justify-center gap-4 text-muted-foreground">
<Button
variant="ghost"
className="p-0"
@ -232,13 +268,36 @@ export default function LoginPrompt(props: LoginPromptProps) {
<PencilSimple className="h-6 w-6 mr-2" />
Use a different email
</Button>
</DialogDescription>
)}
</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 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) => (
<img
key={tip.src}
@ -264,12 +323,11 @@ export default function LoginPrompt(props: LoginPromptProps) {
<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 text-center p-4">
<div className="text-center font-bold text-lg">
Sign In for free to start using Khoj: Your AI-powered second brain
</div>
</div>
<div className="flex flex-col gap-4 py-4 text-center align-middle items-center">
<GoogleSignIn onLoad={handleGoogleScriptLoad} />
{/* <div id="g_id_signin" /> */}
@ -298,16 +356,10 @@ export default function LoginPrompt(props: LoginPromptProps) {
Continue with Email
</Button>
</div>
<DialogDescription className="text-center">
<div className="text-center text-muted-foreground text-xs">
By logging in, you agree to our{" "}
<Link href="https://khoj.dev/terms-of-service">
Terms of Service.
</Link>
</DialogDescription>
<Link href="https://khoj.dev/terms-of-service">Terms of Service.</Link>
</div>
)}
</div>
</DialogContent>
</Dialog>
);
}