Add url to server ui

README.md

@@ -101,18 +101,19 @@ Usage:
   xdev [command]
 
 Available Commands:
-  base64decoder Decode base64 string. Alias: b64d
+base64decoder Decode base64 string. Alias: b64d
   base64encoder Encode string to base64. Alias: b64e
   completion    Generate the autocompletion script for the specified shell
   help          Help about any command
   json          JSON indentation and minification
   json2yaml     Convert JSON to YAML. Alias: j2y
   jwt           Decode or encode a JWT string.
   password      Password generator. Alias: pwd
-  uuid          Generate a uuid string
+  server        Start a web server, Alias: s
   ulid          Generate a ulid string
+  url           URL encode/decode.
+  uuid          Generate a uuid string
   yaml2json     Convert YAML to JSON. Alias: y2j
-  server        Start webserver default port 8000. Alias: s
 
 Flags:
   -h, --help   help for xdev

server/server.go

@@ -25,6 +25,7 @@ const (
 	ULIDPath     = "/ulid"
 	PasswordPath = "/password"
 	Base64Path   = "/base64"
+	URLPath      = "/url"
 )
 
 //go:embed ui/*
@@ -62,6 +63,7 @@ func StartServer(port int32, isVerbose bool) {
 	yamlPage(app)
 	jwtPage(app)
 	base64Page(app)
+	urlPage(app)
 
 	log.Fatal(app.Listen(":"+strconv.FormatInt(int64(port), 10), fiber.ListenConfig{EnablePrefork: true}))
 }
@@ -246,6 +248,37 @@ func base64Page(app *fiber.App) {
 	})
 }
 
+func urlPage(app *fiber.App) {
+	app.Get(URLPath, func(c fiber.Ctx) error {
+		action := c.FormValue("action")
+
+		decoded := ""
+		encoded := ""
+		errorStr := ""
+
+		if action == "encode" {
+			encoded = internal.EncodeURL(c.FormValue("decoded"))
+			decoded = c.FormValue("decoded")
+		} else if action == "decode" {
+			_decoded, err := internal.DecodeURL(c.FormValue("encoded"))
+			if err != nil {
+				errorStr = err.Error()
+			} else {
+				decoded = _decoded
+			}
+			encoded = c.FormValue("encoded")
+		}
+
+		// Render index within layouts/main
+		return c.Render(Prefix+"url", fiber.Map{
+			"Title":   "URL encode/decode",
+			"Decoded": decoded,
+			"Encoded": encoded,
+			"Error":   errorStr,
+		}, MainLayout)
+	})
+}
+
 func defineResources(app *fiber.App) {
 	app.Use("/css", filesystem.New(filesystem.Config{
 		Root:       fs.FS(cssFS),

server/server_test.go

@@ -290,3 +290,40 @@ func TestDefineResources(t *testing.T) {
 		// TODO: Add assertions for the response body or other expectations
 	})
 }
+
+func TestURLPage(t *testing.T) {
+	app := newApp()
+	urlPage(app)
+
+	t.Run("Test URL Page - Encode", func(t *testing.T) {
+		// Create a test request to the "/url" route with action=encode and decoded=...
+		req := httptest.NewRequest(http.MethodGet, "/url?action=encode&decoded=...", nil)
+		resp, err := app.Test(req)
+		if err != nil {
+			t.Fatalf("Failed to send test request: %v", err)
+		}
+
+		// Check the response status code
+		if resp.StatusCode != http.StatusOK {
+			t.Errorf("Expected status code %d, but got %d", http.StatusOK, resp.StatusCode)
+		}
+
+		// TODO: Add assertions for the response body or other expectations
+	})
+
+	t.Run("Test URL Page - Decode", func(t *testing.T) {
+		// Create a test request to the "/url" route with action=decode and encoded=...
+		req := httptest.NewRequest(http.MethodGet, "/url?action=decode&encoded=...", nil)
+		resp, err := app.Test(req)
+		if err != nil {
+			t.Fatalf("Failed to send test request: %v", err)
+		}
+
+		// Check the response status code
+		if resp.StatusCode != http.StatusOK {
+			t.Errorf("Expected status code %d, but got %d", http.StatusOK, resp.StatusCode)
+		}
+
+		// TODO: Add assertions for the response body or other expectations
+	})
+}

server/ui/index.html

@@ -62,6 +62,17 @@ <h5 class="card-title">Base64</h5>
                 </div>
             </a>
         </div>
+        <div class="col">
+            <a href="/url" class="card-link">
+                <div class="card min-h-200" style="width: 18rem;">
+                    <div class="card-body">
+                        <h5 class="card-title">URL</h5>
+                        <p class="card-text">
+                            Encode or decode a URL string.</p>
+                    </div>
+                </div>
+            </a>
+        </div>
         <div class="col">
             <a href="/json" class="card-link">
                 <div class="card min-h-200" style="width: 18rem;">

server/ui/partials/navbar.html

@@ -20,6 +20,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="/base64">Base64</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/url">URL</a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="/json">JSON</a>
                 </li>

server/ui/url.html

@@ -0,0 +1,84 @@
+{{template "ui/partials/navbar" .}}
+
+<div class="container mt-5">
+    <form id="form">
+        {{.Error}}
+        <div class="row">
+            <div class="col-11">
+                <div class="card" style="height: 100%;">
+                    <div class="card-header">
+                        Encoded URL
+                    </div>
+                    <div class="card-body">
+                        <textarea class="form-control  no-outline" id="encoded" name="encoded"
+                            rows="6">{{.Encoded}}</textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="col-1 align-self-center">
+                    <button type="button" class="btn btn-primary btn-block"
+                        onclick="submitForm('decode')">Decode</button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">&nbsp;</div>
+        </div>
+        <div class="row">
+            <div class="col-11">
+                <div class="card" style="height: 100%;">
+                    <div class="card-header">
+                        Decoded URL string
+                    </div>
+                    <div class="card-body">
+                        <textarea class="form-control  no-outline" id="decoded" name="decoded"
+                            rows="6">{{.Decoded}}</textarea>
+                    </div>
+                </div>
+            </div>
+            <div class="col-1 align-self-center">
+                <button type="button" class="btn btn-primary btn-block"
+                onclick="submitForm('encode')">Encode</button>
+            </div>
+        </div>
+        <input type="hidden" name="action" id="action" value="">
+    </form>
+</div>
+
+<!-- Your custom script for copying text and showing tooltip -->
+<script>
+    function submitForm(action) {
+        $("#action").val(action);
+        $("#form").submit();
+    }
+    $(document).ready(function () {
+
+        // Initialize tooltip
+        $('[data-toggle="tooltip"]').tooltip();
+
+        // Add click event to the Copy button
+        $("#copyButton").click(function () {
+            var input = $("#pwdField")[0];
+            input.focus();
+            input.select();
+
+            navigator.clipboard
+                .writeText(input.value)
+                .then(() => {
+                    // Show tooltip for a brief period
+                    $(this).text("Copied!");
+                    $(this).tooltip("show");
+
+                    // Hide tooltip after 1.5 seconds (adjust as needed)
+                    setTimeout(function () {
+                        $("#copyButton").tooltip("hide");
+                        $("#copyButton").text("Copy Password!");
+                    }, 1500);
+                })
+                .catch(() => {
+                    alert("something went wrong");
+                });
+
+
+        });
+    });
+</script>