lainlives
/
pictoclone


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern PictoChat</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="login container">
        <h1>join room</h1>
        <span id="join-info">other people can join</span>
        <form id="login-form">
            <input type="text" id="username" name="u" placeholder="your name" required autocomplete="off">
            <input type="password" id="password" name="p" placeholder="password" style="display: none;">
            <button type="submit">join</button>
        </form>
        <span id="login-error" style="color: #ff5555; margin-top: 10px; font-size: 14px; text-align: center;"></span>
    </div>
    <script>
        const form = document.getElementById("login-form");
        const userInp = document.getElementById("username");
        const passInp = document.getElementById("password");
        const errSpan = document.getElementById("login-error");
        
        let checkedUsername = "";
        let isAdmin = false;
        
        form.addEventListener("submit", async (e) => {
            e.preventDefault();
            errSpan.innerText = "";
            const u = userInp.value.trim();
            if (!u) return;
            
            if (u !== checkedUsername) {
                const res = await fetch("/api/check_username?u=" + encodeURIComponent(u));
                const data = await res.json();
                checkedUsername = u;
                isAdmin = data.status === "admin";
            }
            
            if (isAdmin && passInp.style.display === "none") {
                passInp.style.display = "block";
                passInp.required = true;
                passInp.focus();
                return;
            }
            
            const payload = { u: u };
            if (isAdmin) payload.password = passInp.value;
            
            const loginRes = await fetch("/api/login", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(payload)
            });
            const loginData = await loginRes.json();
            if (loginRes.ok) {
                window.location.href = "/?u=" + encodeURIComponent(u);
            } else {
                errSpan.innerText = loginData.error;
            }
        });
        
        userInp.addEventListener("input", () => {
            if (userInp.value.trim() !== checkedUsername) {
                passInp.style.display = "none";
                passInp.required = false;
                passInp.value = "";
                errSpan.innerText = "";
            }
        });
    </script>
    <script src="js/room_info.js"></script>
</body>
</html>