From 9071bc23db70a02deaf8375d45401224b6d1765b Mon Sep 17 00:00:00 2001
From: httpjamesm <github@httpjames.space>
Date: Tue, 27 Dec 2022 23:42:54 -0500
Subject: [PATCH] feat: error handling for homepage

---
 main.go             |  8 ++++++--
 public/home.css     | 13 +++++++++++++
 templates/home.html | 12 +++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/main.go b/main.go
index 4618495..dc0d8b6 100644
--- a/main.go
+++ b/main.go
@@ -36,7 +36,9 @@ func main() {
 		body := urlConversionRequest{}
 
 		if err := c.ShouldBind(&body); err != nil {
-			c.JSON(400, gin.H{"success": false, "message": "Invalid request body"})
+			c.HTML(400, "home.html", gin.H{
+				"errorMessage": "Invalid request body",
+			})
 			return
 		}
 
@@ -44,7 +46,9 @@ func main() {
 
 		// validate URL
 		if !strings.HasPrefix(soLink, "https://stackoverflow.com/questions/") {
-			c.JSON(400, gin.H{"success": false, "message": "Invalid URL"})
+			c.HTML(400, "home.html", gin.H{
+				"errorMessage": "Invalid stack overflow URL",
+			})
 			return
 		}
 
diff --git a/public/home.css b/public/home.css
index 2071b96..092f107 100644
--- a/public/home.css
+++ b/public/home.css
@@ -66,6 +66,19 @@ body {
     background-color: #3b404b;
 }
 
+.error {
+    width: 100%;
+    padding: .5rem;
+    background-color: rgb(255, 129, 129);
+    color: black;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+}
+
+.error p {
+    margin: 0;
+}
+
 @media screen and (max-width: 800px) {
     body {
         padding: 1rem;
diff --git a/templates/home.html b/templates/home.html
index 1c31743..3d9bdd8 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -16,9 +16,19 @@
                 browsing habits and other browser fingerprint data to
                 StackOverflow.
             </p>
+            {{ if .errorMessage }}
+                <div class="error">
+                    <p><b>Error</b>: {{ .errorMessage }}</p>
+                </div>
+            {{ end }}
             <form method="POST">
                 <div class="view-form">
-                    <input class="view-input" type="text" name="url" placeholder="https://stackoverflow.com/questions/123456/example-url" />
+                    <input
+                        class="view-input"
+                        type="text"
+                        name="url"
+                        placeholder="https://stackoverflow.com/questions/123456/example-url"
+                    />
                     <button class="view-button" type="submit">View</button>
                 </div>
             </form>