vimp-engine 0.37.1 → 0.38.1

package/src/client/components/view/Profile.js

@@ -0,0 +1,372 @@
+import Publisher from '../../../lib/Publisher.js';
+
+// Singleton ProfileView
+
+let profileView;
+
+// Тексты ошибок по областям и кодам auth: модель кодов не переводит, вид не
+// ходит в сеть. Язык интерфейса — английский, как у остального лобби
+const GENERIC_ERROR = 'Something went wrong. Please try again.';
+
+const LINK_ERRORS = {
+  identityInUse:
+    'This account is already linked to another profile. To use that profile, delete this one and choose Restore profile on the Welcome screen.',
+  providerAlreadyLinked:
+    'An account of this provider is already linked to your profile.',
+  denied: 'Linking was cancelled.',
+};
+
+const DELETE_ERRORS = {
+  confirmMismatch: 'The nick does not match.',
+  adminAccount: 'Admin profiles cannot be deleted.',
+};
+
+const AREA_ERRORS = {
+  link: code => LINK_ERRORS[code] ?? GENERIC_ERROR,
+  session: () => 'Could not sign out. Please try again.',
+  export: () => 'Could not prepare the file. Please try again.',
+  delete: code =>
+    DELETE_ERRORS[code] ?? 'Could not delete the profile. Please try again.',
+};
+
+const LINK_SUCCESS =
+  'Account linked. You can now restore this profile in any browser.';
+const NO_PROVIDERS = 'Account linking is not available on this server.';
+
+// Представление панели профиля: статус, привязка аккаунтов с тремя
+// согласиями, выход, выгрузка данных, удаление с вводом ника. В сеть не
+// ходит и состояния не держит — рисует то, что пришло от модели, и
+// публикует намерения пользователя. Текст в DOM — только через textContent.
+//
+// События: open, close, link <provider>, unlink <provider>, sign-out,
+// export, delete <введённый ник>.
+export default class ProfileView {
+  /**
+   * @param {Object} model - ProfileModel (источник событий и данных).
+   * @param {Object} config - Блок `profile` конфига лобби.
+   */
+  constructor(model, config) {
+    if (profileView) {
+      return profileView;
+    }
+
+    profileView = this;
+
+    const { elems } = config;
+    const byId = id => document.getElementById(id);
+
+    this._model = model;
+    this._config = config;
+    this._elems = elems;
+
+    this._panel = byId(elems.panelId);
+    this._lobby = byId(elems.lobbyId);
+    this._open = byId(elems.openBtnId);
+    this._close = byId(elems.closeBtnId);
+    this._nick = byId(elems.nickId);
+    this._status = byId(elems.statusId);
+    this._benefits = byId(elems.benefitsId);
+    this._providers = byId(elems.providersId);
+    this._consent = byId(elems.consentId);
+    this._checks = [
+      byId(elems.consentTermsId),
+      byId(elems.consentDataId),
+      byId(elems.consentAgeId),
+    ];
+    this._linkNotice = byId(elems.linkNoticeId);
+    this._linkError = byId(elems.linkErrorId);
+    this._sessionCard = byId(elems.sessionCardId);
+    this._signOut = byId(elems.signOutBtnId);
+    this._exportBtn = byId(elems.exportBtnId);
+    this._deleteAdminNote = byId(elems.deleteAdminNoteId);
+    this._deleteStart = byId(elems.deleteStartBtnId);
+    this._deleteConfirm = byId(elems.deleteConfirmId);
+    this._deleteNick = byId(elems.deleteNickId);
+    this._deleteInput = byId(elems.deleteInputId);
+    this._deleteSubmit = byId(elems.deleteSubmitBtnId);
+    this._deleteCancel = byId(elems.deleteCancelBtnId);
+
+    // строка ошибки каждой области — в своей карточке
+    this._errorLines = {
+      link: this._linkError,
+      session: byId(elems.sessionErrorId),
+      export: byId(elems.exportErrorId),
+      delete: byId(elems.deleteErrorId),
+    };
+
+    this._linkBtns = [];
+    this._unlinkBtns = [];
+    this._busy = false;
+
+    this.publisher = new Publisher();
+
+    this._open.onclick = () => this.publisher.emit('open');
+    this._close.onclick = () => this.hide();
+    this._signOut.onclick = () => this.publisher.emit('sign-out');
+    this._exportBtn.onclick = () => this.publisher.emit('export');
+
+    this._checks.forEach(check => {
+      check.onchange = () => this._syncControls();
+    });
+
+    this._deleteStart.onclick = () => {
+      this._deleteConfirm.style.display = 'block';
+      this._deleteInput.focus();
+    };
+    this._deleteCancel.onclick = () => this._collapseDelete();
+    this._deleteInput.oninput = () => this._syncControls();
+    this._deleteSubmit.onclick = () =>
+      this.publisher.emit('delete', this._deleteInput.value);
+
+    model.publisher.on('profile', () => this.render());
+    model.publisher.on('error', 'renderError', this);
+    model.publisher.on('export', 'download', this);
+    model.publisher.on('busy', busy => {
+      this._busy = busy;
+      this._syncControls();
+    });
+
+    this._renderLegalLinks();
+  }
+
+  // панель вместо #lobby; профиль рисуется заново, чекбоксы и блок
+  // удаления сброшены
+  show() {
+    this._panel.style.display = 'flex';
+    this._lobby.style.display = 'none';
+
+    this._checks.forEach(check => {
+      check.checked = false;
+    });
+    this._collapseDelete();
+    this._clearMessages();
+    this.render();
+  }
+
+  hide() {
+    // закрытой панели закрывать нечего
+    if (this._panel.style.display === 'none') {
+      return;
+    }
+
+    this._panel.style.display = 'none';
+    this._lobby.style.display = 'flex';
+  }
+
+  // true — все три согласия отмечены
+  consentGiven() {
+    return this._checks.every(check => check.checked);
+  }
+
+  render() {
+    const profile = this._model.getProfile();
+    const clientConfig = this._model.getClientConfig();
+
+    if (!profile || !clientConfig) {
+      return;
+    }
+
+    const titles = this._config.providerTitles;
+    const title = provider => titles[provider] ?? provider;
+    const { inactiveDays, inactiveDaysOAuth } = clientConfig.accounts;
+    const linked = new Map(profile.providers.map(p => [p.provider, p]));
+
+    this._nick.textContent = profile.nick;
+    this._deleteNick.textContent = profile.nick;
+
+    this._renderStatus(profile, title);
+    this._renderBenefits(inactiveDays, inactiveDaysOAuth);
+
+    this._providers.replaceChildren();
+    this._linkBtns = [];
+    this._unlinkBtns = [];
+
+    if (clientConfig.providers.length === 0) {
+      this._providers.textContent = NO_PROVIDERS;
+    }
+
+    clientConfig.providers.forEach(provider => {
+      this._providers.append(
+        this._renderProviderRow(
+          provider,
+          title(provider),
+          linked.get(provider),
+        ),
+      );
+    });
+
+    // согласия нужны, пока есть что привязывать
+    this._consent.style.display = clientConfig.providers.some(
+      provider => !linked.has(provider),
+    )
+      ? 'block'
+      : 'none';
+
+    this._sessionCard.style.display =
+      profile.providers.length > 0 ? 'block' : 'none';
+
+    const deletable = profile.deletable !== false;
+
+    this._deleteAdminNote.style.display = deletable ? 'none' : 'block';
+    this._deleteStart.style.display = deletable ? '' : 'none';
+
+    if (!deletable) {
+      this._collapseDelete();
+    }
+
+    this._renderLegalLinks();
+    this._syncControls();
+  }
+
+  _renderStatus(profile, title) {
+    const days = profile.inactiveDays;
+
+    if (profile.role === 'admin') {
+      this._status.textContent =
+        'Admin profile. It is not deleted for inactivity.';
+    } else if (profile.providers.length === 0) {
+      this._status.textContent = `Not linked. This profile exists only in this browser and is deleted after ${days} days of inactivity.`;
+    } else {
+      const names = profile.providers.map(p => title(p.provider)).join(', ');
+
+      this._status.textContent = `Linked: ${names}. The profile is deleted after ${days} days of inactivity.`;
+    }
+  }
+
+  _renderBenefits(baseDays, oauthDays) {
+    const items = [
+      'Restore your profile in any browser or on any device',
+      `The profile is kept for ${oauthDays} days of inactivity instead of ${baseDays}`,
+      'Sign out and sign back in',
+    ];
+
+    this._benefits.replaceChildren(
+      ...items.map(text => {
+        const li = document.createElement('li');
+
+        li.textContent = text;
+
+        return li;
+      }),
+    );
+  }
+
+  _renderProviderRow(provider, title, link) {
+    const row = document.createElement('div');
+    const btn = document.createElement('input');
+
+    btn.type = 'button';
+    row.className = 'profile-provider';
+
+    if (link) {
+      const label = document.createElement('span');
+
+      label.textContent = `${title} — linked on ${new Date(link.linkedAt).toLocaleDateString()}`;
+      btn.value = 'Unlink';
+      btn.onclick = () => this.publisher.emit('unlink', provider);
+      this._unlinkBtns.push(btn);
+      row.append(label, btn);
+    } else {
+      btn.value = `Link ${title}`;
+      btn.onclick = () => this.publisher.emit('link', provider);
+      this._linkBtns.push(btn);
+      row.append(btn);
+    }
+
+    return row;
+  }
+
+  // ссылки на условия и политику: в панели и в футере лобби
+  _renderLegalLinks() {
+    const legal = this._model.getClientConfig()?.legal;
+
+    if (!legal) {
+      return;
+    }
+
+    const elems = this._elems;
+    const set = (nodes, href) => {
+      nodes.forEach(node => {
+        if (node) {
+          node.href = href;
+        }
+      });
+    };
+
+    set(
+      [
+        ...this._panel.getElementsByClassName(elems.termsLinkClass),
+        document.getElementById(elems.footerTermsId),
+      ],
+      legal.termsUrl,
+    );
+    set(
+      [
+        ...this._panel.getElementsByClassName(elems.privacyLinkClass),
+        document.getElementById(elems.footerPrivacyId),
+      ],
+      legal.privacyUrl,
+    );
+  }
+
+  // доступность кнопок от согласий, ввода ника и занятости (запрос идёт)
+  _syncControls() {
+    const busy = this._busy;
+    const nick = this._model.getProfile()?.nick;
+    const consent = this.consentGiven();
+
+    this._linkBtns.forEach(btn => {
+      btn.disabled = busy || !consent;
+    });
+    this._unlinkBtns.forEach(btn => {
+      btn.disabled = busy;
+    });
+    this._signOut.disabled = busy;
+    this._exportBtn.disabled = busy;
+    this._deleteSubmit.disabled =
+      busy || !nick || this._deleteInput.value !== nick;
+  }
+
+  _collapseDelete() {
+    this._deleteConfirm.style.display = 'none';
+    this._deleteInput.value = '';
+    this._syncControls();
+  }
+
+  _clearMessages() {
+    this._linkNotice.textContent = '';
+
+    Object.values(this._errorLines).forEach(line => {
+      line.textContent = '';
+    });
+  }
+
+  // итог привязки, завершённой при возврате с провайдера
+  renderLinkResult({ ok, code }) {
+    this._clearMessages();
+
+    if (ok) {
+      this._linkNotice.textContent = LINK_SUCCESS;
+    } else {
+      this._linkError.textContent = AREA_ERRORS.link(code);
+    }
+  }
+
+  renderError({ area, code }) {
+    this._clearMessages();
+    this._errorLines[area].textContent = AREA_ERRORS[area](code);
+  }
+
+  // выгрузка данных профиля файлом
+  download({ data, fileName }) {
+    const url = URL.createObjectURL(
+      new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }),
+    );
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+  }
+}

package/src/client/lib/authApi.js

@@ -0,0 +1,106 @@
+// REST-клиент auth-сервиса (packages/auth): регистрация, сессия, OAuth,
+// управление профилем. Без DOM; fetch инъектируется (тесты).
+//
+// Каждый метод возвращает { ok: true, status, data } или
+// { ok: false, status, error }: error — поле `error` тела ответа ('unknown',
+// если его нет), 'network' — fetch бросил исключение (status 0).
+
+const JSON_HEADERS = { 'Content-Type': 'application/json' };
+
+// Единственный код, которым auth-сервис сообщает, что сессии нет.
+// invalidSession («секрет не того формата») вердиктом не считается: клиент
+// шлёт только секрет верного формата, и такой ответ значит, что заголовок
+// Authorization не дошёл до сервиса (редирект, прокси, сбой сервиса). Как и
+// 401 без кода, это сбой: секрет по нему не стирается — у профиля без
+// привязки он единственный ключ
+export const isSessionRejected = res =>
+  res.status === 401 && res.error === 'sessionUnknown';
+
+/**
+ * @param {Object} options
+ * @param {string} options.serviceUrl - базовый URL auth-сервиса.
+ * @param {Function} [options.fetchImpl]
+ */
+export function createAuthApi({
+  serviceUrl,
+  fetchImpl = (...args) => fetch(...args),
+}) {
+  // куки не используются: личность — заголовок Authorization
+  async function request(method, path, { session, body } = {}) {
+    const headers = {};
+
+    if (body !== undefined) {
+      Object.assign(headers, JSON_HEADERS);
+    }
+
+    if (session) {
+      headers.Authorization = `Session ${session}`;
+    }
+
+    const init = { method, headers };
+
+    if (body !== undefined) {
+      init.body = JSON.stringify(body);
+    }
+
+    let res;
+
+    try {
+      res = await fetchImpl(`${serviceUrl}${path}`, init);
+    } catch {
+      return { ok: false, status: 0, error: 'network' };
+    }
+
+    const data = res.status === 204 ? null : await res.json().catch(() => null);
+
+    if (!res.ok) {
+      return {
+        ok: false,
+        status: res.status,
+        error: (data && data.error) || 'unknown',
+      };
+    }
+
+    return { ok: true, status: res.status, data };
+  }
+
+  return {
+    clientConfig: () => request('GET', '/client-config'),
+
+    register: ({ nick, turnstileToken, termsVersion }) =>
+      request('POST', '/register', {
+        body: { nick, turnstileToken, termsVersion },
+      }),
+
+    token: session => request('POST', '/token', { session }),
+
+    logout: session => request('POST', '/logout', { session }),
+
+    restore: ({ code, verifier, termsVersion }) =>
+      request('POST', '/session/restore', {
+        body: { code, verifier, termsVersion },
+      }),
+
+    linkOauth: (session, { code, verifier, consentVersion }) =>
+      request('POST', '/account/oauth', {
+        session,
+        body: { code, verifier, consentVersion },
+      }),
+
+    unlinkOauth: (session, provider) =>
+      request('DELETE', `/account/oauth/${encodeURIComponent(provider)}`, {
+        session,
+      }),
+
+    deleteAccount: (session, confirmNick) =>
+      request('DELETE', '/account', { session, body: { confirmNick } }),
+
+    exportData: session => request('GET', '/account/export', { session }),
+
+    // навигация вкладки, не fetch: URL отдаётся вызывающему
+    oauthStartUrl: (provider, { mode, returnUrl, challenge }) =>
+      `${serviceUrl}/oauth/${provider}/start?mode=${encodeURIComponent(mode)}` +
+      `&returnUrl=${encodeURIComponent(returnUrl)}` +
+      `&challenge=${encodeURIComponent(challenge)}`,
+  };
+}

package/src/client/lib/hostCaps.js

@@ -70,8 +70,9 @@ export function buildHostCaps(
 
 /**
  * Хватит ли срока токена, чтобы вкладка могла принять роль хоста: хост
- * предъявляет токен мастеру посреди матча (register_host, reclaim_host), а
- * продления нет.
+ * предъявляет токен мастеру посреди матча (register_host, reclaim_host).
+ * Токен обычно продлевается заранее; проверка — страховка на случай, когда
+ * продление не удаётся.
  * @param {number|null} expiresAt - мс эпохи; null — неизвестно (не мешает).
  * @param {number} minLifetimeMs
  * @param {number} [now]

package/src/client/lib/pkce.js

@@ -0,0 +1,23 @@
+// PKCE-подобная привязка результата OAuth к начавшей вкладке: verifier
+// остаётся в её sessionStorage, на auth уходит только challenge.
+
+const toBase64Url = bytes =>
+  btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+
+// 32 случайных байта → base64url (43 символа)
+export function createVerifier(cryptoImpl = crypto) {
+  return toBase64Url(cryptoImpl.getRandomValues(new Uint8Array(32)));
+}
+
+// base64url(sha256(verifier)); Web Crypto, поэтому асинхронно
+export async function challengeOf(verifier, cryptoImpl = crypto) {
+  const digest = await cryptoImpl.subtle.digest(
+    'SHA-256',
+    new TextEncoder().encode(verifier),
+  );
+
+  return toBase64Url(new Uint8Array(digest));
+}

package/src/client/lib/roomLink.js

@@ -5,7 +5,7 @@
 //   #/<gameId>/<roomId>   — прямой вход в комнату
 //
 // Маршрут живёт в hash: страница одна (SPA), сервер про маршруты не знает, а
-// OAuth-возврат hash сохраняет (returnUrl LobbyAuthModel.loginUrl). Решения
+// OAuth-возврат hash сохраняет (returnUrl LobbyAuthModel.restoreUrl). Решения
 // «что делать с маршрутом» и «куда уходить из комнаты» — чистые функции:
 // main.js исполняется при импорте, и проверить ветвление внутри него нечем.
 

package/src/client/lib/sessionSync.js

@@ -0,0 +1,45 @@
+/**
+ * Что делать вкладке лобби, когда в localStorage лежит не тот секрет
+ * сессии, с которым она работает: личность вкладки меняется только
+ * перезагрузкой.
+ * @param {Object} ctx
+ * @param {string|null} ctx.storedSession - секрет в хранилище.
+ * @param {string|null} ctx.currentSession - секрет, с которым работает вкладка.
+ * @param {boolean} ctx.inRoom - вкладка в комнате.
+ * @returns {'reload'|'ignore'}
+ */
+export function decideStoredSession({ storedSession, currentSession, inRoom }) {
+  if (storedSession === currentSession) {
+    return 'ignore';
+  }
+
+  // матч доигрывается под прежней личностью; новую покажет следующая загрузка
+  return inRoom ? 'ignore' : 'reload';
+}
+
+/**
+ * То же решение по событию storage: секрет изменил другой контекст.
+ * @param {Object} ctx
+ * @param {{key: string|null, newValue: string|null}} ctx.event - событие storage.
+ * @param {string} ctx.sessionKey - ключ секрета сессии.
+ * @param {string|null} ctx.currentSession - секрет, с которым работает вкладка.
+ * @param {boolean} ctx.inRoom - вкладка в комнате.
+ * @returns {'reload'|'ignore'}
+ */
+export function decideSessionStorageChange({
+  event,
+  sessionKey,
+  currentSession,
+  inRoom,
+}) {
+  // key === null — хранилище очищено целиком
+  if (event.key !== null && event.key !== sessionKey) {
+    return 'ignore';
+  }
+
+  return decideStoredSession({
+    storedSession: event.key === null ? null : event.newValue,
+    currentSession,
+    inRoom,
+  });
+}

package/src/client/lib/signalingErrors.js

@@ -52,13 +52,13 @@ export function decideUnknownRoom({
 }
 
 /**
- * Что делать с error {code: 'invalidToken'} мастера (истёкший вход).
+ * Что делать с error {code: 'invalidToken'} мастера (токен отклонён).
  * @param {Object} ctx
  * @param {Object} ctx.msg - сообщение ошибки ({ code, re, roomId }).
  * @param {boolean} ctx.promoting - вкладка занимает комнату (hostPromotion).
  * @param {boolean} ctx.inRoom - вкладка в комнате.
  * @param {string|null} ctx.sessionState - состояние SessionSupervisor.
- * @returns {'abandonPromotion'|'keepPlaying'|'logoutAndLeave'|'logout'}
+ * @returns {'abandonPromotion'|'keepPlaying'|'renewAndRetry'}
  */
 export function decideInvalidToken({ msg, promoting, inRoom, sessionState }) {
   if (msg.re === 'register_host' && promoting) {
@@ -70,5 +70,5 @@ export function decideInvalidToken({ msg, promoting, inRoom, sessionState }) {
     return 'keepPlaying';
   }
 
-  return inRoom ? 'logoutAndLeave' : 'logout';
+  return 'renewAndRetry';
 }