style: redesign admin login page — split layout, glassmorphism, animated blobs
- Full-screen split layout: left branding panel + right login card - Animated background gradient blobs with CSS keyframes - Dot-grid overlay for depth - Glassmorphism login card (backdrop-filter blur, subtle borders) - Brand icon with pulsing glow animation - Feature list on left panel - Input fields with icon prefix (user/key) and password show/hide toggle - Shimmer effect on sign-in button on hover - Error shake animation - Secure badge with green dot indicator - Blobs hidden after login so dashboard background is clean Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
35b3f98d5f
commit
0c52aeb1aa
@ -92,28 +92,199 @@ function adminHtml() {
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||
<title>Data4Autos Admin</title>
|
||||
<title>Data4Autos — Admin Portal</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0f172a;min-height:100vh;color:#f1f5f9}
|
||||
body{font-family:'Inter',system-ui,sans-serif;background:#020617;min-height:100vh;color:#f1f5f9;overflow-x:hidden}
|
||||
|
||||
/* ── login screen ── */
|
||||
#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh}
|
||||
.login-card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:44px 40px;width:100%;max-width:400px;box-shadow:0 24px 48px rgba(0,0,0,0.5)}
|
||||
.login-logo{text-align:center;margin-bottom:28px}
|
||||
.login-logo .badge{display:inline-block;background:linear-gradient(135deg,#1e3a5f,#2563eb);border-radius:12px;padding:12px 20px;font-size:22px;font-weight:900;color:#fff;letter-spacing:-0.5px}
|
||||
.login-logo p{margin-top:10px;font-size:13px;color:#64748b}
|
||||
.login-card h2{font-size:18px;font-weight:800;color:#f1f5f9;margin-bottom:24px;text-align:center}
|
||||
.field{margin-bottom:16px}
|
||||
.field label{display:block;font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
|
||||
.field input{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:11px 14px;color:#f1f5f9;font-size:14px;outline:none;transition:border-color 0.15s}
|
||||
.field input:focus{border-color:#2563eb}
|
||||
.btn-primary{width:100%;background:linear-gradient(135deg,#1d4ed8,#2563eb);border:none;border-radius:8px;color:#fff;padding:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;transition:opacity 0.15s}
|
||||
.btn-primary:hover{opacity:0.9}
|
||||
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
|
||||
.err-msg{background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;padding:10px 14px;font-size:13px;color:#dc2626;margin-top:12px;display:none}
|
||||
/* ═══════════════════════════════════════════
|
||||
LOGIN SCREEN
|
||||
═══════════════════════════════════════════ */
|
||||
#login-screen{
|
||||
display:flex;align-items:stretch;min-height:100vh;
|
||||
background:#020617;
|
||||
}
|
||||
|
||||
/* ── dashboard ── */
|
||||
/* animated background blobs */
|
||||
.login-bg{
|
||||
position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
|
||||
}
|
||||
.blob{
|
||||
position:absolute;border-radius:50%;filter:blur(80px);opacity:0.18;
|
||||
animation:blobFloat 12s ease-in-out infinite;
|
||||
}
|
||||
.blob1{width:600px;height:600px;background:radial-gradient(circle,#3b82f6,#1e3a8a);top:-200px;left:-150px;animation-delay:0s;}
|
||||
.blob2{width:500px;height:500px;background:radial-gradient(circle,#8b5cf6,#1e1b4b);bottom:-180px;right:-100px;animation-delay:-4s;}
|
||||
.blob3{width:350px;height:350px;background:radial-gradient(circle,#06b6d4,#0e7490);top:40%;left:55%;animation-delay:-7s;}
|
||||
@keyframes blobFloat{
|
||||
0%,100%{transform:translateY(0) scale(1);}
|
||||
33%{transform:translateY(-30px) scale(1.05);}
|
||||
66%{transform:translateY(20px) scale(0.97);}
|
||||
}
|
||||
|
||||
/* grid dot overlay */
|
||||
.login-bg::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background-image:radial-gradient(rgba(255,255,255,0.04) 1px,transparent 1px);
|
||||
background-size:32px 32px;
|
||||
}
|
||||
|
||||
/* left branding panel */
|
||||
.login-left{
|
||||
flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
||||
padding:60px 48px;position:relative;z-index:1;
|
||||
}
|
||||
@media(max-width:800px){.login-left{display:none}}
|
||||
|
||||
.brand-icon{
|
||||
width:88px;height:88px;
|
||||
background:linear-gradient(135deg,#1e40af,#3b82f6,#06b6d4);
|
||||
border-radius:24px;display:flex;align-items:center;justify-content:center;
|
||||
font-size:40px;margin-bottom:28px;
|
||||
box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);
|
||||
animation:iconPulse 3s ease-in-out infinite;
|
||||
}
|
||||
@keyframes iconPulse{
|
||||
0%,100%{box-shadow:0 0 0 1px rgba(59,130,246,0.3),0 0 40px rgba(59,130,246,0.25);}
|
||||
50%{box-shadow:0 0 0 1px rgba(59,130,246,0.5),0 0 60px rgba(59,130,246,0.4);}
|
||||
}
|
||||
|
||||
.brand-name{
|
||||
font-size:32px;font-weight:900;letter-spacing:-1px;
|
||||
background:linear-gradient(135deg,#f8fafc,#93c5fd);
|
||||
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
|
||||
background-clip:text;margin-bottom:10px;text-align:center;
|
||||
}
|
||||
.brand-tagline{
|
||||
font-size:14px;color:#475569;text-align:center;max-width:300px;line-height:1.7;
|
||||
}
|
||||
|
||||
.feature-list{
|
||||
margin-top:44px;display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px;
|
||||
}
|
||||
.feature-item{
|
||||
display:flex;align-items:center;gap:12px;
|
||||
background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
|
||||
border-radius:10px;padding:12px 16px;
|
||||
}
|
||||
.feature-dot{
|
||||
width:8px;height:8px;border-radius:50%;background:#3b82f6;flex-shrink:0;
|
||||
box-shadow:0 0 8px #3b82f6;
|
||||
}
|
||||
.feature-item span{font-size:13px;color:#94a3b8;font-weight:500;}
|
||||
|
||||
/* right login panel */
|
||||
.login-right{
|
||||
width:480px;flex-shrink:0;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
padding:40px 32px;position:relative;z-index:1;
|
||||
}
|
||||
@media(max-width:800px){.login-right{width:100%;}}
|
||||
|
||||
.login-card{
|
||||
width:100%;max-width:400px;
|
||||
background:rgba(15,23,42,0.7);
|
||||
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
|
||||
border:1px solid rgba(255,255,255,0.08);
|
||||
border-radius:24px;
|
||||
padding:44px 40px;
|
||||
box-shadow:0 32px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.06);
|
||||
animation:cardIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
|
||||
}
|
||||
@keyframes cardIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
|
||||
|
||||
.card-header{text-align:center;margin-bottom:36px;}
|
||||
.card-mini-logo{
|
||||
display:inline-flex;align-items:center;gap:8px;
|
||||
background:linear-gradient(135deg,rgba(30,64,175,0.6),rgba(37,99,235,0.6));
|
||||
border:1px solid rgba(59,130,246,0.3);
|
||||
border-radius:10px;padding:6px 14px;margin-bottom:20px;
|
||||
}
|
||||
.card-mini-logo span{font-size:12px;font-weight:800;color:#93c5fd;letter-spacing:0.08em;text-transform:uppercase;}
|
||||
.card-title{font-size:22px;font-weight:800;color:#f8fafc;letter-spacing:-0.5px;margin-bottom:6px;}
|
||||
.card-sub{font-size:13px;color:#475569;}
|
||||
|
||||
/* form fields */
|
||||
.inp-wrap{position:relative;margin-bottom:18px;}
|
||||
.inp-wrap label{
|
||||
display:block;font-size:11px;font-weight:700;
|
||||
color:#64748b;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;
|
||||
}
|
||||
.inp-inner{position:relative;}
|
||||
.inp-icon{
|
||||
position:absolute;left:14px;top:50%;transform:translateY(-50%);
|
||||
font-size:15px;color:#475569;pointer-events:none;line-height:1;
|
||||
}
|
||||
.inp-wrap input{
|
||||
width:100%;
|
||||
background:rgba(2,6,23,0.6);
|
||||
border:1px solid rgba(255,255,255,0.08);
|
||||
border-radius:10px;
|
||||
padding:12px 44px 12px 42px;
|
||||
color:#f1f5f9;font-size:14px;font-family:inherit;
|
||||
outline:none;transition:border-color 0.2s,box-shadow 0.2s,background 0.2s;
|
||||
}
|
||||
.inp-wrap input::placeholder{color:#334155;}
|
||||
.inp-wrap input:focus{
|
||||
border-color:rgba(59,130,246,0.6);
|
||||
background:rgba(2,6,23,0.8);
|
||||
box-shadow:0 0 0 3px rgba(59,130,246,0.12);
|
||||
}
|
||||
.eye-btn{
|
||||
position:absolute;right:13px;top:50%;transform:translateY(-50%);
|
||||
background:none;border:none;color:#475569;cursor:pointer;
|
||||
font-size:15px;padding:2px;line-height:1;transition:color 0.15s;
|
||||
}
|
||||
.eye-btn:hover{color:#94a3b8;}
|
||||
|
||||
/* submit button */
|
||||
.btn-login{
|
||||
width:100%;margin-top:6px;
|
||||
padding:13px;border:none;border-radius:10px;
|
||||
background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);
|
||||
background-size:200% 200%;
|
||||
color:#fff;font-size:15px;font-weight:700;font-family:inherit;
|
||||
cursor:pointer;position:relative;overflow:hidden;
|
||||
transition:transform 0.15s,box-shadow 0.2s,background-position 0.4s;
|
||||
box-shadow:0 4px 20px rgba(37,99,235,0.35);
|
||||
}
|
||||
.btn-login::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.18) 50%,transparent 60%);
|
||||
transform:translateX(-100%);transition:transform 0.5s;
|
||||
}
|
||||
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(37,99,235,0.5);background-position:100% 0;}
|
||||
.btn-login:hover::after{transform:translateX(100%);}
|
||||
.btn-login:active{transform:translateY(0);}
|
||||
.btn-login:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
|
||||
.btn-login:disabled::after{display:none;}
|
||||
|
||||
/* error */
|
||||
.err-msg{
|
||||
background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);
|
||||
border-radius:8px;padding:10px 14px;
|
||||
font-size:13px;color:#f87171;margin-top:14px;display:none;
|
||||
animation:shake 0.35s ease;
|
||||
}
|
||||
@keyframes shake{
|
||||
0%,100%{transform:none;}10%,50%,90%{transform:translateX(-4px);}30%,70%{transform:translateX(4px);}
|
||||
}
|
||||
|
||||
/* secure badge */
|
||||
.secure-badge{
|
||||
display:flex;align-items:center;justify-content:center;gap:6px;
|
||||
margin-top:24px;font-size:11px;color:#334155;
|
||||
}
|
||||
.secure-badge .dot{width:6px;height:6px;border-radius:50%;background:#16a34a;box-shadow:0 0 6px #16a34a;}
|
||||
|
||||
/* spinner */
|
||||
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.25);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
DASHBOARD
|
||||
═══════════════════════════════════════════ */
|
||||
#dashboard{display:none}
|
||||
.topbar{background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 100%);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
|
||||
.topbar-title{font-size:18px;font-weight:900;color:#fff}
|
||||
@ -121,18 +292,19 @@ function adminHtml() {
|
||||
.logout-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);border-radius:8px;color:#fff;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer}
|
||||
.logout-btn:hover{background:rgba(255,255,255,0.2)}
|
||||
.content{max-width:960px;margin:0 auto;padding:32px 24px}
|
||||
|
||||
/* add form card */
|
||||
.add-card{background:#1e293b;border:1px solid #334155;border-radius:14px;padding:24px 28px;margin-bottom:28px}
|
||||
.add-card h3{font-size:15px;font-weight:800;color:#f1f5f9;margin-bottom:18px}
|
||||
.form-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end;flex-wrap:wrap}
|
||||
@media(max-width:700px){.form-row{grid-template-columns:1fr}}
|
||||
.form-row .field{margin-bottom:0}
|
||||
.btn-add{background:linear-gradient(135deg,#15803d,#16a34a);border:none;border-radius:8px;color:#fff;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
|
||||
.field{margin-bottom:16px}
|
||||
.field label{display:block;font-size:12px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px}
|
||||
.field input{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;padding:11px 14px;color:#f1f5f9;font-size:14px;font-family:inherit;outline:none;transition:border-color 0.15s}
|
||||
.field input:focus{border-color:#2563eb}
|
||||
.btn-add{background:linear-gradient(135deg,#15803d,#16a34a);border:none;border-radius:8px;color:#fff;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
|
||||
.btn-add:hover{opacity:0.9}
|
||||
.success-msg{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:10px 14px;font-size:13px;color:#15803d;margin-top:12px;display:none}
|
||||
|
||||
/* shops table */
|
||||
.success-msg{background:rgba(22,163,74,0.1);border:1px solid rgba(22,163,74,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:#4ade80;margin-top:12px;display:none}
|
||||
.err-msg-dash{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);border-radius:8px;padding:10px 14px;font-size:13px;color:#f87171;margin-top:12px;display:none}
|
||||
.shops-card{background:#1e293b;border:1px solid #334155;border-radius:14px;overflow:hidden}
|
||||
.shops-card-header{padding:18px 24px;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between}
|
||||
.shops-card-header h3{font-size:15px;font-weight:800;color:#f1f5f9}
|
||||
@ -144,32 +316,80 @@ function adminHtml() {
|
||||
.shop-name{font-weight:700;color:#f1f5f9;font-size:14px}
|
||||
.note-text{color:#64748b;font-style:italic}
|
||||
.tag{display:inline-block;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700}
|
||||
.tag-ok{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
|
||||
.tag-exp{background:#fff1f2;color:#dc2626;border:1px solid #fecdd3}
|
||||
.tag-perm{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
|
||||
.tag-ok{background:rgba(22,163,74,0.15);color:#4ade80;border:1px solid rgba(22,163,74,0.3)}
|
||||
.tag-exp{background:rgba(220,38,38,0.12);color:#f87171;border:1px solid rgba(220,38,38,0.25)}
|
||||
.tag-perm{background:rgba(59,130,246,0.12);color:#60a5fa;border:1px solid rgba(59,130,246,0.25)}
|
||||
.date-text{color:#94a3b8;font-size:12px}
|
||||
.btn-del{background:#fff1f2;border:1px solid #fecdd3;border-radius:6px;color:#dc2626;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
|
||||
.btn-del:hover{background:#fecdd3}
|
||||
.btn-del{background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.25);border-radius:6px;color:#f87171;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
|
||||
.btn-del:hover{background:rgba(220,38,38,0.2)}
|
||||
.empty-state{padding:48px;text-align:center;color:#475569}
|
||||
.empty-state .icon{font-size:36px;margin-bottom:12px}
|
||||
.spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── LOGIN ── -->
|
||||
<div id="login-screen">
|
||||
<div class="login-card">
|
||||
<div class="login-logo">
|
||||
<div class="badge">D4A Admin</div>
|
||||
<p>Data4Autos Free Access Manager</p>
|
||||
<!-- background blobs (login only) -->
|
||||
<div class="login-bg" id="login-bg">
|
||||
<div class="blob blob1"></div>
|
||||
<div class="blob blob2"></div>
|
||||
<div class="blob blob3"></div>
|
||||
</div>
|
||||
<h2>Sign In</h2>
|
||||
<div class="field"><label>Username</label><input type="text" id="inp-user" placeholder="d4a-admin" autocomplete="username"/></div>
|
||||
<div class="field"><label>Password</label><input type="password" id="inp-pass" placeholder="••••••••••••" autocomplete="current-password"/></div>
|
||||
<button class="btn-primary" id="login-btn" onclick="doLogin()">Sign In</button>
|
||||
|
||||
<!-- ══════════════════════════════════════
|
||||
LOGIN SCREEN
|
||||
═══════════════════════════════════════ -->
|
||||
<div id="login-screen">
|
||||
|
||||
<!-- Left branding panel -->
|
||||
<div class="login-left">
|
||||
<div class="brand-icon">🛡️</div>
|
||||
<div class="brand-name">Data4Autos</div>
|
||||
<div class="brand-tagline">Secure admin portal for managing free-access shops on the Turn14 integration platform.</div>
|
||||
<div class="feature-list">
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>Grant free access to any Shopify store</span></div>
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>Set custom expiry dates per shop</span></div>
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>Changes take effect instantly</span></div>
|
||||
<div class="feature-item"><div class="feature-dot"></div><span>No redeployment required</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right login panel -->
|
||||
<div class="login-right">
|
||||
<div class="login-card">
|
||||
<div class="card-header">
|
||||
<div class="card-mini-logo"><span>D4A Admin</span></div>
|
||||
<div class="card-title">Welcome back</div>
|
||||
<div class="card-sub">Sign in to your admin portal</div>
|
||||
</div>
|
||||
|
||||
<div class="inp-wrap">
|
||||
<label>Username</label>
|
||||
<div class="inp-inner">
|
||||
<span class="inp-icon">👤</span>
|
||||
<input type="text" id="inp-user" placeholder="Enter your username" autocomplete="username"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inp-wrap">
|
||||
<label>Password</label>
|
||||
<div class="inp-inner">
|
||||
<span class="inp-icon">🔑</span>
|
||||
<input type="password" id="inp-pass" placeholder="Enter your password" autocomplete="current-password"/>
|
||||
<button class="eye-btn" id="eye-btn" onclick="togglePass()" type="button" tabindex="-1">👁</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn-login" id="login-btn" onclick="doLogin()">
|
||||
Sign In to Admin Portal
|
||||
</button>
|
||||
|
||||
<div class="err-msg" id="login-err"></div>
|
||||
|
||||
<div class="secure-badge">
|
||||
<div class="dot"></div>
|
||||
<span>Secure connection · Session expires in 8 hours</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -204,7 +424,7 @@ function adminHtml() {
|
||||
<button class="btn-add" onclick="doAddShop()">Add Shop</button>
|
||||
</div>
|
||||
<div class="success-msg" id="add-success">✅ Shop added successfully!</div>
|
||||
<div class="err-msg" id="add-err"></div>
|
||||
<div class="err-msg-dash" id="add-err"></div>
|
||||
</div>
|
||||
|
||||
<!-- Shops table -->
|
||||
@ -238,6 +458,14 @@ async function checkAuth() {
|
||||
}
|
||||
checkAuth();
|
||||
|
||||
// ── PASSWORD TOGGLE ──────────────────────────────────────────────────────────
|
||||
function togglePass() {
|
||||
const inp = document.getElementById('inp-pass');
|
||||
const btn = document.getElementById('eye-btn');
|
||||
if (inp.type === 'password') { inp.type = 'text'; btn.textContent = '🙈'; }
|
||||
else { inp.type = 'password'; btn.textContent = '👁'; }
|
||||
}
|
||||
|
||||
// ── LOGIN ───────────────────────────────────────────────────────────────────
|
||||
async function doLogin() {
|
||||
const btn = document.getElementById('login-btn');
|
||||
@ -245,16 +473,16 @@ async function doLogin() {
|
||||
const user = document.getElementById('inp-user').value.trim();
|
||||
const pass = document.getElementById('inp-pass').value;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner"></span>';
|
||||
btn.innerHTML = '<span class="spinner"></span> Signing in…';
|
||||
err.style.display = 'none';
|
||||
|
||||
const r = await api('POST', '/login', { username: user, password: pass });
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Sign In';
|
||||
btn.textContent = 'Sign In to Admin Portal';
|
||||
if (r.ok) {
|
||||
showDashboard();
|
||||
} else {
|
||||
err.textContent = r.data.error || 'Invalid credentials';
|
||||
err.textContent = '⚠️ ' + (r.data.error || 'Invalid credentials');
|
||||
err.style.display = 'block';
|
||||
}
|
||||
}
|
||||
@ -265,6 +493,7 @@ async function doLogout() {
|
||||
await api('POST', '/logout');
|
||||
document.getElementById('dashboard').style.display = 'none';
|
||||
document.getElementById('login-screen').style.display = 'flex';
|
||||
document.getElementById('login-bg').style.display = 'block';
|
||||
document.getElementById('inp-user').value = '';
|
||||
document.getElementById('inp-pass').value = '';
|
||||
}
|
||||
@ -272,6 +501,7 @@ async function doLogout() {
|
||||
// ── SHOW DASHBOARD ──────────────────────────────────────────────────────────
|
||||
function showDashboard() {
|
||||
document.getElementById('login-screen').style.display = 'none';
|
||||
document.getElementById('login-bg').style.display = 'none';
|
||||
document.getElementById('dashboard').style.display = 'block';
|
||||
loadShops();
|
||||
}
|
||||
@ -333,7 +563,7 @@ async function doAddShop() {
|
||||
ok.style.display = 'none';
|
||||
err.style.display = 'none';
|
||||
|
||||
if (!shop) { err.textContent = 'Shop domain is required.'; err.style.display = 'block'; return; }
|
||||
if (!shop) { err.textContent = '⚠️ Shop domain is required.'; err.style.display = 'block'; return; }
|
||||
|
||||
const expiresAt = expires ? new Date(expires + 'T23:59:59.000Z').toISOString() : null;
|
||||
const r = await api('POST', '/api/shops', { shop, expiresAt, note });
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user