feat: add verification bannner

This commit is contained in:
Juan Di Toro 2024-03-29 00:37:41 +01:00
parent 1118ba2a71
commit 8235f516e9
3 changed files with 77 additions and 73 deletions

View File

@ -2,7 +2,7 @@ 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 { Form, Link, useLocation } from "@remix-run/react"; import { Link, useLocation } from "@remix-run/react";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -46,18 +46,22 @@ import {
TooltipProvider, TooltipProvider,
} from "./ui/tooltip"; } from "./ui/tooltip";
import filesize from "./lib/filesize"; import filesize from "./lib/filesize";
import { z } from "zod";
import { getFormProps, useForm, useInputControl } from "@conform-to/react";
import { getZodConstraint, parseWithZod } from "@conform-to/zod";
import { ErrorList } from "./forms"; import { ErrorList } from "./forms";
export const GeneralLayout = ({ children }: React.PropsWithChildren) => { export const GeneralLayout = ({ children }: React.PropsWithChildren) => {
const location = useLocation(); const location = useLocation();
const { data: identity } = useGetIdentity<Identity>(); const { data: identity } = useGetIdentity<Identity>();
const { mutate: logout } = useLogout(); const { mutate: logout } = useLogout();
return ( return (
<PinningProvider> <PinningProvider>
<div className="h-full flex flex-row"> {!identity?.verified ? (
<div className="bg-primary-1 text-primary-1-foreground p-4">
We have sent you a verification email. Please click on the link in the
email to start using the platform.
</div>
) : null}
<div className={"h-full flex flex-row"}>
<header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden"> <header className="p-10 pr-0 flex flex-col w-[240px] h-full scroll-m-0 overflow-hidden">
<img src={logoPng} alt="Lume logo" className="h-10 w-32" /> <img src={logoPng} alt="Lume logo" className="h-10 w-32" />
@ -231,11 +235,7 @@ const UploadFileForm = () => {
))} ))}
</div> </div>
<ErrorList <ErrorList errors={[...(hasErrored ? ["An error occurred"] : [])]} />
errors={[
...(hasErrored ? ["An error occurred"] : []),
]}
/>
{hasStarted && !hasErrored ? ( {hasStarted && !hasErrored ? (
<div className="flex flex-col items-center gap-y-2 w-full text-primary-1"> <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
@ -285,7 +285,7 @@ const UploadFileItem = ({
failedState?: FailedUppyFile<Record<string, any>, Record<string, any>>; failedState?: FailedUppyFile<Record<string, any>, Record<string, any>>;
onRemove: (id: string) => void; onRemove: (id: string) => void;
}) => { }) => {
console.log({file: file.progress}) console.log({ file: file.progress });
return ( return (
<div className="flex flex-col w-full py-4 px-2 bg-primary-dark"> <div className="flex flex-col w-full py-4 px-2 bg-primary-dark">
<div <div
@ -350,7 +350,9 @@ const UploadFileItem = ({
</div> </div>
) : null} ) : null}
{file.progress?.preprocess ? <p className="text-sm text-primary-2 ml-2">Processing...</p> : null} {file.progress?.preprocess ? (
<p className="text-sm text-primary-2 ml-2">Processing...</p>
) : null}
{file.progress?.uploadStarted && !file.progress.uploadComplete ? ( {file.progress?.uploadStarted && !file.progress.uploadComplete ? (
<Progress max={100} value={file.progress.percentage} className="mt-2" /> <Progress max={100} value={file.progress.percentage} className="mt-2" />
) : null} ) : null}

View File

@ -31,6 +31,7 @@ export type Identity = {
firstName: string; firstName: string;
lastName: string; lastName: string;
email: string; email: string;
verified: boolean;
} }
export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes { export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes {
@ -197,6 +198,7 @@ export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
firstName: acct.first_name, firstName: acct.first_name,
lastName: acct.last_name, lastName: acct.last_name,
email: acct.email, email: acct.email,
verified: acct.verified,
}; };
}, },
}; };

View File

@ -32,7 +32,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<Meta /> <Meta />
<Links /> <Links />
</head> </head>
<body> <body className="max-h-screen">
{children} {children}
<ScrollRestoration /> <ScrollRestoration />
<Scripts /> <Scripts />