1 files changed, 46 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/sessions/new/email_format_validator.js b/app/assets/javascripts/pages/sessions/new/email_format_validator.js
new file mode 100644
index 00000000000..6dcf3b50dca
--- /dev/null
+++ b/app/assets/javascripts/pages/sessions/new/email_format_validator.js
@@ -0,0 +1,46 @@
+import InputValidator from '~/validators/input_validator';
+
+// It checks if email contains at least one character, number or whatever except
+// another "@" or whitespace before "@", at least two characters except
+// another "@" or whitespace after "@" and one dot in between
+const emailRegexPattern = /[^@\s]+@[^@\s]+\.[^@\s]+/;
+const hintMessageSelector = '.validation-hint';
+const warningMessageSelector = '.validation-warning';
+
+export default class EmailFormatValidator extends InputValidator {
+  constructor(opts = {}) {
+    super();
+
+    const container = opts.container || '';
+
+    document
+      .querySelectorAll(`${container} .js-validate-email`)
+      .forEach((element) =>
+        element.addEventListener('keyup', EmailFormatValidator.eventHandler.bind(this)),
+      );
+  }
+
+  static eventHandler(event) {
+    const inputDomElement = event.target;
+
+    EmailFormatValidator.setMessageVisibility(inputDomElement, hintMessageSelector);
+    EmailFormatValidator.setMessageVisibility(inputDomElement, warningMessageSelector);
+    EmailFormatValidator.validateEmailInput(inputDomElement);
+  }
+
+  static validateEmailInput(inputDomElement) {
+    const validEmail = inputDomElement.checkValidity();
+    const validPattern = inputDomElement.value.match(emailRegexPattern);
+
+    EmailFormatValidator.setMessageVisibility(
+      inputDomElement,
+      warningMessageSelector,
+      validEmail && !validPattern,
+    );
+  }
+
+  static setMessageVisibility(inputDomElement, messageSelector, isVisible = false) {
+    const messageElement = inputDomElement.parentElement.querySelector(messageSelector);
+    messageElement.classList.toggle('hide', !isVisible);
+  }
+}