641 lines
19 KiB
PHP
641 lines
19 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>奶酪云聊天室 - 登录</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
|
||
<style>
|
||
:root {
|
||
--bg-dark: #121212;
|
||
--bg-darker: #0a0a0a;
|
||
--bg-light: #1e1e1e;
|
||
--accent: #6a55fa;
|
||
--accent-hover: #7d6dfa;
|
||
--text-primary: #f0f0f0;
|
||
--text-secondary: #a0a0a0;
|
||
--success: #4ade80;
|
||
--warning: #fbbf24;
|
||
--error: #f87171;
|
||
--border: #2d2d2d;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||
color: var(--text-primary);
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.auth-container {
|
||
display: flex;
|
||
width: 100%;
|
||
max-width: 900px;
|
||
min-height: 500px;
|
||
background: rgba(30, 30, 46, 0.9);
|
||
border-radius: 16px;
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.welcome-panel {
|
||
flex: 1;
|
||
background: linear-gradient(120deg, #6a55fa, #9d88ff);
|
||
padding: 40px;
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.welcome-panel::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 200%;
|
||
height: 200%;
|
||
top: -50%;
|
||
left: -50%;
|
||
background: radial-gradient(rgba(255,255,255,0.1) 10%, transparent 70%);
|
||
transform: rotate(30deg);
|
||
}
|
||
|
||
.welcome-panel h1 {
|
||
font-size: 2.2rem;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.welcome-panel p {
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.features {
|
||
margin-top: 30px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.feature {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 38px;
|
||
height: 38px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.feature-text {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.auth-form-container {
|
||
flex: 1;
|
||
padding: 30px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.8rem;
|
||
font-weight: bold;
|
||
margin-bottom: 25px;
|
||
background: linear-gradient(90deg, var(--accent), #9d88ff);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
text-align: center;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
position: relative;
|
||
color: var(--text-secondary);
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.tab.active {
|
||
color: var(--accent);
|
||
}
|
||
|
||
.tab.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: var(--accent);
|
||
border-radius: 3px 3px 0 0;
|
||
}
|
||
|
||
.auth-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-size: 0.95rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-primary);
|
||
font-size: 0.95rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
input:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 3px rgba(106, 85, 250, 0.2);
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
border-radius: 8px;
|
||
background: var(--accent);
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 1rem;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.btn:hover {
|
||
background: var(--accent-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.divider {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.divider-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.divider-text {
|
||
padding: 0 12px;
|
||
color: var(--text-secondary);
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.alternative-login {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.alt-btn {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, 0.07);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.alt-btn:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.register-text {
|
||
margin-top: 15px;
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.register-link {
|
||
color: var(--accent);
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.register-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.error-message {
|
||
margin-top: 6px;
|
||
color: var(--error);
|
||
font-size: 0.85rem;
|
||
min-height: 18px;
|
||
}
|
||
|
||
.status-message {
|
||
position: absolute;
|
||
top: 15px;
|
||
right: 15px;
|
||
background: var(--bg-light);
|
||
padding: 10px 15px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
transition: all 0.3s;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.status-message.show {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.status-success {
|
||
border-left: 3px solid var(--success);
|
||
}
|
||
|
||
.status-error {
|
||
border-left: 3px solid var(--error);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.auth-container {
|
||
width: 95%;
|
||
max-width: 500px;
|
||
flex-direction: column;
|
||
min-height: auto;
|
||
}
|
||
|
||
.welcome-panel {
|
||
padding: 30px;
|
||
display: block;
|
||
}
|
||
|
||
.feature {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 34px;
|
||
height: 34px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.auth-container {
|
||
width: 100%;
|
||
min-height: auto;
|
||
}
|
||
|
||
.auth-form-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.tabs {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 8px 16px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.welcome-panel {
|
||
display: none;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.6rem;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.alternative-login {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="auth-container">
|
||
<div class="welcome-panel">
|
||
<h1>欢迎来到奶酪云聊天室</h1>
|
||
<p>安全通讯 · 暗色主题 · 极致体验</p>
|
||
|
||
<div class="features">
|
||
<div class="feature">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-lock"></i>
|
||
</div>
|
||
<div class="feature-text">端到端加密保障您的聊天安全</div>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-comments"></i>
|
||
</div>
|
||
<div class="feature-text">实时通讯，消息毫秒级送达</div>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">
|
||
<i class="fas fa-bolt"></i>
|
||
</div>
|
||
<div class="feature-text">高性能服务，流畅聊天体验</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="auth-form-container">
|
||
<div class="logo">奶酪云</div>
|
||
|
||
<div class="tabs">
|
||
<div class="tab active" id="login-tab">账号登录</div>
|
||
<div class="tab" id="register-tab">注册账号</div>
|
||
</div>
|
||
|
||
<form id="login-form" class="auth-form">
|
||
<div class="form-group">
|
||
<label for="login-username">用户名</label>
|
||
<input type="text" id="login-username" placeholder="请输入用户名" required>
|
||
<div class="error-message" id="login-username-error"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="login-password">密码</label>
|
||
<input type="password" id="login-password" placeholder="请输入密码" required>
|
||
<div class="error-message" id="login-password-error"></div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn">登录聊天室</button>
|
||
|
||
<div class="divider">
|
||
<div class="divider-line"></div>
|
||
<div class="divider-text">或使用其他方式</div>
|
||
<div class="divider-line"></div>
|
||
</div>
|
||
|
||
<div class="alternative-login">
|
||
<div class="alt-btn">
|
||
<i class="fab fa-google"></i>
|
||
<span>Google</span>
|
||
</div>
|
||
<div class="alt-btn">
|
||
<i class="fab fa-github"></i>
|
||
<span>GitHub</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="register-text">
|
||
没有账号？<span class="register-link" id="to-register">立即注册</span>
|
||
</div>
|
||
</form>
|
||
|
||
<form id="register-form" class="auth-form" style="display: none;">
|
||
<div class="form-group">
|
||
<label for="register-nickname">昵称</label>
|
||
<input type="text" id="register-nickname" placeholder="设置用户名" required>
|
||
<div class="error-message" id="register-nickname-error"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="register-username">用户名</label>
|
||
<input type="text" id="register-username" placeholder="设置用户名" required>
|
||
<div class="error-message" id="register-username-error"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="register-password">密码</label>
|
||
<input type="password" id="register-password" placeholder="设置密码（至少6位）" required>
|
||
<div class="error-message" id="register-password-error"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="confirm-password">确认密码</label>
|
||
<input type="password" id="confirm-password" placeholder="再次输入密码" required>
|
||
<div class="error-message" id="confirm-password-error"></div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn">注册并登录</button>
|
||
|
||
<div class="register-text">
|
||
已有账号？<span class="register-link" id="to-login">立即登录</span>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="status-message" id="status-message"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 使用localStorage模拟用户数据库
|
||
if (!localStorage.getItem('users')) {
|
||
// 初始化一些示例用户
|
||
localStorage.setItem('users', JSON.stringify([
|
||
{ username: "user1", password: "password123" },
|
||
{ username: "user2", password: "password123" },
|
||
{ username: "admin", password: "admin123" }
|
||
]));
|
||
}
|
||
|
||
// DOM元素引用
|
||
const loginTab = document.getElementById('login-tab');
|
||
const registerTab = document.getElementById('register-tab');
|
||
const loginForm = document.getElementById('login-form');
|
||
const registerForm = document.getElementById('register-form');
|
||
const toRegisterLink = document.getElementById('to-register');
|
||
const toLoginLink = document.getElementById('to-login');
|
||
const statusMessage = document.getElementById('status-message');
|
||
|
||
// 切换表单
|
||
function showLoginForm() {
|
||
loginForm.style.display = 'block';
|
||
registerForm.style.display = 'none';
|
||
loginTab.classList.add('active');
|
||
registerTab.classList.remove('active');
|
||
}
|
||
|
||
function showRegisterForm() {
|
||
loginForm.style.display = 'none';
|
||
registerForm.style.display = 'block';
|
||
registerTab.classList.add('active');
|
||
loginTab.classList.remove('active');
|
||
}
|
||
|
||
// 显示状态消息
|
||
function showStatusMessage(text, isSuccess) {
|
||
statusMessage.textContent = text;
|
||
statusMessage.className = 'status-message show';
|
||
statusMessage.classList.add(isSuccess ? 'status-success' : 'status-error');
|
||
|
||
setTimeout(() => {
|
||
statusMessage.classList.remove('show');
|
||
}, 3000);
|
||
}
|
||
|
||
// 用户登录
|
||
loginForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById('login-username').value.trim();
|
||
const password = document.getElementById('login-password').value;
|
||
|
||
axios.post('/api/auth/login', {
|
||
username: username,
|
||
password: password
|
||
})
|
||
.then(function (response) {
|
||
let res = response.data;
|
||
console.log(res);// 登录成功
|
||
showStatusMessage('登录成功，正在进入聊天室...', true);
|
||
|
||
console.log(res.result.user_info, 'ssssssssssss')
|
||
// 保存当前用户到sessionStorage（模拟登录状态）
|
||
sessionStorage.setItem('currentUser', JSON.stringify({
|
||
id: res.result.user_info.id,
|
||
username: res.result.user_info.username,
|
||
name: res.result.user_info.nick_name,
|
||
loginTime: new Date().toISOString()
|
||
}));
|
||
sessionStorage.setItem('token', res.result.token);
|
||
|
||
// 重定向到聊天页面
|
||
setTimeout(() => {
|
||
window.location.href = '/';
|
||
}, 1500);
|
||
})
|
||
.catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
});
|
||
|
||
// 用户注册
|
||
registerForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById('register-username').value.trim();
|
||
const registerNickname = document.getElementById('register-nickname').value.trim();
|
||
const password = document.getElementById('register-password').value;
|
||
const confirmPassword = document.getElementById('confirm-password').value;
|
||
|
||
if (!username || !registerNickname || !password || !confirmPassword) {
|
||
showStatusMessage('请填写完整的注册信息', false);
|
||
return;
|
||
}
|
||
// 验证输入
|
||
if (username.length < 3) {
|
||
showStatusMessage('用户名至少需要3个字符', false);
|
||
return;
|
||
}
|
||
|
||
if (password.length < 6) {
|
||
showStatusMessage('密码至少需要6个字符', false);
|
||
return;
|
||
}
|
||
|
||
if (password !== confirmPassword) {
|
||
showStatusMessage('两次输入的密码不一致', false);
|
||
return;
|
||
}
|
||
|
||
axios.post('/api/auth/register', {
|
||
username,
|
||
password,
|
||
nickname: registerNickname
|
||
}).then(response => {
|
||
console.log(response);
|
||
let res = response.data;
|
||
if (res.code === 0) {
|
||
|
||
localStorage.setItem('users', res.result.user_info);
|
||
localStorage.setItem('token', res.result.token);
|
||
|
||
// 注册成功并自动登录
|
||
showStatusMessage('注册成功！即将自动登录...', true);
|
||
|
||
// 保存当前用户信息
|
||
sessionStorage.setItem('currentUser', JSON.stringify({
|
||
id: res.result.user_info.id,
|
||
username: res.result.user_info.username,
|
||
name: res.result.user_info.nick_name,
|
||
loginTime: new Date().toISOString()
|
||
}));
|
||
|
||
// 重定向到聊天页面
|
||
setTimeout(() => {
|
||
window.location.href = '/';
|
||
}, 1500);
|
||
}
|
||
}).catch(error => {
|
||
showStatusMessage('注册失败，请稍后再试', false);
|
||
});
|
||
});
|
||
|
||
// 注册事件监听
|
||
loginTab.addEventListener('click', showLoginForm);
|
||
registerTab.addEventListener('click', showRegisterForm);
|
||
toRegisterLink.addEventListener('click', showRegisterForm);
|
||
toLoginLink.addEventListener('click', showLoginForm);
|
||
|
||
// 初始化页面状态
|
||
showLoginForm();
|
||
</script>
|
||
</body>
|
||
</html>
|