- Для версий
- 2.3
🔧 Что делает
- Если 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:
HTML:
$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>