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 { Authenticated, type BaseKey, useGetIdentity, useUpdate, useUpdatePassword, } from "@refinedev/core"; 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, EditIcon, } 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, DialogTrigger, } from "~/components/ui/dialog"; import { Input } from "~/components/ui/input"; import { UsageCard } from "~/components/usage-card"; import QRImg from "~/images/QR.png"; import type {UpdatePasswordFormRequest} from "~/data/auth-provider"; 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

{ if (!open) { setModal({ changeEmail: false, changePassword: false, setupTwoFactor: false, changeAvatar: false, }); } }}> } button={ } />

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 && }
); } 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 = ({ currentValue }: { 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: "account", id: "", values: { email: data.email.toString(), password: data.password.toString(), }, }); }, }); return ( <> Change Email
{currentValue}
); }; const ChangePasswordSchema = z .object({ currentPassword: z.string(), 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 = () => { const { mutate: updatePassword } = useUpdatePassword(); const [form, fields] = useForm({ id: "login", constraint: getZodConstraint(ChangePasswordSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: ChangePasswordSchema }); }, shouldValidate: "onSubmit", onSubmit(e) { e.preventDefault(); const data = Object.fromEntries(new FormData(e.currentTarget).entries()); updatePassword({ currentPassword: data.currentPassword.toString(), password: data.newPassword.toString(), }); }, }); return ( <> Change Password
); }; const SetupTwoFactorDialog = () => { const [continueModal, setContinue] = useState(false); return ( <> 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 = () => { const { getRootProps, getInputProps, getFiles, upload, state, removeFile, cancelAll, } = useUppy(); console.log({ state, files: getFiles() }); const isUploading = state === "uploading"; 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 ( <> Edit Avatar {!hasStarted && !getFiles().length ? (

Drag & Drop Files or Browse

) : null} {!hasStarted && file && (
New Avatar Preview
)} {hasStarted ? (
{isCompleted ? "Upload completed" : "0% completed"}
) : null} {isUploading ? ( ) : null} {isCompleted ? ( ) : null} {!hasStarted && !isCompleted && !isUploading ? ( ) : null} ); }; const PasswordDots = ({ className }: { className?: string }) => { return ( ); };