【密码口令保存小工具】

密码保险箱 · 企业安全增强版

🔒 密码保险箱 · 企业安全版

验证主密码以进入 · 自动锁定保护
🔑 主密码
🔓 解锁保险库
🔐 修改主密码 🔒 自动锁定: 5分钟
⚡ 首次使用默认密码: 123456
🔒 5次失败自动锁定5分钟 · 剪贴板5秒自动清除 · 内存不留存密码

复制代码
<!-- 🔏 修改密码界面 - 带新盐生成 -->
<div id="changePasswordPanel" class="change-password-panel hidden">
    <h2>🔐 修改主密码</h2>
    <div class="sub">将生成新的加密盐,数据自动重加密</div>
    <div class="input-group">
        <label>📌 当前密码</label>
        <input type="password" id="currentMasterPwd" placeholder="输入当前密码">
    </div>
    <div class="input-group">
        <label>✨ 新密码 (至少8位)</label>
        <input type="password" id="newMasterPwd1" placeholder="至少8位,建议混合大小写数字">
    </div>
    <div class="input-group">
        <label>🔄 确认新密码</label>
        <input type="password" id="newMasterPwd2" placeholder="再次输入新密码">
    </div>
    <div style="display: flex; gap: 16px;">
        <button id="confirmChangePwdBtn" class="btn">✅ 确认修改</button>
        <button id="cancelChangePwdBtn" class="btn-secondary">↩️ 返回</button>
    </div>
    <div id="changePwdMessage" class="error-message hidden"></div>
    <div class="note">
        ⚠️ 修改密码会生成新的加密盐,安全性更高
    </div>
</div>

<!-- 🗂️ 保险库主界面 - 带自动锁定 -->
<div id="vaultPanel" class="vault-panel hidden">
    <div class="vault-header">
        <div style="display: flex; align-items: center; gap: 16px;">
            <h2>📇 我的密码</h2>
            <span id="autoLockTimer" class="lock-timer">⏱️ 5:00 后自动锁定</span>
        </div>
        <div style="display: flex; gap: 12px;">
            <button id="changePwdFromVaultBtn" class="btn-secondary btn-small">🔐 修改密码</button>
            <button id="lockBtn" class="btn-secondary btn-small">🔒 立即锁定</button>
        </div>
    </div>

    <div id="passwordListContainer" class="passwords-list"></div>

    <div class="add-section">
        <input type="text" id="newService" class="vault-input" placeholder="网站/应用 *">
        <input type="url" id="newUrl" class="vault-input" placeholder="网址 (https://...)">
        <input type="text" id="newUsername" class="vault-input" placeholder="用户名/邮箱 *">
        <input type="password" id="newPassword" class="vault-input" placeholder="密码 *">
        <button id="addPasswordBtn" class="btn" style="padding: 12px 26px;">➕ 添加</button>
    </div>
    
    <div class="footer-buttons">
        <button id="resetStorageBtn" class="btn-secondary btn-small">🔄 重置存储</button>
        <span style="color: #9bc3cd; font-size: 0.8rem;">✅ 剪贴板5秒自动清除 · 无操作5分钟自动锁定</span>
    </div>
</div>

✏️ 编辑密码条目

🌐 网站/应用 *
🔗 网址
👤 用户名 *
🔑 密码 *
💾 保存 取消

相关推荐
前端Hardy5 小时前
别再无脑用 `JSON.parse()` 了!这个安全漏洞你可能每天都在触发
前端·javascript·vue.js
前端Hardy5 小时前
别再让 `console.log` 上线了!它正在悄悄拖垮你的生产系统
前端·javascript·vue.js
Lee川6 小时前
现代Web开发中的CSS继承、Flexbox布局与LocalStorage交互:从文档解析到实践应用
前端·css
csdn飘逸飘逸6 小时前
Autojs基础-用户界面(ui)
javascript
炫饭第一名6 小时前
速通Canvas指北🦮——图形、文本与样式篇
前端·javascript·程序员
进击的尘埃6 小时前
React useEffect 的闭包陷阱与竞态条件:你以为的 cleanup 真的在正确时机执行了吗
javascript
进击的尘埃6 小时前
TypeScript 类型体操进阶:用 Template Literal Types 实现编译期路由参数校验
javascript
滕青山6 小时前
文本字符数统计 在线工具核心JS实现
前端·javascript·vue.js
十二7406 小时前
前端缓存踩坑实录:从版本号管理到自动化构建
前端·javascript·nginx
进击的尘埃6 小时前
前端大文件上传全方案:切片、秒传、断点续传与 Worker 并行 Hash 计算实践
javascript