bugs

public/index.html

@@ -10,7 +10,7 @@
 <body>
 
   <h1>Spelling Practice</h1>
-
+  <div id="roleBanner" class="banner hidden"></div>
   <!-- 👤 Login Panel -->
   <div id="loginPanel">
     <h2>User Login</h2>
@@ -26,7 +26,7 @@
   <div id="nav" class="hidden">
     <p><strong id="userInfo"></strong></p>
     <button onclick="showAdmin()" id="adminBtn" class="hidden">Admin Panel</button>
-    <button onclick="showStudent()">Student Panel</button>
+    <button onclick="showStudent()" id="studentBtn">Student Panel</button>
     <button onclick="logoutUser()">Log Out</button>
   </div>
 
@@ -93,5 +93,6 @@
 
     <div id="summary" class="hidden"></div>
   </div>
+  <div id="toast" class="toast"></div>
   </body>
 </html>

public/script.js

@@ -53,38 +53,84 @@ window.addEventListener('DOMContentLoaded', async () => {
 
 // 🧑‍🏫 Admin setup
 async function setupSession(user) {
+  // 🔒 Hide everything first for clean slate
   document.getElementById('loginPanel').classList.add('hidden')
+  document.getElementById('adminPanel').classList.add('hidden')
+  document.getElementById('studentPanel').classList.add('hidden')
+
+  // 🔓 Show navigation and user info
   document.getElementById('nav').classList.remove('hidden')
   document.getElementById('userInfo').textContent = `${user.username} (${user.role})`
 
+  // 🎨 Role-colored banner setup
+  const roleBanner = document.getElementById('roleBanner')
+  roleBanner.classList.remove('hidden', 'admin', 'student')
+  roleBanner.classList.add(user.role)
+  roleBanner.textContent = user.role === "admin"
+    ? "👨‍🏫 Admin Access Enabled"
+    : "🎓 Student Mode Active"
+
+  // 🙈 Hide/show Student Panel button appropriately
+  const studentBtn = document.getElementById('studentBtn')
   if (user.role === "admin") {
+    studentBtn.classList.remove('hidden')
     document.getElementById('adminBtn').classList.remove('hidden')
+    console.log("🛠 Logged in as Admin")
     await showAdmin()
-    await loadUsers()
-    displayUserDropdown()
-    populateWordUserDropdown()
-  } else {
+  } else if (user.role === "student") {
+    studentBtn.classList.add('hidden')
     document.getElementById('adminBtn').classList.add('hidden')
+    console.log("🎓 Logged in as Student")
     showStudent()
+  } else {
+    console.warn("❓ Unknown role:", user.role)
+    logoutUser()
+    alert("Unknown role detected. Logging out for security.")
+    return
   }
+
+  // 📣 Toast message
+  showToast(`Welcome, ${user.role}!`)
 }
 
-
 function logoutUser() {
+  // Clear stored user session
   localStorage.removeItem('loggedInUser')
-  document.getElementById('loginPanel').classList.remove('hidden')
-  document.getElementById('nav').classList.add('hidden')
+
+  // 🔄 Reset all visible panels
   document.getElementById('adminPanel').classList.add('hidden')
   document.getElementById('studentPanel').classList.add('hidden')
+  document.getElementById('nav').classList.add('hidden')
+  document.getElementById('loginPanel').classList.remove('hidden')
+  document.getElementById('username').value = ''
+  document.getElementById('password').value = ''
+
+  // 🧼 Reset role banner styling and content
+  const roleBanner = document.getElementById('roleBanner')
+  roleBanner.classList.add('hidden')
+  roleBanner.classList.remove('admin', 'student')
+  roleBanner.textContent = ''
+
+  // Optional: reset login message (if present)
+  const loginMessage = document.getElementById('loginMessage')
+  if (loginMessage) loginMessage.textContent = ''
 }
 
 async function showAdmin() {
+  const user = JSON.parse(localStorage.getItem('loggedInUser'))
+  if (!user || user.role !== "admin") {
+    console.warn("⛔ Access denied: not an admin")
+    return
+  }
+
   document.getElementById('adminPanel').classList.remove('hidden')
   document.getElementById('studentPanel').classList.add('hidden')
-  loadWords()
+
+  await loadWords()
   displayWordList()
   await loadUsers()
   displayUserDropdown()
+  populateWordUserDropdown()
 }
 
 // ➕ Add User
@@ -341,3 +387,12 @@ async function loadWordsForSelectedUser() {
   allWords = await res.json()
   displayWordList()
 }
+function showToast(message, duration = 3000) {
+  const toast = document.getElementById("toast")
+  toast.textContent = message
+  toast.classList.add("show")
+
+  setTimeout(() => {
+    toast.classList.remove("show")
+  }, duration)
+}

public/styles.css

@@ -87,3 +87,39 @@ body.galaxy button {
 body.nature button {
   background-color: #81c784;
 }
+.banner {
+  padding: 0.5em;
+  text-align: center;
+  font-weight: bold;
+  color: white;
+}
+
+.banner.admin {
+  background-color: #b22222; /* Firebrick red */
+}
+
+.banner.student {
+  background-color: #1e90ff; /* Dodger blue */
+}
+
+.hidden {
+  display: none;
+}
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: #333;
+  color: #fff;
+  padding: 0.75em 1.25em;
+  border-radius: 5px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s ease;
+  z-index: 999;
+}
+
+.toast.show {
+  opacity: 1;
+  pointer-events: auto;
+}

public/users.json

@@ -8,5 +8,10 @@
     "username": "student1",
     "hash": "8d969eef6ecad3c29a3a629280e686cf",
     "role": "student"
+  },
+  {
+    "username": "nate",
+    "hash": "5a2a558c78d3717db731600c4f354fa1d9c84b556f108091a891f444f1bdec40",
+    "role": "student"
   }
-]
+]