issue #71 - better input validation

Author: joshwallerr

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "DocDecoder - AI-Powered Policy Summariser",
   "description": "DocDecoder uses GPT-4 to generate clear, concise summaries of any site's legal policies for you to skim over before you accept them.",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "action": {
     "default_popup": "popup.html",
     "default_icon": {
@@ -11,6 +11,11 @@
       "128": "docdecoderlogo.png"
     }
   },
+  "icons": {
+    "16": "docdecoderlogo.png",
+    "48": "docdecoderlogo.png",
+    "128": "docdecoderlogo.png"
+  },
   "background": {
     "service_worker": "background.js"
   },

popup.html

@@ -76,7 +76,7 @@ <h4 id="summaries-container-placeholder" class="text-base font-mono font-semibol
       <div id="premiumFeatureMessage" style="display: none;" class="mb-4 p-4 border-l-4 border-red-500 bg-red-100">
         <p class="mb-0">This is a premium feature. Please <a href="#" id="premium-subscribe-txt" class="underline">subscribe</a> to access it.</p>
       </div>
-      <p class="-mb-4 text-center text-gray-300">Created by <a href="https://www.instagram.com/joshwallerr/" target="_blank">Josh Waller</a> | josh@docdecoder.app</p>
+      <p class="-mb-4 text-center text-gray-300">Created by <a href="https://www.instagram.com/joshwallerr/" target="_blank">Josh Waller</a> | support@docdecoder.app</p>
     </section>
 
     <div id="gensum-container" style="display: none;" tabindex="-1" class="flex justify-center fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 !h-[calc(100%-1rem)] max-h-full">
@@ -102,7 +102,7 @@ <h3 class="text-xl font-medium text-gray-900 mb-0">
                     <p>If we haven't summarised a policy yet, you can create your own summary using the form below.</p>
                     <p class="font-semibold">Each summary you generate costs 1 summary token.</p>
                     <input type="url" name="policyLink" id="policyLink" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 mx-auto rounded-t-2xl" placeholder="Link to policy (e.g. https://example.com/terms)" required="">
-                    <input type="text" id="policyName" class="bg-gray-50 border border-t-0 border-gray-300 text-gray-900 sm:text-sm focus:ring-primary-600 focus:border-primary-600 w-full p-2.5 mx-auto rounded-b-2xl" placeholder="Policy name (e.g. Terms and Conditions)" required="" pattern="[A-Za-z&' ]*">
+                    <input type="text" id="policyName" class="bg-gray-50 border border-t-0 border-gray-300 text-gray-900 sm:text-sm focus:ring-primary-600 focus:border-primary-600 w-full p-2.5 mx-auto rounded-b-2xl" placeholder="Policy name (e.g. Terms and Conditions)" required="" pattern="^[^.$]*$">
                   </div>
                   <div id="suggested-links" class="text-xs">
                     <p class="font-semibold text-sm mb-1">Suggested links:</p>

popup.js

@@ -412,20 +412,23 @@ document.addEventListener('DOMContentLoaded', function () {
   document.getElementById("notifs-toggle").addEventListener("change", function(e) {
     chrome.storage.local.set({ notificationsEnabled: e.target.checked });
   });
-
-  document.getElementById('policyName').addEventListener('input', function (e) {
-    if (!e.target.validity.valid) {
-        e.target.setCustomValidity("Policy names can only contain letters, apostrophes ('), numbers, spaces and ampersand symbols (&).");
-    } else {
-        e.target.setCustomValidity("");
-    }
+  
+  var policyInput = document.getElementById('policyName');
+
+  policyInput.addEventListener('invalid', function(event) {
+      // Prevent the default browser tooltip
+      event.preventDefault();
+      // Set custom validation message
+      this.setCustomValidity("Policy names cannot contain periods (.) or dollar signs ($).");
+      // Report the validity state with the custom error message
+      this.reportValidity();
   });
 
-  document.getElementById('policyName').addEventListener('invalid', function (e) {
-      if (!e.target.validity.valid) {
-          e.target.setCustomValidity("Policy names can only contain letters, apostrophes ('), numbers, spaces and ampersand symbols (&).");
-      }
+  // Reset the custom validity message after the user starts modifying the input
+  policyInput.addEventListener('input', function() {
+      this.setCustomValidity('');
   });
+
 
   const isFormOpen = localStorage.getItem('isFormOpen') === 'true';
   const formOpenTimestamp = parseInt(localStorage.getItem('formOpenTimestamp') || '0');
@@ -613,11 +616,6 @@ function logUserOut() {
     });
 }
 
-
-
-
-
-
 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
   chrome.storage.local.get(['domainSummaryCounts'], function(data) {
     const currentTab = tabs[0];