{% extends "base.html" %}

{% block title %}{{ application_name }} Development Console - Inbound Mail{% endblock %}

{% block breadcrumbs %}

  <span class="item"><a href="">Email</a></span>

{% endblock %}

{% block head %}

  <style type="text/css">{% include "css/inboundmail.css" %}</style>

  <script type="text/javascript">

    {% include "js/webhook.js" %}

    {% include "js/multipart_form_data.js" %}

    {% include "js/rfc822_date.js" %}

    var feedbackEl;

    var formEl;

    var payloadEl;

    var fromEl;

    var toEl;

    var ccEl;

    var subjectEl;

    var bodyEl;

    var contentLengthEl;

    //var contentTypeEl;

    var sendInboundMailWebhook = function() {

      if (!feedbackEl) {

        feedbackEl = document.getElementById('feedback');

        formEl = document.getElementById('inboundmail-form');

        fromEl = document.getElementById('from');

        toEl = document.getElementById('to');

        ccEl = document.getElementById('cc');

        subjectEl = document.getElementById('subject');

        bodyEl = document.getElementById('body');

        payloadEl = document.getElementById('payload');

        contentLengthEl = document.getElementById('content-length');

      }

      var from = fromEl.value;

      var to = toEl.value;

      var cc = ccEl.value;

      var subject = subjectEl.value;

      var body = bodyEl.value;

      if (!to || !from || !body) {

        feedbackEl.className = 'ae-errorbox';

        feedbackEl.innerHTML = 'From, To and Message body are required.';

        return;

      }

      feedbackEl.className = 'ae-message';

      feedbackEl.innerHTML = 'Sending mail message...';

      var mpfd = new MultipartFormData();

      mpfd.addHeader('MIME-Version', '1.0');

      mpfd.addHeader('Date', RFC822Date.format(new Date()));

      mpfd.addHeader('From', from);

      mpfd.addHeader('To', to);

      if (cc) {

        mpfd.addHeader('Cc', cc);

      }

      mpfd.addHeader('Subject', subject);

      mpfd.addHeader('Content-Type', 'multipart/alternative; ' +

          'boundary=' + mpfd.boundary);

      mpfd.addPart(null, body, 'text/plain; charset=UTF-8');

      mpfd.addPart(null, body, 'text/html; charset=UTF-8');

      payloadEl.value = mpfd.toString();

      contentLengthEl = payloadEl.value.length;

      formEl.action = '/_ah/mail/' + escape(to);

      (new Webhook('inboundmail-form')).run(handleInboundMailResult);

      // Prevents actual form posts.

      return false;

    };

    var handleInboundMailResult = function(hook, req, error) {

      if (error != null || req == null || req.status != 200) {

        feedbackEl.className = 'ae-errorbox';

        feedbackEl.innerHTML = 'Message send failure<br>' +

            req.responseText;

      } else {

        var timestamp;

        var dateString = new Date().toString();

        var match = dateString.match(/(\d\d:\d\d:\d\d).+\((.+)\)/);

        if (!match || !match[0] || !match[2]) {

          timestamp = dateString;

        } else {

          timestamp = match[1] + ' ' + match[2];

        }

        feedbackEl.className = 'ae-message';

        feedbackEl.innerHTML = 'Message has been sent at ' + timestamp;

      }

    };

  </script>

{% endblock %}

{% block body %}

<div id="inboundmail">

  <h3>Email</h3>

  {% if inboundmail_configured %}{% else %}

    <div class="ae-errorbox">

      Inbound mail is not yet configured properly in your app.yaml in the services section.

    </div>

  {% endif %}

  <div id="feedback"></div>

  <form id="inboundmail-form"

    action="/_ah/mail/" method="post"

    onsubmit="sendInboundMailWebhook(); return false">

    <input type="hidden" name="payload" id="payload">

    <input type="hidden" id="content-type" name="header:Content-Type" value="message/rfc822">

    <input type="hidden" id="content-length" name="header:Content-Length">

    <div class="fieldset">

      <label for="from">From:</label>

      <input type="text" id="from" name="from" size="40">

    </div>

    <div class="fieldset">

      <label for="to">To:</label>

      <input type="text" id="to" name="to" size="40">

    </div>

    <div class="fieldset">

      <label for="cc">Cc:</label>

      <input type="text" id="cc" name="cc" size="40">

    </div>

    <div class="fieldset">

      <label for="subject">Subject:</label>

      <input type="text" id="subject" name="subject" size="40">

    </div>

    <div id="body-c" class="fieldset">

      <label for="body">Message body (plain text):</label>

      <textarea id="body" name="body" rows="10" cols="50"></textarea>

    </div>

    <div id="inboundmail-submit">

      <input type="submit" value="Send Email">

    </div>

  </form>

</div>

{% endblock %}

{% block final %}

{% endblock %}