<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Settings</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { background-color: #4CAF50; color: white; padding: 20px; margin: 0; border-bottom: 2px solid #388E3C; text-align: left; } form { padding: 20px; } label { display: block; margin-top: 10px; color: #4CAF50; text-align: left; } input[type="text"] { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; } button.save { background-color: #4CAF50; color: white; } button.refresh { background-color: #FFA500; color: white; margin-left: 10px; } button:hover { opacity: 0.8; } .orange-text { color: #FFA500; } </style> </head> <body> <form id="settingsForm"> <label for="api_key_sys"><span class="orange-text">api_key_sys (Выдаётся администрацией сервиса):</span></label> <input type="text" id="api_key_sys" name="api_key_sys" onblur="saveApiKeySys()"><br><br> <label for="api_key_auth">api_key_auth (Ключ проверки подлинности запросов):</label> <input type="text" id="api_key_auth" name="api_key_auth"><br><br> <label for="api_key_apps_vk">apps_key (Объект, где ключ — это id приложения vk-mini-apps, а значение — защищённый ключ приложения vk-mini-apps.):</label> <input type="text" id="api_key_apps_vk" name="api_key_apps_vk"><br><br> <label for="vk_api_key">vk_api_key (Ключ ВК сообщества):</label> <input type="text" id="vk_api_key" name="vk_api_key"><br><br> <label for="vk_st_alone">vk_st_alone (Ключ ВК vk_st_alone):</label> <input type="text" id="vk_st_alone" name="vk_st_alone"><br><br> <label for="key_callback_vk">key_callback_vk (Ключ ВК key_callback_vk):</label> <input type="text" id="key_callback_vk" name="key_callback_vk"><br><br> <label for="senler_token">senler_token (Ключ проверки подлинности запросов к API Сенлер):</label> <input type="text" id="senler_token" name="senler_token"><br><br> <label for="wa_ak">wa_ak (id инстанса WhatsApp):</label> <input type="text" id="wa_ak" name="wa_ak"><br><br> <label for="wa_api_key">wa_api_key (Ключ проверки подлинности запросов к API WhatsApp):</label> <input type="text" id="wa_api_key" name="wa_api_key"><br><br> <label for="curators">curators (Список email кураторов):</label> <input type="text" id="curators" name="curators"><br><br> <label for="call_api_key">call_api_key (Ключ проверки подлинности запросов к API Звонобот):</label> <input type="text" id="call_api_key" name="call_api_key"><br><br> <button type="button" class="save" onclick="saveSettings()">Сохранить данные</button> <button type="button" class="refresh" onclick="refreshSettings()">Обновить данные</button> </form> <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script> <script> function loadSettings() { // Загружаем ключ из локального хранилища const apiKeySys = localStorage.getItem('api_key_sys'); if (apiKeySys) { document.getElementById('api_key_sys').value = apiKeySys; } fetch('/load_settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'load', api_key_sys: apiKeySys }) }) .then(response => response.json()) .then(data => { document.getElementById('api_key_auth').value = data.api_key_auth; document.getElementById('api_key_apps_vk').value = data.api_key_apps_vk; document.getElementById('vk_api_key').value = data.vk_api_key; document.getElementById('vk_st_alone').value = data.vk_st_alone; document.getElementById('key_callback_vk').value = data.key_callback_vk; document.getElementById('senler_token').value = data.senler_token; document.getElementById('wa_ak').value = data.wa_ak; document.getElementById('wa_api_key').value = data.wa_api_key; document.getElementById('curators').value = data.curators; document.getElementById('call_api_key').value = data.call_api_key; }) .catch(error => console.error('Error:', error)); } function saveSettings() { const form = document.getElementById('settingsForm'); const formData = new FormData(form); const data = {}; formData.forEach((value, key) => { if (value !== '') { data[key] = value; } }); fetch('/save_settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ action: 'save', data: data, api_key_sys: data.api_key_sys }) }) .then(response => response.json()) .then(data => { console.log('Success:', data); Toastify({ text: "Данные сохранены", duration: 3000, gravity: "top", position: "right", backgroundColor: "#4CAF50", }).showToast(); }) .catch(error => { console.error('Error:', error); Toastify({ text: "Ошибка при сохранении данных", duration: 3000, gravity: "top", position: "right", backgroundColor: "#FF0000", }).showToast(); }); } function refreshSettings() { loadSettings(); Toastify({ text: "Данные обновлены", duration: 3000, gravity: "top", position: "right", backgroundColor: "#FFA500", }).showToast(); } function saveApiKeySys() { const apiKeySys = document.getElementById('api_key_sys').value; localStorage.setItem('api_key_sys', apiKeySys); } window.onload = loadSettings; </script> </body> </html>