【密码口令保存小工具】

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

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

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

✏️ 编辑密码条目

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

相关推荐
Hello--_--World3 小时前
Js 隐式类型转换、JavaScript `==` vs `===` 深度对比表
开发语言·javascript·ecmascript
凌冰_3 小时前
Thymeleaf 核心语法详解
java·前端·javascript
SuperEugene3 小时前
Vue3 配置文件管理:按模块拆分配置,提升配置可维护性|配置驱动开发实战篇
前端·javascript·vue.js·驱动开发
阿凤213 小时前
后端返回文件二进制流
开发语言·前端·javascript·uniapp
悟空瞎说4 小时前
从isMounted到跨页面状态:高级前端如何优雅解决订单场景的“幽灵陷阱”(附React/Vue完整代码)
前端·javascript
sheeta19984 小时前
TypeScript references 配置与 emit 要求详解
javascript·ubuntu·typescript
神の愛4 小时前
js的深拷贝和浅拷贝?啥情况讲解下??底层堆栈空间??object.prototype.toString.call(),还有bind,的具体使用?
前端·javascript·原型模式
1314lay_10074 小时前
el-table表格数据分页切片,导致表格的多选失效
javascript·vue.js·elementui
qq_12084093714 小时前
Three.js 模型加载稳定性实战:从资源失败到可用发布的工程化方案
前端·javascript·vue.js·vue3·three.js
阿正的梦工坊4 小时前
JavaScript 闭包:从入门到精通
开发语言·javascript·ecmascript