feat(options): URL validation in Preferences

- URLs must match specific pattern - Invalid URL is highlighted and not saved
ipfs · Oct 8, 2017 · 3565061 · 3565061
1 parent 6bb4ba1
commit 3565061
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/add-on/src/options/options.html b/add-on/src/options/options.html
@@ -66,6 +66,10 @@
         border: 1px solid #3E9398;
         box-shadow: 0 0 5px #5FCBCF;
       }
+      input:invalid {
+        border: 1px solid #933E98;
+        box-shadow: 0 0 5px #CB5FCF;
+      }
     </style>
     <script src="../lib/npm/browser-polyfill.min.js"></script>
   </head>
@@ -80,7 +84,8 @@
               <dd>URL of preferred HTTP2IPFS&nbsp;Gateway</dd>
             </dl>
           </label>
-          <input type="url" id="customGatewayUrl" inputmode="url" required pattern="https?://[^/].+"/>
+          <input type="url" id="customGatewayUrl" inputmode="url" required
+                 pattern="^https?://[^/]+$" spellcheck="false" title="Enter URL without any sub-path" />
         </div>
         <div>
           <label for="useCustomGateway">
@@ -98,7 +103,8 @@
               <dd>Fallback URL used when Custom Gateway is not available and for copying shareable links</dd>
             </dl>
           </label>
-          <input type="url" id="publicGatewayUrl" inputmode="url" required pattern="https?://[^/]+"/>
+          <input type="url" id="publicGatewayUrl" inputmode="url" required
+                 pattern="^https?://[^/]+$" spellcheck="false" title="Enter URL without any sub-path" />
         </div>
       </fieldset>
     </form>
@@ -112,7 +118,8 @@
               <dd>Hint: this is where <code>/webui</code> lives</dd>
             </dl>
           </label>
-          <input type="url" id="ipfsApiUrl" inputmode="url" required pattern="https?://[^/]+"/>
+          <input type="url" id="ipfsApiUrl" inputmode="url" required
+                 pattern="^https?://[^/]+$" spellcheck="false" title="Enter URL without any sub-path" />
         </div>
         <div>
           <label for="ipfsApiPollMs">

diff --git a/add-on/src/options/options.js b/add-on/src/options/options.js
@@ -4,6 +4,10 @@
 
 async function saveOption (name) {
   const element = document.querySelector(`#${name}`)
+  if (!element.checkValidity()) {
+    console.warn('[ipfs-companion] Invalid value for option: ' + name)
+    return
+  }
   if (element) {
     const change = {}
     switch (element.type) {