import { getFormProps, useForm } from "@conform-to/react"; import { getZodConstraint, parseWithZod } from "@conform-to/zod"; import { Authenticated, 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, CloudIcon, CrownIcon } from "~/components/icons"; 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"; import {UpdatePasswordFormRequest} from "~/data/auth-provider.js"; export default function MyAccount() { const { data: identity } = useGetIdentity<{ email: string }>(); const [openModal, setModal] = useState({ changeEmail: false, changePassword: false, setupTwoFactor: false, }); return (

My Account

} 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.
{/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */} 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: "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 = ({ open, setOpen, }: { open: boolean; setOpen: (value: boolean) => void; }) => { 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 = ({ 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 PasswordDots = ({ className }: { className?: string }) => { return ( ); };