Forms Verification (#13)

* remove OTP verification step

* remove unused import

* remove controller from lib folder

* update README

* log failed responses

* display API error messages

* yarn:build

* use input.setCustomValidity

* show error messages

* adjust [data-error-container] style

* remove unused constant

* update docs

* add blank message to error codes

* 1.7.2

Author: rockwellll

dist/hellotext.js

@@ -79,15 +79,28 @@ This will mount the form regardless if the user has completed the form or not.
 
 Hellotext automatically validates the form inputs based on how they were configured on the dashboard
 using browser's native [checkValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity).
+
 Once the user tries to submit the form and there are missing required fields,
 the submission is halted and we display default browser's error message using [HTMLObjectElement.validationMessage](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage) property.
 
-### Authentication
+If the form contains a unique property and the client enters a value that is already taken,
+the submission will not be complete. Instead, an error will be reported to the client and the form will not be submitted.
+
+Uniqueness errors use the browser's native [setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity)
+method which are reported as normal form validation errors, they can be styled with the `input:invalid` selector.
+
+### Understanding Verification
 
 Hellotext protects you from bot submissions and protects your customers from identity theft and impersonation.
-When a subscriber fills the form, Hellotext sends a One Time Password (OTP) code to the subscriber. If they have an email,
-an email is sent to them, otherwise an SMS is sent to their phone number.
-Until a valid OTP has been entered, data will not show up on the dashboard and will not contribute to attribution marketing.
+
+When a subscriber fills the form with an email and/or phone number, Hellotext sends a verification link to the value the submission had at the time of creation. 
+When the customer clicks the link in their email and/or the SMS they receive, the attribute is verified. 
+Once the email/phone number were verified, the data is considered to be _verified_.
+
+Once verification of a submission is complete, Hellotext performs an automatic merge (if needed) of all profiles 
+that have the same email and/or phone number. After automatic merging, if a property has multiple values, 
+it will be visible in the Audience page and the user can see the values that were merged and they can decide which one 
+to ignore and which one to accept.
 
 ### Form Completion
 

docs/forms.md

@@ -8,7 +8,6 @@ var _stimulus = require("@hotwired/stimulus");
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _models = require("../models");
 var _forms = _interopRequireDefault(require("../api/forms"));
-var _otp_builder = require("../builders/otp_builder");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -60,30 +59,35 @@ var _default = /*#__PURE__*/function (_Controller) {
         this.buttonTarget.disabled = true;
         var response = yield _forms.default.submit(this.form.id, this.formData);
         this.buttonTarget.disabled = false;
+        var data = yield response.json();
         if (response.failed) {
-          return;
+          data.errors.forEach(error => {
+            var {
+              type,
+              parameter
+            } = error;
+            var input = this.inputTargets.find(input => input.name === parameter);
+            input.setCustomValidity(_hellotext.default.business.locale.errors[type]);
+            input.reportValidity();
+            input.addEventListener('input', () => {
+              input.setCustomValidity('');
+              input.reportValidity();
+            });
+          });
+          return this.showErrorMessages();
         }
         this.buttonTarget.style.display = 'none';
         this.element.querySelectorAll('input').forEach(input => input.disabled = true);
-        var submission = yield response.json();
-        if (submission.identified) {
-          this.completed();
-        } else {
-          _hellotext.default.setSession(submission.session);
-          this.revealOTPContainer(submission.id);
+        if (!data.identified) {
+          _hellotext.default.setSession(data.session);
         }
+        this.completed();
       });
       function submit(_x) {
         return _submit.apply(this, arguments);
       }
       return submit;
     }()
-  }, {
-    key: "revealOTPContainer",
-    value: function revealOTPContainer(submissionId) {
-      var paragraph = this.requiredInputs.find(input => input.name === 'email') ? _hellotext.default.business.locale.otp.sent_to_email : _hellotext.default.business.locale.otp.sent_to_phone;
-      this.element.appendChild(_otp_builder.OTPBuilder.build(submissionId, paragraph));
-    }
   }, {
     key: "completed",
     value: function completed() {
@@ -104,6 +108,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "clearErrorMessages",
     value: function clearErrorMessages() {
       this.element.querySelectorAll('input').forEach(input => {
+        input.setCustomValidity('');
         var parent = input.closest('article');
         parent.querySelector('[data-error-container]').innerText = '';
       });

lib/builders/otp_builder.js

@@ -7,12 +7,10 @@ exports.default = void 0;
 var _stimulus = require("@hotwired/stimulus");
 var _hellotext = _interopRequireDefault(require("./hellotext"));
 var _form_controller = _interopRequireDefault(require("./controllers/form_controller"));
-var _otp_controller = _interopRequireDefault(require("./controllers/otp_controller"));
 require("../styles/index.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var application = _stimulus.Application.start();
 application.register('hellotext--form', _form_controller.default);
-application.register('hellotext--otp', _otp_controller.default);
 window.Hellotext = _hellotext.default;
 var _default = _hellotext.default;
 exports.default = _default;

lib/controllers/form_controller.js

@@ -5,18 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  otp: {
-    sent_to_email: 'A One-Time Password has been sent to your email address',
-    sent_to_phone: 'An One-Time Password has been sent to your phone number',
-    resend_successful: 'The One-Time Password has been resent successfully',
-    invalid: 'Invalid One-Time Password',
-    resend: 'Resend verification code',
-    submit: 'Submit',
-    throttled: 'You have reached the maximum number of attempts. Please try again in 1 minute.',
-    placeholder: 'Enter the code here'
-  },
   white_label: {
     powered_by: 'Powered by'
+  },
+  errors: {
+    parameter_not_unique: 'This value is taken.',
+    blank: 'This field is required.'
   }
 };
 exports.default = _default;