File size: 4,773 Bytes
0cdc54f f3a0bb4 0cdc54f f3a0bb4 0cdc54f f3a0bb4 b601cfa f3a0bb4 b601cfa 0cdc54f b601cfa 030b42d b601cfa 0cdc54f b601cfa 0cdc54f b601cfa 0cdc54f f3a0bb4 b601cfa f3a0bb4 b601cfa 030b42d b601cfa f3a0bb4 b601cfa f3a0bb4 b601cfa f3a0bb4 b601cfa 0cdc54f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Sign Up</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
form {
margin: 20px auto;
max-width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.switch {
margin-top: 10px;
color: #007BFF;
cursor: pointer;
}
</style>
</head>
<body>
<div id="loginSection">
<h2>Login</h2>
<form id="loginForm">
<input type="text" id="loginUsername" placeholder="Username" required>
<input type="password" id="loginPassword" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<p class="switch" onclick="showSignUp()">Don't have an account? Sign Up</p>
</div>
<div id="signupSection" style="display: none;">
<h2>Sign Up</h2>
<form id="signupForm">
<input type="text" id="signupUsername" placeholder="Username" required>
<input type="password" id="signupPassword" placeholder="Password" required>
<button type="submit">Sign Up</button>
</form>
<p class="switch" onclick="showLogin()">Already have an account? Login</p>
</div>
<script>
function showSignUp() {
document.getElementById("loginSection").style.display = "none";
document.getElementById("signupSection").style.display = "block";
}
// Show login form
function showLogin() {
document.getElementById("signupSection").style.display = "none";
document.getElementById("loginSection").style.display = "block";
}
// Login handler
document.getElementById("loginForm").addEventListener("submit", async (event) => {
event.preventDefault();
const username = document.getElementById("loginUsername").value.trim();
const password = document.getElementById("loginPassword").value.trim();
if (!username || !password) {
alert("Both fields are required!");
return;
}
try {
const response = await fetch("/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
if (response.ok) {
const data = await response.json(); // Expecting { message, username }
localStorage.setItem("username", data.username); // Save username to localStorage
alert("Login successful!");
window.location.href = "/terminal.html"; // Redirect to terminal page
} else {
const message = await response.text();
alert(`Login failed: ${message}`);
}
} catch (error) {
console.error("Login error:", error);
alert("An unexpected error occurred. Please try again.");
}
});
// Sign-up handler
document.getElementById("signupForm").addEventListener("submit", async (event) => {
event.preventDefault();
const username = document.getElementById("signupUsername").value.trim();
const password = document.getElementById("signupPassword").value.trim();
if (!username || !password) {
alert("Both fields are required!");
return;
}
try {
const response = await fetch("/signup", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
if (response.ok) {
const data = await response.json(); // Expecting a success message
localStorage.setItem("username", username); // Save username to localStorage
alert("Sign-up successful! Redirecting to terminal...");
window.location.href = "/terminal.html"; // Redirect to terminal page
} else {
const message = await response.text();
alert(`Sign-up failed: ${message}`);
}
} catch (error) {
console.error("Sign-up error:", error);
alert("An unexpected error occurred. Please try again.");
}
});
</script>
</body>
</html> |