lq/im-demo-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

测试

Browse Source
This commit is contained in:
年糕崽崽
2025-06-25 16:12:51 +08:00
parent dbcc89b8fb
commit 28aec960e2
15 changed files with 2013 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

638
resources/views/login.blade.php Normal file
View File

@@ -0,0 +1,638 @@
<!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({
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({
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>