slack.html

---
layout: default
title: Slack Invite
permalink: /slack
---

<style type="text/css">
  .invite-form {
    margin: 50px 0px;
  }
  .invite-content {
    margin: 0 auto;
    max-width: 396px;
    padding: 20px 40px;
  }
  .input-group {
    margin: 20px 0px;
  }
  .input-group-addon {
    color: #009edf;
    font-size: 17px;
  }
</style>

<div class="container">
  <div class="row invite-form">
    <div class="invite-content">
      <form id="submit">
        <div class="row text-center">
          <img src="/images/slack.png" alt="Slack"/>
          <br><br>Join the <b>RAML Community</b> on Slack.
        </div>
        <div class="row">
          <div id="team_activity"></div>
        </div>
        <div class="row">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
            <input id="email" type="email" required class="form-control" name="email" placeholder="Enter your Email">
          </div>
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
            <div class="g-recaptcha" style="display: block; border-bottom-left-radius: 0; border-top-left-radius: 0;" data-sitekey="6LfDhysUAAAAAFUPavagId9DvdRSMR9i5v11wXBz"></div>
          </div>
        </div>
        <div class="row">
          <div class="form-group">
            <button id="input_submit" class="btn btn-success btn-lg btn-block">Request Invite</button>
          </div>
        </div>
      </form>
      <form id="result" style="display: none">
        <div class="alert alert-success">Invite sent to <br/><span id="email_confirm"></span></div>
        <div class="form-group">
          <button type="submit" class="btn btn-success btn-lg btn-block" id="page_reload">New Invite</button>
        </div>
      </form>
      <div class="row">
        Already have an account? <a href="https://raml-api.slack.com/" alt="">Sign In</a>
      </div>
    </div>
  </div>
</div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {

    // used only to allow local serving of files
    $.ajaxSetup({
      beforeSend: function(xhr) {
        if (xhr.overrideMimeType) {
          xhr.overrideMimeType("application/json");
        }
      }
    });

    $('#email').focus();
    $.ajax({
      type        : 'GET',
      url         : '/api/teamactivity'
    })
    .done(function(data,textStatus, jqXHR) {
      if (data) {
        $('#team_activity').html(data.active + " users online now of " + data.total + " registered.");
      }
    });

    $('form#submit').submit(function(event) {
      $('#input_submit').prop('disabled', true);

      // process the form
      $.ajax({
        type        : 'POST',
        url         : '/api/invites',
        data        : JSON.stringify({ 'email' : $('#email').val(), 'g-recaptcha-response' : $('#g-recaptcha-response').val() }),
        contentType : 'application/json; charset=utf-8',
        dataType    : 'json',
        encode      : true
      })
      .done(function(data,textStatus, jqXHR) {
        $('#input_submit').prop('disabled', false);
        if (data.ok) {
          $('form#submit').hide();
          $('form#result').show();
          $('#email_confirm').text(data.email);
        } else {
          $('#input-group').addClass('has-error');
          $('#input-error').show().text(data.error);
        }
      })
      .fail(function(_, _, errorThrown) {
        $('#input_submit').prop('disabled', false);
        $('#input-group').addClass('has-error');
        $('#input-error').show().text("Server error: "+errorThrown);
      });

      // stop the form from submitting the normal way and refreshing the page
      event.preventDefault();
    });

    $('form#result').submit(function(event) {
      location.reload();
    });
  });
</script>

<script src='https://www.google.com/recaptcha/api.js'></script>