69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
|
import { Link, useNavigate } from "@tanstack/react-router";
|
|
import { LanguageSwitch } from "@workspace/ui/composed/language-switch";
|
|
import { ThemeSwitch } from "@workspace/ui/composed/theme-switch";
|
|
import { useEffect } from "react";
|
|
import { useGlobalStore } from "@/stores/global";
|
|
import EmailAuthForm from "./email/auth-form";
|
|
|
|
export default function Auth() {
|
|
const { common, user } = useGlobalStore();
|
|
const { site } = common;
|
|
|
|
const navigate = useNavigate();
|
|
useEffect(() => {
|
|
if (user) {
|
|
navigate({ to: "/dashboard" });
|
|
}
|
|
}, [navigate, user]);
|
|
|
|
return (
|
|
<main className="flex h-full min-h-screen items-center bg-muted/50">
|
|
<div className="flex size-full flex-auto flex-col justify-center lg:flex-row">
|
|
<div className="flex lg:w-1/2 lg:flex-auto">
|
|
<div className="flex w-full flex-col items-center justify-center px-5 py-4 md:px-14 lg:py-14">
|
|
<Link className="mb-0 flex flex-col items-center lg:mb-12" to="/">
|
|
<img
|
|
alt="logo"
|
|
height={48}
|
|
src={site.site_logo || "/favicon.svg"}
|
|
width={48}
|
|
/>
|
|
<span className="font-semibold text-2xl">{site.site_name}</span>
|
|
</Link>
|
|
<DotLottieReact
|
|
autoplay
|
|
className="mx-auto hidden w-full lg:block"
|
|
loop
|
|
src="./assets/lotties/login.json"
|
|
/>
|
|
<p className="hidden w-[275px] text-center md:w-1/2 lg:block xl:w-[500px]">
|
|
{site.site_desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-initial justify-center p-8 lg:flex-auto lg:justify-end">
|
|
<div className="flex flex-col items-center rounded-2xl md:w-[600px] lg:flex-auto lg:bg-background lg:p-10 lg:shadow">
|
|
<div className="flex flex-col items-stretch justify-center md:w-[400px] lg:h-full">
|
|
<div className="flex flex-col justify-center pb-14 lg:flex-auto lg:pb-20">
|
|
<EmailAuthForm />
|
|
</div>
|
|
<div className="flex items-center justify-end">
|
|
{/* <div className='text-primary flex gap-5 text-sm font-semibold'>
|
|
<Link href='/tos'>{t('tos')}</Link>
|
|
</div> */}
|
|
<div className="flex items-center gap-5">
|
|
<LanguageSwitch />
|
|
<ThemeSwitch />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|