alert component

2 files changed, 36 insertions, 26 deletions

diff --git a/index.html b/index.html
index 2f6c920..0f229ff 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,8 @@
       <input type="text" id="ssid" class="input" placeholder="SSID" />
       <input type="password" id="password" class="input" placeholder="Password" />
 
+      <p data-alert></p>
+
       <footer class="form__footer">
         <button type="submit" class="button">
           NEXT
@@ -125,6 +127,7 @@
         If you lose it, don't worry. You can reset and re-pair your device on this page at any time.
       </p>
       <div class="input-group" data-key></div>
+      <p data-alert></p>
     </form>
 
     <form id="form-result-failure" class="form">
diff --git a/main.mjs b/main.mjs
index 5900c6d..9db72ba 100644
--- a/main.mjs
+++ b/main.mjs
@@ -492,10 +492,12 @@ class WelcomeForm extends ProgressibleForm {
 }
 
 class WifiCredentialsForm extends ProgressibleForm {
+  #alert
   #submitCallback = null
 
   constructor(id) {
     super(id)
+    this.#alert = new Alert(this.form.querySelector('[data-alert]'))
     this.form.addEventListener('submit', this.handleSubmit.bind(this))
   }
 
@@ -509,7 +511,7 @@ class WifiCredentialsForm extends ProgressibleForm {
       }
       this.transitToNextForm()
     } catch (error) {
-      this.alert(error.message)
+      this.#alert.show(error.message)
     }
   }
 
@@ -533,16 +535,6 @@ class WifiCredentialsForm extends ProgressibleForm {
     return [ssid, password]
   }
 
-  alert(message) {
-    this.form.querySelector('.help-text')?.remove()
-
-    const element = document.createElement('div')
-    element.classList.add('help-text', 'help-text--danger')
-    element.textContent = message
-
-    this.form.querySelector('.form__footer').before(element)
-  }
-
   onSubmit(callback) {
     this.#submitCallback = callback
     return this
@@ -792,6 +784,8 @@ class SuccessForm extends Form {
   /** @type {HTMLElement} */
   #button
 
+  #alert
+
   /** @type {string|null} */
   #deviceId = null
 
@@ -804,6 +798,7 @@ class SuccessForm extends Form {
     if (this.#inputGroup === null) {
       throw new Error('Could not find the input group for device key.')
     }
+    this.#alert = new Alert(this.form.querySelector('[data-alert]'))
     this.#renderInput()
   }
 
@@ -873,25 +868,12 @@ class SuccessForm extends Form {
 
     try {
       await navigator.clipboard.writeText(this.#input.value)
-      this.#alert('Copied to the clipboard.')
+      this.#alert.show('Copied to the clipboard.')
     } catch {
-      this.#alert('Unable to copy to the clipboard because of permission issues.')
+      this.#alert.show('Unable to copy to the clipboard because of permission issues.')
     }
   }
 
-  /**
-   * @param {string} message
-   */
-  #alert(message) {
-    this.form.querySelector('.help-text')?.remove()
-
-    const element = document.createElement('div')
-    element.classList.add('help-text')
-    element.textContent = message
-
-    this.form.appendChild(element)
-  }
-
   #handleDeviceKeyRetrievalFailure() {
     this.#input.value = 'Could not retrieve the device key.'
   }
@@ -917,6 +899,31 @@ class FailureForm extends ProgressibleForm {
   }
 }
 
+class Alert {
+  /** @type {HTMLElement} */
+  #el
+
+  /**
+   * @param {HTMLElement|null} el - The HTML element to mount the alert component.
+   */
+  constructor(el) {
+    if (el === null) {
+      throw new Error('The HTML element to mount the alert component does not exist.')
+    }
+    this.#el = el
+  }
+
+  /**
+   * @param {string} message
+   */
+  show(message) {
+    if (! this.#el.classList.contains('help-text')) {
+      this.#el.classList.add('help-text')
+    }
+    this.#el.textContent = message
+  }
+}
+
 class Progress {
   #el
   #steps