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

{% block html_title %}Login · {% 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 %}to-flip{% endif %}" id="login-dialog">

  <div class="login-dialog-inner front">
    <h2>ログイン</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="Login">
    </form>

    <hr>

    <div class="row">
      {% if googleLoginEnabled() %}
      <div class="col-md-6">
        <p>Google でログイン</p>
        <form role="form" action="/login/google" method="get">
          <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> Login</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"></i> 新規登録はこちら</a></p>
    {% endif %}
  </div>

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

    <h2>新規登録</h2>

    {% if config.crowi['security:registrationMode'] == 'Restricted' %}
    <p class="alert alert-warning">
    この Wiki への新規登録は制限されています。<br>
    利用を開始するには、新規登録後、管理者による承認が必要です。
    </p>
    {% endif %}

    {% if googleId %}
    <div class="google-info alert alert-info">
      {% if googleImage %}
      <p class="text-center">
        <img src="{{ googleImage }}" class="picture picture-rounded picture-lg">
      </p>
      {% endif %}
      <code>{{ googleEmail }}</code> この Google アカウントで登録します<br>
      ユーザーID、名前、パスワードを決めて登録を継続してください。
    </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) }}">

      <label>ユーザー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="記入例: taroyama" name="registerForm[username]" value="{{ req.body.registerForm.username }}" required>
      </div>
      <p class="help-block">
      <span id="help-block-username" class="text-danger"></span>
      ユーザーIDは、ユーザーページのURLなどに利用されます。半角英数字と一部の記号のみ利用できます。
      </p>

      <label>名前</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-user"></i></span>
        <input type="text" class="form-control" placeholder="記入例: 山田 太郎" name="registerForm[name]" value="{{ googleName|default(req.body.registerForm.name) }}" required>
      </div>

      <label >メールアドレス</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="{{ googleEmail|default(req.body.registerForm.email) }}" required>
      </div>
      {% if config.crowi['security:registrationWhiteList'] && config.crowi['security:registrationWhiteList'].length %}
      <p class="help-block">
      この Wiki では以下のメールアドレスのみ登録可能です。
      </p>
      <ul>
        {% for em in config.crowi['security:registrationWhiteList'] %}
        <li><code>{{ em }}</code></li>
        {% endfor %}
      </ul>
      {% endif %}

      <label>パスワード</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">
      パスワードは6文字以上の半角英数字または記号
      </p>

      {% if googleImage %}
        <input type="hidden" name="registerForm[googleImage]" value="{{ googleImage }}">
      {% endif  %}
      <input type="hidden" name="_csrf" value="{{ csrf() }}">
      <input type="submit" class="btn btn-primary btn-lg btn-block" value="新規登録">
    </form>

    <hr>

    <div class="row">
      {% if googleLoginEnabled() %}
      <div class="col-md-6">
        <p>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="fa fa-google-plus-square"></i> Login</button>
        </form>
      </div>
      {% endif %}
    </div>

    <p class="bottom-text"><a href="#login" id="login"><i class="fa fa-sign-out"></i> ログインはこちら</a></p>
  </div>
  {% endif %} {# if registrationMode == Closed #}

</div>

</div>

{% endblock %}