Merge branch 'develop' of git.lumeweb.com:LumeWeb/portal-dashboard into develop
This commit is contained in:
commit
f67ebbd98a
GPG Key ID:
53133EB28EB7E801
|
|
@ -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"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
width="13"
|
||||
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
|
||||
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"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_355_3166">
|
||||
<rect
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
transform="translate(0.818115 0.818359)"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<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"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</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}
|
||||
>
|
||||
<g clipPath="url(#clip0_323_1182)">
|
||||
<path
|
||||
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"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_323_1182">
|
||||
<rect width="12" height="12" fill="currentColor" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
className={className}>
|
||||
<path
|
||||
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"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,215 +1,214 @@
|
|||
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"
|
||||
import {useGo, useIsAuthenticated, useLogin, useParsed} from "@refinedev/core";
|
||||
import {AuthFormRequest} from "~/data/auth-provider.js";
|
||||
import {useEffect} from "react";
|
||||
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";
|
||||
import {
|
||||
useGo,
|
||||
useIsAuthenticated,
|
||||
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!"}
|
||||
]
|
||||
}
|
||||
return [
|
||||
{ title: "Login" },
|
||||
{ name: "description", content: "Welcome to Lume!" },
|
||||
];
|
||||
};
|
||||
|
||||
type LoginParams = {
|
||||
to: string;
|
||||
}
|
||||
to: string;
|
||||
};
|
||||
|
||||
export default function Login() {
|
||||
const location = useLocation()
|
||||
const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
|
||||
const hash = location.hash
|
||||
const go = useGo();
|
||||
const parsed = useParsed<LoginParams>()
|
||||
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"});
|
||||
}
|
||||
useEffect(() => {
|
||||
if (!isAuthLoading) {
|
||||
if (authData?.authenticated) {
|
||||
let to = "/dashboard";
|
||||
if (parsed.params?.to) {
|
||||
to = parsed.params.to;
|
||||
}
|
||||
}, [isAuthLoading, authData]);
|
||||
|
||||
return (
|
||||
<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>
|
||||
go({ to, type: "push" });
|
||||
}
|
||||
}
|
||||
}, [isAuthLoading, authData]);
|
||||
|
||||
{hash === "" && <LoginForm/>}
|
||||
{hash === "#otp" && <OtpForm/>}
|
||||
return (
|
||||
<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">
|
||||
<ul className="flex flex-row">
|
||||
<li>
|
||||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
<img className="h-5" src={discordLogoPng} alt="Discord Logo"/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo"/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
{hash === "" && <LoginForm />}
|
||||
{hash === "#otp" && <OtpForm />}
|
||||
|
||||
<footer className="my-5">
|
||||
<ul className="flex flex-row">
|
||||
<li>
|
||||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder">
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const LoginSchema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string(),
|
||||
rememberMe: z.boolean()
|
||||
})
|
||||
email: z.string().email(),
|
||||
password: z.string(),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const LoginForm = () => {
|
||||
const login = useLogin<AuthFormRequest>()
|
||||
const parsed = useParsed<LoginParams>()
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
constraint: getZodConstraint(LoginSchema),
|
||||
onValidate({formData}) {
|
||||
return parseWithZod(formData, {schema: LoginSchema})
|
||||
},
|
||||
shouldValidate: "onSubmit",
|
||||
onSubmit(e) {
|
||||
e.preventDefault();
|
||||
const login = useLogin<AuthFormRequest>();
|
||||
const parsed = useParsed<LoginParams>();
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
constraint: getZodConstraint(LoginSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: LoginSchema });
|
||||
},
|
||||
shouldValidate: "onSubmit",
|
||||
onSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
||||
login.mutate({
|
||||
email: data.email.toString(),
|
||||
password: data.password.toString(),
|
||||
rememberMe: data.rememberMe.toString() === "on",
|
||||
redirectTo: parsed.params?.to
|
||||
});
|
||||
}
|
||||
})
|
||||
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
||||
login.mutate({
|
||||
email: data.email.toString(),
|
||||
password: data.password.toString(),
|
||||
rememberMe: data.rememberMe.toString() === "on",
|
||||
redirectTo: parsed.params?.to,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
|
||||
<Field
|
||||
inputProps={{name: fields.email.name}}
|
||||
labelProps={{children: "Email"}}
|
||||
errors={fields.email.errors}
|
||||
/>
|
||||
<Field
|
||||
inputProps={{name: fields.password.name, type: "password"}}
|
||||
labelProps={{children: "Password"}}
|
||||
errors={fields.password.errors}
|
||||
/>
|
||||
<FieldCheckbox
|
||||
inputProps={{name: fields.rememberMe.name, form: form.id}}
|
||||
labelProps={{children: "Remember Me"}}
|
||||
errors={fields.rememberMe.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Login</Button>
|
||||
<p className="inline-block text-input-placeholder">
|
||||
Forgot your password?{" "}
|
||||
<Link
|
||||
to="/reset-password"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||
>
|
||||
Reset Password
|
||||
</Link>
|
||||
</p>
|
||||
<Link to="/register" className="block">
|
||||
<Button type="button" className="w-full h-14" variant={"outline"}>
|
||||
Create an Account
|
||||
</Button>
|
||||
</Link>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
|
||||
{...getFormProps(form)}>
|
||||
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
|
||||
<Field
|
||||
inputProps={{ name: fields.email.name }}
|
||||
labelProps={{ children: "Email" }}
|
||||
errors={fields.email.errors}
|
||||
/>
|
||||
<Field
|
||||
inputProps={{ name: fields.password.name, type: "password" }}
|
||||
labelProps={{ children: "Password" }}
|
||||
errors={fields.password.errors}
|
||||
/>
|
||||
<FieldCheckbox
|
||||
inputProps={{ name: fields.rememberMe.name, form: form.id }}
|
||||
labelProps={{ children: "Remember Me" }}
|
||||
errors={fields.rememberMe.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Login</Button>
|
||||
<p className="inline-block text-input-placeholder">
|
||||
Forgot your password?{" "}
|
||||
<Link
|
||||
to="/reset-password"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4">
|
||||
Reset Password
|
||||
</Link>
|
||||
</p>
|
||||
<Link to="/register" className="block">
|
||||
<Button type="button" className="w-full h-14" variant={"outline"}>
|
||||
Create an Account
|
||||
</Button>
|
||||
</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
|
||||
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
|
||||
// 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
|
||||
}
|
||||
if (!valid) {
|
||||
location.hash = "";
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
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. 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
|
||||
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>
|
||||
)
|
||||
}
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue