diff --git a/media/css/seahub.css b/media/css/seahub.css index af69e87a5a..a17b106fe8 100644 --- a/media/css/seahub.css +++ b/media/css/seahub.css @@ -2898,10 +2898,6 @@ a.sf-popover-item { margin-bottom: 1rem; } -.input.two-factor-auth-login-token-input { - margin-bottom: 15px; -} - /* terms & conditions */ #tc-content { padding-top: 0; diff --git a/seahub/two_factor/templates/two_factor/core/login.html b/seahub/two_factor/templates/two_factor/core/login.html index b057e6801c..9251d47d48 100644 --- a/seahub/two_factor/templates/two_factor/core/login.html +++ b/seahub/two_factor/templates/two_factor/core/login.html @@ -3,77 +3,74 @@ {% block main_content %} <div class="login-panel-outer-container vh"> -<div class="login-panel"> - <h2 class="hd">{% trans "Two-Factor Authentication" %}</h2> + <div class="login-panel" id="log-in-panel"> + <h1 class="login-panel-hd">{% trans "Two-Factor Authentication" %}</h1> <form action="" method="post" class="con">{% csrf_token %} - {{ wizard.management_form }} - {% if wizard.steps.current == 'token' %} + {{ wizard.management_form }} + {% if wizard.steps.current == 'token' %} - {% if device.method == 'call' %} - <p>We are calling your phone right now, please enter the - digits you hear.</p> - {% elif device.method == 'sms' %} - <p>We sent you a text message, please enter the tokens we - sent.</p> - {% else %} - <p>{% trans "Open the two-factor authentication app on your device to view your authentication token and verify your identify." %}</p> - {% endif %} + {% if device.method == 'call' %} + <p>We are calling your phone right now, please enter the + digits you hear.</p> + {% elif device.method == 'sms' %} + <p>We sent you a text message, please enter the tokens we + sent.</p> + {% else %} + <p>{% trans "Open the two-factor authentication app on your device to view your authentication token and verify your identify." %}</p> + {% endif %} - <label for="token">{% trans "Authentication token" %}</label> - <input id="token" type="text" name="{{form_prefix}}otp_token" value="" class="input two-factor-auth-login-token-input" autocomplete="off" autofocus="autofocus" /> + <input id="token" type="text" name="{{form_prefix}}otp_token" placeholder="{% trans "Authentication token" %}" value="" class="input two-factor-auth-login-token-input" autocomplete="off" autofocus="autofocus" /> - {% if remember_days > 0 %} - <label class="checkbox-label remember"> - <input type="checkbox" name="{{form_prefix}}remember_me" class="vam remember-input" /> - <span class="vam">{% blocktrans %}Remember this computer for {{remember_days}} days{% endblocktrans %}</span> - </label> - {% endif %} - - {% if form.errors %} - <p class="error">{% trans "Incorrect code" %}</p> - {% else %} - <p class="error hide"></p> - {% endif %} - <button type="submit" class="submit">{% trans "Verify" %}</button> + {% if remember_days > 0 %} + <label class="checkbox-label mt-3 mb-0 remember-me"> + <input type="checkbox" name="{{form_prefix}}remember_me" class="vam remember-input" /> + <span class="vam">{% blocktrans %}Remember this computer for {{remember_days}} days{% endblocktrans %}</span> + </label> + {% endif %} - {% if backup_tokens > 0 %} - <div class="two-factor-auth-login-no-phone"> - <p> - {% trans "Don't have your phone?" %} - <button name="wizard_goto_step" value="backup" type="submit" class="sf-link-btn">{% trans "Enter a two-factor backup code" %}</button> - </p> - </div> - {% endif %} + {% if form.errors %} + <p class="error">{% trans "Incorrect code" %}</p> + {% else %} + <p class="error hide"></p> + {% endif %} + <button type="submit" class="submit btn btn-primary btn-block h-auto mb-3">{% trans "Verify" %}</button> - {% elif wizard.steps.current == 'backup' %} - <label for="token">{% trans "Backup code" %}</label> - <input id="token" type="text" name="{{form_prefix}}otp_token" value="" class="input" autocomplete="off" /> - {% if form.errors %} - <p class="error">{% trans "Incorrect code" %}</p> - {% else %} - <p class="error hide"></p> - {% endif %} - <p class="tip">{% trans "You can enter one of your backup codes in case you lost access to your mobile device." %}</p> - <button type="submit" class="submit">{% trans "Verify" %}</button> - {% endif %} + {% if backup_tokens > 0 %} + <div class="two-factor-auth-login-no-phone"> + <p> + {% trans "Don't have your phone?" %} + <button name="wizard_goto_step" value="backup" type="submit" class="sf-link-btn">{% trans "Enter a two-factor backup code" %}</button> + </p> + </div> + {% endif %} + + {% elif wizard.steps.current == 'backup' %} + <input id="token" type="text" name="{{form_prefix}}otp_token" placeholder="{% trans "Backup code" %}" value="" class="input" autocomplete="off" /> + <p class="tip">{% trans "You can enter one of your backup codes in case you lost access to your mobile device." %}</p> + + {% if form.errors %} + <p class="error">{% trans "Incorrect code" %}</p> + {% else %} + <p class="error hide"></p> + {% endif %} + + <button type="submit" class="submit btn btn-primary btn-block h-auto mb-5">{% trans "Verify" %}</button> + {% endif %} </form> -</div> + </div> </div> {% endblock %} {% block extra_script %} <script type="text/javascript"> -$('.login-panel-outer-container').prepend($($('#logo').html()).attr({'width': 160, 'height':40}).addClass('login-panel-logo')); + $('.login-panel-outer-container').prepend($($('#logo').html()).attr({'width': 160, 'height':40}).addClass('login-panel-logo')); -var $el = $('.login-panel-outer-container'); -var elHeight = $el.outerHeight(); -var wdHeight = $(window).height(); -if (wdHeight > elHeight) { + var $el = $('.login-panel-outer-container'); + var elHeight = $el.outerHeight(); + var wdHeight = $(window).height(); + if (wdHeight > elHeight) { $el.css({'margin-top': (wdHeight - elHeight)/2}); -} -$el.removeClass('vh'); - - -$('.new-narrow-panel .input').trigger('focus'); + } + $el.removeClass('vh'); </script> {% endblock %}