firebase #708
Description
Here are the identified issues and their fixes in your provided HTML code:
1. Incorrect Firebase storageBucket URL
Issue:
The Firebase config storageBucket has a typo in the URL:
storageBucket: "create-adf92.firebasestorage.app",
It should end with .appspot.com
Fix:
Change to:
storageBucket: "create-adf92.appspot.com",
2. CSS Custom Property Syntax Errors (var(--property))
Issue:
Throughout your CSS, the var() usages use the wrong dash character (en dash –, Unicode 8211) instead of hyphen-minus - (Unicode 45).
Example wrong usage:
background:var(–bg);
Correct syntax is:
background:var(--bg);
Fix:
Replace all occurrences of var(–property) with var(--property) in CSS.
(This happens many times, e.g., var(–primary), var(–text-light), var(–border), etc.)
3. Font-family quotes using wrong character
Issue:
Font family uses wrong quotes ‘ and ’ (curly quotes) instead of ' (straight single quotes), which causes the font families to not work.
Examples:
font-family:‘Noto Sans Khmer’,sans-serif;
font-family:‘Saira Condensed’,sans-serif;
Fix:
Replace all curly quotes ‘ and ’ with straight single quotes '.
Example:
font-family: 'Noto Sans Khmer', sans-serif;
font-family: 'Saira Condensed', sans-serif;
4. Attribute playsinline missing value
Issue:
In the video element, playsinline attribute is used without a value. This is valid in HTML5 but sometimes some browsers require it to be written as playsinline="true" or playsinline.
Best practice is to just keep it as is (HTML5 boolean attribute without value is allowed), so this is OK. No fix required.
5. onkeydown handlers use if(event.key==='Enter')doLogin() without {}.
Issue:
Not a big issue, but better practice to wrap actions inside {} always to avoid accidental logic errors.
Example:
onkeydown="if(event.key==='Enter')doLogin()"
Fix:
onkeydown="if(event.key==='Enter'){doLogin();}"
Similarly for doRegister.
6. Typo in localized Firebase auth error codes:
Issue:
You check for auth/invalid-credential but the correct Firebase error code for wrong email/password is auth/invalid-email.
Also, the actual code for invalid credentials may differ.
Fix:
Correct error code checks for login error messages accordingly.
Example corrected code snippet inside doLogin:
const msg = e.code === 'auth/invalid-email' ? 'Email មិនត្រឹមត្រូវ!' :
e.code === 'auth/user-not-found' ? 'គណនីនេះមិនមាន!' :
e.code === 'auth/wrong-password' ? 'Password មិនត្រឹមត្រូវ!' : e.message;
7. Missing initialization call to render initial page or components after Firebase load
Issue:
After first auth check, the page state and data may not render unless user logs in. This is not a bug but a suggestion: add initial showPage('dashboard') and/or rendering on load.
8. Accessibility: Missing label for attributes paired with inputs
Issue:
label elements don't have for attribute pointing to input IDs. This hurts accessibility and UX.
Fix:
Add for="input-id" attribute to all <label> matching the corresponding element's id.
Example:
<label class="fl" for="l-email">Email</label>
<input class="fc" id="l-email" type="email" placeholder="school@example.com">
9. Minor: The close confirm modal's button ID reference (c-ok) could be improved for clarity
No actual bug here; just OK as is.
10. Code Style: Using .map with side effects — Not really a bug but better to avoid
Example:
db.classes.forEach(c=>sel.innerHTML+=`<option value="${c.name}" ${c.name===cur?'selected':''}>${c.name}</option>`);
This is fine, but better to build string separately and assign once. But no changes strictly required.
Summary of Necessary Fixes:
- Fix storageBucket URL
- Fix CSS variable syntax (replace en dash with hyphen)
- Fix quotes in CSS font-family
- Fix Firebase auth error code string for invalid email
- Add missing
forattributes on labels - (Optional) Fix onkeydown handlers with
{}for clarity
Corrected Key Snippets for Fix #1, #2, #3, #6, and #8:
Fixed Firebase Config:
const firebaseConfig = {
apiKey: "AIzaSyDwYGbelzf1vVOaMmTPm63yDtsjTOGIxnU",
authDomain: "create-adf92.firebaseapp.com",
projectId: "create-adf92",
storageBucket: "create-adf92.appspot.com", // FIXED here
messagingSenderId: "529723873139",
appId: "1:529723873139:web:ee622f872ed9bb439a1706",
measurementId: "G-EZ4JMN78EZ"
};
Fixed CSS color variables (example part):
:root {
--primary: #1a56db;
--primary-dark: #1e3a8a;
--accent: #f59e0b;
--success: #10b981;
--danger: #ef4444;
--bg: #eef2ff;
--text: #1e293b;
--text-light: #64748b;
--border: #e2e8f0;
}
/* Example usage */
body {
font-family: 'Noto Sans Khmer', sans-serif;
font-size: 12px;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}
/* ... similarly replace all var(–property) occurrences with var(--property) */
Fixed CSS font-family quotes (example):
body {
font-family: 'Noto Sans Khmer', sans-serif;
/* ... */
}
#auth-title {
font-family: 'Saira Condensed', sans-serif;
font-size: 20px;
font-weight: 900;
color: var(--primary-dark);
text-align: center;
margin-bottom: 16px;
}
Fixed Firebase auth error codes in doLogin:
window.doLogin = async function() {
const email = document.getElementById('l-email').value.trim();
const pass = document.getElementById('l-pass').value;
const btn = document.getElementById('l-btn');
if (!email || !pass) { showToast('សូមបំពេញ Email និង Password!','error'); return; }
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> កំពុង...';
try {
await signInWithEmailAndPassword(auth, email, pass);
} catch(e) {
const msg = e.code === 'auth/invalid-email' ? 'Email មិនត្រឹមត្រូវ!' :
e.code === 'auth/user-not-found' ? 'គណនីនេះមិនមាន!' :
e.code === 'auth/wrong-password' ? 'Password មិនត្រឹមត្រូវ!' : e.message;
showToast(msg, 'error');
}
btn.disabled = false; btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> ចូល';
}
Added missing for attributes for labels in login form (example):
<div class="fg">
<label class="fl" for="l-email">Email</label>
<input class="fc" id="l-email" type="email" placeholder="school@example.com">
</div>
<div class="fg">
<label class="fl" for="l-pass">Password</label>
<input class="fc" id="l-pass" type="password" placeholder="••••••••" onkeydown="if(event.key==='Enter'){doLogin();}">
</div>
Similar updates needed for all forms inside modals and pages:
- All
<label>should haveforattribute matching input id.
Full CSS Fix Note:
Since the CSS is large and repeated for all properties, here is a script snippet to quickly fix all invalid CSS property references:
Replace all occurrences of var(– (with en dash) with var(-- (two hyphens) in CSS parts.
Corrected Full Code Snippet for Firebase Config and an Example for CSS and labels
Due to size, I provide here main corrected parts; you can replace and fix the full code accordingly.
<!-- ... inside <head> -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getAuth, signInWithEmailAndPassword, signOut, onAuthStateChanged, createUserWithEmailAndPassword }
from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
import { getFirestore, doc, setDoc, getDoc, onSnapshot, collection, query }
from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyDwYGbelzf1vVOaMmTPm63yDtsjTOGIxnU",
authDomain: "create-adf92.firebaseapp.com",
projectId: "create-adf92",
storageBucket: "create-adf92.appspot.com", <!-- Fixed -->
messagingSenderId: "529723873139",
appId: "1:529723873139:web:ee622f872ed9bb439a1706",
measurementId: "G-EZ4JMN78EZ"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db_fire = getFirestore(app);
// ... rest unchanged
window.doLogin = async function() {
const email = document.getElementById('l-email').value.trim();
const pass = document.getElementById('l-pass').value;
const btn = document.getElementById('l-btn');
if (!email || !pass) { showToast('សូមបំពេញ Email និង Password!','error'); return; }
btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> កំពុង...';
try {
await signInWithEmailAndPassword(auth, email, pass);
} catch(e) {
const msg = e.code === 'auth/invalid-email' ? 'Email មិនត្រឹមត្រូវ!' :
e.code === 'auth/user-not-found' ? 'គណនីនេះមិនមាន!' :
e.code === 'auth/wrong-password' ? 'Password មិនត្រឹមត្រូវ!' : e.message;
showToast(msg, 'error');
}
btn.disabled = false; btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> ចូល';
}
// ... rest unchanged
</script>
<style>
/* Fix variables */
:root {
--primary: #1a56db;
--primary-dark: #1e3a8a;
--accent: #f59e0b;
--success: #10b981;
--danger: #ef4444;
--bg: #eef2ff;
--text: #1e293b;
--text-light: #64748b;
--border: #e2e8f0;
}
/* Example corrected CSS using vars */
body {
font-family: 'Noto Sans Khmer', sans-serif;
font-size: 12px;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}
/* ... similarly fix all var(–property) to var(--property) */
/* Fix font-family quotes */
#auth-title {
font-family: 'Saira Condensed', sans-serif;
font-size: 20px;
font-weight: 900;
color: var(--primary-dark);
text-align: center;
margin-bottom: 16px;
}
/* Repeat for other CSS font-family declarations */
</style>
Example label fixes in login form:
<div id="login-form">
<div class="fg">
<label class="fl" for="l-email">Email</label>
<input class="fc" id="l-email" type="email" placeholder="school@example.com">
</div>
<div class="fg">
<label class="fl" for="l-pass">Password</label>
<input class="fc" id="l-pass" type="password" placeholder="••••••••" onkeydown="if(event.key==='Enter'){doLogin();}">
</div>
<button class="btn bp" id="l-btn" style="width:100%;justify-content:center;padding:9px" onclick="doLogin()"><i class="fas fa-sign-in-alt"></i> ចូល</button>
</div>
Repeat similar fixes for all <label> elements referring to ids in the inputs.
Summary
- Fix Firebase config storageBucket to
.appspot.com - Replace all CSS
var(–property)withvar(--property) - Replace curly quotes with straight quotes in CSS font-family
- Fix Firebase auth error code check from
auth/invalid-credentialtoauth/invalid-email - Add
forattributes to all<label>elements matching the corresponding input ID - Optional: wrap single JS statements on event handlers in braces for safety
If you want me to output the entire fixed code with all label tags fixed and every CSS var fixed, please specify. Given the length, it will be quite large, but I can prepare it upon request.