From c21229cb8e91ebd30a28ad63aa87405faeafeee6 Mon Sep 17 00:00:00 2001
From: Carlos Lizaga <carlos.lizaga@pronovias.com>
Date: Tue, 14 Nov 2017 20:07:31 +0100
Subject: [PATCH] New validation: validate-no-utf8mb4-characters.

---
 .../product/view/options/type/text.phtml      |  2 +
 .../jasmine/tests/lib/mage/validation.test.js | 72 +++++++++++++++++++
 lib/web/i18n/en_US.csv                        |  1 +
 lib/web/mage/validation.js                    | 18 +++++
 4 files changed, 93 insertions(+)

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml
index 79dc8591fd724..11aedc33c2d42 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml
@@ -29,6 +29,7 @@ $class = ($_option->getIsRequire()) ? ' required' : '';
             if ($_option->getMaxCharacters()) {
                 $_textValidate['maxlength'] = $_option->getMaxCharacters();
             }
+            $_textValidate['validate-no-utf8mb4-characters'] = true;
             ?>
             <input type="text"
                    id="options_<?= /* @escapeNotVerified */ $_option->getId() ?>_text"
@@ -47,6 +48,7 @@ $class = ($_option->getIsRequire()) ? ' required' : '';
             if ($_option->getMaxCharacters()) {
                 $_textAreaValidate['maxlength'] = $_option->getMaxCharacters();
             }
+            $_textAreaValidate['validate-no-utf8mb4-characters'] = true;
             ?>
             <textarea id="options_<?= /* @escapeNotVerified */ $_option->getId() ?>_text"
                       class="product-custom-option"
diff --git a/dev/tests/js/jasmine/tests/lib/mage/validation.test.js b/dev/tests/js/jasmine/tests/lib/mage/validation.test.js
index 50931f940c689..12138e5939a7b 100644
--- a/dev/tests/js/jasmine/tests/lib/mage/validation.test.js
+++ b/dev/tests/js/jasmine/tests/lib/mage/validation.test.js
@@ -183,4 +183,76 @@ define([
             )).toEqual(true);
         });
     });
+
+    describe('Testing 3 bytes characters only policy (UTF-8)', function () {
+        it('rejects data, if any of the characters cannot be stored using UTF-8 collation', function () {
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '😅😂', null
+            )).toEqual(false);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '😅 test 😂', null
+            )).toEqual(false);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '💩 👻 💀', null
+            )).toEqual(false);
+        });
+
+        it('approves data, if all the characters can be stored using UTF-8 collation', function () {
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '!$-_%ç&#?!', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '1234567890', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '   ', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'test', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'испытание', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'тест', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'փորձարկում', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'परीक्षण', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'テスト', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '테스트', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '测试', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, '測試', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'ทดสอบ', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'δοκιμή', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'اختبار', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'تست', null
+            )).toEqual(true);
+            expect($.validator.methods['validate-no-utf8mb4-characters'].call(
+                $.validator.prototype, 'מִבְחָן', null
+            )).toEqual(true);
+        });
+    });
+
 });
diff --git a/lib/web/i18n/en_US.csv b/lib/web/i18n/en_US.csv
index 21cfb51d5e3c9..5c63a191420a4 100644
--- a/lib/web/i18n/en_US.csv
+++ b/lib/web/i18n/en_US.csv
@@ -99,6 +99,7 @@ Submit,Submit
 "Password cannot be the same as email address.","Password cannot be the same as email address."
 "Please fix this field.","Please fix this field."
 "Please enter a valid email address.","Please enter a valid email address."
+"Please remove invalid characters: {0}.", "Please remove invalid characters: {0}."
 "Please enter a valid URL.","Please enter a valid URL."
 "Please enter a valid date (ISO).","Please enter a valid date (ISO)."
 "Please enter only digits.","Please enter only digits."
diff --git a/lib/web/mage/validation.js b/lib/web/mage/validation.js
index 85158c581aec1..fee88826be7eb 100644
--- a/lib/web/mage/validation.js
+++ b/lib/web/mage/validation.js
@@ -396,6 +396,24 @@
             $.mage.__('Please enter at least {0} characters')
         ],
 
+        /* detect chars that would require more than 3 bytes */
+        'validate-no-utf8mb4-characters': [
+            function (value) {
+                var validator = this,
+                    message = $.mage.__('Please remove invalid characters: {0}.'),
+                    matches = value.match(/(?:[\uD800-\uDBFF][\uDC00-\uDFFF])/g),
+                    result = matches === null;
+
+                if (!result) {
+                    validator.charErrorMessage = message.replace('{0}', matches.join());
+                }
+
+                return result;
+            }, function () {
+                return this.charErrorMessage;
+            }
+        ],
+
         /* eslint-disable max-len */
         'email2': [
             function (value, element) {