Include a count as to how large the result URL will be

src/db.py

@@ -7,7 +7,9 @@ from tortoise.contrib.pydantic import pydantic_model_creator
 
 class Redirect(Model):
     uuid = fields.UUIDField(primary_key=True, default=uuid.uuid4)
-    slug = fields.CharField(max_length=32779, index=False,  default=lambda: secrets.token_urlsafe(1024))
+    slug = fields.CharField(
+        max_length=32779, index=False, default=lambda: secrets.token_urlsafe(1024)
+    )
     destination = fields.CharField(max_length=8192)
     created_at = fields.DatetimeField(auto_now_add=True)
     expires = fields.DatetimeField(null=True)

src/main.py

@@ -136,7 +136,9 @@ async def create_redirect(
 
     while await db.Redirect.get_or_none(slug=slug) is not None:
         slug = secrets.token_urlsafe(slug_length // 2)
-    redirect = await db.Redirect.create(destination=destination, expires=expires, max_visits=max_visits, slug=slug)
+    redirect = await db.Redirect.create(
+        destination=destination, expires=expires, max_visits=max_visits, slug=slug
+    )
     response.status_code = 201
     return await db.RedirectPydantic.from_tortoise_orm(redirect)
 

src/static/index.html

@@ -5,6 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Link Elongater - Create Redirect</title>
     <script>
+        function onChange(e) {
+            let slugLength = parseInt(document.getElementById("slug_length").value);
+            let netloc = window.location.origin;
+            const totalLength = netloc.length + 3 + slugLength;
+            document.getElementById("urllen").textContent = totalLength;
+        }
         function onSubmit(e) {
             e.preventDefault();
             let formData = new FormData(e.target);
@@ -44,6 +50,7 @@
             "DOMContentLoaded",
             () => {
                 document.querySelector("form").addEventListener("submit", onSubmit);
+                document.getElementById("slug_length").addEventListener("input", onChange);
             }
         )
     </script>
@@ -84,7 +91,8 @@
         <label for="max_visits">Max visits (default: unlimited):</label>
         <input type="number" id="max_visits" name="max_visits"/><br/>
         <label for="slug_length">Slug length:</label>
-        <input type="number" id="slug_length" name="slug_length" value="2048" min="2" max="16389"/><br/>
+        <input type="number" id="slug_length" name="slug_length" value="2048" min="2" max="16389"/>
+        <p>URL length will total to <span id="urllen">a lot of</span> characters.</p><br/>
         <label for="slug_type">Slug type:</label>
         <select id="slug_type" name="slug_type" value="urlsafe">
             <option value="urlsafe">Base64 (urlsafe)</option>