portal-dashboard/app/routes/login.tsx

206 lines
7.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import type {MetaFunction} from "@remix-run/node"
import {Link, useLocation} from "@remix-run/react"
import {z} from "zod"
import {Button} from "~/components/ui/button"
import logoPng from "~/images/lume-logo.png?url"
import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
import discordLogoPng from "~/images/discord-logo.png?url"
import lumeBgPng from "~/images/lume-bg-image.png?url"
import {Field, FieldCheckbox} from "~/components/forms"
import {getFormProps, useForm} from "@conform-to/react"
import {getZodConstraint, parseWithZod} from "@conform-to/zod"
import {useGo, useIsAuthenticated, useLogin} from "@refinedev/core";
import {AuthFormRequest} from "~/data/auth-provider.js";
import {useEffect} from "react";
export const meta: MetaFunction = () => {
return [
{title: "Login"},
{name: "description", content: "Welcome to Lume!"}
]
}
export default function Login() {
const location = useLocation()
const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
const auth = useIsAuthenticated();
const hash = location.hash
const go = useGo();
useEffect(() => {
if (!isAuthLoading) {
if (authData?.authenticated) {
go({to: "/dashboard", type: "replace"});
}
}
}, [isAuthLoading, authData]);
return (
<div className="p-10 h-screen relative">
<header>
<img src={logoPng} alt="Lume logo" className="h-10"/>
</header>
<div className="fixed inset-0 -z-10 overflow-clip">
<img
src={lumeBgPng}
alt="Lume background"
className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"
/>
</div>
{hash === "" && <LoginForm/>}
{hash === "#otp" && <OtpForm/>}
<footer className="my-5">
<ul className="flex flex-row">
<li>
<Link to="https://discord.lumeweb.com">
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder"
>
<img className="h-5" src={discordLogoPng} alt="Discord Logo"/>
Connect with us
</Button>
</Link>
</li>
<li>
<Link to="https://lumeweb.com">
<Button
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder"
>
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo"/>
Connect with us
</Button>
</Link>
</li>
</ul>
</footer>
</div>
)
}
const LoginSchema = z.object({
email: z.string().email(),
password: z.string(),
rememberMe: z.boolean()
})
const LoginForm = () => {
const login = useLogin<AuthFormRequest>()
const [form, fields] = useForm({
id: "login",
constraint: getZodConstraint(LoginSchema),
onValidate({formData}) {
return parseWithZod(formData, {schema: LoginSchema})
},
shouldValidate: "onSubmit",
onSubmit(e) {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
login.mutate({
email: data.email.toString(),
password: data.password.toString(),
rememberMe: data.rememberMe.toString() === "on"
});
}
})
return (
<form
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
{...getFormProps(form)}
>
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
<Field
inputProps={{name: fields.email.name}}
labelProps={{children: "Email"}}
errors={fields.email.errors}
/>
<Field
inputProps={{name: fields.password.name, type: "password"}}
labelProps={{children: "Password"}}
errors={fields.password.errors}
/>
<FieldCheckbox
inputProps={{name: fields.rememberMe.name, form: form.id}}
labelProps={{children: "Remember Me"}}
errors={fields.rememberMe.errors}
/>
<Button className="w-full h-14">Login</Button>
<p className="inline-block text-input-placeholder">
Forgot your password?{" "}
<Link
to="/reset-password"
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
>
Reset Password
</Link>
</p>
<Link to="/sign-up" className="block">
<Button type="button" className="w-full h-14" variant={"outline"}>
Create an Account
</Button>
</Link>
</form>
)
}
const OtpSchema = z.object({
otp: z.string().length(6, {message: "OTP must be 6 characters"})
})
const OtpForm = () => {
// TODO: Add support for resending the OTP
const [form, fields] = useForm({
id: "otp",
constraint: getZodConstraint(OtpSchema),
onValidate({formData}) {
return parseWithZod(formData, {schema: OtpSchema})
},
shouldValidate: "onSubmit"
})
const valid = false // TODO: some sort of logic to verify user is on OTP state validly
if (!valid) {
location.hash = ""
return null
}
return (
<form
className="w-full p-2 max-w-md mt-12 bg-background"
{...getFormProps(form)}
>
<span className="block !mb-8 space-y-2">
<h2 className="text-3xl font-bold">Check your inbox</h2>
<p className="text-input-placeholder">
We will need the six digit confirmation code you received in your
email in order to verify your account and get started. Didnt receive
a code?{" "}
<Button type="button" variant={"link"} className="text-md h-0">
Resend now
</Button>
</p>
</span>
<Field
inputProps={{name: fields.otp.name}}
labelProps={{children: "Confirmation Code"}}
errors={fields.otp.errors}
/>
<Button className="w-full h-14">Verify</Button>
<p className="text-input-placeholder w-full text-left">
<Link
to="/login"
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
>
Back to Login
</Link>
</p>
</form>
)
}