portal-dashboard/app/routes/account.tsx

530 lines
16 KiB
TypeScript
Raw Permalink Normal View History

2024-03-14 01:52:31 +00:00
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,
BaseKey,
useGetIdentity,
useUpdate,
useUpdatePassword,
} from "@refinedev/core";
2024-03-19 18:13:37 +00:00
import { useMemo, useState } from "react";
2024-03-14 01:52:31 +00:00
import { z } from "zod";
import { Field } from "~/components/forms";
import { GeneralLayout } from "~/components/general-layout";
2024-03-19 18:13:37 +00:00
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";
2024-03-14 01:52:31 +00:00
import { Button } from "~/components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
2024-03-19 18:13:37 +00:00
DialogTrigger,
2024-03-14 01:52:31 +00:00
} 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";
2024-03-14 01:52:31 +00:00
export default function MyAccount() {
const { data: identity } = useGetIdentity<{ email: string }>();
2024-03-14 01:52:31 +00:00
const [openModal, setModal] = useState({
changeEmail: false,
changePassword: false,
setupTwoFactor: false,
changeAvatar: false,
2024-03-14 01:52:31 +00:00
});
return (
<Authenticated key="account" v3LegacyAuthProviderCompatible>
<GeneralLayout>
2024-03-14 01:52:31 +00:00
<h1 className="text-lg font-bold mb-4">My Account</h1>
2024-03-19 18:13:37 +00:00
<Dialog
onOpenChange={(open) => {
if (!open) {
setModal({
changeEmail: false,
changePassword: false,
setupTwoFactor: false,
changeAvatar: false,
});
}
}}>
<UsageCard
label="Usage"
currentUsage={2}
monthlyUsage={10}
icon={<CloudIcon className="text-ring" />}
button={
<Button variant="accent" className="gap-x-2 h-12">
<AddIcon />
Upgrade to Premium
</Button>
2024-03-19 18:13:37 +00:00
}
/>
<h2 className="font-bold my-8">Account Management</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard>
<ManagementCardAvatar
button={
<DialogTrigger className="absolute bottom-0 right-0 z-50">
<Button
onClick={() => setModal({ ...openModal, changeAvatar: true })}
variant="outline"
className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
<EditIcon />
</Button>
</DialogTrigger>
}
/>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Email Address</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold">
{identity?.email}
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() => setModal({ ...openModal, changeEmail: true })}>
<AddIcon />
Change Email Address
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Account Type</ManagementCardTitle>
<ManagementCardContent className="text-ring font-semibold flex gap-x-2">
Lite Premium Account
<CrownIcon />
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon />
Upgrade to Premium
</Button>
</ManagementCardFooter>
</ManagementCard>
</div>
<h2 className="font-bold my-8">Security</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard>
<ManagementCardTitle>Password</ManagementCardTitle>
<ManagementCardContent>
<PasswordDots className="mt-6" />
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, changePassword: true })
}>
<AddIcon />
Change Password
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
<ManagementCardContent>
Improve security by enabling 2FA.
</ManagementCardContent>
<ManagementCardFooter>
<DialogTrigger>
<Button
className="h-12 gap-x-2"
onClick={() =>
setModal({ ...openModal, setupTwoFactor: true })
}>
<AddIcon />
Enable Two-Factor Authorization
</Button>
</DialogTrigger>
</ManagementCardFooter>
</ManagementCard>
</div>
<h2 className="font-bold my-8">More</h2>
<div className="grid grid-cols-3 gap-x-8">
<ManagementCard variant="accent">
<ManagementCardTitle>Invite a Friend</ManagementCardTitle>
<ManagementCardContent>
Get 1 GB per friend invited for free (max 5 GB).
</ManagementCardContent>
<ManagementCardFooter>
<Button variant="accent" className="h-12 gap-x-2">
<AddIcon />
Send Invitation
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Read our Resources</ManagementCardTitle>
<ManagementCardContent>
Navigate helpful articles or get assistance.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2">
<AddIcon />
Open Support Centre
</Button>
</ManagementCardFooter>
</ManagementCard>
<ManagementCard>
<ManagementCardTitle>Delete Account</ManagementCardTitle>
<ManagementCardContent>
Once initiated, this action cannot be undone.
</ManagementCardContent>
<ManagementCardFooter>
<Button className="h-12 gap-x-2" variant="destructive">
<AddIcon />
Delete my Account
</Button>
</ManagementCardFooter>
</ManagementCard>
</div>
<DialogContent>
{openModal.changeAvatar && <ChangeAvatarForm />}
{openModal.changeEmail && (
<ChangeEmailForm currentValue={identity?.email || ""} />
)}
{openModal.changePassword && <ChangePasswordForm />}
{openModal.setupTwoFactor && <SetupTwoFactorDialog />}
</DialogContent>
</Dialog>
2024-03-14 01:52:31 +00:00
</GeneralLayout>
</Authenticated>
2024-03-14 01:52:31 +00:00
);
}
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;
});
2024-03-14 01:52:31 +00:00
2024-03-19 18:13:37 +00:00
const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
const { data: identity } = useGetIdentity<{ id: BaseKey }>();
const { mutate: updateEmail } = useUpdate();
2024-03-14 01:52:31 +00:00
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({
2024-03-19 12:54:10 +00:00
resource: "account",
id: "",
values: {
email: data.email.toString(),
2024-03-19 12:59:10 +00:00
password: data.password.toString(),
},
});
},
2024-03-14 01:52:31 +00:00
});
return (
2024-03-19 18:13:37 +00:00
<>
<DialogHeader>
<DialogTitle className="mb-8">Change Email</DialogTitle>
</DialogHeader>
<div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
{currentValue}
</div>
<form {...getFormProps(form)}>
<Field
className="mt-8"
inputProps={{ name: fields.email.name }}
labelProps={{ children: "New Email Address" }}
errors={fields.email.errors}
/>
<Field
inputProps={{ name: fields.password.name, type: "password" }}
labelProps={{ children: "Password" }}
errors={fields.password.errors}
/>
<Field
inputProps={{
name: fields.retypePassword.name,
type: "password",
}}
labelProps={{ children: "Retype Password" }}
errors={fields.retypePassword.errors}
/>
<Button className="w-full h-14">Change Email Address</Button>
</form>
</>
2024-03-14 01:52:31 +00:00
);
};
const ChangePasswordSchema = z
.object({
2024-03-19 14:27:55 +00:00
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;
});
2024-03-14 01:52:31 +00:00
2024-03-19 18:13:37 +00:00
const ChangePasswordForm = () => {
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
2024-03-14 01:52:31 +00:00
const [form, fields] = useForm({
id: "login",
2024-03-19 14:16:22 +00:00
constraint: getZodConstraint(ChangePasswordSchema),
2024-03-14 01:52:31 +00:00
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(),
});
},
2024-03-14 01:52:31 +00:00
});
return (
2024-03-19 18:13:37 +00:00
<>
<DialogHeader>
<DialogTitle className="mb-8">Change Password</DialogTitle>
</DialogHeader>
<form {...getFormProps(form)}>
<Field
inputProps={{
name: fields.currentPassword.name,
type: "password",
}}
labelProps={{ children: "Current Password" }}
errors={fields.currentPassword.errors}
/>
<Field
inputProps={{ name: fields.newPassword.name, type: "password" }}
labelProps={{ children: "New Password" }}
errors={fields.newPassword.errors}
/>
<Field
inputProps={{
name: fields.retypePassword.name,
type: "password",
}}
labelProps={{ children: "Retype Password" }}
errors={fields.retypePassword.errors}
/>
<Button className="w-full h-14">Change Password</Button>
</form>
</>
2024-03-14 01:52:31 +00:00
);
};
2024-03-19 18:13:37 +00:00
const SetupTwoFactorDialog = () => {
2024-03-14 01:55:44 +00:00
const [continueModal, setContinue] = useState<boolean>(false);
2024-03-14 01:52:31 +00:00
return (
2024-03-19 18:13:37 +00:00
<>
<DialogHeader>
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
</DialogHeader>
<div className="flex flex-col gap-y-6">
{continueModal ? (
<>
<p className="text-sm text-primary-2">
Enter the authentication code generated in your two-factor
application to confirm your setup.
</p>
<Input fullWidth className="text-center" />
<Button className="w-full h-14">Confirm</Button>
</>
) : (
<>
<div className="p-6 flex justify-center border bg-secondary-2">
<img src={QRImg} alt="QR" className="h-36 w-36" />
</div>
<p className="font-semibold">
Dont have access to scan? Use this code instead.
</p>
<div className="p-4 border text-primary-2 text-center font-bold">
HHH7MFGAMPJ44OM44FGAMPJ44O232
</div>
<Button className="w-full h-14" onClick={() => setContinue(true)}>
Continue
</Button>
</>
)}
</div>
</>
2024-03-14 01:52:31 +00:00
);
};
2024-03-19 18:13:37 +00:00
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";
2024-03-19 18:13:37 +00:00
const file = getFiles()?.[0];
2024-03-19 18:13:37 +00:00
const imagePreview = useMemo(() => {
if (file) {
return URL.createObjectURL(file.data);
}
}, [file]);
return (
<>
<DialogHeader className="mb-6">
<DialogTitle>Edit Avatar</DialogTitle>
</DialogHeader>
{!hasStarted && !getFiles().length ? (
<div
{...getRootProps()}
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
<input
hidden
aria-hidden
name="uppyFiles[]"
key={new Date().toISOString()}
multiple
{...getInputProps()}
/>
<CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
<p>Drag & Drop Files or Browse</p>
</div>
) : null}
2024-03-19 18:13:37 +00:00
{!hasStarted && file && (
<div className="border border-border rounded p-4 bg-primary-dark relative">
<Button
className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
onClick={() => removeFile(file?.id)}>
<Cross2Icon className="size-4" />
</Button>
<img
className="w-full h-48 object-contain"
src={imagePreview}
alt="New Avatar Preview"
/>
</div>
)}
2024-03-19 18:13:37 +00:00
{hasStarted ? (
<div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
<CloudCheckIcon className="w-32 h-32" />
{isCompleted ? "Upload completed" : `0% completed`}
</div>
) : null}
2024-03-19 18:13:37 +00:00
{isUploading ? (
<DialogClose asChild onClick={cancelAll}>
<Button size={"lg"} className="mt-6">
Cancel
</Button>
</DialogClose>
) : null}
2024-03-19 18:13:37 +00:00
{isCompleted ? (
<DialogClose asChild>
<Button size={"lg"} className="mt-6">
Close
</Button>
2024-03-19 18:13:37 +00:00
</DialogClose>
) : null}
{!hasStarted && !isCompleted && !isUploading ? (
<Button size={"lg"} className="mt-6" onClick={upload}>
Upload
</Button>
) : null}
</>
);
};
const PasswordDots = ({ className }: { className?: string }) => {
return (
<svg
aria-hidden="true"
width="219"
height="7"
viewBox="0 0 219 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}>
<circle cx="3.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="31.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="45.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="17.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="59.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="73.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="87.7771" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="101.777" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="131.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="117.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="145.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="159.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="173.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="187.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="201.5" cy="3.5" r="3.5" fill="currentColor" />
<circle cx="215.5" cy="3.5" r="3.5" fill="currentColor" />
</svg>
);
};