{% extends "sentry/bases/auth.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
{% load sentry_assets %}

{% block scripts %}
{{ block.super }}

{% script %}
<script>
  window.__onSentryInit = window.__onSentryInit || [];
  window.__onSentryInit.push({
    name: 'passwordStrength',
    input: '#id_registration_password',
    element: '.password-strength',
  });
  // HACK(jferge): inline getCookie function from our utils,
  // update the csrf token value in a rudimentary way (timer based)
  // on the SSO login form
  // to help out when users have multiple sentry tabs and are logged out
  function getCookie(name) {
    if (document.cookie && document.cookie !== '') {
      var cookies = document.cookie.split(';');
      for (let i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();
        // Does this cookie string begin with the name we want?
        if (cookie.substring(0, name.length + 1) === name + '=') {
          return decodeURIComponent(cookie.substring(name.length + 1));
        }
      }
    }
    return null;
  }
  setInterval(function() {
    var csrfCookieVal = getCookie(window.csrfCookieName || 'sc');
    // combine strings for csrf name as some tests grep on the token name :(
    var csrfName = 'csrf'+'middleware'+'token';
    var csrfEls = document.getElementsByName(csrfName);
    if (csrfEls.length == 1 && csrfCookieVal) {
      csrfEls[0].value = csrfCookieVal;
    }
  },200);
</script>
{% endscript %}
{% endblock %}

{% block title %}{% trans "Sign In" %} | {{ block.super }}{% endblock %}

{% block auth_container %}
<div>
  <div class="align-center p-t-2">
    <img src="{% asset_url "sentry" "images/logos/default-organization-logo.png" %}" class="org-avatar">
    <h3>{{ organization.name }}</h3>
  </div>

  {% if provider_name %}
    <form class="form-stacked m-b-2" action="" method="post" autocomplete="off">
      {% csrf_token %}
      <input type="hidden" name="init" value="1" />
      <!-- NOTE: the form input referrer value is currently not being utilized -->
      <input type="hidden" name="referrer" value="{{ referrer }}" />

      <div class="align-center">
        <p>
          {% if authenticated %}
          <b>{{ organization.name }}</b> requires signing in with {{ provider_name }}.
          {% else %}
          Sign in with your {{ provider_name }} account to continue.
          {% endif %}
        </p>
        <p><button type="submit" class="btn btn-default btn-login-{{ provider_key }}">
          <span class="provider-logo {{ provider_key }}"></span> Login with {{ provider_name }}
        </button></p>
        <div class="auth-terms">
        {% if terms_url and privacy_policy_url and is_provider_partner %}
          By clicking the login button you are accepting Sentry’s <a href="{{ terms_url }}" target="_blank">terms of service</a> and <a href="{{ privacy_policy_url }}" target="_blank">privacy policy</a>.
        {% endif %}
        </div>
      </p>
      </div>
    </form>
  {% else %}
    <div class="auth-container p-t-0 border-bottom">
      <ul class="nav nav-tabs auth-toggle m-b-0">
        <li{% if op == "login" %} class="active"{% endif %}>
          <a href="#login" data-toggle="tab">{% trans "Sign In" %}</a>
        </li>
        {% if CAN_REGISTER %}
          <li{% if op == "register" %} class="active"{% endif %}>
            <a href="#register" data-toggle="tab">{% trans "Register" %}</a>
          </li>
        {% endif %}
        {% if join_request_link %}
          <li class="join-request">
            <a href="{{ join_request_link }}">
              {% include "sentry/partial/megaphone.html" %}
              {% trans "Request to Join" %}
            </a>
          </li>
        {% endif %}
      </ul>
    </div>

    <div class="tab-content basic-login">
      <div class="tab-pane{% if op == "login" %} active{% endif %}" id="login">
        <div class="auth-container">
          <div class="auth-form-column">
            <form class="form-stacked" action="" method="post" autocomplete="off">
              {% csrf_token %}

              <input type="hidden" name="op" value="login" />

              {{ login_form|as_crispy_errors }}

              {% for field in login_form %}
                {{ field|as_crispy_field }}
              {% endfor %}

              <div class="auth-footer m-t-1">
                <button type="submit" class="btn btn-primary">{% trans "Sign In" %}</button>
                <a class="secondary" href="{% url 'sentry-account-recover' %}">{% trans "Lost your password?" %}</a>
              </div>
            </form>
          </div>
          {% if google_login_link or github_login_link or vsts_login_link %}
          <div class="auth-provider-column">
            {% if google_login_link %}
              <p>
                <a class="btn btn-default btn-login-google" href="{{ google_login_link }}" style="display: block">
                  <span class="provider-logo google"></span> Sign in with Google
                </a>
              </p>
            {% endif %}

            {% if github_login_link %}
              <p>
                <a class="btn btn-default btn-login-github" href="{{ github_login_link }}" style="display: block">
                  <span class="provider-logo github"></span> Sign in with GitHub
                </a>
              </p>
            {% endif %}

            {% if vsts_login_link %}
              <p>
                <a class="btn btn-default btn-login-vsts" href="{{ vsts_login_link }}" style="display: block">
                  <span class="provider-logo vsts"></span> Sign in with Azure DevOps
                </a>
              </p>
            {% endif %}
          </div>
        {% endif %}
        </div>
      </div>
      <div class="tab-pane{% if op == "register" %} active{% endif %}" id="register">
        <div class="auth-container">
          <div class="auth-form-column">
            <form class="form-stacked" action="" method="post" autocomplete="off">
              {% csrf_token %}

              <input type="hidden" name="op" value="register" />

              {{ register_form|as_crispy_errors }}

              {% for field in register_form %}
                {{ field|as_crispy_field }}
              {% endfor %}

              <div class="password-strength"></div>
              <div class="auth-footer m-t-1">
                <button type="submit" class="btn btn-primary">{% trans "Register" %}</button>
                <a class="secondary" href="https://sentry.io/privacy/" target="_blank">
                  {% trans "Privacy Policy" %}
                </a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}
