359931c2f3
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Added new layout and page components for forgot password and signup functionalities, enhancing user experience. - Integrated authentication flow handling for password recovery and account creation, utilizing dynamic metadata. - Updated login form to include links for forgot password and signup, improving navigation between authentication states. - Refactored CSS styles for login components to ensure consistent design across different authentication pages.
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
} from "@/components/ui/card"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export const AUTH_CARD_CLASS = cn(
|
|
"w-full gap-4 border-0 bg-transparent px-4 py-6 shadow-none",
|
|
"sm:gap-5 sm:rounded-none sm:px-8 sm:py-8",
|
|
"sm:text-card-foreground sm:dark:text-mail-text sm:shadow-none"
|
|
)
|
|
|
|
type AuthCardProps = {
|
|
title?: string
|
|
description?: string
|
|
error?: string | null
|
|
children: React.ReactNode
|
|
footer?: React.ReactNode
|
|
}
|
|
|
|
export function AuthBrandMark() {
|
|
return (
|
|
<div className="flex flex-col items-center gap-3 py-4">
|
|
<img
|
|
src="/ultisuite-mark.svg"
|
|
alt=""
|
|
width={72}
|
|
height={72}
|
|
draggable={false}
|
|
className="h-16 w-16 select-none"
|
|
aria-hidden
|
|
/>
|
|
<span className="text-2xl font-bold tracking-tight">
|
|
Ulti<span className="landing-gradient-text">Suite</span>
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function AuthCard({
|
|
title,
|
|
description,
|
|
error,
|
|
children,
|
|
footer,
|
|
}: AuthCardProps) {
|
|
return (
|
|
<div className="flex flex-1 flex-col items-center justify-center px-4">
|
|
<div className="ultimail-login-card-frame mx-auto w-full max-w-sm">
|
|
<Card className={AUTH_CARD_CLASS}>
|
|
<CardHeader className="gap-4 px-0 text-center sm:px-0">
|
|
<AuthBrandMark />
|
|
{title ? (
|
|
<h1 className="text-lg font-semibold text-foreground">{title}</h1>
|
|
) : null}
|
|
{description ? (
|
|
<CardDescription>{description}</CardDescription>
|
|
) : null}
|
|
{error ? (
|
|
<p className="text-sm text-destructive" role="alert">
|
|
{error}
|
|
</p>
|
|
) : null}
|
|
</CardHeader>
|
|
|
|
<CardContent className="px-0 sm:px-0">{children}</CardContent>
|
|
|
|
{footer ? (
|
|
<CardFooter className="px-0 sm:px-0">{footer}</CardFooter>
|
|
) : null}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|