vpn_based_remote_access_system
Version:
毕设：基于OpenVPN的远程访问系统
173 lines (154 loc) • 6.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面</title>
<style>
/* 按钮样式 */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* 表单样式 */
form {
max-width: 300px;
margin: 0 auto;
}
input {
width: 100%;
margin-bottom: 10px;
}
button {
width: 100%;
}
.message {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Register')">Register</button>
<button class="tablinks" onclick="openTab(event, 'Login')">Login</button>
</div>
<div id="Register" class="tabcontent">
<h2>User Registration</h2>
<form id="registrationForm">
<input type="text" id="username" placeholder="Username" required>
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
<div id="registerMessage" class="message"></div>
</div>
<div id="Login" class="tabcontent">
<h2>User Login</h2>
<form id="loginForm">
<input type="text" id="loginIdentifier" placeholder="Username or Email" required>
<input type="password" id="loginPassword" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<div id="loginMessage" class="message"></div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// 注册
document.getElementById('registrationForm').addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
try {
const response = await fetch('/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, email, password })
});
const data = await response.json();
if (response.ok) {
document.getElementById('registerMessage').innerText = `Success for registed ${username}.`;
} else {
document.getElementById('registerMessage').innerText = data.message;
}
} catch (error) {
console.error(error);
document.getElementById('registerMessage').innerText = 'Error.';
}
});
// 登录
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const loginIdentifier = document.getElementById('loginIdentifier').value;
const loginPassword = document.getElementById('loginPassword').value;
try {
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ loginIdentifier, loginPassword })
});
const data = await response.json();
if (data.success) {
// 登录成功后根据服务器响应进行页面跳转
window.location.href = data.redirect;
} else {
// 显示错误信息
document.getElementById('loginMessage').innerText = data.message;
}
} catch (error) {
console.error(error);
document.getElementById('loginMessage').innerText = error;
}
});
document.getElementById("logoutButton").addEventListener("click", async () => {
try {
const response = await fetch("/logout", { method: "GET" });
const result = await response.json();
if (result.redirect) {
window.location.href = result.redirect;
}
} catch (error) {
console.error(error);
}
});
</script>
</body>
</html>