login: optimized UI for login/register/password reset windows.

rhodecode/public/css/login.less

@@ -1,337 +1,337 b''
 //LOGIN
 
 
 .loginbox {
-    max-width: 65%;
+    max-width: 960px;
     margin: @pagepadding auto;
     font-family: @text-light;
     border: @border-thickness solid @grey5;
     box-sizing: border-box;
 
     @media (max-width:1200px) {
         max-width: 85%;
     }
 
     @media (max-width:768px) {
         max-width: 100%;
         width: 100%;
         margin: 0;
     }
 
     .title {
         float: none;
     }
 
     .header-account {
         min-height: 49px;
         width: 100%;
         padding: 0 @header-padding;
         box-sizing: border-box;
         position: relative;
         vertical-align: bottom;
 
         background-color: @grey1;
         color: @grey5;
 
         .title {
             padding: 0;
             overflow: visible;
         }
 
         &:before,
         &:after {
             content: "";
             clear: both;
             width: 100%;
         }
     }
 
     .loginwrapper {
         float: left;
         height: 100%;
         width: 100%;
         padding: 35px 55px 35px 35px;
         background-color: white;
         box-sizing: border-box;
 
         @media (max-width:414px) {
             padding: 35px;
         }
     }
 
     .left-column {
         float: left;
         position: relative;
         width: 50%;
         height: 100%;
 
         @media (max-width:414px) {
             display:none;
         }
     }
 
     .right-column {
         float: right;
         position: relative;
         width: 50%;
 
         @media (max-width:414px) {
             width: 100%;
         }
     }
 
     .sign-in-image {
         display: block;
         width: 65%;
-        margin: 5% auto;
+        margin: 1% auto;
     }
 
     .sign-in-title {
 
         h4 {
             margin: @padding*2 0;
         }
     }
 
     .form {
         label {
             display: block;
         }
 
         input {
             width: 100%;
             margin: 0 10% @padding 0;
             .box-sizing(border-box) ;
 
             &[type="checkbox"] {
                 clear: both;
                 width: auto;
                 margin: 0 1em @padding 0;
             }
         }
 
         .checkbox {
             display: inline;
             width: auto;
         }
 
         .sign-in {
             clear: both;
             width: 100%;
             margin: @padding 0;
         }
         .pwd_reset {
             font-weight: normal;
         }
         .new_account {
             font-weight: bold;
         }
     }
     .register_message,
     .activation_msg {
         padding: 0 0 @padding;
     }
 
     .buttons,
     .links {
         padding: 0;
     }
 
     .buttons {
         input {
             margin-right: 0;
             .box-sizing(border-box);
         }
 
         #sign_up, #send {
             width: 100%;
         }
     }
 
     .fields {
         .field.field-compact {
             margin-bottom: 0px;
         }
 
         .buttons {
             margin: 0;
         }
 
         .field {
             margin-bottom: 15px;
 
             input {
                 width: 100%;
                 .box-sizing(border-box);
             }
 
             .input {
                 margin-left: 0;
             }
 
             .label {
                 padding-top: 0;
             }
         }
     }
 
     .checkbox {
         margin:  0 0 @textmargin 0;
 
         input[type="checkbox"] {
             width: auto;
         }
 
         label {
             padding: 0;
             min-height: 0;
         }
     }
 
     .activation_msg {
         padding: @padding 0 0;
         color: @grey4;
     }
 
     .links {
         float: right;
         margin: 0;
         padding: 0;
         line-height: 1;
 
         p {
             float: right;
             margin: 0;
             line-height: 1.5em;
         }
     }
 
     p.help-block {
         margin-left: 0;
     }
 }
 
 .user-menu.submenu {
     right: 0!important;
     left: auto!important;
     min-width: 290px;
 }
 
 .user-menu {
     .bookmark-items {
         border-top: @border-thickness solid @grey6;
         margin-top: 1em;
         padding: 1em .5em;
         color: @grey3;
         border-bottom: @grey3;
 
         a {
             padding: 0 !important;
         }
     }
 
 }
 
 
 #quick_login {
     left: auto;
     right: 0;
     padding: @menupadding;
     z-index: 999;
     overflow: hidden;
     background-color: @white;
     border: 1px solid @grey5;
     color: @grey2;
     box-shadow: @dropdown-shadow;
 
     h4 {
         margin-bottom: 12px;
     }
 
     .form {
         width: auto;
     }
 
     label, .field {
         margin-bottom: 0;
     }
 
     .label {
         padding-top: 0;
     }
 
     input {
         min-width: 215px;
         margin: 8px 0 @padding;
     }
 
     input[type="submit"] {
         &:extend(.btn-primary);
         width:100%;
         min-width: 0;
     }
 
     .forgot_password,
     .buttons .register {
         a {
             color: @rcblue;
 
             &:hover {
                 color: @rcdarkblue;
             }
         }
     }
 
     .buttons {
         margin: 0;
     }
 
     .buttons a {
         padding: 8px 0;
         line-height: 1.4em;
         color: @grey4;
 
         &:hover {
             color: @rcblue;
         }
     }
 
     #sign_in {
         margin-bottom: 0
     }
 
     .big_gravatar {
         float: left;
         display: block;
         padding: .5em;
     }
 
     .full_name {
         margin: 0 0 0 70px;
         padding-top: 1em;
     }
 
     .email {
         margin: 0 0 0 70px;
         font-family: @text-light;
     }
 
     ol.links {
         clear:both;
         margin: 0;
         padding: @padding 0 0 0;
 
         li {
             input {
                 margin: @padding 0 0 0;
             }
         }
     }
 }
 .submenu #quick_login li:hover {
     background-color: transparent;
 }
 
 #quick_login_link:hover + #quick_login {
     display: block;
 }

rhodecode/templates/login.mako

@@ -1,106 +1,106 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base/root.mako"/>
 
 <%def name="title()">
     ${_('Sign In')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
+<style>body{background-color:#eeeeee;}</style>
 
-<style>body{background-color:#eeeeee;}</style>
 <div class="loginbox">
     <div class="header-account">
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
                     <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-60x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 % if c.rhodecode_name:
                 <div class="branding">
                    <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                 </div>
                 % endif
             </div>
         </div>
     </div>
 
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
 
-        <div class="left-column">
+        <div class="auth-image-wrapper">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
 
-        <div id="login" class="right-column">
+        <div id="login">
             <%block name="above_login_button" />
             <!-- login -->
             <div class="sign-in-title">
                 <h1>${_('Sign In using username/password')}</h1>
             </div>
             <div class="inner form">
                 ${h.form(request.route_path('login', _query={'came_from': c.came_from}), needs_csrf_token=False)}
 
                     <label for="username">${_('Username')}:</label>
                     ${h.text('username', class_='focus', value=defaults.get('username'))}
                     %if 'username' in errors:
                     <span class="error-message">${errors.get('username')}</span>
                     <br />
                     %endif
 
                     <label for="password">${_('Password')}:
                     %if h.HasPermissionAny('hg.password_reset.enabled')():
                         <div class="pull-right">${h.link_to(_('Forgot your password?'), h.route_path('reset_password'), class_='pwd_reset', tabindex="-1")}</div>
                     %endif
 
                     </label>
                     ${h.password('password', class_='focus')}
                     %if 'password' in errors:
                     <span class="error-message">${errors.get('password')}</span>
                     <br />
                     %endif
 
                     ${h.checkbox('remember', value=True, checked=defaults.get('remember'))}
                     <% timeout = request.registry.settings.get('beaker.session.timeout', '0') %>
                     % if timeout == '0':
                         <% remember_label = _('Remember my indefinitely') %>
                     % else:
                         <% remember_label = _('Remember me for {}').format(h.age_from_seconds(timeout)) %>
                     % endif
                     <label class="checkbox" for="remember">${remember_label}</label>
 
                     <p class="links">
                     %if h.HasPermissionAny('hg.admin', 'hg.register.auto_activate', 'hg.register.manual_activate')():
                         ${h.link_to(_("Create a new account."), request.route_path('register'), class_='new_account')}
                     %endif
                     </p>
 
                     %if not h.HasPermissionAny('hg.password_reset.enabled')():
                         ## password reset hidden or disabled.
                         <p class="help-block">
                             ${_('Password reset is disabled.')} <br/>
                             ${_('Please contact ')}
                             % if c.visual.rhodecode_support_url:
                                 <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
                                 ${_('or')}
                             % endif
                             ${_('an administrator if you need help.')}
                         </p>
                     %endif
 
                     ${h.submit('sign_in', _('Sign In'), class_="btn sign-in", title=_('Sign in to {}').format(c.rhodecode_edition))}
 
                 ${h.end_form()}
                 <script type="text/javascript">
                     $(document).ready(function(){
                         $('#username').focus();
                     })
                 </script>
 
             </div>
             <!-- end login -->
 
             <%block name="below_login_button" />
         </div>
     </div>
 </div>

rhodecode/templates/password_reset.mako

@@ -1,103 +1,104 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base/root.mako"/>
 
 <%def name="title()">
     ${_('Reset Password')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 <style>body{background-color:#eeeeee;}</style>
 
 <div class="loginbox">
     <div class="header-account">
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
                     <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-60x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 % if c.rhodecode_name:
                 <div class="branding">
                    <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                 </div>
                 % endif
             </div>
         </div>
     </div>
 
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
-        <div class="left-column">
+
+        <div class="auth-image-wrapper">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
 
         %if h.HasPermissionAny('hg.password_reset.disabled')():
             <div class="right-column">
                 <p>
                     ${_('Password reset is disabled. Please contact ')}
                     % if c.visual.rhodecode_support_url:
                         <a href="${c.visual.rhodecode_support_url}" target="_blank">${_('Support')}</a>
                         ${_('or')}
                     % endif
                     ${_('an administrator if you need help.')}
                 </p>
             </div>
         %else:
-            <div id="register" class="right-column">
+            <div id="register">
                 <!-- login -->
                 <div class="sign-in-title">
                     <h1>${_('Reset your Password')}</h1>
                     <h4>${h.link_to(_("Go to the login page to sign in."), request.route_path('login'))}</h4>
                 </div>
                 <div class="inner form">
                     ${h.form(request.route_path('reset_password'), needs_csrf_token=False)}
                         <label for="email">${_('Email Address')}:</label>
                         ${h.text('email', defaults.get('email'))}
                         %if 'email' in errors:
                           <span class="error-message">${errors.get('email')}</span>
                           <br />
                         %endif
                         <p class="help-block">${_('Password reset link will be sent to matching email address')}</p>
     
                         %if captcha_active:
                         <div class="login-captcha">
                             <label for="email">${_('Captcha')}:</label>
                             ${h.hidden('recaptcha_field')}
                             <div id="recaptcha"></div>
 
                             %if 'recaptcha_field' in errors:
                               <span class="error-message">${errors.get('recaptcha_field')}</span>
                               <br />
                             %endif
                         </div>
                         %endif
     
                         ${h.submit('send', _('Send password reset email'), class_="btn sign-in")}
                         <p class="help-block pull-right">
                             RhodeCode ${c.rhodecode_edition}
                         </p>
     
                     ${h.end_form()}
                 </div>
             </div>
         %endif
     </div>
 </div>
 
 <script type="text/javascript">
  $(document).ready(function(){
     $('#email').focus();
  });
 </script>
 
 % if captcha_active:
 <script type="text/javascript">
 var onloadCallback = function() {
     grecaptcha.render('recaptcha', {
       'sitekey' : "${captcha_public_key}"
     });
 };
 </script>
 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
 % endif
 

rhodecode/templates/register.mako

@@ -1,148 +1,150 b''
 ## -*- coding: utf-8 -*-
 <%inherit file="base/root.mako"/>
 
 <%def name="title()">
     ${_('Create an Account')}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 <style>body{background-color:#eeeeee;}</style>
 
 <div class="loginbox">
     <div class="header-account">
         <div id="header-inner" class="title">
             <div id="logo">
                 <div class="logo-wrapper">
                     <a href="${h.route_path('home')}"><img src="${h.asset('images/rhodecode-logo-white-60x60.png')}" alt="RhodeCode"/></a>
                 </div>
                 % if c.rhodecode_name:
                 <div class="branding">
                    <a href="${h.route_path('home')}">${h.branding(c.rhodecode_name)}</a>
                 </div>
                 % endif
             </div>
         </div>
     </div>
 
     <div class="loginwrapper">
         <rhodecode-toast id="notifications"></rhodecode-toast>
-        <div class="left-column">
+
+        <div class="auth-image-wrapper">
             <img class="sign-in-image" src="${h.asset('images/sign-in.png')}" alt="RhodeCode"/>
         </div>
+
+        <div id="register">
         <%block name="above_register_button" />
-        <div id="register" class="right-column">
             <!-- login -->
             <div class="sign-in-title">
                 % if external_auth_provider:
                     <h1>${_('Create an account linked with {}').format(external_auth_provider)}</h1>
                 % else:
                     <h1>${_('Create an account')}</h1>
                 % endif
 
                 <h4>${h.link_to(_("Go to the login page to sign in with an existing account."), request.route_path('login'))}</h4>
             </div>
             <div class="inner form">
                 ${h.form(request.route_path('register'), needs_csrf_token=False)}
 
                     <label for="username">${_('Username')}:</label>
                     ${h.text('username', defaults.get('username'))}
                     %if 'username' in errors:
                       <span class="error-message">${errors.get('username')}</span>
                       <br />
                     %endif
 
                     % if external_auth_provider:
                         ## store internal marker about external identity
                         ${h.hidden('external_identity', external_auth_provider)}
                         ## hide password prompts for social auth
                         <div style="display: none">
                     % endif
 
                     <label for="password">${_('Password')}:</label>
                     ${h.password('password', defaults.get('password'))}
                     %if 'password' in errors:
                       <span class="error-message">${errors.get('password')}</span>
                       <br />
                     %endif
 
                     <label for="password_confirmation">${_('Re-enter password')}:</label>
                     ${h.password('password_confirmation', defaults.get('password_confirmation'))}
                     %if 'password_confirmation' in errors:
                       <span class="error-message">${errors.get('password_confirmation')}</span>
                       <br />
                     %endif
 
                     % if external_auth_provider:
                         ## hide password prompts for social auth
                         </div>
                     % endif
 
                     <label for="firstname">${_('First Name')}:</label>
                     ${h.text('firstname', defaults.get('firstname'))}
                     %if 'firstname' in errors:
                       <span class="error-message">${errors.get('firstname')}</span>
                       <br />
                     %endif
 
                     <label for="lastname">${_('Last Name')}:</label>
                     ${h.text('lastname', defaults.get('lastname'))}
                     %if 'lastname' in errors:
                       <span class="error-message">${errors.get('lastname')}</span>
                       <br />
                     %endif
 
                     <label for="email">${_('Email')}:</label>
                     ${h.text('email', defaults.get('email'))}
                     %if 'email' in errors:
                       <span class="error-message">${errors.get('email')}</span>
                       <br />
                     %endif
 
                     %if captcha_active:
                     <div>
                         <label for="recaptcha">${_('Captcha')}:</label>
                         ${h.hidden('recaptcha_field')}
                         <div id="recaptcha"></div>
                         %if 'recaptcha_field' in errors:
                           <span class="error-message">${errors.get('recaptcha_field')}</span>
                           <br />
                         %endif
                     </div>
                     %endif
 
                     %if not auto_active:
                         <p class="activation_msg">
                             ${_('Account activation requires admin approval.')}
                         </p>
                     %endif
                     <p class="register_message">
                         ${register_message|n}
                     </p>
 
                     ${h.submit('sign_up',_('Create Account'), class_="btn sign-in", title=_('Create Account in {}').format(c.rhodecode_edition))}
                 ${h.end_form()}
             </div>
             <%block name="below_register_button" />
         </div>
     </div>
 </div>
 
 
 <script type="text/javascript">
  $(document).ready(function(){
     $('#username').focus();
  });
 </script>
 
 % if captcha_active:
 <script type="text/javascript">
 var onloadCallback = function() {
     grecaptcha.render('recaptcha', {
       'sitekey' : "${captcha_public_key}"
     });
 };
 </script>
 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
 % endif