dashboard: collapsible credentials block; autofill: fix Pult username field
- Credentials wrapped in svc-credentials-wrap with toggle button and chevron - Credentials hidden by default, expand on click (CSS class toggle) - Autofill: add autofocus selector to catch fields like Zabbix name=name - Autofill: re-fill username after password fill if Pult/Zabbix cleared it Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+54
-4
@@ -410,18 +410,60 @@ button {
|
|||||||
position: relative;
|
position: relative;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.svc-cred-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba(42,140,214,0.1);
|
||||||
|
border: 1px solid rgba(42,140,214,0.22);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.32rem 0.65rem;
|
||||||
|
margin: 0 0 0rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1a5a8a;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
pointer-events: auto;
|
||||||
|
transition: background 0.15s ease, border-color 0.15s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.svc-cred-toggle:hover {
|
||||||
|
background: rgba(42,140,214,0.18);
|
||||||
|
border-color: rgba(42,140,214,0.38);
|
||||||
|
}
|
||||||
|
.svc-cred-chevron {
|
||||||
|
width: 14px; height: 14px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
color: #2a8cd6;
|
||||||
|
}
|
||||||
|
.svc-credentials-wrap.open .svc-cred-chevron {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.svc-credentials-wrap.open .svc-cred-toggle {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
.svc-credentials {
|
.svc-credentials {
|
||||||
background: linear-gradient(135deg, #edf5fc 0%, #e2eff8 100%);
|
background: linear-gradient(135deg, #edf5fc 0%, #e2eff8 100%);
|
||||||
border: 1px solid #c7d9ea;
|
border: 1px solid #c7d9ea;
|
||||||
border-radius: 8px;
|
border-top: none;
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
padding: 0.5rem 0.75rem 0.55rem;
|
padding: 0.5rem 0.75rem 0.55rem;
|
||||||
margin: 0 0 0.5rem;
|
margin: 0 0 0.5rem;
|
||||||
display: flex;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.3rem;
|
gap: 0.3rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
.svc-credentials-wrap.open .svc-credentials {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
.svc-cred-row {
|
.svc-cred-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -881,8 +923,16 @@ button {
|
|||||||
|
|
||||||
/* Credentials block */
|
/* Credentials block */
|
||||||
.dashboard-page .svc-credentials {
|
.dashboard-page .svc-credentials {
|
||||||
background: linear-gradient(135deg, #edf6ff 0%, #e2f0fb 100%) !important;
|
background: linear-gradient(135deg, rgba(220,238,255,0.55) 0%, rgba(200,225,248,0.5) 100%) !important;
|
||||||
border-color: rgba(180, 215, 240, 0.8) !important;
|
border-color: rgba(180, 215, 240, 0.6) !important;
|
||||||
|
}
|
||||||
|
.dashboard-page .svc-cred-toggle {
|
||||||
|
background: rgba(42,140,214,0.12) !important;
|
||||||
|
border-color: rgba(42,140,214,0.25) !important;
|
||||||
|
color: #0c2e4a !important;
|
||||||
|
}
|
||||||
|
.dashboard-page .svc-cred-toggle:hover {
|
||||||
|
background: rgba(42,140,214,0.2) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Category badges on tile */
|
/* Category badges on tile */
|
||||||
|
|||||||
@@ -104,6 +104,11 @@
|
|||||||
<h3>{{ service.name }}</h3>
|
<h3>{{ service.name }}</h3>
|
||||||
<div class="tile-info-area">
|
<div class="tile-info-area">
|
||||||
{% if service.svc_login or service.svc_password %}
|
{% if service.svc_login or service.svc_password %}
|
||||||
|
<div class="svc-credentials-wrap">
|
||||||
|
<button type="button" class="svc-cred-toggle" onclick="this.closest('.svc-credentials-wrap').classList.toggle('open')">
|
||||||
|
<span>Данные входа</span>
|
||||||
|
<svg class="svc-cred-chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
|
||||||
|
</button>
|
||||||
<div class="svc-credentials">
|
<div class="svc-credentials">
|
||||||
{% if service.svc_login %}
|
{% if service.svc_login %}
|
||||||
<div class="svc-cred-row">
|
<div class="svc-cred-row">
|
||||||
@@ -121,6 +126,7 @@
|
|||||||
<p class="svc-cred-hint">{{ service.svc_cred_hint }}</p>
|
<p class="svc-cred-hint">{{ service.svc_cred_hint }}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if service.comment %}
|
{% if service.comment %}
|
||||||
<div class="tile-comment">{{ service_comment_html.get(service.id, '') }}</div>
|
<div class="tile-comment">{{ service_comment_html.get(service.id, '') }}</div>
|
||||||
|
|||||||
@@ -49,7 +49,8 @@ _AUTOFILL_CONTENT_JS = r"""
|
|||||||
'input[name*="email" i]:not([type="password"]):not([type="hidden"]), ' +
|
'input[name*="email" i]:not([type="password"]):not([type="hidden"]), ' +
|
||||||
'input[id*="user" i]:not([type="password"]):not([type="hidden"]), ' +
|
'input[id*="user" i]:not([type="password"]):not([type="hidden"]), ' +
|
||||||
'input[id*="login" i]:not([type="password"]):not([type="hidden"]), ' +
|
'input[id*="login" i]:not([type="password"]):not([type="hidden"]), ' +
|
||||||
'input[id*="email" i]:not([type="password"]):not([type="hidden"])'
|
'input[id*="email" i]:not([type="password"]):not([type="hidden"]), ' +
|
||||||
|
'input[autofocus]:not([type="password"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"])'
|
||||||
);
|
);
|
||||||
for (const el of candidates) {
|
for (const el of candidates) {
|
||||||
if (isVisible(el)) return el;
|
if (isVisible(el)) return el;
|
||||||
@@ -126,6 +127,11 @@ _AUTOFILL_CONTENT_JS = r"""
|
|||||||
console.log('[PortalAutofill] password filled');
|
console.log('[PortalAutofill] password filled');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Some apps (e.g. Zabbix) clear username after password events — re-fill if needed
|
||||||
|
if (CREDS.login && u && u.value !== CREDS.login) {
|
||||||
|
setNativeValue(u, CREDS.login);
|
||||||
|
console.log('[PortalAutofill] user re-filled after password');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Watch for SPA re-renders clearing the fields and re-fill continuously
|
// Watch for SPA re-renders clearing the fields and re-fill continuously
|
||||||
|
|||||||
Reference in New Issue
Block a user