{% extends "base.html" %}
{% load i18n %}

{% block sub_title %}{% trans "Confirm Password" %} - {% endblock %}
{% block header_css_class %}hide{% endblock %}
{% block extra_base_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
{% endblock %}

{% block extra_style %}
<style type="text/css">
html, body, #wrapper { height:100%; }
#wrapper {
  background: url('{{ MEDIA_URL }}{{login_bg_image_path}}') center top no-repeat scroll;
  background-size: cover;
  padding-top:1px;
}
</style>
{% endblock %}

{% block main_content %}
<div class="login-panel-outer-container vh">
  <div class="login-panel" id="log-in-panel">
    <h1 class="login-panel-hd">{% trans "Confirm password to continue" %}</h1>
    <p class="text-center">{% trans "You are entering admin area, we won't ask for your password again for a few hours." %}</p>
    <form action="" method="post" class="con">{% csrf_token %}
      <div class="position-relative">
        <input id="password-input" type="password" name="password" placeholder="{% trans "Password" %}" aria-label="{% trans "Password" %}" title="{% trans "Password" %}" value="" class="input" autocomplete="off" />
        <i id="toggle-show-password" class="sf3-font sf3-font-eye-slash"></i>
      </div>
      {% if password_error %}
      <p class="error mt-1">{% trans "Incorrect password" %}</p>
      {% else %}
      <p class="error mt-1 hide"></p>
      {% endif %}

      <button type="submit" class="submit btn btn-primary btn-block h-auto mb-3">{% trans "Confirm Password" %}</button>
      {% if enable_sso %}
      <button id="shib-login" class="btn btn-secondary btn-block mb-3">SSO</button>
      {% endif %}
    </form>
  </div>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript">
$('.login-panel-outer-container').prepend($($('#logo').html()).attr({'height': 40}).addClass('login-panel-logo'));
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');

$('input[name="password"]').trigger('focus');

$('#toggle-show-password').click(function() {
  $(this).toggleClass('sf3-font-eye-slash sf3-font-eye');
  if ($(this).hasClass('sf3-font-eye-slash')) {
    $('#password-input').attr('type', 'password');
  } else {
    $('#password-input').attr('type', 'text');
  }
});

$('[type="submit"]').on('click', function(){
    if (!$('input[name="password"]').val().trim()) {
        $('.error').removeClass('hide').html("{% trans "Password cannot be blank" %}");
        return false;
    }
});

{% if enable_sso %}
$(function() {
    $('#shib-login').on('click', function() {
        window.location = "{% url 'shib_login' %}{% if next %}?next={{ next|escape }}{% endif %}";
        return false;
    });
});
{% endif %}
</script>
{% endblock %}
