From d2205648e66f8b4bbb0c205fd72ab9c7e6e89c5f10762f5377b113ca6762acbd Mon Sep 17 00:00:00 2001
From: AidarKC <i@aidarkc.ru>
Date: Tue, 2 Jun 2026 16:40:58 +0400
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=B0=D0=BA=D1=82=D0=BD=D0=B0=D1=8F=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D1=81=D0=BA=D1=80=D1=8B?=
 =?UTF-8?q?=D1=82=D0=B8=D1=8F=20=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=B9=20?=
 =?UTF-8?q?=D0=B2=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 VERSION.properties                  |  4 ++--
 shine-UI/js/pages/show-keys-view.js | 29 ++++++++++++++++++++++++++---
 shine-UI/styles/components.css      | 18 ++++++++++++++++++
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/VERSION.properties b/VERSION.properties
index 85efee4..86768f4 100644
--- a/VERSION.properties
+++ b/VERSION.properties
@@ -1,2 +1,2 @@
-client.version=1.2.112
-server.version=1.2.104
+client.version=1.2.113
+server.version=1.2.105
diff --git a/shine-UI/js/pages/show-keys-view.js b/shine-UI/js/pages/show-keys-view.js
index 29a1273..1aa1b8f 100644
--- a/shine-UI/js/pages/show-keys-view.js
+++ b/shine-UI/js/pages/show-keys-view.js
@@ -40,13 +40,28 @@ export function render({ navigate }) {
   const renderField = (id, label) => {
     const row = document.createElement('div');
     row.className = 'key-card stack';
+    const eyeIcon = `
+      <svg class="key-toggle-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path d="M2.4 12s3.6-6.5 9.6-6.5S21.6 12 21.6 12s-3.6 6.5-9.6 6.5S2.4 12 2.4 12Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
+        <circle cx="12" cy="12" r="2.9" fill="none" stroke="currentColor" stroke-width="1.8"/>
+      </svg>
+    `;
+    const eyeOffIcon = `
+      <svg class="key-toggle-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path d="M3 4l18 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+        <path d="M2.4 12s3.6-6.5 9.6-6.5c2.4 0 4.5.8 6.1 1.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
+        <path d="M21.6 12s-3.6 6.5-9.6 6.5c-2.4 0-4.5-.8-6.1-1.9" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>
+      </svg>
+    `;
     row.innerHTML = `
       <div class="row">
         <span class="field-label">${label}</span>
-        <button class="icon-btn small-btn" type="button" data-toggle="${id}">Показать</button>
+        <button class="icon-btn key-toggle-btn" type="button" data-toggle="${id}" aria-label="Показать ключ" title="Показать ключ">${eyeOffIcon}</button>
       </div>
       <div class="key-value key-value--compact" data-value="${id}">*****</div>
     `;
+    row._eyeIcon = eyeIcon;
+    row._eyeOffIcon = eyeOffIcon;
     return row;
   };
 
@@ -59,21 +74,29 @@ export function render({ navigate }) {
   const setMissingState = (id) => {
     const valueEl = card.querySelector(`[data-value="${id}"]`);
     const btnEl = card.querySelector(`[data-toggle="${id}"]`);
+    const field = btnEl?.closest('.key-card');
     valueEl.textContent = 'нет данных';
     btnEl.disabled = true;
-    btnEl.textContent = 'Нет';
+    btnEl.innerHTML = field?._eyeOffIcon || '';
+    btnEl.setAttribute('aria-label', 'Нет данных');
+    btnEl.title = 'Нет данных';
   };
 
   const updateField = (id) => {
     const valueEl = card.querySelector(`[data-value="${id}"]`);
     const btnEl = card.querySelector(`[data-toggle="${id}"]`);
+    const field = btnEl?.closest('.key-card');
     if (!keys[id]) {
       setMissingState(id);
       return;
     }
     valueEl.textContent = visible[id] ? keys[id] : '*****';
     btnEl.disabled = false;
-    btnEl.textContent = visible[id] ? 'Скрыть' : 'Показать';
+    btnEl.innerHTML = visible[id]
+      ? field?._eyeIcon || ''
+      : field?._eyeOffIcon || '';
+    btnEl.setAttribute('aria-label', visible[id] ? 'Скрыть ключ' : 'Показать ключ');
+    btnEl.title = visible[id] ? 'Скрыть ключ' : 'Показать ключ';
   };
 
   card.querySelectorAll('[data-toggle]').forEach((button) => {
diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css
index 2bfd8bb..17519f8 100644
--- a/shine-UI/styles/components.css
+++ b/shine-UI/styles/components.css
@@ -1281,6 +1281,24 @@ textarea.input {
   letter-spacing: 0;
 }
 
+.key-toggle-btn {
+  width: 36px;
+  height: 36px;
+  min-height: 36px;
+  min-width: 36px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 10px;
+}
+
+.key-toggle-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+}
+
 .qr-demo {
   width: 64px;
   height: 64px;