luma-home/pairing/luma-pair.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Luma TV Pairing</title>
<style>
:root {
  --bg: #0c0f14;
  --surface: #161a22;
  --card-border: rgba(255,255,255,0.08);
  --text: #f0f0f0;
  --text-muted: rgba(232,232,232,0.50);
  --accent: #7EB8DA;
  --danger: #e05555;
  --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input.pin-input {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.3em;
}
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.15s;
}
.btn-primary { background: var(--accent); color: #111; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: default; filter: none; }
.msg { font-size: 14px; margin-top: 16px; text-align: center; min-height: 20px; }
.msg.error { color: var(--danger); }
.msg.success { color: #4ade80; }
.step-list { margin: 16px 0; padding-left: 20px; }
.step-list li { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
</style>
</head>
<body>
<div class="card">
  <h1>Luma TV Pairing</h1>
  <p class="subtitle">Connect your TV to Home Assistant</p>

  <ol class="step-list">
    <li>On the TV, go to Settings &rarr; Home Assistant &rarr; Pair</li>
    <li>Enter the 6-digit PIN shown on the TV screen below</li>
    <li>Paste your HA long-lived access token</li>
  </ol>

  <div class="field">
    <label>PIN from TV</label>
    <input id="pin" type="text" class="pin-input" maxlength="6" inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="off">
  </div>

  <div class="field">
    <label>HA Long-Lived Access Token</label>
    <input id="token" type="password" placeholder="Paste token from HA Profile page">
    <div class="hint">HA &rarr; Profile &rarr; Long-Lived Access Tokens &rarr; Create Token</div>
  </div>

  <button class="btn btn-primary" id="pair-btn" onclick="doPair()">Pair TV</button>
  <div class="msg" id="msg"></div>
</div>

<script>
function getHaBaseUrl() {
  return window.location.origin;
}

async function doPair() {
  const pin = document.getElementById('pin').value.trim();
  const token = document.getElementById('token').value.trim();
  const msg = document.getElementById('msg');
  const btn = document.getElementById('pair-btn');

  msg.className = 'msg';
  msg.textContent = '';

  if (!pin || pin.length !== 6 || !/^\d{6}$/.test(pin)) {
    msg.className = 'msg error';
    msg.textContent = 'Enter the 6-digit PIN from the TV.';
    return;
  }
  if (!token) {
    msg.className = 'msg error';
    msg.textContent = 'Paste your HA access token.';
    return;
  }

  btn.disabled = true;
  msg.textContent = 'Pairing...';

  try {
    const haUrl = getHaBaseUrl();
    const wsUrl = haUrl.replace(/^http/, 'ws') + '/api/websocket';

    const ws = new WebSocket(wsUrl);
    await new Promise((resolve, reject) => {
      ws.onopen = resolve;
      ws.onerror = () => reject(new Error('WebSocket connection failed'));
      setTimeout(() => reject(new Error('Connection timeout')), 5000);
    });

    // Auth
    const authMsg = await new Promise(resolve => {
      ws.onmessage = e => resolve(JSON.parse(e.data));
    });

    if (authMsg.type === 'auth_required') {
      ws.send(JSON.stringify({ type: 'auth', access_token: token }));
      const authResult = await new Promise(resolve => {
        ws.onmessage = e => resolve(JSON.parse(e.data));
      });
      if (authResult.type !== 'auth_ok') {
        throw new Error('Invalid token. Check your HA access token.');
      }
    }

    // Call luma/pair
    ws.send(JSON.stringify({
      id: 1,
      type: 'luma/pair',
      pin: pin,
      token: token,
      ha_url: wsUrl,
    }));

    const result = await new Promise((resolve, reject) => {
      ws.onmessage = e => {
        const data = JSON.parse(e.data);
        if (data.id === 1) resolve(data);
      };
      setTimeout(() => reject(new Error('Timeout waiting for response')), 5000);
    });

    ws.close();

    if (result.success) {
      msg.className = 'msg success';
      msg.textContent = 'Paired! The TV will connect in a few seconds.';
      btn.textContent = 'Done';
    } else {
      throw new Error(result.error?.message || 'Pairing failed');
    }
  } catch (err) {
    msg.className = 'msg error';
    msg.textContent = err.message;
    btn.disabled = false;
  }
}

document.getElementById('pin').addEventListener('input', function() {
  this.value = this.value.replace(/\D/g, '').slice(0, 6);
});
</script>
</body>
</html>