Upload 10 files

src/services/auth.js

@@ -0,0 +1,128 @@
+import { auth, googleProvider, db } from "./firebase.js";
+import { signInWithPopup, signOut } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
+import {
+    doc,
+    getDoc,
+    setDoc,
+    updateDoc,
+    collection,
+    getDocs,
+    deleteDoc,
+    serverTimestamp,
+    query
+} from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+
+const INSTRUCTORS_COLLECTION = "instructors";
+const SUPER_ADMIN_EMAIL = "t92206@gmail.com";
+
+/**
+ * Sign in with Google
+ */
+export async function signInWithGoogle() {
+    try {
+        const result = await signInWithPopup(auth, googleProvider);
+        return result.user;
+    } catch (error) {
+        console.error("Google Sign-In Error:", error);
+        throw error;
+    }
+}
+
+/**
+ * Sign out
+ */
+export async function signOutUser() {
+    try {
+        await signOut(auth);
+    } catch (error) {
+        console.error("Sign Out Error:", error);
+        throw error;
+    }
+}
+
+/**
+ * Check if user is an instructor and get permissions
+ * Bootstraps the Super Admin if not exists
+ * @param {object} user - Firebase User object
+ * @returns {Promise<object|null>} Instructor data or null if not authorized
+ */
+export async function checkInstructorPermission(user) {
+    if (!user || !user.email) return null;
+
+    const email = user.email;
+    const instructorRef = doc(db, INSTRUCTORS_COLLECTION, email);
+    const snap = await getDoc(instructorRef);
+
+    // Bootstrap Super Admin
+    if (email === SUPER_ADMIN_EMAIL) {
+        const adminData = {
+            name: user.displayName || "Super Admin",
+            email: email,
+            role: 'admin',
+            permissions: ['create_room', 'add_question', 'manage_instructors'],
+            lastLogin: serverTimestamp()
+        };
+
+        if (!snap.exists()) {
+            await setDoc(instructorRef, {
+                ...adminData,
+                createdAt: serverTimestamp()
+            });
+        } else {
+            // Ensure admin always has full permissions
+            await updateDoc(instructorRef, {
+                role: 'admin',
+                permissions: ['create_room', 'add_question', 'manage_instructors'],
+                lastLogin: serverTimestamp()
+            });
+        }
+        return adminData;
+    }
+
+    if (snap.exists()) {
+        const data = snap.data();
+        await updateDoc(instructorRef, { lastLogin: serverTimestamp() });
+        return data;
+    }
+
+    return null; // Not an instructor
+}
+
+/**
+ * Get all instructors (Admin Only)
+ */
+export async function getInstructors() {
+    const q = query(collection(db, INSTRUCTORS_COLLECTION));
+    const snapshot = await getDocs(q);
+    return snapshot.docs.map(doc => doc.data());
+}
+
+/**
+ * Add new instructor (Admin Only)
+ */
+export async function addInstructor(email, name, permissions) {
+    const instructorRef = doc(db, INSTRUCTORS_COLLECTION, email);
+    await setDoc(instructorRef, {
+        email,
+        name,
+        role: 'instructor',
+        permissions,
+        createdAt: serverTimestamp()
+    });
+}
+
+/**
+ * Update instructor (Admin Only)
+ */
+export async function updateInstructor(email, data) {
+    const instructorRef = doc(db, INSTRUCTORS_COLLECTION, email);
+    await updateDoc(instructorRef, data);
+}
+
+/**
+ * Remove instructor (Admin Only)
+ */
+export async function removeInstructor(email) {
+    if (email === SUPER_ADMIN_EMAIL) throw new Error("Cannot remove Super Admin");
+    await deleteDoc(doc(db, INSTRUCTORS_COLLECTION, email));
+}

src/services/firebase.js

@@ -1,5 +1,6 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
 import { getFirestore } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
+import { getAuth, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
 
 const firebaseConfig = {
     apiKey: "AIzaSyDq2a-yE6pbaeNf6KzkTcogh9oi-6nQbKk",
@@ -12,5 +13,7 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
+const auth = getAuth(app);
+const googleProvider = new GoogleAuthProvider();
 
-export { db };
+export { db, auth, googleProvider };

src/views/AdminView.js

@@ -1,4 +1,6 @@
 import { getChallenges, createChallenge, updateChallenge, deleteChallenge } from "../services/classroom.js";
+import { checkInstructorPermission } from "../services/auth.js";
+import { auth } from "../services/firebase.js";
 
 export function renderAdminView() {
     return `
@@ -66,6 +68,22 @@ export function renderAdminView() {
 }
 
 export function setupAdminEvents() {
+    // 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('add_question')) {
+            alert("您沒有權限管理題目");
+            window.location.hash = 'instructor';
+            return;
+        }
+    });
+
     loadChallenges();
 
     document.getElementById('back-instructor-btn').addEventListener('click', () => {

src/views/InstructorView.js

@@ -1,4 +1,5 @@
 import { createRoom, subscribeToRoom, getChallenges, resetProgress, removeUser } from "../services/classroom.js";
+import { signInWithGoogle, signOutUser, checkInstructorPermission, getInstructors, addInstructor, updateInstructor, removeInstructor } from "../services/auth.js";
 import { generateMonsterSVG, getNextMonster, MONSTER_DEFS } from "../utils/monsterUtils.js";
 
 // Load html-to-image dynamically (Better support than html2canvas)
@@ -19,10 +20,51 @@ export async function renderInstructorView() {
 
     return `
     <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-90 backdrop-blur z-50 flex items-center justify-center">
-        <div class="bg-gray-800 p-8 rounded-xl border border-gray-600 shadow-2xl max-w-sm w-full">
-            <h2 class="text-xl font-bold text-center mb-6 text-white">🔒 講師身分驗證</h2>
-            <input type="password" id="instructor-password" class="w-full bg-gray-900 border border-gray-700 rounded p-3 text-white text-center text-lg tracking-widest mb-4 focus:border-cyan-500 focus:outline-none" placeholder="輸入密碼">
-                <button id="auth-btn" class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 rounded-lg transition-colors">確認進入</button>
+        <div class="bg-gray-800 p-8 rounded-xl border border-gray-600 shadow-2xl max-w-sm w-full text-center">
+            <h2 class="text-xl font-bold mb-6 text-white">🔒 講師登入</h2>
+            <p class="text-gray-400 mb-6 text-sm">請使用已授權的 Google 帳號登入</p>
+            <button id="google-auth-btn" class="w-full bg-white text-gray-900 font-bold py-3 rounded-lg flex items-center justify-center space-x-2 hover:bg-gray-100 transition-colors">
+                <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" class="w-5 h-5">
+                <span>Sign in with Google</span>
+            </button>
+            <p id="auth-error-msg" class="text-red-500 mt-4 hidden text-sm"></p>
+        </div>
+    </div>
+
+    <!-- Instructor Management Modal -->
+    <div id="instructor-modal" class="fixed inset-0 bg-gray-900/95 backdrop-blur z-[80] hidden flex flex-col items-center justify-center p-4">
+        <div class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col">
+            <div class="p-6 border-b border-gray-700 flex justify-between items-center">
+                <h2 class="text-2xl font-bold text-white">👥 管理講師權限 (Manage Instructors)</h2>
+                <button onclick="document.getElementById('instructor-modal').classList.add('hidden')" class="text-gray-400 hover:text-white text-2xl">✕</button>
+            </div>
+            
+            <div class="p-6 flex-1 overflow-y-auto">
+                <div class="mb-6 flex space-x-2">
+                    <input type="email" id="new-inst-email" placeholder="Email (Gmail)" class="bg-gray-900 border border-gray-600 text-white px-4 py-2 rounded flex-1">
+                    <input type="text" id="new-inst-name" placeholder="姓名" class="bg-gray-900 border border-gray-600 text-white px-4 py-2 rounded w-32">
+                    <div class="flex items-center space-x-2 text-sm text-gray-300 bg-gray-900 px-3 rounded border border-gray-600">
+                        <label><input type="checkbox" id="perm-room" checked> 開房</label>
+                        <label><input type="checkbox" id="perm-q" checked> 題目</label>
+                        <label><input type="checkbox" id="perm-inst"> 管理人</label>
+                    </div>
+                    <button id="btn-add-inst" class="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded font-bold">新增</button>
+                </div>
+
+                <table class="w-full text-left border-collapse">
+                    <thead>
+                        <tr class="text-gray-400 border-b border-gray-700">
+                            <th class="p-3">姓名</th>
+                            <th class="p-3">Email</th>
+                            <th class="p-3">權限</th>
+                            <th class="p-3">動作</th>
+                        </tr>
+                    </thead>
+                    <tbody id="instructor-list-body" class="text-gray-300">
+                        <!-- Dynamic list -->
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 
@@ -218,7 +260,10 @@ export async function renderInstructorView() {
                 <button id="group-photo-btn" class="hidden bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-lg transition-all shadow-lg border border-pink-400/30 flex items-center space-x-2">
                     <span>📸 大合照</span>
                 </button>
-                <button id="nav-admin-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-all border border-gray-600">
+                <button id="nav-instructors-btn" class="hidden bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg transition-all border border-indigo-400/30 mr-2">
+                    👥 管理講師
+                </button>
+                <button id="nav-admin-btn" class="hidden bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-all border border-gray-600">
                     管理題目
                 </button>
                 <div id="create-room-container" class="flex items-center space-x-2">
@@ -262,66 +307,183 @@ export async function renderInstructorView() {
 
 export function setupInstructorEvents() {
     let roomUnsubscribe = null;
+    let currentInstructor = null;
 
-    // Auth Logic
-    const authBtn = document.getElementById('auth-btn');
-    const pwdInput = document.getElementById('instructor-password');
+    // UI References
+    const authBtn = document.getElementById('google-auth-btn');
     const authModal = document.getElementById('auth-modal');
+    const authErrorMsg = document.getElementById('auth-error-msg');
 
-    // Define Kick Function globally (robust against auth flow)
-    window.confirmKick = async (userId, nickname) => {
-        if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
-            try {
-                const { removeUser } = await import("../services/classroom.js");
-                await removeUser(userId);
-                // UI will update automatically via subscribeToRoom
-            } catch (e) {
-                console.error("Kick failed:", e);
-                alert("移除失敗");
-            }
+    // Core Buttons
+    const createBtn = document.getElementById('create-room-btn');
+    const navAdminBtn = document.getElementById('nav-admin-btn');
+    const navInstBtn = document.getElementById('nav-instructors-btn');
+
+    // Other UI
+    const roomInfo = document.getElementById('room-info');
+    const createContainer = document.getElementById('create-room-container');
+    const dashboardContent = document.getElementById('dashboard-content');
+    const displayRoomCode = document.getElementById('display-room-code');
+    const groupPhotoBtn = document.getElementById('group-photo-btn');
+    const snapshotBtn = document.getElementById('snapshot-btn');
+    let isSnapshotting = false;
+
+    // Permission Check Helper
+    const checkPermissions = (instructor) => {
+        if (!instructor) return;
+
+        currentInstructor = instructor;
+
+        // 1. Create Room Permission
+        if (instructor.permissions?.includes('create_room')) {
+            createBtn.classList.remove('hidden', 'opacity-50', 'cursor-not-allowed');
+            createBtn.disabled = false;
+        } else {
+            createBtn.classList.add('opacity-50', 'cursor-not-allowed');
+            createBtn.disabled = true;
+            createBtn.title = "無此權限";
         }
-    };
 
-    // Default password check
-    const checkPassword = async () => {
-        const { verifyInstructorPassword } = await import("../services/classroom.js");
+        // 2. Add Question Permission (Admin Button)
+        if (instructor.permissions?.includes('add_question')) {
+            navAdminBtn.classList.remove('hidden');
+        } else {
+            navAdminBtn.classList.add('hidden');
+        }
 
-        authBtn.textContent = "驗證中...";
-        authBtn.disabled = true;
+        // 3. Manage Instructors Permission
+        if (instructor.permissions?.includes('manage_instructors')) {
+            navInstBtn.classList.remove('hidden');
+        } else {
+            navInstBtn.classList.add('hidden');
+        }
+    };
 
+    // Google Auth Logic
+    authBtn.addEventListener('click', async () => {
         try {
-            const isValid = await verifyInstructorPassword(pwdInput.value);
-            if (isValid) {
+            authBtn.disabled = true;
+            authBtn.classList.add('opacity-50');
+
+            const user = await signInWithGoogle();
+            const instructorData = await checkInstructorPermission(user);
+
+            if (instructorData) {
                 authModal.classList.add('hidden');
-                // Store session to avoid re-login on reload
-                sessionStorage.setItem('vibecoding_instructor_auth', 'true');
+                checkPermissions(instructorData);
+                // Save name for avatar
+                localStorage.setItem('vibecoding_instructor_name', instructorData.name);
             } else {
-                alert('密碼錯誤');
-                pwdInput.value = '';
+                authErrorMsg.textContent = "未授權的帳號 (Unauthorized Account)";
+                authErrorMsg.classList.remove('hidden');
+                await signOutUser();
             }
-        } catch (e) {
-            console.error(e);
-            alert("驗證出錯");
+        } catch (error) {
+            console.error(error);
+            authErrorMsg.textContent = "登入失敗: " + error.message;
+            authErrorMsg.classList.remove('hidden');
         } finally {
-            authBtn.textContent = "確認進入";
             authBtn.disabled = false;
+            authBtn.classList.remove('opacity-50');
+        }
+    });
+
+    // Handle Instructor Management
+    navInstBtn.addEventListener('click', async () => {
+        const modal = document.getElementById('instructor-modal');
+        const listBody = document.getElementById('instructor-list-body');
+
+        // Load list
+        const instructors = await getInstructors();
+        listBody.innerHTML = instructors.map(inst => `
+            <tr class="border-b border-gray-700 hover:bg-gray-800">
+                <td class="p-3">${inst.name}</td>
+                <td class="p-3 font-mono text-sm text-cyan-400">${inst.email}</td>
+                <td class="p-3 text-xs">
+                    ${inst.permissions?.map(p => {
+            const map = { create_room: '開房', add_question: '題目', manage_instructors: '管理' };
+            return `<span class="bg-gray-700 px-2 py-1 rounded mr-1">${map[p] || p}</span>`;
+        }).join('')}
+                </td>
+                <td class="p-3">
+                    ${inst.role === 'admin' ? '<span class="text-gray-500 italic">不可移除</span>' :
+                `<button class="text-red-400 hover:text-red-300" onclick="window.removeInst('${inst.email}')">移除</button>`}
+                </td>
+            </tr>
+        `).join('');
+
+        modal.classList.remove('hidden');
+    });
+
+    // Add New Instructor
+    document.getElementById('btn-add-inst').addEventListener('click', async () => {
+        const email = document.getElementById('new-inst-email').value.trim();
+        const name = document.getElementById('new-inst-name').value.trim();
+
+        if (!email || !name) return alert("請輸入完整資料");
+
+        const perms = [];
+        if (document.getElementById('perm-room').checked) perms.push('create_room');
+        if (document.getElementById('perm-q').checked) perms.push('add_question');
+        if (document.getElementById('perm-inst').checked) perms.push('manage_instructors');
+
+        try {
+            await addInstructor(email, name, perms);
+            alert("新增成功");
+            navInstBtn.click(); // Reload list
+            document.getElementById('new-inst-email').value = '';
+            document.getElementById('new-inst-name').value = '';
+        } catch (e) {
+            alert("新增失敗: " + e.message);
+        }
+    });
+
+    // Global helper for remove (hacky but works for simple onclick)
+    window.removeInst = async (email) => {
+        if (confirm(`確定移除 ${email}?`)) {
+            try {
+                await removeInstructor(email);
+                navInstBtn.click(); // Reload
+            } catch (e) {
+                alert(e.message);
+            }
         }
     };
 
-    authBtn.addEventListener('click', checkPassword);
-    pwdInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') checkPassword();
+    // Auto Check Auth (Persistence)
+    // We rely on Firebase Auth state observer instead of session storage for security?
+    // Or we can just check if user is already signed in.
+    import("../services/firebase.js").then(({ auth }) => {
+        auth.onAuthStateChanged(async (user) => {
+            if (user) {
+                const instructorData = await checkInstructorPermission(user);
+                if (instructorData) {
+                    authModal.classList.add('hidden');
+                    checkPermissions(instructorData);
+                } else {
+                    // Logged in google but not instructor
+                    authModal.classList.remove('hidden');
+                }
+            } else {
+                authModal.classList.remove('hidden');
+            }
+        });
     });
 
-    const createBtn = document.getElementById('create-room-btn');
-    const roomInfo = document.getElementById('room-info');
-    const createContainer = document.getElementById('create-room-container');
-    const dashboardContent = document.getElementById('dashboard-content');
-    const displayRoomCode = document.getElementById('display-room-code');
-    const navAdminBtn = document.getElementById('nav-admin-btn');
-    const groupPhotoBtn = document.getElementById('group-photo-btn');
-    const snapshotBtn = document.getElementById('snapshot-btn');
-    let isSnapshotting = false;
+    // Define Kick Function globally (robust against auth flow)
+    window.confirmKick = async (userId, nickname) => {
+        if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
+            try {
+                const { removeUser } = await import("../services/classroom.js");
+                await removeUser(userId);
+                // UI will update automatically via subscribeToRoom
+            } catch (e) {
+                console.error("Kick failed:", e);
+                alert("移除失敗");
+            }
+        }
+    };
+
 
     // Snapshot Logic
     snapshotBtn.addEventListener('click', async () => {
@@ -705,15 +867,11 @@ export function setupInstructorEvents() {
     });
 
     // Logout Logic
-    document.getElementById('logout-btn').addEventListener('click', () => {
+    document.getElementById('logout-btn').addEventListener('click', async () => {
         if (confirm('確定要登出講師模式嗎？ (將會回到首頁)')) {
-            sessionStorage.removeItem('vibecoding_instructor_auth');
+            await signOutUser();
             sessionStorage.removeItem('vibecoding_instructor_in_room');
             sessionStorage.removeItem('vibecoding_admin_referer');
-            // We can optionally clear room history or keep it
-            // localStorage.removeItem('vibecoding_instructor_room'); 
-
-            // Clear hash to trigger main router back to Landing or default
             window.location.hash = '';
             window.location.reload();
         }
@@ -732,10 +890,10 @@ export function setupInstructorEvents() {
         }
     });
 
-    // Check Previous Session
-    if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
-        authModal.classList.add('hidden');
-    }
+    // Check Previous Session (Handled by onAuthStateChanged now)
+    // if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
+    //     authModal.classList.add('hidden');
+    // }
 
     // Check Active Room State
     const activeRoom = sessionStorage.getItem('vibecoding_instructor_in_room');