Merge branch 'release/4.0.6'

CHANGELOG.md

@@ -1,3 +1,16 @@
+# v4.0.6
+## 03/19/2020
+1. [](#new)
+    * CHANGE: Form labels are now displayed in `raw` format so you can use HTML in them
+    * Added support for `name` attribute on buttons [#411](https://github.com/getgrav/grav-plugin-form/issues/411)
+1. [](#improved)
+    * Added support for `classes` option in `avatar` field 
+    * Recompiled JS with latest NPM libraries
+1. [](#bugfix)
+    * Fixed password field outputting the contents to HTML (will now always be empty when loading the page)
+    * Escape default output in `formdata.html.twig` [#384](https://github.com/getgrav/grav-plugin-form/issues 
+    * Better JS rendering of captcha field scripts for VueJS template compatibility
+
 # v4.0.5
 ## 03/05/2020
 

README.md

@@ -26,4 +26,12 @@ The Learn site has two pages describing how to use the Form Plugin:
 
 # Using email
 
-Note: when using email functionality in your forms, make sure you have configured the Email plugin correctly. In particular, make sure you configured the "Email from" and "Email to" email addresses in the Email plugin with your email address
+Note: when using email functionality in your forms, make sure you have configured the Email plugin correctly. In particular, make sure you configured the "Email from" and "Email to" email addresses in the Email plugin with your email address.
+
+# NOTES:
+
+As of version **Form version 4.0.6**, form labels are now being output with the `|raw` filter.  If you wish to show HTML in your form label, ie `Root Folder <root>`, then you need to escape that in your form definition:
+
+```yaml
+label: Root Folder &lt;root&gt;
+```

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Form
-version: 4.0.5
+version: 4.0.6
 testing: false
 description: Enables the forms handling
 icon: check-square

package.json

@@ -27,8 +27,8 @@
     "eslint": "^5.6.0",
     "eslint-loader": "^2.1.1",
     "exports-loader": "^0.7.0",
-    "gulp": "latest",
-    "gulp-autoprefixer": "latest",
+    "gulp": "^4.0.2",
+    "gulp-autoprefixer": "^7.0.1",
     "gulp-clean-css": "^3.10.0",
     "gulp-csscomb": "^3.0.8",
     "gulp-rename": "^1.4.0",

templates/forms/default/data.html.twig

@@ -27,7 +27,7 @@
                             {% elseif field.type == 'select' %}
                                 {{ field.options[form.value(scope ~ field.name)]|e }}
                             {% else %}
-                                {{ string(form.value(scope ~ field.name))|nl2br }}
+                                {{ string(form.value(scope ~ field.name))|e|nl2br }}
                             {% endif %}
                         {% endblock %}
                     </div>

templates/forms/default/field.html.twig

@@ -91,7 +91,7 @@
 
 {# Field Label #}
 {% set form_field_label = field.markdown ? field.label|markdown(false) : field.label %}
-{% set form_field_label = form_field_label|default(field.name|capitalize)|t|e %}
+{% set form_field_label = form_field_label|default(field.name|capitalize)|t %}
 
 {# Field Help #}
 {% if field.help %}

templates/forms/default/form.html.twig

@@ -138,7 +138,11 @@
         {% block embed_button_core %}
           {% if button.id %}id="{{ button.id }}"{% endif %}
           {% if button.disabled %}disabled="disabled"{% endif %}
-          {% if button.task %}name="task" value="{{ button.task }}"{% endif %}
+          {% if button.name %}
+            name="{{ button.name }}"
+          {% else %}
+            {% if button.task %}name="task" value="{{ button.task }}"{% endif %}
+          {% endif %}
           type="{{ button.type|default('submit') }}"
         {% endblock %}
 

templates/forms/fields/avatar/avatar.html.twig

@@ -3,8 +3,8 @@
 {% block field %}
 {% set avatar = form.value('avatar') %}
 {% if avatar %}
-    <label><img style="max-width:200px;" src="{{ base_url_simple ~ '/' ~ (avatar|first).path }}" /></label>
+    <label class="{{ field.classes }}"><img class="{{ field.img_classes }}" style="max-width:200px;" src="{{ base_url_simple ~ '/' ~ (avatar|first).path }}" /></label>
 {% else %}
-    <label><img src="https://www.gravatar.com/avatar/{{ form.value('email')|md5 }}?s=200" /></label>
+    <label class="{{ field.classes }}"><img class="{{ field.img_classes }}" src="https://www.gravatar.com/avatar/{{ form.value('email')|md5 }}?s=200" /></label>
 {% endif %}
-{% endblock %}
+{% endblock %}

templates/forms/fields/captcha/captcha.html.twig

@@ -10,11 +10,11 @@
 
 {% block input %}
   {% if not site_key %}
-      <script>console && console.error('site_key was not defined for form "{{ form.name }}" (Grav Form Plugin)')</script>
+      <script type="application/javascript">console && console.error('site_key was not defined for form "{{ form.name }}" (Grav Form Plugin)')</script>
   {% elseif config.plugins.form.recaptcha.version == 3 %}
-      {#{% do assets.addJs('https://www.google.com/recaptcha/api.js?render='~site_key) %}#}
-      <script src='https://www.google.com/recaptcha/api.js?render={{ site_key }}&theme={{ theme }}'></script>
-      <script>
+      {% do assets.addJs('https://www.google.com/recaptcha/api.js?render='~site_key~'&theme=' ~ theme) %}
+      {#<script src='https://www.google.com/recaptcha/api.js?render={{ site_key }}&theme={{ theme }}'></script>#}
+      <script type="application/javascript">
           (document.querySelectorAll('form') || []).forEach(function(form, index) {
               var submit = function(event) {
                   event.preventDefault();
@@ -42,7 +42,7 @@
           });
       </script>
   {% elseif config.plugins.form.recaptcha.version == '2-invisible' %}
-      <script>
+      <script type="application/javascript">
           function captchaOnloadCallback_{{ formName }}() {
               var form = document.querySelector('form#{{ form.id }}');
               var submits = form.querySelectorAll('[type="submit"]') || [];
@@ -75,7 +75,7 @@
       <script src="https://www.google.com/recaptcha/api.js?onload=captchaOnloadCallback_{{ formName }}&hl={{ grav.language.language }}&theme={{ theme }}"
               async defer></script>
   {% else %}
-    <script>
+    <script type="application/javascript">
         var captchaOnloadCallback_{{ formName }} = function captchaOnloadCallback_{{ formName }}() {
             grecaptcha.render('g-recaptcha-{{ formName }}', {
                 'sitekey': "{{ site_key }}",

templates/forms/fields/password/password.html.twig

@@ -1,5 +1,7 @@
 {% extends "forms/field.html.twig" %}
 
+{% set value = null %}
+
 {% block input_attributes %}
     type="password"
     {{ parent() }}

templates/forms/layouts/field.html.twig

@@ -7,9 +7,9 @@
         <label class="{{ layout_form_field_label_classes }}{{ form_field_label_trim }}" {% if field.id %}for="{{ form_field_for }}"{% endif %}>
           {%- block label -%}
             {%- if form_field_help -%}
-              <span class="tooltip" data-tooltip="{{ form_field_help|e }}">{{ form_field_label }}</span>
+              <span class="tooltip" data-tooltip="{{ form_field_help|e }}">{{ form_field_label|raw }}</span>
             {%- else -%}
-              {{ form_field_label }}
+              {{ form_field_label|raw }}
             {%- endif -%}
             {%- if form_field_required %}
               <span class="required">*</span>