SMPT & NTFY Notification Provider

app/api/notifications/add/route.ts

@@ -14,12 +14,20 @@ export async function POST(request: NextRequest) {
     const body = await request.json();
     const { name, type, config } = schema.parse(body);
 
-    if(type !== "TELEGRAM") {
+    if(type !== "TELEGRAM" && type !== "NTFY" && type !== "SMTP") {
         return NextResponse.json({ error: "Invalid notification type" }, { status: 400 });
     }
 
     const parsedConfig = JSON.parse(config);
-    if(parsedConfig.token === "" || parsedConfig.chat_id === "") {
+    if(type === "TELEGRAM" && (parsedConfig.token === "" || parsedConfig.chat_id === "")) {
+        return NextResponse.json({ error: "Invalid config" }, { status: 400 });
+    }
+
+    if(type === "NTFY" && (parsedConfig.url === "" || parsedConfig.token === "")) {
+        return NextResponse.json({ error: "Invalid config" }, { status: 400 });
+    }
+
+    if(type === "SMTP" && (parsedConfig.host === "" || parsedConfig.port === "" || parsedConfig.username === "" || parsedConfig.password === "" || parsedConfig.from === "" || parsedConfig.to === "")) {
         return NextResponse.json({ error: "Invalid config" }, { status: 400 });
     }
 

components/dialogues/AddNotification.tsx

@@ -15,6 +15,15 @@ export default function AddNotification({ onNotificationAdded, onError, onSucces
     const [type, setType] = useState("Select a type");
     const [telegramBotToken, setTelegramBotToken] = useState("");
     const [telegramChatId, setTelegramChatId] = useState("");
+    const [nftyUrl, setNftyUrl] = useState("");
+    const [ntfyToken, setNftyToken] = useState("");
+    const [smtpHost, setSmtpHost] = useState("");
+    const [smtpPort, setSmtpPort] = useState("");
+    const [smtpUsername, setSmtpUsername] = useState("");
+    const [smtpPassword, setSmtpPassword] = useState("");
+    const [smtpFrom, setSmtpFrom] = useState("");
+    const [smtpTo, setSmtpTo] = useState("");
+    const [smtpSecure, setSmtpSecure] = useState(false);
 
     const { addNotification } = useNotification();
 
@@ -23,10 +32,26 @@ export default function AddNotification({ onNotificationAdded, onError, onSucces
         setType("Select a type")
         setTelegramBotToken("")
         setTelegramChatId("")
+        setNftyUrl("")
+        setNftyToken("")
+        setSmtpHost("")
+        setSmtpPort("")
+        setSmtpUsername("")
+        setSmtpPassword("")
+        setSmtpFrom("")
+        setSmtpTo("")
+        setSmtpSecure(false)
     }
 
     const addNotificationHandler = async () => {
-        const config = type === "TELEGRAM" ? `{ "token": "${telegramBotToken}", "chat_id": "${telegramChatId}" }` : "";
+        let config = "";
+        if (type === "TELEGRAM") {
+            config = `{ "token": "${telegramBotToken}", "chat_id": "${telegramChatId}" }`;
+        } else if (type === "NTFY") {
+            config = `{ "url": "${nftyUrl}", "token": "${ntfyToken}" }`;
+        } else if (type === "SMTP") {
+            config = `{ "host": "${smtpHost}", "port": "${smtpPort}", "username": "${smtpUsername}", "password": "${smtpPassword}", "from": "${smtpFrom}", "to": "${smtpTo}", "secure": "${smtpSecure}" }`;
+        }
         const response = addNotification(name, type, config);
         if (typeof response === "string") {
             onError && onError(response)
@@ -49,7 +74,7 @@ export default function AddNotification({ onNotificationAdded, onError, onSucces
     return (
         <div>
             <dialog id="add_notification" className="modal">
-                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
+                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success flex flex-col max-h-[70vh]">
                     <div className="flex items-center gap-3 mb-3">
                         <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
                             <Bell className="h-6 w-6" />
@@ -57,7 +82,7 @@ export default function AddNotification({ onNotificationAdded, onError, onSucces
                         <h2 className="text-xl font-bold">Add Notification</h2>
                     </div>
 
-                    <div className="bg-base-200 p-4 rounded-lg mb-4">
+                    <div className="bg-base-200 p-4 rounded-lg mb-4 flex-1 flex flex-col overflow-hidden">
                         <div className="space-y-4">
                             <div className="form-control">
                                 <div className="flex items-center gap-2">
@@ -77,25 +102,145 @@ export default function AddNotification({ onNotificationAdded, onError, onSucces
                                 </div>
                                 <select className="select select-bordered w-full" value={type} onChange={(e) => setType(e.target.value)}>
                                     <option disabled>Select a type</option>
+                                    <option value="SMTP">SMTP</option>
                                     <option value="TELEGRAM">Telegram</option>
+                                    <option value="NTFY">NTFY</option>
                                 </select>
                             </div>
+                        </div>
+
+                        <div className="flex-1 overflow-y-auto pt-4 pr-2">
                             {type === "TELEGRAM" && (
-                                <div className="form-control">
+                                <div className="space-y-4">
                                     <div className="flex items-center gap-2">
                                         <label className="label">
                                             <Braces className="h-4 w-4 opacity-70" />
-                                            <span className="label-text font-medium">Config</span>
+                                            <span className="label-text font-medium">Telegram Configuration</span>
                                         </label>
                                     </div>
-                                    <div className="flex items-center gap-2">
+                                    
-                                        <input type="text" className="input input-bordered w-full" placeholder="Telegram Bot Token" value={telegramBotToken} onChange={(e) => setTelegramBotToken(e.target.value)} />
+                                    <div className="bg-base-300 p-4 rounded-lg">
-                                        <input type="text" className="input input-bordered w-full" placeholder="Telegram Chat ID" value={telegramChatId} onChange={(e) => setTelegramChatId(e.target.value)} />
+                                        <h3 className="text-sm font-medium mb-3">Bot Settings</h3>
+                                        <div className="grid grid-cols-1 gap-4">
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Bot Token</span>
+                                                </label>
+                                                <input type="text" className="input input-bordered w-full" placeholder="123456789:ABCdefGHIjklMNOpqrsTUVwxyz" value={telegramBotToken} onChange={(e) => setTelegramBotToken(e.target.value)} />
+                                            </div>
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Chat ID</span>
+                                                </label>
+                                                <input type="text" className="input input-bordered w-full" placeholder="-1001234567890" value={telegramChatId} onChange={(e) => setTelegramChatId(e.target.value)} />
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             )}
-                        </div>  
+
+                            {type === "NTFY" && (
+                                <div className="space-y-4">
+                                    <div className="flex items-center gap-2">
+                                        <label className="label">
+                                            <Braces className="h-4 w-4 opacity-70" />
+                                            <span className="label-text font-medium">NTFY Configuration</span>
+                                        </label>
+                                    </div>
+                                    
+                                    <div className="bg-base-300 p-4 rounded-lg">
+                                        <h3 className="text-sm font-medium mb-3">Server Settings</h3>
+                                        <div className="grid grid-cols-1 gap-4">
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Server URL</span>
+                                                </label>
+                                                <input type="text" className="input input-bordered w-full" placeholder="https://ntfy.sh" value={nftyUrl} onChange={(e) => setNftyUrl(e.target.value)} />
+                                            </div>
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Access Token</span>
+                                                </label>
+                                                <input type="password" className="input input-bordered w-full" placeholder="••••••••" value={ntfyToken} onChange={(e) => setNftyToken(e.target.value)} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+
+                            {type === "SMTP" && (
+                                <div className="space-y-4">
+                                    <div className="flex items-center gap-2">
+                                        <label className="label">
+                                            <Braces className="h-4 w-4 opacity-70" />
+                                            <span className="label-text font-medium">SMTP Configuration</span>
+                                        </label>
+                                    </div>
+                                    
+                                    <div className="bg-base-300 p-4 rounded-lg">
+                                        <h3 className="text-sm font-medium mb-3">SMTP-Server Settings</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Host</span>
+                                                </label>
+                                                <input type="text" className="input input-bordered w-full" placeholder="smtp.example.com" value={smtpHost} onChange={(e) => setSmtpHost(e.target.value)} />
+                                            </div>
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Port</span>
+                                                </label>
+                                                <input type="text" className="input input-bordered w-full" placeholder="587" value={smtpPort} onChange={(e) => setSmtpPort(e.target.value)} />
+                                            </div>
+                                        </div>
+                                        <div className="mt-4">
+                                            <label className="label cursor-pointer justify-start gap-2">
+                                                <input type="checkbox" className="checkbox checkbox-sm" checked={smtpSecure} onChange={(e) => setSmtpSecure(e.target.checked)} />
+                                                <span className="label-text">Use secure connection (TLS/SSL)</span>
+                                            </label>
+                                        </div>
+                                    </div>
+
+                                    <div className="bg-base-300 p-4 rounded-lg">
+                                        <h3 className="text-sm font-medium mb-3">SMTP-Authentication</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Username</span>
+                                                </label>
+                                                <input type="text" className="input input-bordered w-full" placeholder="user@example.com" value={smtpUsername} onChange={(e) => setSmtpUsername(e.target.value)} />
+                                            </div>
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">Password</span>
+                                                </label>
+                                                <input type="password" className="input input-bordered w-full" placeholder="••••••••" value={smtpPassword} onChange={(e) => setSmtpPassword(e.target.value)} />
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div className="bg-base-300 p-4 rounded-lg">
+                                        <h3 className="text-sm font-medium mb-3">Email Settings</h3>
+                                        <div className="grid grid-cols-2 gap-4">
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">From Address</span>
+                                                </label>
+                                                <input type="email" className="input input-bordered w-full" placeholder="sender@example.com" value={smtpFrom} onChange={(e) => setSmtpFrom(e.target.value)} />
+                                            </div>
+                                            <div className="form-control">
+                                                <label className="label">
+                                                    <span className="label-text-alt">To Address</span>
+                                                </label>
+                                                <input type="email" className="input input-bordered w-full" placeholder="recipient@example.com" value={smtpTo} onChange={(e) => setSmtpTo(e.target.value)} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
                     </div>
+
                     <div className="modal-action">
                         <form method="dialog" className="flex gap-3 w-full justify-end">
                             <button className="btn btn-outline">Cancel</button>

prisma/generated/prisma/index-browser.js

@@ -250,7 +250,9 @@ exports.Prisma.JsonNullValueFilter = {
   AnyNull: Prisma.AnyNull
 };
 exports.NotificationType = exports.$Enums.NotificationType = {
-  TELEGRAM: 'TELEGRAM'
+  TELEGRAM: 'TELEGRAM',
+  NTFY: 'NTFY',
+  SMTP: 'SMTP'
 };
 
 exports.Prisma.ModelName = {

prisma/generated/prisma/index.d.ts

@@ -74,7 +74,9 @@ export type NotificationTest = $Result.DefaultSelection<Prisma.$NotificationTest
  */
 export namespace $Enums {
   export const NotificationType: {
-  TELEGRAM: 'TELEGRAM'
+  TELEGRAM: 'TELEGRAM',
+  NTFY: 'NTFY',
+  SMTP: 'SMTP'
 };
 
 export type NotificationType = (typeof NotificationType)[keyof typeof NotificationType]

prisma/generated/prisma/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "prisma-client-2fec847da0083065385189c4f35689219e1cfa753e77e6bee4a71c77e07624c0",
+  "name": "prisma-client-cb978539556cba5867755c200de1b26bf1cb4d18f6f210053bc454d49ff1f37d",
   "main": "index.js",
   "types": "index.d.ts",
   "browser": "index-browser.js",

prisma/generated/prisma/schema.prisma

@@ -159,4 +159,6 @@ model NotificationTest {
 
 enum NotificationType {
   TELEGRAM
+  NTFY
+  SMTP
 }

prisma/generated/prisma/wasm.js

@@ -250,7 +250,9 @@ exports.Prisma.JsonNullValueFilter = {
   AnyNull: Prisma.AnyNull
 };
 exports.NotificationType = exports.$Enums.NotificationType = {
-  TELEGRAM: 'TELEGRAM'
+  TELEGRAM: 'TELEGRAM',
+  NTFY: 'NTFY',
+  SMTP: 'SMTP'
 };
 
 exports.Prisma.ModelName = {

prisma/migrations/20250525121144_new_notification_providers/migration.sql

@@ -0,0 +1,10 @@
+-- AlterEnum
+-- This migration adds more than one value to an enum.
+-- With PostgreSQL versions 11 and earlier, this is not possible
+-- in a single migration. This can be worked around by creating
+-- multiple migrations, each migration adding only one value to
+-- the enum.
+
+
+ALTER TYPE "NotificationType" ADD VALUE 'NTFY';
+ALTER TYPE "NotificationType" ADD VALUE 'SMTP';

prisma/schema.prisma

@@ -161,4 +161,6 @@ model NotificationTest {
 
 enum NotificationType {
   TELEGRAM
+  NTFY
+  SMTP
 }