File size: 2,514 Bytes
1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1aa50e0 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 35d793a 1f36718 1aa50e0 1f36718 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
class AuthModal extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: #111;
padding: 2rem;
border-radius: 0.5rem;
border: 1px solid #10b981;
width: 100%;
max-width: 400px;
}
.close-btn {
float: right;
cursor: pointer;
color: #10b981;
font-size: 1.5rem;
}
h2 {
color: #10b981;
margin-bottom: 1.5rem;
}
input {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
background: #222;
border: 1px solid #333;
border-radius: 0.25rem;
color: white;
}
button {
width: 100%;
padding: 0.75rem;
background: #10b981;
color: black;
border: none;
border-radius: 0.25rem;
cursor: pointer;
font-weight: bold;
}
button:hover {
opacity: 0.9;
}
</style>
<div class="modal" id="authModal">
<div class="modal-content">
<span class="close-btn" id="closeModal">×</span>
<h2>Staff Login</h2>
<form id="authForm">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Sign In</button>
</form>
</div>
</div>
`;
const modal = this.shadowRoot.getElementById('authModal');
const closeBtn = this.shadowRoot.getElementById('closeModal');
const form = this.shadowRoot.getElementById('authForm');
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
form.addEventListener('submit', (e) => {
e.preventDefault();
modal.style.display = 'none';
document.dispatchEvent(new CustomEvent('auth-success'));
});
// Show modal when auth is required
document.addEventListener('auth-required', () => {
modal.style.display = 'flex';
});
}
}
customElements.define('auth-modal', AuthModal); |