Update settings.html

settings.html

@@ -35,16 +35,23 @@
             border-radius: 4px;
         }
         button {
-            background-color: #4CAF50;
-            color: white;
             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 {
-            background-color: #388E3C;
+            opacity: 0.8;
         }
     </style>
 </head>
@@ -52,7 +59,7 @@
 
     <form id="settingsForm">
         <label for="api_key_sys">api_key_sys:</label>
-        <input type="text" id="api_key_sys" name="api_key_sys" onblur="saveApiKeySys()" onfocus="showApiKeySys()"><br><br>
+        <input type="text" id="api_key_sys" name="api_key_sys" onblur="saveApiKeySys()"><br><br>
 
         <label for="crypto_key_sys">crypto_key_sys:</label>
         <input type="text" id="crypto_key_sys" name="crypto_key_sys"><br><br>
@@ -75,7 +82,8 @@
         <label for="call_api_key">call_api_key:</label>
         <input type="text" id="call_api_key" name="call_api_key"><br><br>
 
-        <button type="button" onclick="saveSettings()">Save</button>
+        <button type="button" class="save" onclick="saveSettings()">Сохранить данные</button>
+        <button type="button" class="refresh" onclick="refreshSettings()">Обновить данные</button>
     </form>
 
     <script>
@@ -84,7 +92,6 @@
             const apiKeySys = localStorage.getItem('api_key_sys');
             if (apiKeySys) {
                 document.getElementById('api_key_sys').value = apiKeySys;
-                hideApiKeySys();
             }
 
             fetch('/load_settings', {
@@ -131,21 +138,13 @@
             .catch(error => console.error('Error:', error));
         }
 
+        function refreshSettings() {
+            loadSettings();
+        }
+
         function saveApiKeySys() {
             const apiKeySys = document.getElementById('api_key_sys').value;
             localStorage.setItem('api_key_sys', apiKeySys);
-            hideApiKeySys();
-        }
-
-        function showApiKeySys() {
-            const apiKeySys = localStorage.getItem('api_key_sys');
-            document.getElementById('api_key_sys').value = apiKeySys;
-        }
-
-        function hideApiKeySys() {
-            const apiKeySys = localStorage.getItem('api_key_sys');
-            const hiddenValue = '*'.repeat(apiKeySys.length);
-            document.getElementById('api_key_sys').value = hiddenValue;
         }
 
         window.onload = loadSettings;