LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

My Account Route #3

Merged
ditorodev merged 7 commits from riobuenoDevelops/my-account into develop 2024-03-14 15:43:54 +00:00
Conversation 0 Commits 7 Files Changed 12 +88 -75
2 changed files with 88 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 260b41b29b - Show all commits

112
app/components/general-layout.tsx
View File

@ -1,20 +1,20 @@
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 { Link, useLocation } from "@remix-run/react" import { Link, useLocation } from "@remix-run/react";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger DialogTrigger,
} from "~/components/ui/dialog" } from "~/components/ui/dialog";
import { useUppy } from "./lib/uppy" import { useUppy } from "./lib/uppy";
import type { UppyFile } from "@uppy/core" import type { UppyFile } from "@uppy/core";
import { Progress } from "~/components/ui/progress" import { Progress } from "~/components/ui/progress";
import { DialogClose } from "@radix-ui/react-dialog" import { DialogClose } from "@radix-ui/react-dialog";
import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons" import { ChevronDownIcon, TrashIcon } from "@radix-ui/react-icons";
import { import {
ClockIcon, ClockIcon,
DriveIcon, DriveIcon,
@ -23,11 +23,11 @@ import {
CloudCheckIcon, CloudCheckIcon,
BoxCheckedIcon, BoxCheckedIcon,
PageIcon, PageIcon,
ThemeIcon ThemeIcon,
} from "./icons" } from "./icons";
import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu" import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu";
import { Avatar } from "@radix-ui/react-avatar" import { Avatar } from "@radix-ui/react-avatar";
import { cn } from "~/utils" import { cn } from "~/utils";
export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => { export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
const location = useLocation(); const location = useLocation();
@ -40,7 +40,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<ul> <ul>
<li> <li>
<Link to="/dashboard"> <Link to="/dashboard">
<NavigationButton active={location.pathname.includes("dashboard")}> <NavigationButton
active={location.pathname.includes("dashboard")}>
<ClockIcon className="w-5 h-5 mr-2" /> <ClockIcon className="w-5 h-5 mr-2" />
Dashboard Dashboard
</NavigationButton> </NavigationButton>
@ -48,7 +49,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</li> </li>
<li> <li>
<Link to="/file-manager"> <Link to="/file-manager">
<NavigationButton active={location.pathname.includes("file-manager")}> <NavigationButton
active={location.pathname.includes("file-manager")}>
<DriveIcon className="w-5 h-5 mr-2" /> <DriveIcon className="w-5 h-5 mr-2" />
File Manager File Manager
</NavigationButton> </NavigationButton>
@ -56,7 +58,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</li> </li>
<li> <li>
<Link to="/account"> <Link to="/account">
<NavigationButton active={location.pathname.includes("account")}> <NavigationButton
active={location.pathname.includes("account")}>
<CircleLockIcon className="w-5 h-5 mr-2" /> <CircleLockIcon className="w-5 h-5 mr-2" />
Account Account
</NavigationButton> </NavigationButton>
@ -87,7 +90,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<Button variant="ghost" className="rounded-full w-fit"> <Button variant="ghost" className="rounded-full w-fit">
<ThemeIcon className="text-ring" /> <ThemeIcon className="text-ring" />
</Button> </Button>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger>
<Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold"> <Button className="border rounded-full h-auto p-2 gap-x-2 text-ring font-semibold">
@ -107,8 +110,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<Link to="https://discord.lumeweb.com"> <Link to="https://discord.lumeweb.com">
<Button <Button
variant={"link"} variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder" className="flex flex-row gap-x-2 text-input-placeholder">
>
<img <img
className="h-5" className="h-5"
src={discordLogoPng} src={discordLogoPng}
@ -122,8 +124,7 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
<Link to="https://lumeweb.com"> <Link to="https://lumeweb.com">
<Button <Button
variant={"link"} variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder" className="flex flex-row gap-x-2 text-input-placeholder">
>
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" /> <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
Connect with us Connect with us
</Button> </Button>
@ -133,8 +134,8 @@ export const GeneralLayout = ({ children }: React.PropsWithChildren<{}>) => {
</footer> </footer>
</div> </div>
</div> </div>
) );
} };
const UploadFileForm = () => { const UploadFileForm = () => {
const { const {
@ -144,17 +145,17 @@ const UploadFileForm = () => {
upload, upload,
state, state,
removeFile, removeFile,
cancelAll cancelAll,
} = useUppy({ } = useUppy({
uploader: "tus", uploader: "tus",
endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT,
}) });
console.log({ state, files: getFiles() }) console.log({ state, files: getFiles() });
const isUploading = state === "uploading" const isUploading = state === "uploading";
const isCompleted = state === "completed" const isCompleted = state === "completed";
const hasStarted = state !== "idle" && state !== "initializing" const hasStarted = state !== "idle" && state !== "initializing";
return ( return (
<> <>
@ -164,8 +165,7 @@ const UploadFileForm = () => {
{!hasStarted ? ( {!hasStarted ? (
<div <div
{...getRootProps()} {...getRootProps()}
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center" className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
>
<input <input
hidden hidden
aria-hidden aria-hidden
@ -185,7 +185,7 @@ const UploadFileForm = () => {
key={file.id} key={file.id}
file={file} file={file}
onRemove={(id) => { onRemove={(id) => {
removeFile(id) removeFile(id);
}} }}
/> />
))} ))}
@ -222,19 +222,19 @@ const UploadFileForm = () => {
</Button> </Button>
) : null} ) : null}
</> </>
) );
} };
function bytestoMegabytes(bytes: number) { function bytestoMegabytes(bytes: number) {
return bytes / 1024 / 1024 return bytes / 1024 / 1024;
} }
const UploadFileItem = ({ const UploadFileItem = ({
file, file,
onRemove onRemove,
}: { }: {
file: UppyFile file: UppyFile;
onRemove: (id: string) => void onRemove: (id: string) => void;
}) => { }) => {
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">
@ -258,8 +258,7 @@ const UploadFileItem = ({
size={"icon"} size={"icon"}
variant={"ghost"} variant={"ghost"}
className="!text-inherit" className="!text-inherit"
onClick={() => onRemove(file.id)} onClick={() => onRemove(file.id)}>
>
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</Button> </Button>
</div> </div>
@ -268,16 +267,21 @@ const UploadFileItem = ({
<Progress max={100} value={file.progress.percentage} className="mt-2" /> <Progress max={100} value={file.progress.percentage} className="mt-2" />
) : null} ) : null}
</div> </div>
) );
} };
const NavigationButton = ({ children, active }: React.PropsWithChildren<{ active?: boolean }>) => { const NavigationButton = ({
children,
active,
}: React.PropsWithChildren<{ active?: boolean }>) => {
return ( return (
<Button variant="ghost" className={cn( <Button
"justify-start h-14 w-full font-semibold", variant="ghost"
active && "bg-secondary-1 text-secondary-1-foreground" className={cn(
)}> "justify-start h-14 w-full font-semibold",
active && "bg-secondary-1 text-secondary-1-foreground",
)}>
{children} {children}
</Button> </Button>
) );
} };

51
app/routes/account.tsx
View File

@ -248,36 +248,45 @@ const SetupTwoFactorDialog = ({
open: boolean; open: boolean;
setOpen: (value: boolean) => void; setOpen: (value: boolean) => void;
}) => { }) => {
const [continueModal, setContinue] = useState<boolean>(false); const [continueModal, setContinue] = useState<boolean>(false);
return ( return (
<Dialog open={open} onOpenChange={(value) => { <Dialog
setOpen(value) open={open}
onOpenChange={(value) => {
setOpen(value);
setContinue(false); setContinue(false);
}}> }}>
<DialogContent className="p-8"> <DialogContent className="p-8">
<DialogHeader> <DialogHeader>
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle> <DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
<div className="flex flex-col gap-y-6"> <div className="flex flex-col gap-y-6">
{continueModal ? ( {continueModal ? (
<> <>
<p className="text-sm text-primary-2">Enter the authentication code generated in your two-factor application to confirm your setup.</p> <p className="text-sm text-primary-2">
<Input fullWidth className="text-center" /> Enter the authentication code generated in your two-factor
<Button className="w-full h-14">Confirm</Button> application to confirm your setup.
</> </p>
<Input fullWidth className="text-center" />
<Button className="w-full h-14">Confirm</Button>
</>
) : ( ) : (
<> <>
<div className="p-6 flex justify-center border bg-secondary-2"> <div className="p-6 flex justify-center border bg-secondary-2">
<img src={QRImg} alt="QR" className="h-36 w-36" /> <img src={QRImg} alt="QR" className="h-36 w-36" />
</div> </div>
<p className="font-semibold"> <p className="font-semibold">
Don’t have access to scan? Use this code instead. Don’t have access to scan? Use this code instead.
</p> </p>
<div className="p-4 border text-primary-2 text-center font-bold"> <div className="p-4 border text-primary-2 text-center font-bold">
HHH7MFGAMPJ44OM44FGAMPJ44O232 HHH7MFGAMPJ44OM44FGAMPJ44O232
</div> </div>
<Button className="w-full h-14" onClick={() => setContinue(true)}>Continue</Button> <Button
</> className="w-full h-14"
onClick={() => setContinue(true)}>
Continue
</Button>
</>
)} )}
</div> </div>
</DialogHeader> </DialogHeader>