vpn_based_remote_access_system
Version:
毕设：基于OpenVPN的远程访问系统
194 lines (181 loc) • 8.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户界面</title>
</head>
<body>
<h2>VPN远程访问系统</h2>
<div id="userInfo">
<p id="usernameDisplay">用户名: 未知</p>
<p id="ipDisplay">IP地址: 未知</p>
<p id="lastLoginDisplay">上次登录时间: 未知</p>
<div id="port">
<p id="portDisplay">代理端口号: 未知</p>
<button id="allocatePortButton">分配</button>
<button id="downloadButton">获取用户配置文件</button>
</div>
<div id="serverStart">
<label for="serverStartDuration">服务器启动时长（分钟）:</label>
<input id="serverStartDuration" type="number" min="1" max="60" value="1">
<button id="startServerButton">启动</button>
</div>
<a href="http://172.22.245.1:5140"> 测试链接1 - 172.22.245.1:5140 </a>
</div>
<div id="serverStatus">
<p id="serverStatusDisplay">服务器状态: 未知</p>
<button id="stopServerButton">关闭服务器</button>
</div>
<button id="logoutButton">退出登录</button>
<button id="unregisterButton">注销账号</button>
<script>
document.addEventListener("DOMContentLoaded", async () => {
try {
// 发送请求获取用户信息
const response = await fetch("/getUserInfo");
const userInfo = await response.json();
// 显示用户名、IP、上次登录时间和端口号
const usernameDisplay = document.getElementById("usernameDisplay");
const ipDisplay = document.getElementById("ipDisplay");
const lastLoginDisplay = document.getElementById("lastLoginDisplay");
const portDisplay = document.getElementById("portDisplay");
if (userInfo && userInfo.username && userInfo.ip) {
usernameDisplay.textContent = `用户名: ${userInfo.username}`;
ipDisplay.textContent = `IP地址: ${userInfo.ip}`;
lastLoginDisplay.textContent = `上次登录时间: ${userInfo.last_login_at}`;
portDisplay.textContent = `分配代理端口号: ${userInfo.port}`;
} else {
usernameDisplay.textContent = "用户名: 未登录";
ipDisplay.textContent = "IP地址: 无";
lastLoginDisplay.textContent = "上次登录时间: 无";
portDisplay.textContent = "分配代理端口号: 无";
}
} catch (error) {
console.error("Error fetching user information:", error);
}
// 分配端口号
document.getElementById("allocatePortButton").addEventListener("click", async () => {
try {
const response = await fetch("/allocatePort", { method: "POST" });
const portInfo = await response.json();
if (portInfo && portInfo.port) {
const portDisplay = document.getElementById("portDisplay");
portDisplay.textContent = `分配代理端口号: ${portInfo.port}`;
}
} catch (error) {
console.error("Error allocating port:", error);
}
});
// 退出登录
document.getElementById("logoutButton").addEventListener("click", async () => {
try {
const response = await fetch("/logout", { method: "GET" });
const data = await response.json();
if (data.redirect) {
window.location.href = data.redirect;
}
} catch (error) {
console.error("Error logging out:", error);
}
});
// 注销
document.getElementById("unregisterButton").addEventListener("click", async () => {
try {
const response = await fetch("/unregister", { method: "POST" });
const data = await response.json();
if (data.success) {
alert("账号已成功注销");
if (data.redirect) {
window.location.href = data.redirect;
}
} else {
alert("注销失败");
}
} catch (error) {
console.error("Error unregistering account:", error);
}
});
// 启动代理服务器
document.getElementById("startServerButton").addEventListener("click", async () => {
const serverStartDuration = document.getElementById("serverStartDuration").value;
if (serverStartDuration < 1 || serverStartDuration > 60) {
alert("时间范围应在1到60之间");
return;
}
try {
const portDisplay = document.getElementById("portDisplay").textContent.replace("已分配的代理端口号: ", "");
const response = await fetch("/tryStart", {
method: "POST",
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ serverStartDuration })
});
const result = await response.json();
if (result && result.success) {
alert("代理服务启动成功");
} else {
alert("代理服务启动失败");
}
} catch (error) {
console.error("Error starting server:", error);
}
});
});
// 下载配置文件
document.getElementById("downloadButton").addEventListener("click", async () => {
try {
const response = await fetch("/downloadFile", { method: "GET" });
if (!response.ok) {
throw new Error('Failed downloading');
}
const fileData = await response.blob();
const url = window.URL.createObjectURL(new Blob([fileData]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'client.ovpn');
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
} catch (error) {
console.error("Error downloading file:", error);
}
});
document.addEventListener("DOMContentLoaded", function () {
async function checkServerStatus() {
const port = document.getElementById("portDisplay").textContent.replace("分配代理端口号: ", "");
//console.log(port);
try {
const response = await fetch(`/server/status?port=${port}`);
const { status } = await response.json();
document.getElementById("serverStatusDisplay").textContent = `服务器状态: ${status}`;
} catch (error) {
console.error("Error checking server status:", error);
}
}
async function stopServer() {
const port = document.getElementById("portDisplay").textContent.replace("分配代理端口号: ", "");
console.log(port)
try {
await fetch(`/server/stop`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ port })
});
alert("服务器已关闭");
await checkServerStatus();
} catch (error) {
console.error("Error stopping server:", error);
}
}
document.getElementById("stopServerButton").addEventListener("click", stopServer);
checkServerStatus();
setInterval(checkServerStatus, 2000);
});
</script>
</body>
</html>