diff --git a/app/components/file-card.tsx b/app/components/file-card.tsx index 263edf6..7e6717e 100644 --- a/app/components/file-card.tsx +++ b/app/components/file-card.tsx @@ -1,3 +1,5 @@ +import { FolderIcon, MoreIcon, RecentIcon } from "./icons"; + export enum FileTypes { Folder = "FOLDER", Document = "DOCUMENT", @@ -33,76 +35,3 @@ export const FileCard = ({ type, fileName, createdAt, size }: FileCardProps) => ); }; - -const FolderIcon = ({ className }: { className?: string }) => { - return ( - - - - ); -}; - -const MoreIcon = ({ className }: { className?: string }) => { - return ( - - - - - - ); -}; - -const RecentIcon = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - - ); -}; diff --git a/app/components/forms.tsx b/app/components/forms.tsx index c79eeec..faaa14d 100644 --- a/app/components/forms.tsx +++ b/app/components/forms.tsx @@ -23,9 +23,10 @@ export const Field = ({ const errorId = errors?.length ? `${id}-error` : undefined return (
-
@@ -32,4 +37,4 @@ export const UsageCard = ({ label, monthlyUsage, currentUsage, icon }: UsageCard
) -} \ No newline at end of file +} diff --git a/app/images/QR.png b/app/images/QR.png new file mode 100644 index 0000000..2a2a4f6 Binary files /dev/null and b/app/images/QR.png differ diff --git a/app/routes/account.tsx b/app/routes/account.tsx new file mode 100644 index 0000000..edf89f8 --- /dev/null +++ b/app/routes/account.tsx @@ -0,0 +1,296 @@ +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 } from "~/components/icons"; +import { ManagementCard } 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

+
+ + setModal({ ...openModal, changeEmail: true })} + /> + +
+

Security

+
+ setModal({ ...openModal, changePassword: true })} + /> + setModal({ ...openModal, setupTwoFactor: true })} + /> + +
+

More

+
+ + + +
+ {/* 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 +
+ + + )} +
+ + + + ); +}; diff --git a/package.json b/package.json index d349191..9b070cd 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-progress": "^1.0.3",