Merge branch 'develop' of git.lumeweb.com:LumeWeb/portal-dashboard into develop

app/components/icons.tsx

@@ -458,23 +458,17 @@ export const MoreIcon = ({ className }: { className?: string }) => {
 export const FingerPrintIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="23"
       height="23"
       viewBox="0 0 23 23"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}>
-      <g clipPath="url(#clip0_343_2984)">
         <path
           d="M11.1728 0.931152C13.3952 0.931152 15.5267 1.81402 17.0982 3.38554C18.6697 4.95706 19.5526 7.0885 19.5526 9.31096V13.0353C19.5535 14.3774 19.2318 15.7001 18.6144 16.8918C17.997 18.0835 17.1021 19.1092 16.0051 19.8826C16.4465 18.4654 16.7035 16.9673 16.7519 15.4161L16.7593 14.8975V13.0344H14.8971V14.8975L14.8944 15.1908C14.8574 17.2213 14.4039 19.2225 13.562 21.0706C12.4834 21.3893 11.3519 21.4887 10.2342 21.363C11.3872 19.5425 12.0306 17.4461 12.0974 15.2923L12.1039 14.8975V8.37987H10.2417V14.8975L10.238 15.1657C10.1874 17.2324 9.5097 19.235 8.29479 20.9077C7.40642 20.5826 6.57967 20.1091 5.84975 19.5073C6.82259 18.2772 7.38005 16.77 7.44191 15.2029L7.44843 14.8975V9.31096L7.45308 9.12474C7.47869 8.5973 7.61679 8.08142 7.85811 7.61172L7.96425 7.41899L6.61883 6.07356C5.99989 6.94167 5.64371 7.96949 5.59277 9.03443L5.58625 9.31096V14.8975L5.58252 15.107C5.54313 16.2036 5.17995 17.264 4.53877 18.1545C3.40438 16.6894 2.79013 14.8882 2.79298 13.0353V9.31096C2.79298 7.0885 3.67585 4.95706 5.24737 3.38554C6.81889 1.81402 8.95032 0.931152 11.1728 0.931152ZM11.1728 3.72442C10.0592 3.72442 9.02197 4.0503 8.15047 4.61175L7.93632 4.757L9.28081 6.10243C9.7871 5.80291 10.3575 5.62832 10.9447 5.59312L11.1728 5.5866L11.359 5.59126C12.2803 5.63731 13.1517 6.02362 13.8045 6.67537C14.4573 7.32712 14.845 8.19794 14.8925 9.11916L14.8971 9.31096V11.1731H16.7593V9.31096C16.7593 7.82932 16.1707 6.40836 15.1231 5.36068C14.0754 4.313 12.6544 3.72442 11.1728 3.72442Z"
           fill="currentColor"
         />
-      </g>
-      <defs>
-        <clipPath id="clip0_343_2984">
-          <rect width="22.3461" height="22.3461" fill="currentColor" />
-        </clipPath>
-      </defs>
     </svg>
   );
 };
@@ -482,28 +476,17 @@ export const FingerPrintIcon = ({ className }: { className?: string }) => {
 export const EditIcon = ({ className }: { className?: string }) => {
   return (
     <svg
-      width="16"
+      aria-hidden="true"
-      height="16"
+      width="13"
-      viewBox="0 0 16 16"
+      height="13"
+      viewBox="0 0 13 13"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}>
-      <g clipPath="url(#clip0_355_3166)">
+      <path
-        <path
+        d="M7.72289 2.8954L9.96834 5.14086L3.06357 12.0456H0.818115V9.80018L7.72289 2.8954ZM8.5088 2.1095L9.79993 0.818359L12.0454 3.06381L10.7543 4.35495L8.5088 2.1095Z"
-          d="M7.72289 2.8954L9.96834 5.14086L3.06357 12.0456H0.818115V9.80018L7.72289 2.8954ZM8.5088 2.1095L9.79993 0.818359L12.0454 3.06381L10.7543 4.35495L8.5088 2.1095Z"
+        fill="currentColor"
-          fill="currentColor"
+      />
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_355_3166">
-          <rect
-            width="16"
-            height="16"
-            fill="currentColor"
-            transform="translate(0.818115 0.818359)"
-          />
-        </clipPath>
-      </defs>
     </svg>
   );
 };
@@ -511,6 +494,7 @@ export const EditIcon = ({ className }: { className?: string }) => {
 export const ThemeIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="20"
       height="20"
       viewBox="0 0 20 20"
@@ -528,13 +512,13 @@ export const ThemeIcon = ({ className }: { className?: string }) => {
 export const ChevronDownIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="13"
       height="7"
       viewBox="0 0 13 7"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      className={className}>
-    >
       <path
         d="M3.00406 0.571289C2.11315 0.571289 1.66699 1.64843 2.29695 2.2784L5.59966 5.5811C5.99018 5.97163 6.62335 5.97163 7.01387 5.58111L10.3166 2.2784C10.9465 1.64843 10.5004 0.571289 9.60948 0.571289H3.00406Z"
         fill="currentColor"
@@ -546,13 +530,13 @@ export const ChevronDownIcon = ({ className }: { className?: string }) => {
 export const FolderIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="28"
       height="22"
       viewBox="0 0 28 22"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      className={className}>
-    >
       <path
         d="M11 0H2.75C1.2375 0 0 1.2375 0 2.75V19.25C0 20.7625 1.2375 22 2.75 22H24.75C26.2625 22 27.5 20.7625 27.5 19.25V5.5C27.5 3.9875 26.2625 2.75 24.75 2.75H13.75L11 0Z"
         fill="currentColor"
@@ -564,28 +548,21 @@ export const FolderIcon = ({ className }: { className?: string }) => {
 export const RecentIcon = ({ className }: { className?: string }) => {
   return (
     <svg
+      aria-hidden="true"
       width="12"
       height="12"
       viewBox="0 0 12 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
+      className={className}>
-    >
+      <path
-      <g clipPath="url(#clip0_323_1182)">
+        d="M6 0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456726 3.7039C0.00259972 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66558 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6C11.9983 4.40923 11.3656 2.88411 10.2407 1.75926C9.1159 0.634414 7.59077 0.00172054 6 0ZM6 11C5.0111 11 4.0444 10.7068 3.22215 10.1573C2.39991 9.60794 1.75904 8.82705 1.38061 7.91342C1.00217 6.99979 0.90315 5.99445 1.09608 5.02455C1.289 4.05464 1.76521 3.16373 2.46447 2.46447C3.16373 1.7652 4.05465 1.289 5.02455 1.09607C5.99446 0.903148 6.99979 1.00216 7.91342 1.3806C8.82705 1.75904 9.60794 2.3999 10.1574 3.22215C10.7068 4.04439 11 5.01109 11 6C10.9985 7.32564 10.4713 8.59656 9.53393 9.53393C8.59656 10.4713 7.32564 10.9985 6 11Z"
-        <path
+        fill="currentColor"
-          d="M6 0C4.81331 0 3.65328 0.351894 2.66658 1.01118C1.67989 1.67047 0.910851 2.60754 0.456726 3.7039C0.00259972 4.80026 -0.11622 6.00666 0.115291 7.17054C0.346802 8.33443 0.918247 9.40353 1.75736 10.2426C2.59648 11.0818 3.66558 11.6532 4.82946 11.8847C5.99335 12.1162 7.19975 11.9974 8.2961 11.5433C9.39246 11.0892 10.3295 10.3201 10.9888 9.33342C11.6481 8.34673 12 7.18669 12 6C11.9983 4.40923 11.3656 2.88411 10.2407 1.75926C9.1159 0.634414 7.59077 0.00172054 6 0ZM6 11C5.0111 11 4.0444 10.7068 3.22215 10.1573C2.39991 9.60794 1.75904 8.82705 1.38061 7.91342C1.00217 6.99979 0.90315 5.99445 1.09608 5.02455C1.289 4.05464 1.76521 3.16373 2.46447 2.46447C3.16373 1.7652 4.05465 1.289 5.02455 1.09607C5.99446 0.903148 6.99979 1.00216 7.91342 1.3806C8.82705 1.75904 9.60794 2.3999 10.1574 3.22215C10.7068 4.04439 11 5.01109 11 6C10.9985 7.32564 10.4713 8.59656 9.53393 9.53393C8.59656 10.4713 7.32564 10.9985 6 11Z"
+      />
-          fill="currentColor"
+      <path
-        />
+        d="M6.5 5.793V3C6.5 2.86739 6.44732 2.74021 6.35355 2.64645C6.25979 2.55268 6.13261 2.5 6 2.5C5.86739 2.5 5.74021 2.55268 5.64645 2.64645C5.55268 2.74021 5.5 2.86739 5.5 3V6C5.50003 6.1326 5.55273 6.25975 5.6465 6.3535L7.1465 7.8535C7.2408 7.94458 7.3671 7.99498 7.4982 7.99384C7.6293 7.9927 7.75471 7.94011 7.84741 7.84741C7.94011 7.75471 7.9927 7.6293 7.99384 7.4982C7.99498 7.3671 7.94458 7.2408 7.8535 7.1465L6.5 5.793Z"
-        <path
+        fill="currentColor"
-          d="M6.5 5.793V3C6.5 2.86739 6.44732 2.74021 6.35355 2.64645C6.25979 2.55268 6.13261 2.5 6 2.5C5.86739 2.5 5.74021 2.55268 5.64645 2.64645C5.55268 2.74021 5.5 2.86739 5.5 3V6C5.50003 6.1326 5.55273 6.25975 5.6465 6.3535L7.1465 7.8535C7.2408 7.94458 7.3671 7.99498 7.4982 7.99384C7.6293 7.9927 7.75471 7.94011 7.84741 7.84741C7.94011 7.75471 7.9927 7.6293 7.99384 7.4982C7.99498 7.3671 7.94458 7.2408 7.8535 7.1465L6.5 5.793Z"
+      />
-          fill="currentColor"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_323_1182">
-          <rect width="12" height="12" fill="currentColor" />
-        </clipPath>
-      </defs>
     </svg>
   );
 };

app/components/management-card.tsx

@@ -10,7 +10,7 @@ const ManagementCardAvatar = ({ src }: { src?: string }) => {
         <Avatar className="border-2 border-ring h-28 w-28" />
         <Button
           variant="outline"
-          className="h-10 w-10 rounded-full hover:bg-secondary-2 border-white absolute bottom-0 right-0 z-50">
+          className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
           <EditIcon />
         </Button>
       </div>
@@ -23,7 +23,7 @@ const ManagementCardTitle = ({
   className,
 }: React.PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className={cn("flex gap-x-2 items-center font-semibold", className)}>
+    <div className={cn("flex items-center gap-x-2 font-semibold", className)}>
       <FingerPrintIcon className="text-ring" />
       {children}
     </div>
@@ -35,7 +35,7 @@ const ManagementCardContent = ({
   className,
 }: React.PropsWithChildren<{ className?: string }>) => {
   return (
-    <div className={cn("text-primary-2 mt-4 mb-8 block text-sm", className)}>
+    <div className={cn("mt-4 mb-8 text-sm text-primary-2", className)}>
       {children}
     </div>
   );

app/components/ui/dialog.tsx

@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
+        <Cross2Icon className="w-4 h-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

app/data/file-provider.ts

@@ -0,0 +1,15 @@
+import type { BaseRecord, CreateManyParams, CreateManyResponse, CreateParams, CreateResponse, CustomParams, CustomResponse, DataProvider, DeleteManyParams, DeleteManyResponse, DeleteOneParams, DeleteOneResponse, GetListParams, GetListResponse, GetManyParams, GetManyResponse, GetOneParams, GetOneResponse, UpdateManyParams, UpdateManyResponse, UpdateParams, UpdateResponse } from "@refinedev/core";
+
+export class PortalFilesProvider implements DataProvider {
+    getList: <TData extends BaseRecord = BaseRecord>(params: GetListParams) => Promise<GetListResponse<TData>>;
+    getMany?: (<TData extends BaseRecord = BaseRecord>(params: GetManyParams) => Promise<GetManyResponse<TData>>) | undefined;
+    getOne: <TData extends BaseRecord = BaseRecord>(params: GetOneParams) => Promise<GetOneResponse<TData>>;
+    create: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateParams<TVariables>) => Promise<CreateResponse<TData>>;
+    createMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: CreateManyParams<TVariables>) => Promise<CreateManyResponse<TData>>) | undefined;
+    update: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: UpdateParams<TVariables>) => Promise<UpdateResponse<TData>>;
+    updateMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: UpdateManyParams<TVariables>) => Promise<UpdateManyResponse<TData>>) | undefined;
+    deleteOne: <TData extends BaseRecord = BaseRecord, TVariables = {}>(params: DeleteOneParams<TVariables>) => Promise<DeleteOneResponse<TData>>;
+    deleteMany?: (<TData extends BaseRecord = BaseRecord, TVariables = {}>(params: DeleteManyParams<TVariables>) => Promise<DeleteManyResponse<TData>>) | undefined;
+    getApiUrl: () => string;
+    custom?: (<TData extends BaseRecord = BaseRecord, TQuery = unknown, TPayload = unknown>(params: CustomParams<TQuery, TPayload>) => Promise<CustomResponse<...>>) | undefined;
+}

app/routes/account.tsx

@@ -150,20 +150,20 @@ export default function MyAccount() {
       </div>
       {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
       <ChangeEmailForm
-        open={openModal["changeEmail"]}
+        open={openModal.changeEmail}
         setOpen={(value: boolean) =>
           setModal({ ...openModal, changeEmail: value })
         }
         currentValue="bsimpson@springfield.oh.gov.com"
       />
       <ChangePasswordForm
-        open={openModal["changePassword"]}
+        open={openModal.changePassword}
         setOpen={(value: boolean) =>
           setModal({ ...openModal, changePassword: value })
         }
       />
       <SetupTwoFactorDialog
-        open={openModal["setupTwoFactor"]}
+        open={openModal.setupTwoFactor}
         setOpen={(value: boolean) =>
           setModal({ ...openModal, setupTwoFactor: value })
         }

app/routes/login.tsx

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