retry option

3 files changed, 59 insertions, 2 deletions

diff --git a/app.css b/app.css
index 905eedf..d55b049 100644
--- a/app.css
+++ b/app.css
@@ -168,6 +168,12 @@ body {
   margin-block-start: 1.5rem;
 }
 
+.form__link {
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--color-zinc-50);
+}
+
 .form__footer {
   margin-block-start: 4rem;
 }
@@ -317,3 +323,11 @@ body {
   background-repeat: no-repeat;
   background-position: center;
 }
+
+.retry-message {
+  display: none;
+}
+
+.retry-message--shown {
+  display: block;
+}
diff --git a/index.html b/index.html
index 46b069a..86e3b8b 100644
--- a/index.html
+++ b/index.html
@@ -104,6 +104,10 @@
       <p class="form__text">
         One more thing, let's choose the AIRMX Pro device from the Bluetooth scanning list.
       </p>
+      <p class="form__text retry-message">
+        👀 The list has been dismissed.
+        <a href="javascript:void(0)" class="form__link retry-link">Try again?</a>
+      </p>
     </form>
 
     <form id="form-result-success" class="form">
diff --git a/main.mjs b/main.mjs
index d02dba3..f1fb638 100644
--- a/main.mjs
+++ b/main.mjs
@@ -306,12 +306,31 @@ class CommunicationForm extends Form {
   #failureForm = null
   #wifiCredentials = null
 
+  #retryMessage = null
+  #retryMessageClassName = 'retry-message'
+  #retryMessageShownClassName = 'retry-message--shown'
+
+  #retryLink = null
+  #retryLinkClassName = `retry-link`
+
   constructor(id, device) {
     super(id)
     this.#device = device
+    this.#retryMessage = this.form.querySelector(`.${this.#retryMessageClassName}`)
+    if (this.#retryMessage) {
+      this.#retryLink = this.form.querySelector(`.${this.#retryLinkClassName}`)
+      this.#retryLink.addEventListener('click', () => {
+        this.hideRetryOption()
+        this.startPairing()
+      })
+    }
   }
 
-  async onDisplay() {
+  onDisplay() {
+    this.startPairing()
+  }
+
+  async startPairing() {
     if (this.#device === null) {
       return
     }
@@ -320,7 +339,11 @@ class CommunicationForm extends Form {
       return
     }
 
-    await this.connect(this.#device, this.wifiCredentials)
+    try {
+      await this.connect(this.#device, this.wifiCredentials)
+    } catch {
+      this.showRetryOption()
+    }
   }
 
   async connect() {
@@ -353,6 +376,22 @@ class CommunicationForm extends Form {
     console.log(`Received data from device: ${receivedBytes.join(' ')}`)
   }
 
+  showRetryOption() {
+    if (this.#retryMessage === null) {
+      return
+    }
+
+    this.#retryMessage.classList.add(this.#retryMessageShownClassName)
+  }
+
+  hideRetryOption() {
+    if (this.#retryMessage === null) {
+      return
+    }
+
+    this.#retryMessage.classList.remove(this.#retryMessageShownClassName)
+  }
+
   succeedTo(form) {
     this.#successForm = form
     return this