vimp-engine 0.37.1 → 0.38.0

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

@@ -4,23 +4,41 @@ import Publisher from '../../../lib/Publisher.js';
 
 let lobbyAuthView;
 
-const NICK_ERROR_MESSAGES = {
-  nickTaken: 'This nick is already taken',
-  invalidNick: 'Invalid nick',
-  sessionExpired: 'Session expired, please sign in again',
-  network: 'Network error, try again',
+const REGISTER_ERRORS = {
+  invalidNick:
+    'Invalid nick: 2–14 characters, starting with a letter. Letters, digits, spaces, "_" and "#" are allowed; the last character is a letter, digit or "_".',
+  nickTaken: 'This nick is already taken.',
+  turnstileBlocked:
+    'Security check blocked. Please disable your ad blocker (or Brave Shields) and click Retry.',
+  turnstileRequired: 'Security check failed. Please try again.',
+  turnstileFailed: 'Security check failed. Please try again.',
+  turnstileUnavailable:
+    'Registration is temporarily unavailable. Please try again later.',
+  rateLimited: 'Too many attempts. Please wait a minute and try again.',
+  termsRequired: 'The terms have been updated. Reload the page and try again.',
 };
 
-const LOGIN_ERROR_MESSAGES = {
-  tokenExpired: 'Session expired, please sign in again',
-  invalidToken: 'Session expired, please sign in again',
-  oauthFailed: 'Sign-in failed, please try again',
+const REGISTER_ERROR_FALLBACK = 'Network error. Please try again.';
+
+const RESTORE_ERRORS = {
+  noLinkedProfile:
+    'No profile is linked to this account. Create a profile first — you can link the account in Profile settings.',
+  denied: 'Sign-in was cancelled.',
+};
+
+const RESTORE_ERROR_FALLBACK = 'Sign-in failed. Please try again.';
+
+const NOTICES = {
+  profileGone:
+    'Your profile was not found — it may have been deleted after a period of inactivity.',
+  deleted: 'Your profile has been deleted.',
+  signedOut: 'You have signed out.',
 };
 
-// Представление логина лобби: переключает login/nick секции lobbyAuth.pug и
-// бейдж пользователя в lobby.pug (#lobby-user), скрывает #lobby целиком —
-// до авторизации список серверов недоступен (B2). Показывает лобби main.js,
-// когда маршрут в него ведёт: вход по ссылке минует лобби вовсе
+// Представление экрана профиля: загрузка, отказ сервиса, Welcome и бейдж
+// игрока в лобби (#lobby-user). Скрывает #lobby целиком, пока у вкладки нет
+// личности; показывает лобби main.js, когда маршрут в него ведёт: вход по
+// ссылке минует лобби вовсе. Текст в DOM — только через textContent.
 export default class LobbyAuthView {
   constructor(model, config) {
     if (lobbyAuthView) {
@@ -29,69 +47,104 @@ export default class LobbyAuthView {
 
     lobbyAuthView = this;
 
-    const { elems, providerButtonClass } = config;
-
-    this._elems = elems;
+    const { elems } = config;
+    const byId = id => document.getElementById(id);
+
+    this._model = model;
+    this._container = byId(elems.containerId);
+    this._status = byId(elems.statusId);
+    this._statusText = byId(elems.statusTextId);
+    this._statusRetry = byId(elems.statusRetryId);
+    this._welcome = byId(elems.welcomeId);
+    this._notice = byId(elems.noticeId);
+    this._nickInput = byId(elems.nickInputId);
+    this._nickError = byId(elems.nickErrorId);
+    this._turnstileRetry = byId(elems.turnstileRetryId);
+    this._turnstile = byId(elems.turnstileId);
+    this._register = byId(elems.registerId);
+    this._terms = byId(elems.termsId);
+    this._privacy = byId(elems.privacyId);
+    this._lifetime = byId(elems.lifetimeId);
+    this._restore = byId(elems.restoreId);
+    this._providers = byId(elems.providersId);
+    this._restoreError = byId(elems.restoreErrorId);
     this._providerButtons = document.querySelectorAll(
-      `.${providerButtonClass}`,
+      `.${elems.providerClass}`,
     );
-
-    this._container = document.getElementById(elems.containerId);
-    this._loginSection = document.getElementById(elems.loginSectionId);
-    this._loginError = document.getElementById(elems.loginErrorId);
-    this._nickSection = document.getElementById(elems.nickSectionId);
-    this._nickInput = document.getElementById(elems.nickInputId);
-    this._nickError = document.getElementById(elems.nickErrorId);
-    this._nickSubmit = document.getElementById(elems.nickSubmitId);
-    this._lobby = document.getElementById(elems.lobbyId);
-    this._user = document.getElementById(elems.userId);
-    this._userNick = document.getElementById(elems.userNickId);
-    this._userLogout = document.getElementById(elems.userLogoutId);
+    this._lobby = byId(elems.lobbyId);
+    this._user = byId(elems.userId);
+    this._userNick = byId(elems.userNickId);
 
     this.publisher = new Publisher();
 
-    this._providerButtons.forEach(btn => {
-      btn.onclick = () => this.publisher.emit('login', btn.dataset.provider);
-    });
-
-    this._nickSubmit.onclick = () => this._emitNick();
+    this._register.onclick = () => this._emitRegister();
     this._nickInput.onkeydown = e => {
       if (e.key === 'Enter') {
-        this._emitNick();
+        this._emitRegister();
       }
     };
-
-    this._userLogout.onclick = () => this.publisher.emit('logout');
+    this._restore.onclick = () => {
+      this._providers.style.display = 'block';
+    };
+    this._providerButtons.forEach(btn => {
+      btn.onclick = () => this.publisher.emit('restore', btn.dataset.provider);
+    });
+    this._statusRetry.onclick = () => this.publisher.emit('retry');
+    this._turnstileRetry.onclick = () => this.publisher.emit('turnstile-retry');
 
     const mp = model.publisher;
 
-    mp.on('login-required', 'showLogin', this);
-    mp.on('nick-required', 'showNick', this);
+    mp.on('loading', 'showLoading', this);
+    mp.on('service-error', 'showServiceError', this);
+    mp.on('welcome', 'showWelcome', this);
     mp.on('authenticated', 'showLobby', this);
-    mp.on('login-error', 'renderLoginError', this);
-    mp.on('nick-error', 'renderNickError', this);
+    mp.on('register-error', 'renderRegisterError', this);
+    mp.on('restore-error', 'renderRestoreError', this);
   }
 
-  showLogin(providers = []) {
-    this._container.style.display = 'block';
-    this._loginSection.style.display = 'block';
-    this._nickSection.style.display = 'none';
-    this._lobby.style.display = 'none';
-    this._user.style.display = 'none';
+  showLoading() {
+    this._showStatus('Loading…', false);
+  }
+
+  showServiceError() {
+    this._showStatus('The profile service is unavailable.', true);
+  }
+
+  _showStatus(text, retry) {
+    this._enterAuth();
+    this._status.style.display = 'block';
+    this._welcome.style.display = 'none';
+    this._statusText.textContent = text;
+    this._statusRetry.style.display = retry ? '' : 'none';
+  }
+
+  showWelcome({ notice = null } = {}) {
+    const clientConfig = this._model.getClientConfig();
+    const { providers } = clientConfig;
+
+    this._enterAuth();
+    this._status.style.display = 'none';
+    this._welcome.style.display = 'block';
+
+    this._notice.textContent = NOTICES[notice] ?? '';
+    this._terms.href = clientConfig.legal.termsUrl;
+    this._privacy.href = clientConfig.legal.privacyUrl;
+    this._lifetime.textContent =
+      'Your profile is kept in this browser and is deleted after ' +
+      `${clientConfig.accounts.inactiveDays} days of inactivity. ` +
+      'Link an account later to keep it longer.';
 
     this._providerButtons.forEach(btn => {
       btn.style.display = providers.includes(btn.dataset.provider)
         ? ''
         : 'none';
     });
-  }
-
-  showNick() {
-    this._container.style.display = 'block';
-    this._loginSection.style.display = 'none';
-    this._nickSection.style.display = 'block';
+    this._restore.style.display = providers.length > 0 ? '' : 'none';
+    this._providers.style.display = 'none';
+    this._restoreError.textContent = '';
     this._nickError.textContent = '';
-    this._nickInput.value = '';
+    this._turnstileRetry.style.display = 'none';
+
     this._nickInput.focus();
   }
 
@@ -101,17 +154,52 @@ export default class LobbyAuthView {
     this._userNick.textContent = nick;
   }
 
-  renderLoginError(code) {
-    this._loginError.textContent =
-      LOGIN_ERROR_MESSAGES[code] || 'Sign-in failed';
+  // ошибка регистрации по коду; null снимает текст
+  renderRegisterError(code) {
+    this._nickError.textContent =
+      code === null ? '' : (REGISTER_ERRORS[code] ?? REGISTER_ERROR_FALLBACK);
   }
 
-  renderNickError(code) {
-    this._nickError.textContent =
-      NICK_ERROR_MESSAGES[code] || 'Something went wrong';
+  renderRestoreError(code) {
+    this._providers.style.display = 'block';
+    this._restoreError.textContent =
+      RESTORE_ERRORS[code] ?? RESTORE_ERROR_FALLBACK;
+  }
+
+  // блокирует поле и кнопки на время запроса
+  setBusy(busy) {
+    this._nickInput.disabled = busy;
+    this._register.disabled = busy;
+    this._restore.disabled = busy;
+    this._providerButtons.forEach(btn => {
+      btn.disabled = busy;
+    });
+  }
+
+  getTurnstileContainer() {
+    return this._turnstile;
+  }
+
+  showTurnstileRetry(visible) {
+    this._turnstileRetry.style.display = visible ? '' : 'none';
+  }
+
+  getNickValue() {
+    return this._nickInput.value;
+  }
+
+  focusNick() {
+    this._nickInput.focus();
+  }
+
+  // экран профиля поверх скрытого лобби
+  _enterAuth() {
+    this._container.style.display = 'block';
+    this._lobby.style.display = 'none';
+    this._user.style.display = 'none';
   }
 
-  _emitNick() {
-    this.publisher.emit('nick', this._nickInput.value.trim());
+  _emitRegister() {
+    this.publisher.emit('register', this._nickInput.value);
   }
 }

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

@@ -0,0 +1,373 @@
+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._linkCard = byId(elems.linkCardId);
+    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);
+  }
+}