pllx
397 lines
14 KiB
PHP
397 lines
14 KiB
PHP
{{--
|
|
文件功能：前台独立邮箱找回密码页面
|
|
说明：提供邮箱输入、发送重置链接与返回首页入口，不使用弹窗
|
|
--}}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>{{ $systemName }} - 邮箱找回密码</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@700;900&display=swap" rel="stylesheet">
|
|
@vite('resources/js/password-forgot.js')
|
|
<style>
|
|
:root {
|
|
--bg: #0c0d0c;
|
|
--panel: rgba(20, 17, 14, 0.94);
|
|
--panel-soft: rgba(255, 248, 236, 0.05);
|
|
--text: #f4ebdc;
|
|
--text-soft: rgba(244, 235, 220, 0.7);
|
|
--border: rgba(198, 163, 91, 0.24);
|
|
--red: #7d231c;
|
|
--red-deep: #57140f;
|
|
--gold: #c6a35b;
|
|
--success: #34553e;
|
|
--danger: #8f2e27;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 18px;
|
|
background:
|
|
radial-gradient(circle at 10% 16%, rgba(198, 163, 91, 0.12), transparent 24%),
|
|
radial-gradient(circle at 90% 86%, rgba(125, 35, 28, 0.15), transparent 22%),
|
|
linear-gradient(145deg, #090b09, #161915 46%, #0c0d0c 100%);
|
|
color: var(--text);
|
|
font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
|
}
|
|
|
|
.card {
|
|
width: min(540px, 100%);
|
|
border: 1px solid rgba(198, 163, 91, 0.28);
|
|
background: var(--panel);
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 0 auto;
|
|
height: 6px;
|
|
background: linear-gradient(90deg, var(--red-deep), var(--gold), #55604c);
|
|
}
|
|
|
|
.content {
|
|
padding: 28px 24px 22px;
|
|
}
|
|
|
|
.eyebrow {
|
|
font-size: 12px;
|
|
letter-spacing: 0.18em;
|
|
color: rgba(198, 163, 91, 0.8);
|
|
}
|
|
|
|
h1 {
|
|
margin: 10px 0 8px;
|
|
font-family: "Noto Serif SC", serif;
|
|
font-size: clamp(30px, 5vw, 40px);
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.lead {
|
|
margin: 0 0 20px;
|
|
color: var(--text-soft);
|
|
line-height: 1.75;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.alert {
|
|
display: none;
|
|
margin-bottom: 16px;
|
|
padding: 10px 12px;
|
|
border-left: 4px solid transparent;
|
|
line-height: 1.7;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.alert-error {
|
|
background: rgba(143, 46, 39, 0.08);
|
|
border-color: var(--danger);
|
|
color: #f5cbc7;
|
|
}
|
|
|
|
.alert-success {
|
|
background: rgba(52, 85, 62, 0.12);
|
|
border-color: var(--success);
|
|
color: #d8f0df;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-soft);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
border-color: rgba(198, 163, 91, 0.56);
|
|
box-shadow: 0 0 0 3px rgba(198, 163, 91, 0.08);
|
|
}
|
|
|
|
.tip {
|
|
margin-top: 10px;
|
|
color: var(--text-soft);
|
|
font-size: 12px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.actions {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 120px;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
button,
|
|
.ghost-link {
|
|
height: 50px;
|
|
border: 1px solid transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button {
|
|
background: linear-gradient(90deg, var(--red-deep), var(--red), #8d342d);
|
|
color: #f6eddc;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ghost-link {
|
|
border-color: var(--border);
|
|
color: var(--text);
|
|
background: var(--panel-soft);
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 18px;
|
|
color: rgba(244, 235, 220, 0.6);
|
|
font-size: 12px;
|
|
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;
|
|
}
|
|
|
|
.actions {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main class="card">
|
|
<section class="content">
|
|
<div class="eyebrow">PASSWORD RECOVERY</div>
|
|
<h1 id="recovery-title">忘记密码</h1>
|
|
|
|
<!-- ================== 步骤一：检测账号昵称 ================== -->
|
|
<div id="step-detect" class="step-panel">
|
|
<p class="lead">请输入您的聊天室用户昵称，小助手将智能查询并为您提供最安全的重置方案。</p>
|
|
<form id="account-detect-form" action="{{ route('password.check_account') }}">
|
|
<div id="alert-detect" class="alert" aria-live="polite"></div>
|
|
<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 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;">
|
|
<!-- 脱敏提示标签 -->
|
|
<div id="masked-email-hint" style="margin-bottom: 14px; font-size: 13.5px; color: var(--gold); font-weight: bold; line-height: 1.6; padding: 10px; border: 1px dashed rgba(198,163,91,0.3); background: rgba(198,163,91,0.02);"></div>
|
|
|
|
<form id="password-recovery-form" data-password-email-url="{{ route('password.email') }}">
|
|
<div id="alert-email" class="alert" aria-live="polite"></div>
|
|
<label for="email">二次安全确认：请输入绑定的完整邮箱</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
maxlength="255"
|
|
placeholder="请输入绑定的完整邮箱地址以进行二次确认"
|
|
autocomplete="off"
|
|
required
|
|
>
|
|
<div class="tip" style="margin-top: 10px; 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>
|
|
</div>
|
|
|
|
<div class="footer" id="forgot-footer">
|
|
找回密码成功后，请使用账号昵称和新重置的密码登录聊天室。
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|