agper-agen/login.html
2025-06-01 10:41:52 +07:00

112 lines
5.5 KiB
HTML

<!DOCTYPE html>
<html lang="en-gb" translate="no">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0"/>
<link rel="icon" type="image/webp" href="/assets/images/bpn.webp">
<title>Agen Perubahan ATR/BPN Riau</title>
<link rel="preload" href="/assets/fonts/materials.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/fonts/ss3l.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/assets/fonts/ss3il.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="/assets/css/fonts.css">
<link rel="stylesheet" href="/assets/css/molybdenum.css">
<script src="/assets/js/jquery.min.js" async></script>
<script src="/assets/js/molybdenum.js" async></script>
<script src="/assets/js/app.js" async></script>
<style>
*
{
user-select: none;
-webkit-user-select: none;
}
input
{
user-select: text;
-webkit-user-select: text;
}
*::-webkit-scrollbar, .main::-webkit-scrollbar {
width: .8ch;
}
/* Scrollbar thumb (the draggable part) */
*::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
background: var(--secondary-background); /* Dark semi-transparent */
border-radius: .2ch; /* Rounded edges */
}
</style>
</head>
<body style="margin: 0; height: 100%;">
<load-screen id="blocker" style="background-color : #fefdfc ; z-index: 1;"><sonar-ping></sonar-ping><load-message>Memuat Aplikasi...</load-message></load-screen>
<div style="display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 2.4em); background-color: var(--secondary-background); flex-direction: column; background-image: url(/assets/images/bpn.webp); background-position-x: center; background-repeat: no-repeat;">
<div style="width: 40ch; padding: 1.5ch; background-color: var(--semi-background); backdrop-filter: blur(3px);" id="box">
<h3 style="text-align: center;"><span id="mt">Agen Perubahan ATR/BPN<br>Kantor Wilayah Provinsi Riau</span></h3>
<div style="margin: auto; width: max-content;">
<input id="uname" type="text" class="icon" placeholder="Username"><m-inline class="icon">person</m-inline><br>
<input id="pwd" type="password" class="icon peek" placeholder="Password"><m-inline class="icon">password</m-inline><a-button id="peeker" type="peek"><m-inline>visibility_on</m-inline></a-button><br>
</div>
<div style="text-align: center;">
<button id="login-btn"><m-inline>key</m-inline> Masuk</button>
</div>
</div>
</div>
<div style="height: 3em; background-color: var(--secondary-background); text-align: center; font-size: .8em;">
Agen Perubahan ATR/BPN Kanwil Riau <span id="vernum"></span><br>
Kementerian ATR/BPN Kantor Wilayah Provinsi Riau
</div>
</body>
<script type="module">
async function domReady()
{
$('#vernum').text("versi " + vernum);
window.detail = await fetch("/auth/me");
if(detail.status != 401)
{
location = "/";
return;
}
$('#blocker').remove();
$('#login-btn').click(async ()=>{
await login();
});
$('#pwd, #uname').on("keypress", async (e)=>{
if (e.keyCode == 13) await login();
});
}
(async ()=>{
let time = 0
while (typeof window.moly === "undefined" && time < 10000) {
await new Promise(resolve => setTimeout(resolve, 50));
time += 50;
}
if (window.moly)
{
while (typeof window.moly !== "undefined" && document.readyState !== "complete") {
await new Promise(resolve => setTimeout(resolve, 100));
}
domReady();
}
})();
async function login()
{
$('#uname').prop("disabled",true);
$('#pwd').prop("disabled",true);
$('#peeker').prop("disabled",true);
$('#login-btn').prop("disabled",true);
$('#login-btn').html("<m-inline>hourglass_empty</m-inline> Tunggu");
let login = await fetch("/auth/login",{method: "post", headers: {"content-type": "application/json"}, body: JSON.stringify({username:$('#uname').val(), password:$('#pwd').val()})});
if(login.status == 200)
{
location = "/";
}
else
{
$('#uname').prop("disabled",false);
$('#pwd').prop("disabled",false);
$('#peeker').prop("disabled",false);
$('#login-btn').prop("disabled",false);
$('#login-btn').html("<m-inline>key</m-inline> Masuk");
moly.alert.show("Login Gagal","Tidak dapat login dengan username dan password yang diberikan. Pastikan username dan password sudah benar dan akun dalam keadaan aktif. Hubungi admin untuk informasi lebih lanjut.")
}
}
</script>
</html>