All checks were successful
Publier l'image Docker / publish (push) Successful in 6s
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>
33 lines
1.1 KiB
JavaScript
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.";
|
|
}
|
|
});
|
|
}
|