#6555 refactor to js #28
129
js/index.js
129
js/index.js
|
|
@ -1,84 +1,73 @@
|
|||
let pin = "";
|
||||
if ("addEventListener" in document) {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
FastClick.attach(document.body);
|
||||
|
||||
$(document).ready(function () {
|
||||
FastClick.attach(document.body);
|
||||
setEvents();
|
||||
});
|
||||
const heartEl = document.querySelector("body > h1 > span");
|
||||
refreshDeviceLabel();
|
||||
|
||||
function setEvents() {
|
||||
const heartEl = document.querySelector('body > h1 > span');
|
||||
refreshDeviceLabel()
|
||||
heartEl.addEventListener("click", () => {
|
||||
Swal.fire({
|
||||
title: "Iniciar sesión",
|
||||
html: `
|
||||
<input id="device" class="swal2-input" type="text" placeholder="Dispositivo" value="${localStorage.getItem("device") ?? ""}">
|
||||
<input id="user" class="swal2-input" type="text" placeholder="Usuario" value="${localStorage.getItem("user") ?? ""}">
|
||||
<input id="pass" class="swal2-input" type="password" placeholder="Contraseña">`,
|
||||
confirmButtonText: "Login",
|
||||
showCloseButton: true,
|
||||
showCancelButton: false,
|
||||
}).then(async (result) => {
|
||||
if (result.isConfirmed)
|
||||
signIn(document.querySelector("#user").value, document.querySelector("#pass").value, document.querySelector("#device").value);
|
||||
});
|
||||
});
|
||||
|
||||
heartEl.addEventListener('click', function() {
|
||||
Swal.fire({
|
||||
title: 'Iniciar sesión',
|
||||
html:
|
||||
`<input id="device" class="swal2-input" type="text" placeholder="Dispositivo" value="${localStorage.getItem('device') ?? ''}">
|
||||
<input id="user" class="swal2-input" type="text" placeholder="Usuario" value="${localStorage.getItem('user') ?? ''}">
|
||||
<input id="pass" class="swal2-input" type="password" placeholder="Contraseña">`,
|
||||
confirmButtonText: 'Login',
|
||||
showCloseButton: true,
|
||||
showCancelButton: false,
|
||||
}).then(async (result) => {
|
||||
if(result.isConfirmed) {
|
||||
const user = $('#user').val();
|
||||
const pass = $('#pass').val();
|
||||
const device = $('#device').val();
|
||||
signIn(user, pass, device);
|
||||
$(".btnnum").on("click", function () {
|
||||
pin += parseInt($(this).children().html());
|
||||
$("#txtPin").text(pin);
|
||||
});
|
||||
|
||||
$(".btnCancel").on("click", function () {
|
||||
pin = "";
|
||||
$("#txtPin").text("ID USUARIO");
|
||||
});
|
||||
|
||||
$(".btnOk").on("click", function () {
|
||||
if (pin) {
|
||||
login();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".btnnum").on("click", function () {
|
||||
pin += parseInt($(this).children().html());
|
||||
$("#txtPin").text(pin);
|
||||
});
|
||||
}
|
||||
|
||||
$(".btnCancel").on("click", function () {
|
||||
async function login() {
|
||||
try {
|
||||
const res = await call("WorkerTimeControls/login", {
|
||||
method: "POST",
|
||||
body: { pin },
|
||||
});
|
||||
const data = await res.json();
|
||||
localStorage.setItem("userData", JSON.stringify(data));
|
||||
window.location = "clockIn.html";
|
||||
} catch (e) {
|
||||
document.querySelector("#txtPin").textContent = "ID USUARIO";
|
||||
pin = "";
|
||||
$("#txtPin").text("ID USUARIO");
|
||||
});
|
||||
|
||||
$(".btnOk").on("click", function () {
|
||||
if (pin) {
|
||||
login();
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function login() {
|
||||
$.post({
|
||||
urlPath: 'WorkerTimeControls/login',
|
||||
jsonData: {pin},
|
||||
processData: false,
|
||||
success: function (data) {
|
||||
localStorage.setItem("userData", JSON.stringify(data));
|
||||
window.location = "clockIn.html";
|
||||
},
|
||||
error: function() {
|
||||
$("#txtPin").text("ID USUARIO");
|
||||
pin = "";
|
||||
}
|
||||
async function signIn(user, password, device) {
|
||||
const res = await call("vnUsers/sign-in", {
|
||||
method: "POST",
|
||||
body: { user, password },
|
||||
});
|
||||
const data = await res.json();
|
||||
localStorage.setItem("token", data.token);
|
||||
localStorage.setItem("ttl", data.ttl);
|
||||
localStorage.setItem("user", user);
|
||||
localStorage.setItem("device", device);
|
||||
localStorage.setItem("created", Date.now());
|
||||
getTokenConfig();
|
||||
refreshDeviceLabel();
|
||||
}
|
||||
|
||||
function signIn(user, password, device) {
|
||||
$.post({
|
||||
urlPath: 'vnUsers/sign-in',
|
||||
jsonData: {user, password},
|
||||
processData: false,
|
||||
success: function (data) {
|
||||
localStorage.setItem("token", data.token);
|
||||
localStorage.setItem("ttl", data.ttl);
|
||||
localStorage.setItem("user", user);
|
||||
localStorage.setItem("device", device);
|
||||
localStorage.setItem("created", Date.now());
|
||||
getTokenConfig();
|
||||
refreshDeviceLabel();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function refreshDeviceLabel() {
|
||||
$("#deviceLabel").text(localStorage.getItem('device') ?? '')
|
||||
}
|
||||
const refreshDeviceLabel = () => (document.querySelector("#deviceLabel").textContent = localStorage.getItem("device") ?? "");
|
||||
|
|
|
|||
225
js/main.js
225
js/main.js
|
|
@ -1,130 +1,127 @@
|
|||
const renewPeriod = localStorage.getItem('renewPeriod');
|
||||
const renewPeriod = localStorage.getItem("renewPeriod");
|
||||
let intervalId, isCheckingToken;
|
||||
const txtConfirm = document.querySelector(".txtConfirm");
|
||||
const confirm = document.querySelector(".confirm");
|
||||
|
||||
function confirmReset() {
|
||||
$(".confirm").removeClass('confirmKO');
|
||||
$(".txtConfirm").empty();
|
||||
confirm.classList.remove("confirmKO");
|
||||
confirm.style.display = "none";
|
||||
txtConfirm.textContent = "";
|
||||
}
|
||||
|
||||
function printError(msg){
|
||||
// WIP: fadeIn / fadeOut
|
||||
function printError(msg) {
|
||||
confirmReset();
|
||||
$(".txtConfirm").append(msg);
|
||||
$(".confirm").addClass('confirmKO');
|
||||
const txtConfirm = document.querySelector(".txtConfirm");
|
||||
txtConfirm.textContent = msg;
|
||||
const confirm = document.querySelector(".confirm");
|
||||
confirm.classList.add("confirmKO");
|
||||
confirm.style.display = "block";
|
||||
|
||||
$(".confirm").fadeIn(200);
|
||||
setTimeout(function() {
|
||||
setTimeout(() => {
|
||||
$(".confirm").fadeOut(200);
|
||||
setTimeout(confirmReset, 200);
|
||||
}, 2300);
|
||||
}
|
||||
|
||||
function renewToken() {
|
||||
$.post({
|
||||
urlPath: 'vnUsers/renewToken',
|
||||
processData: false,
|
||||
success: function (data) {
|
||||
localStorage.setItem("token", data.id);
|
||||
localStorage.setItem("ttl", data.ttl);
|
||||
localStorage.setItem("created", Date.now());
|
||||
},
|
||||
})
|
||||
async function renewToken() {
|
||||
const res = await call("AccessTokens/renewToken", {});
|
||||
|
||||
const data = await res.json();
|
||||
localStorage.setItem("ttl", data.ttl);
|
||||
localStorage.setItem("created", Date.now());
|
||||
}
|
||||
|
||||
function getTokenConfig() {
|
||||
const filter = {fields: ['renewInterval', 'renewPeriod']};
|
||||
$.get({
|
||||
urlPath: 'AccessTokenConfigs/findOne',
|
||||
jsonData: filter,
|
||||
processData: false,
|
||||
success: function (data) {
|
||||
if (!data) return;
|
||||
localStorage.setItem('renewPeriod', data.renewPeriod);
|
||||
clearInterval(intervalId);
|
||||
intervalId = setInterval(() => checkValidity(), data.renewInterval * 1000);
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function checkValidity() {
|
||||
const created = +localStorage.getItem('created');
|
||||
const ttl = localStorage.getItem('ttl');
|
||||
|
||||
if (isCheckingToken || !created) return;
|
||||
isCheckingToken = true;
|
||||
|
||||
const renewPeriodInSeconds = Math.min(ttl, renewPeriod) * 1000;
|
||||
const maxDate = created + renewPeriodInSeconds;
|
||||
const now = new Date();
|
||||
|
||||
if (now.getTime() <= maxDate) return isCheckingToken = false;
|
||||
|
||||
renewToken();
|
||||
isCheckingToken = false;
|
||||
}
|
||||
|
||||
$.ajaxPrefilter(function(xhr) {
|
||||
const orgErrorHandler = xhr.error;
|
||||
const token = localStorage.getItem('token')
|
||||
|
||||
Object.assign(xhr, {
|
||||
url: `/api/${xhr.urlPath}`,
|
||||
headers: {
|
||||
Authorization : token
|
||||
},
|
||||
timeout: 2000,
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
dataType: 'json',
|
||||
processData: false,
|
||||
data: JSON.stringify(xhr.jsonData),
|
||||
error: function(xhr, textStatus, err) {
|
||||
if (orgErrorHandler) {
|
||||
try {
|
||||
orgErrorHandler(xhr, textStatus, err);
|
||||
} catch (e) {
|
||||
err = e;
|
||||
}
|
||||
}
|
||||
|
||||
if(xhr?.responseJSON?.error?.code == 'periodNotExceeded') return;
|
||||
|
||||
switch (textStatus){
|
||||
case 'parsererror':
|
||||
mensaje = 'Requested JSON parse failed';
|
||||
break;
|
||||
case 'timeout':
|
||||
mensaje = 'Time out error';
|
||||
break;
|
||||
case 'abort':
|
||||
mensaje = 'Ajax request aborted';
|
||||
break;
|
||||
case 'error':
|
||||
if (xhr?.responseJSON?.error?.name == 'UserError') {
|
||||
mensaje = xhr.responseJSON.error.message;
|
||||
break;
|
||||
}
|
||||
switch (xhr.status){
|
||||
case 0:
|
||||
mensaje = 'Not connect: Verify Network';
|
||||
break;
|
||||
case 504:
|
||||
mensaje = 'No se ha podido conectar con Salix, consulta con informática';
|
||||
break;
|
||||
case 555:
|
||||
mensaje = JSON.parse(xhr.statusText).Message;
|
||||
break;
|
||||
default:
|
||||
if (xhr.status >= 400 && xhr.status < 500)
|
||||
mensaje = xhr.statusText;
|
||||
else
|
||||
mensaje = 'Ha ocurrido un error, consulta con informática';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
mensaje = 'Ha ocurrido un error, consulta con informática';
|
||||
}
|
||||
printError(mensaje);
|
||||
|
||||
}
|
||||
async function getTokenConfig() {
|
||||
const res = await call("AccessTokenConfigs/findOne", {
|
||||
params: JSON.stringify({
|
||||
filter: { fields: ["renewInterval", "renewPeriod"] },
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
if(renewPeriod) getTokenConfig();
|
||||
const data = await res.json();
|
||||
if (!data) return;
|
||||
|
||||
localStorage.setItem("renewPeriod", data.renewPeriod);
|
||||
clearInterval(intervalId);
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
const created = +localStorage.getItem("created");
|
||||
const ttl = localStorage.getItem("ttl");
|
||||
|
||||
if (isCheckingToken || !created) return;
|
||||
isCheckingToken = true;
|
||||
|
||||
const renewPeriodInSeconds = Math.min(ttl, renewPeriod) * 1000;
|
||||
const maxDate = created + renewPeriodInSeconds;
|
||||
|
||||
if (new Date().getTime() <= maxDate) return (isCheckingToken = false);
|
||||
|
||||
renewToken();
|
||||
isCheckingToken = false;
|
||||
}, data.renewInterval * 1000);
|
||||
}
|
||||
|
||||
/// WIP: MUST try thru it!
|
||||
async function call(url, { method = "GET", body = {}, params = {} }) {
|
||||
const controller = new AbortController();
|
||||
const { signal } = controller;
|
||||
const timeoutId = setTimeout(() => controller.abort(), 2000);
|
||||
let mensaje;
|
||||
const opts = {
|
||||
method,
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
signal,
|
||||
};
|
||||
|
||||
if (method === "GET") url += "?" + new URLSearchParams(params).toString();
|
||||
else if (method === "POST") opts.body = JSON.stringify(body);
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/${url}`, opts);
|
||||
clearTimeout(timeoutId);
|
||||
return res;
|
||||
} catch (e) {
|
||||
switch (e.name) {
|
||||
case "SyntaxError":
|
||||
mensaje = "Requested JSON parse failed";
|
||||
break;
|
||||
case "TimeoutError":
|
||||
mensaje = "Time out error";
|
||||
break;
|
||||
case "AbortError":
|
||||
mensaje = "Ajax request aborted";
|
||||
break;
|
||||
case "UserError":
|
||||
mensaje = e.message;
|
||||
break;
|
||||
case "error":
|
||||
switch (e.code) {
|
||||
case 0:
|
||||
mensaje = "Not connect: Verify Network";
|
||||
break;
|
||||
case 504:
|
||||
mensaje = "No se ha podido conectar con Salix, consulta con informática";
|
||||
break;
|
||||
case 555:
|
||||
mensaje = e.message;
|
||||
break;
|
||||
case e.code >= 400 && e.code < 500:
|
||||
mensaje = e.name;
|
||||
break;
|
||||
default:
|
||||
mensaje = "Ha ocurrido un error, consulta con informática";
|
||||
}
|
||||
break;
|
||||
default:
|
||||
mensaje = "Ha ocurrido un error, consulta con informática";
|
||||
}
|
||||
printError(mensaje);
|
||||
}
|
||||
}
|
||||
|
||||
if (renewPeriod) getTokenConfig();
|
||||
|
|
|
|||
Loading…
Reference in New Issue