From f0825a0cfb1b2c4a400682395e2b7759711ce756 Mon Sep 17 00:00:00 2001
From: Dekkia <github@dekkia.de>
Date: Sun, 14 Apr 2024 15:52:31 +0200
Subject: [PATCH] give feedback to user about wrong links (closes #1)

- Added pattern to input field
- added error-banner in case browser messes up pattern matching.
---
 css/global.css | 11 +++++++++++
 index.html     |  4 +++-
 js/main.js     | 14 ++++++++++++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/css/global.css b/css/global.css
index 47e7a34..364301d 100644
--- a/css/global.css
+++ b/css/global.css
@@ -2,6 +2,8 @@
     --accent: #2F0C7A;
     --marked: #2F0C7A;
     --markedfg: var(--accent-text);
+    --bannerfg: #ffc400;
+    --bannerbg: #212121;
     --headerbg: rgba(255, 255, 255, .65);
     --headerblend: lighten;
 }
@@ -17,4 +19,13 @@
 
 mark {
     color: var(--markedfg);
+}
+
+banner {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--standard-border-radius);
+    display: none;
+    background-color: var(--bannerfg);
+    color: var(--bannerbg);
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 7b0c44f..8b1a197 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,10 @@ <h1 id="topBarText">Unroll Ninja</h1>
   </div>
 
   <form id="urlInputForm" action="javascript:main.unrollButton();">
-    <input type="url" id="posturl" placeholder="Link to Mastodon Thread" />
+    <input type="url" id="posturl" placeholder="Link to Mastodon Thread" pattern="^http(s)*:\/\/.*@.*\/\d*$"
+      title="Required Format: https://mastodon.example.org/@exampleUser/123" />
     <button id="startUnrollButton">Unroll</button>
+    <banner id="underInputBanner"></banner>
   </form>
 
   <div id="explainerText">
diff --git a/js/main.js b/js/main.js
index 4982d4e..c17787b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,9 @@
 var main = {
     init: function () {
-
+        //Hide banner in case it's been displayed previously
+        document.getElementById("posturl").onkeydown = function () {
+            document.getElementById("underInputBanner").style.display = "none";
+        };
     },
     unrollButton: function () {
         var postUrl = document.getElementById("posturl").value;
@@ -22,6 +25,13 @@ var main = {
             document.location = "thread?uri=" + encodeURIComponent(serverDomain) + "&id=" + encodeURIComponent(postID);
 
         } else {
+            //Normally this should never show up
+            //Because the browser is supposed to catch this.
+            //But let's better be save then sorry.
+            var banner = document.getElementById("underInputBanner");
+            banner.innerHTML = "The URL is in the wrong format.";
+            banner.style.display = "block";
         }
     }
-};
\ No newline at end of file
+};
+main.init();
\ No newline at end of file