Browse Source

HUE-4873 [security] Change login modal UX

Enrico Berti 9 năm trước cách đây
mục cha
commit
6d88fc467b

+ 14 - 6
desktop/core/src/desktop/templates/common_footer.mako

@@ -52,15 +52,23 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
     // global catch for ajax calls after the user has logged out
     var isLoginRequired = false;
     $(document).ajaxComplete(function (event, xhr, settings) {
-      if (IDLE_SESSION_TIMEOUT == -1 && settings && settings.url === '/jobbrowser/jobs/') {
-        return;
-      }
-      if (xhr.responseText === '/* login required */' && !isLoginRequired) {
+      if ((xhr.responseText === '/* login required */' || xhr.status === 403) && !isLoginRequired) {
         isLoginRequired = true;
         $('.blurred').removeClass('blurred');
         $('body').children(':not(#login-modal)').addClass('blurred');
-        if ($('#login-modal').length > 0 && $('#login-modal').is(':hidden')){
-          $('#login-modal').modal('show');
+        if ($('#login-modal').length > 0 && $('#login-modal').is(':hidden')) {
+          $('#login-modal .link-message').hide();
+          if (xhr.status === 403) {
+            $('#login-modal .wrong-token').show();
+            $('#login-modal').modal('show');
+          }
+          else {
+            $('#login-modal .logged-out').show();
+            $('#login-modal').modal({
+              backdrop: 'static',
+              keyboard: false
+            });
+          }
           window.setTimeout(function () {
             $('.jHueNotify').remove();
           }, 200);

+ 17 - 89
desktop/core/src/desktop/templates/login_modal.mako

@@ -23,103 +23,31 @@
 
 <link rel="stylesheet" href="${ static('desktop/css/login.css') }">
 
-<div id="login-modal" class="modal fade hide" data-backdrop="static" data-keyboard="false" style="padding: 0px!important;box-shadow: none;background: transparent;">
-  <div class="login-container">
-    <form method="POST" action="${action}" autocomplete="off">
-      <input type="hidden" name="csrfmiddlewaretoken" value="">
+<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>
       <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70"></div>
-
-      <h4 class="muted">${ _('You have been logged out, please sign in again') }</h4>
-
-      <div class="text-input
-        %if backend_names == ['OAuthBackend']:
-          hide
-        %endif
-        %if form['username'].errors or login_errors:
-          error
-        %endif
-      ">
-        ${ form['username'] | n,unicode }
-      </div>
-
-      <div class="text-input
-        %if 'AllowAllBackend' in backend_names or backend_names == ['OAuthBackend']:
-          hide
-        %endif
-        %if form['password'].errors or login_errors:
-          error
-        %endif
-      ">
-        ${ form['password'] | n,unicode }
-      </div>
-
-      %if active_directory:
-      <div>
-        ${ form['server'] | n,unicode }
-      </div>
-      %endif
-
-      %if login_errors and not form['username'].errors and not form['password'].errors:
-        %if form.errors:
-          % for error in form.errors:
-           ${ form.errors[error]|unicode,n }
-          % endfor
-        %endif
-      %endif
-
-      <div class="login-error alert alert-error hide" style="text-align: center">
-        <strong><i class="fa fa-exclamation-triangle"></i> ${_('Sign in failed. Please try again.')}</strong>
-      </div>
-
-      <input type="submit" class="btn btn-primary" value="${_('Sign In')}"/>
-      <input type="hidden" name="next" value="${next}"/>
-      <input type="hidden" name="fromModal" value="true"/>
-
-    </form>
-
-    %if conf.CUSTOM.LOGIN_SPLASH_HTML.get():
-    <div class="alert alert-info" id="login-splash">
-      ${ conf.CUSTOM.LOGIN_SPLASH_HTML.get() | n,unicode }
-    </div>
-    %endif
+      <h4 class="muted" style="margin-bottom: 50px">
+        ${ _('Your session has expired.')}
+        <br/>
+        <a id="reload" class="pointer">
+        <span class="logged-out link-message" style="display: none">
+          ${ _('Reload this page to sign in again') }
+        </span>
+        <span class="wrong-token link-message" style="display: none">
+          ${ _('Please reload this page') }
+        </span>
+        </a>
+      </h4>
   </div>
 </div>
 
 <script>
   $(document).ready(function () {
-
-    $('#login-modal form').on('submit', function () {
-      %if request and request.COOKIES and request.COOKIES.get('csrftoken','')!='':
-        $('input[name="csrfmiddlewaretoken"]').val("${request.COOKIES.get('csrftoken')}");
-      %else:
-        $('input[name="csrfmiddlewaretoken"]').val("");
-      %endif
-
-      $.ajax({
-        type: 'POST',
-        url: $(this).attr('action'),
-        data: $(this).serialize(),
-        success: function (response) {
-          $('#login-modal .logo').find('img').removeClass('waiting');
-          huePubSub.publish('hue.login.result', response);
-        }
-      });
-      $('#login-modal .logo').find('img').addClass('waiting');
-      return false;
+    $('#reload').on('click', function () {
+      location.reload();
     });
-
-    %if 'AllowAllBackend' in backend_names:
-      $('#id_password').val('password');
-    %endif
-
-    %if backend_names == ['OAuthBackend']:
-      $('#login-modal input').css({'display': 'block', 'margin-left': 'auto', 'margin-right': 'auto'});
-      $('#login-modal input').bind('click', function () {
-        window.location.replace('/login/oauth/');
-        return false;
-      });
-    %endif
   });
 </script>