121 lines
4.6 KiB
HTML
121 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Login</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
</head>
|
|
<body
|
|
class="bg-light d-flex justify-content-center align-items-center"
|
|
style="height: 100vh"
|
|
>
|
|
<div class="card shadow" style="width: 350px">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-center mb-4">Login</h3>
|
|
|
|
<form id="loginForm">
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label"
|
|
>Username</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="username"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label"
|
|
>Password</label
|
|
>
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="password"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary">
|
|
Login
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="alert" class="alert mt-3 d-none" role="alert"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const secretToken =
|
|
"8fd388f61f24117aa87f92408c93193792aa3c5e4167d88d981ebf17a8fb7d7a4c4b182c1eee50ff74830ce7d9454a3d2d48e9e29b71a3a285bf37215316279f";
|
|
|
|
$(document).ready(function () {
|
|
$("#loginForm").submit(function (e) {
|
|
e.preventDefault();
|
|
|
|
var username = $("#username").val();
|
|
var password = $("#password").val();
|
|
|
|
$.ajax({
|
|
url: "http://localhost:4400/api/login/",
|
|
method: "POST",
|
|
contentType: "application/json",
|
|
dataType: "json",
|
|
crossDomain: true,
|
|
headers: {
|
|
Authorization: "Bearer " + secretToken,
|
|
},
|
|
data: JSON.stringify({
|
|
username: username.trim(),
|
|
password: password.trim(),
|
|
}),
|
|
success: function (result) {
|
|
if (result.metadata.code === 200) {
|
|
localStorage.setItem(
|
|
"accessToken",
|
|
result.response.token
|
|
);
|
|
|
|
console.log(result.response.data);
|
|
localStorage.setItem(
|
|
"fullname",
|
|
result.response.data.full_name
|
|
);
|
|
|
|
$("#alert")
|
|
.removeClass("d-none alert-danger")
|
|
.addClass("alert-success")
|
|
.text("Login berhasil!");
|
|
|
|
setTimeout(() => {
|
|
window.location.href = "./pages/dashboard.html";
|
|
}, 1500);
|
|
} else {
|
|
$("#alert")
|
|
.removeClass("d-none alert-success")
|
|
.addClass("alert-danger")
|
|
.text(result.metadata.msg);
|
|
}
|
|
},
|
|
error: function (xhr) {
|
|
$("#alert")
|
|
.removeClass("d-none alert-success")
|
|
.addClass("alert-danger")
|
|
.text("Login gagal! " + xhr.responseText);
|
|
},
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|