Bugfix: improvements based on developer testing feedback (#2283)

* backButton fix

* open docs link on about page in extra window

* add connecting indicator when clicking on "connect"

* stop camera when closing import wallet overlay

src/cryptoadvance/specter/templates/node/node_settings.jinja

@@ -116,7 +116,10 @@
 				{% if node_alias %}
 					<button type="submit" name="action" value="delete" class="button">{{ _("Delete") }}</button>
 				{% endif %}
-				<button type="submit" class="button bg-accent text-white" name="action" value="connect" data-cy="connect-btn">{{ _("Connect") }}</button>
+				<button id="connect-btn" type="submit" class="button bg-accent text-white" name="action" value="connect" data-cy="connect-btn">
+					<span id="connect-text">{{ _("Connect") }}</span>
+                	<img class="hidden rounded-full w-4 h-4 animate-spin" id="connecting-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}"/>
+				</button>
 			</div>
 
 			{% if failed_test %}
@@ -234,5 +237,13 @@
 		}
     }
 
+	const connectBtn = document.getElementById('connect-btn')
+    const connectText = document.getElementById('connect-text');
+    const connectingIndicator = document.getElementById('connecting-indicator')
+    connectBtn.addEventListener('click', () => {
+        connectText.classList.add('hidden')
+        connectingIndicator.classList.remove('hidden')
+    })
+
 </script>
 {% endblock %}

src/cryptoadvance/specter/templates/wallet/new_wallet/components/import_wallet_account_map.jinja

@@ -47,6 +47,9 @@
             document.getElementById("txt").value = result;
         });
 
+        // This is needed to access the scanner object from outside of the module
+        window.scanner = scanner
+
         document.getElementById("scanme").addEventListener("click", function(){
             try{
                 scanner.start();
@@ -83,4 +86,18 @@
 			});
 		}
 	});
+
+	function onCancelOverlay() {
+        if (window.scanner) {
+            document.getElementById("popup").style.display = 'none';
+            window.scanner.stop();
+        }
+	}
+
+    // Deletes the global scanner property again if there is a reload
+    window.addEventListener('unload', () => {
+        if (window.scanner) {
+            delete window.scanner
+        }
+    })
 </script>

src/cryptoadvance/specter/templates/welcome/components/remaining_remarks.jinja

@@ -1,5 +1,5 @@
 <p>{{ _("For more information, take a look at our ") }} 
-    <a href="https://specter-desktop-docs.netlify.app/" title="Documentation" alt="Documentation link">documentation</a>
+    <a href="https://specter-desktop-docs.netlify.app/" target="_blank" title="Documentation" alt="Documentation link">documentation</a>
     {{ _(" and ") }}
     <a href="https://specter-desktop-docs.netlify.app/faq/" target="_blank" title="FAQs" alt="FAQs link">FAQs</a>
     {{ _(". You can file") }}

src/cryptoadvance/specterext/spectrum/templates/spectrum/index.jinja

@@ -58,7 +58,10 @@
             {% if node_is_available %}
                 <button type="submit" class="button" name="action" value="delete">{{ _("Delete") }}</button>
             {% endif %}
-            <button type="submit" class="button bg-accent text-white" name="action" value="connect">{{ _("Connect") }}</button>
+            <button id="connect-btn" type="submit" class="button bg-accent text-white" name="action" value="connect">
+                <span id="connect-text">{{ _("Connect") }}</span>
+                <img class="hidden rounded-full w-4 h-4 animate-spin" id="connecting-indicator" src="{{ url_for('static', filename='img/refresh.svg') }}"/>
+            </button>
         </div>
     </form>
 {% endblock %}
@@ -107,5 +110,14 @@
     this.elec_option_list.addEventListener('click', (event) => {
         this.showElecOption("list")
     });
+
+    const connectBtn = document.getElementById('connect-btn')
+    const connectText = document.getElementById('connect-text');
+    const connectingIndicator = document.getElementById('connecting-indicator')
+    connectBtn.addEventListener('click', () => {
+        connectText.classList.add('hidden')
+        connectingIndicator.classList.remove('hidden')
+    })
+
   </script>
 {% endblock %}

src/cryptoadvance/specterext/spectrum/templates/spectrum/spectrum_setup.jinja

@@ -50,10 +50,12 @@
 
 <script>
     let backButton = document.getElementById('back-button');
-    backButton.setAttribute('href', document.referrer); // Just to have the link preview and open in a new tab functionality, probably not needed here
-    backButton.addEventListener('click', () => {
-        history.back();
-        return false;
-    })
+    if (backButton) {
+        backButton.setAttribute('href', document.referrer); // Just to have the link preview and open in a new tab functionality, probably not needed here
+        backButton.addEventListener('click', () => {
+            history.back();
+            return false;
+        })
+    }
 </script>
 {% endblock %}