NapCatQQ/static/QQLogin.html

294 lines
9.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NapCat - WebUi</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
}
.login-container {
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
max-width: 400px;
min-width: 300px;
position: relative;
}
.login-methods {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.login-method {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
}
.login-method.active {
background-color: #e6f0ff;
color: #007BFF;
}
.login-form,
.qrcode {
display: flex;
flex-direction: column;
gap: 15px;
}
.qrcode {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
text-align: center;
}
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background-color: #0056b3;
}
.hidden {
display: none;
}
#qrcode-canvas {
width: 200px;
height: 200px;
}
#quick-login-dropdown {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
transition: all 0.3s;
}
#quick-login-dropdown:hover {
background-color: #e6f0ff;
}
#quick-login-options {
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1;
display: none;
}
#quick-login-options.show {
display: block;
}
.quick-login-option {
padding: 10px 15px;
cursor: pointer;
transition: all 0.3s;
}
.quick-login-option:hover {
background-color: #e6f0ff;
}
#quick-login-select {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
outline: none;
transition: all 0.3s;
}
#quick-login-select option {
background-color: #fff;
color: #333;
}
</style>
<script src="./assets/qrcode.min.js"></script>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<div class="login-methods">
<button id="quick-login" class="login-method active">Quick Login</button>
<button id="qrcode-login" class="login-method">QR Code</button>
</div>
<div id="quick-login-dropdown" class="login-form">
<select id="quick-login-select" onchange="selectAccount(this.value)">
<option value="">Select Account</option>
</select>
</div>
<div id="qrcode" class="qrcode" style="display: none;">
<canvas id="qrcode-canvas"></canvas>
</div>
<p id="message"></p>
</div>
<script>
async function GetQQLoginQrcode(retCredential) {
let QQLoginResponse = await fetch('../api/QQLogin/GetQQLoginQrcode', {
method: 'POST',
headers: {
'Authorization': "Bearer " + retCredential,
'Content-Type': 'application/json'
}
});
if (QQLoginResponse.status == 200) {
let QQLoginResponseJson = await QQLoginResponse.json();
if (QQLoginResponseJson.code == 0) {
if (QQLoginResponseJson.data.qrcode) {
return QQLoginResponseJson.data.qrcode;
} else {
return "";
}
}
}
return "";
}
async function CheckQQLoginStatus(retCredential) {
let QQLoginResponse = await fetch('../api/QQLogin/CheckLoginStatus', {
method: 'POST',
headers: {
'Authorization': "Bearer " + retCredential,
'Content-Type': 'application/json'
}
});
if (QQLoginResponse.status == 200) {
let QQLoginResponseJson = await QQLoginResponse.json();
if (QQLoginResponseJson.code == 0) {
if (QQLoginResponseJson.data.isLogin) {
return true;
} else {
return false;
}
}
}
return false;
}
async function GetQQQucickLoginList(retCredential) {
let QQLoginResponse = await fetch('../api/QQLogin/GetQuickLoginList', {
method: 'POST',
headers: {
'Authorization': "Bearer " + retCredential,
'Content-Type': 'application/json'
}
});
if (QQLoginResponse.status == 200) {
let QQLoginResponseJson = await QQLoginResponse.json();
if (QQLoginResponseJson.code == 0) {
return QQLoginResponseJson?.data;
}
}
return [];
}
async function SetQuickLogin(uin, retCredential) {
let QQLoginResponse = await fetch('../api/QQLogin/SetQuickLogin', {
method: 'POST',
headers: {
'Authorization': "Bearer " + retCredential,
'Content-Type': 'application/json'
},
body: JSON.stringify({
uin: uin
})
});
if (QQLoginResponse.status == 200) {
let QQLoginResponseJson = await QQLoginResponse.json();
if (QQLoginResponseJson.code == 0) {
return { result: true, errMsg: "" };
} else {
return { result: false, errMsg: QQLoginResponseJson.message };
}
}
return { result: false, errMsg: "接口异常" };;
}
//心跳轮询CheckQQLoginStatus 是否已经进入登录状态如果为true进入./config.html
async function HeartBeat() {
let isLogined = await CheckQQLoginStatus(localStorage.getItem('auth'));
if (isLogined) {
window.location.href = './config.html';
}
}
async function InitPages() {
let QuickLists = await GetQQQucickLoginList(localStorage.getItem('auth'));
let QuickListSelect = document.querySelector("#quick-login-select");
QuickLists.forEach(QuickUin => {
let optionUinEle = document.createElement('option');
optionUinEle.innerHTML = QuickUin;
optionUinEle.value = QuickUin;
QuickListSelect.appendChild(optionUinEle);
});
generateQrCode(await GetQQLoginQrcode(localStorage.getItem('auth')), document.querySelector('#qrcode-canvas'));
setInterval(HeartBeat, 3000);
}
document.getElementById('quick-login').addEventListener('click', function () {
let quickLoginOptions = document.querySelector('#quick-login-dropdown');
let qrcode = document.querySelector('#qrcode');
quickLoginOptions.style.display = 'flex';
qrcode.style.display = 'none';
});
async function selectAccount(accountName) {
//alert(`Logging in with ${accountName}...`);
const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
if (result) {
alert("登录成功即将跳转");
window.location.href = './config.html';
} else {
alert("登录失败," + errMsg);
}
//await (localStorage.getItem('auth'))
//document.getElementById('quick-login-options').classList.remove('show');
}
document.getElementById('qrcode-login').addEventListener('click', function () {
let loginForm = document.querySelector('#quick-login-dropdown');
let qrcode = document.querySelector('#qrcode');
loginForm.style.display = 'none';
qrcode.style.display = 'flex';
});
function generateQrCode(data, canvas) {
QRCode.toCanvas(canvas, data, function (error) {
if (error) console.error(error);
console.log('QR Code generated!');
});
}
InitPages();
</script>
</body>
</html>