Update chat.html

chat.html

@@ -174,102 +174,207 @@
 </head>
 
 
+
+
+
+
 <body>
+
 <div class="chat-container">
     <div class="chat-header">
         <h2>🌿 Secure Chat</h2>
         <div class="security-badge">AES ШИФРОВАНИЕ</div>
     </div>
 
-    <div class="encryption-notice">Введите общий ключ шифрования ниже</div>
-
-    <input type="password" id="key-input" class="key-input" placeholder="🔑 Ключ шифрования (один и тот же у обоих)" />
-
-    <div class="messages-container" id="messages"></div>
+    <!-- ЭКРАН ВХОДА С НИКОМ -->
+    <div id="login-section" style="padding: 20px; background: #e6fffa; border-bottom: 2px solid #48bb78; text-align: center;">
+        <h3 style="margin-bottom: 10px; color: #2f855a;">👤 Введите ваш ник</h3>
+        <input type="text" id="username-input" placeholder="Ваш ник" 
+               style="width: 60%; padding: 10px 15px; border: 2px solid #48bb78; border-radius: 10px; font-size: 16px; text-align: center;">
+        <button id="join-btn" 
+                style="margin-left: 10px; padding: 10px 25px; background: #48bb78; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 16px;">
+            Войти в чат
+        </button>
+        <div style="margin-top: 8px; font-size: 0.85em; color: #38a169;">
+            🔐 Этот ник будут видеть другие участники
+        </div>
+    </div>
 
-    <div class="input-container">
-        <textarea class="message-input" id="message-input" placeholder="Введите сообщение..."></textarea>
-        <div class="button-row">
-            <button class="send-button" id="send-btn">Отправить</button>
-            <button class="clear-button" id="clear-btn">🗑 Очистить</button>
+    <!-- САМ ЧАТ (СКРЫТ ДО ВХОДА) -->
+    <div id="chat-section" style="display: none; flex-direction: column; height: 100%;">
+        <div class="encryption-notice">🔒 Все сообщения шифруются на вашем устройстве</div>
+        
+        <div class="messages-container" id="messages"></div>
+
+        <div class="input-container">
+            <textarea class="message-input" id="message-input" placeholder="Введите сообщение..."></textarea>
+            <div class="button-row">
+                <button class="send-button" id="send-btn">Отправить</button>
+                <button class="clear-button" id="clear-btn">🗑 Очистить</button>
+            </div>
         </div>
     </div>
 </div>
 
 <script>
-const userId = "{{ user_id }}";
-let lastId = 0;
-let encryptionKey = '';
-
-const keyInput = document.getElementById('key-input');
-const msgInput = document.getElementById('message-input');
-const messagesDiv = document.getElementById('messages');
-
-document.getElementById('send-btn').onclick = sendMessage;
-document.getElementById('clear-btn').onclick = clearChat;
-keyInput.oninput = () => encryptionKey = keyInput.value.trim();
-
-async function sendMessage() {
-    const text = msgInput.value.trim();
-    if (!text || !encryptionKey) return alert('Введите сообщение и ключ');
-
-    const encrypted = CryptoJS.AES.encrypt(text, encryptionKey).toString();
-
-    await fetch('/send_message', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ user_id: userId, encrypted_text: encrypted })
-    });
-
-    msgInput.value = '';
-    loadNewMessages();
-}
-
-async function loadMessages() {
-    const res = await fetch('/get_messages');
-    const data = await res.json();
-    renderMessages(data.messages);
-}
-
-async function loadNewMessages() {
-    const res = await fetch(`/get_new_messages?last_id=${lastId}`);
-    const data = await res.json();
-    if (data.messages.length) renderMessages(data.messages, false);
-}
-
-async function clearChat() {
-    if (!confirm('Очистить чат?')) return;
-    await fetch('/clear_chat', { method: 'POST' });
-    messagesDiv.innerHTML = '';
-    lastId = 0;
-}
-
-function renderMessages(msgs, clear = true) {
-  if (clear) messagesDiv.innerHTML = '';
-  msgs.forEach(m => {
-    // если это уже было добавлено — пропускаем
-    if (document.getElementById('msg-' + m.id)) return;
-
-    lastId = Math.max(lastId, m.id);
-    let decrypted = '[🔒 Сообщение зашифровано]';
-    if (encryptionKey) {
-      try {
-        decrypted = CryptoJS.AES.decrypt(m.encrypted_text, encryptionKey).toString(CryptoJS.enc.Utf8) || decrypted;
-      } catch {}
+    // === ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ===
+    let username = '';
+    let lastId = 0;
+    const FIXED_KEY = 'my-secret-key-2024'; // Общий ключ шифрования
+
+    // === DOM-ЭЛЕМЕНТЫ ===
+    const loginSection = document.getElementById('login-section');
+    const chatSection = document.getElementById('chat-section');
+    const usernameInput = document.getElementById('username-input');
+    const joinBtn = document.getElementById('join-btn');
+    const messagesDiv = document.getElementById('messages');
+    const msgInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    const clearBtn = document.getElementById('clear-btn');
+
+    // === ВХОД В ЧАТ ===
+    function enterChat() {
+        const name = usernameInput.value.trim();
+        if (!name) {
+            alert('Пожалуйста, введите ваш ник!');
+            return;
+        }
+        username = name;
+        localStorage.setItem('chat_username', name); // сохраняем
+        
+        loginSection.style.display = 'none';
+        chatSection.style.display = 'flex';
+        
+        loadMessages();
+        // Запускаем автообновление, если ещё не запущено
+        if (!window._pollingStarted) {
+            window._pollingStarted = true;
+            setInterval(loadNewMessages, 2000);
+        }
+    }
+
+    joinBtn.onclick = enterChat;
+    usernameInput.onkeydown = function(e) {
+        if (e.key === 'Enter') enterChat();
+    };
+
+    // Автовход, если ник сохранён (опционально)
+    const savedName = localStorage.getItem('chat_username');
+    if (savedName) {
+        usernameInput.value = savedName;
+        // Можно раскомментировать для авто-входа:
+        // setTimeout(enterChat, 500);
+    }
+
+    // === ШИФРОВАНИЕ ===
+    function encryptMessage(text) {
+        return CryptoJS.AES.encrypt(text, FIXED_KEY).toString();
+    }
+
+    function decryptMessage(encrypted) {
+        try {
+            const decrypted = CryptoJS.AES.decrypt(encrypted, FIXED_KEY).toString(CryptoJS.enc.Utf8);
+            return decrypted || '🔒 Не удалось расшифровать';
+        } catch {
+            return '🔒 Ошибка расшифровки';
+        }
+    }
+
+    // === ОТПРАВКА ===
+    async function sendMessage() {
+        const text = msgInput.value.trim();
+        if (!text) {
+            alert('Введите сообщение');
+            return;
+        }
+        if (!username) {
+            alert('Сначала войдите в чат');
+            return;
+        }
+
+        const encrypted = encryptMessage(text);
+        await fetch('/send_message', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                username: username,
+                encrypted_text: encrypted
+            })
+        });
+        msgInput.value = '';
+        loadNewMessages();
+    }
+
+    // === ЗАГРУЗКА ===
+    async function loadMessages() {
+        const res = await fetch('/get_messages');
+        const data = await res.json();
+        renderMessages(data.messages, true);
+    }
+
+    async function loadNewMessages() {
+        const res = await fetch(`/get_new_messages?last_id=${lastId}`);
+        const data = await res.json();
+        if (data.messages.length) {
+            renderMessages(data.messages, false);
+        }
+    }
+
+    // === ОЧИСТКА ===
+    async function clearChat() {
+        if (!confirm('Очистить чат для всех?')) return;
+        await fetch('/clear_chat', { method: 'POST' });
+        messagesDiv.innerHTML = '';
+        lastId = 0;
+    }
+
+    // === ОТРИСОВКА ===
+    function renderMessages(msgs, clear = true) {
+        if (clear) messagesDiv.innerHTML = '';
+
+        msgs.forEach(m => {
+            if (document.getElementById('msg-' + m.id)) return;
+            lastId = Math.max(lastId, m.id);
+
+            const decrypted = decryptMessage(m.encrypted_text);
+            const isOwn = m.username === username;
+
+            const div = document.createElement('div');
+            div.id = 'msg-' + m.id;
+            div.className = 'message ' + (isOwn ? 'own' : 'other');
+            div.innerHTML = `
+                <div class="message-info">
+                    <b>${m.username}</b> • ${m.timestamp}
+                </div>
+                <div>${decrypted}</div>
+            `;
+            messagesDiv.appendChild(div);
+        });
+
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+
+    // === КНОПКИ ===
+    sendBtn.onclick = sendMessage;
+    clearBtn.onclick = clearChat;
+
+    msgInput.onkeydown = function(e) {
+        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            sendBtn.click();
+        }
+    };
+
+    // Если чат уже должен быть открыт (например, после перезагрузки)
+    // можно проверить и восстановить состояние
+    if (localStorage.getItem('chat_username') && loginSection.style.display !== 'none') {
+        // ничего не делаем, ждём ручного входа
     }
-    const div = document.createElement('div');
-    div.id = 'msg-' + m.id;  // уникальный ID для проверки
-    div.className = 'message ' + (m.user_id === userId ? 'own' : 'other');
-    div.innerHTML = `<div><b>${m.username}</b> • ${m.timestamp}</div><div>${decrypted}</div>`;
-    messagesDiv.appendChild(div);
-  });
-  messagesDiv.scrollTop = messagesDiv.scrollHeight;
-}
-
- 
-setInterval(loadNewMessages, 2000);
-loadMessages();
 </script>
+
 </body>
+
+
+
+  
 </html>