forms: add deform for integration settings forms

rhodecode/public/css/deform.less

@@ -0,0 +1,91 b''
+.deform {
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .required:after {
+    color: #e32;
+    content: '*';
+    display:inline;
+  }
+
+  .control-label {
+    width: 200px;
+    float: left;
+  }
+  .control-inputs {
+    width: 400px;
+    float: left;
+  }
+  .form-group .radio, .form-group .checkbox {
+      position: relative;
+      display: block;
+      /* margin-bottom: 10px; */
+  }
+
+  .form-group {
+    clear: left;
+  }
+
+  .form-control {
+    width: 100%;
+  }
+
+  .error-block {
+    color: red;
+  }
+
+  .deform-seq-container .control-inputs {
+    width: 100%;
+  }
+
+  .deform-seq-container .deform-seq-item-handle {
+    width: 8.3%;
+    float: left;
+  }
+
+  .deform-seq-container .deform-seq-item-group {
+    width: 91.6%;
+    float: left;
+  }
+
+  .form-control {
+      input {
+        height: 40px;
+      }
+      input[type=checkbox], input[type=radio] {
+        height: auto;
+      }
+      select {
+        height: 40px;
+      }
+  }
+
+  .form-control.select2-container { height: 40px; }
+
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item label {
+      display: none;
+  }
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item:first-child label {
+      display: block;
+  }
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item .panel-heading {
+      display: none;
+  }
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item.form-group {
+      background: red;
+  }
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item .deform-seq-item-group .form-group {
+      width: 45%; padding: 0 2px; float: left; clear: none;
+  }
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item .deform-seq-item-group > .panel {
+      padding: 0;
+      margin: 5px 0;
+      border: none;
+  }
+  .deform-two-field-sequence .deform-seq-container .deform-seq-item .deform-seq-item-group > .panel > .panel-body {
+      padding: 0;
+  }
+
+}

rhodecode/templates/forms/checkbox.pt

@@ -0,0 +1,20 b''
+<div class="checkbox">
+  <input tal:define="name name|field.name;
+                       true_val true_val|field.widget.true_val;
+                       css_class css_class|field.widget.css_class;
+                       style style|field.widget.style;
+                       oid oid|field.oid"
+           type="checkbox"
+           name="${name}" value="${true_val}"
+           id="${oid}"
+           tal:attributes="checked cstruct == true_val;
+                           class css_class;
+                           style style;" />
+
+  <label for="${field.oid}">
+    <span tal:condition="hasattr(field, 'schema') and hasattr(field.schema, 'label')"
+          tal:replace="field.schema.label" class="checkbox-label" >
+    </span>
+
+  </label>
+</div>
  No newline at end of file

rhodecode/templates/forms/checkbox_choice.pt

@@ -0,0 +1,25 b''
+<div tal:define="css_class css_class|field.widget.css_class;
+                 style style|field.widget.style;
+                 oid oid|field.oid;
+                 inline getattr(field.widget, 'inline', False)"
+     tal:omit-tag="not inline">
+  ${field.start_sequence()}
+  <div tal:repeat="choice values | field.widget.values"
+       tal:omit-tag="inline"
+       class="checkbox">
+    <div tal:define="(value, title) choice">
+      <input tal:attributes="checked value in cstruct;
+                             class css_class;
+                             style style"
+             type="checkbox"
+             name="checkbox"
+             value="${value}"
+             id="${oid}-${repeat.choice.index}"/>
+      <label for="${oid}-${repeat.choice.index}"
+             tal:attributes="class inline and 'checkbox-inline'">
+        ${title}
+      </label>
+    </div>
+  </div>
+  ${field.end_sequence()}
+</div>
  No newline at end of file

rhodecode/templates/forms/form.pt

@@ -0,0 +1,100 b''
+<form
+  tal:define="style style|field.widget.style;
+              css_class css_class|string:${field.widget.css_class or field.css_class or ''};
+              item_template item_template|field.widget.item_template;
+              autocomplete autocomplete|field.autocomplete;
+              title title|field.title;
+              errormsg errormsg|field.errormsg;
+              description description|field.description;
+              buttons buttons|field.buttons;
+              use_ajax use_ajax|field.use_ajax;
+              ajax_options ajax_options|field.ajax_options;
+              formid formid|field.formid;
+              action action|field.action or None;
+              method method|field.method;"
+  tal:attributes="autocomplete autocomplete;
+                  style style;
+                  class css_class;
+                  action action;"
+  id="${formid}"
+  method="${method}"
+  enctype="multipart/form-data"
+  accept-charset="utf-8"
+  i18n:domain="deform"
+  >
+
+  <fieldset class="deform-form-fieldset">
+
+    <legend tal:condition="title">${title}</legend>
+
+    <input type="hidden" name="${h.csrf_token_key}" value="${h.get_csrf_token()}" />
+    <input type="hidden" name="_charset_" />
+    <input type="hidden" name="__formid__" value="${formid}"/>
+
+    <!--
+    <div class="alert alert-danger" tal:condition="field.error">
+      <div class="error-msg-lbl" i18n:translate=""
+        >There was a problem with your submission</div>
+      <div class="error-msg-detail" i18n:translate=""
+        >Errors have been highlighted below</div>
+      <p class="error-msg">${field.errormsg}</p>
+    </div>
+    -->
+
+    <p class="section first" tal:condition="description">
+      ${description}
+    </p>
+
+    <div tal:repeat="child field"
+         tal:replace="structure child.render_template(item_template)"/>
+
+    <div class="form-group">
+      <tal:loop tal:repeat="button buttons">
+        <button
+              tal:define="btn_disposition repeat.button.start and 'btn-primary' or (button.name == 'delete' and 'btn-danger' or 'btn-default');
+              btn_icon button.icon|None"
+              tal:attributes="disabled button.disabled if button.disabled else None"
+              id="${formid+button.name}"
+              name="${button.name}"
+              type="${button.type}"
+              class="btn ${button.css_class or btn_disposition}"
+              value="${button.value}">
+          <i tal:condition="btn_icon" class="${btn_icon}"> </i>
+          ${button.title}
+        </button>
+      </tal:loop>
+    </div>
+
+  </fieldset>
+
+  <script type="text/javascript" tal:condition="use_ajax">
+   deform.addCallback(
+     '${formid}',
+     function(oid) {
+       var target = '#' + oid;
+       var options = {
+         target: target,
+         replaceTarget: true,
+         success: function() {
+           deform.processCallbacks();
+           deform.focusFirstInput(target);
+         },
+         beforeSerialize: function() {
+           // See http://bit.ly/1agBs9Z (hack to fix tinymce-related ajax bug)
+           if ('tinymce' in window) {
+             $(tinymce.get()).each(
+               function(i, el) {
+                 var content = el.getContent();
+                 var editor_input = document.getElementById(el.id);
+                 editor_input.value = content;
+             });
+           }
+         }
+       };
+       var extra_options = ${ajax_options} || {};
+       $('#' + oid).ajaxForm($.extend(options, extra_options));
+     }
+   );
+  </script>
+
+</form>
  No newline at end of file

rhodecode/templates/forms/mapping.pt

@@ -0,0 +1,33 b''
+<tal:def tal:define="title title|field.title;
+                     description description|field.description;
+                     errormsg errormsg|field.errormsg;
+                     item_template item_template|field.widget.item_template"
+         i18n:domain="deform">
+
+  <div class="panel panel-default">
+    <div class="panel-heading">${title}</div>
+    <div class="panel-body">
+
+      <div tal:condition="errormsg"
+           class="clearfix alert alert-danger">
+        <p i18n:translate="">
+           There was a problem with this section
+        </p>
+        <p>${errormsg}</p>
+      </div>
+
+      <div tal:condition="description">
+        ${description}
+      </div>
+
+      ${field.start_mapping()}
+      <div tal:repeat="child field.children"
+           tal:replace="structure child.render_template(item_template)" >
+      </div>
+      ${field.end_mapping()}
+
+      <div style="clear: both"></div>
+    </div>
+  </div>
+
+</tal:def>
  No newline at end of file

rhodecode/templates/forms/mapping_item.pt

@@ -0,0 +1,47 b''
+<div tal:define="error_class error_class|field.widget.error_class;
+                 description description|field.description;
+                 title title|field.title;
+                 oid oid|field.oid;
+                 hidden hidden|field.widget.hidden;
+                 category category|field.widget.category;
+                 structural hidden or category == 'structural';
+                 required required|field.required;"
+     class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''}"
+     id="item-${oid}"
+     tal:omit-tag="structural"
+     i18n:domain="deform">
+
+  <label for="${oid}"
+         class="control-label ${required and 'required' or ''}"
+         tal:condition="not structural"
+         id="req-${oid}"
+         >
+    ${title}
+  </label>
+  <div class="control-inputs">
+    <div tal:define="input_prepend field.widget.input_prepend | None;
+                     input_append field.widget.input_append  | None"
+         tal:omit-tag="not (input_prepend or input_append)"
+         class="input-group">
+      <span class="input-group-addon"
+            tal:condition="input_prepend">${input_prepend}</span
+      ><span tal:replace="structure field.serialize(cstruct).strip()"
+      /><span class="input-group-addon"
+              tal:condition="input_append">${input_append}</span>
+    </div>
+    <p class="help-block error-block"
+       tal:define="errstr 'error-%s' % field.oid"
+       tal:repeat="msg field.error.messages()"
+       i18n:translate=""
+       tal:attributes="id repeat.msg.index==0 and errstr or
+       ('%s-%s' % (errstr, repeat.msg.index))"
+       tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
+      ${msg}
+    </p>
+
+    <p tal:condition="field.description and not field.widget.hidden"
+       class="help-block" >
+      ${field.description}
+    </p>
+  </div>
+</div>
  No newline at end of file

rhodecode/templates/forms/readonly/sequence.pt

@@ -0,0 +1,24 b''
+<div tal:define="
+     item_tmpl item_template|field.widget.readonly_item_template;
+     oid oid|field.oid;
+     name name|field.name;
+     title title|field.title;"
+     class="deform-seq"
+     id="${oid}">
+
+  <div class="panel panel-default">
+    <div class="panel-heading">${title}</div>
+    <div class="panel-body">
+
+      <div class="deform-seq-container">
+        <div tal:define="subfields [ x[1] for x in subfields ]"
+             tal:repeat="subfield subfields"
+             tal:replace="structure subfield.render_template(item_tmpl,
+                                                          parent=field)" />
+      </div>
+
+      <div style="clear: both"></div>
+    </div>
+
+  </div>
+</div>
  No newline at end of file

rhodecode/templates/forms/readonly/sequence_item.pt

@@ -0,0 +1,11 b''
+<div tal:omit-tag="field.widget.hidden"
+     tal:define="
+     hidden hidden|field.widget.hidden;
+     description description|field.description;"
+     title="${description}"
+     class="form-group row deform-seq-item ${field.error and error_class or ''} ${field.widget.item_css_class or ''}"
+     i18n:domain="deform">
+  <div class="deform-seq-item-group">
+    <span tal:replace="structure field.serialize(cstruct, readonly=True)"/>
+  </div>
+</div>

rhodecode/templates/forms/select2.pt

@@ -0,0 +1,55 b''
+<div tal:define="
+     name name|field.name;
+     style field.widget.style;
+     oid oid|field.oid;
+     css_class css_class|field.widget.css_class;
+     optgroup_class optgroup_class|field.widget.optgroup_class;
+     multiple multiple|field.widget.multiple;"
+     tal:omit-tag="">
+  <input type="hidden" name="__start__" value="${name}:sequence"
+         tal:condition="multiple" />
+
+  <select tal:attributes="
+          name name;
+          id oid;
+          class string: form-control ${css_class or ''};
+          data-placeholder field.widget.placeholder|None;
+          multiple multiple;
+          style style;">
+    <tal:loop tal:repeat="item values">
+      <optgroup tal:condition="isinstance(item, optgroup_class)"
+                tal:attributes="label item.label">
+        <option tal:repeat="(value, description) item.options"
+                tal:attributes="
+                selected (multiple and value in list(map(unicode, cstruct)) or value == list(map(unicode, cstruct))) and 'selected';
+                class css_class;
+                label field.widget.long_label_generator and description;
+                value value"
+                tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
+      </optgroup>
+      <option tal:condition="not isinstance(item, optgroup_class)"
+              tal:attributes="
+              selected (multiple and item[0] in list(map(unicode, cstruct)) or item[0] == unicode(cstruct)) and 'selected';
+              class css_class;
+              value item[0]">${item[1]}</option>
+    </tal:loop>
+  </select>
+
+  <script type="text/javascript">
+   deform.addCallback(
+     '${field.oid}',
+     function(oid) {
+       $('#' + oid).select2({
+         containerCssClass: 'form-control drop-menu',
+         dropdownCssClass: 'drop-menu-dropdown',
+         dropdownAutoWidth: true,
+         placeholder: "${str(field.widget.placeholder).replace('"','\\"')|""}",
+         allowClear: true
+       });
+     }
+   );
+  </script>
+
+  <input type="hidden" name="__end__" value="${name}:sequence"
+         tal:condition="multiple" />
+</div>
  No newline at end of file

rhodecode/templates/forms/sequence.pt

@@ -0,0 +1,105 b''
+<div tal:define="item_tmpl item_template|field.widget.item_template;
+                 oid oid|field.oid;
+                 name name|field.name;
+                 min_len min_len|field.widget.min_len;
+                 min_len min_len or 0;
+                 max_len max_len|field.widget.max_len;
+                 max_len max_len or 100000;
+                 now_len len(subfields);
+                 orderable orderable|field.widget.orderable;
+                 orderable orderable and 1 or 0;
+                 prototype field.widget.prototype(field);
+                 title title|field.title;"
+     class="deform-seq"
+     id="${oid}">
+
+  <style>
+    body.dragging, body.dragging * {
+      cursor: move !important;
+    }
+
+    .dragged {
+      position: absolute;
+      opacity: 0.5;
+      z-index: 2000;
+    }
+  </style>
+
+  <!-- sequence -->
+  <input type="hidden" name="__start__"
+         value="${field.name}:sequence"
+         class="deform-proto"
+         tal:attributes="prototype prototype"/>
+
+  <div class="panel panel-default">
+    <div class="panel-heading">${title}</div>
+    <div class="panel-body">
+
+      <div class="deform-seq-container"
+           id="${oid}-orderable">
+        <div tal:define="subfields [ x[1] for x in subfields ]"
+             tal:repeat="subfield subfields"
+             tal:replace="structure subfield.render_template(item_tmpl,
+                                                          parent=field)" />
+        <span class="deform-insert-before"
+              tal:attributes="
+                 min_len min_len;
+                 max_len max_len;
+                 now_len now_len;
+                 orderable orderable;"></span>
+      </div>
+
+      <div style="clear: both"></div>
+    </div>
+
+    <div class="panel-footer">
+      <a href="#"
+         class="btn deform-seq-add"
+         id="${field.oid}-seqAdd"
+         onclick="javascript: return deform.appendSequenceItem(this);">
+        <small id="${field.oid}-addtext">${add_subitem_text}</small>
+      </a>
+
+      <script type="text/javascript">
+       deform.addCallback(
+         '${field.oid}',
+         function(oid) {
+           oid_node = $('#'+ oid);
+           deform.processSequenceButtons(oid_node, ${min_len},
+                                         ${max_len}, ${now_len},
+                                         ${orderable});
+           }
+         )
+         <tal:block condition="orderable">
+             $( "#${oid}-orderable" ).sortable({
+               handle: ".deform-order-button, .panel-heading",
+               containerSelector: "#${oid}-orderable",
+               itemSelector: ".deform-seq-item",
+               placeholder: '<span class="glyphicon glyphicon-arrow-right placeholder"></span>',
+               onDragStart: function ($item, container, _super) {
+                 var offset = $item.offset(),
+                 pointer = container.rootGroup.pointer
+
+                 adjustment = {
+                   left: pointer.left - offset.left,
+                   top: pointer.top - offset.top
+                 }
+
+                 _super($item, container)
+               },
+               onDrag: function ($item, position) {
+                   $item.css({
+                     left: position.left - adjustment.left,
+                     top: position.top - adjustment.top
+                   })
+                 }
+               });
+         </tal:block>
+      </script>
+
+      <input type="hidden" name="__end__" value="${field.name}:sequence"/>
+      <!-- /sequence -->
+    </div>
+
+  </div>
+</div>
  No newline at end of file

rhodecode/templates/forms/sequence_item.pt

@@ -0,0 +1,35 b''
+<div tal:omit-tag="field.widget.hidden"
+     tal:define="hidden hidden|field.widget.hidden;
+                 error_class error_class|field.widget.error_class;
+                 description description|field.description;
+                 title title|field.title;
+                 oid oid|field.oid"
+     class="form-group row deform-seq-item ${field.error and error_class or ''} ${field.widget.item_css_class or ''}"
+     i18n:domain="deform">
+  <div class="deform-seq-item-group">
+    <span tal:replace="structure field.serialize(cstruct)"/>
+    <tal:errors condition="field.error and not hidden"
+                define="errstr 'error-%s' % oid"
+                repeat="msg field.error.messages()">
+      <p tal:condition="msg"
+         id="${errstr if repeat.msg.index==0 else '%s-%s' % (errstr, repeat.msg.index)}"
+         class="${error_class} help-block"
+         i18n:translate="">${msg}</p>
+    </tal:errors>
+  </div>
+  <div class="deform-seq-item-handle" style="padding:0">
+    <!-- sequence_item -->
+    <span class="deform-order-button close glyphicon glyphicon-resize-vertical"
+          id="${oid}-order"
+          tal:condition="not hidden"
+          title="Reorder (via drag and drop)"
+          i18n:attributes="title"></span>
+    <a class="deform-close-button close"
+       id="${oid}-close"
+       tal:condition="not field.widget.hidden"
+       title="Remove"
+       i18n:attributes="title"
+       onclick="javascript:deform.removeSequenceItem(this);">&times;</a>
+  </div>
+  <!-- /sequence_item -->
+</div>

rhodecode/templates/forms/textinput.pt

@@ -0,0 +1,23 b''
+<span tal:define="name name|field.name;
+                  css_class css_class|field.widget.css_class;
+                  oid oid|field.oid;
+                  mask mask|field.widget.mask;
+                  placeholder placeholder|field.widget.placeholder|field.placeholder|'';
+                  mask_placeholder mask_placeholder|field.widget.mask_placeholder;
+                  style style|field.widget.style;
+"
+      tal:omit-tag="">
+    <input type="text" name="${name}" value="${cstruct}"
+           tal:attributes="class string: form-control ${css_class or ''};
+                           style style"
+            placeholder="${placeholder}"
+           id="${oid}"/>
+    <script tal:condition="mask" type="text/javascript">
+      deform.addCallback(
+         '${oid}',
+         function (oid) {
+            $("#" + oid).mask("${mask}",
+                 {placeholder:"${mask_placeholder}"});
+         });
+    </script>
+</span>
  No newline at end of file

pkgs/python-packages.nix

@@ -38,6 +38,19 b''
       license = [ pkgs.lib.licenses.mit ];
     };
   };
+  Chameleon = super.buildPythonPackage {
+    name = "Chameleon-2.24";
+    buildInputs = with self; [];
+    doCheck = false;
+    propagatedBuildInputs = with self; [];
+    src = fetchurl {
+      url = "https://pypi.python.org/packages/5a/9e/637379ffa13c5172b5c0e704833ffea6bf51cec7567f93fd6e903d53ed74/Chameleon-2.24.tar.gz";
+      md5 = "1b01f1f6533a8a11d0d2f2366dec5342";
+    };
+    meta = {
+      license = [ { fullName = "BSD-derived (http://www.repoze.org/LICENSE.txt)"; } ];
+    };
+  };
   Fabric = super.buildPythonPackage {
     name = "Fabric-1.10.0";
     buildInputs = with self; [];
@@ -558,6 +571,20 b''
       license = [ pkgs.lib.licenses.bsdOriginal ];
     };
   };
+  deform = super.buildPythonPackage {
+    name = "deform-2.0a3.dev0";
+    buildInputs = with self; [];
+    doCheck = false;
+    propagatedBuildInputs = with self; [Chameleon colander iso8601 peppercorn translationstring zope.deprecation];
+    src = fetchgit {
+      url = "https://github.com/Pylons/deform";
+      rev = "08fb9de077c76951f6e70e28d4bf060a209d3d39";
+      sha256 = "0nmhajc4pfgp4lbwhs5szqfzswpij1qyr69m7qkyhncl2g2d759r";
+    };
+    meta = {
+      license = [ { fullName = "BSD-derived (http://www.repoze.org/LICENSE.txt)"; } ];
+    };
+  };
   docutils = super.buildPythonPackage {
     name = "docutils-0.12";
     buildInputs = with self; [];
@@ -1355,7 +1382,7 b''
     name = "rhodecode-enterprise-ce-4.3.0";
     buildInputs = with self; [WebTest configobj cssselect flake8 lxml mock pytest pytest-cov pytest-runner];
     doCheck = true;
-    propagatedBuildInputs = with self; [Babel Beaker FormEncode Mako Markdown MarkupSafe MySQL-python Paste PasteDeploy PasteScript Pygments Pylons Pyro4 Routes SQLAlchemy Tempita URLObject WebError WebHelpers WebHelpers2 WebOb WebTest Whoosh alembic amqplib anyjson appenlight-client authomatic backport-ipaddress celery colander decorator docutils gunicorn infrae.cache ipython iso8601 kombu msgpack-python packaging psycopg2 py-gfm pycrypto pycurl pyparsing pyramid pyramid-debugtoolbar pyramid-mako pyramid-beaker pysqlite python-dateutil python-ldap python-memcached python-pam recaptcha-client repoze.lru requests simplejson waitress zope.cachedescriptors dogpile.cache dogpile.core psutil py-bcrypt];
+    propagatedBuildInputs = with self; [Babel Beaker FormEncode Mako Markdown MarkupSafe MySQL-python Paste PasteDeploy PasteScript Pygments Pylons Pyro4 Routes SQLAlchemy Tempita URLObject WebError WebHelpers WebHelpers2 WebOb WebTest Whoosh alembic amqplib anyjson appenlight-client authomatic backport-ipaddress celery colander decorator deform docutils gunicorn infrae.cache ipython iso8601 kombu msgpack-python packaging psycopg2 py-gfm pycrypto pycurl pyparsing pyramid pyramid-debugtoolbar pyramid-mako pyramid-beaker pysqlite python-dateutil python-ldap python-memcached python-pam recaptcha-client repoze.lru requests simplejson waitress zope.cachedescriptors dogpile.cache dogpile.core psutil py-bcrypt];
     src = ./.;
     meta = {
       license = [ { fullName = "AGPLv3, and Commercial License"; } ];

requirements.txt

@@ -60,6 +60,7 b' cov-core==1.15.0'
 coverage==3.7.1
 cssselect==0.9.1
 decorator==3.4.2
+git+https://github.com/Pylons/deform@08fb9de077c76951f6e70e28d4bf060a209d3d39#egg=deform
 docutils==0.12
 dogpile.cache==0.6.1
 dogpile.core==0.4.1

rhodecode/config/middleware.py

@@ -316,9 +316,10 b' def includeme_first(config):'
     config.add_route('favicon', '/favicon.ico')
 
     config.add_static_view(
+        '_static/deform', 'deform:static')
+    config.add_static_view(
         '_static', path='rhodecode:public', cache_max_age=3600 * 24)
 
-
 def wrap_app_in_wsgi_middlewares(pyramid_app, config):
     """
     Apply outer WSGI middlewares around the application.

rhodecode/integrations/__init__.py

@@ -19,6 +19,7 b''
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 import logging
+
 from rhodecode.integrations.registry import IntegrationTypeRegistry
 from rhodecode.integrations.types import webhook, slack
 

rhodecode/integrations/schema.py

@@ -35,7 +35,6 b' class IntegrationSettingsSchemaBase(cola'
         description=lazy_ugettext('Enable or disable this integration.'),
         missing=False,
         title=lazy_ugettext('Enabled'),
-        widget='bool',
     )
 
     name = colander.SchemaNode(
@@ -43,6 +42,4 b' class IntegrationSettingsSchemaBase(cola'
         description=lazy_ugettext('Short name for this integration.'),
         missing=colander.required,
         title=lazy_ugettext('Integration name'),
-        widget='string',
     )
-

rhodecode/integrations/types/base.py

@@ -31,8 +31,7 b' class IntegrationTypeBase(object):'
         self.settings = settings
 
 
-    @classmethod
-    def settings_schema(cls):
+    def settings_schema(self):
         """
         A colander schema of settings for the integration type
 

rhodecode/integrations/types/slack.py

@@ -19,7 +19,7 b''
 # and proprietary license terms, please see https://rhodecode.com/licenses/
 
 from __future__ import unicode_literals
-
+import deform
 import re
 import logging
 import requests
@@ -48,10 +48,11 b' class SlackSettingsSchema(IntegrationSet'
             '<a href="https://my.slack.com/services/new/incoming-webhook/">'
             'slack app manager</a>')),
         default='',
-        placeholder='https://hooks.slack.com/services/...',
         preparer=strip_whitespace,
         validator=colander.url,
-        widget='string'
+        widget=deform.widget.TextInputWidget(
+            placeholder='https://hooks.slack.com/services/...',
+        ),
     )
     username = colander.SchemaNode(
         colander.String(),
@@ -59,8 +60,9 b' class SlackSettingsSchema(IntegrationSet'
         description=lazy_ugettext('Username to show notifications coming from.'),
         missing='Rhodecode',
         preparer=strip_whitespace,
-        widget='string',
-        placeholder='Rhodecode'
+        widget=deform.widget.TextInputWidget(
+            placeholder='Rhodecode'
+        ),
     )
     channel = colander.SchemaNode(
         colander.String(),
@@ -68,8 +70,9 b' class SlackSettingsSchema(IntegrationSet'
         description=lazy_ugettext('Channel to send notifications to.'),
         missing='',
         preparer=strip_whitespace,
-        widget='string',
-        placeholder='#general'
+        widget=deform.widget.TextInputWidget(
+            placeholder='#general'
+        ),
     )
     icon_emoji = colander.SchemaNode(
         colander.String(),
@@ -77,8 +80,9 b' class SlackSettingsSchema(IntegrationSet'
         description=lazy_ugettext('Emoji to use eg. :studio_microphone:'),
         missing='',
         preparer=strip_whitespace,
-        widget='string',
-        placeholder=':studio_microphone:'
+        widget=deform.widget.TextInputWidget(
+            placeholder=':studio_microphone:'
+        ),
     )
 
 
@@ -144,16 +148,19 b' class SlackIntegrationType(IntegrationTy'
 
         run_task(post_text_to_slack, self.settings, text)
 
-    @classmethod
-    def settings_schema(cls):
+    def settings_schema(self):
         schema = SlackSettingsSchema()
         schema.add(colander.SchemaNode(
             colander.Set(),
-            widget='checkbox_list',
-            choices=sorted([e.name for e in cls.valid_events]),
+            widget=deform.widget.CheckboxChoiceWidget(
+                values=sorted(
+                    [(e.name, e.display_name) for e in self.valid_events]
+                )
+            ),
             description="Events activated for this integration",
             name='events'
         ))
+
         return schema
 
     def format_pull_request_comment_event(self, event, data):

rhodecode/integrations/types/webhook.py

@@ -20,6 +20,7 b''
 
 from __future__ import unicode_literals
 
+import deform
 import logging
 import requests
 import colander
@@ -41,16 +42,18 b' class WebhookSettingsSchema(IntegrationS'
         description=lazy_ugettext('URL of the webhook to receive POST event.'),
         default='',
         validator=colander.url,
-        placeholder='https://www.example.com/webhook',
-        widget='string'
+        widget=deform.widget.TextInputWidget(
+            placeholder='https://www.example.com/webhook'
+        ),
     )
     secret_token = colander.SchemaNode(
         colander.String(),
         title=lazy_ugettext('Secret Token'),
         description=lazy_ugettext('String used to validate received payloads.'),
         default='',
-        placeholder='secret_token',
-        widget='string'
+        widget=deform.widget.TextInputWidget(
+            placeholder='secret_token'
+        ),
     )
 
 
@@ -68,13 +71,15 b' class WebhookIntegrationType(Integration'
         events.RepoCreateEvent,
     ]
 
-    @classmethod
-    def settings_schema(cls):
+    def settings_schema(self):
         schema = WebhookSettingsSchema()
         schema.add(colander.SchemaNode(
             colander.Set(),
-            widget='checkbox_list',
-            choices=sorted([e.name for e in cls.valid_events]),
+            widget=deform.widget.CheckboxChoiceWidget(
+                values=sorted(
+                    [(e.name, e.display_name) for e in self.valid_events]
+                )
+            ),
             description="Events activated for this integration",
             name='events'
         ))

rhodecode/integrations/views.py

@@ -21,6 +21,7 b''
 import colander
 import logging
 import pylons
+import deform
 
 from pyramid.httpexceptions import HTTPFound, HTTPForbidden
 from pyramid.renderers import render
@@ -101,30 +102,41 b' class IntegrationSettingsViewBase(object'
         return c
 
     def _form_schema(self):
-        return self.IntegrationType.settings_schema()
+        if self.integration:
+            settings = self.integration.settings
+        else:
+            settings = {}
+        return self.IntegrationType(settings=settings).settings_schema()
 
-    def settings_get(self, defaults=None, errors=None):
+    def settings_get(self, defaults=None, errors=None, form=None):
         """
         View that displays the plugin settings as a form.
         """
         defaults = defaults or {}
         errors = errors or {}
 
-        schema = self._form_schema()
-
-        if not defaults:
-            if self.integration:
-                defaults['enabled'] = self.integration.enabled
-                defaults['name'] = self.integration.name
+        if self.integration:
+            defaults = self.integration.settings or {}
+            defaults['name'] = self.integration.name
+            defaults['enabled'] = self.integration.enabled
+        else:
+            if self.repo:
+                scope = self.repo.repo_name
             else:
-                if self.repo:
-                    scope = self.repo.repo_name
-                else:
-                    scope = _('Global')
+                scope = _('Global')
+
+            defaults['name'] = '{} {} integration'.format(scope,
+                self.IntegrationType.display_name)
+            defaults['enabled'] = True
 
-                defaults['name'] = '{} {} integration'.format(scope,
-                    self.IntegrationType.display_name)
-                defaults['enabled'] = True
+        schema = self._form_schema().bind(request=self.request)
+
+        if self.integration:
+            buttons = ('submit', 'delete')
+        else:
+            buttons = ('submit',)
+
+        form = form or deform.Form(schema, appstruct=defaults, buttons=buttons)
 
         for node in schema:
             setting = self.settings.get(node.name)
@@ -135,6 +147,7 b' class IntegrationSettingsViewBase(object'
                     defaults.setdefault(node.name, node.default)
 
         template_context = {
+            'form': form,
             'defaults': defaults,
             'errors': errors,
             'schema': schema,
@@ -166,7 +179,9 b' class IntegrationSettingsViewBase(object'
                 redirect_to = self.request.route_url('global_integrations_home')
             raise HTTPFound(redirect_to)
 
-        schema = self._form_schema()
+        schema = self._form_schema().bind(request=self.request)
+
+        form = deform.Form(schema, buttons=('submit', 'delete'))
 
         params = {}
         for node in schema.children:
@@ -177,15 +192,15 b' class IntegrationSettingsViewBase(object'
             if val:
                 params[node.name] = val
 
+        controls = self.request.POST.items()
         try:
-            valid_data = schema.deserialize(params)
-        except colander.Invalid as e:
-            # Display error message and display form again.
+            valid_data = form.validate(controls)
+        except deform.ValidationFailure as e:
             self.request.session.flash(
-                _('Errors exist when saving plugin settings. '
+                _('Errors exist when saving integration settings. '
                   'Please check the form inputs.'),
                 queue='error')
-            return self.settings_get(errors=e.asdict(), defaults=params)
+            return self.settings_get(errors={}, defaults=params, form=e)
 
         if not self.integration:
             self.integration = Integration()
@@ -230,7 +245,6 b' class IntegrationSettingsViewBase(object'
         template_context = {
             'current_IntegrationType': self.IntegrationType,
             'current_integrations': current_integrations,
-            'current_integration': 'none',
             'available_integrations': integration_type_registry,
             'c': self._template_c_context()
         }

rhodecode/lib/helpers.py

@@ -950,7 +950,8 b' def bool2icon(value):'
 #==============================================================================
 from rhodecode.lib.auth import HasPermissionAny, HasPermissionAll, \
 HasRepoPermissionAny, HasRepoPermissionAll, HasRepoGroupPermissionAll, \
-HasRepoGroupPermissionAny, HasRepoPermissionAnyApi, get_csrf_token
+HasRepoGroupPermissionAny, HasRepoPermissionAnyApi, get_csrf_token, \
+csrf_token_key
 
 
 #==============================================================================
@@ -1877,11 +1878,15 b' def secure_form(url, method="POST", mult'
 
     """
     from webhelpers.pylonslib.secure_form import insecure_form
-    from rhodecode.lib.auth import get_csrf_token, csrf_token_key
     form = insecure_form(url, method, multipart, **attrs)
-    token = HTML.div(hidden(csrf_token_key, get_csrf_token()), style="display: none;")
+    token = csrf_input()
     return literal("%s\n%s" % (form, token))
 
+def csrf_input():
+    return literal(
+        '<input type="hidden" id="{}" name="{}" value="{}">'.format(
+        csrf_token_key, csrf_token_key, get_csrf_token()))
+
 def dropdownmenu(name, selected, options, enable_filter=False, **attrs):
     select_html = select(name, selected, options, **attrs)
     select2 = """
@@ -1937,6 +1942,16 b' def route_path(*args, **kwds):'
     return req.route_path(*args, **kwds)
 
 
+def static_url(*args, **kwds):
+    """
+    Wrapper around pyramids `route_path` function. It is used to generate
+    URLs from within pylons views or templates. This will be removed when
+    pyramid migration if finished.
+    """
+    req = get_current_request()
+    return req.static_url(*args, **kwds)
+
+
 def resource_path(*args, **kwds):
     """
     Wrapper around pyramids `route_path` function. It is used to generate

rhodecode/model/forms.py

@@ -41,6 +41,16 b' for SELECT use formencode.All(OneOf(list'
 
 """
 
+import deform
+from pkg_resources import resource_filename
+
+deform_templates = resource_filename('deform', 'templates')
+rhodecode_templates = resource_filename('rhodecode', 'templates/forms')
+search_path = (rhodecode_templates, deform_templates)
+
+deform.Form.set_zpt_renderer(search_path)
+
+
 import logging
 
 import formencode

rhodecode/public/css/main.less

@@ -25,6 +25,7 b''
 @import 'comments';
 @import 'panels-bootstrap';
 @import 'panels';
+@import 'deform';
 
 
 //--- BASE ------------------//
@@ -141,7 +142,7 b' input.inline[type="file"] {'
     h1 {
         color: @grey2;
     }
-    
+
     .error-branding {
         font-family: @text-semibold;
         color: @grey4;
@@ -1022,9 +1023,9 b' label {'
     padding: .9em;
     color: @grey3;
     background-color: @grey7;
-    border-right: @border-thickness solid @border-default-color; 
-    border-bottom: @border-thickness solid @border-default-color; 
-    border-left: @border-thickness solid @border-default-color; 
+    border-right: @border-thickness solid @border-default-color;
+    border-bottom: @border-thickness solid @border-default-color;
+    border-left: @border-thickness solid @border-default-color;
 }
 
 #repo_vcs_settings {
@@ -1953,7 +1954,7 b' div.search-feedback-items {'
 	padding:0px 0px 0px 96px;
 }
 
-div.search-code-body { 
+div.search-code-body {
     background-color: #ffffff; padding: 5px 0 5px 10px;
     pre {
         .match { background-color: #faffa6;}

rhodecode/templates/admin/integrations/edit.html

@@ -27,8 +27,6 b''
     ${integration.name}
   %endif
 </%def>
-
-
 <div class="panel panel-default">
   <div class="panel-heading">
     <h2 class="panel-title">
@@ -39,70 +37,8 b''
       %endif
     </h2>
   </div>
-  <div class="fields panel-body">
-    ${h.secure_form(request.url)}
-      <div class="form">
-      %for node in schema:
-        <% label_css_class = ("label-checkbox" if (node.widget == "bool") else "") %>
-        <div class="field">
-          <div class="label ${label_css_class}"><label for="${node.name}">${node.title}</label></div>
-          <div class="input">
-            %if node.widget in ["string", "int", "unicode"]:
-              ${h.text(node.name, defaults.get(node.name), class_="medium", placeholder=hasattr(node, 'placeholder') and node.placeholder or '')}
-            %elif node.widget in ["text"]:
-              ${h.textarea(node.name, defaults.get(node.name), class_="medium", placeholder=hasattr(node, 'placeholder') and node.placeholder or '')}
-            %elif node.widget == "password":
-              ${h.password(node.name, defaults.get(node.name), class_="medium")}
-            %elif node.widget == "bool":
-              <div class="checkbox">${h.checkbox(node.name, True, checked=defaults.get(node.name))}</div>
-            %elif node.widget == "select":
-              ${h.select(node.name, defaults.get(node.name), node.choices)}
-            %elif node.widget == "checkbox_list":
-              %for i, choice in enumerate(node.choices):
-              <%
-              name, value = choice, choice
-              if isinstance(choice, tuple):
-                choice, name = choice
-              %>
-              <div>
-                  <input id="${node.name}-${choice}"
-                         name="${node.name}"
-                         value="${value}"
-                         type="checkbox"
-                         ${value in defaults.get(node.name, []) and 'checked' or ''}>
-                  <label for="${node.name}-${value}">
-                    ${name}
-                  </label>
-              </div>
-              %endfor
-            %elif node.widget == "readonly":
-              ${node.default}
-            %else:
-              This field is of type ${node.typ}, which cannot be displayed. Must be one of [string|int|bool|select|password|text|checkbox_list].
-            %endif
-            %if node.name in errors:
-              <span class="error-message">${errors.get(node.name)}</span>
-              <br />
-            %endif
-            <p class="help-block">${node.description}</p>
-          </div>
-        </div>
-      %endfor
-
-      ## Allow derived templates to add something below the form
-      ## input fields
-      %if hasattr(next, 'below_form_fields'):
-        ${next.below_form_fields()}
-      %endif
-
-      <div class="buttons">
-        ${h.submit('save',_('Save'),class_="btn")}
-        %if integration:
-        ${h.submit('delete',_('Delete'),class_="btn btn-danger")}
-        %endif
-      </div>
-
-    </div>
-    ${h.end_form()}
+  <div class="panel-body">
+  ## TODO: dan: find way to put h in the deform context properly
+    ${form.render(h=h) | n}
   </div>
-</div>
  No newline at end of file
+</div>

rhodecode/templates/base/root.html

@@ -83,9 +83,11 b" c.template_context['visual']['default_re"
             <![endif]-->
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
+            <script language="javascript" type="text/javascript" src="${h.static_url('deform:static/scripts/deform.js')}"></script>
             ## avoide esaping the %N
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js'}";</script>
 
+
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}
 

setup.py

@@ -72,6 +72,7 b' requirements = ['
     'celery',
     'colander',
     'decorator',
+    'deform',
     'docutils',
     'gunicorn',
     'infrae.cache',