Userlists setting modal - Prevent multiple clicks on Save button

packages/ia-userlist-settings/demo/app-root.ts

@@ -97,17 +97,27 @@ export class AppRoot extends LitElement {
         .userList=${data}
         .baseAPIUrl=${'https://ia-petabox-webdev-6421-user-list-servive-phase-2.archive.org/services/users/me/lists'}
         @listModalClosed=${() => {
-          this.modalManager.closeModal();
+          this.closeModal();
         }}
         @listDetailsSaved=${(e: CustomEvent) => {
           console.log(e.detail);
-          this.modalManager.closeModal();
+          this.closeModal();
         }}
       ></iaux-userlist-settings>
     `;
     await this.modalManager.showModal({ config, customModalContent });
   }
 
+  private closeModal() {
+    this.modalManager?.showModal({
+      config: new ModalConfig(),
+      customModalContent: html``,
+    });
+    this.modalManager?.closeModal();
+    this.modalManager?.removeAttribute('class');
+    this.modalManager?.removeAttribute('id');
+  }
+
   static styles = css`
     :host {
       display: block;

packages/ia-userlist-settings/package.json

@@ -7,7 +7,7 @@
   },
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

packages/ia-userlist-settings/src/ia-user-list-settings.ts

@@ -2,12 +2,19 @@
 /* eslint-disable lit/no-value-attribute */
 
 import { html, css, LitElement, TemplateResult } from 'lit';
-import { property, customElement, query } from 'lit-element/decorators.js';
+
+import {
+  property,
+  customElement,
+  query,
+  state,
+} from 'lit-element/decorators.js';
 import { Result } from '@internetarchive/result-type';
 import IAButtonStyles from './style/ia-button';
 import { UserListsService } from './user-lists-service/user-lists-service';
 import { UserListsError } from './user-lists-service/user-lists-error';
 import { UserList, UserListOptions } from './user-lists-service/models';
+import log from './util/log';
 
 export interface UserListModel {
   id?: string;
@@ -38,10 +45,13 @@ export class IAUserListSettings extends LitElement {
 
   @query('#private') private listPrivate: HTMLInputElement;
 
+  @state() private disableSaveButton = false;
+
   private async saveListDetails(event: Event) {
     event.preventDefault();
 
     try {
+      this.disableSaveButton = true;
       const userListData: UserListOptions = {
         list_name: this.listName.value,
         description: this.listDescription.value,
@@ -58,22 +68,25 @@ export class IAUserListSettings extends LitElement {
         response = await this.userListsService?.createList(userListData);
       }
 
-      if (response.success) {
+      if (response?.success) {
         this.dispatchEvent(
           new CustomEvent<UserList>('userListSaved', {
             detail: response.success,
           })
         );
       } else {
+        this.disableSaveButton = false;
+        log('error', response.error);
         throw response.error;
       }
     } catch (error) {
+      this.disableSaveButton = false;
       this.dispatchEvent(
         new CustomEvent('userListError', {
           detail: { error },
         })
       );
-      console.log('error', error);
+      log('error', error);
     }
   }
 
@@ -119,7 +132,13 @@ export class IAUserListSettings extends LitElement {
             >
               Cancel
             </button>
-            <button type="submit" class="ia-button primary">Save</button>
+            <button
+              type="submit"
+              class="ia-button primary"
+              ?disabled=${this.disableSaveButton}
+            >
+              Save
+            </button>
           </div>
         </form>
       </section>

packages/ia-userlist-settings/src/style/ia-button.ts

@@ -54,6 +54,7 @@ export default css`
     cursor: not-allowed;
     background-color: ${disabledButtonFillColor};
     border: 1px solid ${disabledButtonBorderColor};
+    pointer-events: none;
   }
   .ia-button.transparent {
     background-color: transparent;

packages/ia-userlist-settings/src/util/log.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/**
+ * console.log() utility -- production ignores 'log()' JS calls; dev invokes 'console.log()'
+ */
+const log =
+  location.hostname === 'localhost' ||
+  location.host.match(/^(www|cat)-[a-z0-9]+\.archive\.org$/) ||
+  location.host.match(/\.code\.archive\.org$/) ||
+  location.host.match(/\.dev\.archive\.org$/) ||
+  location.host.match(/^ia-petabox-/) ||
+  location.host.match(/^local.archive.org/)
+    ? // eslint-disable-next-line no-console
+      console.log.bind(console) // convenient, no?  Stateless function
+    : () => {};
+
+export { log as default };