Upload 11 files

src/main.js

@@ -3,6 +3,8 @@ import { renderInstructorView, setupInstructorEvents } from './views/InstructorV
 import { renderStudentView, setupStudentEvents } from './views/StudentView.js';
 import { renderAdminView, setupAdminEvents } from './views/AdminView.js';
 
+import { renderInstructorAdminView, setupInstructorAdminEvents } from './views/InstructorAdminView.js';
+
 const app = document.querySelector('#app');
 
 function navigateTo(view) {
@@ -20,6 +22,10 @@ function navigateTo(view) {
                 setupInstructorEvents();
             });
             break;
+        case 'instructors': // Manage Instructors
+            app.innerHTML = renderInstructorAdminView();
+            setupInstructorAdminEvents();
+            break;
         case 'student':
             app.innerHTML = '載入中...';
             // Async render because Student view fetches challenges
@@ -56,6 +62,10 @@ function handleRoute() {
         navigateTo('instructor');
         return;
     }
+    if (hash === 'instructors') {
+        navigateTo('instructors');
+        return;
+    }
 
 
 

src/views/InstructorAdminView.js

@@ -0,0 +1,193 @@
+import { getInstructors, addInstructor, removeInstructor, checkInstructorPermission } from "../services/auth.js";
+import { auth } from "../services/firebase.js";
+
+export function renderInstructorAdminView() {
+    return `
+    <div class="min-h-screen p-6 pb-20">
+        <header class="flex justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm">
+            <div class="flex items-center space-x-4">
+                <button id="back-instructor-btn" class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-lg transition-all">
+                    ← 回講師端
+                </button>
+                <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-600">
+                    講師權限管理
+                </h1>
+            </div>
+            <button id="add-instructor-btn" class="bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg">
+                + 新增講師
+            </button>
+        </header>
+
+        <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden shadow-2xl">
+            <table class="w-full text-left border-collapse">
+                <thead>
+                    <tr class="bg-gray-900/50">
+                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400">Email (帳號)</th>
+                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400">姓名</th>
+                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400">權限</th>
+                        <th class="p-4 border-b border-gray-700 font-bold text-gray-400 text-right">操作</th>
+                    </tr>
+                </thead>
+                <tbody id="instructors-list">
+                    <tr><td colspan="4" class="p-8 text-center text-gray-500">載入中...</td></tr>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Add/Edit Modal -->
+        <div id="instructor-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
+            <div class="bg-gray-800 rounded-xl w-full max-w-lg border border-gray-700 shadow-2xl">
+                <div class="p-6 border-b border-gray-700">
+                    <h3 class="text-xl font-bold text-white">新增講師</h3>
+                </div>
+                <div class="p-6 space-y-4">
+                    <div>
+                        <label class="block text-gray-400 mb-1">Email (Google 帳號)</label>
+                        <input type="email" id="input-email" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" placeholder="example@gmail.com">
+                        <p class="text-xs text-yellow-500 mt-1">* 必須是有效的 Google 帳號 Email</p>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">顯示名稱</label>
+                        <input type="text" id="input-name" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" placeholder="王小明">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">權限設定</label>
+                        <div class="space-y-2">
+                            <label class="flex items-center space-x-2">
+                                <input type="checkbox" class="perm-check rounded bg-gray-700 border-gray-600 text-indigo-500" value="create_room" checked>
+                                <span class="text-gray-300">建立教室 (Create Room)</span>
+                            </label>
+                            <label class="flex items-center space-x-2">
+                                <input type="checkbox" class="perm-check rounded bg-gray-700 border-gray-600 text-indigo-500" value="manage_instructors">
+                                <span class="text-gray-300">管理講師 (Manage Instructors)</span>
+                            </label>
+                            <label class="flex items-center space-x-2">
+                                <input type="checkbox" class="perm-check rounded bg-gray-700 border-gray-600 text-indigo-500" value="add_question">
+                                <span class="text-gray-300">管理題目 (Manage Questions)</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-6 border-t border-gray-700 flex justify-end space-x-3">
+                    <button onclick="document.getElementById('instructor-modal').classList.add('hidden')" class="px-4 py-2 text-gray-400 hover:text-white">取消</button>
+                    <button id="save-instructor-btn" class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2 rounded font-bold">新增</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}
+
+export function setupInstructorAdminEvents() {
+    // Permission Check
+    const user = auth.currentUser;
+    if (!user) {
+        alert("請先登入");
+        window.location.hash = ''; // Back to Landing
+        return;
+    }
+
+    checkInstructorPermission(user).then(inst => {
+        if (!inst || !inst.permissions?.includes('manage_instructors')) {
+            alert("您沒有權限管理講師");
+            window.location.hash = 'instructor';
+            return;
+        }
+        loadInstructorList();
+    }).catch(e => {
+        console.error(e);
+        alert("權限驗證失敗");
+        window.location.hash = 'instructor';
+    });
+
+
+    // Navigation
+    document.getElementById('back-instructor-btn').addEventListener('click', () => {
+        window.location.hash = 'instructor';
+    });
+
+    // Modal Handling
+    document.getElementById('add-instructor-btn').addEventListener('click', () => {
+        document.getElementById('input-email').value = '';
+        document.getElementById('input-name').value = '';
+        document.querySelectorAll('.perm-check').forEach(c => c.checked = true);
+        document.getElementById('instructor-modal').classList.remove('hidden');
+    });
+
+    // Save Logic
+    document.getElementById('save-instructor-btn').addEventListener('click', async () => {
+        const email = document.getElementById('input-email').value.trim();
+        const name = document.getElementById('input-name').value.trim();
+        const permissions = Array.from(document.querySelectorAll('.perm-check:checked')).map(c => c.value);
+
+        if (!email || !name) {
+            alert("請填寫完整資訊");
+            return;
+        }
+
+        try {
+            await addInstructor(email, name, permissions);
+            alert("新增成功");
+            document.getElementById('instructor-modal').classList.add('hidden');
+            loadInstructorList();
+        } catch (e) {
+            console.error(e);
+            alert("新增失敗: " + e.message);
+        }
+    });
+
+    // Global Helpers
+    window.removeInstructorConfirm = async (email) => {
+        if (confirm(`確定要移除講師權限 (${email}) 嗎？`)) {
+            try {
+                await removeInstructor(email);
+                loadInstructorList();
+            } catch (e) {
+                console.error(e);
+                alert("移除失敗: " + e.message);
+            }
+        }
+    };
+}
+
+async function loadInstructorList() {
+    const list = document.getElementById('instructors-list');
+    list.innerHTML = '<tr><td colspan="4" class="p-8 text-center text-gray-500">載入中...</td></tr>';
+
+    try {
+        const instructors = await getInstructors();
+
+        if (instructors.length === 0) {
+            list.innerHTML = '<tr><td colspan="4" class="p-8 text-center text-gray-500">目前沒有其他講師</td></tr>';
+            return;
+        }
+
+        list.innerHTML = instructors.map(inst => `
+            <tr class="hover:bg-gray-700/50 transition-colors border-b border-gray-800">
+                <td class="p-4 font-mono text-gray-300">
+                    ${inst.email} 
+                    ${inst.role === 'admin' ? '<span class="ml-2 text-xs bg-red-900 text-red-300 px-2 py-0.5 rounded border border-red-700">Admin</span>' : ''}
+                </td>
+                <td class="p-4 font-bold text-white">${inst.name}</td>
+                <td class="p-4">
+                    <div class="flex flex-wrap gap-1">
+                        ${(inst.permissions || []).map(p => `
+                            <span class="text-xs bg-indigo-900/50 text-indigo-300 px-2 py-0.5 rounded border border-indigo-700">${p}</span>
+                        `).join('')}
+                    </div>
+                </td>
+                <td class="p-4 text-right">
+                    ${inst.role !== 'admin' ? `
+                    <button onclick="window.removeInstructorConfirm('${inst.email}')" class="text-red-400 hover:text-white bg-red-900/20 hover:bg-red-600 px-3 py-1 rounded transition-colors text-sm">
+                        移除
+                    </button>
+                    ` : '<span class="text-gray-600 text-sm">不可變更</span>'}
+                </td>
+            </tr>
+        `).join('');
+
+    } catch (e) {
+        console.error(e);
+        list.innerHTML = '<tr><td colspan="4" class="p-8 text-center text-red-500">載入失敗</td></tr>';
+    }
+}