From 17ccf1cc81c33718780dc05e96150ee926e238ab Mon Sep 17 00:00:00 2001
From: Jonathan Labreuille <jonathan@mailpoet.com>
Date: Fri, 31 Jul 2015 19:02:44 +0200
Subject: [PATCH] - added codemirror symlinks + missing files from previous
 commit

---
 assets/css/lib/codemirror/codemirror.css      |   1 +
 assets/css/lib/codemirror/theme_neo.css       |   1 +
 assets/js/handlebars_helpers.js               | 140 ++++++++++++++++++
 assets/js/lib/codemirror/codemirror.js        |   1 +
 assets/js/lib/codemirror/syntax_css.js        |   1 +
 assets/js/lib/codemirror/syntax_php.js        |   1 +
 lib/renderer/handlebars.php                   |  61 ++++++++
 views/form/templates/preview.hbs              |   8 +
 .../form/templates/settings/date_default.hbs  |  23 +++
 .../form/templates/settings/date_formats.hbs  |  23 +++
 views/form/templates/settings/date_types.hbs  |  26 ++++
 views/form/templates/settings/field.hbs       |  74 +++++++++
 views/form/templates/settings/field_new.hbs   | 121 +++++++++++++++
 .../form/templates/settings/label_within.hbs  |  11 ++
 .../templates/settings/list_selection.hbs     | 117 +++++++++++++++
 .../settings/list_selection_item.hbs          |  13 ++
 views/form/templates/settings/required.hbs    |  20 +++
 views/form/templates/settings/submit.hbs      |   3 +
 views/form/templates/settings/validate.hbs    |  29 ++++
 views/form/templates/settings/values.hbs      |  71 +++++++++
 views/form/templates/settings/values_item.hbs |  15 ++
 views/form/templates/toolbar/exports.hbs      |   3 +
 22 files changed, 763 insertions(+)
 create mode 120000 assets/css/lib/codemirror/codemirror.css
 create mode 120000 assets/css/lib/codemirror/theme_neo.css
 create mode 100644 assets/js/handlebars_helpers.js
 create mode 120000 assets/js/lib/codemirror/codemirror.js
 create mode 120000 assets/js/lib/codemirror/syntax_css.js
 create mode 120000 assets/js/lib/codemirror/syntax_php.js
 create mode 100644 lib/renderer/handlebars.php
 create mode 100644 views/form/templates/preview.hbs
 create mode 100644 views/form/templates/settings/date_default.hbs
 create mode 100644 views/form/templates/settings/date_formats.hbs
 create mode 100644 views/form/templates/settings/date_types.hbs
 create mode 100644 views/form/templates/settings/field.hbs
 create mode 100644 views/form/templates/settings/field_new.hbs
 create mode 100644 views/form/templates/settings/label_within.hbs
 create mode 100644 views/form/templates/settings/list_selection.hbs
 create mode 100644 views/form/templates/settings/list_selection_item.hbs
 create mode 100644 views/form/templates/settings/required.hbs
 create mode 100644 views/form/templates/settings/submit.hbs
 create mode 100644 views/form/templates/settings/validate.hbs
 create mode 100644 views/form/templates/settings/values.hbs
 create mode 100644 views/form/templates/settings/values_item.hbs
 create mode 100644 views/form/templates/toolbar/exports.hbs

diff --git a/assets/css/lib/codemirror/codemirror.css b/assets/css/lib/codemirror/codemirror.css
new file mode 120000
index 0000000000..92a0885038
--- /dev/null
+++ b/assets/css/lib/codemirror/codemirror.css
@@ -0,0 +1 @@
+../../../../node_modules/codemirror/lib/codemirror.css
\ No newline at end of file
diff --git a/assets/css/lib/codemirror/theme_neo.css b/assets/css/lib/codemirror/theme_neo.css
new file mode 120000
index 0000000000..9089a89082
--- /dev/null
+++ b/assets/css/lib/codemirror/theme_neo.css
@@ -0,0 +1 @@
+../../../../node_modules/codemirror/theme/neo.css
\ No newline at end of file
diff --git a/assets/js/handlebars_helpers.js b/assets/js/handlebars_helpers.js
new file mode 100644
index 0000000000..ad1e6266a4
--- /dev/null
+++ b/assets/js/handlebars_helpers.js
@@ -0,0 +1,140 @@
+// Handlebars helpers
+Handlebars.registerHelper('concat', function() {
+    var size = (arguments.length - 1),
+        output = '';
+    for(var i = 0; i < size; i++) {
+        output += arguments[i];
+    };
+    return output;
+});
+
+Handlebars.registerHelper('number_format', function(value, block) {
+    return Number(value).toLocaleString();
+});
+Handlebars.registerHelper('date_format', function(timestamp, block) {
+  if(window.moment) {
+        if(timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
+            return;
+        }
+
+        // set date format
+        var f = block.hash.format || "MMM Do, YYYY";
+        // check if we passed a timestamp
+        if(parseInt(timestamp, 10) == timestamp) {
+            return moment.unix(timestamp).format(f);
+        } else {
+            return moment.utc(timestamp).format(f);
+        }
+  } else {
+    return timestamp;
+  };
+});
+
+Handlebars.registerHelper('cycle', function(value, block) {
+  var values = value.split(' ');
+  return values[block.data.index % (values.length + 1)];
+});
+
+Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
+    switch (operator) {
+        case '==':
+            return (v1 == v2) ? options.fn(this) : options.inverse(this);
+        case '===':
+            return (v1 === v2) ? options.fn(this) : options.inverse(this);
+        case '!=':
+            return (v1 != v2) ? options.fn(this) : options.inverse(this);
+        case '!==':
+            return (v1 !== v2) ? options.fn(this) : options.inverse(this);
+        case '<':
+            return (v1 < v2) ? options.fn(this) : options.inverse(this);
+        case '<=':
+            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
+        case '>':
+            return (v1 > v2) ? options.fn(this) : options.inverse(this);
+        case '>=':
+            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
+        case '&&':
+            return (v1 && v2) ? options.fn(this) : options.inverse(this);
+        case '||':
+            return (v1 || v2) ? options.fn(this) : options.inverse(this);
+        case 'in':
+            var values = v2.split(',');
+            return (v2.indexOf(v1) !== -1) ? options.fn(this) : options.inverse(this);
+        default:
+            return options.inverse(this);
+    }
+});
+
+Handlebars.registerHelper('nl2br', function(value, block) {
+    return value.gsub("\n", "<br />");
+});
+
+Handlebars.registerHelper('json_encode', function(value, block) {
+    return JSON.stringify(value);
+});
+
+Handlebars.registerHelper('json_decode', function(value, block) {
+    return JSON.parse(value);
+});
+Handlebars.registerHelper('url', function(value, block) {
+    var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
+
+    return url + value;
+});
+Handlebars.registerHelper('emailFromMailto', function(value) {
+    var mailtoMatchingRegex = /^mailto\:/i;
+    if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
+        return value.replace(mailtoMatchingRegex, '');
+    } else {
+        return value;
+    }
+});
+Handlebars.registerHelper('lookup', function(obj, field, options) {
+    return obj && obj[field];
+});
+
+
+Handlebars.registerHelper('rsa_key', function(value, block) {
+    // extract all lines into an array
+    if(value === undefined) return '';
+
+    var lines = value.trim().split("\n");
+
+    // remove header & footer
+    lines.shift();
+    lines.pop();
+
+    // return concatenated lines
+    return lines.join('');
+});
+
+Handlebars.registerHelper('trim', function(value, block) {
+    if(value === null || value === undefined) return '';
+    return value.trim();
+});
+
+/**
+ * {{ellipsis}}
+ * From: https://github.com/assemble/handlebars-helpers
+ * @author: Jon Schlinkert <http://github.com/jonschlinkert>
+ * Truncate the input string and removes all HTML tags
+ * @param  {String} str      The input string.
+ * @param  {Number} limit    The number of characters to limit the string.
+ * @param  {String} append   The string to append if charaters are omitted.
+ * @return {String}          The truncated string.
+ */
+Handlebars.registerHelper('ellipsis', function (str, limit, append) {
+    if (append === undefined) {
+        append = '';
+    }
+    var sanitized = str.replace(/(<([^>]+)>)/g, '');
+    if (sanitized.length > limit) {
+        return sanitized.substr(0, limit - append.length) + append;
+    } else {
+        return sanitized;
+    }
+});
+
+Handlebars.registerHelper('getNumber', function (string) {
+    return parseInt(string, 10);
+});
diff --git a/assets/js/lib/codemirror/codemirror.js b/assets/js/lib/codemirror/codemirror.js
new file mode 120000
index 0000000000..244e07162b
--- /dev/null
+++ b/assets/js/lib/codemirror/codemirror.js
@@ -0,0 +1 @@
+../../../../node_modules/codemirror/lib/codemirror.js
\ No newline at end of file
diff --git a/assets/js/lib/codemirror/syntax_css.js b/assets/js/lib/codemirror/syntax_css.js
new file mode 120000
index 0000000000..0f8d4ef66d
--- /dev/null
+++ b/assets/js/lib/codemirror/syntax_css.js
@@ -0,0 +1 @@
+../../../../node_modules/codemirror/mode/css/css.js
\ No newline at end of file
diff --git a/assets/js/lib/codemirror/syntax_php.js b/assets/js/lib/codemirror/syntax_php.js
new file mode 120000
index 0000000000..11c175d581
--- /dev/null
+++ b/assets/js/lib/codemirror/syntax_php.js
@@ -0,0 +1 @@
+../../../../node_modules/codemirror/mode/php/php.js
\ No newline at end of file
diff --git a/lib/renderer/handlebars.php b/lib/renderer/handlebars.php
new file mode 100644
index 0000000000..ae4d1f4f55
--- /dev/null
+++ b/lib/renderer/handlebars.php
@@ -0,0 +1,61 @@
+<?php
+namespace MailPoet\Renderer;
+
+class Handlebars extends \Twig_Extension {
+
+  public function __construct() {
+  }
+
+  public function getName() {
+    return 'handlebars';
+  }
+
+  public function getFunctions() {
+    return array(
+      new \Twig_SimpleFunction(
+        'partial',
+        array($this, 'generatePartial'),
+        array(
+          'needs_environment' => true,
+          'needs_context'     => true,
+          'is_safe'           => array('all'))
+      )
+    );
+  }
+
+  public function generatePartial($env, $context) {
+    // get arguments (minus env & $context)
+    $args = array_slice(func_get_args(), 2);
+    $args_count = count($args);
+
+    // default values
+    $alias = null;
+
+    switch($args_count) {
+      case 2:
+        list($id, $file) = $args;
+      break;
+      case 3:
+        list($id, $file, $alias) = $args;
+      break;
+      default:
+        return;
+      break;
+    }
+
+    $output = array();
+
+    $output[] = '<script id="'.$id.'" type="text/x-handlebars-template">';
+    $output[] = twig_include($env, $context, $file);
+    $output[] = '</script>';
+
+    if($alias !== null) {
+      $output[] = '<script type="text/javascript">';
+      $output[] = ' Handlebars.registerPartial(
+        "'.$alias.'",
+        jQuery("#'.$id.'").html());';
+      $output[] = '</script>';
+    }
+    return join("\n", $output);
+  }
+}
\ No newline at end of file
diff --git a/views/form/templates/preview.hbs b/views/form/templates/preview.hbs
new file mode 100644
index 0000000000..66e54cdda0
--- /dev/null
+++ b/views/form/templates/preview.hbs
@@ -0,0 +1,8 @@
+<style type="text/css" id="mailpoet_form_preview_styles">{{{ css }}}</style>
+<div class="mailpoet_form">
+  <div class="mailpoet_message">
+    <p class="mailpoet_validate_success"><%= __('This is a success message') %></p>
+    <p class="mailpoet_validate_error"><%= __('This is an error message') %></p>
+  </div>
+  {{{ html }}}
+</div>
\ No newline at end of file
diff --git a/views/form/templates/settings/date_default.hbs b/views/form/templates/settings/date_default.hbs
new file mode 100644
index 0000000000..b85242bb3e
--- /dev/null
+++ b/views/form/templates/settings/date_default.hbs
@@ -0,0 +1,23 @@
+<p class="clearfix">
+  <label><%= __("Preselect today's date:") %></label>
+  <span class="group">
+    <label>
+      <input
+        class="mailpoet_radio"
+        type="radio"
+        name="params[is_default_today]"
+        value="1"
+        {{#if params.is_default_today}}checked="checked"{{/if}}
+      /><%= __('Yes') %>
+    </label>
+    <label>
+      <input
+        class="mailpoet_radio"
+        type="radio"
+        name="params[is_default_today]"
+        value=""
+        {{#unless params.is_default_today}}checked="checked"{{/unless}}
+      /><%= __('No') %>
+    </label>
+  </span>
+</p>
\ No newline at end of file
diff --git a/views/form/templates/settings/date_formats.hbs b/views/form/templates/settings/date_formats.hbs
new file mode 100644
index 0000000000..f8f57272d6
--- /dev/null
+++ b/views/form/templates/settings/date_formats.hbs
@@ -0,0 +1,23 @@
+<% for date_type, formats in date_formats %>
+  {{#ifCond params.date_type "===" "<%= date_type %>"}}
+    <% if formats.count == 1 %>
+      <!-- display format as hidden value -->
+      <input type="hidden" name="params[date_format]" value="<%= formats[0] %>" />
+    <% else %>
+      <!-- display label -->
+      <p class="clearfix">
+        <label><%= __('Order') %></label>
+        // display all possible date formats
+        <select name="params[date_format]">
+          <% for format in formats %>
+            <option
+              {{#ifCond params.date_format "===" "<%= format %>"}}
+                selected="selected"
+              {{/ifCond}}
+              value="<%= format %>"><%= format %></option>
+          <% endfor %>
+        </select>
+      </p>
+    <% endif %>
+  {{/ifCond}}
+<% endfor %>
\ No newline at end of file
diff --git a/views/form/templates/settings/date_types.hbs b/views/form/templates/settings/date_types.hbs
new file mode 100644
index 0000000000..d86eadb4ae
--- /dev/null
+++ b/views/form/templates/settings/date_types.hbs
@@ -0,0 +1,26 @@
+<p class="clearfix">
+  <label><%= __('Type of date') %></label>
+  <select name="params[date_type]">
+    <% for type, label in date_types %>
+      <option
+        {{#ifCond params.date_type "==" "<%= type %>"}}
+          selected="selected"
+        {{/ifCond}}
+        data-format="<%= date_formats[type][0] %>" value="<%= type %>"
+      ><%= label %></option>
+    <% endfor %>
+  </select>
+  <input type="hidden" name="params[date_format]" value="" />
+</p>
+
+<script type="text/javascript">
+  jQuery(function($) {
+    $('select[name="params[date_type]"]').on('change', function() {
+      // set default date format depending on date type
+      $('input[name="params[date_format]"]')
+        .val($(this)
+        .find('option:selected')
+        .data('format'));
+    });
+  });
+<{{!}}/script>
\ No newline at end of file
diff --git a/views/form/templates/settings/field.hbs b/views/form/templates/settings/field.hbs
new file mode 100644
index 0000000000..177ef5da49
--- /dev/null
+++ b/views/form/templates/settings/field.hbs
@@ -0,0 +1,74 @@
+<form id="form_field_settings" name="form_field_settings" action="" method="post">
+  {{#ifCond type 'in' 'submit'}}
+  {{> _settings_label }}
+  {{/ifCond}}
+
+  {{#ifCond type '==' 'input'}}
+  {{> _settings_label }}
+  {{> _settings_label_within }}
+  {{/ifCond}}
+
+  {{#ifCond type '==' 'textarea'}}
+  {{> _settings_label }}
+  {{> _settings_label_within }}
+
+  <p class="clearfix">
+    <label><%= __('Number of lines:') %></label>
+    <select name="params[lines]">
+      <% for i in 1..5 %>
+        <option value="<%= i %>"
+          {{#ifCond params.lines '==' <%= i %>}}selected="selected"{{/ifCond}}
+        ><%= _n('1 line', '%d lines', i) | format(i) %></option>
+      <% endfor %>
+    </select>
+  </p>
+  {{/ifCond}}
+
+  {{#ifCond type 'in' 'checkbox,radio'}}
+  {{> _settings_label }}
+  {{/ifCond}}
+
+  {{#ifCond type '==' 'list'}}
+  {{> _settings_label }}
+  {{> _settings_list_selection }}
+  {{/ifCond}}
+
+  {{#ifCond type '==' 'select'}}
+  {{> _settings_label }}
+  {{> _settings_label_within }}
+  {{/ifCond}}
+
+  {{#ifCond type '==' 'date'}}
+  {{> _settings_label }}
+  {{> _settings_date_default }}
+  {{> _settings_date_format }}
+  {{/ifCond}}
+
+  {{#ifCond type '==' 'html'}}
+  <textarea name="params[text]">{{ params.text }}</textarea>
+  <p class="clearfix">
+    <label>
+      <input type="hidden" name="params[nl2br]" value="0" />
+      <input
+        class="mailpoet_checkbox"
+        type="checkbox"
+        name="params[nl2br]"
+        {{#ifCond params.nl2br ">" 0}}checked="checked"{{/ifCond}}
+        value="1"
+        />&nbsp;<%= __('Automatically add paragraphs') %>
+    </label>
+  </p>
+  {{/ifCond}}
+
+  {{> _settings_submit }}
+</form>
+
+<script type="text/javascript">
+  jQuery(function($) {
+    $(document).on('submit', '#form_field_settings', function(e) {
+      // trigger callback
+      MailPoet.Modal.success();
+      return false;
+    });
+  });
+<{{!}}/script>
\ No newline at end of file
diff --git a/views/form/templates/settings/field_new.hbs b/views/form/templates/settings/field_new.hbs
new file mode 100644
index 0000000000..62ec4c3e7e
--- /dev/null
+++ b/views/form/templates/settings/field_new.hbs
@@ -0,0 +1,121 @@
+
+<form id="form_field_new" name="form_field_new" action="" method="post">
+  {{#if field}}<input type="hidden" id="field" name="field" value="{{ field }}" />{{/if}}
+  <p>
+    <label for="type"><%= __('Select a field type:') %></label>
+    <select id="type" name="type">
+      <option value="">--</option>
+      <option
+        {{#ifCond type '==' 'input'}}selected="selected"{{/ifCond}}
+        value="input"><%= __('Text Input') %>
+      </option>
+      <option
+        {{#ifCond type '==' 'textarea'}}selected="selected"{{/ifCond}}
+        value="textarea"><%= __('Text Area') %>
+      </option>
+      <option
+        {{#ifCond type '==' 'radio'}}selected="selected"{{/ifCond}}
+        value="radio"><%= __('Radio buttons') %>
+      </option>
+      <option
+        {{#ifCond type '==' 'checkbox'}}selected="selected"{{/ifCond}}
+        value="checkbox"><%= __('Checkbox') %>
+      </option>
+      <option
+        {{#ifCond type '==' 'select'}}selected="selected"{{/ifCond}}
+        value="select"><%= __('Select') %>
+      </option>
+      <option
+        {{#ifCond type '==' 'date'}}selected="selected"{{/ifCond}}
+        value="date"><%= __('Date') %>
+      </option>
+    </select>
+  </p>
+  <p class="mailpoet_error" data-error="type_required">
+    <%= __('You need to select a type.') %>
+  </p>
+
+  <p>
+    <label><%= __("Field's name:") %></label>
+    <input type="text" name="name" value="{{ name }}" />
+  </p>
+  <p class="mailpoet_error" data-error="name_required">
+    <%= __('You need to specify a name.') %>
+  </p>
+
+  <p class="mailpoet_error" data-error="name_already_exists">
+    <%= __('This name is already used.') %>
+  </p>
+
+  <hr />
+
+  <div class="field_type_form"></div>
+
+  <p class="mailpoet_align_right">
+    <input type="submit" value="<%= __('Done') %>" class="button-primary" />
+  </p>
+</form>
+
+<script type="text/javascript">
+  jQuery(function($) {
+
+    $(function() {
+      loadFieldForm();
+    });
+
+    $('#form_field_new').on('submit', function() {
+      // get data
+      var data = $(this).serializeObject();
+
+      // hide errors
+      $('.mailpoet_error').hide();
+
+      mailpoet_post_json('subscriber_extend.php', data, function(response) {
+        if(response.error !== undefined) {
+          // there's an error!
+          $('.mailpoet_error[data-error="'+response.error+'"]').show();
+        } else {
+          // we should get the fields list in the response
+          if(response.fields !== undefined) {
+            // get fields (defaults to empty array)
+            var fields = response.fields || [];
+            // refresh toolbar
+            mailpoet_form_fields({
+              fields: $.merge(fields, default_fields)
+            });
+          }
+
+          // close popup
+          MailPoet.Modal.success();
+        }
+      });
+      return false;
+    });
+
+    $('#form_field_new #type').on('change', function() {
+      if($(this).val() !== '') {
+        $('.mailpoet_error[data-error="type_required"]').hide();
+      }
+      // load template based on type
+      loadFieldForm($(this).val());
+    });
+
+    function loadFieldForm(type) {
+      type = (type === undefined) ? $('#form_field_new #type').val() : type;
+      if(type !== '') {
+        var template = Handlebars.compile($('#form_template_field_'+type).html()),
+            data = {type: type},
+            field = $('#form_field_new #field').val();
+
+        if(field !== undefined && field.length > 0) {
+          var params = $('.mailpoet_form_field[wysija_field="'+field+'"]').attr('wysija_params');
+          data.params = JSON.parse(params);
+        }
+        // render field template
+        $('#form_field_new .field_type_form').html(template(data));
+      } else {
+        $('#form_field_new .field_type_form').html('');
+      }
+    }
+  });
+<{{!}}/script>
\ No newline at end of file
diff --git a/views/form/templates/settings/label_within.hbs b/views/form/templates/settings/label_within.hbs
new file mode 100644
index 0000000000..66db946921
--- /dev/null
+++ b/views/form/templates/settings/label_within.hbs
@@ -0,0 +1,11 @@
+<p class="clearfix">
+  <label><%= __('Display label within input:') %></label>
+  <span class="group">
+    <label>
+      <input class="mailpoet_radio" type="radio" name="params[label_within]" value="1" {{#if params.label_within}}checked="checked"{{/if}} /><%= __('Yes') %>
+    </label>
+    <label>
+      <input class="mailpoet_radio" type="radio" name="params[label_within]" value="" {{#unless params.label_within}}checked="checked"{{/unless}} /><%= __('No') %>
+    </label>
+  </span>
+</p>
\ No newline at end of file
diff --git a/views/form/templates/settings/list_selection.hbs b/views/form/templates/settings/list_selection.hbs
new file mode 100644
index 0000000000..4aaf161797
--- /dev/null
+++ b/views/form/templates/settings/list_selection.hbs
@@ -0,0 +1,117 @@
+<p class="mailpoet_error" data-error="user_no_list">
+  <%= __('You need to specify at least 1 list.') %>
+</p>
+
+<ul class="mailpoet_list_selection clearfix"></ul>
+
+<div id="mailpoet_list_available_container">
+  <h3><%= __('Select the list you want to add:') %></h3>
+
+  <select class="mailpoet_list_available"></select>
+
+  <a href="javascript:;" class="mailpoet_list_add"><span><%= __('Add') %></span></a>
+</div>
+
+<script type="text/javascript">
+  var selected_lists = {{#if params.values}}{{{ json_encode params.values }}}
+    {{else}}<%= default_list | json_encode %>{{/if}},
+  available_lists = [
+    <% for list in lists %>
+      <%= list | json_encode %>,
+    <% endfor %>
+  ];
+
+  jQuery(function($) {
+    $(function() {
+      mailpoet_list_available_render();
+      mailpoet_list_selection_render();
+
+      setInputNames();
+
+      // add list
+      $('.mailpoet_list_add').on('click', function() {
+        // add currently selected list to the selection
+        var selected_list = $('.mailpoet_list_available :selected');
+
+        // add list to selection
+        selected_lists.push({
+          list: selected_list.val(),
+          list_name: selected_list.text(),
+          is_checked: 0
+        });
+
+        // remove list from available lists
+        selected_list.remove();
+
+        // render selection
+        mailpoet_list_selection_render();
+
+        setInputNames();
+      });
+
+      // remove list
+      $('.mailpoet_list_selection').on('click', '.remove', function() {
+        var element = $(this).parents('li');
+        // remove currently selected list to the selection
+        var selected_list = parseInt(element.data('list'), 10);
+
+        // remove list from selection
+        selected_lists = selected_lists.filter(function(list) {
+          return (parseInt(list.list, 10) !== selected_list);
+        });
+
+        // remove element
+        element.remove();
+
+        // render available list
+        mailpoet_list_available_render();
+
+        setInputNames();
+      });
+    });
+
+    function mailpoet_list_available_render() {
+      // get selected lists ids
+      var selected_lists_ids = selected_lists.map(function(list) { return parseInt(list.list, 10); });
+
+      // clear available lists
+      $('.mailpoet_list_available').html('');
+
+      // display available lists
+      $.each(available_lists, function(i, list) {
+        if($.inArray(list.list, selected_lists_ids) < 0) {
+          $('.mailpoet_list_available').append('<option value="'+list.list+'">'+list.list_name+'</option>');
+        }
+      });
+
+      mailpoet_list_available_toggle();
+    }
+
+    function mailpoet_list_selection_render() {
+      // list item template
+      var template = Handlebars.compile($('#field_settings_list_selection_item').html());
+
+      // update view
+      $('.mailpoet_list_selection').html(template({ lists: selected_lists }));
+
+      mailpoet_list_available_toggle();
+    }
+
+    function mailpoet_list_available_toggle() {
+      // toggle visibility of available lists
+      if($('.mailpoet_list_available option').length === 0) {
+        $('#mailpoet_list_available_container').hide();
+      } else {
+        $('#mailpoet_list_available_container').show();
+      }
+    }
+
+    function setInputNames() {
+      $('.mailpoet_list_selection li').each(function(index, item) {
+        $(item).find('.mailpoet_is_checked').attr('name', 'params[values]['+index+'][is_checked]');
+        $(item).find('.mailpoet_list_id').attr('name', 'params[values]['+index+'][list]');
+        $(item).find('.mailpoet_list_name').attr('name', 'params[values]['+index+'][list_name]');
+      });
+    }
+  });
+<{{!}}/script>
\ No newline at end of file
diff --git a/views/form/templates/settings/list_selection_item.hbs b/views/form/templates/settings/list_selection_item.hbs
new file mode 100644
index 0000000000..aff6675a1a
--- /dev/null
+++ b/views/form/templates/settings/list_selection_item.hbs
@@ -0,0 +1,13 @@
+{{#each lists}}
+<li data-list="{{ list }}">
+  <label>
+    <input class="mailpoet_list_id" type="hidden" value="{{ list }}" />
+    <input class="mailpoet_is_checked" type="checkbox" value="1"
+      {{#ifCond is_checked '>' 0}}checked="checked"{{/ifCond}} />
+    <input class="mailpoet_list_name" type="hidden" value="{{ list_name }}" />
+    {{ list_name }}
+  </label>
+  <a class="remove" href="javascript:;"><%= __('Remove') %></a>
+  <a class="handle" href="javascript:;"><%= __('Move') %></a>
+</li>
+{{/each}}
\ No newline at end of file
diff --git a/views/form/templates/settings/required.hbs b/views/form/templates/settings/required.hbs
new file mode 100644
index 0000000000..c1f887f6a5
--- /dev/null
+++ b/views/form/templates/settings/required.hbs
@@ -0,0 +1,20 @@
+<p class="clearfix">
+  <label><%= __('Is this field mandatory?') %></label>
+  <span class="group">
+    <label>
+      <input type="radio"
+        class="mailpoet_radio"
+        name="params[required]"
+        value="1"
+        {{#if params.required}}checked="checked"{{/if}} /><%= __('Yes') %>
+    </label>
+    <label>
+      <input
+        class="mailpoet_radio"
+        type="radio"
+        name="params[required]"
+        value=""
+        {{#unless params.required}}checked="checked"{{/unless}} /><%= __('No') %>
+    </label>
+  </span>
+</p>
\ No newline at end of file
diff --git a/views/form/templates/settings/submit.hbs b/views/form/templates/settings/submit.hbs
new file mode 100644
index 0000000000..3fd85f7bda
--- /dev/null
+++ b/views/form/templates/settings/submit.hbs
@@ -0,0 +1,3 @@
+<p class="mailpoet_align_right">
+  <input type="submit" value="<%= __('Done') %>" class="button-primary" />
+</p>
\ No newline at end of file
diff --git a/views/form/templates/settings/validate.hbs b/views/form/templates/settings/validate.hbs
new file mode 100644
index 0000000000..5be5a2694e
--- /dev/null
+++ b/views/form/templates/settings/validate.hbs
@@ -0,0 +1,29 @@
+<p class="clearfix">
+  <label><%= __('Validate for:') %></label>
+  <select name="params[validate]">
+    <option {{#ifCond params.validate '==' ''}}selected="selected"{{/ifCond}}
+      value="">
+      <%= __('Nothing') %>
+    </option>
+
+    <option {{#ifCond params.validate '==' 'onlyNumberSp'}}selected="selected"{{/ifCond}}
+      value="onlyNumberSp">
+      <%= __('Numbers only') %>
+    </option>
+
+    <option {{#ifCond params.validate '==' 'onlyLetterSp'}}selected="selected"{{/ifCond}}
+      value="onlyLetterSp">
+      <%= __('Letters only') %>
+    </option>
+
+    <option {{#ifCond params.validate '==' 'onlyLetterNumber'}}selected="selected"{{/ifCond}}
+      value="onlyLetterNumber">
+      <%= __('Alphanumerical') %>
+    </option>
+
+    <option {{#ifCond params.validate '==' 'phone'}}selected="selected"{{/ifCond}}
+      value="phone">
+      <%= __('Phone number, (+,-,#,(,) and spaces allowed)') %>
+    </option>
+  </select>
+</p>
\ No newline at end of file
diff --git a/views/form/templates/settings/values.hbs b/views/form/templates/settings/values.hbs
new file mode 100644
index 0000000000..d4887feb42
--- /dev/null
+++ b/views/form/templates/settings/values.hbs
@@ -0,0 +1,71 @@
+<div class="mailpoet_multiple_values">
+  <ul></ul>
+  {{#ifCond type 'in' 'radio,select'}}
+    <a href="javascript:;" class="add"><span></span><%= __('Add item') %></a>
+  {{/ifCond}}
+</div>
+<script type="text/javascript">
+jQuery(function($) {
+  var field_values = {{#if params.values}}{{{ json_encode params.values }}}{{else}}[]{{/if}},
+    field_type = "{{ type }}",
+    template = Handlebars.compile($('#field_settings_values_item').html());
+
+  // set default value for checkbox type if there is no value defined
+  if(field_type === 'checkbox' && field_values.length !== 1) {
+    if(field_values.length > 1) {
+      field_values = [field_values[0]];
+    } else {
+      // push a default empty value
+      field_values = [{}];
+    }
+  }
+  $(function() {
+    // render all values by creating inputs
+    for(var i = 0, count = field_values.length; i < count; i++) {
+      createInput(template, field_values[i]);
+    }
+    // set inputs name
+    setInputNames();
+
+    // add value
+    $('.mailpoet_multiple_values .add').on('click', function() {
+      createInput(template);
+      setInputNames();
+    });
+    // remove value
+    $(document).on('click', '.mailpoet_multiple_values li .remove', function() {
+      $(this).parent('li').remove();
+      setInputNames();
+    });
+    // create an input
+    function createInput(template, values) {
+      var data = values || {};
+      // set field type
+      data.type = field_type;
+      // add input to selection
+      $('.mailpoet_multiple_values ul').append(template(data));
+    }
+    // set input names (since their index is based on their position)
+    function setInputNames() {
+      $('.mailpoet_multiple_values li').each(function(index, item) {
+        $(item).find('.is_checked').attr('name', 'params[values]['+index+'][is_checked]');
+        $(item).find('.value').attr('name', 'params[values]['+index+'][value]');
+      });
+    }
+    {{#ifCond type '!=' 'checkbox'}}
+    $('.mailpoet_multiple_values').on('click', '.is_checked', function() {
+      // get click checkbox's state
+      var is_checked = $(this).is(':checked');
+      // uncheck all checkboxes
+      $('.mailpoet_multiple_values .is_checked').removeProp('checked');
+      // toggle clicked checkbox
+      if(is_checked === false) {
+        $(this).removeProp('checked');
+      } else {
+        $(this).prop('checked', 'checked');
+      }
+    });
+    {{/ifCond}}
+  });
+});
+<{{!}}/script>
\ No newline at end of file
diff --git a/views/form/templates/settings/values_item.hbs b/views/form/templates/settings/values_item.hbs
new file mode 100644
index 0000000000..107e9b43ec
--- /dev/null
+++ b/views/form/templates/settings/values_item.hbs
@@ -0,0 +1,15 @@
+<li class="clearfix">
+  {{#ifCond type 'in' 'radio,select'}}
+    <input class="is_checked radio" type="radio" name=""
+    {{#if is_checked}}checked="checked"{{/if}} value="1"/>
+  {{else}}
+    <input class="is_checked checkbox" type="checkbox" name=""
+    {{#if is_checked}}checked="checked"{{/if}} value="1"/>
+  {{/ifCond}}
+
+    <input type="text" name="" class="value" value="{{ value }}" />
+
+    {{#ifCond type 'in' 'radio,select'}}
+      <a class="remove" href="javascript:;"><%= __('Remove') %></a>
+    {{/ifCond}}
+</li>
\ No newline at end of file
diff --git a/views/form/templates/toolbar/exports.hbs b/views/form/templates/toolbar/exports.hbs
new file mode 100644
index 0000000000..20a810de70
--- /dev/null
+++ b/views/form/templates/toolbar/exports.hbs
@@ -0,0 +1,3 @@
+{{#each exports}}
+  <textarea class="mailpoet_form_export_output" id="mailpoet_form_export_{{ @key }}" onClick="this.focus();this.select();" readonly="readonly">{{ this }}</textarea>
+{{/each}}
\ No newline at end of file