【密码口令保存小工具】

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

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

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

✏️ 编辑密码条目

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

相关推荐
之歆1 小时前
DAY_18深度解析:数据类型转换与运算符全攻略(上)
前端·javascript
大家的林语冰1 小时前
pnpm 11 发布,弃用 JSON 和 npm CLI,进化为纯 ES6 模块,新增 pnpm pack-app 等命令,供应链保护默认启用,要求 Node
前端·javascript·node.js
Alice-YUE2 小时前
深入解析 JS 事件循环:浏览器与 Node.js 的差异全解析
前端·javascript·笔记·学习
HYCS2 小时前
用pixijs实现fabricjs(二):对象的基础位置信息
前端·javascript·canvas
Alice-YUE2 小时前
【无标题】
开发语言·javascript·ecmascript
Twsit丶2 小时前
ECMAScript 常用特性整理(ES6 — ES13)
javascript
TA远方3 小时前
【JavaScript】Promise对象使用方式研究和理解
javascript·编程·脚本·web·js·promise·委托
ZC跨境爬虫3 小时前
跟着 MDN 学 HTML day_36:(深入理解 Comment 接口与 DOM 注释节点)
前端·javascript·ui·html·音视频·视频编解码
栉甜4 小时前
Js进阶(4)
开发语言·javascript·原型模式
村上小树5 小时前
非常简单地学习一下shareDB的原理
前端·javascript