api_g

Running

App Files Files Community

DmitrMakeev commited on Oct 17

Commit

297ec9e

verified ·

1 Parent(s): 6b58ad6

Update chat.html

Browse files

Files changed (1) hide show

chat.html +132 -141

chat.html CHANGED Viewed

@@ -176,165 +176,156 @@
 <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 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>
 <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 {}
     }
-    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;
-}
-// вызываем при изменении ключа
-function decryptExistingMessages(key) {
-    if (!key) return; // ключ пустой — ничего не делаем
-    const messages = document.querySelectorAll('.message');
-    messages.forEach(msg => {
-        const cipher = msg.dataset.cipher; // зашифрованный текст
-        if (!cipher) return;
-        try {
-            // расшифровка через CryptoJS
-            const dec = CryptoJS.AES.decrypt(cipher, key).toString(CryptoJS.enc.Utf8);
-            if (dec) {
-                msg.querySelector('.message-text').textContent = dec;
-            }
-        } catch (e) {
-            // если ключ неправильный — оставляем "[🔒 Зашифровано]"
         }
-    });
-}
-// пример использования при вводе ключа
-const keyField = document.getElementById('key-input');
-keyField.addEventListener('input', () => {
-    const key = keyField.value.trim();
-    decryptExistingMessages(key);
-});
-setInterval(loadNewMessages, 2000);
-loadMessages();
 </script>
 </body>
 </html>

 <body>
 <div class="chat-container">
     <div class="chat-header">
+        <h2>💬 Secure Chat 🔒</h2>
+        <small>Ваш ID: <span id="user-id">{{ user_id }}</span></small>
+        <div class="security-badge">ДИНАМИЧЕСКОЕ ШИФРОВАНИЕ</div>
     </div>
+    <div class="messages-container" id="messages-container">
+        <div class="typing-indicator" id="welcome-message">
+            Добро пожаловать! Введите ключ шифрования чтобы расшифровать историю.
         </div>
     </div>
+    <div class="input-container">
+        <input type="password" id="key-input" class="key-input" placeholder="🔑 Ключ шифрования">
+        <input type="text" id="message-input" class="message-input" placeholder="Введите сообщение..." maxlength="500">
+        <button class="send-button" id="send-button">Отправить</button>
+        <button class="clear-button" id="clear-button">Очистить</button>
+        <button class="read-button" id="read-button">Прочитать историю</button>
+    </div>
 </div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
 <script>
+class SecureChat {
+    constructor() {
+        this.userId = document.getElementById('user-id').textContent;
+        this.messagesContainer = document.getElementById('messages-container');
+        this.messageInput = document.getElementById('message-input');
+        this.keyInput = document.getElementById('key-input');
+        this.sendButton = document.getElementById('send-button');
+        this.clearButton = document.getElementById('clear-button');
+        this.readButton = document.getElementById('read-button');
+        this.lastMessageId = 0;
+        this.keyInput.addEventListener('input', () => this.decryptExistingMessages());
+        this.sendButton.addEventListener('click', () => this.sendMessage());
+        this.clearButton.addEventListener('click', () => this.clearChat());
+        this.readButton.addEventListener('click', () => this.loadHistory());
+        this.messageInput.addEventListener('keypress', (e) => {
+            if(e.key==='Enter') this.sendMessage();
+        });
+        this.loadNewMessages();
+        setInterval(()=>this.loadNewMessages(),2000);
     }
+    encryptMessage(text, key) {
+        return CryptoJS.AES.encrypt(text, key).toString();
+    }
+    decryptMessage(cipher, key) {
+        return CryptoJS.AES.decrypt(cipher, key).toString(CryptoJS.enc.Utf8);
+    }
+    displayMessages(messages, clear=true) {
+        if(clear) {
+            this.messagesContainer.innerHTML='';
         }
+        messages.forEach(msg => {
+            if(msg.id>this.lastMessageId) this.lastMessageId=msg.id;
+            const div = document.createElement('div');
+            div.className=`message ${msg.user_id===this.userId?'own':'other'}`;
+            div.dataset.cipher = msg.encrypted_text; // сохраняем зашифрованный текст
+            div.innerHTML = `
+                <div class="message-info">${msg.username} • ${msg.timestamp}</div>
+                <div class="message-text">${msg.encrypted_text}</div>
+            `;
+            this.messagesContainer.appendChild(div);
+        });
+        this.scrollToBottom();
+    }
+    decryptExistingMessages() {
+        const key = this.keyInput.value.trim();
+        if(!key) return;
+        document.querySelectorAll('.message').forEach(msg=>{
+            const cipher = msg.dataset.cipher;
+            if(!cipher) return;
+            try{
+                const dec = this.decryptMessage(cipher,key);
+                msg.querySelector('.message-text').textContent = dec || '[🔒 Неверный ключ]';
+            } catch(e){
+                msg.querySelector('.message-text').textContent='[🔒 Неверный ключ]';
+            }
+        });
+    }
+    async sendMessage() {
+        const message = this.messageInput.value.trim();
+        const key = this.keyInput.value.trim();
+        if(!message || !key) return alert('Введите сообщение и ключ');
+        this.sendButton.disabled=true;
+        const cipher = this.encryptMessage(message,key);
+        // отправка на сервер
+        const response = await fetch('/send_message',{
+            method:'POST',
+            headers:{'Content-Type':'application/json'},
+            body:JSON.stringify({user_id:this.userId,message:message,password:key})
+        });
+        const result = await response.json();
+        if(result.status==='success'){
+            this.messageInput.value='';
+            this.loadNewMessages();
+        } else alert('Ошибка: '+result.message);
+        this.sendButton.disabled=false;
+    }
+    async loadNewMessages() {
+        const key = this.keyInput.value.trim();
+        const response = await fetch(`/get_new_messages?last_id=${this.lastMessageId}&password=${encodeURIComponent(key)}`);
+        const data = await response.json();
+        if(data.status==='error') return;
+        this.displayMessages(data.messages,false);
+        this.decryptExistingMessages();
+    }
+    async loadHistory() {
+        const key = this.keyInput.value.trim();
+        if(!key) return alert('Введите ключ чтобы прочитать историю');
+        const response = await fetch(`/get_messages?password=${encodeURIComponent(key)}`);
+        const data = await response.json();
+        if(data.status==='error') return alert(data.message);
+        this.displayMessages(data.messages);
+        this.decryptExistingMessages();
+    }
+    async clearChat() {
+        const key = this.keyInput.value.trim();
+        if(!key) return alert('Введите ключ чтобы очистить чат');
+        if(!confirm('Очистить историю?')) return;
+        const response = await fetch('/clear_chat',{
+            method:'POST',
+            headers:{'Content-Type':'application/json'},
+            body:JSON.stringify({password:key})
+        });
+        const result = await response.json();
+        if(result.status==='success'){
+            this.messagesContainer.innerHTML='<div class="typing-indicator">История очищена</div>';
+            this.lastMessageId=0;
+        } else alert('Ошибка очистки');
+    }
+    scrollToBottom() {
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
+}
+document.addEventListener('DOMContentLoaded',()=>new SecureChat());
 </script>
 </body>
 </html>