weseek__growi/packages/app/src/server/views/invited.html

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

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

{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName('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 head_warn_alert_siteurl_undefined %}
 {% endblock %}
 {% block fixed-controls %}
 {% endblock %}



 {% block layout_main %}

<div class="main container-fluid">

  <div class="row">

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

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

        {% 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 grw-pt-10px p-b-10 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">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="icon-envelope"></i></span>
          </div>
          <input type="text" class="form-control" disabled value="{{ user.email }}">
        </div>
        <div class="input-group" id="input-group-username">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="icon-user"></i></span>
          </div>
          <input type="text" class="form-control" placeholder="{{ t('User ID') }}" name="invitedForm[username]" value="{{ req.body.invitedForm.username }}" required>
        </div>
        <p class="form-text text-muted">
          <span id="help-block-username"></span>
        </p>

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


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

        <div class="input-group justify-content-center d-flex mt-5">
          <input type="hidden" name="_csrf" value="{{ req.csrfToken() }}">
          <button type="submit" class="btn btn-fill" id="register">
            <div class="eff"></div>
            <span class="btn-label"><i class="icon-user-follow"></i></span>
            <span class="btn-label-text">{{ t('Create') }}</span>
          </button>
        </div>

        <div class="input-group mt-5 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 %}