Merge branch '15-make-content-adding-page-functional-js' into 22-integrate-api-and-frontend

src/main/resources/templates/add.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash – Add dataset/API</title>
     <link rel="stylesheet" href="add.css">
+    <script type="module" src="add.js"></script>
 </head>
 <body>
     <main>
@@ -19,15 +20,15 @@
                 how to use it.
             </p>
 
-            <form action="/api/add" method="post">
+            <form>
                 <span>
-                    <label for="text">Title</label>
-                    <input type="text" name="title" id="title">
+                    <label for="title">Title</label>
+                    <input type="text" name="title" id="title" minlength="1" maxlength="50" required>
                 </span>
 
                 <span id="author-box">
                     <label for="author">Author</label>
-                    <input type="text" name="author" id="author">
+                    <input type="text" name="author" id="author" required>
                 </span>
 
                 <label>
@@ -39,16 +40,21 @@
 
                 <span>
                     <label for="short-description">Short description</label>
-                    <input type="text" name="short-description" id="short-description">
+                    <input type="text" name="short-description" id="short-description" maxlength="100" required spellcheck="true">
+                </span>
+
+                <span>
+                    <label for="url">URL</label>
+                    <input type="url" name="url" id="url" required>
                 </span>
 
                 <span id="full-description-box">
                     <label for="full-description">Full description</label>
-                    <textarea name="full-description" id="full-description"></textarea>
+                    <textarea name="full-description" id="full-description" spellcheck="true"></textarea>
                 </span>
 
                 <span id="btn-bar">
-                    <input type="submit" value="Add" id="btn-add" class="btn suggested">
+                    <input type="submit" value="Add" id="btn-add" class="btn suggested" disabled>
                     <input type="reset" value="Cancel" id="btn-cancel" class="btn">
                 </span>
             </form>