feat: post creation WIP

2026-08-19 11:43:22 +02:00 · 2024-05-16 19:30:33 +02:00
parent 29fce9a241
commit 24eefb743b
6 changed files with 182 additions and 11 deletions
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>GoCMS | Create post</title>
+    {{.Head}}
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <style>
+        form {
+            max-width: 24rem;
+        }
+    </style>
+</head>
+<body class="text-dark">
+{{.Navbar}}
+<div class="container mt-3 text-black-50">
+    <h1>Post - creation</h1>
+    <p>Create a new post</p>
+    <form action="create" method="post" class="d-flex align-items-center flex-column gap-3" id="createPostForm">
+        <div class="form-floating w-100">
+          <input type="text" class="form-control" id="name" name="name" placeholder="Chose the post name">
+          <label for="name">Name</label>
+        </div>
+        <button id="createPostButton" class="btn btn-primary w-100" disabled type="submit">
+						<span class="createPostFormButtonLoading visually-hidden spinner-border spinner-border-sm"
+                              role="status"></span>
+            <span class="createPostFormButtonDefault">Create</span>
+        </button>
+    </form>
+</div>
+
+<script>
+    const button = document.querySelector("#createPostButton")
+    const inputs = document.querySelectorAll('input')
+    const form = document.querySelector("#createPostForm")
+
+    function formFieldsEmpty() {
+        return Array.from(inputs).some((input) => input.value === "")
+    }
+
+    function setButtonDisabled() {
+        button.disabled = formFieldsEmpty() ? "disabled" : ""
+    }
+
+    function setButtonLoading() {
+        button.classList.add("disabled")
+        button.querySelector(".createPostFormButtonDefault").classList.add("visually-hidden")
+        button.querySelector(".createPostFormButtonLoading").classList.remove("visually-hidden")
+    }
+
+    function onCreatePostFormSubmit(event) {
+        setButtonLoading()
+        event.target.submit()
+    }
+
+    function onInput(event) {
+        if (event.target.tagName === "INPUT") setButtonDisabled()
+    }
+
+    form.addEventListener('submit', onCreatePostFormSubmit)
+    window.addEventListener('input', onInput)
+    setButtonDisabled()
+</script>
+
+</body>
+</html>