【密码口令保存小工具】

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

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

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

✏️ 编辑密码条目

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

相关推荐
梦想CAD控件1 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js
月月大王的3D日记1 小时前
Three.js 入门系列(8):六种光源全解析 —— 关灯了,开光!
前端·javascript
自然 醒2 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
其美杰布-富贵-李4 小时前
第 10 篇:灯光与阴影
javascript·three.js
小高0075 小时前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
di24k24k6 小时前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
JKooll6 小时前
WPS 表格 DISPIMG 函数实战:用 JavaScript 将图片真正嵌入单元格
javascript·wps
এ慕ོ冬℘゜7 小时前
纯 CSS 实现自定义 Switch 开关(商品上下架滑块)
前端·css
晴天167 小时前
Rust 快速入门 (从 JavaScript 开发者视角)-Day09
开发语言·javascript·rust
其美杰布-富贵-李7 小时前
第 6 篇:相机与 OrbitControls
前端·javascript·three.js