{% extends 'layout/layout.html' %}

{% block html_base_css %}login-page nologin{% endblock %}

{% block html_title %}{{ customTitle(t('Sign in')) }}{% endblock %}



{#
 # Remove default contents
 #}
{% block html_head_loading_legacy %}
{% endblock %}
{% block html_head_loading_app %}
{% endblock %}
{% block layout_head_nav %}
{% endblock %}
{% block sidebar %}
{% endblock %}



{% block layout_main %}

<div class="main container-fluid">

  <div class="row">
    <div class="login-header col-sm-offset-4 col-sm-4">
      <div class="logo">{% include 'widget/logo.html' %}</div>
      <h1>{{ appTitle() }}</h1>

      <div class="login-form-errors">
        {% if isLdapSetupFailed() %}
        <div class="alert alert-warning small">
          <strong><i class="icon-fw icon-info"></i>LDAP is enabled but the configuration has something wrong.</strong>
          <br>
          (Please set the environment variables <code>DEBUG=crowi:service:PassportService</code> to get the logs)
        </div>
        {% endif %}

        {#
        # The case that there already exists a user whose username matches ID of the newly created LDAP user
        # https://github.com/weseek/growi/issues/193
        #}
        {% set failedProviderForDuplicatedUsernameException = req.flash('provider-DuplicatedUsernameException') %}
        {% if failedProviderForDuplicatedUsernameException != null %}
        <div class="alert alert-warning small">
          <p><strong><i class="icon-fw icon-ban"></i>DuplicatedUsernameException occured</strong></p>
          <p>
            Your {{ failedProviderForDuplicatedUsernameException }} authentication was succeess, but a new user could not be created.
            See the issue <a href="https://github.com/weseek/growi/issues/193">#193</a>.
          </p>
        </div>
        {% endif %}

        {% set success = req.flash('successMessage') %}
        {% if success.length %}
        <div class="alert alert-success">
          {{ success }}
        </div>
        {% endif %}

        {% set warn = req.flash('warningMessage') %}
        {% if warn.length %}
        {% for w in warn %}
        <div class="alert alert-warning">
          {{ w }}
        </div>
        {% endfor %}
        {% endif %}

        {% set error = req.flash('errorMessage') %}
        {% if error.length %}
        {% for e in error %}
        <div class="alert alert-danger">
          {{ e }}
        </div>
        {% endfor %}
        {% endif %}

        {% if req.form.errors.length > 0 %}
        <div class="alert alert-danger">
          <ul>
          {% for error in req.form.errors %}
            <li>{{ error }}</li>
          {% endfor %}
          </ul>
        </div>
        {% endif %}
      </div>
      <div id="register-form-errors">
        {% set message = req.flash('registerWarningMessage') %}
        {% if message.length %}
        <div class="alert alert-danger">
          {% for msg in message %}
          {{ msg }}<br>
          {% endfor  %}
        </div>
        {% endif %}
      </div>
    </div>

    <div class="login-dialog p-b-10 col-sm-offset-4 col-sm-4 flipper {% if req.query.register or req.body.registerForm or isRegistering or googleId %}to-flip{% endif %}" id="login-dialog">

      <div class="front">
        <form role="form" action="/login" method="post">
          <div class="input-group">
            <span class="input-group-addon"><i class="icon-user"></i></span>
            <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
            {% if isLdapSetup() %}
            <span class="input-group-addon">
              <small class="text-success">
                <i class="icon-fw icon-check"></i> LDAP
              </small>
            </span>
            {% endif %}
          </div>

          <div class="input-group">
            <span class="input-group-addon"><i class="icon-lock"></i></span>
            <input type="password" class="form-control" placeholder="Password" name="loginForm[password]">
          </div>

          <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="fcbtn btn btn-danger btn-1b btn-login">
              <span class="btn-label"><i class="icon-login"></i></span>
              {{ t('Sign in') }}
            </button>
          </div>
        </form>

        {% if googleLoginEnabled() %}
        <hr>

        <div class="input-group m-t-15 m-b-10 mx-auto">
          <form role="form" action="/login/google" method="get">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="fcbtn btn btn-danger btn-1b btn-login-oauth" id="google">
              <span class="btn-label"><i class="icon-social-google"></i></span>
              {{ t('Sign in') }}
            </button>
            <div class="small text-right">by Google Account</div>
          </form>
        </div>
        {% endif %}

        {% if passportGoogleLoginEnabled() || passportGitHubLoginEnabled() || passportFacebookLoginEnabled() || passportTwitterLoginEnabled() %}
        <hr class="mb-1">
        <div class="collapse collapse-oauth collapse-anchor">
          <div class="spacer"></div>
          <div class="d-flex flex-row justify-content-between flex-wrap">
            {% if passportGoogleLoginEnabled() %}
            <form role="form" action="/passport/google" class="d-inline-flex flex-column">
              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-flex" id="google">
                <span class="btn-label"><i class="fa fa-google"></i></span>
                <span class="btn-label-text">{{ t('Sign in') }}</span>
              </button>
              <div class="small text-right">by Google Account</div>
            </form>
            {% endif %}
            {% if passportGitHubLoginEnabled() %}
            <form role="form" action="/passport/github" class="d-inline-flex flex-column">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-inline-flex" id="github">
                <span class="btn-label"><i class="fa fa-github"></i></span>
                <span class="btn-label-text">{{ t('Sign in') }}</span>
              </button>
              <div class="small text-right">by GitHub Account</div>
            </form>
            {% endif %}
            {% if passportFacebookLoginEnabled() %}
            <form role="form" action="/passport/facebook" class="d-inline-flex flex-column">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-inline-flex" id="facebook">
                <span class="btn-label"><i class="fa fa-facebook"></i></span>
                <span class="btn-label-text">{{ t('Sign in') }}</span>
              </button>
              <div class="small text-right">by Facebook Account</div>
            </form>
            {% endif %}
            {% if passportTwitterLoginEnabled() %}
            <form role="form" action="/passport/twitter" class="d-inline-flex flex-column">
              <input type="hidden" name="_csrf" value="{{ csrf() }}">
              <button type="submit" class="fcbtn btn btn-1b btn-login-oauth d-inline-flex" id="twitter">
                <span class="btn-label"><i class="fa fa-twitter"></i></span>
                <span class="btn-label-text">{{ t('Sign in') }}</span>
              </button>
              <div class="small text-right">by Twitter Account</div>
            </form>
            {% endif %}
          </div>{# ./d-flex flex-row flex-wrap #}
          <div class="spacer"></div>
        </div>
        <hr class="mt-2 mb-0">
        <div class="text-center">
          <button class="collapse-anchor btn btn-xs btn-collapse-oauth mb-3" data-toggle="collapse" data-parent="#accordion" href="#collapse-oauth" aria-expanded="true" aria-controls="collapseOne">
            OAuth
          </button>
        </div>
        {% else %}
        <hr>
        {% endif %}


        <script>
          $(".collapse-anchor").hover(
            function() {
              $('.collapse-oauth').collapse('show');
            },
            function() {
              $('.collapse-oauth').collapse('hide');
            }
          );
        </script>

        <div class="row">
          <div class="col-xs-12 text-right">
            {% if config.crowi['security:registrationMode'] != 'Closed' %}
            <a href="#register" id="register" class="link-switch">
              <i class="ti-check-box"></i> {{ t('Sign up is here') }}
            </a>
            {% else %}
            &nbsp;
            {% endif %}
          </div>
        </div>
      </div>


      {% if config.crowi['security:registrationMode'] != 'Closed' %}
      <div class="back">
        {% if config.crowi['security:registrationMode'] == 'Restricted' %}
        <p class="alert alert-warning">
          {{ t('page_register.notice.restricted') }}<br>
          {{ t('page_register.notice.restricted_defail') }}
        </p>
        {% endif %}

        {% if googleId %}
        <div class="google-info alert alert-info">
          {% if googleImage %}
          <p class="text-center">
            <img src="{{ googleImage }}" class="img-circle img-circle-lg">
          </p>
          {% endif %}
          <code>{{ googleEmail }}</code> {{ t('page_register with this Google Account') }}<br>
          {{ t('page_register.notice.google_account_continue') }}
        </div>
        {% endif %}

        <form role="form" method="post" action="/register" id="register-form">
          <input type="hidden" class="form-control" name="registerForm[googleId]" value="{{ googleId|default(req.body.registerForm.googleId) }}">

          <div class="input-group" id="input-group-username">
            <span class="input-group-addon"><i class="icon-user"></i></span>
            <input type="text" class="form-control" placeholder="{{ t('User ID') }}" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
          </div>
          <p class="help-block">
            <span id="help-block-username"></span>
          </p>

          <div class="input-group">
            <span class="input-group-addon"><i class="icon-tag"></i></span>
            <input type="text" class="form-control" placeholder="{{ t('Name') }}" name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required>
          </div>

          <div class="input-group">
            <span class="input-group-addon"><i class="icon-envelope"></i></span>
            <input type="email" class="form-control" placeholder="{{ t('Email') }}" name="registerForm[email]" value="{{ googleEmail|default(req.body.registerForm.email) }}" required>
          </div>
          {% if config.crowi['security:registrationWhiteList'] && config.crowi['security:registrationWhiteList'].length %}
          <p class="help-block">
            {{ t('page_register.form_help.email') }}
          </p>
          <ul>
            {% for em in config.crowi['security:registrationWhiteList'] %}
            <li><code>{{ em }}</code></li>
            {% endfor %}
          </ul>
          {% endif %}

          <div class="input-group">
            <span class="input-group-addon"><i class="icon-lock"></i></span>
            <input type="password" class="form-control" placeholder="{{ t('Password') }}" name="registerForm[password]" required>
          </div>

          {% if googleImage %}
            <input type="hidden" name="registerForm[googleImage]" value="{{ googleImage }}">
          {% endif  %}
          <input type="hidden" name="_csrf" value="{{ csrf() }}">

          <div class="input-group m-t-30 m-b-20 d-flex justify-content-center">
            <button type="submit" class="fcbtn btn btn-success btn-1b btn-register">
              <span class="btn-label"><i class="icon-user-follow"></i></span>
              {{ t('Sign up') }}
            </button>
          </div>
        </form>

        <hr>

        <div class="row">
          <div class="col-xs-12 text-right">
            <a href="#login" id="login" class="link-switch">
              <i class="icon-fw icon-login"></i>{{ t('Sign in is here') }}
            </a>
          </div>
        </div>
      </div>
      {% endif %} {# if registrationMode == Closed #}

      <a href="https://growi.org" class="link-growi-org">
        <span class="growi">GROWI</span>.<span class="org">ORG
      </a>

    </div>

  </div>

</div>

{% endblock %}


{% block body_end %}
<script>
  // login
  $('#register').on('click', function() {
    $('#login-dialog').addClass('to-flip');
    return false;
  });
  $('#login').on('click', function() {
    $('#login-dialog').removeClass('to-flip');
    return false;
  });

  $('#register-form input[name="registerForm[username]"]').change(function(e) {
    var username = $(this).val();
    $('#login-dialog').removeClass('has-error');
    $('#input-group-username').removeClass('has-error');
    $('#help-block-username').html("");

    $.getJSON('/_api/check_username', {username: username}, function(json) {
      if (!json.valid) {
        $('#help-block-username').html(
          '<i class="icon-fw icon-ban"></i> This User ID is not available.'
        );
        $('#login-dialog').addClass('has-error');
        $('#input-group-username').addClass('has-error');
      }
    });
  });
</script>
{% endblock %}