File size: 7,675 Bytes
133609a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SP Website - 重置密码</title>
<!-- Bootstrap 5.3 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CDN for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center" href="/">
<img src="/static/images/ShareAPI.png" alt="API Router Logo" width="30" height="30" class="d-inline-block align-text-top me-2">
<span class="fw-bold fs-5">API Router</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-comment-dots me-1"></i> 聊天
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-key me-1"></i> 令牌
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-shopping-cart me-1"></i> 充值
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-chart-bar me-1"></i> 总览
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-file-alt me-1"></i> 日志
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-cog me-1"></i> 设置
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center me-3" href="#">
<i class="fas fa-info-circle me-1"></i> 关于
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center me-3" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-font me-1"></i> A|文
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">中文</a></li>
<li><a class="dropdown-item" href="#">English</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center" href="/login">
<i class="fas fa-user me-1"></i> 登录
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="auth-container d-flex justify-content-center align-items-center flex-grow-1">
<div class="login-card p-4">
<div class="text-center mb-4 d-flex align-items-center justify-content-center">
<img src="/static/images/ShareAPI.png" alt="API Router Logo" width="50" height="50" class="me-2">
<h3 class="card-title mb-0">重置密码</h3>
</div>
<form @submit.prevent="resetPasswordWithCode">
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-envelope"></i></span>
<input type="email" class="form-control" id="resetEmail" v-model="resetPasswordForm.email" placeholder="输入邮箱地址" required autocomplete="username">
<button type="button" class="btn btn-outline-secondary" @click="sendResetVerificationCode" :disabled="isSendingCode">{{ isSendingCode ? `${countdown}s` : '获取验证码' }}</button>
</div>
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-shield-alt"></i></span>
<input type="text" class="form-control" id="resetVerificationCode" v-model="resetPasswordForm.verificationCode" placeholder="验证码" required autocomplete="one-time-code">
</div>
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="resetNewPassword" v-model="resetPasswordForm.newPassword" placeholder="新密码" required autocomplete="new-password">
</div>
<div class="mb-3 input-group">
<span class="input-group-text"><i class="fas fa-lock"></i></span>
<input type="password" class="form-control" id="resetConfirmPassword" v-model="resetPasswordForm.confirmPassword" placeholder="确认新密码" required autocomplete="new-password">
</div>
<button type="submit" class="btn btn-primary w-100 mb-3">重置密码</button>
</form>
<p v-if="resetPasswordMessage" class="mt-2 text-info text-center">{{ resetPasswordMessage }}</p>
<p class="text-center text-muted">
已有账号？ <a href="/login" class="text-decoration-none">立即登录</a>
</p>
</div>
</div>
<footer class="footer text-center">
<div class="container">
<p class="text-muted mb-0">© 2024 API Router. All rights reserved.</p>
</div>
</footer>
</div>
<!-- Vue 3 CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<!-- Bootstrap 5.3 JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom Vue.js App Logic -->
<script type="module" src="/static/app.js"></script>
</body>
</html>
|