url validation added. logs and alert error when same url is submitted again, if wrong url was submitted before, it tries to make it valid url using fixurl function

Author: hackertron

frontend/index.html

@@ -17,9 +17,9 @@
           </div>
             <div class="navbar-buttons">
               <form class="navbar-form">
-                <input class="url-input" id="stumble-url" type="text" placeholder="submit URL for others">
-                <button type="button" navbar-button" id ="submitUrlButton"style="border-radius: 10px; font-size: large;">&#8680;</button>
-                <!-- <button class="submit-button" type="submit">Submit</button> -->
+                <input type="url" class="url-input" id="stumble-url"  placeholder="submit URL for others" pattern="https?://.+" required>
+                <!-- <button type="button" class ="navbar-button" id ="submitUrlButton"style="border-radius: 10px; font-size: large;">&#8680;</button> -->
+                <input type="submit" class="navbar-button" value="&#8680;" id="submitUrlButton" style="border-radius: 10px; font-size: large;">
               </form>
               <button id="upvoteButton" class="navbar-button" style="border-radius: 10px; font-size: large;">&#x1F44D;</button>
               <button id="stumbleButton" class="navbar-button" style="border-radius: 10px; font-size: large;">Stumble</button>
@@ -36,7 +36,7 @@
 
           <!-- Iframe -->
           <div class="iframe-container">
-            <iframe class="iframe" id="stumble-iframe" src="https://channel4.wtf/" frameborder="0"></iframe>
+            <iframe sandbox ="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" class="iframe" id="stumble-iframe" src="https://channel4.wtf/" frameborder="0"></iframe>
           </div>
     <script src="index.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/js/shepherd.min.js"></script>

frontend/index.js

@@ -79,8 +79,23 @@ async function closeChannel() {
   }
 }
 
+function checkHttpUrl(url) {
+  let givenURL;
+  try {
+      givenURL = new URL(url);
+  } catch (error) {
+      console.log("error is",error)
+    return false;
+  }
+  return givenURL.protocol === "http:" || givenURL.protocol === "https:";
+}
+
 async function submiturl() {
   let url = document.getElementById("stumble-url").value;
+  if (!checkHttpUrl(url)) {
+    alert("invalid url")
+    return
+  }
   console.log("submit url : ", url);
   if (typeof window.ethereum != "undefined") {
     // provider / connection to the blockchain
@@ -98,7 +113,10 @@ async function submiturl() {
       await listenForTransactionMined(transactionResponse, provider);
       console.log("Done!!");
     } catch (error) {
-      console.log(error);
+      error = JSON.stringify(error)
+      error = JSON.parse(error);
+      console.log(error.error);
+      alert(error.error.message);
     }
   }
 }
@@ -236,6 +254,20 @@ function getRndInteger(min, max) {
   return Math.floor(Math.random() * (max - min)) + min;
 }
 
+
+function fixUrl(url) {
+  // Regular expression to check URL format with "http://" or "https://"
+  const urlPattern = /^(https?:\/\/)[^\s/$.?#].[^\s]*$/i;
+
+  if (!urlPattern.test(url)) {
+    // Invalid URL format, add "https://" to the beginning of the URL
+    url = `https://${url}`;
+  }
+
+  return url;
+}
+
+
 async function stumble() {
   let url = "";
   const provider = new ethers.providers.JsonRpcProvider("https://rpc.sepolia.org");
@@ -251,6 +283,8 @@ async function stumble() {
 
     url = await contract.urlArray_element(index);
     console.log(url);
+    url = fixUrl(url);
+    console.log("fixed url : ", url);
 
   // modify iframe url
   var stumble_iframe = document.getElementById("stumble-iframe");