Spaces:

ReikerXx
/

Xx

Sleeping

App Files Files Community

Xx / public /index.html

Reaperxxxx

Update public/index.html

b601cfa verified over 1 year ago

Raw

History Blame Contribute Delete

4.77 kB

	<!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>