ulweb/web/pages/settings/mqtt-certs.tsx

import { FormEvent, useCallback, useEffect, useState } from 'react';
import Layout from '../../components/Layout';
import { api } from '../../lib/api';
import { useRequireAuth } from '../../lib/auth-context';

interface CaStatus {
  initialized: boolean;
  fingerprint?: string;
  expiresAt?: string;
}

async function downloadText(path: string, filename: string) {
  const res = await fetch(path);
  if (!res.ok) {
    throw new Error(`Download failed (${res.status})`);
  }
  const text = await res.text();
  const blob = new Blob([text], { type: 'application/x-pem-file' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

export default function MqttCertsPage() {
  const { user, activeOrg, loading } = useRequireAuth();
  const isAdmin = activeOrg?.role === 'ORG_ADMIN';

  const [status, setStatus] = useState<CaStatus | null>(null);
  const [hostname, setHostname] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);

  const reload = useCallback(() => {
    if (!isAdmin) {
      return;
    }
    api
      .get<CaStatus>('/api/certificates/ca')
      .then((s) => {
        setStatus(s);
        setError(null);
      })
      .catch((err) => setError(err.message));
  }, [isAdmin]);

  useEffect(reload, [reload]);

  const initCa = async () => {
    try {
      await api.post('/api/certificates/ca/init', {});
      setNotice('CA initialized. Restart the mosquitto container to enable the 8883 listener if this is the first setup.');
      reload();
    } catch (err: any) {
      setError(err.message);
    }
  };

  const provision = async (e: FormEvent) => {
    e.preventDefault();
    try {
      await api.post('/api/certificates/mqtt/provision', { hostname });
      setNotice('Broker certificate provisioned. Run `docker compose restart mosquitto` to pick it up.');
      setHostname('');
    } catch (err: any) {
      setError(err.message);
    }
  };

  if (loading || !user) {
    return null;
  }

  if (!isAdmin) {
    return (
      <Layout title="MQTT Certificates">
        <h1>MQTT Certificates</h1>
        <p>Only organization admins can manage the device certificate authority.</p>
      </Layout>
    );
  }

  return (
    <Layout title="MQTT Certificates">
      <h1>MQTT Certificates</h1>
      <p style={{ color: '#666' }}>
        Field devices authenticate to the MQTT broker with a client certificate (port 8883). The certificate's serial
        number becomes its MQTT identity, scoping it to <code>devices/&lt;serial&gt;/#</code>. Issue device
        certificates from the <a href="/settings/devices">Devices</a> page once the CA below is set up.
      </p>
      {error && <p style={{ color: '#c62828' }}>{error}</p>}
      {notice && <p style={{ color: '#388e3c' }}>{notice}</p>}

      <section style={{ border: '1px solid #ddd', borderRadius: 6, padding: '1rem', marginBottom: '1.5rem' }}>
        <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>Certificate authority</h2>
        {!status && <p style={{ color: '#666' }}>Loading…</p>}
        {status && !status.initialized && (
          <>
            <p style={{ color: '#888' }}>No CA has been initialized yet.</p>
            <button onClick={initCa}>Initialize CA</button>
          </>
        )}
        {status && status.initialized && (
          <>
            <p style={{ margin: '0.25rem 0' }}>
              <strong>Fingerprint:</strong> <code>{status.fingerprint}</code>
            </p>
            <p style={{ margin: '0.25rem 0' }}>
              <strong>Expires:</strong> {status.expiresAt ? new Date(status.expiresAt).toLocaleString() : '—'}
            </p>
            <button onClick={() => downloadText('/api/certificates/ca/download', 'ca.crt')}>Download CA certificate</button>
          </>
        )}
      </section>

      <section style={{ border: '1px solid #ddd', borderRadius: 6, padding: '1rem' }}>
        <h2 style={{ marginTop: 0, fontSize: '1.1rem' }}>Broker server certificate</h2>
        <p style={{ color: '#666' }}>
          Issues (or re-issues) the server certificate the broker presents on port 8883, signed by the CA above.
        </p>
        <form onSubmit={provision} style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
          <input
            placeholder="broker hostname (e.g. mqtt.example.com)"
            value={hostname}
            onChange={(e) => setHostname(e.target.value)}
            required
            style={{ padding: '0.4rem', width: 260 }}
          />
          <button type="submit" disabled={!status?.initialized}>
            Provision
          </button>
        </form>
      </section>

      <p style={{ color: '#999', fontSize: '0.85rem', marginTop: '1.5rem' }}>
        Mosquitto doesn't hot-reload its config or certificate files — a manual <code>docker compose restart
        mosquitto</code> is required after initializing the CA or re-provisioning the broker certificate. Revoking a
        device certificate deletes its database record only; it isn't broker-enforced (no CRL/OCSP), so a revoked
        certificate still authenticates until it expires.
      </p>
    </Layout>
  );
}