Add support for email and url form fields (#11708)

* add support for email and url form fields

* UI test

5 files changed, 22 insertions, 5 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce9011186d..3d53f51515 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ The Product Changelog at **[piwik.org/changelog](http://piwik.org/changelog)** l
 * A new JavaScript tracker method `getCurrentUrl` has been added to retrieve the current URL of the website. 
 * A new JavaScript tracker method `getNumTrackedPageViews` has been added to retrieve the number of tracked page views within the currently loaded page or web application. 
 * New JavaScript tracker methods `setSessionCookie`, `getCookie`, `hasCookies`, `getCookieDomain`, `getCookiePath`, and `getSessionCookieTimeout` have been added for better cookie support in plugins. 
+* `email` and `url` form fields can now be used in settings.
 
 ## Piwik 3.0.3
 
diff --git a/core/Settings/FieldConfig.php b/core/Settings/FieldConfig.php
index ef8a6155e2..7b2ce1df03 100644
--- a/core/Settings/FieldConfig.php
+++ b/core/Settings/FieldConfig.php
@@ -27,6 +27,16 @@ class FieldConfig
     const UI_CONTROL_TEXT = 'text';
 
     /**
+     * Shows an email text field. To use this field assign it to the `$uiControl` property.
+     */
+    const UI_CONTROL_EMAIL = 'email';
+
+    /**
+     * Shows a URL text field. To use this field assign it to the `$uiControl` property.
+     */
+    const UI_CONTROL_URL = 'url';
+
+    /**
      * Shows a text area. To use this field assign it to the `$uiControl` property.
      */
     const UI_CONTROL_TEXTAREA = 'textarea';
diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
index 821404e9e2..30d73fee7c 100644
--- a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
+++ b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js
@@ -148,7 +148,7 @@
 
         function getTemplate(field) {
             var control = field.uiControl;
-            if (control === 'password') {
+            if (control === 'password' || control === 'url' || control === 'search' || control === 'email') {
                 control = 'text'; // we use same template for text and password both
             }
 
diff --git a/plugins/Morpheus/templates/demo.twig b/plugins/Morpheus/templates/demo.twig
index e1bb02ee60..84d6a2fec4 100644
--- a/plugins/Morpheus/templates/demo.twig
+++ b/plugins/Morpheus/templates/demo.twig
@@ -274,7 +274,7 @@
                      placeholder="Some text here">
                 </div>
 
-                <div piwik-field uicontrol="text" name="email"
+                <div piwik-field uicontrol="email" name="email"
                      title="Email"
                      inline-help="This is the inline help which provides more information.">
                 </div>
@@ -314,6 +314,9 @@
                      placeholder="Some text here...">
                 </div>
 
+                <div piwik-field uicontrol="url" name="urlText" title="URL" inline-help="URL field">
+                </div>
+
                 <div piwik-field uicontrol="textarea" name="description"
                      title="Description"
                      inline-help="This is a textarea. It automatically gets larger the more text is entered.">
@@ -375,7 +378,7 @@
           placeholder=&quot;Some text here&quot;&gt;
     &lt;/div&gt;
 
-    &lt;div piwik-field uicontrol=&quot;text&quot; name=&quot;email&quot;
+    &lt;div piwik-field uicontrol=&quot;email&quot; name=&quot;email&quot;
          title=&quot;Email&quot;
          inline-help=&quot;This is the inline help which provides more information.&quot;&gt;
     &lt;/div&gt;
@@ -415,6 +418,9 @@
          placeholder=&quot;Some text here...&quot;&gt;
     &lt;/div&gt;
 
+    &lt;div piwik-field uicontrol=&quot;url&quot; name=&quot;urlText&quot; title=&quot;URL&quot; inline-help=&quot;URL field&quot;&gt;
+    &lt;/div&gt;
+
     &lt;div piwik-field uicontrol=&quot;textarea&quot; name=&quot;description&quot;
          title=&quot;Description&quot;
          inline-help=&quot;This is a textarea. It automatically gets larger the more text is entered.&quot;&gt;
diff --git a/tests/UI/expected-screenshots/Morpheus_load.png b/tests/UI/expected-screenshots/Morpheus_load.png
index b124217687..aa8dde7314 100644
--- a/tests/UI/expected-screenshots/Morpheus_load.png
+++ b/tests/UI/expected-screenshots/Morpheus_load.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:73c4779f2af6eef0ddc37badcb41bf484d9e3fb056acacbbb78317d23759116f
-size 1186022
+oid sha256:b22962c13f73dafd96f26d588529445ec295c3b37010b24fe81e4b7c860969c9
+size 1196468