Ensure empty form data

src/digimarks/static/js/digimarks.js

@@ -16,7 +16,7 @@ document.addEventListener('alpine:init', () => {
         showBookmarksCards: Alpine.$persist(false).as('showBookmarksCards'),
         showTags: Alpine.$persist(false).as('showTags'),
         /* Bookmark that is being edited, used to fill the form, etc. */
-        bookmarkToEdit: Alpine.$persist(null).as('bookmarkToEdit'),
+        bookmarkToEdit: Alpine.$persist({}).as('bookmarkToEdit'),
         bookmarkToEditError: null,
 
         /* Loading indicator */
@@ -39,6 +39,9 @@ document.addEventListener('alpine:init', () => {
             /** Initialise the application after loading */
             document.documentElement.setAttribute('data-theme', this.theme);
             console.log('Set theme', this.theme);
+
+            /* Make sure the edit/add bookmark form has a fresh empty object */
+            this.resetEditBookmark();
             /* Bookmarks are refreshed through the getBookmarks() call in the HTML page */
             /* await this.getBookmarks(); */
             setInterval(() => {
@@ -204,15 +207,19 @@ document.addEventListener('alpine:init', () => {
             this.showBookmarksCards = !this.showBookmarksList;
         },
 
-        async startAddingBookmark() {
+        resetEditBookmark() {
-            /* Open 'add bookmark' page */
-            console.log('Start adding bookmark');
             this.bookmarkToEdit = {
                 'url': '',
                 'title': '',
                 'note': '',
                 'tags': ''
             }
+
+        },
+        async startAddingBookmark() {
+            /* Open 'add bookmark' page */
+            console.log('Start adding bookmark');
+            this.resetEditBookmark();
             // this.show_bookmark_details = true;
             const editFormDialog = document.getElementById("editFormDialog");
             editFormDialog.showModal();

src/digimarks/templates/user_index.html

@@ -170,7 +170,7 @@
             </span>
                 </div>
 #}
-                <form method="dialog" id="bookmarkEditForm">
+                <form method="dialog" id="bookmarkEditForm" x-if="$store.digimarks.bookmarkToEdit">
                     <fieldset class="form-group">
                         <label for="bookmark_url">URL</label>
                         <input id="bookmark_url" type="text" name="bookmark_url" placeholder="url"