112 lines
5.6 KiB
HTML
112 lines
5.6 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>SIGAP ASN - Sistem Informasi Gerakan Agen Perubahan ASN</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-position-y: 7vh; 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" style="text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;">Masuk Aplikasi</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;">
|
|
Sistem Informasi Gerakan Agen Perubahan ASN <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> |