Bootstrap markup for auto-generated forms

css/converse.css

@@ -8712,11 +8712,6 @@ body.reset {
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
           font-size: 90%;
           color: #A53214; }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
-        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
-        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
-          display: block; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],

dist/converse.js

@@ -76473,7 +76473,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           fieldset_el.insertAdjacentHTML('beforeend', `<legend>${title}</legend>`);
 
           if (instructions && instructions !== title) {
-            fieldset_el.insertAdjacentHTML('beforeend', `<p class="instructions">${instructions}</p>`);
+            fieldset_el.insertAdjacentHTML('beforeend', `<p class="form-help">${instructions}</p>`);
           }
 
           _.each(fields, function (field) {
@@ -85041,18 +85041,23 @@ return __p
 
 var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./node_modules/lodash/escape.js")};
 module.exports = function(o) {
-var __t, __p = '', __e = _.escape;
-__p += '<!-- src/templates/form_checkbox.html -->\n<label class="checkbox" for="' +
+var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
+function print() { __p += __j.call(arguments, '') }
+__p += '<!-- src/templates/form_checkbox.html -->\n<div class="form-group">\n    <input id="' +
+__e(o.id) +
+'" name="' +
 __e(o.name) +
+'" type="checkbox" ' +
+__e(o.checked) +
+' ';
+ if (o.required) { ;
+__p += ' required ';
+ } ;
+__p += ' >\n    <label class="form-check-label" for="' +
+__e(o.id) +
 '">' +
 __e(o.label) +
-'<input name="' +
-__e(o.name) +
-'" type="' +
-__e(o.type) +
-'" ' +
-__e(o.checked) +
-'></label>\n\n';
+'</label>\n</div>\n';
 return __p
 };
 
@@ -85069,13 +85074,17 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/form_input.html -->\n<label>\n    ' +
+__p += '<!-- src/templates/form_input.html -->\n<div class="form-group">\n    <label for="' +
+__e(o.id) +
+'">' +
 __e(o.label) +
-'\n    <input name="' +
+'</label>\n    <input class="form-control" name="' +
 __e(o.name) +
 '" type="' +
 __e(o.type) +
-'" \n        ';
+'" id="' +
+__e(o.id) +
+'"\n        ';
  if (o.placeholder) { ;
 __p += ' placeholder="' +
 __e(o.placeholder) +
@@ -85089,9 +85098,9 @@ __e(o.value) +
  } ;
 __p += '\n        ';
  if (o.required) { ;
-__p += ' class="required" ';
+__p += ' required ';
  } ;
-__p += ' >\n</label>\n';
+__p += ' >\n</div>\n';
 return __p
 };
 
@@ -85108,17 +85117,21 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/form_select.html -->\n<label>\n    ' +
+__p += '<!-- src/templates/form_select.html -->\n<div class="form-group">\n    <label for="' +
+__e(o.id) +
+'">' +
 __e(o.label) +
-'\n    <select name="' +
+'</label>\n    <select class="form-control" id="' +
+__e(o.id) +
+'" name="' +
 __e(o.name) +
-'"  ';
+'" ';
  if (o.multiple) { ;
 __p += ' multiple="multiple" ';
  } ;
 __p += '>' +
 ((__t = (o.options)) == null ? '' : __t) +
-'</select>\n</label>\n';
+'</select>\n</div>\n';
 return __p
 };
 
@@ -85855,7 +85868,7 @@ __e(o.__("Account Registration:")) +
 __e(o.domain) +
 '</legend>\n<p class="title">' +
 __e(o.title) +
-'</p>\n<p class="instructions">' +
+'</p>\n<p class="form-help instructions">' +
 __e(o.instructions) +
 '</p>\n<div class="form-errors hidden"></div>\n\n<fieldset class="buttons">\n    <input type="submit" class="btn btn-primary" value="' +
 __e(o.__('Register')) +
@@ -87673,6 +87686,14 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
     }));
   };
 
+  u.getUniqueId = function () {
+    return 'xxxxxxxx-xxxx'.replace(/[x]/g, function (c) {
+      var r = Math.random() * 16 | 0,
+          v = c === 'x' ? r : r & 0x3 | 0x8;
+      return v.toString(16);
+    });
+  };
+
   u.xForm2webForm = function (field, stanza, domain) {
     /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
      * and turns it into an HTML field.
@@ -87699,6 +87720,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         });
 
         return tpl_form_select({
+          'id': u.getUniqueId(),
           'name': field.getAttribute('var'),
           'label': field.getAttribute('label'),
           'options': options.join(''),
@@ -87718,8 +87740,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         });
       } else if (field.getAttribute('type') === 'boolean') {
         return tpl_form_checkbox({
+          'id': u.getUniqueId(),
           'name': field.getAttribute('var'),
-          'type': XFORM_TYPE_MAP[field.getAttribute('type')],
           'label': field.getAttribute('label') || '',
           'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
           'required': !_.isNil(field.querySelector('required'))
@@ -87740,6 +87762,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         });
       } else {
         return tpl_form_input({
+          'id': u.getUniqueId(),
           'label': field.getAttribute('label') || '',
           'name': field.getAttribute('var'),
           'placeholder': null,

sass/_chatrooms.scss

@@ -249,12 +249,6 @@
                         font-size: 90%;
                         color: $error-color;
                     }
-                    .chatroom-form {
-                        label,
-                        input[type=text] {
-                            display: block;
-                        }
-                    }
                     input[type=button],
                     input[type=submit] {
                         margin: 0 0.5em;

src/converse-muc-views.js

@@ -1045,7 +1045,7 @@
                     fieldset_el.insertAdjacentHTML('beforeend', `<legend>${title}</legend>`);
 
                     if (instructions && instructions !== title) {
-                        fieldset_el.insertAdjacentHTML('beforeend', `<p class="instructions">${instructions}</p>`);
+                        fieldset_el.insertAdjacentHTML('beforeend', `<p class="form-help">${instructions}</p>`);
                     }
                     _.each(fields, function (field) {
                         fieldset_el.insertAdjacentHTML('beforeend', u.xForm2webForm(field, stanza));

src/templates/form_checkbox.html

-<label class="checkbox" for="{{{o.name}}}">{{{o.label}}}<input name="{{{o.name}}}" type="{{{o.type}}}" {{{o.checked}}}></label>
-
+<div class="form-group">
+    <input id="{{{o.id}}}" name="{{{o.name}}}" type="checkbox" {{{o.checked}}} {[ if (o.required) { ]} required {[ } ]} >
+    <label class="form-check-label" for="{{{o.id}}}">{{{o.label}}}</label>
+</div>

src/templates/form_input.html

-<label>
-    {{{o.label}}}
-    <input name="{{{o.name}}}" type="{{{o.type}}}" 
+<div class="form-group">
+    <label for="{{{o.id}}}">{{{o.label}}}</label>
+    <input class="form-control" name="{{{o.name}}}" type="{{{o.type}}}" id="{{{o.id}}}"
         {[ if (o.placeholder) { ]} placeholder="{{{o.placeholder}}}" {[ } ]}
         {[ if (o.value) { ]} value="{{{o.value}}}" {[ } ]}
-        {[ if (o.required) { ]} class="required" {[ } ]} >
-</label>
+        {[ if (o.required) { ]} required {[ } ]} >
+</div>

src/templates/form_select.html

-<label>
-    {{{o.label}}}
-    <select name="{{{o.name}}}"  {[ if (o.multiple) { ]} multiple="multiple" {[ } ]}>{{o.options}}</select>
-</label>
+<div class="form-group">
+    <label for="{{{o.id}}}">{{{o.label}}}</label>
+    <select class="form-control" id="{{{o.id}}}" name="{{{o.name}}}" {[ if (o.multiple) { ]} multiple="multiple" {[ } ]}>{{o.options}}</select>
+</div>

src/templates/registration_form.html

 <legend>{{{o.__("Account Registration:")}}} {{{o.domain}}}</legend>
 <p class="title">{{{o.title}}}</p>
-<p class="instructions">{{{o.instructions}}}</p>
+<p class="form-help instructions">{{{o.instructions}}}</p>
 <div class="form-errors hidden"></div>
 
 <fieldset class="buttons">

src/utils/form.js

@@ -73,6 +73,14 @@
         );
     };
 
+    u.getUniqueId = function () {
+        return 'xxxxxxxx-xxxx'.replace(/[x]/g, function(c) {
+            var r = Math.random() * 16 | 0,
+                v = c === 'x' ? r : r & 0x3 | 0x8;
+            return v.toString(16);
+        });
+    };
+
     u.xForm2webForm = function (field, stanza, domain) {
         /* Takes a field in XMPP XForm (XEP-004: Data Forms) format
          * and turns it into an HTML field.
@@ -104,6 +112,7 @@
                     }
                 );
                 return tpl_form_select({
+                    'id': u.getUniqueId(),
                     'name': field.getAttribute('var'),
                     'label': field.getAttribute('label'),
                     'options': options.join(''),
@@ -122,8 +131,8 @@
                 });
             } else if (field.getAttribute('type') === 'boolean') {
                 return tpl_form_checkbox({
+                    'id': u.getUniqueId(),
                     'name': field.getAttribute('var'),
-                    'type': XFORM_TYPE_MAP[field.getAttribute('type')],
                     'label': field.getAttribute('label') || '',
                     'checked': _.get(field.querySelector('value'), 'textContent') === "1" && 'checked="1"' || '',
                     'required': !_.isNil(field.querySelector('required'))
@@ -144,6 +153,7 @@
                 });
             } else {
                 return tpl_form_input({
+                    'id': u.getUniqueId(),
                     'label': field.getAttribute('label') || '',
                     'name': field.getAttribute('var'),
                     'placeholder': null,