songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update auth components and add dialog UI component & fix login dialog ui

Browse Source
This commit is contained in:
javayhu 2025-02-24 01:46:54 +08:00
parent 6d8b09ba3d
commit f507c44959
5 changed files with 50 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/auth/auth-card.tsx
View File

@ -31,14 +31,16 @@ export const AuthCard = ({
className,
}: AuthCardProps) => {
return (
<Card className={cn("shadow-none sm:w-[400px] max-w-[400px]", className)}>
<Card className={cn("shadow-none", className)}>
<CardHeader className="items-center">
<Link href="/" prefetch={false}>
<Logo className="mb-2" />
</Link>
<CardDescription>{headerLabel}</CardDescription>
</CardHeader>
<CardContent>{children}</CardContent>
<CardContent>
{children}
</CardContent>
{showSocialLoginButton && (
<CardFooter>
<SocialLoginButton />

26
src/components/auth/login-button.tsx
View File

@ -6,10 +6,10 @@ import {
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/auth/auth-dialog";
} from "@/components/ui/dialog";
import { LoginForm } from "@/components/auth/login-form";
import { useMediaQuery } from "@/hooks/use-media-query";
import { AUTH_ROUTE_LOGIN } from "@/routes";
import { AUTH_ROUTE_LOGIN, authRoutes } from "@/routes";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
@ -35,33 +35,31 @@ export const LoginWrapper = ({
};
// Close the modal on route change
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
useEffect(() => {
useEffect(() => {
setIsModalOpen(false);
}, [pathname, searchParams]);
// don't open the modal if the user is already in the auth pages
// keep isTablet or isDesktop open, if user resizes the window
// TODO: add auth routes
// const isAuthRoute = authRoutes.includes(pathname);
if (mode === "modal" && /* !isAuthRoute && */(isTablet || isDesktop)) {
// 1. don't open the modal if the user is already in the auth pages
// 2. keep isTablet or isDesktop open, if user resizes the window
const isAuthRoute = authRoutes.includes(pathname);
if (mode === "modal" && !isAuthRoute && (isTablet || isDesktop)) {
return (
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
<DialogTrigger asChild={asChild}>{children}</DialogTrigger>
<DialogContent className="p-0 bg-transparent border-none">
<DialogTrigger asChild={asChild}>
{children}
</DialogTrigger>
<DialogContent className="sm:max-w-[400px] p-0">
<DialogHeader>
{/* `DialogContent` requires a `DialogTitle` for the component to be accessible for screen reader users. */}
<DialogTitle />
</DialogHeader>
<LoginForm />
<LoginForm className="" />
</DialogContent>
</Dialog>
);
}
return (
// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
<span onClick={handleLogin} className="cursor-pointer">
{children}
</span>

2
src/components/auth/login-form.tsx
View File

@ -78,7 +78,7 @@ export const LoginForm = ({ className }: { className?: string }) => {
bottomButtonLabel="Don't have an account? Sign up"
bottomButtonHref={`${AUTH_ROUTE_REGISTER}`}
showSocialLoginButton
className={cn("", className)}
className={cn("border-none", className)}
>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">

2
src/components/layout/user-button.tsx
View File

@ -76,7 +76,7 @@ export function UserButton() {
<DrawerOverlay className="fixed inset-0 z-40 bg-background/50" />
<DrawerContent className="fixed inset-x-0 bottom-0 z-50 mt-24 overflow-hidden rounded-t-[10px] border bg-background px-3 text-sm">
<DrawerHeader>
<DrawerTitle></DrawerTitle>
<DrawerTitle />
</DrawerHeader>
<div className="flex items-center justify-start gap-4 p-2">
<UserAvatar

65
src/components/auth/auth-dialog.tsx → src/components/ui/dialog.tsx
View File

@ -1,33 +1,33 @@
"use client";
"use client"
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
const Dialog = DialogPrimitive.Root;
import { cn } from "@/lib/utils"
const DialogTrigger = DialogPrimitive.Trigger;
const Dialog = DialogPrimitive.Root
const DialogPortal = DialogPrimitive.Portal;
const DialogTrigger = DialogPrimitive.Trigger
const DialogClose = DialogPrimitive.Close;
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
// NOTICE: we changed the overlay background to be black/80
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
@ -38,21 +38,20 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
className,
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
{/* NOTICE: we changed the close button position to the right */}
<DialogPrimitive.Close className="absolute right-36 top-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="size-4" />
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
@ -61,12 +60,12 @@ const DialogHeader = ({
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className,
className
)}
{...props}
/>
);
DialogHeader.displayName = "DialogHeader";
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
@ -75,12 +74,12 @@ const DialogFooter = ({
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className,
className
)}
{...props}
/>
);
DialogFooter.displayName = "DialogFooter";
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
@ -90,12 +89,12 @@ const DialogTitle = React.forwardRef<
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className,
className
)}
{...props}
/>
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
@ -106,8 +105,8 @@ const DialogDescription = React.forwardRef<
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
@ -120,4 +119,4 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
};
}