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

This commit is contained in:
Tania Gutierrez 2024-03-14 13:46:31 -04:00
commit f67ebbd98a
Signed by: riobuenoDevelops
GPG Key ID: 53133EB28EB7E801
7 changed files with 227 additions and 20207 deletions

View File

@ -458,23 +458,17 @@ export const MoreIcon = ({ className }: { className?: string }) => {
export const FingerPrintIcon = ({ className }: { className?: string }) => { export const FingerPrintIcon = ({ className }: { className?: string }) => {
return ( return (
<svg <svg
aria-hidden="true"
width="23" width="23"
height="23" height="23"
viewBox="0 0 23 23" viewBox="0 0 23 23"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}> className={className}>
<g clipPath="url(#clip0_343_2984)">
<path <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" 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" fill="currentColor"
/> />
</g>
<defs>
<clipPath id="clip0_343_2984">
<rect width="22.3461" height="22.3461" fill="currentColor" />
</clipPath>
</defs>
</svg> </svg>
); );
}; };
@ -482,28 +476,17 @@ export const FingerPrintIcon = ({ className }: { className?: string }) => {
export const EditIcon = ({ className }: { className?: string }) => { export const EditIcon = ({ className }: { className?: string }) => {
return ( return (
<svg <svg
width="16" aria-hidden="true"
height="16" width="13"
viewBox="0 0 16 16" height="13"
viewBox="0 0 13 13"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className}> 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> </svg>
); );
}; };
@ -511,6 +494,7 @@ export const EditIcon = ({ className }: { className?: string }) => {
export const ThemeIcon = ({ className }: { className?: string }) => { export const ThemeIcon = ({ className }: { className?: string }) => {
return ( return (
<svg <svg
aria-hidden="true"
width="20" width="20"
height="20" height="20"
viewBox="0 0 20 20" viewBox="0 0 20 20"
@ -528,13 +512,13 @@ export const ThemeIcon = ({ className }: { className?: string }) => {
export const ChevronDownIcon = ({ className }: { className?: string }) => { export const ChevronDownIcon = ({ className }: { className?: string }) => {
return ( return (
<svg <svg
aria-hidden="true"
width="13" width="13"
height="7" height="7"
viewBox="0 0 13 7" viewBox="0 0 13 7"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className} className={className}>
>
<path <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" 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" fill="currentColor"
@ -546,13 +530,13 @@ export const ChevronDownIcon = ({ className }: { className?: string }) => {
export const FolderIcon = ({ className }: { className?: string }) => { export const FolderIcon = ({ className }: { className?: string }) => {
return ( return (
<svg <svg
aria-hidden="true"
width="28" width="28"
height="22" height="22"
viewBox="0 0 28 22" viewBox="0 0 28 22"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={className} className={className}>
>
<path <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" 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" fill="currentColor"
@ -564,28 +548,21 @@ export const FolderIcon = ({ className }: { className?: string }) => {
export const RecentIcon = ({ className }: { className?: string }) => { export const RecentIcon = ({ className }: { className?: string }) => {
return ( return (
<svg <svg
aria-hidden="true"
width="12" width="12"
height="12" height="12"
viewBox="0 0 12 12" viewBox="0 0 12 12"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" 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> </svg>
); );
}; };

View File

@ -10,7 +10,7 @@ const ManagementCardAvatar = ({ src }: { src?: string }) => {
<Avatar className="border-2 border-ring h-28 w-28" /> <Avatar className="border-2 border-ring h-28 w-28" />
<Button <Button
variant="outline" 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 /> <EditIcon />
</Button> </Button>
</div> </div>
@ -23,7 +23,7 @@ const ManagementCardTitle = ({
className, className,
}: React.PropsWithChildren<{ className?: string }>) => { }: React.PropsWithChildren<{ className?: string }>) => {
return ( 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" /> <FingerPrintIcon className="text-ring" />
{children} {children}
</div> </div>
@ -35,7 +35,7 @@ const ManagementCardContent = ({
className, className,
}: React.PropsWithChildren<{ className?: string }>) => { }: React.PropsWithChildren<{ className?: string }>) => {
return ( 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} {children}
</div> </div>
); );

View File

@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
> >
{children} {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"> <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> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>

15
app/data/file-provider.ts Normal file
View File

@ -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;
}

View File

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

View File

@ -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 = () => { export const meta: MetaFunction = () => {
return [ return [
{title: "Login"}, { title: "Login" },
{name: "description", content: "Welcome to Lume!"} { name: "description", content: "Welcome to Lume!" },
] ];
} };
type LoginParams = { type LoginParams = {
to: string; to: string;
} };
export default function Login() { 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({ 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 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({ 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 = () => { 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"> <span className="block !mb-8 space-y-2">
<h2 className="text-3xl font-bold">Check your inbox</h2> <h2 className="text-3xl font-bold">Check your inbox</h2>
<p className="text-input-placeholder"> <p className="text-input-placeholder">
We will need the six digit confirmation code you received in your We will need the six digit confirmation code you received in your
email in order to verify your account and get started. Didnt receive email in order to verify your account and get started. Didnt receive
a code?{" "} a code?{" "}
<Button type="button" variant={"link"} className="text-md h-0"> <Button type="button" variant={"link"} className="text-md h-0">
Resend now Resend now
</Button> </Button>
</p> </p>
</span> </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> );
) };
}

19971
package-lock.json generated

File diff suppressed because it is too large Load Diff