diff --git a/app/components/forms.tsx b/app/components/forms.tsx
index 55ecaee..c79eeec 100644
--- a/app/components/forms.tsx
+++ b/app/components/forms.tsx
@@ -64,34 +64,36 @@ export const FieldCheckbox = ({
const id = inputProps.id ?? fallbackId
const errorId = errors?.length ? `${id}-error` : undefined
return (
-
-
{
- input.change(state.valueOf() ? checkedValue : "")
- inputProps.onCheckedChange?.(state)
- }}
- onFocus={(event) => {
- input.focus()
- inputProps.onFocus?.(event)
- }}
- onBlur={(event) => {
- input.blur()
- inputProps.onBlur?.(event)
- }}
- type="button"
- />
-
+ <>
+
+ {
+ input.change(state.valueOf() ? checkedValue : "")
+ inputProps.onCheckedChange?.(state)
+ }}
+ onFocus={(event) => {
+ input.focus()
+ inputProps.onFocus?.(event)
+ }}
+ onBlur={(event) => {
+ input.blur()
+ inputProps.onBlur?.(event)
+ }}
+ type="button"
+ />
+
+
{errorId ? : null}
-
+ >
)
}
@@ -108,7 +110,7 @@ export function ErrorList({
return (
{errorsToRender.map((e) => (
- -
+
-
{e}
))}
diff --git a/app/data/auth-provider.ts b/app/data/auth-provider.ts
new file mode 100644
index 0000000..a4572b6
--- /dev/null
+++ b/app/data/auth-provider.ts
@@ -0,0 +1,36 @@
+import { AuthProvider } from "@refinedev/core"
+import type {
+ AuthActionResponse,
+ CheckResponse,
+ OnErrorResponse
+} from "@refinedev/core/dist/interfaces"
+
+export const authProvider: AuthProvider = {
+ login: async (params: any) => {
+ return { success: true } satisfies AuthActionResponse
+ },
+ logout: async (params: any) => {
+ return { success: true } satisfies AuthActionResponse
+ },
+ check: async (params?: any) => {
+ return { authenticated: true } satisfies CheckResponse
+ },
+ onError: async (error: any) => {
+ return { logout: true } satisfies OnErrorResponse
+ },
+ register: async (params: any) => {
+ return { success: true } satisfies AuthActionResponse
+ },
+ forgotPassword: async (params: any) => {
+ return { success: true } satisfies AuthActionResponse
+ },
+ updatePassword: async (params: any) => {
+ return { success: true } satisfies AuthActionResponse
+ },
+ getPermissions: async (params: any) => {
+ return { success: true } satisfies AuthActionResponse
+ },
+ getIdentity: async (params: any) => {
+ return { id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150" }
+ }
+}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 5b15861..170596b 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,87 +1,13 @@
-import type { MetaFunction } from "@remix-run/node"
-import { Link } from "@remix-run/react"
-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 { useForm } from "@conform-to/react"
-
-export const meta: MetaFunction = () => {
- return [
- { title: "New Remix SPA" },
- { name: "description", content: "Welcome to Remix (SPA Mode)!" }
- ]
-}
+import Login from "./login"
export default function Index() {
- const [form, fields] = useForm({
- id: "login"
- })
- return (
-
-
-
-
-
-
-
-
- )
+ const isLogged = false
+
+ if (isLogged) {
+ window.location.href = "/dashboard"
+ } else {
+ window.location.href = "/login"
+ }
+
+ return isLogged ? Dashboard
:
}
diff --git a/app/routes/login.tsx b/app/routes/login.tsx
new file mode 100644
index 0000000..9d149f9
--- /dev/null
+++ b/app/routes/login.tsx
@@ -0,0 +1,179 @@
+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"
+
+export const meta: MetaFunction = () => {
+ return [
+ { title: "Login" },
+ { name: "description", content: "Welcome to Lume!" }
+ ]
+}
+
+export default function Login() {
+ const location = useLocation()
+ const hash = location.hash
+
+ return (
+
+
+
+
+
+
+
+
+ {hash === "" &&
}
+ {hash === "#otp" &&
}
+
+
+
+ )
+}
+
+const LoginSchema = z.object({
+ email: z.string().email(),
+ password: z.string(),
+ rememberMe: z.boolean()
+})
+
+const LoginForm = () => {
+ const [form, fields] = useForm({
+ id: "login",
+ constraint: getZodConstraint(LoginSchema),
+ onValidate({ formData }) {
+ return parseWithZod(formData, { schema: LoginSchema })
+ },
+ shouldValidate: "onSubmit"
+ })
+
+ return (
+
+ )
+}
+
+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 (
+
+ )
+}
diff --git a/app/routes/reset-password.tsx b/app/routes/reset-password.tsx
new file mode 100644
index 0000000..245623e
--- /dev/null
+++ b/app/routes/reset-password.tsx
@@ -0,0 +1,92 @@
+import type { MetaFunction } from "@remix-run/node"
+import { Link } from "@remix-run/react"
+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 } from "~/components/forms"
+import { getFormProps, useForm } from "@conform-to/react"
+import { z } from "zod"
+import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Sign Up" }]
+}
+
+const RecoverPasswordSchema = z
+ .object({
+ email: z.string().email(),
+ })
+export default function RecoverPassword() {
+ const [form, fields] = useForm({
+ id: "sign-up",
+ constraint: getZodConstraint(RecoverPasswordSchema),
+ onValidate({ formData }) {
+ return parseWithZod(formData, { schema: RecoverPasswordSchema })
+ }
+ })
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/app/routes/sign-up.tsx b/app/routes/sign-up.tsx
index 839c18e..138c6d9 100644
--- a/app/routes/sign-up.tsx
+++ b/app/routes/sign-up.tsx
@@ -6,25 +6,56 @@ 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 { useForm } from "@conform-to/react"
+import { getFormProps, useForm } from "@conform-to/react"
+import { z } from "zod"
+import { getZodConstraint, parseWithZod } from "@conform-to/zod"
export const meta: MetaFunction = () => {
- return [
- { title: "New Remix SPA" },
- { name: "description", content: "Welcome to Remix (SPA Mode)!" }
- ]
+ return [{ title: "Sign Up" }]
}
-export default function Index() {
- const [form, fields] = useForm({
- id: "login"
+const SignUpSchema = z
+ .object({
+ email: z.string().email(),
+ password: z
+ .string()
+ .min(8, { message: "Password must be at least 8 characters" }),
+ confirmPassword: z
+ .string()
+ .min(8, { message: "Password must be at least 8 characters" }),
+ termsOfService: z.boolean({
+ required_error: "You must agree to the terms of service"
+ })
})
+ .superRefine((data, ctx) => {
+ if (data.password !== data.confirmPassword) {
+ return ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ path: ["confirmPassword"],
+ message: "Passwords do not match"
+ })
+ }
+ return true
+ })
+
+export default function SignUp() {
+ const [form, fields] = useForm({
+ id: "sign-up",
+ constraint: getZodConstraint(SignUpSchema),
+ onValidate({ formData }) {
+ return parseWithZod(formData, { schema: SignUpSchema })
+ }
+ })
+
return (
-
+
-
+
-
-
-