81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { Sparkles } from "lucide-react"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
} from "@/components/ui/card"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const LOGIN_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 LoginFormProps = {
|
|
loginHref: string
|
|
signupHref: string
|
|
error: string | null
|
|
}
|
|
|
|
export function LoginForm({ loginHref, signupHref, error }: LoginFormProps) {
|
|
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={LOGIN_CARD_CLASS}>
|
|
<CardHeader className="gap-4 px-0 text-center sm:px-0">
|
|
<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>
|
|
<CardDescription>
|
|
Connecte-toi avec ton compte UltiSpace pour accéder à ta suite.
|
|
</CardDescription>
|
|
{error ? (
|
|
<p className="text-sm text-destructive" role="alert">
|
|
{decodeURIComponent(error)}
|
|
</p>
|
|
) : null}
|
|
</CardHeader>
|
|
|
|
<CardContent className="flex justify-center px-0 sm:px-0">
|
|
<div className="ultimail-login-connect-border">
|
|
<a href={loginHref} className="ultimail-login-connect-btn">
|
|
<Sparkles className="size-4 shrink-0" strokeWidth={2} aria-hidden />
|
|
Se connecter avec UltiSpace
|
|
</a>
|
|
</div>
|
|
</CardContent>
|
|
|
|
<CardFooter className="px-0 sm:px-0">
|
|
<p className="w-full text-center text-sm text-muted-foreground">
|
|
Pas encore de compte ?{" "}
|
|
<a
|
|
className="font-medium text-primary underline"
|
|
href={signupHref}
|
|
suppressHydrationWarning
|
|
>
|
|
Créer un compte
|
|
</a>
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|