wartana/btlabel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: encapsulate login initialization into initLogin function and add robust element existence checks.

Browse Source
This commit is contained in:
Wartana
2026-03-10 15:55:40 +08:00
parent 5714ef4877
commit 14eaf89960
1 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
login.js
View File

@@ -1,6 +1,7 @@
// Login and Captcha Logic for btlabel // Login and Captcha Logic for btlabel
document.addEventListener('DOMContentLoaded', () => { const initLogin = () => {
console.log("Login module initializing...");
const loginForm = document.getElementById('loginForm'); const loginForm = document.getElementById('loginForm');
const loginOverlay = document.getElementById('loginOverlay'); const loginOverlay = document.getElementById('loginOverlay');
const appContainer = document.getElementById('appContainer'); const appContainer = document.getElementById('appContainer');
@@ -11,11 +12,16 @@ document.addEventListener('DOMContentLoaded', () => {
const usernameInput = document.getElementById('username'); const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password'); const passwordInput = document.getElementById('password');
if (!captchaCanvas) {
console.error("Captcha canvas not found!");
return;
}
let currentCaptcha = ''; let currentCaptcha = '';
// Generate random captcha string // Generate random captcha string
const generateCaptcha = () => { const generateCaptcha = () => {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // Exclude similar looking chars like 0, O, I, 1 const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
let result = ''; let result = '';
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length)); result += chars.charAt(Math.floor(Math.random() * chars.length));
@@ -26,9 +32,11 @@ document.addEventListener('DOMContentLoaded', () => {
// Draw captcha on canvas // Draw captcha on canvas
const drawCaptcha = (text) => { const drawCaptcha = (text) => {
const ctx = captchaCanvas.getContext('2d'); const ctx = captchaCanvas.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height); ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
// Background noise - lines // Background noise
for (let i = 0; i < 5; i++) { for (let i = 0; i < 5; i++) {
ctx.strokeStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`; ctx.strokeStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`;
ctx.beginPath(); ctx.beginPath();
@@ -37,7 +45,6 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.stroke(); ctx.stroke();
} }
// Background noise - dots
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`; ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.3)`;
ctx.beginPath(); ctx.beginPath();
@@ -46,7 +53,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
// Draw text // Draw text
ctx.font = 'bold 30px Arial'; ctx.font = 'bold 28px Arial';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
const spacing = captchaCanvas.width / (text.length + 1); const spacing = captchaCanvas.width / (text.length + 1);
@@ -59,54 +66,62 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.save(); ctx.save();
ctx.translate(x, y); ctx.translate(x, y);
ctx.rotate(angle); ctx.rotate(angle);
ctx.fillText(text[i], -10, 10); ctx.fillText(text[i], -12, 12);
ctx.restore(); ctx.restore();
} }
console.log("Captcha drawn:", text);
}; };
const refreshCaptcha = () => { const refreshCaptcha = () => {
currentCaptcha = generateCaptcha(); currentCaptcha = generateCaptcha();
drawCaptcha(currentCaptcha); drawCaptcha(currentCaptcha);
captchaInput.value = ''; if (captchaInput) captchaInput.value = '';
}; };
// Initial captcha // Initial captcha
refreshCaptcha(); refreshCaptcha();
refreshCaptchaBtn.addEventListener('click', refreshCaptcha); if (refreshCaptchaBtn) {
refreshCaptchaBtn.addEventListener('click', refreshCaptcha);
}
loginForm.addEventListener('submit', (e) => { if (loginForm) {
e.preventDefault(); loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const username = usernameInput.value; const username = usernameInput.value;
const password = passwordInput.value; const password = passwordInput.value;
const captcha = captchaInput.value.toUpperCase(); const captcha = captchaInput.value.toUpperCase();
loginError.style.display = 'none'; loginError.style.display = 'none';
if (captcha !== currentCaptcha) { if (captcha !== currentCaptcha) {
loginError.textContent = 'Invalid security code. Please try again.'; loginError.textContent = 'Invalid security code. Please try again.';
loginError.style.display = 'block'; loginError.style.display = 'block';
refreshCaptcha(); refreshCaptcha();
return; return;
} }
// Placeholder credentials if (username === 'admin' && password === 'admin') {
if (username === 'admin' && password === 'admin') { loginOverlay.style.opacity = '0';
// Success setTimeout(() => {
loginOverlay.style.opacity = '0'; loginOverlay.style.display = 'none';
setTimeout(() => { appContainer.style.display = 'block';
loginOverlay.style.display = 'none'; if (typeof updatePreview === 'function') {
appContainer.style.display = 'block'; updatePreview();
// Trigger any initializations needed for the app }
if (typeof updatePreview === 'function') { }, 500);
updatePreview(); } else {
} loginError.textContent = 'Invalid username or password.';
}, 500); loginError.style.display = 'block';
} else { refreshCaptcha();
loginError.textContent = 'Invalid username or password.'; }
loginError.style.display = 'block'; });
refreshCaptcha(); }
} };
});
}); if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initLogin);
} else {
initLogin();
}