css/style.css

@@ -26,6 +26,15 @@ h1 {
 span {
     color: #ED4947;
 }
+.device {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    float: left;
+    font-size: 1em;
+    font-weight: 400;
+    color: white;
+}
 .total {
     float: right;
     font-weight: bold;

index.html

@@ -82,6 +82,9 @@ and open the template in the editor.
         <h1>
             developed with <span>&hearts;</span> by Verdnatura
         </h1>
+        <span class="device">
+            <p id="deviceLabel"></p>
+        </h2>
         
         <div class="confirm">
             <div class="contConfirm">

js/clockIn.js

@@ -45,7 +45,8 @@ function setView() {
 function fichar(direction) {
     const data = {
         workerFk: userData['userFk'],
-        direction
+        direction,
+        device: localStorage.getItem("device")
     }
 
     $.post({

js/index.js

@@ -7,12 +7,14 @@ $(document).ready(function () {
 
 function setEvents() {
     const heartEl = document.querySelector('body > h1 > span');
-    
+    refreshDeviceLabel()
+
     heartEl.addEventListener('click', function() {
         Swal.fire({
             title: 'Iniciar sesión',
             html:
-                `<input id="user" class="swal2-input" type="text" placeholder="Usuario" value="${localStorage.getItem('user') ?? ''}">
+                `<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,
@@ -21,7 +23,8 @@ function setEvents() {
             if(result.isConfirmed) {
                 const user = $('#user').val();
                 const pass = $('#pass').val();
-                signIn(user,pass);
+                const device = $('#device').val();
+                signIn(user, pass, device);
             }
         });
     }); 
@@ -36,8 +39,11 @@ function setEvents() {
         $("#txtPin").text("ID USUARIO");
     });
 
-    $(".btnOk").on("click", login);
-
+    $(".btnOk").on("click", function () {
+        if (pin) {
+            login();
+        };
+    });
 }
 
 function login() {
@@ -56,7 +62,7 @@ function login() {
     });
 }
 
-function signIn(user, password) {
+function signIn(user, password, device) {
     $.post({
         urlPath: 'vnUsers/sign-in',
         jsonData: {user, password},
@@ -65,9 +71,14 @@ function signIn(user, password) {
             localStorage.setItem("token", data.token);
             localStorage.setItem("ttl", data.ttl);
             localStorage.setItem("user", user);
-            localStorage.setItem("password", password);
+            localStorage.setItem("device", device);
             localStorage.setItem("created", Date.now());
             getTokenConfig();
+            refreshDeviceLabel();
         },
     })
+}
+
+function refreshDeviceLabel() {
+    $("#deviceLabel").text(localStorage.getItem('device') ?? '')
 }

js/main.js

@@ -66,7 +66,7 @@ $.ajaxPrefilter(function(xhr) {
     const token = localStorage.getItem('token')
 
     Object.assign(xhr, {
-        url: `api/${xhr.urlPath}`,
+        url: `/api/${xhr.urlPath}`,
         headers: {
             Authorization : token
         },
@@ -97,13 +97,20 @@ $.ajaxPrefilter(function(xhr) {
                     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;    
+                            break;
                         default:
                             if (xhr.status >= 400 && xhr.status < 500)
                                 mensaje = xhr.statusText;