Add /bookmarks/new endpoint.

Change-Id: I903dbf5f918e1478fff82e5ebf6f3e3e2766572d

3 files changed, 47 insertions, 5 deletions

diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index 25de54b..313268d 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -21,7 +21,16 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
 
   focus() {
     let uriInput = this.shadowRoot.getElementById('uri-input');
-    uriInput.focus();
+    let titleInput = this.shadowRoot.getElementById('title-input');
+    let descriptionInput = this.shadowRoot.getElementById('description-input');
+
+    if (!uriInput.value) {
+      uriInput.focus();
+    } else if (!titleInput.value) {
+      titleInput.focus();
+    } else {
+      descriptionInput.focus();
+    }
   }
 
   async onUriBlur() {
@@ -54,25 +63,28 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     const template = html`
       <link rel="stylesheet" type="text/css" href="/cms2/base.css" />
 
-      <form class="pure-form pure-form-aligned" method="post">
+      <form class="pure-form pure-form-aligned" method="post" action="/bookmarks">
         <fieldset>
           <legend>New Bookmark</legend>
 
           <div class="pure-control-group">
             <label for="uri-input">URI:</label>
             <input name="uri" id="uri-input" type="text" placeholder="URI" required
-                   @blur=${this.onUriBlur.bind(this)}/>
+                   value=${this.getAttribute("uri") || ""}
+                   @blur=${this.onUriBlur.bind(this)} />
             <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
           </div>
 
           <div class="pure-control-group">
             <label for="title-input">Title:</label>
-            <input name="title" id="title-input" type="text" placeholder="Title" required/>
+            <input name="title" id="title-input" type="text" placeholder="Title" required
+                   value="${this.getAttribute("title") || ""}" />
           </div>
 
           <div class="pure-control-group">
             <label for="description-input">Description:</label>
-            <textarea name="description" id="description-input" placeholder="Description"></textarea>
+            <textarea name="description" id="description-input" placeholder="Description"
+                >${this.getAttribute("description") || ""}</textarea>
           </div>
 
           <div class="pure-control-group">
diff --git a/src/main/resources/META-INF/resources/bookmarks/newBookmark.js b/src/main/resources/META-INF/resources/bookmarks/newBookmark.js
new file mode 100644
index 0000000..0594c67
--- /dev/null
+++ b/src/main/resources/META-INF/resources/bookmarks/newBookmark.js
@@ -0,0 +1,4 @@
+document.addEventListener('DOMContentLoaded', () => {
+  let bookmarkSubmissionForm = document.getElementById('bookmark-submission-form');
+  bookmarkSubmissionForm.focus();
+});
diff --git a/src/main/resources/templates/benki/bookmarks/newBookmark.html b/src/main/resources/templates/benki/bookmarks/newBookmark.html
new file mode 100644
index 0000000..cb3147d
--- /dev/null
+++ b/src/main/resources/templates/benki/bookmarks/newBookmark.html
@@ -0,0 +1,26 @@
+{@java.util.List<eu.mulk.mulkcms2.benki.bookmarks.Bookmark> bookmarks}
+{@java.lang.Boolean authenticated}
+
+{#include base.html}
+
+{#title}Benki Bookmarks{/title}
+{#siteSection}Bookmarks{/siteSection}
+{#bookmarksClass}this-page{/bookmarksClass}
+
+{#head}{/head}
+
+{#body}
+
+<script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js" defer></script>
+<script type="module" src="/bookmarks/newBookmark.js" defer></script>
+
+<mlk-bookmark-submission-form
+    id="bookmark-submission-form"
+    uri="{uri}"
+    title="{title}"
+    description="{description}">
+</mlk-bookmark-submission-form>
+
+{/body}
+
+{/include}