Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add delete confirm, cancel shortcut + batch operations

Browse Source
This commit is contained in:
Zaki
2026-05-08 19:59:56 +01:00
parent a0a081e2db
commit 5ad1498afc
4 changed files with 478 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+35 -12
View File
@@ -33,7 +33,29 @@
</div>
</div>
</div>
<!-- Add Password Modal -->
<div class="modal-overlay" id="addModal">
<div class="modal-box">
<h3>➕ New Password</h3>
<label>Website / App</label><input type="text" id="addSite" placeholder="example.com">
<label style="margin-top:.6rem">Username / Email (optional)</label><input type="text" id="addUsername" placeholder="user@example.com">
<label style="margin-top:.6rem">Password</label>
<div style="position:relative">
<input type="password" id="addPassword" placeholder="Password" style="width:100%;padding-right:40px" oninput="checkAddStrength()">
<button type="button" onclick="openGen()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;line-height:1" title="Generate">🎲</button>
</div>
<div class="strength-bar s0" id="addStrengthBar" style="margin-top:0.2rem;"></div>
<label style="margin-top:.6rem">Folder</label>
<select id="addFolder" style="width:100%;margin-bottom:.4rem"></select>
<div style="display:flex;gap:.5rem;margin-top:1rem">
<button class="btn" id="addEntryBtn" onclick="addEntry()">💾 Save</button>
<button class="btn btn-outline" onclick="closeAdd()">Cancel</button>
</div>
</div>
</div>
<!-- Floating action button -->
<button class="fab" onclick="openAdd()" title="Add password">+</button>
<div class="vault">
<h1>🔐 Vault <span>XAMPP</span>
<button class="btn btn-outline btn-xs" onclick="toggleTheme()" style="margin-left:auto">🌓</button>
@@ -106,17 +128,17 @@
</div>
<!-- Add Entry Form -->
<form onsubmit="return false" class="input-group" autocomplete="off">
<input type="text" id="siteInput" placeholder="Website *" autocomplete="off">
<input type="text" id="usernameInput" placeholder="Username (optional)" autocomplete="off">
<div style="flex:1;min-width:130px;position:relative">
<input type="password" id="passwordInput" placeholder="Password *" autocomplete="new-password" style="width:100%;padding-right:40px" oninput="checkStrength()">
<button type="button" onclick="openGen()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;line-height:1" title="Generate password">🎲</button>
</div>
<div class="strength-bar s0" id="strengthBar" style="flex-basis:100%;margin-top:-0.3rem;margin-bottom:0.3rem"></div>
<select id="addFolderSelect"></select>
<button type="button" class="btn" id="addBtn" onclick="addEntry()">➕ Add</button>
</form>
<!-- <form onsubmit="return false" class="input-group" autocomplete="off"> -->
<!-- <input type="text" id="siteInput" placeholder="Website *" autocomplete="off"> -->
<!-- <input type="text" id="usernameInput" placeholder="Username (optional)" autocomplete="off"> -->
<!-- <div style="flex:1;min-width:130px;position:relative"> -->
<!-- <input type="password" id="passwordInput" placeholder="Password *" autocomplete="new-password" style="width:100%;padding-right:40px" oninput="checkStrength()"> -->
<!-- <button type="button" onclick="openGen()" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text2);cursor:pointer;font-size:1.1rem;line-height:1" title="Generate password">🎲</button> -->
<!-- </div> -->
<!-- <div class="strength-bar s0" id="strengthBar" style="flex-basis:100%;margin-top:-0.3rem;margin-bottom:0.3rem"></div> -->
<!-- <select id="addFolderSelect"></select> -->
<!-- <button type="button" class="btn" id="addBtn" onclick="addEntry()">➕ Add</button> -->
<!-- </form> -->
<!-- Toolbar with search + trash + views -->
<div class="toolbar">
@@ -126,6 +148,7 @@
</div>
<div style="display:flex;gap:.4rem;align-items:center;flex-wrap:wrap">
<button class="btn btn-outline btn-sm" id="trashBtn" onclick="toggleTrash()" title="Trash">🗑️</button>
<button class="btn btn-outline btn-sm" id="selectBtn" onclick="toggleSelectMode()" title="Batch select">☐ Select</button>
<div class="view-toggle" id="viewToggle">
<button class="view-btn active" data-view="grid">🟫 Grid</button>
<button class="view-btn" data-view="compact">📝 Compact</button>
@@ -149,7 +172,7 @@
</div>
<!-- Generator Modal -->
<div id="genModal" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:1000">
<div id="genModal" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:2000">
<div style="background:var(--bg2);border-radius:1.5rem;padding:1.5rem;min-width:320px;max-width:90%">
<h3 style="margin-bottom:.8rem;color:var(--text)">🎲 Generator</h3>
<div style="background:var(--input);padding:.8rem;border-radius:1rem;font-family:monospace;text-align:center;color:#4ade80;margin:.6rem 0;word-break:break-all" id="genPreview">Click Generate</div>