{% extends 'layout/single-nologin.html' %}

{% block html_title %}{{ t('page_login.sign_in') }} · {% endblock %}

{% block content_main %}

<h1 class="login-page">
  {% if config.crowi['app:title'] == 'Crowi' %}
    <img src="/logo/135x32.png" alt="Crowi">
  {% else %}
    {{ config.crowi['app:title'] }}<br>
    <img src="/logo/100x11_w.png" alt="powered by Crowi">
  {% endif %}
</h1>

<div class="login-dialog-container flip-container col-md-5">

<div class="login-dialog flipper {% if req.query.register or req.body.registerForm or isRegistering or googleId or githubId %}to-flip{% endif %}" id="login-dialog">

  <div class="login-dialog-inner front">
    <h2>{{ t('page_login.sign_in') }}</h2>

    <div id="login-form-errors">
      {% set message = req.flash('warningMessage') %}
      {% if message.length %}
      <div class="alert alert-danger">
        {{ message }}
      </div>
      {% 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>
    <form role="form" action="/login" method="post">
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
        <input type="text" class="form-control" placeholder="E-mail" name="loginForm[email]">
      </div>

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

      <input type="hidden" name="_csrf" value="{{ csrf() }}">
      <input type="submit" class="btn btn-primary btn-lg btn-block" value="{{ t('page_login.sign_in') }}">
    </form>

    <hr>

    <div class="row">
      {% if googleLoginEnabled() %}
      <div class="col-md-6">
        <p>{{ t('page_login.sign_in_with', "Google") }}</p>
        <form role="form" action="/login/google" method="get">
          <button type="submit" class="btn btn-block btn-google"><i class="fab fa-google-plus-square"></i> {{ t('page_login.sign_in') }}</button>
          <input type="hidden" name="_csrf" value="{{ csrf() }}">
        </form>
      </div>
      {% endif %}
      {% if githubLoginEnabled() %}
      <div class="col-md-6">
        <p>{{ t('page_login.sign_in_with', "GitHub") }}</p>
        <form role="form" action="/login/github" method="get">
          <button type="submit" class="btn btn-block btn-github"><i class="fab fa-github-square"></i> {{ t('page_login.sign_in') }}</button>
          <input type="hidden" name="_csrf" value="{{ csrf() }}">
        </form>
      </div>
      {% endif %}
    </div>

    {% if config.crowi['security:registrationMode'] != 'Closed' %}
    <p class="bottom-text"><a href="#register" id="register"><i class="fa fa-pencil-alt"></i> {{ t('page_login.sign_up_is_here') }}</a></p>
    {% endif %}
  </div>

  {% if config.crowi['security:registrationMode'] != 'Closed' %}
  <div class="register-dialog-inner back">

    <h2>{{ t('page_register.sign_up') }}</h2>

    {% 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 issuerName %}
    <div class="google-info github-info alert alert-info">
      {% if socialImage %}
      <p class="text-center">
        <img src="{{ socialImage }}" class="picture picture-rounded picture-lg">
      </p>
      {% endif %}
      <code>{{ socialEmail }}</code> {{ t('page_register.notice.register_with_this', issuerName) }}<br>
      {{ t('page_register.notice.social_account_continue') }}
    </div>
    {% endif %}

    <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 %}

      {% 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>

    <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) }}">
      <input type="hidden" class="form-control" name="registerForm[githubId]" value="{{ githubId|default(req.body.registerForm.githubId) }}">

      <label>{{ t('User ID') }}</label>
      <div class="input-group" id="input-group-username">
        <span class="input-group-addon"><strong>@</strong></span>
        <input type="text" class="form-control" placeholder="{{ t('page_register.example') }}: taroyama" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
      </div>
      <p class="help-block">
      <span id="help-block-username" class="text-danger"></span>
      {{ t('page_register.form_help.user_id') }}
      </p>

      <label>{{ t('Name') }}</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input type="text" class="form-control" placeholder="{{ t('page_register.example') }}: {{ t('page_register.taro_yamada') }}" name="registerForm[name]" value="{{ socialName|default(req.body.registerForm.name) }}" required>
      </div>

      <label>{{ t('Email') }}</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
        <input type="email" class="form-control" placeholder="E-mail" name="registerForm[email]" value="{{ socialEmail|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 %}

      <label>{{ t('Password') }}</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-key"></i></span>
        <input type="password" class="form-control" placeholder="Password" name="registerForm[password]" required>
      </div>
      <p class="help-block">
        {{ t('page_register.form_help.password') }}
      </p>

      {% if socialImage %}
        <input type="hidden" name="registerForm[socialImage]" value="{{ socialImage }}">
      {% endif  %}
      <input type="hidden" name="_csrf" value="{{ csrf() }}">
      <input type="submit" class="btn btn-primary btn-lg btn-block" value="{{ t('page_register.sign_up') }}">
    </form>

    <hr>

    <div class="row">
      {% if googleLoginEnabled() %}
      <div class="col-md-6">
        <p>{{ t('page_register.sign_up_with', "Google") }}</p>
        <form role="form" method="post" action="/register/google">
          <input type="hidden" name="_csrf" value="{{ csrf() }}">
          <button type="submit" class="btn btn-block btn-google"><i class="fab fa-google-plus-square"></i> {{ t('page_register.sign_up') }}</button>
        </form>
      </div>
      {% endif %}
      {% if githubLoginEnabled() %}
      <div class="col-md-6">
        <p>{{ t('page_register.sign_up_with', "GitHub") }}</p>
        <form role="form" method="post" action="/register/github">
          <input type="hidden" name="_csrf" value="{{ csrf() }}">
          <button type="submit" class="btn btn-block btn-github"><i class="fab fa-github-square"></i> {{ t('page_register.sign_up') }}</button>
        </form>
      </div>
      {% endif %}
    </div>

    <p class="bottom-text"><a href="#login" id="login"><i class="fa fa-sign-out-alt"></i> {{ t('page_register.sign_in_is_here') }}</a></p>
  </div>
  {% endif %} {# if registrationMode == Closed #}

</div>

</div>

{% endblock %}