Please confirm your email - XenForo 2.3

This uses a simple template check in PAGE_CONTAINER to show a full-screen “Confirm your email” overlay to users in the awaiting confirmation state. They can still access the resend and account pages. No PHP, no add-on.

What it does

• If a user’s user_state is email_confirm or email_confirm_edit, block normal pages with a modal overlay. Allow specific templates like account details, confirmation resend, login, register, etc.
• Disable scrolling on the bcacgroung of the overlay.

Template modification:
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>