118 lines
4.2 KiB
Plaintext
118 lines
4.2 KiB
Plaintext
<style type="text/css">
|
|
.password-logo {
|
|
max-width: {{ settings.logo_width }}px;
|
|
}
|
|
</style>
|
|
|
|
<div class="color-{{ section.settings.color_scheme }} gradient">
|
|
<div class="password-header">
|
|
{%- if settings.logo != blank -%}
|
|
{%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%}
|
|
{%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%}
|
|
{{
|
|
settings.logo
|
|
| image_url: width: 500
|
|
| image_tag:
|
|
class: 'password-logo',
|
|
widths: '50, 100, 150, 200, 250, 300, 400, 500',
|
|
width: settings.logo_width,
|
|
height: logo_height,
|
|
alt: logo_alt
|
|
}}
|
|
{%- else -%}
|
|
<h1 class="h2">{{ shop.name }}</h1>
|
|
{%- endif -%}
|
|
|
|
{%- if shop.password_message != blank -%}
|
|
<div class="password-content">
|
|
{{ shop.password_message }}
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
<password-modal>
|
|
<details class="password-modal modal">
|
|
<summary class="modal__toggle" aria-haspopup="dialog">
|
|
<div class="modal__toggle-open password-link link underlined-link">
|
|
{% render 'icon-padlock' %}
|
|
{{ 'general.password_page.login_password_button' | t }}
|
|
</div>
|
|
<div class="modal__toggle-close" aria-hidden="true">
|
|
{% render 'icon-close' %}
|
|
</div>
|
|
</summary>
|
|
<div
|
|
class="modal__content"
|
|
role="dialog"
|
|
aria-labelledby="DialogHeading"
|
|
aria-modal="true"
|
|
>
|
|
<div class="password-modal__content" tabindex="-1">
|
|
<button type="button" class="modal__close-button link" aria-label="{{ 'accessibility.close' | t }}">
|
|
{% render 'icon-close' %}
|
|
</button>
|
|
<h2 class="password-modal__content-heading" id="DialogHeading">
|
|
{{ 'general.password_page.login_form_heading' | t }}
|
|
</h2>
|
|
{%- form 'storefront_password', class: 'password-form' -%}
|
|
<div class="password-field field{% if form.errors %} password-field--error{% endif %}">
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
id="Password"
|
|
class="field__input"
|
|
autocomplete="current-password"
|
|
{% if form.errors %}
|
|
aria-invalid="true"
|
|
aria-describedby="PasswordLoginForm-password-error"
|
|
{%- endif -%}
|
|
placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}"
|
|
>
|
|
<label class="field__label" for="{{ 'general.password_page.login_form_password_label' | t }}">
|
|
{{- 'general.password_page.login_form_password_placeholder' | t -}}
|
|
</label>
|
|
{%- if form.errors -%}
|
|
<div id="PasswordLoginForm-password-error" role="status">
|
|
<span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
|
|
<span class="form__message">
|
|
{%- render 'icon-error' %}
|
|
{{ 'general.password_page.login_form_error' | t -}}
|
|
</span>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
<button name="commit" class="password-button button button--outline">
|
|
{{ 'general.password_page.login_form_submit' | t }}
|
|
</button>
|
|
{%- endform -%}
|
|
<small class="password__footer-text">{{ 'general.password_page.admin_link_html' | t }}</small>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</password-modal>
|
|
</div>
|
|
</div>
|
|
{% assign scheme1 = settings.color_schemes | first %}
|
|
{%- if section.settings.color_scheme == scheme1 -%}<hr>{%- endif -%}
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "t:sections.main-password-header.name",
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.main-password-header.settings.logo_header.content"
|
|
},
|
|
{
|
|
"type": "paragraph",
|
|
"content": "t:sections.main-password-header.settings.logo_help.content"
|
|
},
|
|
{
|
|
"type": "color_scheme",
|
|
"id": "color_scheme",
|
|
"label": "t:sections.all.colors.label",
|
|
"default": "scheme-1"
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|