Преглед изворни кода

HUE-5517 [core] Improved UX of the auto logout modals

Enrico Berti пре 9 година
родитељ
комит
db9d06a224

+ 4 - 0
desktop/core/src/desktop/static/desktop/css/login.css

@@ -35,6 +35,10 @@
   border-radius: 4px;
 }
 
+.login-container a {
+  white-space: normal;
+}
+
 .login-container .logo {
   background-color: #FFF;
   width: 70px;

+ 6 - 2
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -406,7 +406,7 @@ var hueDebugTimer = (function () {
 })();
 
 
-Number.prototype.toHHMMSS = function () {
+Number.prototype.toHHMMSS = function (skipZeroSeconds) {
   var n = this;
   var millis = n % 1000;
   n = (n - millis) / 1000;
@@ -416,7 +416,11 @@ Number.prototype.toHHMMSS = function () {
   n = (n - minutes) / 60;
   var hours = n % 24;
   var days = (n - hours) / 24;
-  return (days > 0 ? days + "d, " : "") + (hours > 0 ? hours + "h, " : "") + (minutes > 0 ? minutes + "m, " : "") + seconds + (millis > 0 && minutes == 0 && hours == 0 && days == 0 ? "." + millis : "") + "s";
+  var val = $.trim((days > 0 ? days + "d, " : "") + (hours > 0 ? hours + "h, " : "") + (minutes > 0 ? minutes + "m, " : "") + ((skipZeroSeconds && seconds === 0) ? '' : (seconds + (millis > 0 && minutes == 0 && hours == 0 && days == 0 ? "." + millis : "") + "s")));
+  if (val[val.length - 1] === ',') {
+    val = val.substr(0, val.length - 1);
+  }
+  return val;
 }
 
 String.prototype.hashCode = function() {

+ 4 - 0
desktop/core/src/desktop/static/desktop/spec/hueUtilsSpec.js

@@ -24,6 +24,10 @@
       expect(Number(10123).toHHMMSS()).toEqual('10.123s');
     });
 
+    it("should skip the seconds if it's zero and it's specified in the function", function() {
+      expect(Number(60000).toHHMMSS(true)).toEqual('1m');
+    });
+
     it("should have the String.startsWith polyfill", function() {
       expect('banana'.startsWith('ba')).toBeTruthy();
     });

+ 9 - 9
desktop/core/src/desktop/templates/common_footer.mako

@@ -54,23 +54,23 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
     $(document).ajaxComplete(function (event, xhr, settings) {
       if (xhr.responseText === '/* login required */') {
         isAutoLogout = settings.url == '/desktop/debug/is_idle';
-
-        // if isAutoLogout --> auto-logout
-        // else logged-out (but could we use a regular modal without any white, like the sample popup for example?)
-
         $('.blurred').removeClass('blurred');
+
         if ($('#login-modal').length > 0 && $('#login-modal').is(':hidden')) {
           $('#login-modal .link-message').hide();
-          if (xhr.status === 403) {
+          if (isAutoLogout) {
+            $('body').children(':not(#login-modal)').addClass('blurred');
             $('#login-modal .auto-logged-out').show();
-            $('#login-modal').modal('show');
+            $('#login-modal').modal({
+              backdrop: 'static',
+              keyboard: false
+            });
           }
           else {
-            $('body').children(':not(#login-modal)').addClass('blurred');
             $('#login-modal .logged-out').show();
             $('#login-modal').modal({
-              backdrop: 'static',
-              keyboard: false
+              backdrop: false,
+              keyboard: true
             });
           }
           window.setTimeout(function () {

+ 13 - 9
desktop/core/src/desktop/templates/login_modal.mako

@@ -26,28 +26,32 @@
 <div id="login-modal" class="modal fade hide" style="padding: 0px!important;box-shadow: none;background: transparent;">
 
   <div class="login-container">
-      <a href="#" class="close wrong-token link-message" data-dismiss="modal" style="display: none; margin: 10px">&times;</a>
+      <a href="#" class="close logged-out link-message" data-dismiss="modal" style="display: none; margin: 10px">&times;</a>
       <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70"></div>
-      <h4 class="muted" style="margin-bottom: 50px">
-        ${ _('Your session has expired.')}
-        <br/>
-        <a id="reload" class="pointer">
+      <h4 class="muted" style="margin-bottom: 50px; padding: 30px">
         <span class="logged-out link-message" style="display: none">
-          ${ _('Your current action requires to reload this page to sign in again') }
+          ${ _('Your session expired and your current action requires to') }
+          <a class="reload pointer">
+            ${ _('reload this page') }
+          </a>
         </span>
         <span class="auto-logged-out link-message" style="display: none">
-          ${ _('We did not hear from you for about %s and for security reason Hue logged you out. Please reload this page to continue') % conf.AUTH.IDLE_SESSION_TIMEOUT.get() }
+          ${ _('We did not hear from you for about') } <strong class="time">${ conf.AUTH.IDLE_SESSION_TIMEOUT.get() }</strong> ${ _('and for security reasons Hue logged you out') }
+          <div class="margin-top-30"></div>
+          <a class="reload pointer">
+            ${ _('Please reload this page to continue') }
+          </a>
         </span>
-        </a>
       </h4>
   </div>
 </div>
 
 <script>
   $(document).ready(function () {
-    $('#reload').on('click', function () {
+    $('.reload').on('click', function () {
       location.reload();
     });
+    $('.time').text(($('.time').text()*1000).toHHMMSS(true));
   });
 </script>