842cb23e1f
Introduces a CA/PKI module so field devices can authenticate to Mosquitto over TLS (8883) with per-device client certificates (CN = serial number) instead of a shared password, with matching Devices/MQTT-Certs UI. Adds live transmitter position tracking alongside logged points, an MQTTS transport option in the simulator for exercising the real cert-auth path, and Swagger API docs at /api/docs. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import { ReactNode } from 'react';
|
|
import { useAuth } from '../lib/auth-context';
|
|
|
|
export default function Layout({ children, title }: { children: ReactNode; title?: string }) {
|
|
const { user, memberships, activeOrg, setActiveOrgId, logout } = useAuth();
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title ? `${title} · UlHub` : 'UlHub'}</title>
|
|
</Head>
|
|
<header
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '1.5rem',
|
|
padding: '0.75rem 1.5rem',
|
|
borderBottom: '1px solid #ddd',
|
|
fontFamily: 'sans-serif',
|
|
}}
|
|
>
|
|
<Link href="/" style={{ fontWeight: 700, fontSize: '1.1rem', textDecoration: 'none', color: '#111' }}>
|
|
UlHub
|
|
</Link>
|
|
{user && (
|
|
<>
|
|
<nav style={{ display: 'flex', gap: '1rem' }}>
|
|
<Link href="/">Jobs</Link>
|
|
<Link href="/settings/devices">Devices</Link>
|
|
<Link href="/settings/members">Members</Link>
|
|
<Link href="/settings/api-keys">API Keys</Link>
|
|
<Link href="/settings/mqtt-certs">MQTT Certs</Link>
|
|
</nav>
|
|
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
{memberships.length > 1 ? (
|
|
<select value={activeOrg?.org.id ?? ''} onChange={(e) => setActiveOrgId(e.target.value)}>
|
|
{memberships.map((m) => (
|
|
<option key={m.org.id} value={m.org.id}>
|
|
{m.org.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<span style={{ color: '#555' }}>{activeOrg?.org.name}</span>
|
|
)}
|
|
<span style={{ color: '#888', fontSize: '0.9rem' }}>{user.email}</span>
|
|
<button
|
|
onClick={async () => {
|
|
await logout();
|
|
router.push('/login');
|
|
}}
|
|
>
|
|
Log out
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</header>
|
|
<main style={{ fontFamily: 'sans-serif', padding: '1.5rem', maxWidth: 1100, margin: '0 auto' }}>{children}</main>
|
|
</>
|
|
);
|
|
}
|