← back to Dw Theme Boost Fix
templates/customers/login.liquid
399 lines
<style>
/* ── DW Professional Login ─────────────────────────────────────────────── */
.dw-login-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 40px 20px;
font-family: Lora, serif;
}
.dw-login-card {
width: 100%;
max-width: 440px;
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 4px;
padding: 48px 40px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.dw-login-card h1 {
font-family: Lora, serif;
font-weight: 400;
font-size: 1.75rem;
color: #000;
text-align: center;
margin: 0 0 6px 0;
letter-spacing: 0.02em;
}
.dw-login-subtitle {
text-align: center;
font-size: 0.9rem;
color: #787878;
margin: 0 0 32px 0;
font-family: Lora, serif;
}
/* ── Google Button ──────────────────────────────────────────────────────── */
.dw-google-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 13px 20px;
background: #fff;
border: 1px solid #dadce0;
border-radius: 3px;
cursor: pointer;
font-family: Lora, serif;
font-size: 0.95rem;
color: #3c4043;
letter-spacing: 0.01em;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.dw-google-btn:hover {
background: #f7f8f8;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dw-google-btn svg {
flex-shrink: 0;
}
/* ── Divider ────────────────────────────────────────────────────────────── */
.dw-divider {
display: flex;
align-items: center;
margin: 28px 0;
gap: 16px;
}
.dw-divider-line {
flex: 1;
height: 1px;
background: #e4e4e4;
}
.dw-divider-text {
font-family: Lora, serif;
font-size: 0.8rem;
color: #999;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ── Form Fields ────────────────────────────────────────────────────────── */
.dw-field {
margin-bottom: 20px;
}
.dw-field label {
display: block;
font-family: Lora, serif;
font-size: 0.82rem;
font-weight: 400;
color: #444;
margin-bottom: 6px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.dw-field input[type="text"],
.dw-field input[type="email"],
.dw-field input[type="password"] {
width: 100%;
padding: 12px 14px;
border: 1px solid #e4e4e4;
border-radius: 3px;
font-family: Lora, serif;
font-size: 0.95rem;
color: #444;
background: #fff;
transition: border-color 0.15s ease;
box-sizing: border-box;
}
.dw-field input:focus {
outline: none;
border-color: #b08212;
box-shadow: 0 0 0 1px #b08212;
}
.dw-field input::placeholder {
color: #bbb;
}
/* ── Submit Button ──────────────────────────────────────────────────────── */
.dw-submit-btn {
width: 100%;
padding: 14px 20px;
background: #b08212;
color: #fff;
border: none;
border-radius: 3px;
font-family: Lora, serif;
font-size: 0.9rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: background 0.15s ease;
margin-top: 4px;
}
.dw-submit-btn:hover {
background: #96700f;
}
/* ── Links ──────────────────────────────────────────────────────────────── */
.dw-forgot-link {
display: block;
text-align: right;
font-family: Lora, serif;
font-size: 0.82rem;
color: #b08212;
text-decoration: none;
margin-top: -12px;
margin-bottom: 24px;
cursor: pointer;
transition: color 0.15s ease;
}
.dw-forgot-link:hover {
color: #96700f;
text-decoration: underline;
}
.dw-register-section {
text-align: center;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #e4e4e4;
}
.dw-register-section p {
font-family: Lora, serif;
font-size: 0.88rem;
color: #787878;
margin: 0 0 12px 0;
}
.dw-register-link {
display: inline-block;
font-family: Lora, serif;
font-size: 0.85rem;
font-weight: 400;
color: #b08212;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 10px 28px;
border: 1px solid #b08212;
border-radius: 3px;
transition: all 0.15s ease;
}
.dw-register-link:hover {
background: #b08212;
color: #fff;
}
/* ── Error Banner ───────────────────────────────────────────────────────── */
.dw-error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
font-family: Lora, serif;
font-size: 0.85rem;
padding: 12px 16px;
border-radius: 3px;
margin-bottom: 20px;
text-align: center;
}
.dw-success {
background: #f0fdf4;
border: 1px solid #86efac;
color: #166534;
font-family: Lora, serif;
font-size: 0.85rem;
padding: 12px 16px;
border-radius: 3px;
margin-bottom: 20px;
text-align: center;
}
/* ── Recover Password Panel ─────────────────────────────────────────────── */
.dw-recover-panel {
display: none;
}
.dw-recover-panel.active {
display: block;
}
.dw-login-panel.hidden {
display: none;
}
.dw-recover-panel p {
font-family: Lora, serif;
font-size: 0.88rem;
color: #787878;
text-align: center;
margin: 0 0 24px 0;
}
.dw-back-link {
display: block;
text-align: center;
font-family: Lora, serif;
font-size: 0.85rem;
color: #b08212;
text-decoration: none;
margin-top: 16px;
cursor: pointer;
}
.dw-back-link:hover {
text-decoration: underline;
}
/* ── Guest Checkout ─────────────────────────────────────────────────────── */
.dw-guest-section {
text-align: center;
margin-top: 20px;
}
.dw-guest-section p {
font-family: Lora, serif;
font-size: 0.85rem;
color: #787878;
margin: 0 0 10px 0;
}
.dw-guest-btn {
display: inline-block;
font-family: Lora, serif;
font-size: 0.85rem;
color: #444;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 10px 28px;
border: 1px solid #e4e4e4;
border-radius: 3px;
background: transparent;
cursor: pointer;
transition: all 0.15s ease;
}
.dw-guest-btn:hover {
border-color: #444;
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
.dw-login-card {
padding: 36px 24px;
}
.dw-login-card h1 {
font-size: 1.5rem;
}
}
</style>
<div class="dw-login-wrapper">
<div class="dw-login-card">
<!-- ── Login Panel ──────────────────────────────────────────────────── -->
<div class="dw-login-panel" id="dw-login-panel">
<h1>{{ 'customers.login.header' | t }}</h1>
<p class="dw-login-subtitle">Sign in to your Designer Wallcoverings account</p>
<!-- Google Login -->
<button type="button" class="dw-google-btn" onclick="window.location.href='/auth/login?provider=google';" aria-label="Sign in with Google">
<svg width="18" height="18" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.01 24.01 0 0 0 0 21.56l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>
Continue with Google
</button>
<!-- Divider -->
<div class="dw-divider">
<div class="dw-divider-line"></div>
<span class="dw-divider-text">or sign in with email</span>
<div class="dw-divider-line"></div>
</div>
<!-- Standard Login Form -->
{% form 'customer_login' %}
{% if form.errors %}
<div class="dw-error">{{ 'customers.login.error' | t }}</div>
{% endif %}
<div class="dw-field">
<label for="customer_email">{{ 'general.general.email' | t }}</label>
<input type="email" id="customer_email" name="customer[email]" value="{{ form.email }}" placeholder="you@example.com" autocomplete="email" autofocus>
</div>
<div class="dw-field">
<label for="customer_password">{{ 'general.general.password' | t }}</label>
<input type="password" id="customer_password" name="customer[password]" placeholder="••••••••" autocomplete="current-password">
</div>
<a class="dw-forgot-link" id="dw-forgot-toggle">{{ 'customers.login.forgot_your_password' | t }}</a>
<input type="submit" class="dw-submit-btn" value="{{ 'customers.login.submit' | t }}">
{% endform %}
<!-- Register / New Customer -->
{% if shop.checkout.guest_login %}
<div class="dw-guest-section">
{% form 'guest_login' %}
<p>{{ 'customers.guest_checkout.message' | t }}</p>
<input type="submit" class="dw-guest-btn" value="{{ 'customers.guest_checkout.submit' | t }}">
{% endform %}
</div>
{% else %}
<div class="dw-register-section">
<p>Don't have an account?</p>
<a class="dw-register-link" href="{{ routes.account_register_url }}">{{ 'customers.register.submit' | t }}</a>
</div>
{% endif %}
</div>
<!-- ── Recover Password Panel ───────────────────────────────────────── -->
<div class="dw-recover-panel" id="dw-recover-panel">
<h1>Reset Your Password</h1>
{% form 'recover_customer_password' %}
{% if form.posted_successfully? %}
<div class="dw-success">We've sent you an email with a link to reset your password.</div>
{% endif %}
<p>{{ 'customers.login.recover_password_message' | t }}</p>
<div class="dw-field">
<label for="recover_email">{{ 'general.general.email' | t }}</label>
<input type="email" id="recover_email" name="email" value="{{ form.email }}" placeholder="you@example.com" autocomplete="email" class="{% if form.errors %}error{% endif %}">
{% if form.errors %}
<div class="dw-error" style="margin-top:8px">{{ form.errors.messages['form'] }}</div>
{% endif %}
</div>
<input type="submit" class="dw-submit-btn" value="{{ 'customers.reset_password.submit' | t }}">
{% endform %}
<a class="dw-back-link" id="dw-back-toggle">← Back to login</a>
</div>
</div>
</div>
<script>
(function() {
var loginPanel = document.getElementById('dw-login-panel');
var recoverPanel = document.getElementById('dw-recover-panel');
var forgotToggle = document.getElementById('dw-forgot-toggle');
var backToggle = document.getElementById('dw-back-toggle');
function showRecover() {
loginPanel.classList.add('hidden');
recoverPanel.classList.add('active');
}
function showLogin() {
recoverPanel.classList.remove('active');
loginPanel.classList.remove('hidden');
}
if (forgotToggle) forgotToggle.addEventListener('click', showRecover);
if (backToggle) backToggle.addEventListener('click', showLogin);
// Auto-show recover panel if reset was posted
if (recoverPanel.querySelector('[data-successful-reset]') || recoverPanel.querySelector('.dw-success')) {
showRecover();
}
// Also show recover panel if hash is #recover
if (window.location.hash === '#recover') {
showRecover();
}
})();
</script>