diff --git a/app/components/management-card.tsx b/app/components/management-card.tsx index 080cbc0..b063e5a 100644 --- a/app/components/management-card.tsx +++ b/app/components/management-card.tsx @@ -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 (
- + {!button + ? + : button + } +
); diff --git a/app/routes/account.tsx b/app/routes/account.tsx index c1d592f..5522249 100644 --- a/app/routes/account.tsx +++ b/app/routes/account.tsx @@ -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,149 +54,162 @@ export default function MyAccount() { return (

My Account

- } - button={ - - } - /> -

Account Management

-
- - setModal({ ...openModal, changeAvatar: true })} - /> - - - Email Address - - {identity?.email} - - - - - - - Account Type - - Lite Premium Account - - - - - - -
-

Security

-
- - Password - - - - - - - - - Two-Factor Authentication - - Improve security by enabling 2FA. - - - - - -
-

More

-
- - Invite a Friend - - Get 1 GB per friend invited for free (max 5 GB). - - - - - - - Read our Resources - - Navigate helpful articles or get assistance. - - - - - - - Delete Account - - Once initiated, this action cannot be undone. - - - - - -
- {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */} - - setModal({ ...openModal, changeAvatar: value }) - } - /> - - setModal({ ...openModal, changeEmail: value }) - } - currentValue={identity?.email || ""} - /> - - setModal({ ...openModal, changePassword: value }) - } - /> - - setModal({ ...openModal, setupTwoFactor: value }) - } - /> + } + /> +

Account Management

+
+ + + + + } + /> + + + Email Address + + {identity?.email} + + + + + + + + + Account Type + + Lite Premium Account + + + + + + +
+

Security

+
+ + Password + + + + + + + + + + + Two-Factor Authentication + + Improve security by enabling 2FA. + + + + + + + +
+

More

+
+ + Invite a Friend + + Get 1 GB per friend invited for free (max 5 GB). + + + + + + + Read our Resources + + Navigate helpful articles or get assistance. + + + + + + + Delete Account + + Once initiated, this action cannot be undone. + + + + + +
+ + {openModal.changeAvatar && } + {openModal.changeEmail && ( + + )} + {openModal.changePassword && } + {openModal.setupTwoFactor && } + + ); } @@ -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,38 +257,36 @@ const ChangeEmailForm = ({ }); return ( - - - - Change Email -
- {currentValue} -
-
- - - - - -
- - + <> + + Change Email + +
+ {currentValue} +
+
+ + + + + + ); }; @@ -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,101 +328,78 @@ const ChangePasswordForm = ({ }); return ( - - - - Change Password -
- - - - - -
- - + <> + + Change Password + +
+ + + + + + ); }; -const SetupTwoFactorDialog = ({ - open, - setOpen, -}: { - open: boolean; - setOpen: (value: boolean) => void; -}) => { +const SetupTwoFactorDialog = () => { const [continueModal, setContinue] = useState(false); return ( - { - setOpen(value); - setContinue(false); - }}> - - - Setup Two-Factor -
- {continueModal ? ( - <> -

- Enter the authentication code generated in your two-factor - application to confirm your setup. -

- - - - ) : ( - <> -
- QR -
-

- Don’t have access to scan? Use this code instead. -

-
- HHH7MFGAMPJ44OM44FGAMPJ44O232 -
- - - )} -
- - - + <> + + Setup Two-Factor + +
+ {continueModal ? ( + <> +

+ Enter the authentication code generated in your two-factor + application to confirm your setup. +

+ + + + ) : ( + <> +
+ QR +
+

+ Don’t have access to scan? Use this code instead. +

+
+ HHH7MFGAMPJ44OM44FGAMPJ44O232 +
+ + + )} +
+ ); }; -const ChangeAvatarForm = ({ - open, - setOpen, -}: { - open: boolean; - setOpen: (value: boolean) => void; -}) => { +const ChangeAvatarForm = () => { const { getRootProps, getInputProps, @@ -437,76 +419,80 @@ 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 ( - { - setOpen(value); - }}> - - - Edit Avatar - - {!hasStarted && !getFiles().length ? ( -
- - -

Drag & Drop Files or Browse

-
- ) : null} + <> + + Edit Avatar + + {!hasStarted && !getFiles().length ? ( +
+ + +

Drag & Drop Files or Browse

+
+ ) : null} - {(!hasStarted && getFiles().length > 0) && ( -
- - New Avatar Preview -
- )} - - {hasStarted ? ( -
- - {isCompleted - ? "Upload completed" - : `0% completed`} -
- ) : null} - - {isUploading ? ( - - - - ) : null} - - {isCompleted ? ( - - - - ) : null} - - {!hasStarted && !isCompleted && !isUploading ? ( - - ) : null} - - + New Avatar Preview + + )} + + {hasStarted ? ( +
+ + {isCompleted ? "Upload completed" : `0% completed`} +
+ ) : null} + + {isUploading ? ( + + + + ) : null} + + {isCompleted ? ( + + + + ) : null} + + {!hasStarted && !isCompleted && !isUploading ? ( + + ) : null} + ); };