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

{% block html_base_css %}invited nologin{% endblock %}

{% block html_title %}{{ customTitle('Registration') }}{% 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>GROWI</h1>

      <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>
    </div>

    <div class="login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4" id="login-dialog">
      <p class="alert alert-success">
        <strong>アカウントの作成</strong><br>
        <small>招待を受け取ったメールアドレスでアカウントを作成します</small>
      </p>

      <form role="form" action="/login/activateInvited" method="post" id="invited-form">

        <div class="input-group">
          <span class="input-group-addon"><i class="icon-envelope"></i></span>
          <input type="text" class="form-control" disabled value="{{ user.email }}">
        </div>

        <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="invitedForm[username]" value="{{ req.body.invitedForm.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="invitedForm[name]" value="{{ googleName|default(req.body.invitedForm.name) }}" required>
        </div>


        <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="invitedForm[password]" required>
        </div>

        <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('Create') }}
          </button>
        </div>

        <div class="input-group m-t-30 d-flex justify-content-center">
          <a href="https://growi.org" class="link-growi-org">
            <span class="growi">GROWI</span>.<span class="org">ORG
          </a>
        </div>
      </form>
    </div>

  </div>{# /.row #}

</div>{# /.main #}

<script>
$(function() {
  $('#invited-form input[name="invitedForm[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>このユーザーIDは利用できません。'
        );
        $('#login-dialog').addClass('has-error');
        $('#input-group-username').addClass('has-error');
      }
    });
  });
});
</script>

{% endblock %}