import type { MetaFunction } from "@remix-run/node"; import { Link } 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, 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!" }, ]; }; export type LoginParams = { to: string; }; export default function Login() { return (
Lume logo
Lume background
); } const LoginSchema = z.object({ email: z.string().email(), password: z.string(), rememberMe: z.boolean().optional(), }); const LoginForm = () => { const login = useLogin(); const go = useGo(); const parsed = useParsed(); const [form, fields] = useForm({ id: "login", constraint: getZodConstraint(LoginSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: LoginSchema }); }, shouldValidate: "onSubmit", onSubmit(e, { submission }) { e.preventDefault(); if (submission?.status === "success") { const data = submission.value; login.mutate({ email: data.email, password: data.password, rememberMe: data.rememberMe ?? false, redirectTo: parsed.params?.to, }); } }, }); useEffect(() => { if (form.status === "success") { go({ to: "/login/otp", type: "push" }); } }, [form.status, go]); return (

Welcome back! 🎉

Forgot your password?{" "} Reset Password

); };