323 lines
15 KiB
TypeScript
323 lines
15 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { IdentitySchemas, type UtilitySchemas } from "@plunk/shared";
|
|
import { motion } from "framer-motion";
|
|
import { Copy, Unlink } from "lucide-react";
|
|
import React, { useEffect } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "sonner";
|
|
import { Alert, Badge, Card, FullscreenLoader, Input, SettingTabs, Table } from "../../components";
|
|
import { Dashboard } from "../../layouts";
|
|
import { AWS_REGION } from "../../lib/constants";
|
|
import { useActiveProject, useActiveProjectVerifiedIdentity, useProjects } from "../../lib/hooks/projects";
|
|
import { network } from "../../lib/network";
|
|
|
|
interface EmailValues {
|
|
email: string;
|
|
}
|
|
|
|
interface FromValues {
|
|
from: string;
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export default function Index() {
|
|
const activeProject = useActiveProject();
|
|
const { mutate: projectsMutate } = useProjects();
|
|
const { data: identity, mutate: identityMutate } = useActiveProjectVerifiedIdentity();
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm<EmailValues>({
|
|
resolver: zodResolver(IdentitySchemas.create.omit({ id: true })),
|
|
});
|
|
|
|
const {
|
|
register: registerUpdate,
|
|
handleSubmit: handleSubmitUpdate,
|
|
formState: { errors: errorsUpdate },
|
|
reset,
|
|
} = useForm<FromValues>({
|
|
resolver: zodResolver(IdentitySchemas.update.omit({ id: true })),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!activeProject) {
|
|
return;
|
|
}
|
|
|
|
reset({ from: activeProject.from ?? undefined });
|
|
}, [reset, activeProject]);
|
|
|
|
if (!activeProject || !identity) {
|
|
return <FullscreenLoader />;
|
|
}
|
|
|
|
const create = async (data: EmailValues) => {
|
|
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();
|
|
|
|
return "Added your domain";
|
|
},
|
|
error: "Could not add domain",
|
|
},
|
|
);
|
|
};
|
|
|
|
const update = async (data: FromValues) => {
|
|
toast.promise(
|
|
network.fetch<
|
|
{
|
|
success: true;
|
|
},
|
|
typeof IdentitySchemas.update
|
|
>("PUT", "/projects/update/identity", {
|
|
id: activeProject.id,
|
|
...data,
|
|
}),
|
|
{
|
|
loading: "Updating your sender name",
|
|
success: () => {
|
|
void projectsMutate();
|
|
|
|
return 'Updated your sender name';
|
|
},
|
|
error: "Could not update sender name",
|
|
},
|
|
);
|
|
};
|
|
|
|
const unlink = async () => {
|
|
toast.promise(
|
|
network.fetch<
|
|
{
|
|
success: true;
|
|
},
|
|
typeof UtilitySchemas.id
|
|
>("POST", "/identities/reset", {
|
|
id: activeProject.id,
|
|
}),
|
|
{
|
|
loading: "Unlinking your domain",
|
|
success: () => {
|
|
void projectsMutate();
|
|
|
|
return 'Unlinked your domain';
|
|
},
|
|
error: "Could not unlink domain",
|
|
},
|
|
);
|
|
};
|
|
|
|
const domain = activeProject.email?.split("@")[1] ?? "";
|
|
const subdomain = domain.split(".").length > 2 ? domain.split(".")[0] : "";
|
|
|
|
return (
|
|
<>
|
|
<Dashboard>
|
|
<SettingTabs />
|
|
|
|
<Card
|
|
title={"Domain"}
|
|
description={"By sending emails from your own domain you build up domain authority and trust."}
|
|
actions={
|
|
activeProject.email && (
|
|
<>
|
|
<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} />
|
|
Unlink domain
|
|
</button>
|
|
</>
|
|
)
|
|
}
|
|
>
|
|
{activeProject.email && !activeProject.verified ? (
|
|
<>
|
|
<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">
|
|
<Table
|
|
values={[
|
|
{
|
|
Type: <Badge type={"info"}>TXT</Badge>,
|
|
Key: (
|
|
<div
|
|
className={"flex cursor-pointer items-center gap-3"}
|
|
onClick={() => {
|
|
void navigator.clipboard.writeText("plunk");
|
|
toast.success("Copied key to clipboard");
|
|
}}
|
|
>
|
|
<p className={"font-mono text-sm"}>plunk</p>
|
|
<Copy size={14} />
|
|
</div>
|
|
),
|
|
Value: (
|
|
<div
|
|
className={"flex cursor-pointer items-center gap-3"}
|
|
onClick={() => {
|
|
void navigator.clipboard.writeText("v=spf1 include:amazonses.com ~all");
|
|
toast.success("Copied value to clipboard");
|
|
}}
|
|
>
|
|
<p className={"font-mono text-sm"}>v=spf1 include:amazonses.com ~all</p> <Copy size={14} />
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
type: <Badge type={"info"}>MX</Badge>,
|
|
Key: (
|
|
<div
|
|
className={"flex cursor-pointer items-center gap-3"}
|
|
onClick={() => {
|
|
void navigator.clipboard.writeText("plunk");
|
|
toast.success("Copied key to clipboard");
|
|
}}
|
|
>
|
|
<p className={"font-mono text-sm"}>plunk</p>
|
|
<Copy size={14} />
|
|
</div>
|
|
),
|
|
Value: (
|
|
<div
|
|
className={"flex cursor-pointer items-center gap-3"}
|
|
onClick={() => {
|
|
void navigator.clipboard.writeText(`10 feedback-smtp.${AWS_REGION}.amazonses.com`);
|
|
toast.success("Copied value to clipboard");
|
|
}}
|
|
>
|
|
<p className={"font-mono text-sm"}>10 feedback-smtp.{AWS_REGION}.amazonses.com</p>
|
|
<Copy size={14} />
|
|
</div>
|
|
),
|
|
},
|
|
...identity.tokens.map((token) => {
|
|
return {
|
|
Type: <Badge type={"info"}>CNAME</Badge>,
|
|
Key: (
|
|
<div
|
|
className={"flex cursor-pointer items-center gap-3"}
|
|
onClick={() => {
|
|
void navigator.clipboard.writeText(`${token}._domainkey${subdomain ? '.' + subdomain : ''}`);
|
|
toast.success("Copied key to clipboard");
|
|
}}
|
|
>
|
|
<p className={"font-mono text-sm"}>{token}._domainkey{subdomain ? '.' + subdomain : ''}</p>
|
|
<Copy size={14} />
|
|
</div>
|
|
),
|
|
Value: (
|
|
<div
|
|
className={"flex cursor-pointer items-center gap-3"}
|
|
onClick={() => {
|
|
void navigator.clipboard.writeText(`${token}.dkim.amazonses.com`);
|
|
toast.success("Copied value to clipboard");
|
|
}}
|
|
>
|
|
<p className={"font-mono text-sm"}>{token}.dkim.amazonses.com</p>
|
|
<Copy size={14} />
|
|
</div>
|
|
),
|
|
};
|
|
}),
|
|
]}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : activeProject.email && activeProject.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.
|
|
</Alert>
|
|
</>
|
|
) : (
|
|
<>
|
|
<form onSubmit={handleSubmit(create)} className="space-y-6">
|
|
<Input register={register("email")} error={errors.email} placeholder={"[email protected]"} label={"Email"} />
|
|
<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"
|
|
}
|
|
>
|
|
<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"
|
|
}
|
|
>
|
|
<form onSubmit={handleSubmitUpdate(update)} className="space-y-6">
|
|
<Input
|
|
register={registerUpdate("from")}
|
|
placeholder={activeProject.name}
|
|
label={"Name"}
|
|
error={errorsUpdate.from}
|
|
/>
|
|
|
|
<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>
|
|
</>
|
|
);
|
|
}
|