219 lines
6.6 KiB
PHP
219 lines
6.6 KiB
PHP
|
{{--
|
||
|
|
文件功能：前台独立重置密码页面
|
||
|
|
说明：承接邮箱中的重置链接，完成新密码设置并跳回首页登录
|
||
|
|
--}}
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<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">
|
||
|
|
<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;
|
||
|
|
--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(560px, 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 18px;
|
||
|
|
color: var(--text-soft);
|
||
|
|
line-height: 1.75;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
padding: 10px 12px;
|
||
|
|
border-left: 4px solid var(--danger);
|
||
|
|
background: rgba(143, 46, 39, 0.08);
|
||
|
|
color: #f5cbc7;
|
||
|
|
line-height: 1.7;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.field {
|
||
|
|
margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
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: -4px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: var(--text-soft);
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.actions {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: minmax(0, 1fr) 120px;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ghost-link {
|
||
|
|
border-color: var(--border);
|
||
|
|
color: var(--text);
|
||
|
|
background: var(--panel-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">RESET PASSWORD</div>
|
||
|
|
<h1>重新设置登录密码</h1>
|
||
|
|
<p class="lead">请确认邮箱并输入两次新密码。设置成功后，回到首页继续使用原昵称登录聊天室。</p>
|
||
|
|
|
||
|
|
@if ($errors->any())
|
||
|
|
<div class="alert" aria-live="polite">
|
||
|
|
{{ $errors->first('email') ?? $errors->first() }}
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
|
||
|
|
<form method="POST" action="{{ route('password.update') }}">
|
||
|
|
@csrf
|
||
|
|
<input type="hidden" name="token" value="{{ old('token', $token) }}">
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label for="email">绑定邮箱</label>
|
||
|
|
<input id="email" name="email" type="email" maxlength="255" value="{{ old('email', $email) }}" autocomplete="email" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label for="password">新密码</label>
|
||
|
|
<input id="password" name="password" type="password" minlength="6" autocomplete="new-password" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label for="password_confirmation">确认新密码</label>
|
||
|
|
<input id="password_confirmation" name="password_confirmation" type="password" minlength="6" autocomplete="new-password" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tip">为了兼容当前站内密码规则，新密码至少需要 6 位。重置完成后，旧密码立即失效。</div>
|
||
|
|
|
||
|
|
<div class="actions">
|
||
|
|
<button type="submit">确认重置</button>
|
||
|
|
<a class="ghost-link" href="{{ route('home') }}">返回首页</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|