@@ -563,6 +575,19 @@ function renderProvisionForm(profile: MachineProfile) {
setAlert("Não foi possível atualizar as informações da máquina.", "error")
}
})
+
+ // Olhinho: mostrar/ocultar segredo
+ const toggleBtn = document.getElementById("toggle-secret") as HTMLButtonElement | null
+ const secretInput = document.getElementById("provisioningSecret") as HTMLInputElement | null
+ toggleBtn?.addEventListener("click", () => {
+ if (!secretInput) return
+ const isPw = secretInput.type === "password"
+ secretInput.type = isPw ? "text" : "password"
+ // alterna ícone
+ toggleBtn.innerHTML = isPw
+ ? '
'
+ : '
'
+ })
}
async function handleRegister(profile: MachineProfile, form: HTMLFormElement) {
diff --git a/apps/desktop/src/styles.css b/apps/desktop/src/styles.css
index 94979f7..322173f 100644
--- a/apps/desktop/src/styles.css
+++ b/apps/desktop/src/styles.css
@@ -71,9 +71,8 @@ form {
}
label {
- display: grid;
- gap: 6px;
- font-weight: 500;
+ display: block;
+ font-weight: 600;
color: #0f172a;
}
@@ -83,6 +82,29 @@ label span.optional {
font-size: 0.85rem;
}
+.field { display: grid; gap: 6px; }
+.label { font-size: 0.9rem; }
+
+.input-group { position: relative; }
+.input-group input { width: 100%; padding-right: 40px; }
+.icon-button {
+ position: absolute;
+ top: 50%;
+ right: 8px;
+ transform: translateY(-50%);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px; height: 28px;
+ border-radius: 6px;
+ border: 1px solid transparent;
+ background: #f1f5f9;
+ color: #334155;
+ cursor: pointer;
+}
+.icon-button:hover { background: #e2e8f0; }
+.icon-eye, .icon-eye-off { width: 18px; height: 18px; }
+
input,
select {
padding: 10px 12px;