Fix clock if authentication is enabled (#4914)

* Fix clock if authentication is enabled
Add .npmignore file

* Add time to clock view back

* Formatting

* Select browser language for authentication dialog
Make authentication dialog bigger to suit for other languages.

* Update hashauth.js

* Update hashauth.js

* Update hashauth.js

* Update hashauth.js

* Select language from localStorage

And get suitable language for the very first auth dialog (before the settings were read from server or user can select language in the configuration)

* remove extra `/ ` from clockview, otherwise bundle will not load and search for domain `bundle`

fixes #4860 (review)

* remove .npmignore for now.

should be merged in seperated PR

* small fixes

app.js

@@ -262,7 +262,7 @@ function create (env, ctx) {
   if (fs.existsSync(process.cwd() + '/tmp/cacheBusterToken')) {
     tmpFiles = express.static('tmp', {
       maxAge: maxAge
-    }); 
+    });
   } else {
     tmpFiles = express.static(__dirname + '/tmp', {
       maxAge: maxAge

lib/client/clock-client.js

@@ -11,10 +11,27 @@ client.settings = browserSettings(client, window.serverSettings, $);
 
 client.query = function query () {
   console.log('query');
-  $.ajax('/api/v1/entries.json?count=3', {
+  var parts = (location.search || '?').substring(1).split('&');
+  var token = '';
+  parts.forEach(function (val) {
+    if (val.startsWith('token=')) {
+      token = val.substring('token='.length);
+    }
+  });
+
+  var secret = localStorage.getItem('apisecrethash');
+  var src = '/api/v1/entries.json?count=3&t=' + new Date().getTime();
+
+  if (secret) {
+    src += '&secret=' + secret;
+  } else if (token) {
+    src += '&token=' + token;
+  }
+
+  $.ajax(src, {
     success: client.render
   });
-}
+};
 
 client.render = function render (xhr) {
   console.log('got data', xhr);
@@ -32,7 +49,7 @@ client.render = function render (xhr) {
   let now = new Date();
 
   // Convert BG to mmol/L if necessary.
-  if (window.serverSettings.settings.units == 'mmol') {
+  if (window.serverSettings.settings.units === 'mmol') {
     var displayValue = window.Nightscout.units.mgdlToMMOL(rec.sgv);
   } else {
     displayValue = rec.sgv;
@@ -42,7 +59,7 @@ client.render = function render (xhr) {
   $('#bgnow').html(displayValue);
 
   // Insert the trend arrow.
-  $('#arrow').attr('src', '/images/' + rec.direction + '.svg');
+  $('#arrow').attr('src', '/images/' + (!rec.direction || rec.direction === 'NOT COMPUTABLE' ? 'NONE' : rec.direction) + '.svg');
 
   // Time before data considered stale.
   let staleMinutes = 13;
@@ -52,13 +69,13 @@ client.render = function render (xhr) {
   $('#bgnow').toggleClass('stale', (now - last > threshold));
 
   // Generate and insert the clock.
-  let timeDivisor = (client.settings.timeFormat) ? client.settings.timeFormat : 12;
+  let timeDivisor = parseInt(client.settings.timeFormat ? client.settings.timeFormat : 12, 10);
   let today = new Date()
     , h = today.getHours() % timeDivisor;
-  if (timeDivisor == 12) {
-    h = (h == 0) ? 12 : h; // In the case of 00:xx, change to 12:xx for 12h time
+  if (timeDivisor === 12) {
+    h = (h === 0) ? 12 : h; // In the case of 00:xx, change to 12:xx for 12h time
   }
-  if (timeDivisor == 24) {
+  if (timeDivisor === 24) {
     h = (h < 10) ? ("0" + h) : h; // Pad the hours with a 0 in 24h time
   }
   let m = today.getMinutes();
@@ -67,14 +84,14 @@ client.render = function render (xhr) {
 
   var queryDict = {};
   location.search.substr(1).split("&").forEach(function(item) { queryDict[item.split("=")[0]] = item.split("=")[1] });
-  
+
   if (!window.serverSettings.settings.showClockClosebutton || !queryDict['showClockClosebutton']) {
     $('#close').css('display', 'none');
   }
 
   // defined in the template this is loaded into
   // eslint-disable-next-line no-undef
-  if (clockFace == 'clock-color') {
+  if (clockFace === 'clock-color') {
 
     var bgHigh = window.serverSettings.settings.thresholds.bgHigh;
     var bgLow = window.serverSettings.settings.thresholds.bgLow;
@@ -138,12 +155,12 @@ client.render = function render (xhr) {
       $('#arrow').css('filter', 'brightness(100%)');
     }
   }
-}
+};
 
 client.init = function init () {
   console.log('init');
   client.query();
   setInterval(client.query, 1 * 60 * 1000);
-}
+};
 
-module.exports = client;
+module.exports = client;

lib/client/index.js

@@ -76,7 +76,20 @@ client.init = function init (callback) {
       console.log('Already tried to get settings after auth, but failed');
     } else {
       client.settingsFailed = true;
-      language.set('en');
+
+      // detect browser language
+      var lang = Storages.localStorage.get('language') || (navigator.language || navigator.userLanguage).toLowerCase();
+      if (lang !== 'zh_cn' && lang !== 'zh-cn' && lang !== 'zh_tw' && lang !== 'zh-tw') {
+        lang = lang.substring(0, 2);
+      } else {
+        lang = lang.replace('-', '_');
+      }
+      if (language.languages.find(l => l.code === lang)) {
+        language.set(lang);
+      } else {
+        language.set('en');
+      }
+
       client.translate = language.translate;
       // auth failed, hide loader and request for key
       $('#centerMessagePanel').hide();

lib/hashauth.js

@@ -55,7 +55,7 @@ hashauth.init = function init(client, $) {
     });
     return hashauth;
   };
-  
+
   hashauth.removeAuthentication = function removeAuthentication(event) {
 
     Storages.localStorage.remove('apisecrethash');
@@ -74,16 +74,18 @@ hashauth.init = function init(client, $) {
     }
     return false;
   };
-  
+
   hashauth.requestAuthentication = function requestAuthentication (eventOrNext) {
     var translate = client.translate;
     hashauth.injectHtml();
     $( '#requestauthenticationdialog' ).dialog({
-        width: 350
-      , height: 240
+        width: 400
+      , height: 270
+      , closeText: ''
       , buttons: [
         {
-          text: translate('Update')
+          id: 'requestauthenticationdialog-btn'
+          , text: translate('Update')
           , click: function() {
             var dialog = this;
             hashauth.processSecret($('#apisecret').val(), $('#storeapisecret').is(':checked'), function done (close) {
@@ -102,9 +104,9 @@ hashauth.init = function init(client, $) {
         }
       ]
       , open: function open ( ) {
-        $('#requestauthenticationdialog').keypress(function pressed (e) {
+        $('#apisecret').off('keyup').on('keyup' ,function pressed (e) {
           if (e.keyCode === $.ui.keyCode.ENTER) {
-            $(this).parent().find('button.ui-button-text-only').trigger('click');
+            $('#requestauthenticationdialog-btn').trigger('click');
           }
         });
         $('#apisecret').val('').focus();
@@ -117,7 +119,7 @@ hashauth.init = function init(client, $) {
     }
     return false;
   };
-  
+
   hashauth.processSecret = function processSecret(apisecret, storeapisecret, callback) {
     var translate = client.translate;
 
@@ -170,7 +172,7 @@ hashauth.init = function init(client, $) {
     var html =
       '<div id="requestauthenticationdialog" style="display:none" title="'+translate('Device authentication')+'">'+
         '<label for="apisecret">'+translate('Your API secret')+': </label>'+
-        '<input type="password" id="apisecret" size="20" />'+
+        '<input type="password" id="apisecret" size="20" style="width: 100%;"/>'+
         '<br>'+
         '<input type="checkbox" id="storeapisecret" /> <label for="storeapisecret">'+translate('Store hash on this computer (Use only on private computers)')+'</label>'+
         '<div id="apisecrethash">'+

lib/language.js

@@ -14119,7 +14119,7 @@ function init() {
     language.lang = newlang;
 
     language.languages.forEach(function (l) {
-      if (l.code == language.lang && l.speechCode) language.speechCode = l.speechCode;
+      if (l.code === language.lang && l.speechCode) language.speechCode = l.speechCode;
     });
 
     return language();

views/clockviews/shared.html

@@ -3,9 +3,9 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  
+
   <title>Nightscout</title>
-  
+
   <link href="/images/round1.png" rel="icon" id="favicon" type="image/png" />
   <link rel="apple-touch-icon" sizes="57x57" href="/images/apple-touch-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/images/apple-touch-icon-60x60.png">
@@ -16,11 +16,11 @@
   <link rel="apple-touch-icon" sizes="144x144" href="/images/apple-touch-icon-144x144.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon-152x152.png">
   <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-180x180.png">
-  
+
   <style type="text/css">
-    @import url("//fonts.googleapis.com/css?family=Open+Sans:700"); 
+    @import url("//fonts.googleapis.com/css?family=Open+Sans:700");
     <%- include(face + '.css', {}); %>
-  
+
   </style>
 </head>
 
@@ -30,19 +30,41 @@
     <div class="inner">
       <div id="trend">
         <div id="bgnow"></div>
-        <div id="arrowDiv"><img id="arrow" src=""/></div>
+        <div id="arrowDiv"><img id="arrow" src="" alt="arrow"/></div>
       </div>
       <div id="clock"></div>
       <div id="staleTime"></div>
     </div>
   </main>
-
-  <script src="/api/v1/status.js"></script>
   <script src="<%= locals.bundle %>/js/bundle.clock.js?v=<%= locals.cachebuster %>"></script>
-  
+
   <script type="text/javascript">
-    let clockFace = "<%= face  %>"; // can now be used in scripts
-    window.Nightscout.client.init( );
+    var clockFace = "<%= face  %>"; // can now be used in scripts
+
+    var parts = (location.search || '?').substring(1).split('&');
+    var token = '';
+    parts.forEach(function (val) {
+      if (val.startsWith('token=')) {
+        token = val.substring('token='.length);
+      }
+    });
+
+    var secret = typeof localStorage !== 'undefined' ? localStorage.getItem('apisecrethash') : '';
+    var src = '/api/v1/status.js?t=' + Date.now();
+
+    if (secret) {
+      src += '&secret=' + secret;
+    } else if (token) {
+      src += '&token=' + token;
+    }
+
+    var script = document.createElement('script');
+    script.onload = function () {
+      window.Nightscout.client.init( );
+    };
+    script.src = src;
+
+    document.head.appendChild(script); //or something of the likes
   </script>
 </body>
-</html>
+</html>