СТОП — Пожалуйста, подтвердите свой email

[Akyla]

Это решение делает простую проверку в шаблоне PAGE_CONTAINER, чтобы показывать полноэкранное оверлей-сообщение «Подтвердите свой email» пользователям в статусе awaiting confirmation. При этом они всё ещё могут попасть на страницы повторной отправки письма и управления аккаунтом. Ни PHP, ни отдельный аддон не нужны.

🔧 Что делает

Если user_state = email_confirm или email_confirm_edit, то все обычные страницы блокируются модальным оверлеем.

Разрешены только определённые шаблоны: account details, resend confirmation, login, register и т.п.

Фон страницы блокируется от скролла, пока открыт оверлей.

📝 Модификация шаблона

Template: PAGE_CONTAINER

Modification key: confirm_your_email

Search type: Simple replacement

Find: <div class="p-body">

Replace:

$0
  <xf:if is="$xf.visitor.user_state == 'email_confirm' || $xf.visitor.user_state == 'email_confirm_edit'">
    <xf:set var="$__allowed" value="{{ [
      'account_wrapper','account_details','account_email','account_security','account_privacy','account_preferences',
      'account_connected','account_alerts','account_tfa','account_upgrades',
      'login','logout','register','lost_password','two_step',
      'account_confirm_email','public:account_confirm_resend','account_confirm_resend','account_confirm_setup',
      'account_confirmation_email','account_confirmation_resend','account_confirmation_setup',
      'help_page','contact','confirm'
    ] }}" />
    <xf:if is="!in_array($template, $__allowed)">
      <div class="uEmailConfirmOverlay" role="dialog" aria-modal="true" aria-labelledby="uEmailConfirmTitle">
        <div class="uEmailConfirmBox">
          <h2 id="uEmailConfirmTitle">Please confirm your email</h2>
          <p>To browse the community you need to confirm your email address.</p>
          <div class="uEmailConfirmActions">
            <a class="button button--primary" href="{{ link('account-confirmation/resend') }}">Resend confirmation email</a>
            <a class="button" href="{{ link('account/account-details') }}">Change email</a>
            <a class="button button--link" href="{{ link('logout', null, {'t': csrf_token()}) }}">Log out</a>
          </div>
        </div>
      </div>
      <script>
        document.documentElement.classList.add('uEmailConfirmLock');
        try { document.querySelector('.uEmailConfirmBox .button')?.focus(); } catch(e){}
      </script>
    <xf:else />
      {$contents}
    </xf:if>
  <xf:else />
    {$contents}
  </xf:if>
<xf:css>
.uEmailConfirmOverlay {position: fixed;inset: 0;z-index: 9999;background: rgba(0,0,0,.82);backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;padding: 24px;overflow: auto;}
.uEmailConfirmBox {max-width: 560px;width: 100%;background: white;color: @xf-textColor;border-radius: @xf-borderRadiusLarge;box-shadow: 0 14px 48px rgba(0,0,0,.35);padding: 24px;text-align: center;}
.uEmailConfirmBox h2 { margin: 0 0 10px; font-size: 20px; }
.uEmailConfirmActions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0; }
.uEmailConfirmActions .button { min-width: 190px; }
.uHint { font-size: 12px; color: @xf-textColorMuted; margin: 0; }

@media (max-width: 480px) {
  .uEmailConfirmBox { padding: 18px; border-radius: @xf-borderRadiusMedium; }
  .uEmailConfirmActions .button { min-width: 100%; }
}

body:has(.uEmailConfirmOverlay) .p-notice,
body:has(.uEmailConfirmOverlay) .blockMessage { display: none !important; }
.uEmailConfirmLock, .uEmailConfirmLock body { overflow: hidden; }
</xf:css>