fixes spacing
This commit is contained in:
Nana Kofi Larbi Mantey
@@ -12,308 +12,308 @@ import { useActiveProject, useActiveProjectVerifiedIdentity, useProjects } from
|
|||||||
import { network } from "../../lib/network";
|
import { network } from "../../lib/network";
|
||||||
|
|
||||||
interface EmailValues {
|
interface EmailValues {
|
||||||
email: string;
|
email: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface FromValues {
|
interface FromValues {
|
||||||
from: string;
|
from: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
const activeProject = useActiveProject();
|
const activeProject = useActiveProject();
|
||||||
const { mutate: projectsMutate } = useProjects();
|
const { mutate: projectsMutate } = useProjects();
|
||||||
const { data: identity, mutate: identityMutate } = useActiveProjectVerifiedIdentity();
|
const { data: identity, mutate: identityMutate } = useActiveProjectVerifiedIdentity();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<EmailValues>({
|
} = useForm<EmailValues>({
|
||||||
resolver: zodResolver(IdentitySchemas.create.omit({ id: true })),
|
resolver: zodResolver(IdentitySchemas.create.omit({ id: true })),
|
||||||
});
|
});
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register: registerUpdate,
|
register: registerUpdate,
|
||||||
handleSubmit: handleSubmitUpdate,
|
handleSubmit: handleSubmitUpdate,
|
||||||
formState: { errors: errorsUpdate },
|
formState: { errors: errorsUpdate },
|
||||||
reset,
|
reset,
|
||||||
} = useForm<FromValues>({
|
} = useForm<FromValues>({
|
||||||
resolver: zodResolver(IdentitySchemas.update.omit({ id: true })),
|
resolver: zodResolver(IdentitySchemas.update.omit({ id: true })),
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!activeProject) {
|
if (!activeProject) {
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
reset({ from: activeProject.from ?? undefined });
|
||||||
|
}, [reset, activeProject]);
|
||||||
|
|
||||||
|
if (!activeProject || !identity) {
|
||||||
|
return <FullscreenLoader />;
|
||||||
}
|
}
|
||||||
|
|
||||||
reset({ from: activeProject.from ?? undefined });
|
const create = async (data: EmailValues) => {
|
||||||
}, [reset, activeProject]);
|
toast.promise(
|
||||||
|
network.fetch<
|
||||||
|
{
|
||||||
|
success: true;
|
||||||
|
tokens: string[];
|
||||||
|
},
|
||||||
|
typeof IdentitySchemas.create
|
||||||
|
>("POST", "/identities/create", {
|
||||||
|
id: activeProject.id,
|
||||||
|
...data,
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
loading: "Adding your domain",
|
||||||
|
success: (res) => {
|
||||||
|
void identityMutate({ tokens: res.tokens }, { revalidate: false });
|
||||||
|
void projectsMutate();
|
||||||
|
|
||||||
if (!activeProject || !identity) {
|
return "Added your domain";
|
||||||
return <FullscreenLoader />;
|
},
|
||||||
}
|
error: "Could not add domain",
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const create = async (data: EmailValues) => {
|
const update = async (data: FromValues) => {
|
||||||
toast.promise(
|
toast.promise(
|
||||||
network.fetch<
|
network.fetch<
|
||||||
{
|
{
|
||||||
success: true;
|
success: true;
|
||||||
tokens: string[];
|
},
|
||||||
},
|
typeof IdentitySchemas.update
|
||||||
typeof IdentitySchemas.create
|
>("PUT", "/projects/update/identity", {
|
||||||
>("POST", "/identities/create", {
|
id: activeProject.id,
|
||||||
id: activeProject.id,
|
...data,
|
||||||
...data,
|
}),
|
||||||
}),
|
{
|
||||||
{
|
loading: "Updating your sender name",
|
||||||
loading: "Adding your domain",
|
success: "Updated your sender name",
|
||||||
success: (res) => {
|
error: "Could not update sender name",
|
||||||
void identityMutate({ tokens: res.tokens }, { revalidate: false });
|
},
|
||||||
void projectsMutate();
|
);
|
||||||
|
|
||||||
return "Added your domain";
|
await identityMutate();
|
||||||
},
|
await projectsMutate();
|
||||||
error: "Could not add domain",
|
};
|
||||||
},
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const update = async (data: FromValues) => {
|
const unlink = async () => {
|
||||||
toast.promise(
|
toast.promise(
|
||||||
network.fetch<
|
network.fetch<
|
||||||
{
|
{
|
||||||
success: true;
|
success: true;
|
||||||
},
|
},
|
||||||
typeof IdentitySchemas.update
|
typeof UtilitySchemas.id
|
||||||
>("PUT", "/projects/update/identity", {
|
>("POST", "/identities/reset", {
|
||||||
id: activeProject.id,
|
id: activeProject.id,
|
||||||
...data,
|
}),
|
||||||
}),
|
{
|
||||||
{
|
loading: "Unlinking your domain",
|
||||||
loading: "Updating your sender name",
|
success: "Unlinked your domain",
|
||||||
success: "Updated your sender name",
|
error: "Could not unlink domain",
|
||||||
error: "Could not update sender name",
|
},
|
||||||
},
|
);
|
||||||
);
|
|
||||||
|
|
||||||
await identityMutate();
|
window.location.reload();
|
||||||
await projectsMutate();
|
};
|
||||||
};
|
|
||||||
|
|
||||||
const unlink = async () => {
|
const domain = activeProject.email?.split("@")[1] ?? "";
|
||||||
toast.promise(
|
const subdomain = domain.split(".").length > 2 ? domain.split(".")[0] : "";
|
||||||
network.fetch<
|
|
||||||
{
|
|
||||||
success: true;
|
|
||||||
},
|
|
||||||
typeof UtilitySchemas.id
|
|
||||||
>("POST", "/identities/reset", {
|
|
||||||
id: activeProject.id,
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
loading: "Unlinking your domain",
|
|
||||||
success: "Unlinked your domain",
|
|
||||||
error: "Could not unlink domain",
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
window.location.reload();
|
return (
|
||||||
};
|
<>
|
||||||
|
<Dashboard>
|
||||||
|
<SettingTabs />
|
||||||
|
|
||||||
const domain = activeProject.email?.split("@")[1] ?? "";
|
<Card
|
||||||
const subdomain = domain.split(".").length > 2 ? domain.split(".")[0] : "";
|
title={"Domain"}
|
||||||
|
description={"By sending emails from your own domain you build up domain authority and trust."}
|
||||||
return (
|
actions={
|
||||||
<>
|
activeProject.email && (
|
||||||
<Dashboard>
|
<>
|
||||||
<SettingTabs />
|
<button
|
||||||
|
onClick={unlink}
|
||||||
<Card
|
className={
|
||||||
title={"Domain"}
|
"flex items-center gap-x-2 rounded bg-red-600 px-8 py-2 text-center text-sm font-medium text-white transition ease-in-out hover:bg-red-700"
|
||||||
description={"By sending emails from your own domain you build up domain authority and trust."}
|
}
|
||||||
actions={
|
>
|
||||||
activeProject.email && (
|
<Unlink strokeWidth={1.5} size={18} />
|
||||||
<>
|
Unlink domain
|
||||||
<button
|
</button>
|
||||||
onClick={unlink}
|
</>
|
||||||
className={
|
)
|
||||||
"flex items-center gap-x-2 rounded bg-red-600 px-8 py-2 text-center text-sm font-medium text-white transition ease-in-out hover:bg-red-700"
|
}
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Unlink strokeWidth={1.5} size={18} />
|
{activeProject.email && !activeProject.verified ? (
|
||||||
Unlink domain
|
<>
|
||||||
</button>
|
<Alert type={"warning"} title={"Waiting for DNS verification"}>
|
||||||
</>
|
Please add the following records to {activeProject.email.split("@")[1]} to verify {activeProject.email}, this
|
||||||
)
|
may take up to 15 minutes to register. <br />
|
||||||
}
|
In the meantime you can already start sending emails, we will automatically switch to your domain once it is
|
||||||
>
|
verified.
|
||||||
{activeProject.email && !activeProject.verified ? (
|
</Alert>
|
||||||
<>
|
|
||||||
<Alert type={"warning"} title={"Waiting for DNS verification"}>
|
|
||||||
Please add the following records to {activeProject.email.split("@")[1]} to verify {activeProject.email}, this
|
|
||||||
may take up to 15 minutes to register. <br />
|
|
||||||
In the meantime you can already start sending emails, we will automatically switch to your domain once it is
|
|
||||||
verified.
|
|
||||||
</Alert>
|
|
||||||
|
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
<Table
|
<Table
|
||||||
values={[
|
values={[
|
||||||
{
|
{
|
||||||
Type: <Badge type={"info"}>TXT</Badge>,
|
Type: <Badge type={"info"}>TXT</Badge>,
|
||||||
Key: (
|
Key: (
|
||||||
<div
|
<div
|
||||||
className={"flex cursor-pointer items-center gap-3"}
|
className={"flex cursor-pointer items-center gap-3"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void navigator.clipboard.writeText("plunk");
|
void navigator.clipboard.writeText("plunk");
|
||||||
toast.success("Copied key to clipboard");
|
toast.success("Copied key to clipboard");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className={"font-mono text-sm"}>plunk</p>
|
<p className={"font-mono text-sm"}>plunk</p>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
Value: (
|
Value: (
|
||||||
<div
|
<div
|
||||||
className={"flex cursor-pointer items-center gap-3"}
|
className={"flex cursor-pointer items-center gap-3"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void navigator.clipboard.writeText("v=spf1 include:amazonses.com ~all");
|
void navigator.clipboard.writeText("v=spf1 include:amazonses.com ~all");
|
||||||
toast.success("Copied value to clipboard");
|
toast.success("Copied value to clipboard");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className={"font-mono text-sm"}>v=spf1 include:amazonses.com ~all</p> <Copy size={14} />
|
<p className={"font-mono text-sm"}>v=spf1 include:amazonses.com ~all</p> <Copy size={14} />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: <Badge type={"info"}>MX</Badge>,
|
type: <Badge type={"info"}>MX</Badge>,
|
||||||
Key: (
|
Key: (
|
||||||
<div
|
<div
|
||||||
className={"flex cursor-pointer items-center gap-3"}
|
className={"flex cursor-pointer items-center gap-3"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void navigator.clipboard.writeText("plunk");
|
void navigator.clipboard.writeText("plunk");
|
||||||
toast.success("Copied key to clipboard");
|
toast.success("Copied key to clipboard");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className={"font-mono text-sm"}>plunk</p>
|
<p className={"font-mono text-sm"}>plunk</p>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
Value: (
|
Value: (
|
||||||
<div
|
<div
|
||||||
className={"flex cursor-pointer items-center gap-3"}
|
className={"flex cursor-pointer items-center gap-3"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void navigator.clipboard.writeText(`10 feedback-smtp.${AWS_REGION}.amazonses.com`);
|
void navigator.clipboard.writeText(`10 feedback-smtp.${AWS_REGION}.amazonses.com`);
|
||||||
toast.success("Copied value to clipboard");
|
toast.success("Copied value to clipboard");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className={"font-mono text-sm"}>10 feedback-smtp.{AWS_REGION}.amazonses.com</p>
|
<p className={"font-mono text-sm"}>10 feedback-smtp.{AWS_REGION}.amazonses.com</p>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
...identity.tokens.map((token) => {
|
...identity.tokens.map((token) => {
|
||||||
return {
|
return {
|
||||||
Type: <Badge type={"info"}>CNAME</Badge>,
|
Type: <Badge type={"info"}>CNAME</Badge>,
|
||||||
Key: (
|
Key: (
|
||||||
<div
|
<div
|
||||||
className={"flex cursor-pointer items-center gap-3"}
|
className={"flex cursor-pointer items-center gap-3"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void navigator.clipboard.writeText(`${token}._domainkey${subdomain ? '.' + subdomain : ''}`);
|
void navigator.clipboard.writeText(`${token}._domainkey${subdomain ? '.' + subdomain : ''}`);
|
||||||
toast.success("Copied key to clipboard");
|
toast.success("Copied key to clipboard");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className={"font-mono text-sm"}>{token}._domainkey{subdomain ? '.' + subdomain : ''}</p>
|
<p className={"font-mono text-sm"}>{token}._domainkey{subdomain ? '.' + subdomain : ''}</p>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
Value: (
|
Value: (
|
||||||
<div
|
<div
|
||||||
className={"flex cursor-pointer items-center gap-3"}
|
className={"flex cursor-pointer items-center gap-3"}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
void navigator.clipboard.writeText(`${token}.dkim.amazonses.com`);
|
void navigator.clipboard.writeText(`${token}.dkim.amazonses.com`);
|
||||||
toast.success("Copied value to clipboard");
|
toast.success("Copied value to clipboard");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<p className={"font-mono text-sm"}>{token}.dkim.amazonses.com</p>
|
<p className={"font-mono text-sm"}>{token}.dkim.amazonses.com</p>
|
||||||
<Copy size={14} />
|
<Copy size={14} />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
}),
|
}),
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : activeProject.email && activeProject.verified ? (
|
) : activeProject.email && activeProject.verified ? (
|
||||||
<>
|
<>
|
||||||
<Alert type={"success"} title={"Domain verified"}>
|
<Alert type={"success"} title={"Domain verified"}>
|
||||||
You have confirmed {activeProject.email} as your domain. Any emails sent by Plunk will now use this address.
|
You have confirmed {activeProject.email} as your domain. Any emails sent by Plunk will now use this address.
|
||||||
</Alert>
|
</Alert>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<form onSubmit={handleSubmit(create)} className="space-y-6">
|
<form onSubmit={handleSubmit(create)} className="space-y-6">
|
||||||
<Input register={register("email")} error={errors.email} placeholder={"[email protected]"} label={"Email"} />
|
<Input register={register("email")} error={errors.email} placeholder={"[email protected]"} label={"Email"} />
|
||||||
<motion.button
|
<motion.button
|
||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
whileTap={{ scale: 0.9 }}
|
whileTap={{ scale: 0.9 }}
|
||||||
className={
|
className={
|
||||||
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
||||||
}
|
}
|
||||||
|
>
|
||||||
|
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
d="M12 5.75V18.25"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
d="M18.25 12L5.75 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Verify domain
|
||||||
|
</motion.button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card
|
||||||
|
title={"Sender name"}
|
||||||
|
description={
|
||||||
|
"The name that will be used when sending emails from Plunk. Your project name will be used by default"
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
|
<form onSubmit={handleSubmitUpdate(update)} className="space-y-6">
|
||||||
<path
|
<Input
|
||||||
stroke="currentColor"
|
register={registerUpdate("from")}
|
||||||
strokeLinecap="round"
|
placeholder={activeProject.name}
|
||||||
strokeLinejoin="round"
|
label={"Name"}
|
||||||
strokeWidth="1.5"
|
error={errorsUpdate.from}
|
||||||
d="M12 5.75V18.25"
|
/>
|
||||||
/>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
d="M18.25 12L5.75 12"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Verify domain
|
|
||||||
</motion.button>
|
|
||||||
</form>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card
|
<motion.button
|
||||||
title={"Sender name"}
|
whileHover={{ scale: 1.05 }}
|
||||||
description={
|
whileTap={{ scale: 0.9 }}
|
||||||
"The name that will be used when sending emails from Plunk. Your project name will be used by default"
|
className={
|
||||||
}
|
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
||||||
>
|
}
|
||||||
<form onSubmit={handleSubmitUpdate(update)} className="space-y-6">
|
>
|
||||||
<Input
|
Save
|
||||||
register={registerUpdate("from")}
|
</motion.button>
|
||||||
placeholder={activeProject.name}
|
</form>
|
||||||
label={"Name"}
|
</Card>
|
||||||
error={errorsUpdate.from}
|
</Dashboard>
|
||||||
/>
|
</>
|
||||||
|
);
|
||||||
<motion.button
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
className={
|
|
||||||
"ml-auto flex items-center gap-x-0.5 rounded bg-neutral-800 px-8 py-2 text-center text-sm font-medium text-white"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</motion.button>
|
|
||||||
</form>
|
|
||||||
</Card>
|
|
||||||
</Dashboard>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user