| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <html lang="zh-CN"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <title></title> |
|---|
| | | <title>设置我的资料</title> |
|---|
| | | <meta name="renderer" content="webkit"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|---|
| | | <link rel="stylesheet" href="../static/layui/css/layui.css" media="all"> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js?v=20260309_i18n_fix1"></script> |
|---|
| | | <link rel="stylesheet" href="../static/vue/element/element.css"> |
|---|
| | | <link rel="stylesheet" href="../static/css/cool.css"> |
|---|
| | | <style> |
|---|
| | | :root { |
|---|
| | | --card-bg: rgba(255, 255, 255, 0.96); |
|---|
| | | --card-border: rgba(216, 226, 238, 0.96); |
|---|
| | | --text-main: #243447; |
|---|
| | | } |
|---|
| | | |
|---|
| | | [v-cloak] { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | html, |
|---|
| | | body { |
|---|
| | | background-color: #fff; |
|---|
| | | margin: 0; |
|---|
| | | min-height: 100%; |
|---|
| | | color: var(--text-main); |
|---|
| | | font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif; |
|---|
| | | background: #f5f7fb; |
|---|
| | | } |
|---|
| | | #container { |
|---|
| | | padding: 15px; |
|---|
| | | margin-top: 15px |
|---|
| | | |
|---|
| | | .page-shell { |
|---|
| | | padding: 14px 16px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | .layui-card-body { |
|---|
| | | padding: 20px 15px 5px 15px; |
|---|
| | | |
|---|
| | | .card-shell { |
|---|
| | | max-width: 860px; |
|---|
| | | margin: 0 auto; |
|---|
| | | border-radius: 16px; |
|---|
| | | border: 1px solid var(--card-border); |
|---|
| | | background: var(--card-bg); |
|---|
| | | box-shadow: 0 8px 20px rgba(44, 67, 96, 0.05); |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | .layui-form-item { |
|---|
| | | margin-bottom: 18px; |
|---|
| | | |
|---|
| | | .card-head { |
|---|
| | | padding: 16px 20px 12px; |
|---|
| | | border-bottom: 1px solid rgba(222, 230, 239, 0.92); |
|---|
| | | background: #f8fbff; |
|---|
| | | } |
|---|
| | | .layui-form-label { |
|---|
| | | color: #999!important;; |
|---|
| | | width: 60px; |
|---|
| | | |
|---|
| | | .card-title { |
|---|
| | | font-size: 16px; |
|---|
| | | font-weight: 700; |
|---|
| | | color: var(--text-main); |
|---|
| | | } |
|---|
| | | .layui-input-block { |
|---|
| | | margin-left: 90px; |
|---|
| | | |
|---|
| | | .card-body { |
|---|
| | | padding: 18px 20px 16px; |
|---|
| | | } |
|---|
| | | #update-password { |
|---|
| | | padding: 0 20px 0 15px; |
|---|
| | | |
|---|
| | | .form-shell { |
|---|
| | | max-width: 740px; |
|---|
| | | margin: 0 auto; |
|---|
| | | } |
|---|
| | | .layui-btn .layui-icon { |
|---|
| | | margin-right: 0; |
|---|
| | | |
|---|
| | | .profile-form .el-form-item { |
|---|
| | | margin-bottom: 14px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profile-form .el-form-item__label { |
|---|
| | | font-weight: 600; |
|---|
| | | color: #5c6f82; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profile-form .el-input__inner, |
|---|
| | | .profile-form .el-button { |
|---|
| | | height: 34px; |
|---|
| | | line-height: 34px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profile-form .el-button { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | padding: 0 16px; |
|---|
| | | vertical-align: middle; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .profile-form .el-button [class^="el-icon-"], |
|---|
| | | .profile-form .el-button [class*=" el-icon-"] { |
|---|
| | | line-height: 1; |
|---|
| | | margin-right: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-row { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-mask { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-row .el-button { |
|---|
| | | min-width: 118px; |
|---|
| | | flex: 0 0 118px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-panel { |
|---|
| | | border: 1px solid rgba(222, 230, 239, 0.92); |
|---|
| | | border-radius: 14px; |
|---|
| | | background: #f8fbff; |
|---|
| | | padding: 14px 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-head { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | gap: 12px; |
|---|
| | | margin-bottom: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-title { |
|---|
| | | font-size: 14px; |
|---|
| | | font-weight: 700; |
|---|
| | | color: #2f4358; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-actions { |
|---|
| | | display: flex; |
|---|
| | | gap: 10px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-meta { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: repeat(3, minmax(0, 1fr)); |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-meta-item { |
|---|
| | | padding: 10px 12px; |
|---|
| | | border-radius: 12px; |
|---|
| | | background: rgba(255, 255, 255, 0.95); |
|---|
| | | border: 1px solid rgba(226, 233, 242, 0.96); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-meta-label { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #7b8b9b; |
|---|
| | | margin-bottom: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-meta-value { |
|---|
| | | font-size: 13px; |
|---|
| | | color: #2f4358; |
|---|
| | | word-break: break-all; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-tip { |
|---|
| | | margin-top: 10px; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.7; |
|---|
| | | color: #7b8b9b; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer-bar { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | padding-top: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer-bar .el-button { |
|---|
| | | min-width: 118px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-dialog .el-dialog { |
|---|
| | | border-radius: 18px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-dialog .el-dialog__header, |
|---|
| | | .mfa-dialog .el-dialog__header { |
|---|
| | | padding: 18px 20px 12px; |
|---|
| | | border-bottom: 1px solid rgba(222, 230, 239, 0.92); |
|---|
| | | background: #f8fbff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-dialog .el-dialog__title, |
|---|
| | | .mfa-dialog .el-dialog__title { |
|---|
| | | font-weight: 700; |
|---|
| | | color: var(--text-main); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-dialog .el-dialog__body, |
|---|
| | | .mfa-dialog .el-dialog__body { |
|---|
| | | padding: 18px 20px 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-form .el-form-item { |
|---|
| | | margin-bottom: 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-form .el-form-item__label { |
|---|
| | | font-weight: 600; |
|---|
| | | color: #5c6f82; |
|---|
| | | white-space: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-form .el-input__inner, |
|---|
| | | .password-form .el-button { |
|---|
| | | height: 34px; |
|---|
| | | line-height: 34px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-form .el-button { |
|---|
| | | display: inline-flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | min-width: 120px; |
|---|
| | | padding: 0 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-footer { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | gap: 12px; |
|---|
| | | padding-top: 4px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-setup { |
|---|
| | | margin-bottom: 16px; |
|---|
| | | padding: 14px; |
|---|
| | | border-radius: 14px; |
|---|
| | | background: rgba(248, 251, 255, 0.92); |
|---|
| | | border: 1px solid rgba(226, 233, 242, 0.96); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-setup-tip { |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1.7; |
|---|
| | | color: #738396; |
|---|
| | | margin-bottom: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-qr-wrap { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | min-height: 220px; |
|---|
| | | margin-bottom: 14px; |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 14px; |
|---|
| | | border: 1px dashed rgba(210, 220, 233, 0.96); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-qr-wrap img { |
|---|
| | | width: 220px; |
|---|
| | | height: 220px; |
|---|
| | | object-fit: contain; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-secret-row { |
|---|
| | | display: flex; |
|---|
| | | gap: 10px; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-secret-row .el-input { |
|---|
| | | flex: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-footer { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | gap: 12px; |
|---|
| | | padding-top: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 768px) { |
|---|
| | | .page-shell { |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .password-row, |
|---|
| | | .mfa-secret-row { |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: stretch; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .form-shell { |
|---|
| | | max-width: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-head { |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: stretch; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mfa-meta { |
|---|
| | | grid-template-columns: 1fr; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body id="body"> |
|---|
| | | <div id="container"> |
|---|
| | | <fieldset class="layui-elem-field"> |
|---|
| | | <legend>设置我的资料</legend> |
|---|
| | | <div class="layui-card-body"> |
|---|
| | | <div id="person-detail" class="layui-form"> |
|---|
| | | <div class="layui-form-item" style="display: none"> |
|---|
| | | <label class="layui-form-label">编号</label> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input id="id" class="layui-input" type="text" placeholder="请输入" autocomplete="off"> |
|---|
| | | <body> |
|---|
| | | <div id="app" class="page-shell" v-cloak> |
|---|
| | | <section class="card-shell"> |
|---|
| | | <div class="card-head"> |
|---|
| | | <div class="card-title">设置我的资料</div> |
|---|
| | | </div> |
|---|
| | | <div class="card-body"> |
|---|
| | | <div class="form-shell"> |
|---|
| | | <input id="id" type="hidden" v-model="form.id"> |
|---|
| | | <el-form |
|---|
| | | ref="profileForm" |
|---|
| | | class="profile-form" |
|---|
| | | :model="form" |
|---|
| | | :rules="rules" |
|---|
| | | label-width="78px" |
|---|
| | | size="small" |
|---|
| | | @submit.native.prevent> |
|---|
| | | <el-row :gutter="16"> |
|---|
| | | <el-col :xs="24" :sm="12"> |
|---|
| | | <el-form-item label="角色"> |
|---|
| | | <el-input id="roleName" v-model="form.roleName" disabled></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24" :sm="12"> |
|---|
| | | <el-form-item label="注册时间"> |
|---|
| | | <el-input v-model="form.createTime$" disabled></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24" :sm="12"> |
|---|
| | | <el-form-item label="名称" prop="username"> |
|---|
| | | <el-input id="username" v-model.trim="form.username" maxlength="50" clearable placeholder="请输入"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24" :sm="12"> |
|---|
| | | <el-form-item label="账号" prop="mobile"> |
|---|
| | | <el-input id="mobile" v-model.trim="form.mobile" maxlength="50" clearable placeholder="请输入"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24"> |
|---|
| | | <el-form-item label="密码"> |
|---|
| | | <div class="password-row"> |
|---|
| | | <el-input class="password-mask" value="已设置密码" disabled></el-input> |
|---|
| | | <el-button type="primary" plain icon="el-icon-lock" @click="openPasswordDialog">修改密码</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24"> |
|---|
| | | <el-form-item label="MFA"> |
|---|
| | | <div class="mfa-panel"> |
|---|
| | | <div class="mfa-head"> |
|---|
| | | <div class="mfa-title">多因子登录验证</div> |
|---|
| | | <div class="mfa-actions"> |
|---|
| | | <el-button |
|---|
| | | v-if="Number(form.mfaAllow) === 1 && Number(form.mfaEnabled) !== 1" |
|---|
| | | type="primary" |
|---|
| | | plain |
|---|
| | | icon="el-icon-key" |
|---|
| | | @click="openMfaEnableDialog">启用 MFA</el-button> |
|---|
| | | <el-button |
|---|
| | | v-if="Number(form.mfaEnabled) === 1" |
|---|
| | | type="danger" |
|---|
| | | plain |
|---|
| | | icon="el-icon-switch-button" |
|---|
| | | @click="openMfaDisableDialog">停用 MFA</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-meta"> |
|---|
| | | <div class="mfa-meta-item"> |
|---|
| | | <div class="mfa-meta-label">账号授权</div> |
|---|
| | | <div class="mfa-meta-value">{{ form.mfaAllow$ || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-meta-item"> |
|---|
| | | <div class="mfa-meta-label">启用状态</div> |
|---|
| | | <div class="mfa-meta-value">{{ form.mfaEnabled$ || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-meta-item"> |
|---|
| | | <div class="mfa-meta-label">绑定时间</div> |
|---|
| | | <div class="mfa-meta-value">{{ form.mfaBoundTime$ || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-tip"> |
|---|
| | | <span v-if="Number(form.mfaAllow) !== 1">当前账号未开通 MFA 使用权限，请联系管理员授权。</span> |
|---|
| | | <span v-else-if="Number(form.mfaEnabled) === 1">已绑定密钥：{{ form.mfaMaskedSecret || '--' }}。登录时需要再输入一次动态验证码。</span> |
|---|
| | | <span v-else>当前账号已允许使用 MFA，启用后登录会增加一次 6 位动态验证码校验。</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :xs="24"> |
|---|
| | | <el-form-item label="通行密钥"> |
|---|
| | | <div class="mfa-panel"> |
|---|
| | | <div class="mfa-head"> |
|---|
| | | <div class="mfa-title">设备生物识别 / 安全密钥登录</div> |
|---|
| | | <div class="mfa-actions"> |
|---|
| | | <el-button |
|---|
| | | v-if="!form.passkeyBound" |
|---|
| | | type="primary" |
|---|
| | | plain |
|---|
| | | icon="el-icon-key" |
|---|
| | | @click="openPasskeyRegisterDialog">绑定通行密钥</el-button> |
|---|
| | | <el-button |
|---|
| | | v-else |
|---|
| | | type="danger" |
|---|
| | | plain |
|---|
| | | icon="el-icon-delete" |
|---|
| | | @click="openPasskeyRemoveDialog">解绑通行密钥</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-meta"> |
|---|
| | | <div class="mfa-meta-item"> |
|---|
| | | <div class="mfa-meta-label">绑定状态</div> |
|---|
| | | <div class="mfa-meta-value">{{ form.passkeyBound ? '已绑定' : '未绑定' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-meta-item"> |
|---|
| | | <div class="mfa-meta-label">显示名称</div> |
|---|
| | | <div class="mfa-meta-value">{{ form.passkeyName || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-meta-item"> |
|---|
| | | <div class="mfa-meta-label">绑定时间</div> |
|---|
| | | <div class="mfa-meta-value">{{ form.passkeyBoundTime$ || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-tip"> |
|---|
| | | <span v-if="form.passkeyBound">最近使用：{{ form.passkeyLastUsedTime$ || '--' }}</span> |
|---|
| | | <span v-else>绑定后可直接使用设备指纹、人脸或安全密钥登录。该能力要求浏览器支持通行密钥，且系统以 HTTPS 或 localhost 打开。</span> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | <div class="footer-bar"> |
|---|
| | | <el-button type="primary" :loading="saving" @click="handleSave">确认修改</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-form-label">角色</label> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input id="roleName" class="layui-input" type="text" placeholder="请输入" autocomplete="off" disabled="disabled"> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-form-label">名称</label> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input id="username" class="layui-input" type="text" placeholder="请输入" autocomplete="off"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-form-label">账号</label> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input id="mobile" class="layui-input" type="text" placeholder="请输入" autocomplete="off"> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-mid layui-word-aux">重要！一般用于后台登入</div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-form-label">密码</label> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input id="password" class="layui-input" type="text" placeholder="请输入" autocomplete="off" style="display: none"> |
|---|
| | | <button id="update-password" class="layui-btn layui-btn-primary"> |
|---|
| | | <i class="layui-icon"></i> |
|---|
| | | 修改密码 |
|---|
| | | </button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <label class="layui-form-label">注册时间</label> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input id="createTime$" class="layui-input" type="text" placeholder="请输入" autocomplete="off" disabled="disabled"> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-mid layui-word-aux">不可修改</div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-form-item"> |
|---|
| | | <div class="layui-input-block"> |
|---|
| | | <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="save">确认修改</button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </fieldset> |
|---|
| | | </section> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="password-dialog" |
|---|
| | | title="修改密码" |
|---|
| | | :visible.sync="passwordDialogVisible" |
|---|
| | | width="420px" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | append-to-body> |
|---|
| | | <el-form |
|---|
| | | ref="passwordForm" |
|---|
| | | class="password-form" |
|---|
| | | :model="passwordForm" |
|---|
| | | :rules="passwordRules" |
|---|
| | | label-width="112px" |
|---|
| | | size="small" |
|---|
| | | @submit.native.prevent> |
|---|
| | | <el-form-item label="当前密码" prop="oldPassword"> |
|---|
| | | <el-input v-model="passwordForm.oldPassword" type="password" show-password autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="新密码" prop="password"> |
|---|
| | | <el-input v-model="passwordForm.password" type="password" show-password autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="确认新密码" prop="rePassword"> |
|---|
| | | <el-input v-model="passwordForm.rePassword" type="password" show-password autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <div class="password-footer"> |
|---|
| | | <el-button @click="closePasswordDialog">关闭</el-button> |
|---|
| | | <el-button type="primary" :loading="passwordSaving" @click="handlePasswordSave">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="mfa-dialog" |
|---|
| | | :title="mfaDialogMode === 'enable' ? '启用 MFA' : '停用 MFA'" |
|---|
| | | :visible.sync="mfaDialogVisible" |
|---|
| | | width="520px" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | @close="closeMfaDialog" |
|---|
| | | append-to-body> |
|---|
| | | <div v-if="mfaDialogMode === 'enable'" class="mfa-setup"> |
|---|
| | | <div class="mfa-setup-tip">请先使用 Google Authenticator、Microsoft Authenticator 等身份验证器扫描二维码，再输入当前密码和 6 位动态码完成绑定。</div> |
|---|
| | | <div class="mfa-qr-wrap" v-loading="mfaSetupLoading"> |
|---|
| | | <img v-if="mfaSetup.qrCode" :src="mfaSetup.qrCode" alt="MFA QR Code"> |
|---|
| | | <span v-else>二维码生成中...</span> |
|---|
| | | </div> |
|---|
| | | <div class="mfa-secret-row"> |
|---|
| | | <el-input :value="mfaSetup.secret" readonly placeholder="MFA密钥"></el-input> |
|---|
| | | <el-button plain @click="copySecret">复制密钥</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div v-else class="mfa-setup"> |
|---|
| | | <div class="mfa-setup-tip">停用 MFA 前，请输入当前密码和身份验证器中的 6 位动态码进行确认。</div> |
|---|
| | | </div> |
|---|
| | | <el-form |
|---|
| | | ref="mfaForm" |
|---|
| | | class="password-form" |
|---|
| | | :model="mfaForm" |
|---|
| | | :rules="mfaRules" |
|---|
| | | label-width="112px" |
|---|
| | | size="small" |
|---|
| | | @submit.native.prevent> |
|---|
| | | <el-form-item label="当前密码" prop="currentPassword"> |
|---|
| | | <el-input v-model="mfaForm.currentPassword" type="password" show-password autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="动态验证码" prop="code"> |
|---|
| | | <el-input v-model.trim="mfaForm.code" maxlength="6" autocomplete="off" placeholder="请输入6位验证码"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <div class="mfa-footer"> |
|---|
| | | <el-button @click="closeMfaDialog">关闭</el-button> |
|---|
| | | <el-button type="primary" :loading="mfaSubmitting" @click="handleMfaSubmit">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="mfa-dialog" |
|---|
| | | :title="passkeyDialogMode === 'register' ? '绑定通行密钥' : '解绑通行密钥'" |
|---|
| | | :visible.sync="passkeyDialogVisible" |
|---|
| | | width="520px" |
|---|
| | | :close-on-click-modal="false" |
|---|
| | | @close="closePasskeyDialog" |
|---|
| | | append-to-body> |
|---|
| | | <div class="mfa-setup"> |
|---|
| | | <div v-if="passkeyDialogMode === 'register'" class="mfa-setup-tip">绑定时会弹出系统级身份验证窗口，请使用当前设备的人脸、指纹、PIN 或安全密钥完成确认。若浏览器或环境不支持，无法启用该能力。</div> |
|---|
| | | <div v-else class="mfa-setup-tip">解绑前请输入当前密码确认。解绑后将不能再用当前通行密钥直接登录。</div> |
|---|
| | | </div> |
|---|
| | | <el-form |
|---|
| | | ref="passkeyForm" |
|---|
| | | class="password-form" |
|---|
| | | :model="passkeyForm" |
|---|
| | | :rules="passkeyRules" |
|---|
| | | label-width="112px" |
|---|
| | | size="small" |
|---|
| | | @submit.native.prevent> |
|---|
| | | <el-form-item v-if="passkeyDialogMode === 'register'" label="显示名称" prop="name"> |
|---|
| | | <el-input v-model.trim="passkeyForm.name" maxlength="100" autocomplete="off" placeholder="例如：办公室电脑"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <el-form-item label="当前密码" prop="currentPassword"> |
|---|
| | | <el-input v-model="passkeyForm.currentPassword" type="password" show-password autocomplete="off"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | <div class="mfa-footer"> |
|---|
| | | <el-button @click="closePasskeyDialog">关闭</el-button> |
|---|
| | | <el-button type="primary" :loading="passkeySubmitting" @click="handlePasskeySubmit">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-form> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script src="../static/layui/layui.js"></script> |
|---|
| | | <script> |
|---|
| | | layui.use(['form'], function(){ |
|---|
| | | var form = layui.form, |
|---|
| | | layer = layui.layer, |
|---|
| | | $ = layui.jquery; |
|---|
| | | |
|---|
| | | // 初始化表单数据 |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+"/user/detail/auth", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | var user = res.data; |
|---|
| | | for (var val in user) { |
|---|
| | | $('#person-detail').find(":input[id='" + val + "']").val(user[val]); |
|---|
| | | } |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | top.location.href = baseUrl+"/"; |
|---|
| | | } else { |
|---|
| | | layer.msg(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 修改密码 |
|---|
| | | $(document).on('click','#update-password', function () { |
|---|
| | | layer.open({ |
|---|
| | | type: 2, |
|---|
| | | title: '修改密码', |
|---|
| | | maxmin: true, |
|---|
| | | area: ['350px', '310px'], |
|---|
| | | shadeClose: false, |
|---|
| | | content: 'password.html', |
|---|
| | | success: function(layero, index){ |
|---|
| | | layer.iframeAuto(index); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }); |
|---|
| | | |
|---|
| | | |
|---|
| | | // 保存修改 |
|---|
| | | form.on('submit(save)', function (data) { |
|---|
| | | var user = { |
|---|
| | | id: $('#id').val(), |
|---|
| | | username: $('#username').val(), |
|---|
| | | mobile: $("#mobile").val(), |
|---|
| | | }; |
|---|
| | | layer.confirm('确定修改资料吗？', function(){ |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl+"/user/update/auth", |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | data: user, |
|---|
| | | method: 'POST', |
|---|
| | | success: function (res) { |
|---|
| | | if (res.code === 200){ |
|---|
| | | layer.msg(res.msg); |
|---|
| | | localStorage.setItem("username", user.username); |
|---|
| | | parent.$('#person-username').text(localStorage.getItem('username')); |
|---|
| | | } else if (res.code === 403){ |
|---|
| | | top.location.href = baseUrl+"/"; |
|---|
| | | } else { |
|---|
| | | layer.msg(res.msg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | return false; |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
| | | <script type="text/javascript" src="../static/js/tools/md5.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/webauthn-utils.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/vue/js/vue.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/vue/element/element.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/detail/detail.js?v=20260311_detail_passkey"></script> |
|---|
| | | </html> |
|---|
