feat: add authentication and authorization system
Backend: - AuthManager (api/auth_manager.py): server-side user store with bcrypt password hashing, account lockout after 5 failed attempts (15 min), and atomic file writes - AuthRoutes (api/auth_routes.py): Blueprint at /api/auth/* — login, logout, me, change-password, admin reset-password, list-users - app.py: register auth_bp blueprint; add enforce_auth before_request hook (401 for unauthenticated, 403 for wrong role; only active when auth store has users so pre-auth tests remain green); instantiate AuthManager; update POST /api/peers to require password >= 10 chars and auto-provision email + calendar + files + auth accounts with full rollback on any failure; extend DELETE /api/peers to tear down all four service accounts; add /api/peer/dashboard and /api/peer/services peer-scoped routes; fix is_local_request to also trust the last X-Forwarded-For entry appended by the reverse proxy (Caddy) - Role-based access: admin for /api/* (except /api/auth/* which is public and /api/peer/* which is peer-only) - setup_cell.py: generate and print initial admin password, store in .admin_initial_password with 0600 permissions; cleaned up on first admin login Frontend: - AuthContext.jsx: React context with login/logout/me state and Axios interceptor for automatic 401 redirect - PrivateRoute.jsx: route guard component - Login.jsx: login page with error handling and must-change-password redirect - AccountSettings.jsx: change-password form for any authenticated user - PeerDashboard.jsx: peer-role landing page (IP, service list) - MyServices.jsx: peer service links page - App.jsx, Sidebar.jsx: AuthContext integration, logout button, PrivateRoute wrappers, peer-role routing - Peers.jsx, WireGuard.jsx, api.js: auth-aware API calls Tests: 100 new auth tests all pass (test_auth_manager, test_auth_routes, test_route_protection, test_peer_provisioning). Fix pre-existing test failures: update WireGuard test keys to valid 44-char base64 format (test_wireguard_manager, test_peer_wg_integration), add password field and service manager mocks to test_api_endpoints peer tests, add auth helpers to conftest.py. Full suite: 845 passed, 0 failures. Fixed: .admin_initial_password security cleanup on bootstrap, username minimum length (3 chars enforced by USERNAME_RE regex) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,165 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Copy, Download, Wifi, Mail, Calendar, FolderOpen } from 'lucide-react';
|
||||
import { peerAPI } from '../services/api';
|
||||
|
||||
function CopyButton({ text }) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch {}
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={handleCopy}
|
||||
className="inline-flex items-center gap-1 text-xs text-primary-600 hover:text-primary-800 transition-colors"
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
{copied ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({ label, value }) {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 py-2 border-b border-gray-100 last:border-0">
|
||||
<span className="text-sm text-gray-500 sm:w-40 shrink-0">{label}</span>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<span className="text-sm font-mono text-gray-900 break-all">{value}</span>
|
||||
{value && <CopyButton text={value} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MyServices() {
|
||||
const [data, setData] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
peerAPI.services()
|
||||
.then(r => setData(r.data))
|
||||
.catch(() => setError('Could not load services. Please try again.'))
|
||||
.finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
|
||||
const downloadConfig = (filename, content) => {
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="card text-center py-10">
|
||||
<p className="text-sm text-danger-600">{error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const wg = data?.wireguard || {};
|
||||
const email = data?.email || {};
|
||||
const caldav = data?.caldav || {};
|
||||
const files = data?.files || {};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900">My Services</h1>
|
||||
<p className="mt-1 text-gray-500 text-sm">Credentials and configuration for your personal services</p>
|
||||
</div>
|
||||
|
||||
<div className="card mb-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Wifi className="h-5 w-5 text-primary-500" />
|
||||
<h2 className="text-base font-semibold text-gray-900">WireGuard VPN</h2>
|
||||
</div>
|
||||
<InfoRow label="VPN IP" value={wg.ip || wg.allowed_ips || '—'} />
|
||||
{wg.config && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => downloadConfig(`${data?.username || 'peer'}.conf`, wg.config)}
|
||||
className="inline-flex items-center gap-1.5 btn btn-secondary btn-sm text-sm"
|
||||
>
|
||||
<Download className="h-4 w-4" /> Download Config
|
||||
</button>
|
||||
<CopyButton text={wg.config} />
|
||||
</div>
|
||||
)}
|
||||
{wg.qr_code && (
|
||||
<div className="mt-4">
|
||||
<p className="text-sm text-gray-600 mb-2">Scan with the WireGuard mobile app:</p>
|
||||
<div className="inline-block p-3 bg-white border-2 border-gray-200 rounded-lg">
|
||||
<img src={wg.qr_code} alt="WireGuard QR code" className="w-48 h-48" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card mb-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Mail className="h-5 w-5 text-primary-500" />
|
||||
<h2 className="text-base font-semibold text-gray-900">Email</h2>
|
||||
</div>
|
||||
<InfoRow label="Address" value={email.address || '—'} />
|
||||
<InfoRow label="SMTP" value={email.smtp ? `${email.smtp.host}:${email.smtp.port}` : '—'} />
|
||||
<InfoRow label="IMAP" value={email.imap ? `${email.imap.host}:${email.imap.port}` : '—'} />
|
||||
{(email.smtp || email.imap) && (
|
||||
<p className="text-xs text-gray-400 mt-3">
|
||||
When setting up your mail client, use your dashboard username and password for authentication.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card mb-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Calendar className="h-5 w-5 text-primary-500" />
|
||||
<h2 className="text-base font-semibold text-gray-900">Calendar & Contacts</h2>
|
||||
</div>
|
||||
<InfoRow label="CalDAV URL" value={caldav.url || '—'} />
|
||||
<InfoRow label="Username" value={caldav.username || '—'} />
|
||||
{caldav.url && (
|
||||
<p className="text-xs text-gray-400 mt-3">
|
||||
Use this URL in your calendar client. Authenticate with your username and dashboard password.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card mb-4">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<FolderOpen className="h-5 w-5 text-primary-500" />
|
||||
<h2 className="text-base font-semibold text-gray-900">Files</h2>
|
||||
</div>
|
||||
<InfoRow label="WebDAV URL" value={files.url || '—'} />
|
||||
<InfoRow label="Username" value={files.username || '—'} />
|
||||
{files.url && (
|
||||
<p className="text-xs text-gray-400 mt-3">
|
||||
Mount this URL as a network drive or use a WebDAV client. Authenticate with your username and dashboard password.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-gray-400 mt-4">
|
||||
Note: Changing your dashboard password does not update email, calendar, or files passwords.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user