Bookmark submission: Make bookmark submission form a reusable WebComponent.

Change-Id: I723d98208040db5b0d2d56d8c5e727c68399f843

1 files changed, 2 insertions, 36 deletions

diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
index 2c35249..566bfb2 100644
--- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html
+++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
@@ -13,47 +13,13 @@
 
 {! #if authenticated !}
   <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
-  <script type="module" src="/web_modules/elix/define/ProgressSpinner.js"></script>
-
+  <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js" defer></script>
   <script type="module" src="/bookmarks/bookmarkList.js" defer></script>
 
   <elix-expandable-section id="bookmark-submission-pane">
     <h2 slot="header" class="small-title"><button class="pure-button">Create New Bookmark</button></h2>
     <section id="bookmark-submission">
-      <form class="pure-form pure-form-aligned" method="post">
-        <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/>
-            <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/>
-          </div>
-
-          <div class="pure-control-group">
-            <label for="description-input">Description:</label>
-            <textarea name="description" id="description-input" placeholder="Description"></textarea>
-          </div>
-
-          <div class="pure-control-group">
-            <label for="visibility-input">Visibility:</label>
-            <select id="visibility-input" name="visibility" required>
-              <option value="public">Public</option>
-              <option value="semiprivate" selected>Semiprivate</option>
-              <option value="private">Private</option>
-            </select>
-          </div>
-
-          <div class="pure-controls">
-            <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
-          </div>
-        </fieldset>
-      </form>
+      <mlk-bookmark-submission-form id="bookmark-submission-form"></mlk-bookmark-submission-form>
     </section>
   </elix-expandable-section>
 {! /if !}