File size: 7,422 Bytes
cc44a14 | 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 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | class CustomAuthModal extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.modal-overlay {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
.modal-content {
transform: translateY(-20px);
opacity: 0;
transition: all 0.3s ease;
}
.modal-active {
transform: translateY(0);
opacity: 1;
}
.tab-button {
transition: all 0.2s ease;
}
.tab-button.active {
border-bottom: 2px solid #0D47A1;
color: #0D47A1;
}
.input-field:focus {
border-color: #1976D2;
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}
</style>
<div id="modal" class="fixed inset-0 z-50 hidden">
<div class="modal-overlay absolute inset-0 flex items-center justify-center p-4">
<div class="modal-content bg-white rounded-xl shadow-xl w-full max-w-md">
<!-- Tabs -->
<div class="flex border-b border-gray-200">
<button id="loginTab" class="tab-button flex-1 py-4 font-medium text-gray-500 active">Login</button>
<button id="forgotTab" class="tab-button flex-1 py-4 font-medium text-gray-500">Reset Password</button>
<button id="closeModal" class="px-4 text-gray-400 hover:text-gray-600">
<i data-feather="x"></i>
</button>
</div>
<!-- Login Form -->
<form id="loginForm" class="p-6">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email or Phone</label>
<input type="text" id="email" name="email" required
class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none">
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" name="password" required
class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input type="checkbox" id="remember" name="remember"
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
</div>
<button type="button" onclick="this.closest('custom-auth-modal').switchTab('forgot')"
class="text-sm text-primary hover:text-secondary">
Forgot password?
</button>
</div>
<button type="submit"
class="w-full bg-primary hover:bg-secondary text-white py-2 px-4 rounded-lg font-medium transition-all">
Sign In
</button>
</form>
<!-- Forgot Password Form -->
<form id="forgotForm" class="p-6 hidden">
<div class="mb-6">
<p class="text-gray-600 mb-4">Enter your email address and we'll send you a link to reset your password.</p>
<label for="resetEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="resetEmail" name="email" required
class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none">
</div>
<button type="submit"
class="w-full bg-primary hover:bg-secondary text-white py-2 px-4 rounded-lg font-medium transition-all">
Send Reset Link
</button>
<div class="mt-4 text-center">
<button type="button" onclick="this.closest('custom-auth-modal').switchTab('login')"
class="text-sm text-primary hover:text-secondary">
Back to login
</button>
</div>
</form>
</div>
</div>
</div>
`;
}
connectedCallback() {
this.modal = this.shadowRoot.getElementById('modal');
this.loginTab = this.shadowRoot.getElementById('loginTab');
this.forgotTab = this.shadowRoot.getElementById('forgotTab');
this.loginForm = this.shadowRoot.getElementById('loginForm');
this.forgotForm = this.shadowRoot.getElementById('forgotForm');
this.closeButton = this.shadowRoot.getElementById('closeModal');
// Tab switching
this.loginTab.addEventListener('click', () => this.switchTab('login'));
this.forgotTab.addEventListener('click', () => this.switchTab('forgot'));
this.closeButton.addEventListener('click', () => this.hideModal());
// Close modal when clicking outside
this.shadowRoot.querySelector('.modal-overlay').addEventListener('click', (e) => {
if (e.target === e.currentTarget) {
this.hideModal();
}
});
}
showModal(tab = 'login') {
this.modal.classList.remove('hidden');
setTimeout(() => {
this.shadowRoot.querySelector('.modal-content').classList.add('modal-active');
}, 10);
this.switchTab(tab);
feather.replace();
}
hideModal() {
this.shadowRoot.querySelector('.modal-content').classList.remove('modal-active');
setTimeout(() => {
this.modal.classList.add('hidden');
}, 300);
}
switchTab(tab) {
if (tab === 'login') {
this.loginTab.classList.add('active');
this.forgotTab.classList.remove('active');
this.loginForm.classList.remove('hidden');
this.forgotForm.classList.add('hidden');
} else {
this.loginTab.classList.remove('active');
this.forgotTab.classList.add('active');
this.loginForm.classList.add('hidden');
this |