import { getFormProps, useForm } from "@conform-to/react"; import { getZodConstraint, parseWithZod } from "@conform-to/zod"; 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"; export default function MyAccount() { const isLogged = true; if (!isLogged) { window.location.href = "/login"; } const [openModal, setModal] = useState({ changeEmail: false, changePassword: false, setupTwoFactor: false, }); return (

My Account

} button={ } />

Account Management

Email Address bsimpson@springfield.oh.gov.com Account Type Lite Premium Account

Security

Password Two-Factor Authentication Improve security by enabling 2FA. Backup Key Never share this code with anyone.

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="bsimpson@springfield.oh.gov.com" /> setModal({ ...openModal, changePassword: value }) } /> setModal({ ...openModal, setupTwoFactor: value }) } />
); } const ChangeEmailSchema = z.object({ email: z.string().email(), password: z.string(), retypePassword: z.string(), }); const ChangeEmailForm = ({ open, setOpen, currentValue, }: { open: boolean; setOpen: (value: boolean) => void; currentValue: string; }) => { const [form, fields] = useForm({ id: "login", constraint: getZodConstraint(ChangeEmailSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: ChangeEmailSchema }); }, shouldValidate: "onSubmit", }); return ( Change Email
{currentValue}
); }; const ChangePasswordSchema = z.object({ currentPassword: z.string().email(), newPassword: z.string(), retypePassword: z.string(), }); const ChangePasswordForm = ({ open, setOpen, }: { open: boolean; setOpen: (value: boolean) => void; }) => { const [form, fields] = useForm({ id: "login", constraint: getZodConstraint(ChangeEmailSchema), onValidate({ formData }) { return parseWithZod(formData, { schema: ChangePasswordSchema }); }, shouldValidate: "onSubmit", }); 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 ( ); };