feat: 忘记密码升级为智能分流向导并部署IP/账号双层防扫防轰炸限流保护
This commit is contained in:
@@ -182,6 +182,101 @@
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ── 智能引导 Tab 及微信向导样式 ── */
|
||||
.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2px;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(255, 248, 236, 0.02);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
height: 46px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-soft);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
color: var(--gold);
|
||||
background: rgba(198, 163, 91, 0.08);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.wechat-guide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.guide-step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: rgba(255, 248, 236, 0.02);
|
||||
border: 1px solid rgba(198, 163, 91, 0.08);
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: var(--gold);
|
||||
color: var(--bg);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 900;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 10px rgba(198, 163, 91, 0.2);
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
.step-desc strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cmd-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.wechat-tip {
|
||||
border-left: 3px solid var(--gold);
|
||||
background: rgba(198, 163, 91, 0.03);
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-soft);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.content {
|
||||
padding: 22px 18px 18px;
|
||||
@@ -198,41 +293,102 @@
|
||||
<main class="card">
|
||||
<section class="content">
|
||||
<div class="eyebrow">PASSWORD RECOVERY</div>
|
||||
<h1>邮箱找回密码</h1>
|
||||
<p class="lead">请输入账号已绑定的邮箱地址。系统会把重置密码链接发送到邮箱,您再进入独立页面设置新密码。</p>
|
||||
<h1 id="recovery-title">忘记密码</h1>
|
||||
|
||||
<div id="alert-box" class="alert" aria-live="polite"></div>
|
||||
|
||||
<form id="password-recovery-form" data-password-email-url="{{ route('password.email') }}">
|
||||
<label for="email">绑定邮箱</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
maxlength="255"
|
||||
placeholder="请输入账号绑定的邮箱地址"
|
||||
autocomplete="email"
|
||||
{{ $smtpEnabled ? '' : 'disabled' }}
|
||||
required
|
||||
>
|
||||
<div class="tip">仅支持已绑定唯一邮箱的账号自助找回。重置链接默认 60 分钟内有效。</div>
|
||||
<!-- ================== 步骤一:检测账号昵称 ================== -->
|
||||
<div id="step-detect" class="step-panel">
|
||||
<p class="lead">请输入您的聊天室用户昵称,小助手将智能查询并为您提供最安全的重置方案。</p>
|
||||
<form id="account-detect-form" action="{{ route('password.check_account') }}">
|
||||
<label for="username">账号昵称</label>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
maxlength="100"
|
||||
placeholder="请输入您的聊天室账号昵称"
|
||||
required
|
||||
>
|
||||
<div class="actions">
|
||||
<button id="detect-btn" type="submit">下一步 (检测账号)</button>
|
||||
<a class="ghost-link" href="{{ route('home') }}">返回首页</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button id="submit-btn" type="submit" {{ $smtpEnabled ? '' : 'disabled' }}>发送重置邮件</button>
|
||||
<!-- ================== 步骤二:智能找回分流面板 ================== -->
|
||||
<div id="step-result" class="step-panel" style="display: none;">
|
||||
<!-- 渠道切换 Tab(仅在双绑定时可见) -->
|
||||
<div id="channel-tabs" class="tabs" style="display: none;">
|
||||
<button type="button" class="tab-btn active" data-target="panel-wechat">💬 微信找回 (推荐)</button>
|
||||
<button type="button" class="tab-btn" data-target="panel-email">📧 邮箱找回</button>
|
||||
</div>
|
||||
|
||||
<!-- 结果提示横幅 -->
|
||||
<p id="detect-summary" class="lead" style="margin-bottom: 15px; font-weight: 500;"></p>
|
||||
|
||||
<!-- 模块一:微信私聊重置指引 -->
|
||||
<div id="panel-wechat" class="channel-pane" style="display: none;">
|
||||
<div class="wechat-guide">
|
||||
<div class="guide-step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-desc">打开微信,进入与微信助手 <strong>【小小】</strong> 的私发消息窗口。</div>
|
||||
</div>
|
||||
<div class="guide-step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-desc">在对话框中直接输入并发送重置口令:<span class="cmd-badge">重置密码</span></div>
|
||||
</div>
|
||||
<div class="guide-step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-desc">微信小助手将即时为您自动生成 <strong>8位随机新密码</strong> 并直接通过微信回复您!</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wechat-tip">
|
||||
⚠️ <strong>安全提示:</strong> 该操作直接经由微信私聊分发,密码不泄露在大厅公屏,请放心使用。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块二:邮箱重置发送表单 -->
|
||||
<div id="panel-email" class="channel-pane" style="display: none;">
|
||||
<form id="password-recovery-form" data-password-email-url="{{ route('password.email') }}">
|
||||
<label for="email">已绑定邮箱</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
maxlength="255"
|
||||
placeholder="账号绑定的邮箱地址"
|
||||
autocomplete="email"
|
||||
readonly
|
||||
required
|
||||
>
|
||||
<div class="tip" style="margin-bottom: 15px;">出于安全目的,此邮箱仅作脱敏验证。系统将向该邮箱投递密码重置链接。</div>
|
||||
|
||||
<button id="submit-btn" type="submit" style="width: 100%;" {{ $smtpEnabled ? '' : 'disabled' }}>发送重置邮件</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- 模块三:均未绑定提示(无法自助找回) -->
|
||||
<div id="panel-none" class="channel-pane" style="display: none;">
|
||||
<div class="wechat-tip" style="border-color: var(--danger); background: rgba(143, 46, 39, 0.08); color: #f5cbc7;">
|
||||
❌ <strong>无法自助找回:</strong><br>
|
||||
由于您的账号既未绑定邮箱,也未绑定微信,系统无法验证您的持有权。请联系站长或管理员进行人工核验申诉重置。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部返回与重试操作 -->
|
||||
<div class="actions" style="margin-top: 20px;">
|
||||
<button id="back-detect-btn" type="button" class="ghost-link" style="color: var(--gold); border-color: rgba(198,163,91,0.4);">返回重新检测</button>
|
||||
<a class="ghost-link" href="{{ route('home') }}">返回首页</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
@if ($smtpEnabled)
|
||||
找回成功后,请回到首页使用原昵称和新密码登录聊天室。
|
||||
@else
|
||||
当前系统尚未开启邮箱发信服务,暂时无法通过邮箱找回密码。
|
||||
@endif
|
||||
<div class="footer" id="forgot-footer">
|
||||
找回密码成功后,请使用账号昵称和新重置的密码登录聊天室。
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user