Merge pull request #43 from Ratio1/tunnel-delete-confirm

feat: message on active tunnels delete

Author: wzrdx

app/(protected)/tunnels/[id]/page.tsx

@@ -98,18 +98,28 @@ export default function TunnelPage() {
                 throw new Error('Tunneling secrets not found.');
             }
 
-            await confirm(<div>Are you sure you want to delete this tunnel?</div>, {
-                onConfirm: async () => {
-                    try {
-                        await deleteTunnel(tunnel.id, tunnelingSecrets);
-                        toast.success('Tunnel deleted successfully.');
-                        router.push(routePath.tunnels);
-                    } catch (error: any) {
-                        console.error('Error deleting tunnel:', error);
-                        toast.error(error.message);
-                    }
+            await confirm(
+                <div className="col gap-3">
+                    Are you sure you want to delete this tunnel?
+                    {tunnel.status === 'healthy' && (
+                        <div className="text-sm text-red-500">
+                            Warning: Deleting an active tunnel will immediately stop all traffic routed through it.
+                        </div>
+                    )}
+                </div>,
+                {
+                    onConfirm: async () => {
+                        try {
+                            await deleteTunnel(tunnel.id, tunnelingSecrets);
+                            toast.success('Tunnel deleted successfully.');
+                            router.push(routePath.tunnels);
+                        } catch (error: any) {
+                            console.error('Error deleting tunnel:', error);
+                            toast.error(error.message);
+                        }
+                    },
                 },
-            });
+            );
         } catch (error) {
             console.error('Error deleting tunnel:', error);
             toast.error('Failed to delete tunnel.');

src/components/tunnels/TunnelCard.tsx

@@ -31,6 +31,11 @@ export default function TunnelCard({ tunnel, fetchTunnels }: { tunnel: Tunnel; f
                 <div className="col gap-3">
                     <div>Are you sure you want to delete the following tunnel?</div>
                     <div className="font-medium">{tunnel.alias}</div>
+                    {tunnel.status === 'healthy' && (
+                        <div className="text-sm text-red-500">
+                            Warning: Deleting an active tunnel will immediately stop all traffic routed through it.
+                        </div>
+                    )}
                 </div>,
                 {
                     onConfirm: async () => {