Initial push of Plunk Next

2025-12-01 09:56:56 +01:00
parent 07cea20262
commit ff1876d580
566 changed files with 89036 additions and 28423 deletions
@@ -0,0 +1,145 @@
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@plunk/ui';
+import {Mail, Server} from 'lucide-react';
+import {ApiKeyDisplay} from './ApiKeyDisplay';
+import {useActiveProject} from '../lib/contexts/ActiveProjectProvider';
+
+interface SmtpSettingsProps {
+  smtpConfig: {
+    enabled: boolean;
+    domain?: string;
+    portSecure?: number;
+    portSubmission?: number;
+  };
+}
+
+export function SmtpSettings({smtpConfig}: SmtpSettingsProps) {
+  const {activeProject} = useActiveProject();
+
+  if (!smtpConfig.enabled) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Mail className="h-5 w-5" />
+            SMTP Server
+          </CardTitle>
+          <CardDescription>SMTP server is not configured on this instance</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-neutral-600">
+            The SMTP relay server is not enabled. Contact your administrator to enable SMTP support for sending emails
+            via standard mail clients.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isDevelopment = smtpConfig.domain === 'localhost';
+
+  return (
+    <div className="space-y-6">
+      {isDevelopment && (
+        <Card className="border-yellow-200 bg-yellow-50">
+          <CardHeader>
+            <CardTitle className="text-yellow-900 text-base flex items-center gap-2">
+              <Server className="h-4 w-4" />
+              Development Mode
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-yellow-800">
+              SMTP server is running in development mode without TLS encryption. Only use for local testing. For
+              production, configure the <code className="bg-yellow-100 px-1 py-0.5 rounded text-xs">SMTP_DOMAIN</code>{' '}
+              environment variable and mount TLS certificates.
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Mail className="h-5 w-5" />
+            SMTP Server Configuration
+          </CardTitle>
+          <CardDescription>
+            Send emails through standard email clients using SMTP protocol. Works with Outlook, Thunderbird, and any
+            SMTP-compatible application.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            {/* Server Details */}
+            <div className="space-y-4">
+              <div>
+                <label className="text-sm font-medium text-neutral-700 block mb-2">SMTP Server</label>
+                <code className="flex-1 px-3 py-2 bg-neutral-50 rounded-lg text-xs font-mono text-neutral-900 border border-neutral-200 block">
+                  {smtpConfig.domain}
+                </code>
+                <p className="text-xs text-neutral-500 mt-1">Use this hostname in your email client configuration</p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-neutral-700 block mb-2">
+                    Port (STARTTLS)
+                    <span className="ml-2 text-xs font-normal text-neutral-500">
+                      {isDevelopment ? 'Plaintext in dev' : 'Recommended'}
+                    </span>
+                  </label>
+                  <code className="flex-1 px-3 py-2 bg-neutral-50 rounded-lg text-xs font-mono text-neutral-900 border border-neutral-200 block">
+                    {smtpConfig.portSubmission}
+                  </code>
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {isDevelopment
+                      ? 'Runs without encryption in development'
+                      : 'Submission port with STARTTLS encryption'}
+                  </p>
+                </div>
+
+                <div>
+                  <label className="text-sm font-medium text-neutral-700 block mb-2">
+                    Port (SSL/TLS)
+                    {isDevelopment && (
+                      <span className="ml-2 text-xs font-normal text-neutral-500">Not available in dev</span>
+                    )}
+                  </label>
+                  <code className="flex-1 px-3 py-2 bg-neutral-50 rounded-lg text-xs font-mono text-neutral-900 border border-neutral-200 block">
+                    {smtpConfig.portSecure}
+                  </code>
+                  <p className="text-xs text-neutral-500 mt-1">
+                    {isDevelopment ? 'Requires TLS certificates in production' : 'Implicit TLS encryption'}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Credentials */}
+            <div className="pt-4 border-t border-neutral-200">
+              <h3 className="text-sm font-semibold text-neutral-900 mb-4">Authentication Credentials</h3>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium text-neutral-700 block mb-2">Username</label>
+                  <code className="flex-1 px-3 py-2 bg-neutral-50 rounded-lg text-xs font-mono text-neutral-900 border border-neutral-200 block">
+                    plunk
+                  </code>
+                  <p className="text-xs text-neutral-500 mt-1">Always use &quot;plunk&quot; as the username</p>
+                </div>
+
+                {activeProject && (
+                  <ApiKeyDisplay
+                    label="Password"
+                    value={activeProject.secret}
+                    description="Use your project secret key as the SMTP password"
+                    isSecret
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}