gsadmin/dokploy
1
0
Fork 0
mirror of https://github.com/Dokploy/dokploy.git synced 2026-10-15 13:21:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(notifications): add build failed and invitation emails from react-email

Browse Source
This commit is contained in:
Mauricio Siu
2024-07-14 02:49:21 -06:00
parent 5fadd73732
commit 79ad0818f5
38 changed files with 15799 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/settings/cluster/registry/add-docker-registry.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ export const AddRegistry = () => {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button>
<Button className="max-sm:w-full">
<Container className="h-4 w-4" />
Create Registry
</Button>
components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx
+1 -1
View File
@@ -88,7 +88,7 @@ export const AddSelfHostedRegistry = () => {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button>
<Button className="max-sm:w-full">
<Container className="h-4 w-4" />
Enable Self Hosted Registry
</Button>
components/dashboard/settings/cluster/registry/show-registry.tsx
+2 -2
View File
@@ -42,11 +42,11 @@ export const ShowRegistry = () => {
{data?.length === 0 ? (
<div className="flex flex-col items-center gap-3">
<Server className="size-8 self-center text-muted-foreground" />
<span className="text-base text-muted-foreground">
<span className="text-base text-muted-foreground text-center">
To create a cluster is required to set a registry.
</span>
<div className="flex flex-row gap-2">
<div className="flex flex-row md:flex-row gap-2 flex-wrap w-full justify-center">
<AddSelfHostedRegistry />
<AddRegistry />
</div>
components/dashboard/settings/notifications/add-notification.tsx
+187 -128
View File
@@ -34,8 +34,10 @@ import {
} from "@/components/icons/notification-icons";
import { Switch } from "@/components/ui/switch";
const baseDatabaseSchema = z.object({
name: z.string().min(1, "Name required"),
const notificationBaseSchema = z.object({
name: z.string().min(1, {
message: "Name is required",
}),
appDeploy: z.boolean().default(false),
userJoin: z.boolean().default(false),
appBuilderError: z.boolean().default(false),
@@ -43,41 +45,47 @@ const baseDatabaseSchema = z.object({
dokployRestart: z.boolean().default(false),
});
const mySchema = z.discriminatedUnion("type", [
export const notificationSchema = z.discriminatedUnion("type", [
z
.object({
type: z.literal("slack"),
webhookUrl: z.string().min(1),
channel: z.string().min(1),
webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
channel: z.string(),
})
.merge(baseDatabaseSchema),
.merge(notificationBaseSchema),
z
.object({
type: z.literal("telegram"),
botToken: z.string().min(1),
chatId: z.string().min(1),
botToken: z.string().min(1, { message: "Bot Token is required" }),
chatId: z.string().min(1, { message: "Chat ID is required" }),
})
.merge(baseDatabaseSchema),
.merge(notificationBaseSchema),
z
.object({
type: z.literal("discord"),
webhookUrl: z.string().min(1),
webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
})
.merge(baseDatabaseSchema),
.merge(notificationBaseSchema),
z
.object({
type: z.literal("email"),
smtpServer: z.string().min(1),
smtpPort: z.string().min(1),
username: z.string().min(1),
password: z.string().min(1),
fromAddress: z.string().min(1),
toAddresses: z.array(z.string()).min(1),
smtpServer: z.string().min(1, { message: "SMTP Server is required" }),
smtpPort: z.number().min(1, { message: "SMTP Port is required" }),
username: z.string().min(1, { message: "Username is required" }),
password: z.string().min(1, { message: "Password is required" }),
fromAddress: z.string().min(1, { message: "From Address is required" }),
toAddresses: z
.array(
z.string().min(1, { message: "Email is required" }).email({
message: "Email is invalid",
}),
)
.min(1, { message: "At least one email is required" }),
})
.merge(baseDatabaseSchema),
.merge(notificationBaseSchema),
]);
const notificationsMap = {
export const notificationsMap = {
slack: {
icon: <SlackIcon />,
label: "Slack",
@@ -96,31 +104,40 @@ const notificationsMap = {
},
};
type AddNotification = z.infer<typeof mySchema>;
export type NotificationSchema = z.infer<typeof notificationSchema>;
export const AddNotification = () => {
const utils = api.useUtils();
const [visible, setVisible] = useState(false);
const { mutateAsync: testConnection, isLoading: isLoadingConnection } =
api.notification.testConnection.useMutation();
const { mutateAsync: testSlackConnection, isLoading: isLoadingSlack } =
api.notification.testSlackConnection.useMutation();
const { mutateAsync: testTelegramConnection, isLoading: isLoadingTelegram } =
api.notification.testTelegramConnection.useMutation();
const { mutateAsync: testDiscordConnection, isLoading: isLoadingDiscord } =
api.notification.testDiscordConnection.useMutation();
const { mutateAsync: testEmailConnection, isLoading: isLoadingEmail } =
api.notification.testEmailConnection.useMutation();
const slackMutation = api.notification.createSlack.useMutation();
const telegramMutation = api.notification.createTelegram.useMutation();
const discordMutation = api.notification.createDiscord.useMutation();
const emailMutation = api.notification.createEmail.useMutation();
const form = useForm<AddNotification>({
const form = useForm<NotificationSchema>({
defaultValues: {
type: "slack",
webhookUrl: "",
channel: "",
name: "",
},
resolver: zodResolver(mySchema),
resolver: zodResolver(notificationSchema),
});
const type = form.watch("type");
const { fields, append, remove } = useFieldArray({
control: form.control,
name: "toAddresses",
name: "toAddresses" as never,
});
useEffect(() => {
@@ -140,7 +157,7 @@ export const AddNotification = () => {
email: emailMutation,
};
const onSubmit = async (data: AddNotification) => {
const onSubmit = async (data: NotificationSchema) => {
const {
appBuilderError,
appDeploy,
@@ -226,8 +243,6 @@ export const AddNotification = () => {
Create new notifications providers for multiple
</DialogDescription>
</DialogHeader>
{/* {isError && <AlertBlock type="error">{error?.message}</AlertBlock>} */}
<Form {...form}>
<form
id="hook-form"
@@ -405,68 +420,86 @@ export const AddNotification = () => {
{type === "email" && (
<>
<FormField
control={form.control}
name="smtpServer"
render={({ field }) => (
<FormItem>
<FormLabel>SMTP Server</FormLabel>
<FormControl>
<Input placeholder="smtp.gmail.com" {...field} />
</FormControl>
<div className="flex md:flex-row flex-col gap-2 w-full">
<FormField
control={form.control}
name="smtpServer"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>SMTP Server</FormLabel>
<FormControl>
<Input placeholder="smtp.gmail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="smtpPort"
render={({ field }) => (
<FormItem>
<FormLabel>SMTP Port</FormLabel>
<FormControl>
<Input placeholder="587" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="smtpPort"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>SMTP Port</FormLabel>
<FormControl>
<Input
placeholder="587"
{...field}
onChange={(e) => {
const value = e.target.value;
if (value) {
const port = Number.parseInt(value);
if (port > 0 && port < 65536) {
field.onChange(port);
}
}
}}
type="number"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="username" {...field} />
</FormControl>
<div className="flex md:flex-row flex-col gap-2 w-full">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="username" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="******************"
{...field}
/>
</FormControl>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="******************"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="fromAddress"
@@ -480,21 +513,6 @@ export const AddNotification = () => {
</FormItem>
)}
/>
{/* <FormField
control={form.control}
name="toAddresses"
render={({ field }) => (
<FormItem>
<FormLabel>To Addresses</FormLabel>
<FormControl>
<Input placeholder="email@example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/> */}
<div className="flex flex-col gap-2 pt-2">
<FormLabel>To Addresses</FormLabel>
@@ -531,6 +549,12 @@ export const AddNotification = () => {
</Button>
</div>
))}
{type === "email" &&
"toAddresses" in form.formState.errors && (
<div className="text-sm font-medium text-destructive">
{form.formState?.errors?.toAddresses?.root?.message}
</div>
)}
</div>
<Button
@@ -546,18 +570,18 @@ export const AddNotification = () => {
)}
</div>
</div>
<div className="flex flex-col">
<div className="flex flex-col gap-4">
<FormLabel className="text-lg font-semibold leading-none tracking-tight">
Select the actions.
</FormLabel>
<div className="grid grid-cols-2 gap-4">
<div className="grid md:grid-cols-2 gap-4">
<FormField
control={form.control}
name="appDeploy"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<div className="space-y-0.5">
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="">
<FormLabel>App Deploy</FormLabel>
<FormDescription>
Trigger the action when a app is deployed.
@@ -576,7 +600,7 @@ export const AddNotification = () => {
control={form.control}
name="userJoin"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>User Join</FormLabel>
<FormDescription>
@@ -596,7 +620,7 @@ export const AddNotification = () => {
control={form.control}
name="databaseBackup"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>Database Backup</FormLabel>
<FormDescription>
@@ -612,11 +636,12 @@ export const AddNotification = () => {
</FormItem>
)}
/>
<FormField
control={form.control}
name="dokployRestart"
render={({ field }) => (
<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>Deploy Restart</FormLabel>
<FormDescription>
@@ -632,38 +657,72 @@ export const AddNotification = () => {
</FormItem>
)}
/>
<FormField
control={form.control}
name="appBuilderError"
render={({ field }) => (
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>App Builder Error</FormLabel>
<FormDescription>
Trigger the action when the build fails.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
</div>
</div>
</form>
<DialogFooter className="flex flex-row gap-2 !justify-between w-full">
<Button
isLoading={isLoadingConnection}
isLoading={
isLoadingSlack ||
isLoadingTelegram ||
isLoadingDiscord ||
isLoadingEmail
}
variant="secondary"
onClick={async () => {
await testConnection({
webhookUrl: form.getValues("webhookUrl"),
channel: form.getValues("channel"),
notificationType: type,
botToken: form.getValues("botToken"),
chatId: form.getValues("chatId"),
//
smtpPort: form.getValues("smtpPort"),
smtpServer: form.getValues("smtpServer"),
username: form.getValues("username"),
password: form.getValues("password"),
toAddresses: form.getValues("toAddresses"),
fromAddress: form.getValues("fromAddress"),
})
.then(async () => {
toast.success("Connection Success");
})
.catch(() => {
toast.error("Error to connect the provider");
});
try {
if (type === "slack") {
await testSlackConnection({
webhookUrl: form.getValues("webhookUrl"),
channel: form.getValues("channel"),
});
} else if (type === "telegram") {
await testTelegramConnection({
botToken: form.getValues("botToken"),
chatId: form.getValues("chatId"),
});
} else if (type === "discord") {
await testDiscordConnection({
webhookUrl: form.getValues("webhookUrl"),
});
} else if (type === "email") {
await testEmailConnection({
smtpServer: form.getValues("smtpServer"),
smtpPort: form.getValues("smtpPort"),
username: form.getValues("username"),
password: form.getValues("password"),
toAddresses: form.getValues("toAddresses"),
fromAddress: form.getValues("fromAddress"),
});
}
toast.success("Connection Success");
} catch (err) {
toast.error("Error to test the provider");
}
}}
>
Send Test
Test Notification
</Button>
<Button
isLoading={form.formState.isSubmitting}
components/dashboard/settings/notifications/show-notifications.tsx
+46 -20
View File
@@ -6,9 +6,15 @@ import {
CardTitle,
} from "@/components/ui/card";
import { api } from "@/utils/api";
import { BellRing } from "lucide-react";
import { BellRing, Mail } from "lucide-react";
import { AddNotification } from "./add-notification";
import { DeleteNotification } from "./delete-notification";
import {
DiscordIcon,
SlackIcon,
TelegramIcon,
} from "@/components/icons/notification-icons";
import { UpdateNotification } from "./update-notification";
export const ShowNotifications = () => {
const { data } = api.notification.all.useQuery();
@@ -20,7 +26,7 @@ export const ShowNotifications = () => {
<CardTitle className="text-xl">Notifications</CardTitle>
<CardDescription>
Add your providers to receive notifications, like Discord, Slack,
Telegram, Email, etc.
Telegram, Email.
</CardDescription>
</CardHeader>
<CardContent className="space-y-2 pt-4">
@@ -34,25 +40,45 @@ export const ShowNotifications = () => {
</div>
) : (
<div className="flex flex-col gap-4">
{data?.map((destination, index) => (
<div
key={destination.notificationId}
className="flex items-center justify-between border p-3.5 rounded-lg"
>
<span className="text-sm text-muted-foreground">
{index + 1}. {destination.name}
</span>
<div className="flex flex-row gap-1">
{/* <UpdateDestination
destinationId={destination.destinationId}
/> */}
<DeleteNotification
notificationId={destination.notificationId}
/>
<div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-4">
{data?.map((notification, index) => (
<div
key={notification.notificationId}
className="flex items-center justify-between border gap-2 p-3.5 rounded-lg"
>
<div className="flex flex-row gap-2 items-center w-full ">
{notification.notificationType === "slack" && (
<SlackIcon className="text-muted-foreground size-6 flex-shrink-0" />
)}
{notification.notificationType === "telegram" && (
<TelegramIcon className="text-muted-foreground size-8 flex-shrink-0" />
)}
{notification.notificationType === "discord" && (
<DiscordIcon className="text-muted-foreground size-7 flex-shrink-0" />
)}
{notification.notificationType === "email" && (
<Mail
size={29}
className="text-muted-foreground size-6 flex-shrink-0"
/>
)}
<span className="text-sm text-muted-foreground">
{notification.name}
</span>
</div>
<div className="flex flex-row gap-1 w-fit">
<UpdateNotification
notificationId={notification.notificationId}
/>
<DeleteNotification
notificationId={notification.notificationId}
/>
</div>
</div>
</div>
))}
<div>
))}
</div>
<div className="flex flex-col gap-4 justify-end w-full items-end">
<AddNotification />
</div>
</div>
components/dashboard/settings/notifications/update-notification.tsx
+686
View File
@@ -0,0 +1,686 @@
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { api } from "@/utils/api";
import { zodResolver } from "@hookform/resolvers/zod";
import { Mail, PenBoxIcon } from "lucide-react";
import { useEffect } from "react";
import { FieldErrors, useFieldArray, useForm } from "react-hook-form";
import { toast } from "sonner";
import { Switch } from "@/components/ui/switch";
import {
TelegramIcon,
DiscordIcon,
SlackIcon,
} from "@/components/icons/notification-icons";
import {
notificationSchema,
type NotificationSchema,
} from "./add-notification";
interface Props {
notificationId: string;
}
export const UpdateNotification = ({ notificationId }: Props) => {
const utils = api.useUtils();
const { data, refetch } = api.notification.one.useQuery(
{
notificationId,
},
{
enabled: !!notificationId,
},
);
const { mutateAsync: testSlackConnection, isLoading: isLoadingSlack } =
api.notification.testSlackConnection.useMutation();
const { mutateAsync: testTelegramConnection, isLoading: isLoadingTelegram } =
api.notification.testTelegramConnection.useMutation();
const { mutateAsync: testDiscordConnection, isLoading: isLoadingDiscord } =
api.notification.testDiscordConnection.useMutation();
const { mutateAsync: testEmailConnection, isLoading: isLoadingEmail } =
api.notification.testEmailConnection.useMutation();
const slackMutation = api.notification.updateSlack.useMutation();
const telegramMutation = api.notification.updateTelegram.useMutation();
const discordMutation = api.notification.updateDiscord.useMutation();
const emailMutation = api.notification.updateEmail.useMutation();
const form = useForm<NotificationSchema>({
defaultValues: {
type: "slack",
webhookUrl: "",
channel: "",
},
resolver: zodResolver(notificationSchema),
});
const type = form.watch("type");
const { fields, append, remove } = useFieldArray({
control: form.control,
name: "toAddresses" as never,
});
useEffect(() => {
if (data) {
if (data.notificationType === "slack") {
form.reset({
appBuilderError: data.appBuildError,
appDeploy: data.appDeploy,
dokployRestart: data.dokployRestart,
databaseBackup: data.databaseBackup,
userJoin: data.userJoin,
webhookUrl: data.slack?.webhookUrl,
channel: data.slack?.channel || "",
name: data.name,
type: data.notificationType,
});
} else if (data.notificationType === "telegram") {
form.reset({
appBuilderError: data.appBuildError,
appDeploy: data.appDeploy,
dokployRestart: data.dokployRestart,
databaseBackup: data.databaseBackup,
userJoin: data.userJoin,
botToken: data.telegram?.botToken,
chatId: data.telegram?.chatId,
type: data.notificationType,
name: data.name,
});
} else if (data.notificationType === "discord") {
form.reset({
appBuilderError: data.appBuildError,
appDeploy: data.appDeploy,
dokployRestart: data.dokployRestart,
databaseBackup: data.databaseBackup,
userJoin: data.userJoin,
type: data.notificationType,
webhookUrl: data.discord?.webhookUrl,
name: data.name,
});
} else if (data.notificationType === "email") {
form.reset({
appBuilderError: data.appBuildError,
appDeploy: data.appDeploy,
dokployRestart: data.dokployRestart,
databaseBackup: data.databaseBackup,
type: data.notificationType,
userJoin: data.userJoin,
smtpServer: data.email?.smtpServer,
smtpPort: data.email?.smtpPort,
username: data.email?.username,
password: data.email?.password,
toAddresses: data.email?.toAddresses,
fromAddress: data.email?.fromAddress,
name: data.name,
});
}
}
}, [form, form.reset, data]);
const onSubmit = async (formData: NotificationSchema) => {
const {
appBuilderError,
appDeploy,
dokployRestart,
databaseBackup,
userJoin,
} = formData;
let promise: Promise<unknown> | null = null;
if (formData?.type === "slack" && data?.slackId) {
promise = slackMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
webhookUrl: formData.webhookUrl,
channel: formData.channel,
name: formData.name,
notificationId: notificationId,
slackId: data?.slackId,
});
} else if (formData.type === "telegram" && data?.telegramId) {
promise = telegramMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
botToken: formData.botToken,
chatId: formData.chatId,
name: formData.name,
notificationId: notificationId,
telegramId: data?.telegramId,
});
} else if (formData.type === "discord" && data?.discordId) {
promise = discordMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
webhookUrl: formData.webhookUrl,
name: formData.name,
notificationId: notificationId,
discordId: data?.discordId,
});
} else if (formData.type === "email" && data?.emailId) {
promise = emailMutation.mutateAsync({
appBuildError: appBuilderError,
appDeploy: appDeploy,
dokployRestart: dokployRestart,
databaseBackup: databaseBackup,
userJoin: userJoin,
smtpServer: formData.smtpServer,
smtpPort: formData.smtpPort,
username: formData.username,
password: formData.password,
fromAddress: formData.fromAddress,
toAddresses: formData.toAddresses,
name: formData.name,
notificationId: notificationId,
emailId: data?.emailId,
});
}
if (promise) {
await promise
.then(async () => {
toast.success("Notification Updated");
await utils.notification.all.invalidate();
refetch();
})
.catch(() => {
toast.error("Error to update a notification");
});
}
};
return (
<Dialog>
<DialogTrigger className="" asChild>
<Button variant="ghost">
<PenBoxIcon className="size-4 text-muted-foreground" />
</Button>
</DialogTrigger>
<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
<DialogHeader>
<DialogTitle>Update Notification</DialogTitle>
<DialogDescription>
Update the current notification config
</DialogDescription>
</DialogHeader>
<Form {...form}>
<form
id="hook-form"
onSubmit={form.handleSubmit(onSubmit)}
className="grid w-full gap-8 "
>
<div className="flex flex-col gap-4 ">
<div className="flex flex-row gap-2 w-full items-center">
<div className="flex flex-row gap-2 items-center w-full ">
<FormLabel className="text-lg font-semibold leading-none tracking-tight flex">
{data?.notificationType === "slack"
? "Slack"
: data?.notificationType === "telegram"
? "Telegram"
: data?.notificationType === "discord"
? "Discord"
: "Email"}
</FormLabel>
</div>
{data?.notificationType === "slack" && (
<SlackIcon className="text-muted-foreground size-6 flex-shrink-0" />
)}
{data?.notificationType === "telegram" && (
<TelegramIcon className="text-muted-foreground size-8 flex-shrink-0" />
)}
{data?.notificationType === "discord" && (
<DiscordIcon className="text-muted-foreground size-7 flex-shrink-0" />
)}
{data?.notificationType === "email" && (
<Mail
size={29}
className="text-muted-foreground size-6 flex-shrink-0"
/>
)}
</div>
<div className="flex flex-col gap-2">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{type === "slack" && (
<>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Webhook URL</FormLabel>
<FormControl>
<Input
placeholder="https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="channel"
render={({ field }) => (
<FormItem>
<FormLabel>Channel</FormLabel>
<FormControl>
<Input placeholder="Channel" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{type === "telegram" && (
<>
<FormField
control={form.control}
name="botToken"
render={({ field }) => (
<FormItem>
<FormLabel>Bot Token</FormLabel>
<FormControl>
<Input
placeholder="6660491268:AAFMGmajZOVewpMNZCgJr5H7cpXpoZPgvXw"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="chatId"
render={({ field }) => (
<FormItem>
<FormLabel>Chat ID</FormLabel>
<FormControl>
<Input placeholder="431231869" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{type === "discord" && (
<>
<FormField
control={form.control}
name="webhookUrl"
render={({ field }) => (
<FormItem>
<FormLabel>Webhook URL</FormLabel>
<FormControl>
<Input
placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</>
)}
{type === "email" && (
<>
<div className="flex md:flex-row flex-col gap-2 w-full">
<FormField
control={form.control}
name="smtpServer"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>SMTP Server</FormLabel>
<FormControl>
<Input placeholder="smtp.gmail.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="smtpPort"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>SMTP Port</FormLabel>
<FormControl>
<Input placeholder="587" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="flex md:flex-row flex-col gap-2 w-full">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="username" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem className="w-full">
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="******************"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="fromAddress"
render={({ field }) => (
<FormItem>
<FormLabel>From Address</FormLabel>
<FormControl>
<Input placeholder="from@example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex flex-col gap-2 pt-2">
<FormLabel>To Addresses</FormLabel>
{fields.map((field, index) => (
<div
key={field.id}
className="flex flex-row gap-2 w-full"
>
<FormField
control={form.control}
name={`toAddresses.${index}`}
render={({ field }) => (
<FormItem className="w-full">
<FormControl>
<Input
placeholder="email@example.com"
className="w-full"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
variant="outline"
type="button"
onClick={() => {
remove(index);
}}
>
Remove
</Button>
</div>
))}
{type === "email" &&
"toAddresses" in form.formState.errors && (
<div className="text-sm font-medium text-destructive">
{form.formState?.errors?.toAddresses?.root?.message}
</div>
)}
</div>
<Button
variant="outline"
type="button"
onClick={() => {
append("");
}}
>
Add
</Button>
</>
)}
</div>
</div>
<div className="flex flex-col gap-4">
<FormLabel className="text-lg font-semibold leading-none tracking-tight">
Select the actions.
</FormLabel>
<div className="grid md:grid-cols-2 gap-4">
<FormField
control={form.control}
defaultValue={form.control._defaultValues.appDeploy}
name="appDeploy"
render={({ field }) => (
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>App Deploy</FormLabel>
<FormDescription>
Trigger the action when a app is deployed.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
defaultValue={form.control._defaultValues.userJoin}
name="userJoin"
render={({ field }) => (
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>User Join</FormLabel>
<FormDescription>
Trigger the action when a user joins the app.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
name="databaseBackup"
defaultValue={form.control._defaultValues.databaseBackup}
render={({ field }) => (
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>Database Backup</FormLabel>
<FormDescription>
Trigger the action when a database backup is created.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
defaultValue={form.control._defaultValues.dokployRestart}
name="dokployRestart"
render={({ field }) => (
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>Deploy Restart</FormLabel>
<FormDescription>
Trigger the action when a deploy is restarted.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
<FormField
control={form.control}
defaultValue={form.control._defaultValues.appBuilderError}
name="appBuilderError"
render={({ field }) => (
<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
<div className="space-y-0.5">
<FormLabel>App Builder Error</FormLabel>
<FormDescription>
Trigger the action when the build fails.
</FormDescription>
</div>
<FormControl>
<Switch
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</FormItem>
)}
/>
</div>
</div>
</form>
<DialogFooter className="flex flex-row gap-2 !justify-between w-full">
<Button
isLoading={
isLoadingSlack ||
isLoadingTelegram ||
isLoadingDiscord ||
isLoadingEmail
}
variant="secondary"
onClick={async () => {
try {
if (type === "slack") {
await testSlackConnection({
webhookUrl: form.getValues("webhookUrl"),
channel: form.getValues("channel"),
});
} else if (type === "telegram") {
await testTelegramConnection({
botToken: form.getValues("botToken"),
chatId: form.getValues("chatId"),
});
} else if (type === "discord") {
await testDiscordConnection({
webhookUrl: form.getValues("webhookUrl"),
});
} else if (type === "email") {
await testEmailConnection({
smtpServer: form.getValues("smtpServer"),
smtpPort: form.getValues("smtpPort"),
username: form.getValues("username"),
password: form.getValues("password"),
toAddresses: form.getValues("toAddresses"),
fromAddress: form.getValues("fromAddress"),
});
}
toast.success("Connection Success");
} catch (err) {
toast.error("Error to test the provider");
}
}}
>
Test Notification
</Button>
<Button
isLoading={form.formState.isSubmitting}
form="hook-form"
type="submit"
>
Update
</Button>
</DialogFooter>
</Form>
</DialogContent>
</Dialog>
);
};
components/icons/notification-icons.tsx
+30 -30
View File
@@ -1,34 +1,34 @@
import { cn } from "@/lib/utils";
interface Props {
className?: string;
}
export const SlackIcon = ({ className }: Props) => {
return (
<>
<svg
viewBox="0 0 2447.6 2452.5"
className="size-8"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-rule="evenodd" fill-rule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="#36c5f0"
/>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="#2eb67d"
/>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="#ecb22e"
/>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="#e01e5a"
/>
</g>
</svg>
</>
<svg
viewBox="0 0 2447.6 2452.5"
className={cn("size-8", className)}
xmlns="http://www.w3.org/2000/svg"
>
<g clipRule="evenodd" fillRule="evenodd">
<path
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
fill="#36c5f0"
/>
<path
d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
fill="#2eb67d"
/>
<path
d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
fill="#ecb22e"
/>
<path
d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
fill="#e01e5a"
/>
</g>
</svg>
);
};
@@ -39,7 +39,7 @@ export const TelegramIcon = ({ className }: Props) => {
viewBox="0 0 48 48"
width="48px"
height="48px"
className="size-9"
className={cn("size-9", className)}
>
<linearGradient
id="BiF7D16UlC0RZ_VqXJHnXa"
@@ -49,8 +49,8 @@ export const TelegramIcon = ({ className }: Props) => {
y2="38.142"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#33bef0" />
<stop offset="1" stop-color="#0a85d9" />
<stop offset="0" stopColor="#33bef0" />
<stop offset="1" stopColor="#0a85d9" />
</linearGradient>
<path
fill="url(#BiF7D16UlC0RZ_VqXJHnXa)"
@@ -79,7 +79,7 @@ export const DiscordIcon = ({ className }: Props) => {
viewBox="0 0 48 48"
width="48px"
height="48px"
className="size-9"
className={cn("size-9", className)}
>
<path
fill="#536dfe"
drizzle/0022_keen_norrin_radd.sql
+1
View File
@@ -0,0 +1 @@
ALTER TABLE "slack" ALTER COLUMN "channel" DROP NOT NULL;
drizzle/0023_military_korg.sql
+1
View File
@@ -0,0 +1 @@
ALTER TABLE "email" ALTER COLUMN "smtpServer" SET DATA TYPE integer;
drizzle/0024_bored_the_hand.sql
+2
View File
@@ -0,0 +1,2 @@
ALTER TABLE "email" ALTER COLUMN "smtpServer" SET DATA TYPE text;--> statement-breakpoint
ALTER TABLE "email" ALTER COLUMN "smtpPort" SET DATA TYPE integer;
drizzle/meta/0022_snapshot.json
+2919
View File
File diff suppressed because it is too large Load Diff
drizzle/meta/0023_snapshot.json
+2919
View File
File diff suppressed because it is too large Load Diff
drizzle/meta/0024_snapshot.json
+2919
View File
File diff suppressed because it is too large Load Diff
drizzle/meta/_journal.json
+21
View File
@@ -155,6 +155,27 @@
"when": 1720768664067,
"tag": "0021_nervous_dragon_lord",
"breakpoints": true
},
{
"idx": 22,
"version": "6",
"when": 1720935190450,
"tag": "0022_keen_norrin_radd",
"breakpoints": true
},
{
"idx": 23,
"version": "6",
"when": 1720937318257,
"tag": "0023_military_korg",
"breakpoints": true
},
{
"idx": 24,
"version": "6",
"when": 1720937370382,
"tag": "0024_bored_the_hand",
"breakpoints": true
}
]
}
emails/.gitignore
+2
View File
@@ -0,0 +1,2 @@
/node_modules
/dist
emails/emails/build-failed.tsx
+108
View File
@@ -0,0 +1,108 @@
import * as React from "react";
import {
Body,
Button,
Container,
Head,
Html,
Link,
Preview,
Section,
Text,
Tailwind,
Img,
Heading,
} from "@react-email/components";
export type TemplateProps = {
projectName: string;
applicationName: string;
applicationType: string;
errorMessage: string;
buildLink: string;
};
export const BuildFailedEmail = ({
projectName = "dokploy",
applicationName = "frontend",
applicationType = "application",
errorMessage = "Error array.length is not a function",
buildLink = "https://dokploy.com/projects/dokploy-test/applications/dokploy-test",
}: TemplateProps) => {
const previewText = `Build failed for ${applicationName}`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind
config={{
theme: {
extend: {
colors: {
brand: "#007291",
},
},
},
}}
>
<Body className="bg-white my-auto mx-auto font-sans px-2">
<Container className="border border-solid border-[#eaeaea] rounded-lg my-[40px] mx-auto p-[20px] max-w-[465px]">
<Section className="mt-[32px]">
<Img
src={
"https://avatars.githubusercontent.com/u/156882017?s=200&v=4"
}
width="50"
height="50"
alt="Dokploy"
className="my-0 mx-auto"
/>
</Section>
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
Build failed for <strong>{applicationName}</strong>
</Heading>
<Text className="text-black text-[14px] leading-[24px]">
Hello,
</Text>
<Text className="text-black text-[14px] leading-[24px]">
Your build for <strong>{applicationName}</strong> failed. Please
check the error message below.
</Text>
<Section className="flex text-black text-[14px] leading-[24px] bg-[#F4F4F5] rounded-lg p-2">
<Text className="!leading-3 font-bold">Details: </Text>
<Text className="!leading-3">
Project Name: <strong>{projectName}</strong>
</Text>
<Text className="!leading-3">
Application Name: <strong>{applicationName}</strong>
</Text>
<Text className="!leading-3">
Application Type: <strong>{applicationType}</strong>
</Text>
</Section>
<Section className="flex text-black text-[14px] mt-4 leading-[24px] bg-[#F4F4F5] rounded-lg p-2">
<Text className="!leading-3 font-bold">Reason: </Text>
<Text className="text-[12px] leading-[24px]">{errorMessage}</Text>
</Section>
<Section className="text-center mt-[32px] mb-[32px]">
<Button
href={buildLink}
className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
>
View build
</Button>
</Section>
<Text className="text-black text-[14px] leading-[24px]">
or copy and paste this URL into your browser:{" "}
<Link href={buildLink} className="text-blue-600 no-underline">
{buildLink}
</Link>
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export default BuildFailedEmail;
emails/emails/invitation.tsx
+96
View File
@@ -0,0 +1,96 @@
import {
Body,
Button,
Container,
Head,
Hr,
Html,
Link,
Preview,
Section,
Text,
Tailwind,
Img,
Heading,
} from "@react-email/components";
export type TemplateProps = {
email: string;
name: string;
};
interface VercelInviteUserEmailProps {
inviteLink: string;
toEmail: string;
}
export const InvitationEmail = ({
inviteLink,
toEmail,
}: VercelInviteUserEmailProps) => {
const previewText = "Join to Dokploy";
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind
config={{
theme: {
extend: {
colors: {
brand: "#007291",
},
},
},
}}
>
<Body className="bg-white my-auto mx-auto font-sans px-2">
<Container className="border border-solid border-[#eaeaea] rounded-lg my-[40px] mx-auto p-[20px] max-w-[465px]">
<Section className="mt-[32px]">
<Img
src={`https://avatars.githubusercontent.com/u/156882017?s=200&v=4`}
width="50"
height="50"
alt="Dokploy"
className="my-0 mx-auto"
/>
</Section>
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
Join to <strong>Dokploy</strong>
</Heading>
<Text className="text-black text-[14px] leading-[24px]">
Hello,
</Text>
<Text className="text-black text-[14px] leading-[24px]">
You have been invited to join <strong>Dokploy</strong>, a platform
that helps for deploying your apps to the cloud.
</Text>
<Section className="text-center mt-[32px] mb-[32px]">
<Button
href={inviteLink}
className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
>
Join the team 🚀
</Button>
</Section>
<Text className="text-black text-[14px] leading-[24px]">
or copy and paste this URL into your browser:{" "}
<Link href={inviteLink} className="text-blue-600 no-underline">
https://dokploy.com
</Link>
</Text>
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
<Text className="text-[#666666] text-[12px] leading-[24px]">
This invitation was intended for {toEmail}. This invite was sent
from <strong className="text-black">dokploy.com</strong>. If you
were not expecting this invitation, you can ignore this email. If
you are concerned about your account's safety, please reply to
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
export default InvitationEmail;
emails/emails/notion-magic-link.tsx
+150
View File
@@ -0,0 +1,150 @@
import {
Body,
Container,
Head,
Heading,
Html,
Img,
Link,
Preview,
Text,
} from "@react-email/components";
import * as React from "react";
interface NotionMagicLinkEmailProps {
loginCode?: string;
}
const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: "";
export const NotionMagicLinkEmail = ({
loginCode,
}: NotionMagicLinkEmailProps) => (
<Html>
<Head />
<Preview>Log in with this magic link</Preview>
<Body style={main}>
<Container style={container}>
<Heading style={h1}>Login</Heading>
<Link
href="https://notion.so"
target="_blank"
style={{
...link,
display: "block",
marginBottom: "16px",
}}
>
Click here to log in with this magic link
</Link>
<Text style={{ ...text, marginBottom: "14px" }}>
Or, copy and paste this temporary login code:
</Text>
<code style={code}>{loginCode}</code>
<Text
style={{
...text,
color: "#ababab",
marginTop: "14px",
marginBottom: "16px",
}}
>
If you didn&apos;t try to login, you can safely ignore this email.
</Text>
<Text
style={{
...text,
color: "#ababab",
marginTop: "12px",
marginBottom: "38px",
}}
>
Hint: You can set a permanent password in Settings & members → My
account.
</Text>
<Img
src={`${baseUrl}/static/notion-logo.png`}
width="32"
height="32"
alt="Notion's Logo"
/>
<Text style={footer}>
<Link
href="https://notion.so"
target="_blank"
style={{ ...link, color: "#898989" }}
>
Notion.so
</Link>
, the all-in-one-workspace
<br />
for your notes, tasks, wikis, and databases.
</Text>
</Container>
</Body>
</Html>
);
NotionMagicLinkEmail.PreviewProps = {
loginCode: "sparo-ndigo-amurt-secan",
} as NotionMagicLinkEmailProps;
export default NotionMagicLinkEmail;
const main = {
backgroundColor: "#ffffff",
};
const container = {
paddingLeft: "12px",
paddingRight: "12px",
margin: "0 auto",
};
const h1 = {
color: "#333",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: "24px",
fontWeight: "bold",
margin: "40px 0",
padding: "0",
};
const link = {
color: "#2754C5",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: "14px",
textDecoration: "underline",
};
const text = {
color: "#333",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: "14px",
margin: "24px 0",
};
const footer = {
color: "#898989",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: "12px",
lineHeight: "22px",
marginTop: "12px",
marginBottom: "24px",
};
const code = {
display: "inline-block",
padding: "16px 4.5%",
width: "90.5%",
backgroundColor: "#f4f4f4",
borderRadius: "5px",
border: "1px solid #eee",
color: "#333",
};
emails/emails/plaid-verify-identity.tsx
+158
View File
@@ -0,0 +1,158 @@
import {
Body,
Container,
Head,
Heading,
Html,
Img,
Link,
Section,
Text,
} from "@react-email/components";
import * as React from "react";
interface PlaidVerifyIdentityEmailProps {
validationCode?: string;
}
const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: "";
export const PlaidVerifyIdentityEmail = ({
validationCode,
}: PlaidVerifyIdentityEmailProps) => (
<Html>
<Head />
<Body style={main}>
<Container style={container}>
<Img
src={`${baseUrl}/static/plaid-logo.png`}
width="212"
height="88"
alt="Plaid"
style={logo}
/>
<Text style={tertiary}>Verify Your Identity</Text>
<Heading style={secondary}>
Enter the following code to finish linking Venmo.
</Heading>
<Section style={codeContainer}>
<Text style={code}>{validationCode}</Text>
</Section>
<Text style={paragraph}>Not expecting this email?</Text>
<Text style={paragraph}>
Contact{" "}
<Link href="mailto:login@plaid.com" style={link}>
login@plaid.com
</Link>{" "}
if you did not request this code.
</Text>
</Container>
<Text style={footer}>Securely powered by Plaid.</Text>
</Body>
</Html>
);
PlaidVerifyIdentityEmail.PreviewProps = {
validationCode: "144833",
} as PlaidVerifyIdentityEmailProps;
export default PlaidVerifyIdentityEmail;
const main = {
backgroundColor: "#ffffff",
fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
};
const container = {
backgroundColor: "#ffffff",
border: "1px solid #eee",
borderRadius: "5px",
boxShadow: "0 5px 10px rgba(20,50,70,.2)",
marginTop: "20px",
maxWidth: "360px",
margin: "0 auto",
padding: "68px 0 130px",
};
const logo = {
margin: "0 auto",
};
const tertiary = {
color: "#0a85ea",
fontSize: "11px",
fontWeight: 700,
fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
height: "16px",
letterSpacing: "0",
lineHeight: "16px",
margin: "16px 8px 8px 8px",
textTransform: "uppercase" as const,
textAlign: "center" as const,
};
const secondary = {
color: "#000",
display: "inline-block",
fontFamily: "HelveticaNeue-Medium,Helvetica,Arial,sans-serif",
fontSize: "20px",
fontWeight: 500,
lineHeight: "24px",
marginBottom: "0",
marginTop: "0",
textAlign: "center" as const,
};
const codeContainer = {
background: "rgba(0,0,0,.05)",
borderRadius: "4px",
margin: "16px auto 14px",
verticalAlign: "middle",
width: "280px",
};
const code = {
color: "#000",
display: "inline-block",
fontFamily: "HelveticaNeue-Bold",
fontSize: "32px",
fontWeight: 700,
letterSpacing: "6px",
lineHeight: "40px",
paddingBottom: "8px",
paddingTop: "8px",
margin: "0 auto",
width: "100%",
textAlign: "center" as const,
};
const paragraph = {
color: "#444",
fontSize: "15px",
fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
letterSpacing: "0",
lineHeight: "23px",
padding: "0 40px",
margin: "0",
textAlign: "center" as const,
};
const link = {
color: "#444",
textDecoration: "underline",
};
const footer = {
color: "#000",
fontSize: "12px",
fontWeight: 800,
letterSpacing: "0",
lineHeight: "23px",
margin: "0",
marginTop: "20px",
fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif",
textAlign: "center" as const,
textTransform: "uppercase" as const,
};
emails/emails/static/notion-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

emails/emails/static/plaid-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

emails/emails/static/plaid.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

emails/emails/static/stripe-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

emails/emails/static/vercel-arrow.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 B

emails/emails/static/vercel-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

emails/emails/static/vercel-team.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

emails/emails/static/vercel-user.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

emails/emails/stripe-welcome.tsx
+152
View File
@@ -0,0 +1,152 @@
import {
Body,
Button,
Container,
Head,
Hr,
Html,
Img,
Link,
Preview,
Section,
Text,
} from "@react-email/components";
import * as React from "react";
const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: "";
export const StripeWelcomeEmail = () => (
<Html>
<Head />
<Preview>You're now ready to make live transactions with Stripe!</Preview>
<Body style={main}>
<Container style={container}>
<Section style={box}>
<Img
src={`${baseUrl}/static/stripe-logo.png`}
width="49"
height="21"
alt="Stripe"
/>
<Hr style={hr} />
<Text style={paragraph}>
Thanks for submitting your account information. You're now ready to
make live transactions with Stripe!
</Text>
<Text style={paragraph}>
You can view your payments and a variety of other information about
your account right from your dashboard.
</Text>
<Button style={button} href="https://dashboard.stripe.com/login">
View your Stripe Dashboard
</Button>
<Hr style={hr} />
<Text style={paragraph}>
If you haven't finished your integration, you might find our{" "}
<Link style={anchor} href="https://stripe.com/docs">
docs
</Link>{" "}
handy.
</Text>
<Text style={paragraph}>
Once you're ready to start accepting payments, you'll just need to
use your live{" "}
<Link
style={anchor}
href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
>
API keys
</Link>{" "}
instead of your test API keys. Your account can simultaneously be
used for both test and live requests, so you can continue testing
while accepting live payments. Check out our{" "}
<Link style={anchor} href="https://stripe.com/docs/dashboard">
tutorial about account basics
</Link>
.
</Text>
<Text style={paragraph}>
Finally, we've put together a{" "}
<Link
style={anchor}
href="https://stripe.com/docs/checklist/website"
>
quick checklist
</Link>{" "}
to ensure your website conforms to card network standards.
</Text>
<Text style={paragraph}>
We'll be here to help you with any step along the way. You can find
answers to most questions and get in touch with us on our{" "}
<Link style={anchor} href="https://support.stripe.com/">
support site
</Link>
.
</Text>
<Text style={paragraph}>— The Stripe team</Text>
<Hr style={hr} />
<Text style={footer}>
Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
</Text>
</Section>
</Container>
</Body>
</Html>
);
export default StripeWelcomeEmail;
const main = {
backgroundColor: "#f6f9fc",
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
};
const container = {
backgroundColor: "#ffffff",
margin: "0 auto",
padding: "20px 0 48px",
marginBottom: "64px",
};
const box = {
padding: "0 48px",
};
const hr = {
borderColor: "#e6ebf1",
margin: "20px 0",
};
const paragraph = {
color: "#525f7f",
fontSize: "16px",
lineHeight: "24px",
textAlign: "left" as const,
};
const anchor = {
color: "#556cd6",
};
const button = {
backgroundColor: "#656ee8",
borderRadius: "5px",
color: "#fff",
fontSize: "16px",
fontWeight: "bold",
textDecoration: "none",
textAlign: "center" as const,
display: "block",
width: "100%",
padding: "10px",
};
const footer = {
color: "#8898aa",
fontSize: "12px",
lineHeight: "16px",
};
emails/emails/vercel-invite-user.tsx
+154
View File
@@ -0,0 +1,154 @@
import {
Body,
Button,
Container,
Column,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Row,
Section,
Text,
Tailwind,
} from "@react-email/components";
import * as React from "react";
interface VercelInviteUserEmailProps {
username?: string;
userImage?: string;
invitedByUsername?: string;
invitedByEmail?: string;
teamName?: string;
teamImage?: string;
inviteLink?: string;
inviteFromIp?: string;
inviteFromLocation?: string;
}
const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: "";
export const VercelInviteUserEmail = ({
username,
userImage,
invitedByUsername,
invitedByEmail,
teamName,
teamImage,
inviteLink,
inviteFromIp,
inviteFromLocation,
}: VercelInviteUserEmailProps) => {
const previewText = `Join ${invitedByUsername} on Vercel`;
return (
<Html>
<Head />
<Preview>{previewText}</Preview>
<Tailwind>
<Body className="bg-white my-auto mx-auto font-sans px-2">
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
<Section className="mt-[32px]">
<Img
src={`${baseUrl}/static/vercel-logo.png`}
width="40"
height="37"
alt="Vercel"
className="my-0 mx-auto"
/>
</Section>
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
Join <strong>{teamName}</strong> on <strong>Vercel</strong>
</Heading>
<Text className="text-black text-[14px] leading-[24px]">
Hello {username},
</Text>
<Text className="text-black text-[14px] leading-[24px]">
<strong>{invitedByUsername}</strong> (
<Link
href={`mailto:${invitedByEmail}`}
className="text-blue-600 no-underline"
>
{invitedByEmail}
</Link>
) has invited you to the <strong>{teamName}</strong> team on{" "}
<strong>Vercel</strong>.
</Text>
<Section>
<Row>
<Column align="right">
<Img
className="rounded-full"
src={userImage}
width="64"
height="64"
/>
</Column>
<Column align="center">
<Img
src={`${baseUrl}/static/vercel-arrow.png`}
width="12"
height="9"
alt="invited you to"
/>
</Column>
<Column align="left">
<Img
className="rounded-full"
src={teamImage}
width="64"
height="64"
/>
</Column>
</Row>
</Section>
<Section className="text-center mt-[32px] mb-[32px]">
<Button
className="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center px-5 py-3"
href={inviteLink}
>
Join the team
</Button>
</Section>
<Text className="text-black text-[14px] leading-[24px]">
or copy and paste this URL into your browser:{" "}
<Link href={inviteLink} className="text-blue-600 no-underline">
{inviteLink}
</Link>
</Text>
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
<Text className="text-[#666666] text-[12px] leading-[24px]">
This invitation was intended for{" "}
<span className="text-black">{username}</span>. This invite was
sent from <span className="text-black">{inviteFromIp}</span>{" "}
located in{" "}
<span className="text-black">{inviteFromLocation}</span>. If you
were not expecting this invitation, you can ignore this email. If
you are concerned about your account's safety, please reply to
this email to get in touch with us.
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
};
VercelInviteUserEmail.PreviewProps = {
username: "alanturing",
userImage: `${baseUrl}/static/vercel-user.png`,
invitedByUsername: "Alan",
invitedByEmail: "alan.turing@example.com",
teamName: "Enigma",
teamImage: `${baseUrl}/static/vercel-team.png`,
inviteLink: "https://vercel.com/teams/invite/foo",
inviteFromIp: "204.13.186.218",
inviteFromLocation: "São Paulo, Brazil",
} as VercelInviteUserEmailProps;
export default VercelInviteUserEmail;
emails/package.json
+20
View File
@@ -0,0 +1,20 @@
{
"name": "emails",
"version": "0.0.19",
"private": true,
"type": "module",
"scripts": {
"build": "email build",
"dev": "email dev",
"export": "email export"
},
"dependencies": {
"@react-email/components": "0.0.21",
"react-email": "2.1.5",
"react": "^18.2.0"
},
"devDependencies": {
"@types/react": "18.2.33",
"@types/react-dom": "18.2.14"
}
}
emails/pnpm-lock.yaml
Generated
+4209
View File
File diff suppressed because it is too large Load Diff
emails/readme.md
+27
View File
@@ -0,0 +1,27 @@
# React Email Starter
A live preview right in your browser so you don't need to keep sending real emails during development.
## Getting Started
First, install the dependencies:
```sh
npm install
# or
yarn
```
Then, run the development server:
```sh
npm run dev
# or
yarn dev
```
Open [localhost:3000](http://localhost:3000) with your browser to see the result.
## License
MIT License
package.json
+5 -4
View File
@@ -60,6 +60,7 @@
"@radix-ui/react-tabs": "^1.0.4",
"@radix-ui/react-toggle": "^1.0.3",
"@radix-ui/react-tooltip": "^1.0.7",
"@react-email/components": "^0.0.21",
"@tanstack/react-query": "^4.36.1",
"@tanstack/react-table": "^8.16.0",
"@trpc/client": "^10.43.6",
@@ -99,6 +100,7 @@
"node-os-utils": "1.3.7",
"node-pty": "1.0.0",
"node-schedule": "2.1.1",
"nodemailer": "6.9.14",
"octokit": "3.1.2",
"otpauth": "^9.2.3",
"postgres": "3.4.4",
@@ -118,8 +120,7 @@
"use-resize-observer": "9.1.0",
"ws": "8.16.0",
"xterm-addon-fit": "^0.8.0",
"zod": "^3.23.4",
"nodemailer": "6.9.14"
"zod": "^3.23.4"
},
"devDependencies": {
"@biomejs/biome": "1.7.1",
@@ -130,6 +131,7 @@
"@types/node": "^18.17.0",
"@types/node-os-utils": "1.3.4",
"@types/node-schedule": "2.1.6",
"@types/nodemailer": "^6.4.15",
"@types/qrcode": "^1.5.5",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
@@ -148,8 +150,7 @@
"typescript": "^5.4.2",
"vite-tsconfig-paths": "4.3.2",
"vitest": "^1.6.0",
"xterm-readline": "1.1.1",
"@types/nodemailer": "^6.4.15"
"xterm-readline": "1.1.1"
},
"ct3aMetadata": {
"initVersion": "7.25.2"
pnpm-lock.yaml
Generated
+434 -2
View File
@@ -92,6 +92,9 @@ dependencies:
'@radix-ui/react-tooltip':
specifier: ^1.0.7
version: 1.0.7(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@react-email/components':
specifier: ^0.0.21
version: 0.0.21(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)
'@tanstack/react-query':
specifier: ^4.36.1
version: 4.36.1(react-dom@18.2.0)(react@18.2.0)
@@ -2745,6 +2748,10 @@ packages:
aggregate-error: 5.0.0
dev: false
/@one-ini/wasm@0.1.1:
resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
dev: false
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
@@ -3922,6 +3929,226 @@ packages:
'@babel/runtime': 7.24.0
dev: false
/@react-email/body@0.0.8(react@18.2.0):
resolution: {integrity: sha512-gqdkNYlIaIw0OdpWu8KjIcQSIFvx7t2bZpXVxMMvBS859Ia1+1X3b5RNbjI3S1ZqLddUf7owOHkO4MiXGE+nxg==}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/button@0.0.15(react@18.2.0):
resolution: {integrity: sha512-9Zi6SO3E8PoHYDfcJTecImiHLyitYWmIRs0HE3Ogra60ZzlWP2EXu+AZqwQnhXuq+9pbgwBWNWxB5YPetNPTNA==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/code-block@0.0.5(react@18.2.0):
resolution: {integrity: sha512-mmInpZsSIkNaYC1y40/S0XXrIqbTzrpllP6J1JMJuDOBG8l5T7pNl4V+gwfsSTvy9hVsuzQFmhHK8kVb1UXv3A==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
prismjs: 1.29.0
react: 18.2.0
dev: false
/@react-email/code-inline@0.0.2(react@18.2.0):
resolution: {integrity: sha512-0cmgbbibFeOJl0q04K9jJlPDuJ+SEiX/OG6m3Ko7UOkG3TqjRD8Dtvkij6jNDVfUh/zESpqJCP2CxrCLLMUjdA==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/column@0.0.10(react@18.2.0):
resolution: {integrity: sha512-MnP8Mnwipr0X3XtdD6jMLckb0sI5/IlS6Kl/2F6/rsSWBJy5Gg6nizlekTdkwDmy0kNSe3/1nGU0Zqo98pl63Q==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/components@0.0.21(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-fwGfH7FF+iuq+IdPcbEO5HoF0Pakk9big+fFW9+3kiyvbSNuo8Io1rhPTMLd8q41XomN4g7mgWovdAeS/8PHrA==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
'@react-email/body': 0.0.8(react@18.2.0)
'@react-email/button': 0.0.15(react@18.2.0)
'@react-email/code-block': 0.0.5(react@18.2.0)
'@react-email/code-inline': 0.0.2(react@18.2.0)
'@react-email/column': 0.0.10(react@18.2.0)
'@react-email/container': 0.0.12(react@18.2.0)
'@react-email/font': 0.0.6(react@18.2.0)
'@react-email/head': 0.0.9(react@18.2.0)
'@react-email/heading': 0.0.12(@types/react@18.2.66)(react@18.2.0)
'@react-email/hr': 0.0.8(react@18.2.0)
'@react-email/html': 0.0.8(react@18.2.0)
'@react-email/img': 0.0.8(react@18.2.0)
'@react-email/link': 0.0.8(react@18.2.0)
'@react-email/markdown': 0.0.10(react@18.2.0)
'@react-email/preview': 0.0.9(react@18.2.0)
'@react-email/render': 0.0.16(react-dom@18.2.0)(react@18.2.0)
'@react-email/row': 0.0.8(react@18.2.0)
'@react-email/section': 0.0.12(react@18.2.0)
'@react-email/tailwind': 0.0.18(react@18.2.0)
'@react-email/text': 0.0.8(react@18.2.0)
react: 18.2.0
transitivePeerDependencies:
- '@types/react'
- react-dom
dev: false
/@react-email/container@0.0.12(react@18.2.0):
resolution: {integrity: sha512-HFu8Pu5COPFfeZxSL+wKv/TV5uO/sp4zQ0XkRCdnGkj/xoq0lqOHVDL4yC2Pu6fxXF/9C3PHDA++5uEYV5WVJw==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/font@0.0.6(react@18.2.0):
resolution: {integrity: sha512-sZZFvEZ4U3vNCAZ8wXqIO3DuGJR2qE/8m2fEH+tdqwa532zGO3zW+UlCTg0b9455wkJSzEBeaWik0IkNvjXzxw==}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/head@0.0.9(react@18.2.0):
resolution: {integrity: sha512-dF3Uv1qy3oh+IU2atXdv5Xk0hk2udOlMb1A/MNGngC0eHyoEV9ThA0XvhN7mm5x9dDLkVamoWUKXDtmkiuSRqQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/heading@0.0.12(@types/react@18.2.66)(react@18.2.0):
resolution: {integrity: sha512-eB7mpnAvDmwvQLoPuwEiPRH4fPXWe6ltz6Ptbry2BlI88F0a2k11Ghb4+sZHBqg7vVw/MKbqEgtLqr3QJ/KfCQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
'@radix-ui/react-slot': 1.0.2(@types/react@18.2.66)(react@18.2.0)
react: 18.2.0
transitivePeerDependencies:
- '@types/react'
dev: false
/@react-email/hr@0.0.8(react@18.2.0):
resolution: {integrity: sha512-JLVvpCg2wYKEB+n/PGCggWG9fRU5e4lxsGdpK5SDLsCL0ic3OLKSpHMfeE+ZSuw0GixAVVQN7F64PVJHQkd4MQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/html@0.0.8(react@18.2.0):
resolution: {integrity: sha512-arII3wBNLpeJtwyIJXPaILm5BPKhA+nvdC1F9QkuKcOBJv2zXctn8XzPqyGqDfdplV692ulNJP7XY55YqbKp6w==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/img@0.0.8(react@18.2.0):
resolution: {integrity: sha512-jx/rPuKo31tV18fu7P5rRqelaH5wkhg83Dq7uLwJpfqhbi4KFBGeBfD0Y3PiLPPoh+WvYf+Adv9W2ghNW8nOMQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/link@0.0.8(react@18.2.0):
resolution: {integrity: sha512-nVikuTi8WJHa6Baad4VuRUbUCa/7EtZ1Qy73TRejaCHn+vhetc39XGqHzKLNh+Z/JFL8Hv9g+4AgG16o2R0ogQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/markdown@0.0.10(react@18.2.0):
resolution: {integrity: sha512-MH0xO+NJ4IuJcx9nyxbgGKAMXyudFjCZ0A2GQvuWajemW9qy2hgnJ3mW3/z5lwcenG+JPn7JyO/iZpizQ7u1tA==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
md-to-react-email: 5.0.2(react@18.2.0)
react: 18.2.0
dev: false
/@react-email/preview@0.0.9(react@18.2.0):
resolution: {integrity: sha512-2fyAA/zzZYfYmxfyn3p2YOIU30klyA6Dq4ytyWq4nfzQWWglt5hNDE0cMhObvRtfjM9ghMSVtoELAb0MWiF/kw==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/render@0.0.16(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-wDaMy27xAq1cJHtSFptp0DTKPuV2GYhloqia95ub/DH9Dea1aWYsbdM918MOc/b/HvVS3w1z8DWzfAk13bGStQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
react-dom: ^18.2.0
dependencies:
html-to-text: 9.0.5
js-beautify: 1.15.1
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
react-promise-suspense: 0.3.4
dev: false
/@react-email/row@0.0.8(react@18.2.0):
resolution: {integrity: sha512-JsB6pxs/ZyjYpEML3nbwJRGAerjcN/Pa/QG48XUwnT/MioDWrUuyQuefw+CwCrSUZ2P1IDrv2tUD3/E3xzcoKw==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/section@0.0.12(react@18.2.0):
resolution: {integrity: sha512-UCD/N/BeOTN4h3VZBUaFdiSem6HnpuxD1Q51TdBFnqeNqS5hBomp8LWJJ9s4gzwHWk1XPdNfLA3I/fJwulJshg==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/tailwind@0.0.18(react@18.2.0):
resolution: {integrity: sha512-ob8CXX/Pqq1U8YfL5OJTL48WJkixizyoXMMRYTiDLDN9LVLU7lSLtcK9kOD9CgFbO2yUPQr7/5+7gnQJ+cXa8Q==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@react-email/text@0.0.8(react@18.2.0):
resolution: {integrity: sha512-uvN2TNWMrfC9wv/LLmMLbbEN1GrMWZb9dBK14eYxHHAEHCeyvGb5ePZZ2MPyzO7Y5yTC+vFEnCEr76V+hWMxCQ==}
engines: {node: '>=18.0.0'}
peerDependencies:
react: ^18.2.0
dependencies:
react: 18.2.0
dev: false
/@rollup/rollup-android-arm-eabi@4.18.0:
resolution: {integrity: sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==}
cpu: [arm]
@@ -4050,6 +4277,13 @@ packages:
dev: true
optional: true
/@selderee/plugin-htmlparser2@0.11.0:
resolution: {integrity: sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==}
dependencies:
domhandler: 5.0.3
selderee: 0.11.0
dev: false
/@sinclair/typebox@0.27.8:
resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
dev: true
@@ -5559,6 +5793,11 @@ packages:
resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
dev: false
/abbrev@2.0.0:
resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
dev: false
/abort-controller@3.0.0:
resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
engines: {node: '>=6.5'}
@@ -5934,6 +6173,18 @@ packages:
electron-to-chromium: 1.4.708
node-releases: 2.0.14
update-browserslist-db: 1.0.13(browserslist@4.23.0)
dev: true
/browserslist@4.23.2:
resolution: {integrity: sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==}
engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
hasBin: true
dependencies:
caniuse-lite: 1.0.30001642
electron-to-chromium: 1.4.827
node-releases: 2.0.14
update-browserslist-db: 1.1.0(browserslist@4.23.2)
dev: false
/btoa-lite@1.0.0:
resolution: {integrity: sha512-gvW7InbIyF8AicrqWoptdW08pUxuhq8BEgowNajy9RhiE86fmGAGl+bLKo6oB8QP0CkqHLowfN0oJdKC/J6LbA==}
@@ -6045,6 +6296,10 @@ packages:
/caniuse-lite@1.0.30001598:
resolution: {integrity: sha512-j8mQRDziG94uoBfeFuqsJUNECW37DXpnvhcMJMdlH2u3MRkq1sAI0LJcXP1i/Py0KbSIC4UDj8YHPrTn5YsL+Q==}
/caniuse-lite@1.0.30001642:
resolution: {integrity: sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==}
dev: false
/chai@4.4.1:
resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
engines: {node: '>=4'}
@@ -6252,6 +6507,11 @@ packages:
resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
dev: false
/commander@10.0.1:
resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
engines: {node: '>=14'}
dev: false
/commander@2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
dev: false
@@ -6273,6 +6533,13 @@ packages:
resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
dev: true
/config-chain@1.1.13:
resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
dependencies:
ini: 1.3.8
proto-list: 1.2.4
dev: false
/consola@3.2.3:
resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
engines: {node: ^14.18.0 || >=16.10.0}
@@ -6658,10 +6925,37 @@ packages:
csstype: 3.1.3
dev: false
/dom-serializer@2.0.0:
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
dependencies:
domelementtype: 2.3.0
domhandler: 5.0.3
entities: 4.5.0
dev: false
/domelementtype@2.3.0:
resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
dev: false
/domhandler@5.0.3:
resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
engines: {node: '>= 4'}
dependencies:
domelementtype: 2.3.0
dev: false
/dompurify@3.1.4:
resolution: {integrity: sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==}
dev: false
/domutils@3.1.0:
resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
dependencies:
dom-serializer: 2.0.0
domelementtype: 2.3.0
domhandler: 5.0.3
dev: false
/dotenv@16.4.5:
resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
engines: {node: '>=12'}
@@ -6800,8 +7094,24 @@ packages:
safe-buffer: 5.2.1
dev: false
/editorconfig@1.0.4:
resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
engines: {node: '>=14'}
hasBin: true
dependencies:
'@one-ini/wasm': 0.1.1
commander: 10.0.1
minimatch: 9.0.1
semver: 7.6.0
dev: false
/electron-to-chromium@1.4.708:
resolution: {integrity: sha512-iWgEEvREL4GTXXHKohhh33+6Y8XkPI5eHihDmm8zUk5Zo7HICEW+wI/j5kJ2tbuNUCXJ/sNXa03ajW635DiJXA==}
dev: true
/electron-to-chromium@1.4.827:
resolution: {integrity: sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==}
dev: false
/emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -6827,6 +7137,11 @@ packages:
tapable: 2.2.1
dev: false
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
dev: false
/env-paths@3.0.0:
resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7085,6 +7400,10 @@ packages:
type: 2.7.2
dev: true
/fast-deep-equal@2.0.1:
resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
dev: false
/fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: false
@@ -7452,6 +7771,26 @@ packages:
resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
dev: false
/html-to-text@9.0.5:
resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
engines: {node: '>=14'}
dependencies:
'@selderee/plugin-htmlparser2': 0.11.0
deepmerge: 4.3.1
dom-serializer: 2.0.0
htmlparser2: 8.0.2
selderee: 0.11.0
dev: false
/htmlparser2@8.0.2:
resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
dependencies:
domelementtype: 2.3.0
domhandler: 5.0.3
domutils: 3.1.0
entities: 4.5.0
dev: false
/http-cache-semantics@4.1.1:
resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
dev: false
@@ -7539,7 +7878,6 @@ packages:
resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
requiresBuild: true
dev: false
optional: true
/input-otp@1.2.4(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-md6rhmD+zmMnUh5crQNSQxq3keBRYvE3odbr4Qb9g2NWzQv9azi+t1a3X4TBTbh98fsGHgEEJlzbe1q860uGCA==}
@@ -7681,6 +8019,23 @@ packages:
resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
hasBin: true
/js-beautify@1.15.1:
resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==}
engines: {node: '>=14'}
hasBin: true
dependencies:
config-chain: 1.1.13
editorconfig: 1.0.4
glob: 10.3.10
js-cookie: 3.0.5
nopt: 7.2.1
dev: false
/js-cookie@3.0.5:
resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
engines: {node: '>=14'}
dev: false
/js-file-download@0.4.12:
resolution: {integrity: sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==}
dev: false
@@ -7770,6 +8125,10 @@ packages:
json-buffer: 3.0.1
dev: false
/leac@0.6.0:
resolution: {integrity: sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==}
dev: false
/lilconfig@2.1.0:
resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
engines: {node: '>=10'}
@@ -7944,6 +8303,21 @@ packages:
semver: 6.3.1
dev: false
/marked@7.0.4:
resolution: {integrity: sha512-t8eP0dXRJMtMvBojtkcsA7n48BkauktUKzfkPSCq85ZMTJ0v76Rke4DYz01omYpPTUh4p/f7HePgRo3ebG8+QQ==}
engines: {node: '>= 16'}
hasBin: true
dev: false
/md-to-react-email@5.0.2(react@18.2.0):
resolution: {integrity: sha512-x6kkpdzIzUhecda/yahltfEl53mH26QdWu4abUF9+S0Jgam8P//Ciro8cdhyMHnT5MQUJYrIbO6ORM2UxPiNNA==}
peerDependencies:
react: 18.x
dependencies:
marked: 7.0.4
react: 18.2.0
dev: false
/media-typer@0.3.0:
resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
engines: {node: '>= 0.6'}
@@ -8051,6 +8425,13 @@ packages:
brace-expansion: 2.0.1
dev: false
/minimatch@9.0.1:
resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
engines: {node: '>=16 || 14 >=14.17'}
dependencies:
brace-expansion: 2.0.1
dev: false
/minimatch@9.0.3:
resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
engines: {node: '>=16 || 14 >=14.17'}
@@ -8331,6 +8712,14 @@ packages:
abbrev: 1.1.1
dev: false
/nopt@7.2.1:
resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
hasBin: true
dependencies:
abbrev: 2.0.0
dev: false
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
@@ -8483,6 +8872,13 @@ packages:
is-hexadecimal: 1.0.4
dev: false
/parseley@0.12.1:
resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
dependencies:
leac: 0.6.0
peberminta: 0.9.0
dev: false
/parseurl@1.3.3:
resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
engines: {node: '>= 0.8'}
@@ -8529,9 +8925,17 @@ packages:
resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
dev: true
/peberminta@0.9.0:
resolution: {integrity: sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==}
dev: false
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
/picocolors@1.0.1:
resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
dev: false
/picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
@@ -8763,6 +9167,10 @@ packages:
xtend: 4.0.2
dev: false
/proto-list@1.2.4:
resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
dev: false
/proxy-from-env@1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
dev: false
@@ -8958,6 +9366,12 @@ packages:
resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
dev: true
/react-promise-suspense@0.3.4:
resolution: {integrity: sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ==}
dependencies:
fast-deep-equal: 2.0.1
dev: false
/react-redux@9.1.2(@types/react@18.2.66)(react@18.2.0)(redux@5.0.1):
resolution: {integrity: sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==}
peerDependencies:
@@ -9329,6 +9743,12 @@ packages:
ajv-keywords: 5.1.0(ajv@8.14.0)
dev: false
/selderee@0.11.0:
resolution: {integrity: sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==}
dependencies:
parseley: 0.12.1
dev: false
/semver@6.3.1:
resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
hasBin: true
@@ -10094,6 +10514,18 @@ packages:
browserslist: 4.23.0
escalade: 3.1.2
picocolors: 1.0.0
dev: true
/update-browserslist-db@1.1.0(browserslist@4.23.2):
resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
hasBin: true
peerDependencies:
browserslist: '>= 4.21.0'
dependencies:
browserslist: 4.23.2
escalade: 3.1.2
picocolors: 1.0.1
dev: false
/uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -10368,7 +10800,7 @@ packages:
'@webassemblyjs/wasm-parser': 1.12.1
acorn: 8.11.3
acorn-import-assertions: 1.9.0(acorn@8.11.3)
browserslist: 4.23.0
browserslist: 4.23.2
chrome-trace-event: 1.0.4
enhanced-resolve: 5.16.1
es-module-lexer: 1.5.3
server/api/routers/notification.ts
+135 -142
View File
@@ -10,11 +10,17 @@ import {
apiCreateSlack,
apiCreateTelegram,
apiFindOneNotification,
apiSendTest,
apiUpdateDestination,
apiTestDiscordConnection,
apiTestEmailConnection,
apiTestSlackConnection,
apiTestTelegramConnection,
apiUpdateDiscord,
apiUpdateEmail,
apiUpdateSlack,
apiUpdateTelegram,
notifications,
} from "@/server/db/schema";
import { TRPCError } from "@trpc/server";
import { updateDestinationById } from "../services/destination";
import {
createDiscordNotification,
createEmailNotification,
@@ -22,8 +28,16 @@ import {
createTelegramNotification,
findNotificationById,
removeNotificationById,
sendDiscordTestNotification,
sendEmailTestNotification,
sendSlackTestNotification,
sendTelegramTestNotification,
updateDiscordNotification,
updateEmailNotification,
updateSlackNotification,
updateTelegramNotification,
} from "../services/notification";
import nodemailer from "nodemailer";
import { desc } from "drizzle-orm";
export const notificationRouter = createTRPCRouter({
createSlack: adminProcedure
@@ -35,7 +49,34 @@ export const notificationRouter = createTRPCRouter({
console.log(error);
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
message: "Error to create the notification",
cause: error,
});
}
}),
updateSlack: adminProcedure
.input(apiUpdateSlack)
.mutation(async ({ input }) => {
try {
return await updateSlackNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to update the notification",
cause: error,
});
}
}),
testSlackConnection: adminProcedure
.input(apiTestSlackConnection)
.mutation(async ({ input }) => {
try {
await sendSlackTestNotification(input);
return true;
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to test the notification",
cause: error,
});
}
@@ -48,7 +89,35 @@ export const notificationRouter = createTRPCRouter({
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
message: "Error to create the notification",
cause: error,
});
}
}),
updateTelegram: adminProcedure
.input(apiUpdateTelegram)
.mutation(async ({ input }) => {
try {
return await updateTelegramNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to update the notification",
cause: error,
});
}
}),
testTelegramConnection: adminProcedure
.input(apiTestTelegramConnection)
.mutation(async ({ input }) => {
try {
await sendTelegramTestNotification(input);
return true;
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to test the notification",
cause: error,
});
}
@@ -61,7 +130,36 @@ export const notificationRouter = createTRPCRouter({
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
message: "Error to create the notification",
cause: error,
});
}
}),
updateDiscord: adminProcedure
.input(apiUpdateDiscord)
.mutation(async ({ input }) => {
try {
return await updateDiscordNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to update the notification",
cause: error,
});
}
}),
testDiscordConnection: adminProcedure
.input(apiTestDiscordConnection)
.mutation(async ({ input }) => {
try {
await sendDiscordTestNotification(input);
return true;
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to test the notification",
cause: error,
});
}
@@ -72,9 +170,37 @@ export const notificationRouter = createTRPCRouter({
try {
return await createEmailNotification(input);
} catch (error) {
console.log(error);
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to create the destination",
message: "Error to create the notification",
cause: error,
});
}
}),
updateEmail: adminProcedure
.input(apiUpdateEmail)
.mutation(async ({ input }) => {
try {
return await updateEmailNotification(input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to update the notification",
cause: error,
});
}
}),
testEmailConnection: adminProcedure
.input(apiTestEmailConnection)
.mutation(async ({ input }) => {
try {
await sendEmailTestNotification(input);
return true;
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to test the notification",
cause: error,
});
}
@@ -97,127 +223,6 @@ export const notificationRouter = createTRPCRouter({
const notification = await findNotificationById(input.notificationId);
return notification;
}),
testConnection: adminProcedure
.input(apiSendTest)
.mutation(async ({ input }) => {
const notificationType = input.notificationType;
console.log(input);
if (notificationType === "slack") {
// go to your slack dashboard
// go to integrations
// add a new integration
// select incoming webhook
// copy the webhook url
console.log("test slack");
const { webhookUrl, channel } = input;
try {
const response = await fetch(webhookUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ text: "Test notification", channel }),
});
} catch (err) {
console.log(err);
}
} else if (notificationType === "telegram") {
// start telegram
// search BotFather
// send /newbot
// name
// name-with-bot-at-the-end
// copy the token
// search @userinfobot
// send /start
// copy the Id
const { botToken, chatId } = input;
try {
const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
chat_id: chatId,
text: "Test notification",
}),
});
if (!response.ok) {
throw new Error(
`Error sending Telegram notification: ${response.statusText}`,
);
}
console.log("Telegram notification sent successfully");
} catch (error) {
console.error("Error sending Telegram notification:", error);
throw new Error("Error sending Telegram notification");
}
} else if (notificationType === "discord") {
const { webhookUrl } = input;
try {
// go to your discord server
// go to settings
// go to integrations
// add a new integration
// select webhook
// copy the webhook url
const response = await fetch(webhookUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
content: "Test notification",
}),
});
if (!response.ok) {
throw new Error(
`Error sending Discord notification: ${response.statusText}`,
);
}
console.log("Discord notification sent successfully");
} catch (error) {
console.error("Error sending Discord notification:", error);
throw new Error("Error sending Discord notification");
}
} else if (notificationType === "email") {
const { smtpServer, smtpPort, username, password, toAddresses } = input;
try {
const transporter = nodemailer.createTransport({
host: smtpServer,
port: smtpPort,
secure: smtpPort === "465",
auth: {
user: username,
pass: password,
},
});
// need to add a valid from address
const fromAddress = "no-reply@emails.dokploy.com";
const mailOptions = {
from: fromAddress,
to: toAddresses?.join(", "),
subject: "Test email",
text: "Test email",
};
await transporter.sendMail(mailOptions);
console.log("Email notification sent successfully");
} catch (error) {
console.error("Error sending Email notification:", error);
throw new Error("Error sending Email notification");
}
}
}),
all: adminProcedure.query(async () => {
return await db.query.notifications.findMany({
with: {
@@ -226,19 +231,7 @@ export const notificationRouter = createTRPCRouter({
discord: true,
email: true,
},
orderBy: desc(notifications.createdAt),
});
}),
update: adminProcedure
.input(apiUpdateDestination)
.mutation(async ({ input }) => {
try {
return await updateDestinationById(input.destinationId, input);
} catch (error) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error to update this destination",
cause: error,
});
}
}),
});
server/api/services/application.ts
+10
View File
@@ -18,6 +18,7 @@ import { getAdvancedStats } from "@/server/monitoring/utilts";
import { validUniqueServerAppName } from "./project";
import { generatePassword } from "@/templates/utils";
import { generateAppName } from "@/server/db/schema/utils";
import { sendBuildFailedEmail } from "./notification";
export type Application = typeof applications.$inferSelect;
export const createApplication = async (
@@ -157,8 +158,17 @@ export const deployApplication = async ({
await updateDeploymentStatus(deployment.deploymentId, "done");
await updateApplicationStatus(applicationId, "done");
} catch (error) {
console.log("Error on build", error);
await updateDeploymentStatus(deployment.deploymentId, "error");
await updateApplicationStatus(applicationId, "error");
await sendBuildFailedEmail({
projectName: application.project.name,
applicationName: application.appName,
applicationType: "application",
errorMessage: error?.message || "Error to build",
buildLink: deployment.logPath,
});
console.log(
"Error on ",
application.buildType,
server/api/services/notification.ts
+355 -17
View File
@@ -4,14 +4,26 @@ import {
type apiCreateEmail,
type apiCreateSlack,
type apiCreateTelegram,
type apiTestDiscordConnection,
type apiTestEmailConnection,
type apiTestSlackConnection,
type apiTestTelegramConnection,
type apiUpdateDiscord,
type apiUpdateEmail,
type apiUpdateSlack,
type apiUpdateTelegram,
discord,
email,
notifications,
slack,
telegram,
} from "@/server/db/schema";
import { render } from "@react-email/components";
import { TRPCError } from "@trpc/server";
import { eq } from "drizzle-orm";
import nodemailer from "nodemailer";
import { and, eq, isNotNull } from "drizzle-orm";
import type SMTPTransport from "nodemailer/lib/smtp-transport";
import { BuildFailedEmail } from "@/emails/emails/build-failed";
export type Notification = typeof notifications.$inferSelect;
@@ -61,6 +73,45 @@ export const createSlackNotification = async (
});
};
export const updateSlackNotification = async (
input: typeof apiUpdateSlack._type,
) => {
await db.transaction(async (tx) => {
const newDestination = await tx
.update(notifications)
.set({
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.where(eq(notifications.notificationId, input.notificationId))
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error Updating notification",
});
}
await tx
.update(slack)
.set({
channel: input.channel,
webhookUrl: input.webhookUrl,
})
.where(eq(slack.slackId, input.slackId))
.returning()
.then((value) => value[0]);
return newDestination;
});
};
export const createTelegramNotification = async (
input: typeof apiCreateTelegram._type,
) => {
@@ -107,6 +158,45 @@ export const createTelegramNotification = async (
});
};
export const updateTelegramNotification = async (
input: typeof apiUpdateTelegram._type,
) => {
await db.transaction(async (tx) => {
const newDestination = await tx
.update(notifications)
.set({
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.where(eq(notifications.notificationId, input.notificationId))
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error Updating notification",
});
}
await tx
.update(telegram)
.set({
botToken: input.botToken,
chatId: input.chatId,
})
.where(eq(telegram.telegramId, input.telegramId))
.returning()
.then((value) => value[0]);
return newDestination;
});
};
export const createDiscordNotification = async (
input: typeof apiCreateDiscord._type,
) => {
@@ -152,6 +242,44 @@ export const createDiscordNotification = async (
});
};
export const updateDiscordNotification = async (
input: typeof apiUpdateDiscord._type,
) => {
await db.transaction(async (tx) => {
const newDestination = await tx
.update(notifications)
.set({
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.where(eq(notifications.notificationId, input.notificationId))
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error Updating notification",
});
}
await tx
.update(discord)
.set({
webhookUrl: input.webhookUrl,
})
.where(eq(discord.discordId, input.discordId))
.returning()
.then((value) => value[0]);
return newDestination;
});
};
export const createEmailNotification = async (
input: typeof apiCreateEmail._type,
) => {
@@ -163,6 +291,7 @@ export const createEmailNotification = async (
smtpPort: input.smtpPort,
username: input.username,
password: input.password,
fromAddress: input.fromAddress,
toAddresses: input.toAddresses,
})
.returning()
@@ -201,6 +330,49 @@ export const createEmailNotification = async (
});
};
export const updateEmailNotification = async (
input: typeof apiUpdateEmail._type,
) => {
await db.transaction(async (tx) => {
const newDestination = await tx
.update(notifications)
.set({
name: input.name,
appDeploy: input.appDeploy,
userJoin: input.userJoin,
appBuildError: input.appBuildError,
databaseBackup: input.databaseBackup,
dokployRestart: input.dokployRestart,
})
.where(eq(notifications.notificationId, input.notificationId))
.returning()
.then((value) => value[0]);
if (!newDestination) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Error Updating notification",
});
}
await tx
.update(email)
.set({
smtpServer: input.smtpServer,
smtpPort: input.smtpPort,
username: input.username,
password: input.password,
fromAddress: input.fromAddress,
toAddresses: input.toAddresses,
})
.where(eq(email.emailId, input.emailId))
.returning()
.then((value) => value[0]);
return newDestination;
});
};
export const findNotificationById = async (notificationId: string) => {
const notification = await db.query.notifications.findFirst({
where: eq(notifications.notificationId, notificationId),
@@ -244,21 +416,187 @@ export const updateDestinationById = async (
return result[0];
};
export const sendNotification = async (
notificationData: Partial<Notification>,
export const sendSlackTestNotification = async (
slackTestConnection: typeof apiTestSlackConnection._type,
) => {
// if(notificationData.notificationType === "slack"){
// const { webhookUrl, channel } = notificationData;
// try {
// const response = await fetch(webhookUrl, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// },
// body: JSON.stringify({ text: "Test notification", channel }),
// });
// } catch (err) {
// console.log(err);
// }
// }
const { webhookUrl, channel } = slackTestConnection;
const response = await fetch(webhookUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ text: "Hi, From Dokploy 👋", channel }),
});
if (!response.ok) {
throw new Error("Error to send test notification");
}
};
export const sendTelegramTestNotification = async (
telegramTestConnection: typeof apiTestTelegramConnection._type,
) => {
const { botToken, chatId } = telegramTestConnection;
const url = `https://api.telegram.org/bot${botToken}/sendMessage`;
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
chat_id: chatId,
text: "Hi, From Dokploy 👋",
}),
});
if (!response.ok) {
throw new Error("Error to send test notification");
}
};
export const sendDiscordTestNotification = async (
discordTestConnection: typeof apiTestDiscordConnection._type,
) => {
const { webhookUrl } = discordTestConnection;
// go to your discord server
// go to settings
// go to integrations
// add a new integration
// select webhook
// copy the webhook url
const response = await fetch(webhookUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
content: "Hi, From Dokploy 👋",
}),
});
if (!response.ok) {
throw new Error("Error to send test notification");
}
};
export const sendEmailTestNotification = async (
emailTestConnection: typeof apiTestEmailConnection._type,
) => {
const { smtpServer, smtpPort, username, password, toAddresses, fromAddress } =
emailTestConnection;
const transporter = nodemailer.createTransport({
host: smtpServer,
port: smtpPort,
secure: smtpPort === 465,
auth: {
user: username,
pass: password,
},
} as SMTPTransport.Options);
// need to add a valid from address
const mailOptions = {
from: fromAddress,
to: toAddresses?.join(", "),
subject: "Test email",
text: "Hi, From Dokploy 👋",
};
await transporter.sendMail(mailOptions);
console.log("Email notification sent successfully");
};
// export const sendInvitationEmail = async (
// emailTestConnection: typeof apiTestEmailConnection._type,
// inviteLink: string,
// toEmail: string,
// ) => {
// const { smtpServer, smtpPort, username, password, fromAddress } =
// emailTestConnection;
// const transporter = nodemailer.createTransport({
// host: smtpServer,
// port: smtpPort,
// secure: smtpPort === 465,
// auth: {
// user: username,
// pass: password,
// },
// } as SMTPTransport.Options);
// // need to add a valid from address
// const mailOptions = {
// from: fromAddress,
// to: toEmail,
// subject: "Invitation to join Dokploy",
// html: InvitationTemplate({
// inviteLink: inviteLink,
// toEmail: toEmail,
// }),
// };
// await transporter.sendMail(mailOptions);
// console.log("Email notification sent successfully");
// };
export const sendBuildFailedEmail = async ({
projectName,
applicationName,
applicationType,
errorMessage,
buildLink,
}: {
projectName: string;
applicationName: string;
applicationType: string;
errorMessage: string;
buildLink: string;
}) => {
const notificationList = await db.query.notifications.findMany({
where: and(
isNotNull(notifications.emailId),
eq(notifications.appBuildError, true),
),
with: {
email: true,
},
});
for (const notification of notificationList) {
const { email } = notification;
if (email) {
const {
smtpServer,
smtpPort,
username,
password,
fromAddress,
toAddresses,
} = email;
const transporter = nodemailer.createTransport({
host: smtpServer,
port: smtpPort,
secure: smtpPort === 465,
auth: {
user: username,
pass: password,
},
} as SMTPTransport.Options);
const mailOptions = {
from: fromAddress,
to: toAddresses?.join(", "),
subject: "Build failed for dokploy",
html: render(
BuildFailedEmail({
projectName,
applicationName,
applicationType,
errorMessage,
buildLink,
}),
),
};
await transporter.sendMail(mailOptions);
}
}
};
server/db/schema/notification.ts
+49 -6
View File
@@ -1,5 +1,5 @@
import { nanoid } from "nanoid";
import { boolean, pgEnum, pgTable, text } from "drizzle-orm/pg-core";
import { boolean, integer, pgEnum, pgTable, text } from "drizzle-orm/pg-core";
import { relations } from "drizzle-orm";
import { z } from "zod";
import { createInsertSchema } from "drizzle-zod";
@@ -46,7 +46,7 @@ export const slack = pgTable("slack", {
.primaryKey()
.$defaultFn(() => nanoid()),
webhookUrl: text("webhookUrl").notNull(),
channel: text("channel").notNull(),
channel: text("channel"),
});
export const telegram = pgTable("telegram", {
@@ -72,7 +72,7 @@ export const email = pgTable("email", {
.primaryKey()
.$defaultFn(() => nanoid()),
smtpServer: text("smtpServer").notNull(),
smtpPort: text("smtpPort").notNull(),
smtpPort: integer("smtpPort").notNull(),
username: text("username").notNull(),
password: text("password").notNull(),
fromAddress: text("fromAddress").notNull(),
@@ -111,10 +111,20 @@ export const apiCreateSlack = notificationsSchema
})
.extend({
webhookUrl: z.string().min(1),
channel: z.string().min(1),
channel: z.string(),
})
.required();
export const apiUpdateSlack = apiCreateSlack.partial().extend({
notificationId: z.string().min(1),
slackId: z.string(),
});
export const apiTestSlackConnection = apiCreateSlack.pick({
webhookUrl: true,
channel: true,
});
export const apiCreateTelegram = notificationsSchema
.pick({
appBuildError: true,
@@ -130,6 +140,16 @@ export const apiCreateTelegram = notificationsSchema
})
.required();
export const apiUpdateTelegram = apiCreateTelegram.partial().extend({
notificationId: z.string().min(1),
telegramId: z.string().min(1),
});
export const apiTestTelegramConnection = apiCreateTelegram.pick({
botToken: true,
chatId: true,
});
export const apiCreateDiscord = notificationsSchema
.pick({
appBuildError: true,
@@ -144,6 +164,15 @@ export const apiCreateDiscord = notificationsSchema
})
.required();
export const apiUpdateDiscord = apiCreateDiscord.partial().extend({
notificationId: z.string().min(1),
discordId: z.string().min(1),
});
export const apiTestDiscordConnection = apiCreateDiscord.pick({
webhookUrl: true,
});
export const apiCreateEmail = notificationsSchema
.pick({
appBuildError: true,
@@ -155,7 +184,7 @@ export const apiCreateEmail = notificationsSchema
})
.extend({
smtpServer: z.string().min(1),
smtpPort: z.string().min(1),
smtpPort: z.number().min(1),
username: z.string().min(1),
password: z.string().min(1),
fromAddress: z.string().min(1),
@@ -163,6 +192,20 @@ export const apiCreateEmail = notificationsSchema
})
.required();
export const apiUpdateEmail = apiCreateEmail.partial().extend({
notificationId: z.string().min(1),
emailId: z.string().min(1),
});
export const apiTestEmailConnection = apiCreateEmail.pick({
smtpServer: true,
smtpPort: true,
username: true,
password: true,
toAddresses: true,
fromAddress: true,
});
export const apiFindOneNotification = notificationsSchema
.pick({
notificationId: true,
@@ -176,7 +219,7 @@ export const apiSendTest = notificationsSchema
webhookUrl: z.string(),
channel: z.string(),
smtpServer: z.string(),
smtpPort: z.string(),
smtpPort: z.number(),
fromAddress: z.string(),
username: z.string(),
password: z.string(),