Add API key authentication for external access

- Create API key context for managing authentication state - Add dedicated settings page for API key management - Move performance metrics to dedicated page in navigation - Update middleware to support URL parameter fallback - Enhance UI with proper glass morphism styling - Add Solarized color utilities to CSS - Improve spacing and padding throughout UI components - Remove manual bullet points from list items 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-26 00:19:16 -04:00 · 2025-07-26 00:19:16 -04:00 · bc4cfe607d
commit bc4cfe607d
parent 4f9e6d2097
10 changed files with 620 additions and 48 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -73,7 +73,8 @@ body {
 }

 /* Glass Card Component */
-.glass {
+.glass,
+.glass-panel {
  background: rgba(7, 54, 66, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(88, 110, 117, 0.3);
@ -489,4 +490,59 @@ body {
  background: rgba(7, 54, 66, 0.2);
  border: 1px solid rgba(88, 110, 117, 0.2);
  border-radius: 12px;
-}
+}
+
+/* Solarized Color Utilities */
+.text-base03 { color: var(--solarized-base03); }
+.text-base02 { color: var(--solarized-base02); }
+.text-base01 { color: var(--solarized-base01); }
+.text-base00 { color: var(--solarized-base00); }
+.text-base0 { color: var(--solarized-base0); }
+.text-base1 { color: var(--solarized-base1); }
+.text-base2 { color: var(--solarized-base2); }
+.text-base3 { color: var(--solarized-base3); }
+.text-blue { color: var(--solarized-blue); }
+.text-cyan { color: var(--solarized-cyan); }
+.text-green { color: var(--solarized-green); }
+.text-yellow { color: var(--solarized-yellow); }
+.text-orange { color: var(--solarized-orange); }
+.text-red { color: var(--solarized-red); }
+.text-magenta { color: var(--solarized-magenta); }
+.text-violet { color: var(--solarized-violet); }
+
+.bg-base03 { background-color: var(--solarized-base03); }
+.bg-base02 { background-color: var(--solarized-base02); }
+.bg-base01 { background-color: var(--solarized-base01); }
+.bg-base00 { background-color: var(--solarized-base00); }
+.bg-base0 { background-color: var(--solarized-base0); }
+.bg-base1 { background-color: var(--solarized-base1); }
+.bg-base2 { background-color: var(--solarized-base2); }
+.bg-base3 { background-color: var(--solarized-base3); }
+.bg-blue { background-color: var(--solarized-blue); }
+.bg-cyan { background-color: var(--solarized-cyan); }
+.bg-green { background-color: var(--solarized-green); }
+.bg-yellow { background-color: var(--solarized-yellow); }
+.bg-orange { background-color: var(--solarized-orange); }
+.bg-red { background-color: var(--solarized-red); }
+.bg-magenta { background-color: var(--solarized-magenta); }
+.bg-violet { background-color: var(--solarized-violet); }
+
+.border-base01 { border-color: var(--solarized-base01); }
+.border-base02 { border-color: var(--solarized-base02); }
+.border-blue { border-color: var(--solarized-blue); }
+.border-cyan { border-color: var(--solarized-cyan); }
+.border-green { border-color: var(--solarized-green); }
+.border-yellow { border-color: var(--solarized-yellow); }
+.border-orange { border-color: var(--solarized-orange); }
+.border-red { border-color: var(--solarized-red); }
+
+/* Border opacity utilities */
+.border-green\/30 { border-color: rgba(133, 153, 0, 0.3); }
+.border-yellow\/30 { border-color: rgba(181, 137, 0, 0.3); }
+.border-blue\/30 { border-color: rgba(38, 139, 210, 0.3); }
+.border-red\/30 { border-color: rgba(220, 50, 47, 0.3); }
+
+/* Focus utilities */
+.focus\:outline-none:focus { outline: none; }
+.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--solarized-blue); }
+.focus\:ring-blue:focus { box-shadow: 0 0 0 2px var(--solarized-blue); }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -2,7 +2,7 @@ import './globals.css';
 import Header from '@/components/Header';
 import Footer from '@/components/Footer';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
-import PerformanceDashboard from '@/components/PerformanceDashboard';
+import { ApiKeyProvider } from '@/contexts/ApiKeyContext';

 export const metadata = {
  title: 'Live Stream Manager',
@ -13,14 +13,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
  return (
    <html lang="en">
      <body className="min-h-screen flex flex-col">
-        <Header />
-        <main className="flex-1">
-          <ErrorBoundary>
-            {children}
-          </ErrorBoundary>
-        </main>
-        <Footer />
-        <PerformanceDashboard />
+        <ApiKeyProvider>
+          <Header />
+          <main className="flex-1">
+            <ErrorBoundary>
+              {children}
+            </ErrorBoundary>
+          </main>
+          <Footer />
+        </ApiKeyProvider>
      </body>
    </html>
  );
--- a/app/performance/page.tsx
+++ b/app/performance/page.tsx
@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { PerformanceMonitor } from '@/lib/performance';
+
+interface PerformanceMetrics {
+  [key: string]: {
+    avg: number;
+    min: number;
+    max: number;
+    count: number;
+  } | null;
+}
+
+export default function PerformancePage() {
+  const [metrics, setMetrics] = useState<PerformanceMetrics>({});
+
+  useEffect(() => {
+    const updateMetrics = () => {
+      setMetrics(PerformanceMonitor.getAllMetrics());
+    };
+
+    // Update metrics every 2 seconds
+    updateMetrics();
+    const interval = setInterval(updateMetrics, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-4xl" style={{ paddingBottom: '48px' }}>
+      <div className="glass-panel p-8">
+        <h1 className="text-3xl font-bold text-white mb-8">Performance Metrics</h1>
+        
+        {Object.keys(metrics).length === 0 ? (
+          <div className="glass-panel p-6 border border-base01 text-center">
+            <p className="text-base1">No metrics collected yet. Navigate around the app to see performance data.</p>
+          </div>
+        ) : (
+          <div className="grid" style={{ gap: '24px' }}>
+            {Object.entries(metrics).map(([label, metric]) => {
+              if (!metric) return null;
+              
+              return (
+                <div key={label} className="glass-panel p-6 border border-base01">
+                  <h2 className="font-semibold text-blue text-lg mb-4">
+                    {label.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                  </h2>
+                  
+                  <div className="grid grid-cols-2 md:grid-cols-4" style={{ gap: '16px' }}>
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Average</span>
+                      <span className="text-green text-xl font-semibold">{metric.avg.toFixed(2)}ms</span>
+                    </div>
+                    
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Min</span>
+                      <span className="text-green text-xl font-semibold">{metric.min.toFixed(2)}ms</span>
+                    </div>
+                    
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Max</span>
+                      <span className={`text-xl font-semibold ${metric.max > 100 ? 'text-red' : 'text-yellow'}`}>
+                        {metric.max.toFixed(2)}ms
+                      </span>
+                    </div>
+                    
+                    <div className="glass-panel p-4 border border-base01">
+                      <span className="text-base1 text-sm block mb-2">Count</span>
+                      <span className="text-blue text-xl font-semibold">{metric.count}</span>
+                    </div>
+                  </div>
+                  
+                  {/* Performance indicator bar */}
+                  <div className="mt-6">
+                    <div className="flex items-center" style={{ gap: '16px' }}>
+                      <div className="flex-1 h-2 bg-base02 rounded-full overflow-hidden">
+                        <div 
+                          className={`h-full transition-all duration-500 ${
+                            metric.avg < 50 ? 'bg-green' :
+                            metric.avg < 100 ? 'bg-yellow' : 'bg-red'
+                          }`}
+                          style={{ width: `${Math.min((metric.avg / 200) * 100, 100)}%` }}
+                        />
+                      </div>
+                      <span className="text-sm text-base1 min-w-[100px] text-right">
+                        {metric.avg < 50 ? 'Excellent' :
+                         metric.avg < 100 ? 'Good' : 'Needs Optimization'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+            
+            {/* Performance tips */}
+            <div className="glass-panel p-6 border border-yellow/30">
+              <h2 className="font-semibold text-yellow text-lg mb-4">💡 Performance Tips</h2>
+              <div className="grid md:grid-cols-2 text-base1" style={{ gap: '24px' }}>
+                <div>
+                  <h3 className="font-medium text-white mb-3">Response Times</h3>
+                  <ul className="text-sm space-y-2" style={{ paddingLeft: '8px' }}>
+                    <li>&lt; 50ms - Excellent user experience</li>
+                    <li>50-100ms - Good, barely noticeable</li>
+                    <li>100-300ms - Noticeable delay</li>
+                    <li>&gt; 300ms - Frustrating for users</li>
+                  </ul>
+                </div>
+                <div>
+                  <h3 className="font-medium text-white mb-3">Optimization Strategies</h3>
+                  <ul className="text-sm space-y-2" style={{ paddingLeft: '8px' }}>
+                    <li>Monitor fetchData and setActive timings</li>
+                    <li>High max values indicate performance spikes</li>
+                    <li>Consider caching for frequently called APIs</li>
+                    <li>Batch multiple requests when possible</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/app/settings/page.tsx
+++ b/app/settings/page.tsx
@ -0,0 +1,158 @@
+'use client';
+
+import { useState } from 'react';
+import { useApiKey } from '@/contexts/ApiKeyContext';
+
+export default function SettingsPage() {
+  const { apiKey, setApiKey, clearApiKey, isAuthenticated } = useApiKey();
+  const [inputValue, setInputValue] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+    setIsLoading(true);
+
+    if (!inputValue.trim()) {
+      setError('API key is required');
+      setIsLoading(false);
+      return;
+    }
+
+    // Test the API key by making a simple request
+    try {
+      const response = await fetch('/api/obsStatus', {
+        headers: {
+          'x-api-key': inputValue.trim()
+        }
+      });
+
+      if (response.ok) {
+        setApiKey(inputValue.trim());
+        setInputValue('');
+        setSuccess('API key saved successfully!');
+      } else {
+        setError('Invalid API key');
+      }
+    } catch {
+      setError('Failed to validate API key');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleClearKey = () => {
+    clearApiKey();
+    setInputValue('');
+    setError('');
+    setSuccess('API key cleared');
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8 max-w-2xl" style={{ paddingBottom: '48px' }}>
+      <div className="glass-panel p-8">
+        <h1 className="text-3xl font-bold text-white mb-8">Settings</h1>
+        
+        {/* API Key Section */}
+        <div className="space-y-6">
+          <div>
+            <h2 className="text-xl font-semibold text-white mb-4">API Key Authentication</h2>
+            <p className="text-base1 mb-6">
+              API keys are required when accessing this application from external networks. 
+              The key is stored securely in your browser's local storage.
+            </p>
+          </div>
+
+          {/* Current Status */}
+          <div className="glass-panel p-4 border border-base01">
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-medium text-white mb-1">Current Status</h3>
+                <div className="flex items-center gap-2">
+                  {isAuthenticated ? (
+                    <>
+                      <div className="w-2 h-2 bg-green rounded-full"></div>
+                      <span className="text-green text-sm">Authenticated</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="w-2 h-2 bg-yellow rounded-full"></div>
+                      <span className="text-yellow text-sm">No API key set</span>
+                    </>
+                  )}
+                </div>
+              </div>
+              {isAuthenticated && (
+                <button
+                  onClick={handleClearKey}
+                  className="btn-secondary text-sm"
+                >
+                  Clear Key
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* API Key Form */}
+          <form onSubmit={handleSubmit} className="space-y-4" style={{ marginTop: '24px' }}>
+            <div>
+              <label htmlFor="apiKey" className="block text-sm font-medium text-base1 mb-2">
+                {isAuthenticated ? 'Update API Key' : 'Enter API Key'}
+              </label>
+              <input
+                type="password"
+                id="apiKey"
+                value={inputValue}
+                onChange={(e) => setInputValue(e.target.value)}
+                className="w-full text-white focus:outline-none focus:ring-2 focus:ring-blue transition-all"
+                style={{
+                  padding: '12px 24px',
+                  background: 'rgba(7, 54, 66, 0.4)',
+                  backdropFilter: 'blur(10px)',
+                  border: '1px solid rgba(88, 110, 117, 0.3)',
+                  borderRadius: '12px',
+                  fontSize: '16px'
+                }}
+                placeholder="Enter your API key"
+              />
+            </div>
+
+            {error && (
+              <div className="glass-panel p-3 border border-red/30">
+                <p className="text-red text-sm">{error}</p>
+              </div>
+            )}
+
+            {success && (
+              <div className="glass-panel p-3 border border-green/30">
+                <p className="text-green text-sm">{success}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="btn w-full"
+            >
+              {isLoading ? 'Validating...' : (isAuthenticated ? 'Update API Key' : 'Save API Key')}
+            </button>
+          </form>
+
+          {/* Information Section */}
+          <div className="glass-panel p-6 border border-blue/30" style={{ marginTop: '24px' }}>
+            <h3 className="font-medium text-blue text-sm mb-3">ℹ️ Information</h3>
+            <ul className="text-xs text-base1 space-y-1" style={{ paddingLeft: '8px' }}>
+              <li>API keys are only required for external network access</li>
+              <li>Local network access bypasses authentication automatically</li>
+              <li>Keys are validated against the server before saving</li>
+              <li>Your API key is stored locally and never transmitted unnecessarily</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}