mmazzarolo/twilio_with_ui.js

## twilio_with_ui.js
'use latest';

/**
 * A simple tasks that renders a page where an user can input a phone number and its recipient to send an SMS message using the Twilio APis.
 * Please keep in mind that the following environment variables are required:
 * TWILIO_SID: The SID token of your Twilio account
 * TWILIO_AUTH_TOKEN: The auth token of your Twilio account
 * TWILIO_FROM_NUMBER: The sender of the SMS (created in your Twilio account)
 */

import express from 'express';
import { fromExpress } from 'webtask-tools';
import bodyParser from 'body-parser';
import twilio from 'twilio';

const TASK_NAME = `twilio_with_ui`;

bodyParser.urlencoded();

const app = express();
app.use(bodyParser.urlencoded());

/**
 * Helper function that send an HTML page as as the response.
 * @param Object res The Express response object
 * @param Object title The HTML page title
 */
const sendHtmlView = (res, title = '', body = '') => {
  const html = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
      <style>
        body {
          margin: 40px;
        }
        input {
          margin: 10px 0;
        }
        </style>
    </head>
    <body>
      ${body}
    </body>
    </html>
  `;
  res.set('Content-Type', 'text/html');
  return res.send(html);
};

/**
 * POST /sms
 *
 * Sends an SMS using the Twilio APIs.
 *
 * @param Object req.body.sms_body The SMS message
 * @param Object req.body.sms_to_number The recipient phone number (with the coutry code prefix)
 * @param Object body The HTML page body
 */
app.post('/sms', (req, res) => {
  const ctx = req.webtaskContext;
  const { sms_body, sms_to_number } = req.body;
  const { TWILIO_SID, TWILIO_AUTH_TOKEN, TWILIO_FROM_NUMBER } = ctx.secrets;

  const twilioClient = new twilio.RestClient(TWILIO_SID, TWILIO_AUTH_TOKEN);

  twilioClient.messages
    .create({
      body: sms_body,
      to: sms_to_number,
      from: TWILIO_FROM_NUMBER,
    })
    .then(data => {
      const title = 'SMS sender';
      const body = `
        <div>
          <h3>SMS sent succesfully!</h3><br />
          <a href="/${TASK_NAME}/">Send another SMS</a><br />
        </div>
      `;
      return sendHtmlView(res, title, body);
    })
    .catch(err => {
      const title = 'SMS sender';
      const body = `
        <div>
          <h3>Cannot send the SMS: ${err.message}</h3><br />
          <a href="/${TASK_NAME}/">Give it another try</a><br />
        </div>
      `;
      return sendHtmlView(res, title, body);
    });
});

/**
 * GET /
 *
 * Serves a simple landing page with a form that sends a POST request to /sms
 */
app.get('/', (req, res) => {
  const ctx = req.webtaskContext;
  const title = 'SMS sender';
  const body = `
    <form class="pure-form" action="/${TASK_NAME}/sms" method="POST">
      <h2>Send an SMS</h2>
      <input id="input-sms-to-number" name="sms_to_number" placeholder="Phone number" /><br />
      <input id="input-sms-body" name="sms_body" placeholder="SMS text" /><br />
      <input  id="button-send" class="pure-button pure-button-primary" type="submit" name="Send" value="Send" />
      <script>
        function validateForm() {
          var buttonSend = document.getElementById('button-send');
          var inputSmsToNumber = document.getElementById('input-sms-to-number');
          var inputSmsBody = document.getElementById('input-sms-body');
          if (inputSmsToNumber.value && inputSmsBody.value) {
            buttonSend.disabled = false;
          } else {
            buttonSend.disabled = true;
          }
        }
        document.getElementById('input-sms-to-number').onchange = validateForm;
        document.getElementById('input-sms-body').onchange = validateForm;
        document.getElementById('input-sms-to-number').onkeyup = validateForm;
        document.getElementById('input-sms-body').onkeyup = validateForm;
        window.onload = validateForm;
      </script>
    </form>
  `;
  return sendHtmlView(res, title, body);
});

module.exports = fromExpress(app);
	'use latest';

	/**
	* A simple tasks that renders a page where an user can input a phone number and its recipient to send an SMS message using the Twilio APis.
	* Please keep in mind that the following environment variables are required:
	* TWILIO_SID: The SID token of your Twilio account
	* TWILIO_AUTH_TOKEN: The auth token of your Twilio account
	* TWILIO_FROM_NUMBER: The sender of the SMS (created in your Twilio account)
	*/

	import express from 'express';
	import { fromExpress } from 'webtask-tools';
	import bodyParser from 'body-parser';
	import twilio from 'twilio';

	const TASK_NAME = `twilio_with_ui`;

	bodyParser.urlencoded();

	const app = express();
	app.use(bodyParser.urlencoded());

	/**
	* Helper function that send an HTML page as as the response.
	* @param Object res The Express response object
	* @param Object title The HTML page title
	*/
	const sendHtmlView = (res, title = '', body = '') => {
	const html = `
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
	<style>
	body {
	margin: 40px;
	}
	input {
	margin: 10px 0;
	}
	</style>
	</head>
	<body>
	${body}
	</body>
	</html>
	`;
	res.set('Content-Type', 'text/html');
	return res.send(html);
	};

	/**
	* POST /sms
	*
	* Sends an SMS using the Twilio APIs.
	*
	* @param Object req.body.sms_body The SMS message
	* @param Object req.body.sms_to_number The recipient phone number (with the coutry code prefix)
	* @param Object body The HTML page body
	*/
	app.post('/sms', (req, res) => {
	const ctx = req.webtaskContext;
	const { sms_body, sms_to_number } = req.body;
	const { TWILIO_SID, TWILIO_AUTH_TOKEN, TWILIO_FROM_NUMBER } = ctx.secrets;

	const twilioClient = new twilio.RestClient(TWILIO_SID, TWILIO_AUTH_TOKEN);

	twilioClient.messages
	.create({
	body: sms_body,
	to: sms_to_number,
	from: TWILIO_FROM_NUMBER,
	})
	.then(data => {
	const title = 'SMS sender';
	const body = `
	<div>
	<h3>SMS sent succesfully!</h3><br />
	<a href="/${TASK_NAME}/">Send another SMS</a><br />
	</div>
	`;
	return sendHtmlView(res, title, body);
	})
	.catch(err => {
	const title = 'SMS sender';
	const body = `
	<div>
	<h3>Cannot send the SMS: ${err.message}</h3><br />
	<a href="/${TASK_NAME}/">Give it another try</a><br />
	</div>
	`;
	return sendHtmlView(res, title, body);
	});
	});

	/**
	* GET /
	*
	* Serves a simple landing page with a form that sends a POST request to /sms
	*/
	app.get('/', (req, res) => {
	const ctx = req.webtaskContext;
	const title = 'SMS sender';
	const body = `
	<form class="pure-form" action="/${TASK_NAME}/sms" method="POST">
	<h2>Send an SMS</h2>
	<input id="input-sms-to-number" name="sms_to_number" placeholder="Phone number" /><br />
	<input id="input-sms-body" name="sms_body" placeholder="SMS text" /><br />
	<input id="button-send" class="pure-button pure-button-primary" type="submit" name="Send" value="Send" />
	<script>
	function validateForm() {
	var buttonSend = document.getElementById('button-send');
	var inputSmsToNumber = document.getElementById('input-sms-to-number');
	var inputSmsBody = document.getElementById('input-sms-body');
	if (inputSmsToNumber.value && inputSmsBody.value) {
	buttonSend.disabled = false;
	} else {
	buttonSend.disabled = true;
	}
	}
	document.getElementById('input-sms-to-number').onchange = validateForm;
	document.getElementById('input-sms-body').onchange = validateForm;
	document.getElementById('input-sms-to-number').onkeyup = validateForm;
	document.getElementById('input-sms-body').onkeyup = validateForm;
	window.onload = validateForm;
	</script>
	</form>
	`;
	return sendHtmlView(res, title, body);
	});

	module.exports = fromExpress(app);