فهرست منبع

HUE-3981 [core] Restyle the login page a little

Enrico Berti 9 سال پیش
والد
کامیت
0036d91

+ 1 - 1
desktop/core/src/desktop/auth/forms.py

@@ -41,7 +41,7 @@ class AuthenticationForm(AuthAuthenticationForm):
   Adds appropriate classes to authentication form
   """
   error_messages = {
-    'invalid_login': _t("Invalid username or password."),
+    'invalid_login': _t("Invalid username or password"),
     'inactive': _t("Account deactivated. Please contact an administrator."),
   }
 

+ 88 - 113
desktop/core/src/desktop/static/desktop/css/login.css

@@ -25,158 +25,118 @@
   }
 }
 
-.login-box .logo {
-  background-color: #FFF;
-  width: 60px;
-  height: 60px;
-  text-align: center;
-  -webkit-border-radius: 30px;
-  -moz-border-radius: 30px;
-  border-radius: 30px;
-  margin-left: 400px;
-  margin-top: -30px;
-}
-
-.login-box .logo img {
-  margin-top: 2px;
-}
-
-.login-box .logo img.waiting {
-  -webkit-animation-name: spinner;
-  -webkit-animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-duration: 2s;
-  -webkit-transform-style: preserve-3d;
-}
-
-.login-box {
+.login-container {
   width: 500px;
   display: block;
   margin: auto;
   margin-bottom: 50px;
-  background: #fff;
-  border: 1px solid #ddd;
+  background: #FFFFFF;
+  border: 1px solid #E0E2E3;
+  border-radius: 4px;
 }
 
-.login-box .input-prepend.error input, .login-box .input-prepend.error .add-on {
-  border-top-color: #dd4b39;
-  border-bottom-color: #dd4b39;
+.login-container .logo {
+  background-color: #FFF;
+  width: 70px;
+  height: 70px;
+  text-align: center;
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  border-radius: 35px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 35px;
+  margin-bottom: 35px;
 }
 
-.login-box .input-prepend.error input {
-  border-right-color: #dd4b39;
+.login-container .logo img {
+  margin-top: 2px;
 }
 
-.login-box .input-prepend.error .add-on {
-  border-left-color: #dd4b39;
+.login-container form {
+  margin-left: 75px;
+  margin-right: 75px;
 }
 
-.login-box input[type='submit'] {
-  height: 44px;
-  min-height: 44px;
-  font-weight: normal;
-  text-shadow: none;
-  margin-left: 0;
+.login-container form input[type='submit'], .login-container form select {
+  width: 100%;
 }
 
-.login-header {
-  background-color: #fafafa !important;
-  padding: 35px;
+.login-container form .text-input {
+  padding: 0 10px 2px 10px;
+  border: 1px solid #E0E2E3;
+  border-radius: 3px;
+  margin-bottom: 20px;
 }
 
-.login-header h1 {
-  margin: 0;
-  font-size: 24px;
-  line-height: 24px;
+.login-container form .text-input.error {
+  border-color: #D0021B;
 }
 
-.login-header h2 {
-  margin: 5px 0 0 0;
-  color: #757575;
+.login-container form ul.errorlist li {
+  color: #D0021B;
+  padding: 0;
   font-weight: normal;
-  font-size: 19px;
-  line-height: 19px;
+  font-style: normal;
+  margin-top: -10px;
+  margin-bottom: 20px;
 }
 
-.login-content {
-  padding: 35px;
+:-webkit-autofill, :-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0px 1000px white inset!important;
+  -webkit-text-fill-color: #9e9e9e!important;
 }
 
-.login-box ul.errorlist {
-  text-align: left;
-  margin-bottom: 4px;
-  margin-top: -4px;
+::-webkit-input-placeholder {
+   color: #CCD1D9!important;
 }
 
-.login-box .alert-error ul.errorlist {
-  text-align: center;
-  margin-top: 0;
+:-moz-placeholder { /* Firefox 18- */
+   color: #CCD1D9!important;
 }
 
-.login-box ul.errorlist li {
-  font-size: 13px;
-  font-weight: normal;
-  font-style: normal;
+::-moz-placeholder {  /* Firefox 19+ */
+   color: #CCD1D9!important;
+}
+
+:-ms-input-placeholder {
+   color: #CCD1D9!important;
 }
 
-.login-content input[type='text'], .login-content input[type='password'], .login-content input[type='text']:hover, .login-content input[type='password']:hover {
-  padding: 0 10px 2px 0;
-  height: auto;
+.login-container form input[type='text'], .login-container form input[type='password'], .login-container form input[type='text']:hover, .login-container form input[type='password']:hover {
+  padding: 0;
   border: none;
-  border-bottom: 2px solid #eeeeee;
-  border-radius: 0;
-  background: none;
   box-shadow: none;
+  background: #FFFFFF;
+  height: 45px;
+  font-size: 16px;
   color: #9e9e9e;
   font-weight: 400;
   resize: none;
+  margin: 0;
   width: 100%;
-  font-size: 16px;
-}
-
-.login-content select {
-  width: 100%;
-  font-size: 14px;
-  margin-top: 4px;
-}
-
-.login-box input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
-}
-
-.login-content input.error {
-  border-color: #b94a48;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.login-box .btn-large.btn-primary {
-  width: 100%;
-  margin-top: 20px;
 }
 
-.login-box .chosen-single {
-  min-height: 38px;
-  text-align: left;
-  font-size: 18px;
-}
-
-.login-box .chosen-single span {
-  display: inline;
-  line-height: 38px;
-  vertical-align: middle;
+.login-container form input[type='submit'] {
+  height: 45px;
+  min-height: 45px;
+  font-weight: normal;
+  text-shadow: none;
+  margin-left: 0;
+  background: #338BB8;
+  border-color: #338BB8;
+  border-radius: 3px;
+  font-size: 16px;
+  margin-bottom: 55px;
 }
 
-.login-box .chosen-container-active.chosen-with-drop .chosen-single div b,
-.login-box .chosen-container-single .chosen-single div b {
-  background-position-x: 1px;
-  background-position-y: 10px;
+.login-container h4 {
+  text-align: center;
+  margin-bottom: 20px;
 }
 
-.login-box .chosen-container-active.chosen-with-drop .chosen-single div b {
-  background-position-x: -17px;
-  background-position-y: 10px;
+.tooltip {
+  z-index: 10000;
 }
 
 @media screen and (max-width: 800px) {
@@ -186,7 +146,22 @@
   .login-box {
     width: 300px;
   }
-  .login-box .logo {
+  .navigator {
     display: none;
   }
-}
+  .login-container form {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .login-container form input[type='submit'] {
+    margin-bottom: 20px;
+  }
+}
+
+@media screen and (max-width: 540px) {
+  .login-container {
+    width: 90%;
+  }
+}
+
+

+ 71 - 72
desktop/core/src/desktop/templates/login.mako

@@ -32,91 +32,90 @@ ${ commonheader(_("Welcome to Hue"), "login", user, "50px", True, True) | n,unic
   }
 </style>
 
+<div class="navigator">
+  <div class="pull-right">
 
-<div class="container-fluid">
-  <div class="row-fluid">
-    <div class="login-box">
-      <form method="POST" action="${action}">
-      ${ csrf_token(request) | n,unicode }
-
-      <div class="login-header">
-        <h1>${ _('Welcome to Hue') }</h1>
-        %if first_login_ever:
-          <h2>${_('Create your Hue account')}</h2>
-        %else:
-          <h2>${_('Please sign in to continue')}</h2>
-        %endif
-      </div>
+  <ul class="nav nav-pills">
+    <li><a href="http://gethue.com" target="_blank" title="${_('Go to gethue.com')}" rel="navigator-tooltip" data-placement="left"><i class="fa fa-globe"></i></a></li>
+  </ul>
 
-      <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="50" height="50"></div>
+  </div>
+  <a class="brand pull-left" href="/"><img src="${ static('desktop/art/hue-logo-mini-white.png') }" data-orig="${ static('desktop/art/hue-logo-mini-white.png') }" data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }" /></a>
+</div>
 
-      <div class="login-content">
 
-        %if first_login_ever:
-          <div class="alert alert-block">
-            ${_('Since this is your first time logging in, pick any username and password. Be sure to remember these, as')}
-            <strong>${_('they will become your Hue superuser credentials.')}</strong>
-            %if is_password_policy_enabled():
-	          <p>${get_password_hint()}</p>
-            %endif
-          </div>
-        %endif
+<div class="login-container">
 
-        <div class="
-          %if backend_names == ['OAuthBackend']:
-            hide
-          %endif
-        ">
-          ${ form['username'] | n,unicode }
-        </div>
-
-        ${ form['username'].errors | n,unicode }
-
-        <div class="
-          %if 'AllowAllBackend' in backend_names or backend_names == ['OAuthBackend']:
-            hide
-          %endif
-        ">
-          ${ form['password'] | n,unicode }
-        </div>
-
-        ${ form['password'].errors | n,unicode }
-
-        %if active_directory:
-        <div>
-          ${ form['server'] | n,unicode }
-        </div>
-        %endif
+  <form method="POST" action="${action}" autocomplete="off">
+    ${ csrf_token(request) | n,unicode }
 
-        %if login_errors and not form['username'].errors and not form['password'].errors:
-          <div class="alert alert-error" style="text-align: center">
-            <strong><i class="fa fa-exclamation-triangle"></i> ${_('Error!')}</strong>
-            %if form.errors:
-              % for error in form.errors:
-               ${ form.errors[error]|unicode,n }
-              % endfor
-            %endif
-          </div>
-        %endif
+    <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70"></div>
 
-        %if first_login_ever:
-          <input type="submit" class="btn btn-large btn-primary" value="${_('Create account')}"/>
-        %else:
-          <input type="submit" class="btn btn-large btn-primary" value="${_('Sign in')}"/>
+    %if first_login_ever:
+      <div class="alert alert-info center">
+        ${_('Since this is your first time logging in, pick any username and password. Be sure to remember these, as')}
+        <strong>${_('they will become your Hue superuser credentials.')}</strong>
+        %if is_password_policy_enabled():
+        <p>${get_password_hint()}</p>
         %endif
-        <input type="hidden" name="next" value="${next}"/>
-        </div>
+      </div>
+    %endif
 
-      </form>
+    <div class="text-input
+      %if backend_names == ['OAuthBackend']:
+        hide
+      %endif
+      %if form['username'].errors or login_errors:
+        error
+      %endif
+    ">
+      ${ form['username'] | n,unicode }
+    </div>
 
-      %if conf.CUSTOM.LOGIN_SPLASH_HTML.get():
-      <div class="alert alert-info" id="login-splash">
-        ${ conf.CUSTOM.LOGIN_SPLASH_HTML.get() | 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
+
+    %if first_login_ever:
+      <input type="submit" class="btn btn-primary" value="${_('Create Account')}"/>
+    %else:
+      <input type="submit" class="btn btn-primary" value="${_('Sign In')}"/>
+    %endif
+    <input type="hidden" name="next" value="${next}"/>
+
+  </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>
-  <div class="row">
+  %endif
+</div>
+
+
+<div class="container-fluid">
+  <div class="row-fluid">
     <div class="center muted">
       ${ _('Hue and the Hue logo are trademarks of Cloudera, Inc.') }
     </div>

+ 22 - 24
desktop/core/src/desktop/templates/login_modal.mako

@@ -22,55 +22,59 @@
 
 
 <link rel="stylesheet" href="${ static('desktop/css/login.css') }">
-<link rel="stylesheet" href="${ static('desktop/ext/chosen/chosen.min.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-box">
-    <form method="POST" action="${action}">
-    <input type="hidden" name="csrfmiddlewaretoken" value="">
-    <div class="login-header">
-      <h1>${ _('You have been logged out') }</h1>
-      <h2>${_('Sign in to continue to use Hue')}</h2>
-    </div>
+  <div class="login-container">
+    <form method="POST" action="${action}" autocomplete="off">
+      <input type="hidden" name="csrfmiddlewaretoken" value="">
 
-    <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="50" height="50"></div>
+      <div class="logo"><img src="${ static('desktop/art/hue-login-logo-ellie@2x.png') }" width="70" height="70"></div>
 
-    <div class="login-content">
+      <h4 class="muted">${ _('You have been logged out, please sign in again') }</h4>
 
-      <div class="
+      <div class="text-input
         %if backend_names == ['OAuthBackend']:
           hide
         %endif
+        %if form['username'].errors or login_errors:
+          error
+        %endif
       ">
         ${ form['username'] | n,unicode }
       </div>
 
-      ${ form['username'].errors | n,unicode }
-
-      <div class="
+      <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>
 
-      ${ form['password'].errors | n,unicode }
-
       %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-large btn-primary" value="${_('Sign in')}"/>
+      <input type="submit" class="btn btn-primary" value="${_('Sign In')}"/>
       <input type="hidden" name="next" value="${next}"/>
       <input type="hidden" name="fromModal" value="true"/>
-      </div>
 
     </form>
 
@@ -82,14 +86,8 @@
   </div>
 </div>
 
-<script src="${ static('desktop/ext/chosen/chosen.jquery.min.js') }" type="text/javascript" charset="utf-8"></script>
 <script>
   $(document).ready(function () {
-    $('#id_server').chosen({
-      disable_search_threshold: 5,
-      width: "90%",
-      no_results_text: "${_('Oops, no database found!')}"
-    });
 
     $('#login-modal form').on('submit', function () {
       $('input[name="csrfmiddlewaretoken"]').val($.cookie('csrftoken'));