From c95847fa129c5a0a6d4abbe006fdf74cfbf3b4b8 Mon Sep 17 00:00:00 2001
From: Michael Sharman <sharmo@gmail.com>
Date: Tue, 27 Feb 2024 10:15:33 +1100
Subject: [PATCH] Added validation for values with leading zeros

---
 docs/module-Authoring_Widgets.html            |  2 +-
 ...s_Authoring_validation_essayMaxLength.html |  2 +
 package.json                                  |  2 +-
 .../validation/essayMaxLength/index.js        | 39 +++++++++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/docs/module-Authoring_Widgets.html b/docs/module-Authoring_Widgets.html
index 642e24b..6b2013d 100644
--- a/docs/module-Authoring_Widgets.html
+++ b/docs/module-Authoring_Widgets.html
@@ -144,7 +144,7 @@ <h4 class="name" id=".type">type<span class="signature">()</span><span class="ty
 
 
 <p>The <code>type</code> of widget currently being edited. Returns
-undefined if not on the widget edit screen.</p>
+<code>undefined</code> if not on the widget edit screen.</p>
 
 <dl class="details">
     
diff --git a/docs/module-_Extensions_Authoring_validation_essayMaxLength.html b/docs/module-_Extensions_Authoring_validation_essayMaxLength.html
index 819c3f6..381a14a 100644
--- a/docs/module-_Extensions_Authoring_validation_essayMaxLength.html
+++ b/docs/module-_Extensions_Authoring_validation_essayMaxLength.html
@@ -76,6 +76,8 @@ <h1 class="page-title">_Extensions/Authoring/validation/essayMaxLength</h1>
 <p>Will be changed to:</p>
 <pre class="prettyprint source"><code>10
 </code></pre>
+<p>If the value contains leading zeros, the input field
+will be styled with a red border.</p>
 
 <dl class="details">
     
diff --git a/package.json b/package.json
index 50dc89d..d8ff987 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@caspingus/lt",
-    "version": "2.4.0",
+    "version": "2.5.0",
     "description": "A utility library of helpers and tools for working with Learnosity APIs.",
     "main": "src/index.js",
     "author": "michael@learnosity.com",
diff --git a/src/authoring/extensions/validation/essayMaxLength/index.js b/src/authoring/extensions/validation/essayMaxLength/index.js
index be7d20d..b1d0256 100644
--- a/src/authoring/extensions/validation/essayMaxLength/index.js
+++ b/src/authoring/extensions/validation/essayMaxLength/index.js
@@ -20,10 +20,14 @@ import * as widgets from '../../../core/widgets';
  * 10
  * ```
  *
+ * If the value contains leading zeros, the input field
+ * will be styled with a red border.
+ *
  * @module _Extensions/Authoring/validation/essayMaxLength
  */
 
 const state = {
+    renderedCss: false,
     validTypes: ['longtextV2', 'plaintext'],
 };
 
@@ -37,6 +41,7 @@ const state = {
  * @since 2.4.0
  */
 export function run() {
+    if (!state.renderedCss) injectCSS();
     setupListeners();
 }
 
@@ -69,14 +74,48 @@ function setupListeners() {
  * Inspects the value of the passed DOM element. If the
  * value contains non-numeric values (including period)
  * those invalid characters are removed.
+ * If the value contains leading zero(s), the input field
+ * is styled with a red border indicating that this is
+ * an invalid value.
  * @since 2.4.0
  * @param {*} el
  * @ignore
  */
 function validateInput(el) {
     const regex = /^\d+$/;
+    const leadingZeroRegEx = /^(0|[1-9]\d*)$/;
+    const invalidClass = 'lt__input-invalid';
 
     if (!regex.test(el.value)) {
         el.value = el.value.replace(/[^0-9]/g, '');
     }
+
+    if (el.value.length && !leadingZeroRegEx.test(el.value)) {
+        el.classList.add(invalidClass);
+    } else {
+        el.classList.remove(invalidClass);
+    }
+}
+
+/**
+ * Injects the necessary CSS to the header
+ * @since 2.5.0
+ * @ignore
+ */
+function injectCSS() {
+    const elStyle = document.createElement('style');
+    const css = `
+/* Learnosity essay validate max length styles */
+.lrn-qe-ui .lrn-qe-form-group .lrn-qe-form-control.lt__input-invalid,
+.lrn-qe-ui .lrn-qe-form-group .lrn-qe-form-control.lt__input-invalid:active:not(:disabled):not([readonly]),
+.lrn-qe-ui .lrn-qe-form-group .lrn-qe-form-control.lt__input-invalid:focus:not(:disabled):not([readonly]) {
+    border-color: #ff0000;
+    outline: 0.0714285714em solid #dd002f;
+}
+`;
+
+    elStyle.textContent = css;
+    document.head.append(elStyle);
+
+    state.renderedCss = true;
 }