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

fix: Fixed Dialog not reseting state

This commit is contained in:
Tania Gutierrez 2024-03-19 14:13:37 -04:00
parent 34e9009e96
commit d59130930f
Signed by: riobuenoDevelops
GPG Key ID: 53133EB28EB7E801
2 changed files with 340 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/management-card.tsx
View File

@ -3,17 +3,21 @@ import { Avatar } from "./ui/avatar";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { EditIcon, FingerPrintIcon } from "./icons"; import { EditIcon, FingerPrintIcon } from "./icons";
const ManagementCardAvatar = ({ src, onClick }: { src?: string; onClick?: () => void }) => { const ManagementCardAvatar = ({ src, button, onClick }: { src?: string; button?: React.ReactNode; onClick?: () => void }) => {
return ( return (
<div className="flex justify-center"> <div className="flex justify-center">
<div className="relative w-fit h-fit"> <div className="relative w-fit h-fit">
<Avatar className="border-2 border-ring h-28 w-28" /> <Avatar className="border-2 border-ring h-28 w-28" />
<Button {!button
onClick={onClick} ? <Button
variant="outline" onClick={onClick}
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"> variant="outline"
<EditIcon /> 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">
</Button> <EditIcon />
</Button>
: button
}
</div> </div>
</div> </div>
); );

672
app/routes/account.tsx
View File

@ -8,11 +8,18 @@ import {
useUpdate, useUpdate,
useUpdatePassword, useUpdatePassword,
} from "@refinedev/core"; } from "@refinedev/core";
import { useState } from "react"; import { useMemo, useState } from "react";
import { z } from "zod"; import { z } from "zod";
import { Field } from "~/components/forms"; import { Field } from "~/components/forms";
import { GeneralLayout } from "~/components/general-layout"; import { GeneralLayout } from "~/components/general-layout";
import { AddIcon, CloudCheckIcon, CloudIcon, CloudUploadIcon, CrownIcon, TrashIcon } from "~/components/icons"; import {
AddIcon,
CloudCheckIcon,
CloudIcon,
CloudUploadIcon,
CrownIcon,
EditIcon,
} from "~/components/icons";
import { useUppy } from "~/components/lib/uppy"; import { useUppy } from "~/components/lib/uppy";
import { import {
ManagementCard, ManagementCard,
@ -27,6 +34,7 @@ import {
DialogContent, DialogContent,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog"; } from "~/components/ui/dialog";
import { Input } from "~/components/ui/input"; import { Input } from "~/components/ui/input";
import { UsageCard } from "~/components/usage-card"; import { UsageCard } from "~/components/usage-card";
@ -46,149 +54,162 @@ export default function MyAccount() {
return ( return (
<GeneralLayout> <GeneralLayout>
<h1 className="text-lg font-bold mb-4">My Account</h1> <h1 className="text-lg font-bold mb-4">My Account</h1>
<UsageCard <Dialog
label="Usage" onOpenChange={(open) => {
currentUsage={2} if (!open) {
monthlyUsage={10} setModal({
icon={<CloudIcon className="text-ring" />} changeEmail: false,
button={ changePassword: false,
<Button variant="accent" className="gap-x-2 h-12"> setupTwoFactor: false,
<AddIcon /> changeAvatar: false,
Upgrade to Premium });
</Button> }
} }}>
/> <UsageCard
<h2 className="font-bold my-8">Account Management</h2> label="Usage"
<div className="grid grid-cols-3 gap-x-8"> currentUsage={2}
<ManagementCard> monthlyUsage={10}
<ManagementCardAvatar icon={<CloudIcon className="text-ring" />}
onClick={() => setModal({ ...openModal, changeAvatar: true })} button={
/> <Button variant="accent" className="gap-x-2 h-12">
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Email Address</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold">
{identity?.email}
</ManagementCardContent>
<ManagementCardFooter>
<Button
className="h-12 gap-x-2"
onClick={() => setModal({ ...openModal, changeEmail: true })}>
<AddIcon />
Change Email Address
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Account Type</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold flex gap-x-2">
Lite Premium Account
<CrownIcon />
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon /> <AddIcon />
Upgrade to Premium Upgrade to Premium
</Button> </Button>
</ManagementCardFooter> }
</ManagementCard> />
</div> <h2 className="font-bold my-8">Account Management</h2>
<h2 className="font-bold my-8">Security</h2> <div className="grid grid-cols-3 gap-x-8">
<div className="grid grid-cols-3 gap-x-8"> <ManagementCard>
<ManagementCard> <ManagementCardAvatar
<ManagementCardTitle>Password</ManagementCardTitle> button={
<ManagementCardContent> <DialogTrigger className="absolute bottom-0 right-0 z-50">
<PasswordDots className="mt-6" /> <Button
</ManagementCardContent> onClick={() => setModal({ ...openModal, changeAvatar: true })}
<ManagementCardFooter> variant="outline"
<Button className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
className="h-12 gap-x-2" <EditIcon />
onClick={() => setModal({ ...openModal, changePassword: true })}> </Button>
<AddIcon /> </DialogTrigger>
Change Password }
</Button> />
</ManagementCardFooter> </ManagementCard>
</ManagementCard> <ManagementCard>
<ManagementCard> <ManagementCardTitle>Email Address</ManagementCardTitle>
<ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle> <ManagementCardContent className="text-ring font-semibold">
<ManagementCardContent> {identity?.email}
Improve security by enabling 2FA. </ManagementCardContent>
</ManagementCardContent> <ManagementCardFooter>
<ManagementCardFooter> <DialogTrigger>
<Button <Button
className="h-12 gap-x-2" className="h-12 gap-x-2"
onClick={() => setModal({ ...openModal, setupTwoFactor: true })}> onClick={() => setModal({ ...openModal, changeEmail: true })}>
<AddIcon /> <AddIcon />
Enable Two-Factor Authorization Change Email Address
</Button> </Button>
</ManagementCardFooter> </DialogTrigger>
</ManagementCard> </ManagementCardFooter>
</div> </ManagementCard>
<h2 className="font-bold my-8">More</h2> <ManagementCard>
<div className="grid grid-cols-3 gap-x-8"> <ManagementCardTitle>Account Type</ManagementCardTitle>
<ManagementCard variant="accent"> <ManagementCardContent className="text-ring font-semibold flex gap-x-2">
<ManagementCardTitle>Invite a Friend</ManagementCardTitle> Lite Premium Account
<ManagementCardContent> <CrownIcon />
Get 1 GB per friend invited for free (max 5 GB). </ManagementCardContent>
</ManagementCardContent> <ManagementCardFooter>
<ManagementCardFooter> <Button className="h-12 gap-x-2">
<Button variant="accent" className="h-12 gap-x-2"> <AddIcon />
<AddIcon /> Upgrade to Premium
Send Invitation </Button>
</Button> </ManagementCardFooter>
</ManagementCardFooter> </ManagementCard>
</ManagementCard> </div>
<ManagementCard> <h2 className="font-bold my-8">Security</h2>
<ManagementCardTitle>Read our Resources</ManagementCardTitle> <div className="grid grid-cols-3 gap-x-8">
<ManagementCardContent> <ManagementCard>
Navigate helpful articles or get assistance. <ManagementCardTitle>Password</ManagementCardTitle>
</ManagementCardContent> <ManagementCardContent>
<ManagementCardFooter> <PasswordDots className="mt-6" />
<Button className="h-12 gap-x-2"> </ManagementCardContent>
<AddIcon /> <ManagementCardFooter>
Open Support Centre <DialogTrigger>
</Button> <Button
</ManagementCardFooter> className="h-12 gap-x-2"
</ManagementCard> onClick={() =>
<ManagementCard> setModal({ ...openModal, changePassword: true })
<ManagementCardTitle>Delete Account</ManagementCardTitle> }>
<ManagementCardContent> <AddIcon />
Once initiated, this action cannot be undone. Change Password
</ManagementCardContent> </Button>
<ManagementCardFooter> </DialogTrigger>
<Button className="h-12 gap-x-2" variant="destructive"> </ManagementCardFooter>
<AddIcon /> </ManagementCard>
Delete my Account <ManagementCard>
</Button> <ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
</ManagementCardFooter> <ManagementCardContent>
</ManagementCard> Improve security by enabling 2FA.
</div> </ManagementCardContent>
{/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */} <ManagementCardFooter>
<ChangeAvatarForm <DialogTrigger>
open={openModal.changeAvatar} <Button
setOpen={(value: boolean) => className="h-12 gap-x-2"
setModal({ ...openModal, changeAvatar: value }) onClick={() =>
} setModal({ ...openModal, setupTwoFactor: true })
/> }>
<ChangeEmailForm <AddIcon />
open={openModal.changeEmail} Enable Two-Factor Authorization
setOpen={(value: boolean) => </Button>
setModal({ ...openModal, changeEmail: value }) </DialogTrigger>
} </ManagementCardFooter>
currentValue={identity?.email || ""} </ManagementCard>
/> </div>
<ChangePasswordForm <h2 className="font-bold my-8">More</h2>
open={openModal.changePassword} <div className="grid grid-cols-3 gap-x-8">
setOpen={(value: boolean) => <ManagementCard variant="accent">
setModal({ ...openModal, changePassword: value }) <ManagementCardTitle>Invite a Friend</ManagementCardTitle>
} <ManagementCardContent>
/> Get 1 GB per friend invited for free (max 5 GB).
<SetupTwoFactorDialog </ManagementCardContent>
open={openModal.setupTwoFactor} <ManagementCardFooter>
setOpen={(value: boolean) => <Button variant="accent" className="h-12 gap-x-2">
setModal({ ...openModal, setupTwoFactor: value }) <AddIcon />
} Send Invitation
/> </Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Read our Resources</ManagementCardTitle>
<ManagementCardContent>
Navigate helpful articles or get assistance.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon />
Open Support Centre
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Delete Account</ManagementCardTitle>
<ManagementCardContent>
Once initiated, this action cannot be undone.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2" variant="destructive">
<AddIcon />
Delete my Account
</Button>
</ManagementCardFooter>
</ManagementCard>
</div>
<DialogContent>
{openModal.changeAvatar && <ChangeAvatarForm />}
{openModal.changeEmail && (
<ChangeEmailForm currentValue={identity?.email || ""} />
)}
{openModal.changePassword && <ChangePasswordForm />}
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
</DialogContent>
</Dialog>
</GeneralLayout> </GeneralLayout>
); );
} }
@ -210,15 +231,7 @@ const ChangeEmailSchema = z
return true; return true;
}); });
const ChangeEmailForm = ({ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
open,
setOpen,
currentValue,
}: {
open: boolean;
setOpen: (value: boolean) => void;
currentValue: string;
}) => {
const { data: identity } = useGetIdentity<{ id: BaseKey }>(); const { data: identity } = useGetIdentity<{ id: BaseKey }>();
const { mutate: updateEmail } = useUpdate(); const { mutate: updateEmail } = useUpdate();
const [form, fields] = useForm({ const [form, fields] = useForm({
@ -244,38 +257,36 @@ const ChangeEmailForm = ({
}); });
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <>
<DialogContent className="p-8" forceMount> <DialogHeader>
<DialogHeader> <DialogTitle className="mb-8">Change Email</DialogTitle>
<DialogTitle className="mb-8">Change Email</DialogTitle> </DialogHeader>
<div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1"> <div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
{currentValue} {currentValue}
</div> </div>
<form {...getFormProps(form)}> <form {...getFormProps(form)}>
<Field <Field
className="mt-8" className="mt-8"
inputProps={{ name: fields.email.name }} inputProps={{ name: fields.email.name }}
labelProps={{ children: "New Email Address" }} labelProps={{ children: "New Email Address" }}
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}
/> />
<Field <Field
inputProps={{ inputProps={{
name: fields.retypePassword.name, name: fields.retypePassword.name,
type: "password", type: "password",
}} }}
labelProps={{ children: "Retype Password" }} labelProps={{ children: "Retype Password" }}
errors={fields.retypePassword.errors} errors={fields.retypePassword.errors}
/> />
<Button className="w-full h-14">Change Email Address</Button> <Button className="w-full h-14">Change Email Address</Button>
</form> </form>
</DialogHeader> </>
</DialogContent>
</Dialog>
); );
}; };
@ -296,13 +307,7 @@ const ChangePasswordSchema = z
return true; return true;
}); });
const ChangePasswordForm = ({ const ChangePasswordForm = () => {
open,
setOpen,
}: {
open: boolean;
setOpen: (value: boolean) => void;
}) => {
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>(); const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
const [form, fields] = useForm({ const [form, fields] = useForm({
id: "login", id: "login",
@ -323,101 +328,78 @@ const ChangePasswordForm = ({
}); });
return ( return (
<Dialog open={open} onOpenChange={setOpen}> <>
<DialogContent className="p-8"> <DialogHeader>
<DialogHeader> <DialogTitle className="mb-8">Change Password</DialogTitle>
<DialogTitle className="mb-8">Change Password</DialogTitle> </DialogHeader>
<form {...getFormProps(form)}> <form {...getFormProps(form)}>
<Field <Field
inputProps={{ inputProps={{
name: fields.currentPassword.name, name: fields.currentPassword.name,
type: "password", type: "password",
}} }}
labelProps={{ children: "Current Password" }} labelProps={{ children: "Current Password" }}
errors={fields.currentPassword.errors} errors={fields.currentPassword.errors}
/> />
<Field <Field
inputProps={{ name: fields.newPassword.name, type: "password" }} inputProps={{ name: fields.newPassword.name, type: "password" }}
labelProps={{ children: "New Password" }} labelProps={{ children: "New Password" }}
errors={fields.newPassword.errors} errors={fields.newPassword.errors}
/> />
<Field <Field
inputProps={{ inputProps={{
name: fields.retypePassword.name, name: fields.retypePassword.name,
type: "password", type: "password",
}} }}
labelProps={{ children: "Retype Password" }} labelProps={{ children: "Retype Password" }}
errors={fields.retypePassword.errors} errors={fields.retypePassword.errors}
/> />
<Button className="w-full h-14">Change Password</Button> <Button className="w-full h-14">Change Password</Button>
</form> </form>
</DialogHeader> </>
</DialogContent>
</Dialog>
); );
}; };
const SetupTwoFactorDialog = ({ const SetupTwoFactorDialog = () => {
open,
setOpen,
}: {
open: boolean;
setOpen: (value: boolean) => void;
}) => {
const [continueModal, setContinue] = useState<boolean>(false); const [continueModal, setContinue] = useState<boolean>(false);
return ( return (
<Dialog <>
open={open} <DialogHeader>
onOpenChange={(value) => { <DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
setOpen(value); </DialogHeader>
setContinue(false); <div className="flex flex-col gap-y-6">
}}> {continueModal ? (
<DialogContent className="p-8"> <>
<DialogHeader> <p className="text-sm text-primary-2">
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle> Enter the authentication code generated in your two-factor
<div className="flex flex-col gap-y-6"> application to confirm your setup.
{continueModal ? ( </p>
<> <Input fullWidth className="text-center" />
<p className="text-sm text-primary-2"> <Button className="w-full h-14">Confirm</Button>
Enter the authentication code generated in your two-factor </>
application to confirm your setup. ) : (
</p> <>
<Input fullWidth className="text-center" /> <div className="p-6 flex justify-center border bg-secondary-2">
<Button className="w-full h-14">Confirm</Button> <img src={QRImg} alt="QR" className="h-36 w-36" />
</> </div>
) : ( <p className="font-semibold">
<> Don’t have access to scan? Use this code instead.
<div className="p-6 flex justify-center border bg-secondary-2"> </p>
<img src={QRImg} alt="QR" className="h-36 w-36" /> <div className="p-4 border text-primary-2 text-center font-bold">
</div> HHH7MFGAMPJ44OM44FGAMPJ44O232
<p className="font-semibold"> </div>
Don’t have access to scan? Use this code instead. <Button className="w-full h-14" onClick={() => setContinue(true)}>
</p> Continue
<div className="p-4 border text-primary-2 text-center font-bold"> </Button>
HHH7MFGAMPJ44OM44FGAMPJ44O232 </>
</div> )}
<Button </div>
className="w-full h-14" </>
onClick={() => setContinue(true)}>
Continue
</Button>
</>
)}
</div>
</DialogHeader>
</DialogContent>
</Dialog>
); );
}; };
const ChangeAvatarForm = ({ const ChangeAvatarForm = () => {
open,
setOpen,
}: {
open: boolean;
setOpen: (value: boolean) => void;
}) => {
const { const {
getRootProps, getRootProps,
getInputProps, getInputProps,
@ -437,76 +419,80 @@ const ChangeAvatarForm = ({
const isCompleted = state === "completed"; const isCompleted = state === "completed";
const hasStarted = state !== "idle" && state !== "initializing"; const hasStarted = state !== "idle" && state !== "initializing";
const file = getFiles()?.[0];
const imagePreview = useMemo(() => {
if (file) {
return URL.createObjectURL(file.data);
}
}, [file]);
return ( return (
<Dialog <>
open={open} <DialogHeader className="mb-6">
onOpenChange={(value) => { <DialogTitle>Edit Avatar</DialogTitle>
setOpen(value); </DialogHeader>
}}> {!hasStarted && !getFiles().length ? (
<DialogContent className="p-8"> <div
<DialogHeader className="mb-6"> {...getRootProps()}
<DialogTitle>Edit Avatar</DialogTitle> className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
</DialogHeader> <input
{!hasStarted && !getFiles().length ? ( hidden
<div aria-hidden
{...getRootProps()} name="uppyFiles[]"
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center"> key={new Date().toISOString()}
<input multiple
hidden {...getInputProps()}
aria-hidden />
name="uppyFiles[]" <CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
key={new Date().toISOString()} <p>Drag & Drop Files or Browse</p>
multiple </div>
{...getInputProps()} ) : null}
/>
<CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
<p>Drag & Drop Files or Browse</p>
</div>
) : null}
{(!hasStarted && getFiles().length > 0) && ( {!hasStarted && file && (
<div className="border border-border rounded p-4 bg-primary-dark relative"> <div className="border border-border rounded p-4 bg-primary-dark relative">
<Button <Button
className="absolute top-4 right-4 rounded-full aspect-square bg-primary-dark hover:bg-primary p-2 text-sm" className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
onClick={() => removeFile(getFiles()[0].id)}> onClick={() => removeFile(file?.id)}>
<Cross2Icon /> <Cross2Icon className="size-4" />
</Button>
<img className="w-full h-48" src={URL.createObjectURL(getFiles()[0].data)} alt="New Avatar Preview" />
</div>
)}
{hasStarted ? (
<div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
<CloudCheckIcon className="w-32 h-32" />
{isCompleted
? "Upload completed"
: `0% completed`}
</div>
) : null}
{isUploading ? (
<DialogClose asChild onClick={cancelAll}>
<Button size={"lg"} className="mt-6">
Cancel
</Button>
</DialogClose>
) : null}
{isCompleted ? (
<DialogClose asChild>
<Button size={"lg"} className="mt-6">
Close
</Button>
</DialogClose>
) : null}
{!hasStarted && !isCompleted && !isUploading ? (
<Button size={"lg"} className="mt-6" onClick={upload}>
Upload
</Button> </Button>
) : null} <img
</DialogContent> className="w-full h-48 object-contain"
</Dialog> src={imagePreview}
alt="New Avatar Preview"
/>
</div>
)}
{hasStarted ? (
<div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
<CloudCheckIcon className="w-32 h-32" />
{isCompleted ? "Upload completed" : `0% completed`}
</div>
) : null}
{isUploading ? (
<DialogClose asChild onClick={cancelAll}>
<Button size={"lg"} className="mt-6">
Cancel
</Button>
</DialogClose>
) : null}
{isCompleted ? (
<DialogClose asChild>
<Button size={"lg"} className="mt-6">
Close
</Button>
</DialogClose>
) : null}
{!hasStarted && !isCompleted && !isUploading ? (
<Button size={"lg"} className="mt-6" onClick={upload}>
Upload
</Button>
) : null}
</>
); );
}; };