فهرست منبع

HUE-1904 [core] Friendlier login page

Eased proportions
Got rid of labels
The page is using the common_header now
Added global tour to our blog
Enrico Berti 11 سال پیش
والد
کامیت
70cd8b281a

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

@@ -25,8 +25,8 @@ class AuthenticationForm(AuthAuthenticationForm):
   """
   Adds appropriate classes to authentication form
   """
-  username = CharField(label=_t("Username"), max_length=30, widget=TextInput(attrs={'class': 'input-large', 'maxlength': 30}))
-  password = CharField(label=_t("Password"), widget=PasswordInput(attrs={'class': 'input-large', 'maxlength': 30}))
+  username = CharField(label=_t("Username"), max_length=30, widget=TextInput(attrs={'maxlength': 30, 'placeholder': _t("Username")}))
+  password = CharField(label=_t("Password"), widget=PasswordInput(attrs={'maxlength': 30, 'placeholder': _t("Password")}))
 
 
 class UserCreationForm(AuthUserCreationForm):

+ 7 - 1
desktop/core/src/desktop/templates/common_header.mako

@@ -291,11 +291,17 @@ from django.utils.translation import ugettext as _
     <li id="jHueTourFlagPlaceholder"></li>
     <li><a title="${_('Sign out')}" rel="navigator-tooltip" href="/accounts/logout/"><i class="fa fa-sign-out"></i></a></li>
   </ul>
-      % endif
+  % else:
+  <ul class="nav nav-pills" style="margin-right: 40px">
+    <li id="jHueTourFlagPlaceholder"></li>
+  </ul>
+  % endif
   </div>
     <a class="brand nav-tooltip pull-left" title="${_('About Hue')}" rel="navigator-tooltip" href="/about"><img src="/static/art/hue-logo-mini-white.png" data-orig="/static/art/hue-logo-mini-white.png" data-hover="/static/art/hue-logo-mini-white-hover.png"/></a>
      <ul class="nav nav-pills pull-left">
+       % if user.is_authenticated():
        <li><a title="${_('My documents')}" rel="navigator-tooltip" href="${ url('desktop.views.home') }" style="padding-bottom:2px!important"><i class="fa fa-home" style="font-size: 19px"></i></a></li>
+       % endif
        <%
          query_apps = count_apps(apps, ['beeswax', 'impala', 'rdbms', 'pig', 'jobsub', 'spark']);
        %>

+ 174 - 182
desktop/core/src/desktop/templates/login.mako

@@ -14,182 +14,191 @@
 ## See the License for the specific language governing permissions and
 ## limitations under the License.
 <%!
-from desktop import conf
-from django.utils.translation import ugettext as _
+  from desktop import conf
+  from django.utils.translation import ugettext as _
+  from desktop.views import commonheader, commonfooter
 %>
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  %if first_login_ever:
-    <title>${_('Hue - Sign up')}</title>
-  %else:
-    <title>${_('Hue - Sign in')}</title>
-  %endif
-
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="">
-  <meta name="author" content="">
-
-  <link href="/static/ext/css/bootplus.css" rel="stylesheet">
-  <link href="/static/ext/css/font-awesome.min.css" rel="stylesheet">
-  <link href="/static/css/hue3.css" rel="stylesheet">
-
-  <style type="text/css">
-    % if conf.CUSTOM.BANNER_TOP_HTML.get():
-      body {
-        display: none;
-        padding-top: 120px;
-      }
-      .banner {
-        height: 40px;
-        width: 100%;
-        padding: 0;
-        position: fixed;
-        top: 0;
-        background-color: #F9F9F9;
-        z-index: 1033;
-      }
-      .navigator {
-        top: 30px!important;
-      }
-    % else:
-      body {
-        display: none;
-        padding-top: 80px;
-      }
-    % endif
-  </style>
-
-  <style type="text/css">
-    #logo {
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-      margin-bottom: 30px
-    }
-
-    .login-content {
-      width: 400px;
-      display: block;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .login-content label {
-      margin-bottom: 20px;
-      font-size: 16px;
-    }
-
-    .login-content input[type='text'], .login-content input[type='password'] {
-      width: 90%;
-      margin-top: 10px;
-      font-size: 18px;
-    }
-
-    .login-content input {
-      width: 100%;
-      padding: 10px 16px;
-    }
-
-    hr {
-      border-top-color: #DEDEDE;
-    }
-
-    ul.errorlist li {
-      font-size: 13px;
-      font-weight: normal;
-      font-style: normal;
-    }
+${ commonheader("Welcome to Hue", "login", user, "50px") | n,unicode }
 
-    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);
-    }
+<style type="text/css">
+  body {
+    background-color: #FFF;
+  }
 
-    .well {
-      border: 1px solid #D8D8D8;
-      border-radius: 3px 3px 3px 3px;
+  @-webkit-keyframes spinner {
+    from {
+      -webkit-transform: rotateY(0deg);
     }
-
-    .footer {
-      position: fixed;
-      bottom: 0;
-      background-color: #338BB8;
-      height: 4px;
-      width: 100%;
+    to {
+      -webkit-transform: rotateY(-360deg);
     }
-  </style>
-</head>
-
-<body>
-
-% if conf.CUSTOM.BANNER_TOP_HTML.get():
-  <div id="banner-top" class="banner">
-    ${ conf.CUSTOM.BANNER_TOP_HTML.get() | n,unicode }
-  </div>
-% endif
+  }
+
+  #logo {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
+    background: #FFF url("/static/art/hue-login-logo-ellie.png") 50% 14px no-repeat;
+    width: 130px;
+    height: 130px;
+    -webkit-border-radius: 65px;
+    -moz-border-radius: 65px;
+    border-radius: 65px;
+    border: 1px solid #EEE;
+  }
+
+  #logo.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-content {
+    width: 360px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .input-prepend {
+    width: 100%;
+  }
+
+  .input-prepend .add-on {
+    min-height: 38px;
+    line-height: 38px;
+    color: #999;
+  }
+
+  .login-content input {
+    width: 85%;
+    min-height: 38px;
+    font-size: 18px;
+  }
+
+  .login-content .input-prepend.error input, .login-content .input-prepend.error .add-on {
+    border-top-color: #dd4b39;
+    border-bottom-color: #dd4b39;
+  }
+
+  .login-content .input-prepend.error input {
+    border-right-color: #dd4b39;
+  }
+
+  .login-content .input-prepend.error .add-on {
+    border-left-color: #dd4b39;
+  }
+
+  .login-content input[type='submit'] {
+    height: 44px;
+    min-height: 44px;
+    font-weight: normal;
+    text-shadow: none;
+  }
+
+  hr {
+    border-top-color: #DEDEDE;
+  }
+
+  ul.errorlist {
+    text-align: left;
+    margin-top: -4px;
+    margin-bottom: 4px;
+  }
+
+  ul.errorlist li {
+    font-size: 13px;
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  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);
+  }
+
+  .well {
+    border: 1px solid #D8D8D8;
+    border-radius: 3px 3px 3px 3px;
+    background-color: #F7F7F7;
+  }
+
+  .footer {
+    position: fixed;
+    bottom: 0;
+    background-color: #338BB8;
+    height: 6px;
+    width: 100%;
+  }
+
+  h3 {
+    color: #666;
+    font-size: 24px;
+    font-weight: 400;
+    margin-bottom: 20px;
+  }
+</style>
 
 
 <div class="footer"></div>
 
-<div class="navigator">
-  <div class="pull-right">
-    <ul class="nav nav-pills">
-      <li id="jHueTourFlagPlaceholder"></li>
-    </ul>
-  </div>
-  <a class="brand nav-tooltip pull-left" href="#"><img src="/static/art/hue-logo-mini-white.png"
-                                                       data-orig="/static/art/hue-logo-mini-white.png"
-                                                       data-hover="/static/art/hue-logo-mini-white-hover.png"/></a>
-  <ul class="nav nav-pills pull-left hide" id="visit">
-    <li><a title="${_('Visit gethue.com')}" href="http://gethue.com">${_('Fell asleep? Visit us on gethue.com instead!')} <i class="fa fa-external-link-circle"></i></a></li>
-  </ul>
-</div>
-
-
 <div class="container">
   <div class="row">
-    <div class="login-content">
+    <div class="login-content center">
+      <div id="logo"></div>
+
       <form method="POST" action="${action}" class="well">
-        <img id="logo" src="/static/art/hue-login-logo.png" data-orig="/static/art/hue-login-logo.png"
-             data-hover="/static/art/hue-login-logo-skew.png"/>
-        <label
+
+        %if first_login_ever:
+          <h3>${_('Create your Hue account')}</h3>
+        %else:
+          <h3>${_('Sign in to continue to Hue')}</h3>
+        %endif
+
+        %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>.
+          </div>
+        %endif
+
+        <div class="input-prepend
           % if backend_name == 'OAuthBackend':
-            class="hide"
+            hide
           % endif
-            ><i class="fa fa-user"></i> ${_('Username')}
+        ">
+          <span class="add-on"><i class="fa fa-user"></i></span>
           ${ form['username'] | n,unicode }
-          ${ form['username'].errors | n,unicode }
-        </label>
-        <label
+        </div>
+
+        ${ form['username'].errors | n,unicode }
+
+        <div class="input-prepend
           % if backend_name in ('AllowAllBackend', 'OAuthBackend'):
-            class="hide"
+            hide
           % endif
-            ><i class="fa fa-lock"></i> ${_('Password')}
+        ">
+          <span class="add-on"><i class="fa fa-lock"></i></span>
           ${ form['password'] | n,unicode }
-          ${ form['password'].errors | n,unicode }
-        </label>
+        </div>
+        ${ form['password'].errors | n,unicode }
 
         %if login_errors:
-            <div class="alert alert-error" style="text-align: center">
-              <strong><i class="fa fa-exclamation-triangle"></i> ${_('Error!')}</strong> ${_('Invalid username or password.')}
-            </div>
+          <div class="alert alert-error" style="text-align: center">
+            <strong><i class="fa fa-exclamation-triangle"></i> ${_('Error!')}
+            </strong> ${_('Invalid username or password.')}
+          </div>
         %endif
-
+        <hr/>
         %if first_login_ever:
-            <div class="alert alert-block">
-              <i class="fa fa-exclamation-triangle"></i>
-            ${_('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>.
-            </div>
-            <hr/>
-            <input type="submit" class="btn btn-large btn-primary" value="${_('Sign up')}"/>
+          <input type="submit" class="btn btn-large btn-primary" value="${_('Create account')}"/>
         %else:
-            <hr/>
-            <input type="submit" class="btn btn-large btn-primary" value="${_('Sign in')}"/>
+          <input type="submit" class="btn btn-large btn-primary" value="${_('Sign in')}"/>
         %endif
         <input type="hidden" name="next" value="${next}"/>
       </form>
@@ -197,41 +206,24 @@ from django.utils.translation import ugettext as _
   </div>
 </div>
 
-<script src="/static/ext/js/jquery/jquery-2.0.2.min.js"></script>
 <script>
   $(document).ready(function () {
-    // prevents framebusting and clickjacking
-    if (self == top){
-      $("body").show();
-    }
-    else {
-      top.location = self.location;
-    }
-
-    var _skew = -1;
-    $("[data-hover]").on("mouseover", function () {
-      var _this = $(this);
-      _skew = window.setTimeout(function () {
-        _this.attr("src", _this.data("hover"));
-        $("#visit").removeClass("hide");
-      }, 3000);
-    });
-
-    $("[data-hover]").on("mouseout", function () {
-      $(this).attr("src", $(this).data("orig"));
-      window.clearTimeout(_skew);
+    $("form").on("submit", function () {
+      window.setTimeout(function () {
+        $("#logo").addClass("waiting");
+      }, 1000);
     });
 
     % if backend_name == 'AllowAllBackend':
-        $('#id_password').val('password');
+      $('#id_password').val('password');
     % endif
 
     % if backend_name == 'OAuthBackend':
-        $("input").css({"display": "block", "margin-left": "auto", "margin-right": "auto"});
-        $("input").bind('click', function () {
-          window.location.replace('/login/oauth/');
-          return false;
-        });
+      $("input").css({"display": "block", "margin-left": "auto", "margin-right": "auto"});
+      $("input").bind('click', function () {
+        window.location.replace('/login/oauth/');
+        return false;
+      });
     % endif
 
     $("ul.errorlist").each(function () {
@@ -239,5 +231,5 @@ from django.utils.translation import ugettext as _
     });
   });
 </script>
-</body>
-</html>
+
+${ commonfooter(messages) | n,unicode }

+ 7 - 0
desktop/core/src/desktop/templates/tours.mako

@@ -20,6 +20,13 @@ from django.utils.translation import ugettext as _
 <script type="text/javascript">
 $.jHueTour({
   "tours":[
+    {
+      "name": "thehueblog",
+      "desc": "${_("The Hue Blog")}",
+      "path": "/",
+      "video": "",
+      "blog": "http://blog.gethue.com"
+    },
     {"name": "huehomedoc", "desc": "${_("Get started!")}", "path": "/home", "steps": [
       {"arrowOn": ".currentApp", "expose": ".navbar-fixed-top", "title": "${_("Your new home.")}", "content": "${_("This is where you can access all your documents and you can tag them per project. Your home is always reachable from any part of Hue, just click on the house icon on the top navigator bar.")}", "placement": "bottom", "onShown": "", "waitForAction": false, "left": 90},
       {"arrowOn": ".sidebar-nav", "expose": ".sidebar-nav", "title": "${_("Actions and projects")}", "content": "${_("From here you can create new documents or see a specific project or any trashed document for instance.")}", "placement": "right", "onShown": "", "waitForAction": false},

BIN
desktop/core/static/art/hue-login-logo-ellie.png