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, useParsed, } from "@refinedev/core"; import type { AuthFormRequest } from "~/data/auth-provider"; import { useEffect } from "react"; export const meta: MetaFunction = () => { return [ { title: "Login" }, { name: "description", content: "Welcome to Lume!" }, ]; }; type LoginParams = { to: string; }; export default function Login() { const location = useLocation(); const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated(); const hash = location.hash; const go = useGo(); const parsed = useParsed(); useEffect(() => { if (!isAuthLoading) { if (authData?.authenticated) { let to = "/dashboard"; if (parsed.params?.to) { to = parsed.params.to; } go({ to, type: "push" }); } } }, [isAuthLoading, authData]); return (
Lume logo
Lume background
{hash === "" && } {hash === "#otp" && }
); } const LoginSchema = z.object({ email: z.string().email(), password: z.string(), rememberMe: z.boolean().optional(), }); const LoginForm = () => { const login = useLogin(); const parsed = useParsed(); 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", redirectTo: parsed.params?.to, }); }, }); return (

Welcome back! 🎉

Forgot your password?{" "} Reset Password

); }; 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 (

Check your inbox

We will need the six digit confirmation code you received in your email in order to verify your account and get started. Didn’t receive a code?{" "}

← Back to Login

); };