LogAnalyze/public/login.html

113 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Login</title>
<!-- Link to CSS file -->
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<section class="login-section">
<div class="login-container">
<div class="form-wrapper">
<div class="form-box">
<h1 class="form-title">Login</h1>
<form id="loginForm">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="user@gmail.com"
required
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
placeholder="Your password"
required
/>
</div>
<div
class="error-msg text-error"
style="display: none"
></div>
<button type="submit" class="primary-btn">
Login
</button>
</form>
</div>
</div>
</div>
</section>
<script>
if (localStorage.getItem("token")) {
window.location.href = "/";
}
</script>
<script>
document
.getElementById("loginForm")
.addEventListener("submit", async (e) => {
e.preventDefault();
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const errorMsg = document.querySelector(".error-msg");
try {
const res = await fetch(
"https://stage.nswteam.net/api/login",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
userEmail: email,
password,
}),
},
);
const data = await res.json();
if (!res.ok) {
errorMsg.textContent =
data.message || "Login failed";
errorMsg.style.display = "block";
return;
}
localStorage.setItem("token", data.token);
localStorage.setItem(
"user",
JSON.stringify({
name:
data.data.firstName +
" " +
data.data.lastName,
email: data.data.userEmail,
}),
);
window.location.href = "/";
} catch (err) {
console.error("Login failed:", err);
errorMsg.textContent = "Something went wrong.";
errorMsg.style.display = "block";
}
});
</script>
</body>
</html>