【密码口令保存小工具】

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

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

验证主密码以进入 · 自动锁定保护
🔑 主密码
🔓 解锁保险库
🔐 修改主密码 🔒 自动锁定: 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>

✏️ 编辑密码条目

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

相关推荐
kilito_011 小时前
js实现 移动动画 封装
javascript
_OP_CHEN2 小时前
【前端开发之JavaScript】(二)JS基础语法上篇:吃透变量 / 类型 / 输入输出
开发语言·javascript·html·ecmascript·前端开发·网页开发
70asunflower2 小时前
TypeScript / JavaScript / Node.js:现代工程化语言体系全景解析
javascript·typescript·node.js
Dragon Wu2 小时前
Zod 常用案例总结
前端·javascript·typescript
寒寒_3 小时前
使用Vue与Fabric.js创建图片标注工具
javascript·vue.js·fabric
萧曵 丶10 小时前
Vue 中父子组件之间最常用的业务交互场景
javascript·vue.js·交互
银烛木10 小时前
黑马程序员前端h5+css3
前端·css·css3
m0_6070766010 小时前
CSS3 转换,快手前端面试经验,隔壁都馋哭了
前端·面试·css3
听海边涛声10 小时前
CSS3 图片模糊处理
前端·css·css3