fix: closes #8

This commit is contained in:
Juan Di Toro 2024-03-22 14:04:22 +01:00
parent e401889b04
commit a61fe195ee
2 changed files with 79 additions and 77 deletions

69
app/routes/login.otp.tsx Normal file
View File

@ -0,0 +1,69 @@
import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { useGo, useIsAuthenticated, useParsed } from "@refinedev/core";
import { Link } from "@remix-run/react";
import { useEffect } from "react";
import { z } from "zod";
import { Field } from "~/components/forms";
import { Button } from "~/components/ui/button";
import type { LoginParams } from "./login";
const OtpSchema = z.object({
otp: z.string().length(6, { message: "OTP must be 6 characters" }),
});
export default function OtpForm() {
const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
const go = useGo();
const parsed = useParsed<LoginParams>();
// 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 = true;
const to = parsed.params?.to ?? "/dashboard";
useEffect(() => {
if (!isAuthLoading) {
if (authData?.authenticated && valid) {
go({ to, type: "push" });
}
}
}, [isAuthLoading, authData, to, go]);
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>
);
}

View File

@ -1,5 +1,5 @@
import type { MetaFunction } from "@remix-run/node"; import type { MetaFunction } from "@remix-run/node";
import { Link, useLocation } from "@remix-run/react"; import { Link } from "@remix-run/react";
import { z } from "zod"; import { z } from "zod";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import logoPng from "~/images/lume-logo.png?url"; import logoPng from "~/images/lume-logo.png?url";
@ -11,7 +11,6 @@ import { getFormProps, useForm } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod"; import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { import {
useGo, useGo,
useIsAuthenticated,
useLogin, useLogin,
useParsed, useParsed,
} from "@refinedev/core"; } from "@refinedev/core";
@ -25,30 +24,11 @@ export const meta: MetaFunction = () => {
]; ];
}; };
type LoginParams = { export type LoginParams = {
to: string; to: string;
}; };
export default function Login() { export default function Login() {
const location = useLocation();
const { isLoading: isAuthLoading, data: authData } = useIsAuthenticated();
const hash = location.hash;
const go = useGo();
const parsed = useParsed<LoginParams>();
useEffect(() => {
if (!isAuthLoading) {
if (authData?.authenticated) {
let to = "/dashboard";
if (parsed.params?.to) {
to = parsed.params.to;
}
go({ to, type: "push" });
}
}
}, [isAuthLoading, authData, parsed, go]);
return ( return (
<div className="p-10 h-screen relative"> <div className="p-10 h-screen relative">
<header> <header>
@ -62,8 +42,7 @@ export default function Login() {
/> />
</div> </div>
{hash === "" && <LoginForm />} <LoginForm />
{hash === "#otp" && <OtpForm />}
<footer className="my-5"> <footer className="my-5">
<ul className="flex flex-row"> <ul className="flex flex-row">
@ -101,6 +80,7 @@ const LoginSchema = z.object({
const LoginForm = () => { const LoginForm = () => {
const login = useLogin<AuthFormRequest>(); const login = useLogin<AuthFormRequest>();
const go = useGo();
const parsed = useParsed<LoginParams>(); const parsed = useParsed<LoginParams>();
const [form, fields] = useForm({ const [form, fields] = useForm({
id: "login", id: "login",
@ -124,6 +104,12 @@ const LoginForm = () => {
}, },
}); });
useEffect(() => {
if (form.status === "success") {
go({ to: "/login/otp", type: "push" });
}
}, [form.status, go]);
return ( return (
<form <form
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background" className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
@ -161,56 +147,3 @@ const LoginForm = () => {
</form> </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>
);
};