fix: Fixed Dialog not reseting state
This commit is contained in:
parent
34e9009e96
commit
d59130930f
GPG Key ID:
53133EB28EB7E801
|
|
@ -3,17 +3,21 @@ import { Avatar } from "./ui/avatar";
|
|||
import { Button } from "./ui/button";
|
||||
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 (
|
||||
<div className="flex justify-center">
|
||||
<div className="relative w-fit h-fit">
|
||||
<Avatar className="border-2 border-ring h-28 w-28" />
|
||||
<Button
|
||||
{!button
|
||||
? <Button
|
||||
onClick={onClick}
|
||||
variant="outline"
|
||||
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>
|
||||
: button
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,11 +8,18 @@ import {
|
|||
useUpdate,
|
||||
useUpdatePassword,
|
||||
} from "@refinedev/core";
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { z } from "zod";
|
||||
import { Field } from "~/components/forms";
|
||||
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 {
|
||||
ManagementCard,
|
||||
|
|
@ -27,6 +34,7 @@ import {
|
|||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Input } from "~/components/ui/input";
|
||||
import { UsageCard } from "~/components/usage-card";
|
||||
|
|
@ -46,6 +54,17 @@ export default function MyAccount() {
|
|||
return (
|
||||
<GeneralLayout>
|
||||
<h1 className="text-lg font-bold mb-4">My Account</h1>
|
||||
<Dialog
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setModal({
|
||||
changeEmail: false,
|
||||
changePassword: false,
|
||||
setupTwoFactor: false,
|
||||
changeAvatar: false,
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<UsageCard
|
||||
label="Usage"
|
||||
currentUsage={2}
|
||||
|
|
@ -62,7 +81,16 @@ export default function MyAccount() {
|
|||
<div className="grid grid-cols-3 gap-x-8">
|
||||
<ManagementCard>
|
||||
<ManagementCardAvatar
|
||||
button={
|
||||
<DialogTrigger className="absolute bottom-0 right-0 z-50">
|
||||
<Button
|
||||
onClick={() => setModal({ ...openModal, changeAvatar: true })}
|
||||
variant="outline"
|
||||
className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
|
||||
<EditIcon />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
}
|
||||
/>
|
||||
</ManagementCard>
|
||||
<ManagementCard>
|
||||
|
|
@ -71,12 +99,14 @@ export default function MyAccount() {
|
|||
{identity?.email}
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, changeEmail: true })}>
|
||||
<AddIcon />
|
||||
Change Email Address
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
<ManagementCard>
|
||||
|
|
@ -101,12 +131,16 @@ export default function MyAccount() {
|
|||
<PasswordDots className="mt-6" />
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, changePassword: true })}>
|
||||
onClick={() =>
|
||||
setModal({ ...openModal, changePassword: true })
|
||||
}>
|
||||
<AddIcon />
|
||||
Change Password
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
<ManagementCard>
|
||||
|
|
@ -115,12 +149,16 @@ export default function MyAccount() {
|
|||
Improve security by enabling 2FA.
|
||||
</ManagementCardContent>
|
||||
<ManagementCardFooter>
|
||||
<DialogTrigger>
|
||||
<Button
|
||||
className="h-12 gap-x-2"
|
||||
onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
|
||||
onClick={() =>
|
||||
setModal({ ...openModal, setupTwoFactor: true })
|
||||
}>
|
||||
<AddIcon />
|
||||
Enable Two-Factor Authorization
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
</div>
|
||||
|
|
@ -163,32 +201,15 @@ export default function MyAccount() {
|
|||
</ManagementCardFooter>
|
||||
</ManagementCard>
|
||||
</div>
|
||||
{/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
|
||||
<ChangeAvatarForm
|
||||
open={openModal.changeAvatar}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, changeAvatar: value })
|
||||
}
|
||||
/>
|
||||
<ChangeEmailForm
|
||||
open={openModal.changeEmail}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, changeEmail: value })
|
||||
}
|
||||
currentValue={identity?.email || ""}
|
||||
/>
|
||||
<ChangePasswordForm
|
||||
open={openModal.changePassword}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, changePassword: value })
|
||||
}
|
||||
/>
|
||||
<SetupTwoFactorDialog
|
||||
open={openModal.setupTwoFactor}
|
||||
setOpen={(value: boolean) =>
|
||||
setModal({ ...openModal, setupTwoFactor: value })
|
||||
}
|
||||
/>
|
||||
<DialogContent>
|
||||
{openModal.changeAvatar && <ChangeAvatarForm />}
|
||||
{openModal.changeEmail && (
|
||||
<ChangeEmailForm currentValue={identity?.email || ""} />
|
||||
)}
|
||||
{openModal.changePassword && <ChangePasswordForm />}
|
||||
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</GeneralLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -210,15 +231,7 @@ const ChangeEmailSchema = z
|
|||
return true;
|
||||
});
|
||||
|
||||
const ChangeEmailForm = ({
|
||||
open,
|
||||
setOpen,
|
||||
currentValue,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
currentValue: string;
|
||||
}) => {
|
||||
const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
|
||||
const { data: identity } = useGetIdentity<{ id: BaseKey }>();
|
||||
const { mutate: updateEmail } = useUpdate();
|
||||
const [form, fields] = useForm({
|
||||
|
|
@ -244,10 +257,10 @@ const ChangeEmailForm = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="p-8" forceMount>
|
||||
<>
|
||||
<DialogHeader>
|
||||
<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">
|
||||
{currentValue}
|
||||
</div>
|
||||
|
|
@ -273,9 +286,7 @@ const ChangeEmailForm = ({
|
|||
/>
|
||||
<Button className="w-full h-14">Change Email Address</Button>
|
||||
</form>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -296,13 +307,7 @@ const ChangePasswordSchema = z
|
|||
return true;
|
||||
});
|
||||
|
||||
const ChangePasswordForm = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}) => {
|
||||
const ChangePasswordForm = () => {
|
||||
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
|
|
@ -323,10 +328,10 @@ const ChangePasswordForm = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="p-8">
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="mb-8">Change Password</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form {...getFormProps(form)}>
|
||||
<Field
|
||||
inputProps={{
|
||||
|
|
@ -351,31 +356,18 @@ const ChangePasswordForm = ({
|
|||
/>
|
||||
<Button className="w-full h-14">Change Password</Button>
|
||||
</form>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const SetupTwoFactorDialog = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}) => {
|
||||
const SetupTwoFactorDialog = () => {
|
||||
const [continueModal, setContinue] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(value) => {
|
||||
setOpen(value);
|
||||
setContinue(false);
|
||||
}}>
|
||||
<DialogContent className="p-8">
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex flex-col gap-y-6">
|
||||
{continueModal ? (
|
||||
<>
|
||||
|
|
@ -397,27 +389,17 @@ const SetupTwoFactorDialog = ({
|
|||
<div className="p-4 border text-primary-2 text-center font-bold">
|
||||
HHH7MFGAMPJ44OM44FGAMPJ44O232
|
||||
</div>
|
||||
<Button
|
||||
className="w-full h-14"
|
||||
onClick={() => setContinue(true)}>
|
||||
<Button className="w-full h-14" onClick={() => setContinue(true)}>
|
||||
Continue
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const ChangeAvatarForm = ({
|
||||
open,
|
||||
setOpen,
|
||||
}: {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}) => {
|
||||
const ChangeAvatarForm = () => {
|
||||
const {
|
||||
getRootProps,
|
||||
getInputProps,
|
||||
|
|
@ -437,13 +419,16 @@ const ChangeAvatarForm = ({
|
|||
const isCompleted = state === "completed";
|
||||
const hasStarted = state !== "idle" && state !== "initializing";
|
||||
|
||||
const file = getFiles()?.[0];
|
||||
|
||||
const imagePreview = useMemo(() => {
|
||||
if (file) {
|
||||
return URL.createObjectURL(file.data);
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(value) => {
|
||||
setOpen(value);
|
||||
}}>
|
||||
<DialogContent className="p-8">
|
||||
<>
|
||||
<DialogHeader className="mb-6">
|
||||
<DialogTitle>Edit Avatar</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
|
@ -464,23 +449,25 @@ const ChangeAvatarForm = ({
|
|||
</div>
|
||||
) : null}
|
||||
|
||||
{(!hasStarted && getFiles().length > 0) && (
|
||||
{!hasStarted && file && (
|
||||
<div className="border border-border rounded p-4 bg-primary-dark relative">
|
||||
<Button
|
||||
className="absolute top-4 right-4 rounded-full aspect-square bg-primary-dark hover:bg-primary p-2 text-sm"
|
||||
onClick={() => removeFile(getFiles()[0].id)}>
|
||||
<Cross2Icon />
|
||||
className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
|
||||
onClick={() => removeFile(file?.id)}>
|
||||
<Cross2Icon className="size-4" />
|
||||
</Button>
|
||||
<img className="w-full h-48" src={URL.createObjectURL(getFiles()[0].data)} alt="New Avatar Preview" />
|
||||
<img
|
||||
className="w-full h-48 object-contain"
|
||||
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`}
|
||||
{isCompleted ? "Upload completed" : `0% completed`}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
|
|
@ -505,8 +492,7 @@ const ChangeAvatarForm = ({
|
|||
Upload
|
||||
</Button>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue