survey/index.html

<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TPU Survey - ระบบประเมินความพึงพอใจ</title>
    <meta name="description" content="ระบบแบบสอบถามประเมินผล มหาวิทยาลัยตาปี">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'thai': ['"Noto Sans Thai"', 'sans-serif']
                    },
                    colors: {
                        'primary': { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a' },
                        'accent': { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f' }
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="css/style.css?v=8">
</head>

<body class="font-thai">
    <div class="login-page">
        <div class="login-card glass-card relative overflow-hidden">
            <!-- Accent Gold Line -->
            <div
                class="h-1.5 bg-gradient-to-r from-yellow-300 via-yellow-400 to-yellow-500 absolute top-0 left-0 right-0">
            </div>

            <div class="login-logo">
                <img src="pic/logo.png" alt="TPU Logo" class="h-28 w-auto mx-auto mb-4 drop-shadow-md">
                <h1 style="color: #1e3a8a; font-size: 2rem; font-weight: 800; margin-bottom: 4px;">TPU Survey</h1>
                <p class="text-gray-500 text-xs mt-0.5">มหาวิทยาลัยตาปี (Tapee University)</p>
            </div>

            <form id="loginForm" onsubmit="handleLogin(event)">
                <div class="form-group">
                    <label class="form-label label-lg" for="username">ชื่อผู้ใช้ / รหัสบุคลากร</label>
                    <input type="text" id="username" class="form-input" placeholder="กรอกชื่อผู้ใช้หรือรหัสบุคลากร"
                        required autocomplete="username">
                </div>

                <div class="form-group">
                    <label class="form-label" for="password">รหัสผ่าน</label>
                    <div class="password-wrapper">
                        <input type="password" id="password" class="form-input" placeholder="กรอกรหัสผ่าน" required
                            autocomplete="current-password">
                        <button type="button" class="toggle-password" onclick="togglePasswordVisibility()">👁️</button>
                    </div>
                </div>

                <div id="loginError" class="text-danger text-sm mb-16" style="display:none;"></div>

                <button type="submit" id="loginBtn"
                    class="btn btn-primary btn-block btn-lg shadow-lg hover:shadow-xl transition-all">
                    <i class="fas fa-sign-in-alt mr-2"></i> เข้าสู่ระบบ
                </button>
            </form>

        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
            // Check if already logged in
            (async () => {
                const loggedIn = await Auth.check();
                if (loggedIn) {
                    redirectToDashboard();
                }
            })();

        async function handleLogin(e) {
            e.preventDefault();
            const btn = document.getElementById('loginBtn');
            const errorEl = document.getElementById('loginError');
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            btn.disabled = true;
            btn.textContent = 'กำลังเข้าสู่ระบบ...';
            errorEl.style.display = 'none';

            try {
                await Auth.login(username, password);
                Toast.success('เข้าสู่ระบบสำเร็จ');
                setTimeout(() => redirectToDashboard(), 500);
            } catch (err) {
                errorEl.textContent = err.message;
                errorEl.style.display = 'block';
                btn.disabled = false;
                btn.textContent = 'เข้าสู่ระบบ';
            }
        }

        function redirectToDashboard() {
            if (Auth.user.role === 'admin') {
                window.location.href = 'admin.html';
            } else {
                window.location.href = 'teacher.html';
            }
        }
        function togglePasswordVisibility() {
            const passwordInput = document.getElementById('password');
            const toggleBtn = document.querySelector('.toggle-password');
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                toggleBtn.textContent = '🔒';
            } else {
                passwordInput.type = 'password';
                toggleBtn.textContent = '👁️';
            }
        }
    </script>
</body>

</html>