Add API key authentication for external access
Some checks failed
Lint and Build / build (pull_request) Failing after 1m44s
Some checks failed
Lint and Build / build (pull_request) Failing after 1m44s
- 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>
This commit is contained in:
Decobus
parent
4f9e6d2097
commit
bc4cfe607d
10 changed files with 620 additions and 48 deletions
158
app/settings/page.tsx
Normal file
158
app/settings/page.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue