admin/markbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add password visibility toggle in Settings panel

Browse Source 
- Hide password fields by default (show ••••••••)
- Add eye icon (👁) to toggle password visibility
- Add togglePassword() JavaScript function
- Password input fields use type=password attribute
- Preserve password toggle button position when editing

Affected fields:
- postgresql.password
- test.password
- authentication.default_password

User experience:
- Passwords hidden by default
- Click 👁 to show password
- Click 🙈 to hide password
- Edit mode uses password input type
This commit is contained in:
Warren
2026-05-16 20:34:09 +08:00
parent e3901b55d3
commit cdb12c1951
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/page.html
View File

@@ -82,6 +82,8 @@ body.mb-locked .mb-tree-node:hover .mb-folder-actions{display:none!important}
.mb-config-input{background:#0f172a;border:1px solid #60a5fa;border-radius:4px;color:#e2e8f0;padding:2px 8px;font-size:12px;font-family:monospace;width:150px}
.mb-config-save-btn{background:#064e3b;border:1px solid #4ade80;color:#4ade80;padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.mb-config-cancel-btn{background:#451a03;border:1px solid #fbbf24;color:#fbbf24;padding:2px 8px;border-radius:4px;cursor:pointer;font-size:11px}
.mb-password-toggle{background:none;border:none;color:#60a5fa;cursor:pointer;font-size:14px;padding:0 4px}
.mb-password-toggle:hover{color:#3b82f6}
</style>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:false,theme:'dark',themeVariables:{primaryColor:'#60a5fa',primaryTextColor:'#e2e8f0',lineColor:'#94a3b8'}})</script>
@@ -155,11 +157,19 @@ function loadSettings(){
var ckey=sec+"."+key;
var dispVal=typeof val==="object"?JSON.stringify(val):String(val);
var safeId=ckey.replace(/[^a-zA-Z0-9]/g,"-");
var isPassword=key.toLowerCase().indexOf("password")!==-1;
h+="<div class=mb-config-item>";
h+="<span class=mb-config-label>"+key+"</span>";
h+="<div style=display:flex;gap:6px;align-items:center>";
h+="<span class=mb-config-value id=config-value-"+safeId+">"+dispVal+"</span>";
if(isPassword){
h+="<span class=mb-config-value id=config-value-"+safeId+">••••••••</span>";
h+="<button class=mb-password-toggle onclick=togglePassword(\""+safeId+"\",\""+encodeURIComponent(dispVal)+"\") title=\"Show/Hide\">👁</button>";
}else{
h+="<span class=mb-config-value id=config-value-"+safeId+">"+dispVal+"</span>";
}
h+="<button class=mb-config-edit-btn onclick=editSetting(\""+ckey+"\",\""+encodeURIComponent(dispVal)+"\")>Edit</button>";
h+="</div>";
h+="</div>";
@@ -180,11 +190,18 @@ function editSetting(key,currentVal){
if(!valEl)return;
var decodedVal=decodeURIComponent(currentVal);
valEl.innerHTML="<input class=mb-config-input id=config-input-"+safeId+" value='"+decodedVal+"'>";
var isPassword=key.toLowerCase().indexOf("password")!==-1;
var inputType=isPassword?"type=password ":"";
valEl.innerHTML="<input class=mb-config-input id=config-input-"+safeId+" "+inputType+"value='"+decodedVal+"'>";
// Remove password toggle button if exists
var toggleBtn=valEl.parentElement.querySelector(".mb-password-toggle");
if(toggleBtn)toggleBtn.remove();
var parent=valEl.parentElement;
var editBtn=parent.querySelector(".mb-config-edit-btn");
editBtn.outerHTML="<button class=mb-config-save-btn onclick=saveSetting(\""+key+"\",\""+safeId+"\")>Save</button><button class=mb-config-cancel-btn onclick=cancelEdit(\""+key+"\",\""+currentVal+"\")>Cancel</button>";
editBtn.outerHTML="<button class=mb-config-save-btn onclick=saveSetting(\""+key+"\",\""+safeId+"\",\""+isPassword+"\")>Save</button><button class=mb-config-cancel-btn onclick=cancelEdit(\""+key+"\",\""+currentVal+"\")>Cancel</button>";
}
function saveSetting(key,safeId){