import { getFormProps, useForm } from "@conform-to/react"; import { getZodConstraint, parseWithZod } from "@conform-to/zod"; import { DialogClose } from "@radix-ui/react-dialog"; import { Cross2Icon } from "@radix-ui/react-icons"; import { BaseKey, useGetIdentity, useUpdate, useUpdatePassword, } from "@refinedev/core"; import { 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 { useUppy } from "~/components/lib/uppy"; import { ManagementCard, ManagementCardAvatar, ManagementCardContent, ManagementCardFooter, ManagementCardTitle, } from "~/components/management-card"; import { Button } from "~/components/ui/button"; import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "~/components/ui/dialog"; import { Input } from "~/components/ui/input"; import { UsageCard } from "~/components/usage-card"; import QRImg from "~/images/QR.png"; export default function MyAccount() { const { data: identity } = useGetIdentity<{ email: string }>(); const [openModal, setModal] = useState({ changeEmail: false, changePassword: false, setupTwoFactor: false, changeAvatar: false, }); 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 }) } />
); } const ChangeEmailSchema = z .object({ email: z.string().email(), password: z.string(), retypePassword: z.string(), }) .superRefine((data, ctx) => { if (data.password !== data.retypePassword) { return ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["retypePassword"], message: "Passwords do not match", }); } return true; }); const ChangeEmailForm = ({ open, setOpen, currentValue, }: { open: boolean; setOpen: (value: boolean) => void; currentValue: string; }) => { const { data: identity } = useGetIdentity<{ id: BaseKey }>(); const { mutate: updateEmail } = useUpdate(); const [form, fields] = useForm({ id: "login", constraint: getZodConstraint(ChangeEmailSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: ChangeEmailSchema }); }, shouldValidate: "onSubmit", onSubmit(e) { e.preventDefault(); const data = Object.fromEntries(new FormData(e.currentTarget).entries()); console.log(identity); updateEmail({ resource: "users", id: identity?.id || "", values: { email: data.email.toString(), }, }); }, }); return ( Change Email
{currentValue}
); }; const ChangePasswordSchema = z .object({ currentPassword: z.string().email(), newPassword: z.string(), retypePassword: z.string(), }) .superRefine((data, ctx) => { if (data.newPassword !== data.retypePassword) { return ctx.addIssue({ code: z.ZodIssueCode.custom, path: ["retypePassword"], message: "Passwords do not match", }); } return true; }); const ChangePasswordForm = ({ open, setOpen, }: { open: boolean; setOpen: (value: boolean) => void; }) => { const { mutate: updatePassword } = useUpdatePassword<{ password: string }>(); const [form, fields] = useForm({ id: "login", constraint: getZodConstraint(ChangeEmailSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: ChangePasswordSchema }); }, shouldValidate: "onSubmit", onSubmit(e) { e.preventDefault(); const data = Object.fromEntries(new FormData(e.currentTarget).entries()); updatePassword({ password: data.newPassword.toString(), }); }, }); return ( Change Password
); }; const SetupTwoFactorDialog = ({ open, setOpen, }: { open: boolean; setOpen: (value: boolean) => void; }) => { 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
)}
); }; const ChangeAvatarForm = ({ open, setOpen, }: { open: boolean; setOpen: (value: boolean) => void; }) => { const { getRootProps, getInputProps, getFiles, upload, state, removeFile, cancelAll, } = useUppy({ uploader: "tus", endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT, }); console.log({ state, files: getFiles() }); const isUploading = state === "uploading"; const isCompleted = state === "completed"; const hasStarted = state !== "idle" && state !== "initializing"; return ( { setOpen(value); }}> 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}
); }; const PasswordDots = ({ className }: { className?: string }) => { return ( ); };