Skip to content

feat: Add waiting room DO and courses flows across learner and host journeys #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lakshya-2440 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Add waiting room DO and courses flows across learner and host journeys #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
284 changes: 284 additions & 0 deletions public/course.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Activity - Alpha One Labs</title>
<link rel="icon" type="image/png" href="/images/logo.png" />
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { theme: { extend: { colors: { brand:{ DEFAULT:'#4F46E5', dark:'#3730A3' } } } } };</script>
<style>
.hidden { display: none !important; }
.gradient-hero { background: linear-gradient(135deg,#4F46E5 0%,#7C3AED 50%,#2563EB 100%); }
.badge { display:inline-block; padding:2px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; }
.danger-btn { border:1px solid #fca5a5; color:#b91c1c; background:#fff; }
.danger-btn:hover { background:#fef2f2; }
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans">

<nav class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
<a href="/" class="flex items-center gap-2">
<img src="/images/logo.png" alt="Alpha One Labs" class="h-8 w-auto" />
<span class="font-bold text-xl text-slate-800">Alpha One Labs</span>
</a>
<div id="nav-auth" class="flex items-center gap-3"></div>
</div>
</nav>

<div class="gradient-hero text-white py-12 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-indigo-200 text-sm mb-3">
<a href="/" class="hover:text-white">Activities</a> &rsaquo; <span id="crumb-title">Loading...</span>
</div>
<h1 id="act-title" class="text-3xl font-extrabold mb-2">Loading...</h1>
<p class="text-indigo-200 text-sm mb-4" id="act-meta"></p>
<div id="act-badges" class="flex flex-wrap gap-2 mb-5"></div>
<div id="act-action"></div>
</div>
</div>

<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col lg:flex-row gap-8">

<!-- Sidebar: details + sessions -->
<aside class="lg:w-80 shrink-0 space-y-4">
<!-- About card -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h2 class="font-bold text-slate-800 text-sm mb-4">About this Activity</h2>
<p id="act-description" class="text-slate-500 text-sm leading-relaxed">Loading...</p>
<div class="mt-4 space-y-2 text-sm" id="act-details"></div>
<div id="act-tags" class="flex flex-wrap gap-1.5 mt-4"></div>
</div>

<!-- Sessions list -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden" id="sessions-card">
<div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
<h2 class="font-bold text-slate-800 text-sm">Sessions</h2>
<span id="sessions-count" class="text-xs text-slate-400"></span>
</div>
<ul id="sessions-list" class="divide-y divide-slate-50 max-h-[50vh] overflow-y-auto">
<li class="px-5 py-4 text-sm text-slate-400">Loading...</li>
</ul>
</div>
</aside>

<!-- Main content -->
<div class="flex-1 min-w-0">

<!-- Not joined CTA -->
<div id="join-cta" class="hidden bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-100 rounded-2xl p-8 text-center mb-6">
<p class="text-4xl mb-3">&#128274;</p>
<h3 class="font-bold text-slate-800 text-lg mb-2">Join to access session details</h3>
<p class="text-slate-500 text-sm mb-4">Session locations and descriptions are encrypted and only revealed to participants.</p>
<button id="btn-join" onclick="joinActivity()"
class="bg-brand text-white font-bold px-8 py-2.5 rounded-xl hover:bg-brand-dark transition text-sm">Join Activity - Free</button>
</div>

<!-- Participation card (shown when enrolled) -->
<div id="member-card" class="hidden bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-6">
<h2 class="font-bold text-slate-800 text-base mb-3">Your Participation</h2>
<div class="flex flex-wrap gap-3 text-sm" id="enr-details"></div>
</div>

<!-- Welcome card -->
<div id="welcome-card" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-8">
<h2 class="font-bold text-slate-800 text-lg mb-3">Welcome!</h2>
<p class="text-slate-500 text-sm leading-relaxed" id="welcome-text">Select an activity and join to see full details including session locations and descriptions.</p>
</div>
</div>

</div>
</main>

<footer class="bg-slate-800 text-slate-400 py-6 text-center text-sm mt-8">
<p>&copy; 2024&ndash;2026 Alpha One Labs &middot; Session details encrypted at rest &middot; <a href="/" class="hover:text-white">Home</a></p>
</footer>

<script>
const API = '';
function readAuthValue(key) {
const fromSession = sessionStorage.getItem(key);
if (fromSession) return fromSession;
const fromLocal = localStorage.getItem(key);
if (fromLocal) {
sessionStorage.setItem(key, fromLocal);
localStorage.removeItem(key);
}
return fromLocal;
}
function clearAuth() {
sessionStorage.removeItem('edu_token');
sessionStorage.removeItem('edu_user');
localStorage.removeItem('edu_token');
localStorage.removeItem('edu_user');
}
const token = readAuthValue('edu_token');
const user = JSON.parse(readAuthValue('edu_user') || 'null');
function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

esc() does not escape quotes — fine today, but it’s riding on UUID-only inputs.

esc only replaces & < >, yet at line 214 you inject session ids into a single-quoted HTML attribute:

'<button ... onclick="deleteSession(\'' + esc(s.id) + '\')">Delete Session</button>'

Today s.id is a server-generated UUID so there’s no exploit, but any future change that lets user-controlled text flow through esc() into an attribute context becomes a stored-XSS foothold. Recommend hardening esc once (defense in depth) rather than relying on upstream invariants:

-  function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function esc(s) {
+    return String(s)
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+      .replace(/"/g,'&quot;').replace(/'/g,'&#39;');
+  }

Bonus win: it then matches the escapeHtml used in courses.js / waitingroom.js so a future shared auth/escape module is a copy-paste.

As per coding guidelines: "Review HTML templates for ... XSS risks from unescaped user content."

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@public/course.html` at line 119, The esc function only escapes &, <, > which
is unsafe for values interpolated into quoted HTML attributes (see its use in
building the delete button onclick with deleteSession('\'+ esc(s.id) +\'')).
Update esc to also escape both single-quote (') and double-quote (") characters
(e.g., to &#39; and &quot;) so attribute contexts are safe, and align its
behavior with the existing escapeHtml used in courses.js / waitingroom.js so a
future shared escape helper can be introduced; change the esc implementation and
verify uses like deleteSession( ... esc(s.id) ...) and any other attribute or
JS-embedded interpolations still work with the hardened escaping.

function logout() { clearAuth(); window.location.href = '/login.html'; }

// Nav
const nav = document.getElementById('nav-auth');
if (token && user) {
nav.innerHTML =
'<span class="text-slate-600 text-sm hidden sm:block">Hi, ' + esc(user.username) + '</span>' +
'<a href="/dashboard.html" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Dashboard</a>' +
'<button onclick="logout()" class="text-slate-400 text-sm hover:text-red-500">Logout</button>';
} else {
nav.innerHTML =
'<a href="/login.html" class="text-slate-600 text-sm font-medium hover:text-brand">Login</a>' +
'<a href="/login.html?tab=register" class="bg-brand text-white text-sm font-semibold px-4 py-1.5 rounded-lg hover:bg-brand-dark transition">Register</a>';
}

const typeIcon = { course:'📚', meetup:'🤝', workshop:'🔧', seminar:'🎤', other:'✨' };
const typeColor = { course:'bg-indigo-100 text-indigo-700', meetup:'bg-pink-100 text-pink-700', workshop:'bg-orange-100 text-orange-700', seminar:'bg-teal-100 text-teal-700', other:'bg-slate-100 text-slate-600' };
const fmtLabel = { live:'Live', self_paced:'Self-paced', hybrid:'Hybrid' };
const fmtColor = { live:'bg-red-100 text-red-700', self_paced:'bg-emerald-100 text-emerald-700', hybrid:'bg-purple-100 text-purple-700' };
const schedLabel = { one_time:'One-time', multi_session:'Multi-session', recurring:'Recurring', ongoing:'Ongoing' };

const params = new URLSearchParams(location.search);
const actId = params.get('id');

async function deleteCourse() {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this course and all its sessions? This cannot be undone.')) return;
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
Comment on lines +147 to +154
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleteCourse() throws on failure but is invoked via an inline onclick without any try/catch, so errors will surface only as unhandled promise rejections (no user feedback). Catch errors inside deleteCourse and show an alert/toast (and re-enable UI if needed).

Suggested change
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
try {
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
} catch (err) {
alert(err && err.message ? err.message : 'Failed to delete course');
}

Copilot uses AI. Check for mistakes.
}

async function deleteSession(sessionId) {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this session?')) return;
const res = await fetch('/api/sessions/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ session_id: sessionId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete session');
await loadActivity();
Comment on lines +147 to +167
Copy link

Copilot AI Apr 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleteSession() has the same unhandled-error problem as deleteCourse(): it throws on failure but is called from an inline onclick, so the user gets no feedback if the API call fails. Wrap the body in try/catch and surface the error (alert/toast) rather than throwing.

Suggested change
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
}
async function deleteSession(sessionId) {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this session?')) return;
const res = await fetch('/api/sessions/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ session_id: sessionId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete session');
await loadActivity();
try {
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
} catch (e) {
alert(e.message || 'Failed to delete course');
}
}
async function deleteSession(sessionId) {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this session?')) return;
try {
const res = await fetch('/api/sessions/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ session_id: sessionId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete session');
await loadActivity();
} catch (e) {
alert(e.message || 'Failed to delete session');
}

Copilot uses AI. Check for mistakes.
}
Comment on lines +144 to +168
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Async onclick handlers swallow errors silently.

deleteCourse() and deleteSession() are async and throw new Error(...) on non-OK responses, but they’re invoked via onclick="deleteCourse()" so the returned promise rejection becomes an unhandled-rejection warning with no user feedback — the user just sees "nothing happened". Wrap the fetch in try/catch and surface the message (matching the pattern already used in joinActivity at lines 271-274):

 async function deleteCourse() {
   if (!token) { window.location.href = '/login.html'; return; }
   if (!confirm('Delete this course and all its sessions? This cannot be undone.')) return;
-  const res = await fetch('/api/activities/delete', { ... });
-  const body = await res.json().catch(() => ({}));
-  if (!res.ok) throw new Error(body.error || 'Failed to delete course');
-  window.location.href = '/courses.html';
+  try {
+    const res = await fetch('/api/activities/delete', { ... });
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(body.error || 'Failed to delete course');
+    window.location.href = '/courses.html';
+  } catch (e) {
+    alert(e.message || 'Failed to delete course');
+  }
 }

Same for deleteSession.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
async function deleteCourse() {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this course and all its sessions? This cannot be undone.')) return;
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
}
async function deleteSession(sessionId) {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this session?')) return;
const res = await fetch('/api/sessions/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ session_id: sessionId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete session');
await loadActivity();
}
async function deleteCourse() {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this course and all its sessions? This cannot be undone.')) return;
try {
const res = await fetch('/api/activities/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete course');
window.location.href = '/courses.html';
} catch (e) {
alert(e.message || 'Failed to delete course');
}
}
async function deleteSession(sessionId) {
if (!token) { window.location.href = '/login.html'; return; }
if (!confirm('Delete this session?')) return;
try {
const res = await fetch('/api/sessions/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
body: JSON.stringify({ session_id: sessionId })
});
const body = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(body.error || 'Failed to delete session');
await loadActivity();
} catch (e) {
alert(e.message || 'Failed to delete session');
}
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@public/course.html` around lines 144 - 168, deleteCourse and deleteSession
are async functions invoked from inline onclick handlers, so thrown errors
become unhandled promise rejections and give no user feedback; wrap the
fetch/response logic in each function in a try/catch (same pattern used in
joinActivity) and on error surface the message to the user (e.g.,
alert(err.message || 'Failed to delete course/session')) instead of throwing,
while preserving the existing redirects and successful-path behavior; update
both deleteCourse() and deleteSession(sessionId) accordingly.


async function loadActivity() {
const headers = token ? { Authorization: 'Bearer ' + token } : {};
const res = await fetch('/api/activities/' + actId, { headers });
const data = await res.json();
if (!res.ok) { document.getElementById('act-title').textContent = 'Activity not found'; return; }

const a = data.activity;
document.title = a.title + ' - Alpha One Labs';
document.getElementById('crumb-title').textContent = a.title;
document.getElementById('act-title').textContent = a.title;
document.getElementById('act-description').textContent = a.description;
document.getElementById('act-meta').textContent =
'by ' + a.host_name + ' · ' + a.participant_count + ' participants · ' +
(data.sessions.length) + ' sessions';

const tc = typeColor[a.type] || 'bg-slate-100 text-slate-600';
const fc = fmtColor[a.format] || 'bg-slate-100 text-slate-600';
const ic = typeIcon[a.type] || '✨';
document.getElementById('act-badges').innerHTML =
'<span class="badge ' + tc + '">' + ic + ' ' + esc(a.type) + '</span>' +
'<span class="badge ' + fc + '">' + fmtLabel[a.format] + '</span>' +
'<span class="badge bg-white/20 text-white">' + schedLabel[a.schedule_type] + '</span>';

document.getElementById('act-details').innerHTML =
'<div class="flex items-center gap-2 text-slate-600"><span>📋</span><span><strong>Type:</strong> ' + esc(a.type) + '</span></div>' +
'<div class="flex items-center gap-2 text-slate-600"><span>📡</span><span><strong>Format:</strong> ' + fmtLabel[a.format] + '</span></div>' +
'<div class="flex items-center gap-2 text-slate-600"><span>🗓</span><span><strong>Schedule:</strong> ' + schedLabel[a.schedule_type] + '</span></div>' +
'<div class="flex items-center gap-2 text-slate-600"><span>👥</span><span><strong>Participants:</strong> ' + a.participant_count + '</span></div>';

if (a.tags && a.tags.length) {
document.getElementById('act-tags').innerHTML =
a.tags.map(t => '<span class="badge bg-slate-100 text-slate-600">' + esc(t) + '</span>').join('');
}

// Sessions
const sessCard = document.getElementById('sessions-card');
document.getElementById('sessions-count').textContent = data.sessions.length + ' sessions';
const ul = document.getElementById('sessions-list');
if (!data.sessions.length) {
sessCard.classList.add('hidden');
} else {
ul.innerHTML = data.sessions.map(s => {
const locked = !data.is_enrolled && !data.is_host;
const hostDelete = data.is_host
? '<button class="mt-2 text-xs px-2 py-1 rounded danger-btn" onclick="deleteSession(\'' + esc(s.id) + '\')">Delete Session</button>'
: '';
return '<li class="px-5 py-3">' +
'<p class="font-semibold text-slate-800 text-sm">' + esc(s.title || 'Session') + '</p>' +
(s.start_time ? '<p class="text-xs text-slate-500 mt-0.5">&#128197; ' + esc(s.start_time) + (s.end_time ? ' – ' + esc(s.end_time) : '') + '</p>' : '') +
(locked ? '<p class="text-xs text-slate-400 mt-0.5">&#128274; Join to see location and details</p>' :
(s.location ? '<p class="text-xs text-emerald-600 mt-0.5">&#128205; ' + esc(s.location) + '</p>' : '') +
(s.description ? '<p class="text-xs text-slate-500 mt-0.5">' + esc(s.description) + '</p>' : '')) +
hostDelete +
'</li>';
}).join('');
}

// Actions + member card
if (data.is_host) {
document.getElementById('act-action').innerHTML =
'<div class="flex flex-wrap gap-2">' +
'<a href="/teach.html?activity_id=' + esc(a.id) + '" class="bg-white text-brand font-bold px-6 py-2.5 rounded-xl shadow hover:bg-indigo-50 transition text-sm">Manage Activity</a>' +
'<button onclick="deleteCourse()" class="bg-white text-red-700 border border-red-200 font-bold px-6 py-2.5 rounded-xl shadow hover:bg-red-50 transition text-sm">Delete Course</button>' +
'</div>';
document.getElementById('welcome-card').querySelector('#welcome-text').textContent =
'You are the host of this activity. Use the Manage button to add sessions and update details.';
} else if (data.is_enrolled) {
document.getElementById('join-cta').classList.add('hidden');
document.getElementById('member-card').classList.remove('hidden');
const enr = data.enrollment;
const rc = { participant:'bg-slate-100 text-slate-600', instructor:'bg-purple-100 text-purple-700', organizer:'bg-amber-100 text-amber-700' };
const sc = { active:'bg-emerald-100 text-emerald-700', cancelled:'bg-red-100 text-red-700', completed:'bg-blue-100 text-blue-700' };
document.getElementById('enr-details').innerHTML =
'<span class="badge ' + (rc[enr.role]||'bg-slate-100 text-slate-600') + '">' + esc(enr.role) + '</span>' +
'<span class="badge ' + (sc[enr.status]||'bg-slate-100 text-slate-600') + '">' + esc(enr.status) + '</span>' +
'<span class="text-slate-500">You have full access to session details.</span>';
document.getElementById('act-action').innerHTML = '<span class="text-indigo-200 text-sm">✅ Joined</span>';
document.getElementById('welcome-card').querySelector('#welcome-text').textContent =
'You are participating in this activity. Session locations and details are visible above.';
} else {
if (token) {
document.getElementById('join-cta').classList.remove('hidden');
} else {
document.getElementById('act-action').innerHTML =
'<a href="/login.html" class="bg-white text-brand font-bold px-6 py-2.5 rounded-xl shadow hover:bg-indigo-50 transition text-sm">Login to Join</a>';
}
}
}

async function joinActivity() {
if (!token) { window.location.href = '/login.html'; return; }
const btn = document.getElementById('btn-join');
btn.textContent = 'Joining...'; btn.disabled = true;
try {
const res = await fetch('/api/join', {
method:'POST', headers:{ 'Content-Type':'application/json', Authorization:'Bearer ' + token },
body: JSON.stringify({ activity_id: actId })
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed');
window.location.reload();
} catch (e) {
alert(e.message);
btn.textContent = 'Join Activity - Free'; btn.disabled = false;
}
}

if (!actId) {
document.getElementById('act-title').textContent = 'No activity selected';
} else {
loadActivity().catch(e => { document.getElementById('act-title').textContent = 'Error: ' + e.message; });
}
</script>
</body>
</html>
87 changes: 87 additions & 0 deletions public/courses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Courses — Alpha One Labs</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="/waitingroom.css"/>
<style>
.page-inner{max-width:1100px;}
.page-header h1{font-size:24px;}
.courses-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.course-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px 16px 14px;box-shadow:0 2px 10px rgba(0,0,0,.04);}
.course-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.course-title{font-size:16px;font-weight:700;color:#111827;margin:0;}
.course-meta{margin-top:6px;color:#6b7280;font-size:13px;display:flex;gap:10px;flex-wrap:wrap;}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #e5e7eb;border-radius:999px;padding:2px 10px;font-size:12px;color:#374151;background:#f9fafb;}
.course-actions{display:flex;gap:8px;align-items:center;margin-top:12px;}
.btn-small{border:1px solid #0d9488;background:transparent;color:#0d9488;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;}
.btn-small:hover{background:#0d9488;color:#fff;}
.btn-ghost{border:1px solid #e5e7eb;color:#374151;background:#fff;}
.btn-ghost:hover{background:#f9fafb;color:#111827;border-color:#d1d5db;}
details{margin-top:12px;border-top:1px solid #eef2f7;padding-top:10px;}
summary{cursor:pointer;color:#111827;font-weight:700;font-size:13px;list-style:none;}
summary::-webkit-details-marker{display:none;}
.sessions{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.session{border:1px solid #e5e7eb;border-radius:8px;padding:10px 10px;background:#fff;}
.session-title{font-weight:700;font-size:13px;color:#111827;margin:0 0 4px;}
.session-sub{color:#6b7280;font-size:12px;}
.highlight{outline:3px solid rgba(99,102,241,.35);border-color:rgba(99,102,241,.5);}
.empty{color:#6b7280;font-size:14px;padding:18px;background:#fff;border:1px dashed #e5e7eb;border-radius:10px;}
@media(max-width:900px){.courses-grid{grid-template-columns:1fr;}}
</style>
</head>
<body>

<!-- NAV (same family as waitingroom.html) -->
<nav>
<a href="#" class="nav-logo">
<img class="nav-logo-box" alt="Alpha One Labs logo" src="/images/logo.png"/>
Alpha One Labs
</a>
<div class="nav-links">
<a href="#">LEARN ▾</a>
<a href="/courses.html">COURSES</a>
<a href="#">COMMUNITY ▾</a>
<a href="#">RESOURCES ▾</a>
<a href="#">ABOUT ▾</a>
</div>
<div class="nav-search">
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" placeholder="What do you want to learn?"/>
</div>
Comment on lines +50 to +53
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Nit: search <input> is missing an associated label.

HTMLHint flags this one. A placeholder alone isn’t accessible — screen readers need a programmatic label. Either wrap in a <label> or add aria-label:

-    <input type="text" placeholder="What do you want to learn?"/>
+    <input type="text" aria-label="Search courses" placeholder="What do you want to learn?"/>

As per coding guidelines: "Review HTML templates for accessibility (ARIA attributes, semantic elements)..."

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="nav-search">
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" placeholder="What do you want to learn?"/>
</div>
<div class="nav-search">
<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<input type="text" aria-label="Search courses" placeholder="What do you want to learn?"/>
</div>
🧰 Tools
🪛 HTMLHint (1.9.2)

[warning] 52-52: No matching [ label ] tag found.

(input-requires-label)

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@public/courses.html` around lines 50 - 53, The search input inside the
.nav-search div lacks an accessible label; update the <input> with a
programmatic label by either wrapping it in a <label> element or adding an
appropriate aria-label (e.g., aria-label="Search courses" or aria-label
describing purpose) so screen readers can identify it — target the input element
within the .nav-search container to apply this change.

<div class="nav-icons">
<button class="icon-btn" type="button">💬</button>
<button class="icon-btn" type="button" style="position:relative">🛒<span class="cart-badge">1</span></button>
<button class="icon-btn" type="button">🔔</button>
<button class="icon-btn" type="button">🌐</button>
<button class="icon-btn" type="button">🌙</button>
</div>
<div class="nav-user" id="nav-user-menu" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false">
<div class="avatar-nav" id="nav-avatar">L</div>
<span id="nav-uname">...</span> ▾
<div class="nav-user-dropdown" id="nav-user-dropdown">
<button type="button" id="logout-btn">Logout</button>
</div>
</div>
</nav>

<div class="page">
<div class="page-inner">
<div class="page-header">
<h1>Courses</h1>
<a class="btn-create" href="/teach.html">Create New Course</a>
</div>
<div class="explainer">
<h2>Browse created courses</h2>
<p>All published courses appear here. Expand a course to see its sessions.</p>
</div>
<div id="courses" class="courses-grid"></div>
<div id="empty" class="empty" style="display:none;">No courses yet. Create one from a waiting room or the Host flow.</div>
</div>
</div>

<script src="/courses.js"></script>
</body>
</html>
Loading