Refine Integration #13
|
|
@ -3,17 +3,21 @@ import { Avatar } from "./ui/avatar";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
import { EditIcon, FingerPrintIcon } from "./icons";
|
import { EditIcon, FingerPrintIcon } from "./icons";
|
||||||
|
|
||||||
const ManagementCardAvatar = ({ src, onClick }: { src?: string; onClick?: () => void }) => {
|
const ManagementCardAvatar = ({ src, button, onClick }: { src?: string; button?: React.ReactNode; onClick?: () => void }) => {
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
<div className="relative w-fit h-fit">
|
<div className="relative w-fit h-fit">
|
||||||
<Avatar className="border-2 border-ring h-28 w-28" />
|
<Avatar className="border-2 border-ring h-28 w-28" />
|
||||||
<Button
|
{!button
|
||||||
onClick={onClick}
|
? <Button
|
||||||
variant="outline"
|
onClick={onClick}
|
||||||
className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
|
variant="outline"
|
||||||
<EditIcon />
|
className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
|
||||||
</Button>
|
<EditIcon />
|
||||||
|
</Button>
|
||||||
|
: button
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,18 @@ import {
|
||||||
useUpdate,
|
useUpdate,
|
||||||
useUpdatePassword,
|
useUpdatePassword,
|
||||||
} from "@refinedev/core";
|
} from "@refinedev/core";
|
||||||
import { useState } from "react";
|
import { useMemo, useState } from "react";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import { Field } from "~/components/forms";
|
import { Field } from "~/components/forms";
|
||||||
import { GeneralLayout } from "~/components/general-layout";
|
import { GeneralLayout } from "~/components/general-layout";
|
||||||
import { AddIcon, CloudCheckIcon, CloudIcon, CloudUploadIcon, CrownIcon, TrashIcon } from "~/components/icons";
|
import {
|
||||||
|
AddIcon,
|
||||||
|
CloudCheckIcon,
|
||||||
|
CloudIcon,
|
||||||
|
CloudUploadIcon,
|
||||||
|
CrownIcon,
|
||||||
|
EditIcon,
|
||||||
|
} from "~/components/icons";
|
||||||
import { useUppy } from "~/components/lib/uppy";
|
import { useUppy } from "~/components/lib/uppy";
|
||||||
import {
|
import {
|
||||||
ManagementCard,
|
ManagementCard,
|
||||||
|
|
@ -27,6 +34,7 @@ import {
|
||||||
DialogContent,
|
DialogContent,
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
} from "~/components/ui/dialog";
|
} from "~/components/ui/dialog";
|
||||||
import { Input } from "~/components/ui/input";
|
import { Input } from "~/components/ui/input";
|
||||||
import { UsageCard } from "~/components/usage-card";
|
import { UsageCard } from "~/components/usage-card";
|
||||||
|
|
@ -46,149 +54,162 @@ export default function MyAccount() {
|
||||||
return (
|
return (
|
||||||
<GeneralLayout>
|
<GeneralLayout>
|
||||||
<h1 className="text-lg font-bold mb-4">My Account</h1>
|
<h1 className="text-lg font-bold mb-4">My Account</h1>
|
||||||
<UsageCard
|
<Dialog
|
||||||
label="Usage"
|
onOpenChange={(open) => {
|
||||||
currentUsage={2}
|
if (!open) {
|
||||||
monthlyUsage={10}
|
setModal({
|
||||||
icon={<CloudIcon className="text-ring" />}
|
changeEmail: false,
|
||||||
button={
|
changePassword: false,
|
||||||
<Button variant="accent" className="gap-x-2 h-12">
|
setupTwoFactor: false,
|
||||||
<AddIcon />
|
changeAvatar: false,
|
||||||
Upgrade to Premium
|
});
|
||||||
</Button>
|
}
|
||||||
}
|
}}>
|
||||||
/>
|
<UsageCard
|
||||||
<h2 className="font-bold my-8">Account Management</h2>
|
label="Usage"
|
||||||
<div className="grid grid-cols-3 gap-x-8">
|
currentUsage={2}
|
||||||
<ManagementCard>
|
monthlyUsage={10}
|
||||||
<ManagementCardAvatar
|
icon={<CloudIcon className="text-ring" />}
|
||||||
onClick={() => setModal({ ...openModal, changeAvatar: true })}
|
button={
|
||||||
/>
|
<Button variant="accent" className="gap-x-2 h-12">
|
||||||
</ManagementCard>
|
|
||||||
<ManagementCard>
|
|
||||||
<ManagementCardTitle>Email Address</ManagementCardTitle>
|
|
||||||
<ManagementCardContent className="text-ring font-semibold">
|
|
||||||
{identity?.email}
|
|
||||||
</ManagementCardContent>
|
|
||||||
<ManagementCardFooter>
|
|
||||||
<Button
|
|
||||||
className="h-12 gap-x-2"
|
|
||||||
onClick={() => setModal({ ...openModal, changeEmail: true })}>
|
|
||||||
<AddIcon />
|
|
||||||
Change Email Address
|
|
||||||
</Button>
|
|
||||||
</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 />
|
<AddIcon />
|
||||||
Upgrade to Premium
|
Upgrade to Premium
|
||||||
</Button>
|
</Button>
|
||||||
</ManagementCardFooter>
|
}
|
||||||
</ManagementCard>
|
/>
|
||||||
</div>
|
<h2 className="font-bold my-8">Account Management</h2>
|
||||||
<h2 className="font-bold my-8">Security</h2>
|
<div className="grid grid-cols-3 gap-x-8">
|
||||||
<div className="grid grid-cols-3 gap-x-8">
|
<ManagementCard>
|
||||||
<ManagementCard>
|
<ManagementCardAvatar
|
||||||
<ManagementCardTitle>Password</ManagementCardTitle>
|
button={
|
||||||
<ManagementCardContent>
|
<DialogTrigger className="absolute bottom-0 right-0 z-50">
|
||||||
<PasswordDots className="mt-6" />
|
<Button
|
||||||
</ManagementCardContent>
|
onClick={() => setModal({ ...openModal, changeAvatar: true })}
|
||||||
<ManagementCardFooter>
|
variant="outline"
|
||||||
<Button
|
className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
|
||||||
className="h-12 gap-x-2"
|
<EditIcon />
|
||||||
onClick={() => setModal({ ...openModal, changePassword: true })}>
|
</Button>
|
||||||
<AddIcon />
|
</DialogTrigger>
|
||||||
Change Password
|
}
|
||||||
</Button>
|
/>
|
||||||
</ManagementCardFooter>
|
</ManagementCard>
|
||||||
</ManagementCard>
|
<ManagementCard>
|
||||||
<ManagementCard>
|
<ManagementCardTitle>Email Address</ManagementCardTitle>
|
||||||
<ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
|
<ManagementCardContent className="text-ring font-semibold">
|
||||||
<ManagementCardContent>
|
{identity?.email}
|
||||||
Improve security by enabling 2FA.
|
</ManagementCardContent>
|
||||||
</ManagementCardContent>
|
<ManagementCardFooter>
|
||||||
<ManagementCardFooter>
|
<DialogTrigger>
|
||||||
<Button
|
<Button
|
||||||
className="h-12 gap-x-2"
|
className="h-12 gap-x-2"
|
||||||
onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
|
onClick={() => setModal({ ...openModal, changeEmail: true })}>
|
||||||
<AddIcon />
|
<AddIcon />
|
||||||
Enable Two-Factor Authorization
|
Change Email Address
|
||||||
</Button>
|
</Button>
|
||||||
</ManagementCardFooter>
|
</DialogTrigger>
|
||||||
</ManagementCard>
|
</ManagementCardFooter>
|
||||||
</div>
|
</ManagementCard>
|
||||||
<h2 className="font-bold my-8">More</h2>
|
<ManagementCard>
|
||||||
<div className="grid grid-cols-3 gap-x-8">
|
<ManagementCardTitle>Account Type</ManagementCardTitle>
|
||||||
<ManagementCard variant="accent">
|
<ManagementCardContent className="text-ring font-semibold flex gap-x-2">
|
||||||
<ManagementCardTitle>Invite a Friend</ManagementCardTitle>
|
Lite Premium Account
|
||||||
<ManagementCardContent>
|
<CrownIcon />
|
||||||
Get 1 GB per friend invited for free (max 5 GB).
|
</ManagementCardContent>
|
||||||
</ManagementCardContent>
|
<ManagementCardFooter>
|
||||||
<ManagementCardFooter>
|
<Button className="h-12 gap-x-2">
|
||||||
<Button variant="accent" className="h-12 gap-x-2">
|
<AddIcon />
|
||||||
<AddIcon />
|
Upgrade to Premium
|
||||||
Send Invitation
|
</Button>
|
||||||
</Button>
|
</ManagementCardFooter>
|
||||||
</ManagementCardFooter>
|
</ManagementCard>
|
||||||
</ManagementCard>
|
</div>
|
||||||
<ManagementCard>
|
<h2 className="font-bold my-8">Security</h2>
|
||||||
<ManagementCardTitle>Read our Resources</ManagementCardTitle>
|
<div className="grid grid-cols-3 gap-x-8">
|
||||||
<ManagementCardContent>
|
<ManagementCard>
|
||||||
Navigate helpful articles or get assistance.
|
<ManagementCardTitle>Password</ManagementCardTitle>
|
||||||
</ManagementCardContent>
|
<ManagementCardContent>
|
||||||
<ManagementCardFooter>
|
<PasswordDots className="mt-6" />
|
||||||
<Button className="h-12 gap-x-2">
|
</ManagementCardContent>
|
||||||
<AddIcon />
|
<ManagementCardFooter>
|
||||||
Open Support Centre
|
<DialogTrigger>
|
||||||
</Button>
|
<Button
|
||||||
</ManagementCardFooter>
|
className="h-12 gap-x-2"
|
||||||
</ManagementCard>
|
onClick={() =>
|
||||||
<ManagementCard>
|
setModal({ ...openModal, changePassword: true })
|
||||||
<ManagementCardTitle>Delete Account</ManagementCardTitle>
|
}>
|
||||||
<ManagementCardContent>
|
<AddIcon />
|
||||||
Once initiated, this action cannot be undone.
|
Change Password
|
||||||
</ManagementCardContent>
|
</Button>
|
||||||
<ManagementCardFooter>
|
</DialogTrigger>
|
||||||
<Button className="h-12 gap-x-2" variant="destructive">
|
</ManagementCardFooter>
|
||||||
<AddIcon />
|
</ManagementCard>
|
||||||
Delete my Account
|
<ManagementCard>
|
||||||
</Button>
|
<ManagementCardTitle>Two-Factor Authentication</ManagementCardTitle>
|
||||||
</ManagementCardFooter>
|
<ManagementCardContent>
|
||||||
</ManagementCard>
|
Improve security by enabling 2FA.
|
||||||
</div>
|
</ManagementCardContent>
|
||||||
{/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
|
<ManagementCardFooter>
|
||||||
<ChangeAvatarForm
|
<DialogTrigger>
|
||||||
open={openModal.changeAvatar}
|
<Button
|
||||||
setOpen={(value: boolean) =>
|
className="h-12 gap-x-2"
|
||||||
setModal({ ...openModal, changeAvatar: value })
|
onClick={() =>
|
||||||
}
|
setModal({ ...openModal, setupTwoFactor: true })
|
||||||
/>
|
}>
|
||||||
<ChangeEmailForm
|
<AddIcon />
|
||||||
open={openModal.changeEmail}
|
Enable Two-Factor Authorization
|
||||||
setOpen={(value: boolean) =>
|
</Button>
|
||||||
setModal({ ...openModal, changeEmail: value })
|
</DialogTrigger>
|
||||||
}
|
</ManagementCardFooter>
|
||||||
currentValue={identity?.email || ""}
|
</ManagementCard>
|
||||||
/>
|
</div>
|
||||||
<ChangePasswordForm
|
<h2 className="font-bold my-8">More</h2>
|
||||||
open={openModal.changePassword}
|
<div className="grid grid-cols-3 gap-x-8">
|
||||||
setOpen={(value: boolean) =>
|
<ManagementCard variant="accent">
|
||||||
setModal({ ...openModal, changePassword: value })
|
<ManagementCardTitle>Invite a Friend</ManagementCardTitle>
|
||||||
}
|
<ManagementCardContent>
|
||||||
/>
|
Get 1 GB per friend invited for free (max 5 GB).
|
||||||
<SetupTwoFactorDialog
|
</ManagementCardContent>
|
||||||
open={openModal.setupTwoFactor}
|
<ManagementCardFooter>
|
||||||
setOpen={(value: boolean) =>
|
<Button variant="accent" className="h-12 gap-x-2">
|
||||||
setModal({ ...openModal, setupTwoFactor: value })
|
<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>
|
||||||
</GeneralLayout>
|
</GeneralLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -210,15 +231,7 @@ const ChangeEmailSchema = z
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
const ChangeEmailForm = ({
|
const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
currentValue,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (value: boolean) => void;
|
|
||||||
currentValue: string;
|
|
||||||
}) => {
|
|
||||||
const { data: identity } = useGetIdentity<{ id: BaseKey }>();
|
const { data: identity } = useGetIdentity<{ id: BaseKey }>();
|
||||||
const { mutate: updateEmail } = useUpdate();
|
const { mutate: updateEmail } = useUpdate();
|
||||||
const [form, fields] = useForm({
|
const [form, fields] = useForm({
|
||||||
|
|
@ -244,38 +257,36 @@ const ChangeEmailForm = ({
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<>
|
||||||
<DialogContent className="p-8" forceMount>
|
<DialogHeader>
|
||||||
<DialogHeader>
|
<DialogTitle className="mb-8">Change Email</DialogTitle>
|
||||||
<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">
|
<div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
|
||||||
{currentValue}
|
{currentValue}
|
||||||
</div>
|
</div>
|
||||||
<form {...getFormProps(form)}>
|
<form {...getFormProps(form)}>
|
||||||
<Field
|
<Field
|
||||||
className="mt-8"
|
className="mt-8"
|
||||||
inputProps={{ name: fields.email.name }}
|
inputProps={{ name: fields.email.name }}
|
||||||
labelProps={{ children: "New Email Address" }}
|
labelProps={{ children: "New Email Address" }}
|
||||||
errors={fields.email.errors}
|
errors={fields.email.errors}
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
inputProps={{ name: fields.password.name, type: "password" }}
|
inputProps={{ name: fields.password.name, type: "password" }}
|
||||||
labelProps={{ children: "Password" }}
|
labelProps={{ children: "Password" }}
|
||||||
errors={fields.password.errors}
|
errors={fields.password.errors}
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
inputProps={{
|
inputProps={{
|
||||||
name: fields.retypePassword.name,
|
name: fields.retypePassword.name,
|
||||||
type: "password",
|
type: "password",
|
||||||
}}
|
}}
|
||||||
labelProps={{ children: "Retype Password" }}
|
labelProps={{ children: "Retype Password" }}
|
||||||
errors={fields.retypePassword.errors}
|
errors={fields.retypePassword.errors}
|
||||||
/>
|
/>
|
||||||
<Button className="w-full h-14">Change Email Address</Button>
|
<Button className="w-full h-14">Change Email Address</Button>
|
||||||
</form>
|
</form>
|
||||||
</DialogHeader>
|
</>
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -296,13 +307,7 @@ const ChangePasswordSchema = z
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
|
|
||||||
const ChangePasswordForm = ({
|
const ChangePasswordForm = () => {
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (value: boolean) => void;
|
|
||||||
}) => {
|
|
||||||
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
|
const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
|
||||||
const [form, fields] = useForm({
|
const [form, fields] = useForm({
|
||||||
id: "login",
|
id: "login",
|
||||||
|
|
@ -323,101 +328,78 @@ const ChangePasswordForm = ({
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<>
|
||||||
<DialogContent className="p-8">
|
<DialogHeader>
|
||||||
<DialogHeader>
|
<DialogTitle className="mb-8">Change Password</DialogTitle>
|
||||||
<DialogTitle className="mb-8">Change Password</DialogTitle>
|
</DialogHeader>
|
||||||
<form {...getFormProps(form)}>
|
<form {...getFormProps(form)}>
|
||||||
<Field
|
<Field
|
||||||
inputProps={{
|
inputProps={{
|
||||||
name: fields.currentPassword.name,
|
name: fields.currentPassword.name,
|
||||||
type: "password",
|
type: "password",
|
||||||
}}
|
}}
|
||||||
labelProps={{ children: "Current Password" }}
|
labelProps={{ children: "Current Password" }}
|
||||||
errors={fields.currentPassword.errors}
|
errors={fields.currentPassword.errors}
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
inputProps={{ name: fields.newPassword.name, type: "password" }}
|
inputProps={{ name: fields.newPassword.name, type: "password" }}
|
||||||
labelProps={{ children: "New Password" }}
|
labelProps={{ children: "New Password" }}
|
||||||
errors={fields.newPassword.errors}
|
errors={fields.newPassword.errors}
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
inputProps={{
|
inputProps={{
|
||||||
name: fields.retypePassword.name,
|
name: fields.retypePassword.name,
|
||||||
type: "password",
|
type: "password",
|
||||||
}}
|
}}
|
||||||
labelProps={{ children: "Retype Password" }}
|
labelProps={{ children: "Retype Password" }}
|
||||||
errors={fields.retypePassword.errors}
|
errors={fields.retypePassword.errors}
|
||||||
/>
|
/>
|
||||||
<Button className="w-full h-14">Change Password</Button>
|
<Button className="w-full h-14">Change Password</Button>
|
||||||
</form>
|
</form>
|
||||||
</DialogHeader>
|
</>
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const SetupTwoFactorDialog = ({
|
const SetupTwoFactorDialog = () => {
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (value: boolean) => void;
|
|
||||||
}) => {
|
|
||||||
const [continueModal, setContinue] = useState<boolean>(false);
|
const [continueModal, setContinue] = useState<boolean>(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<>
|
||||||
open={open}
|
<DialogHeader>
|
||||||
onOpenChange={(value) => {
|
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
|
||||||
setOpen(value);
|
</DialogHeader>
|
||||||
setContinue(false);
|
<div className="flex flex-col gap-y-6">
|
||||||
}}>
|
{continueModal ? (
|
||||||
<DialogContent className="p-8">
|
<>
|
||||||
<DialogHeader>
|
<p className="text-sm text-primary-2">
|
||||||
<DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
|
Enter the authentication code generated in your two-factor
|
||||||
<div className="flex flex-col gap-y-6">
|
application to confirm your setup.
|
||||||
{continueModal ? (
|
</p>
|
||||||
<>
|
<Input fullWidth className="text-center" />
|
||||||
<p className="text-sm text-primary-2">
|
<Button className="w-full h-14">Confirm</Button>
|
||||||
Enter the authentication code generated in your two-factor
|
</>
|
||||||
application to confirm your setup.
|
) : (
|
||||||
</p>
|
<>
|
||||||
<Input fullWidth className="text-center" />
|
<div className="p-6 flex justify-center border bg-secondary-2">
|
||||||
<Button className="w-full h-14">Confirm</Button>
|
<img src={QRImg} alt="QR" className="h-36 w-36" />
|
||||||
</>
|
</div>
|
||||||
) : (
|
<p className="font-semibold">
|
||||||
<>
|
Don’t have access to scan? Use this code instead.
|
||||||
<div className="p-6 flex justify-center border bg-secondary-2">
|
</p>
|
||||||
<img src={QRImg} alt="QR" className="h-36 w-36" />
|
<div className="p-4 border text-primary-2 text-center font-bold">
|
||||||
</div>
|
HHH7MFGAMPJ44OM44FGAMPJ44O232
|
||||||
<p className="font-semibold">
|
</div>
|
||||||
Don’t have access to scan? Use this code instead.
|
<Button className="w-full h-14" onClick={() => setContinue(true)}>
|
||||||
</p>
|
Continue
|
||||||
<div className="p-4 border text-primary-2 text-center font-bold">
|
</Button>
|
||||||
HHH7MFGAMPJ44OM44FGAMPJ44O232
|
</>
|
||||||
</div>
|
)}
|
||||||
<Button
|
</div>
|
||||||
className="w-full h-14"
|
</>
|
||||||
onClick={() => setContinue(true)}>
|
|
||||||
Continue
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</DialogHeader>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const ChangeAvatarForm = ({
|
const ChangeAvatarForm = () => {
|
||||||
open,
|
|
||||||
setOpen,
|
|
||||||
}: {
|
|
||||||
open: boolean;
|
|
||||||
setOpen: (value: boolean) => void;
|
|
||||||
}) => {
|
|
||||||
const {
|
const {
|
||||||
getRootProps,
|
getRootProps,
|
||||||
getInputProps,
|
getInputProps,
|
||||||
|
|
@ -437,76 +419,80 @@ const ChangeAvatarForm = ({
|
||||||
const isCompleted = state === "completed";
|
const isCompleted = state === "completed";
|
||||||
const hasStarted = state !== "idle" && state !== "initializing";
|
const hasStarted = state !== "idle" && state !== "initializing";
|
||||||
|
|
||||||
|
const file = getFiles()?.[0];
|
||||||
|
|
||||||
|
const imagePreview = useMemo(() => {
|
||||||
|
if (file) {
|
||||||
|
return URL.createObjectURL(file.data);
|
||||||
|
}
|
||||||
|
}, [file]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<>
|
||||||
open={open}
|
<DialogHeader className="mb-6">
|
||||||
onOpenChange={(value) => {
|
<DialogTitle>Edit Avatar</DialogTitle>
|
||||||
setOpen(value);
|
</DialogHeader>
|
||||||
}}>
|
{!hasStarted && !getFiles().length ? (
|
||||||
<DialogContent className="p-8">
|
<div
|
||||||
<DialogHeader className="mb-6">
|
{...getRootProps()}
|
||||||
<DialogTitle>Edit Avatar</DialogTitle>
|
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
|
||||||
</DialogHeader>
|
<input
|
||||||
{!hasStarted && !getFiles().length ? (
|
hidden
|
||||||
<div
|
aria-hidden
|
||||||
{...getRootProps()}
|
name="uppyFiles[]"
|
||||||
className="border border-border rounded text-primary-2 bg-primary-dark h-48 flex flex-col items-center justify-center">
|
key={new Date().toISOString()}
|
||||||
<input
|
multiple
|
||||||
hidden
|
{...getInputProps()}
|
||||||
aria-hidden
|
/>
|
||||||
name="uppyFiles[]"
|
<CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
|
||||||
key={new Date().toISOString()}
|
<p>Drag & Drop Files or Browse</p>
|
||||||
multiple
|
</div>
|
||||||
{...getInputProps()}
|
) : null}
|
||||||
/>
|
|
||||||
<CloudUploadIcon className="w-24 h-24 stroke stroke-primary-dark" />
|
|
||||||
<p>Drag & Drop Files or Browse</p>
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{(!hasStarted && getFiles().length > 0) && (
|
{!hasStarted && file && (
|
||||||
<div className="border border-border rounded p-4 bg-primary-dark relative">
|
<div className="border border-border rounded p-4 bg-primary-dark relative">
|
||||||
<Button
|
<Button
|
||||||
className="absolute top-4 right-4 rounded-full aspect-square bg-primary-dark hover:bg-primary p-2 text-sm"
|
className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
|
||||||
onClick={() => removeFile(getFiles()[0].id)}>
|
onClick={() => removeFile(file?.id)}>
|
||||||
<Cross2Icon />
|
<Cross2Icon className="size-4" />
|
||||||
</Button>
|
|
||||||
<img className="w-full h-48" src={URL.createObjectURL(getFiles()[0].data)} alt="New Avatar Preview" />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{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}
|
|
||||||
|
|
||||||
{isUploading ? (
|
|
||||||
<DialogClose asChild onClick={cancelAll}>
|
|
||||||
<Button size={"lg"} className="mt-6">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
</DialogClose>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{isCompleted ? (
|
|
||||||
<DialogClose asChild>
|
|
||||||
<Button size={"lg"} className="mt-6">
|
|
||||||
Close
|
|
||||||
</Button>
|
|
||||||
</DialogClose>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{!hasStarted && !isCompleted && !isUploading ? (
|
|
||||||
<Button size={"lg"} className="mt-6" onClick={upload}>
|
|
||||||
Upload
|
|
||||||
</Button>
|
</Button>
|
||||||
) : null}
|
<img
|
||||||
</DialogContent>
|
className="w-full h-48 object-contain"
|
||||||
</Dialog>
|
src={imagePreview}
|
||||||
|
alt="New Avatar Preview"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{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}
|
||||||
|
|
||||||
|
{isUploading ? (
|
||||||
|
<DialogClose asChild onClick={cancelAll}>
|
||||||
|
<Button size={"lg"} className="mt-6">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{isCompleted ? (
|
||||||
|
<DialogClose asChild>
|
||||||
|
<Button size={"lg"} className="mt-6">
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DialogClose>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!hasStarted && !isCompleted && !isUploading ? (
|
||||||
|
<Button size={"lg"} className="mt-6" onClick={upload}>
|
||||||
|
Upload
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue