1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import { CLOSE_ICON } from './icons.js';
import { logoLockup } from '../logo.js';
import { escapeHtml } from '../util.js';
import { renderCornerRail } from '../cornerRail.js';
import { attachTooltips } from '../tooltip.js';
import { renderTopRail } from '../topRail.js';
import { getUser, onAuthChange, register, login, logout, ApiError } from '../auth.js';
import { api, apiUrl } from '../api.js';
// onShowAccount is accepted but intentionally not supplied by app.js for this
// screen: the top rail's identity control is already pointing here, so it has
// nothing to navigate to. Declared so the shared rail call below resolves.
export function renderAccountScreen(root, { onBack, onShowAccount, onShowStats, onShowPlaceholder, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowStore }) {
let mode = 'login'; // 'login' | 'register'
let stopped = false;
// null = checking, true/false once the now-playing probe resolves --
// there's no dedicated "am I connected" endpoint, but now-playing
// itself 404s specifically when there's no stored Spotify connection,
// so it doubles as the status check.
let spotifyConnected = null;
let spotifyCheckedForUserId = null;
function checkSpotifyStatus(userId) {
spotifyCheckedForUserId = userId;
spotifyConnected = null;
api.get('/api/spotify/now-playing')
.then(() => { spotifyConnected = true; rerender(); })
.catch(err => { spotifyConnected = !(err instanceof ApiError && err.status === 404); rerender(); });
}
function spotifyStatusMarkup() {
if (spotifyConnected === null) return `<div class="account-spotify-status">Checking...</div>`;
if (spotifyConnected) return `<div class="account-spotify-status">Connected</div>`;
return `<a class="menu-button small" href="${apiUrl('/api/spotify/login')}">Connect Spotify</a>`;
}
function formMarkup(user) {
if (user) {
return `
<div class="account-signed-in">Signed in as <strong>${escapeHtml(user.username)}</strong></div>
<button class="menu-button" data-action="logout">Log Out</button>
<div class="settings-hint">Spotify</div>
${spotifyStatusMarkup()}
`;
}
return `
<div class="account-tabs">
<button class="menu-button small quiet${mode === 'login' ? ' active' : ''}" data-action="tab-login">Log In</button>
<button class="menu-button small quiet${mode === 'register' ? ' active' : ''}" data-action="tab-register">Register</button>
</div>
<form class="account-form">
<input class="account-input" type="text" name="username" placeholder="Username" autocomplete="username" required>
<input class="account-input" type="password" name="password" placeholder="Password" autocomplete="${mode === 'login' ? 'current-password' : 'new-password'}" required>
<button class="menu-button" type="submit">${mode === 'login' ? 'Log In' : 'Create Account'}</button>
<div class="custom-error account-error"></div>
</form>
`;
}
function render() {
const user = getUser();
root.innerHTML = `
<div class="stats-screen">
<button class="screen-close" data-action="menu" aria-label="Close" data-tooltip="Close (Esc)">${CLOSE_ICON}</button>
${logoLockup()}
<h2>Account</h2>
<div class="account-panel">${formMarkup(user)}</div>
</div>
`;
root.querySelectorAll('[data-action="menu"]').forEach(el => el.addEventListener('click', onBack));
attachTooltips(root);
const cleanupTheme = renderTopRail(root, { onShowAccount, onShowFriends });
const logoutBtn = root.querySelector('[data-action="logout"]');
if (logoutBtn) logoutBtn.addEventListener('click', async () => { await logout(); });
const tabLogin = root.querySelector('[data-action="tab-login"]');
const tabRegister = root.querySelector('[data-action="tab-register"]');
if (tabLogin) tabLogin.addEventListener('click', () => { mode = 'login'; rerender(); });
if (tabRegister) tabRegister.addEventListener('click', () => { mode = 'register'; rerender(); });
const form = root.querySelector('.account-form');
if (form) {
form.addEventListener('submit', async e => {
e.preventDefault();
const errorEl = form.querySelector('.account-error');
errorEl.textContent = '';
const username = form.username.value.trim();
const password = form.password.value;
try {
if (mode === 'login') await login(username, password);
else await register(username, password);
} catch (err) {
errorEl.textContent = err instanceof ApiError ? err.message : 'Something went wrong - try again.';
}
});
}
if (user && spotifyCheckedForUserId !== user.id) checkSpotifyStatus(user.id);
if (!user) spotifyCheckedForUserId = null;
const cleanupRail = renderCornerRail(root, { onShowStats, onShowPlaceholder, onShowLeaderboard, onShowFriends, onShowMultiplayer, onShowStore });
return () => {
cleanupTheme();
cleanupRail();
};
}
let cleanup = render();
function rerender() {
if (stopped) return;
cleanup();
cleanup = render();
}
const unsubscribeAuth = onAuthChange(rerender);
return () => {
stopped = true;
unsubscribeAuth();
cleanup();
};
}
|