watchparty/client/js/views/login.js
Nicolas b6818655b1
All checks were successful
Publier l'image Docker / publish (push) Successful in 6s
Proxy all Emby access through our own backend; drop server-url field; use Emby's real theme colors
Three changes requested:

1. Server proxies Emby, browser never talks to it directly. Login is
   now POST /api/auth/login {username,password} on our own backend;
   the backend calls Emby's AuthenticateByName server-side and mints
   its own opaque session (httpOnly cookie), storing
   {embyToken,userId,userName} in memory. The browser never sees or
   holds a real Emby access token. Every other call - search, item
   details, images, HLS streaming, party actions - goes to our own
   /api/* origin, authenticated by that cookie; server/src/embyProxy.js
   forwards to Emby server-side and streams the response back
   (including a playlist-rewrite pass for HLS .m3u8 so hls.js never
   gets handed a URL pointing at Emby directly). This also sidesteps
   the CORS problem the previous direct-to-Emby design had.

2. EMBY_SERVER_URL is backend-only config (.env.example); the login
   form no longer asks for a server address at all.

3. client/css/app.css now uses colors read directly off the live Emby
   server's own dark theme (--theme-primary-color-* etc, fetched via a
   JS probe against the running client, not guessed): accent green
   #52b54b/#6ccf65, near-black background #151216.

Tested for real: ran the server locally against the actual
EMBY_SERVER_URL and submitted intentionally-wrong credentials through
the UI - confirmed the full round trip (browser -> our backend -> real
Emby -> real 401 -> our error message) with no CORS issue, since it's
all server-to-server now. Login itself hasn't been exercised with real
credentials, so catalog/streaming remain unverified - see
docs/architecture.md.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-13 21:36:26 +02:00

33 lines
1.1 KiB
JavaScript

import { login } from '../embyApi.js';
import { navigate } from '../router.js';
export function renderLogin(root) {
root.innerHTML = `
<main class="wrap">
<h1>Watch Party</h1>
<form id="loginForm" class="panel">
<p class="hint">Utilise ton compte Emby habituel.</p>
<label>Nom d'utilisateur
<input id="username" autocomplete="username" required autofocus />
</label>
<label>Mot de passe
<input id="password" type="password" autocomplete="current-password" required />
</label>
<button type="submit">Se connecter</button>
<p id="error" class="error"></p>
</form>
</main>`;
const form = root.querySelector('#loginForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const errorEl = form.querySelector('#error');
errorEl.textContent = '';
try {
await login(form.querySelector('#username').value, form.querySelector('#password').value);
navigate('/browse');
} catch (err) {
errorEl.textContent = "Connexion impossible - vérifie ton nom d'utilisateur et ton mot de passe.";
}
});
}