{% extends 'layout-growi/base/layout.html' %}

{% block html_title %}セットアップ {% endblock %}

{% block content_main %}


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

<div class="installer-header">
  <img src="/images/logo/135x32.png" alt="Crowi">
  <h1>
    Crowi のセットアップへようこそ!
  </h1>
</div>


<div class="login-dialog"  id="login-dialog">
  <div class="login-dialog-inner">
    <h2>管理者の作成</h2>

    <p class="text-info">
    はじめに、管理者アカウントを作成してください。
    </p>

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

    <form role="form" action="/installer/createAdmin" method="post">
      <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="icon-user"></i></span>
        <input type="text" class="form-control" placeholder="記入例: 山田 太郎" name="registerForm[name]" value="{{ req.body.registerForm.name }}" required>
      </div>

      <label >メールアドレス</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="icon-envelope"></i></span>
        <input type="email" class="form-control" placeholder="E-mail" name="registerForm[email]" value="{{ googleEmail|default(req.body.registerForm.email) }}" required>
      </div>

      <label>パスワード</label>
      <div class="input-group">
        <span class="input-group-addon"><i class="icon-key"></i></span>
        <input type="password" class="form-control" placeholder="Password" name="registerForm[password]" required>
      </div>
      <p class="help-block">
      パスワードは6文字以上の半角英数字または記号
      </p>

      <input type="hidden" name="_csrf" value="{{ csrf() }}">
      <input type="submit" class="btn btn-primary btn-lg btn-block" value="作成">
    </form>

  </div>
</div>

</div>

<script>
$(function() {
  $('#register-form input[name="registerForm[username]"]').change(function(e) {
    var username = $(this).val();
    $('#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="fa fa-warning"></i>このユーザーIDは利用できません。<br>');
        $('#input-group-username').addClass('has-error');
      }
    });
  });
});
</script>

{% endblock %}