迁移首页登录脚本
This commit is contained in:
@@ -23,6 +23,7 @@
|
||||
<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&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
@vite('resources/js/home-login.js')
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0d0f0d;
|
||||
@@ -835,7 +836,10 @@
|
||||
style="display: {{ $flashMessage ? 'block' : 'none' }};"
|
||||
>{{ $flashMessage }}</div>
|
||||
|
||||
<form id="login-form" class="login-form">
|
||||
<form id="login-form" class="login-form"
|
||||
data-login-url="{{ route('login.post') }}"
|
||||
data-rooms-url="{{ route('rooms.index') }}"
|
||||
data-room-url-template="{{ url('/room/:id') }}">
|
||||
<div class="field-grid">
|
||||
<div class="field-block">
|
||||
<label for="username"><span class="field-index">01</span>昵称</label>
|
||||
@@ -851,7 +855,8 @@
|
||||
<label for="captcha"><span class="field-index">03</span>验证码</label>
|
||||
<div class="captcha-row">
|
||||
<input class="field-input" type="text" id="captcha" name="captcha" maxlength="10" placeholder="输入验证码" required>
|
||||
<img src="/captcha/default?{{ mt_rand() }}" alt="验证码" id="captcha-img" class="captcha-image" onclick="refreshCaptcha()" title="点击刷新验证码">
|
||||
<img src="/captcha/default?{{ mt_rand() }}" alt="验证码" id="captcha-img" class="captcha-image"
|
||||
data-captcha-refresh-url="/captcha/default" title="点击刷新验证码">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -911,129 +916,6 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function refreshCaptcha() {
|
||||
document.getElementById('captcha-img').src = '/captcha/default?' + Math.random();
|
||||
}
|
||||
|
||||
function syncSelectedState() {
|
||||
document.querySelectorAll('.gender-option').forEach(function(option) {
|
||||
const input = option.querySelector('input[type="radio"]');
|
||||
option.classList.toggle('selected', Boolean(input && input.checked));
|
||||
});
|
||||
}
|
||||
|
||||
function updateRoomHint() {
|
||||
const roomSelect = document.getElementById('room_id');
|
||||
const hint = document.getElementById('room-hint');
|
||||
|
||||
if (!roomSelect || !hint || roomSelect.selectedIndex < 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedOption = roomSelect.options[roomSelect.selectedIndex];
|
||||
const roomName = selectedOption.getAttribute('data-room-name') || selectedOption.text;
|
||||
const roomOwner = selectedOption.getAttribute('data-room-owner') || '未设置';
|
||||
|
||||
hint.textContent = '当前房间：' + roomName + ' / 房主：' + roomOwner;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.gender-option input[type="radio"]').forEach(function(input) {
|
||||
input.addEventListener('change', syncSelectedState);
|
||||
});
|
||||
|
||||
const roomSelect = document.getElementById('room_id');
|
||||
if (roomSelect) {
|
||||
roomSelect.addEventListener('change', updateRoomHint);
|
||||
}
|
||||
|
||||
syncSelectedState();
|
||||
updateRoomHint();
|
||||
|
||||
document.getElementById('login-form').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const button = document.getElementById('submit-btn');
|
||||
const formData = new FormData(this);
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
const roomId = data.room_id || '1';
|
||||
|
||||
button.disabled = true;
|
||||
button.innerText = '正在进入...';
|
||||
showAlert('', 'error', false);
|
||||
|
||||
fetch('{{ route('login.post') }}', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then(function(response) {
|
||||
return response.json().then(function(body) {
|
||||
return {
|
||||
status: response.status,
|
||||
body: body,
|
||||
};
|
||||
});
|
||||
})
|
||||
.then(function(result) {
|
||||
if (result.status === 419 || (result.body && result.body.message === 'CSRF token mismatch.')) {
|
||||
showAlert('安全令牌已过期，正在刷新页面...', 'error', true);
|
||||
setTimeout(function() {
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.status === 200 && result.body.status === 'success') {
|
||||
showAlert(result.body.message, 'success', true);
|
||||
const chatUrl = '/room/' + roomId;
|
||||
const chatWindow = window.open(
|
||||
chatUrl,
|
||||
'chatroom',
|
||||
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes'
|
||||
);
|
||||
|
||||
if (chatWindow) {
|
||||
chatWindow.moveTo(0, 0);
|
||||
chatWindow.resizeTo(screen.availWidth, screen.availHeight);
|
||||
chatWindow.focus();
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
window.location.href = '/rooms';
|
||||
}, 1500);
|
||||
} else {
|
||||
const errorMessage =
|
||||
result.body.message ||
|
||||
(result.body.errors ? Object.values(result.body.errors)[0][0] : '登录失败，请稍后再试。');
|
||||
showAlert(errorMessage, 'error', true);
|
||||
refreshCaptcha();
|
||||
document.getElementById('captcha').value = '';
|
||||
button.disabled = false;
|
||||
button.innerText = '进入和平聊吧';
|
||||
}
|
||||
})
|
||||
.catch(function() {
|
||||
showAlert('网络或服务器异常，请稍后再试。', 'error', true);
|
||||
refreshCaptcha();
|
||||
button.disabled = false;
|
||||
button.innerText = '进入和平聊吧';
|
||||
});
|
||||
});
|
||||
|
||||
function showAlert(message, type, visible) {
|
||||
const alertBox = document.getElementById('alert-box');
|
||||
alertBox.textContent = message;
|
||||
alertBox.className = type === 'success' ? 'alert-success' : 'alert-error';
|
||||
alertBox.id = 'alert-box';
|
||||
alertBox.style.display = visible ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user