Merge pull request #85 from remotestorage/feature/26-connect_button

Disable connect button when connecting

src/assets/styles.css

@@ -235,6 +235,10 @@ polygon.rs-logo-shape,
 .rs-sign-in-form input[type=submit]:active {
   background-color: #3fb34f;
 }
+.rs-sign-in-form input[type=submit]:disabled,
+.rs-sign-in-form input[type=submit]:disabled:hover {
+  background-color: #aaa;
+}
 
 .rs-sign-in-error.rs-hidden,
 .rs-box-error.rs-hidden {

src/assets/widget.html

@@ -473,9 +473,9 @@ <h1 class="rs-big-headline">Connect your storage</h1>
     <div class="rs-content">
       <form name="rs-sign-in-form" class="rs-sign-in-form">
         <h1 class="rs-big-headline">Connect your storage</h1>
-        <input type="text" name='rs-user-address' placeholder="[email protected]" autocapitalize="off">
+        <input type="text" name="rs-user-address" placeholder="[email protected]" autocapitalize="off">
         <div class="rs-sign-in-error rs-hidden"></div>
-        <input type="submit" value="Connect">
+        <input type="submit" class="rs-connect" value="Connect">
         <a href="https://remotestorage.io/get/" class="rs-help" target="_blank">Need help?</a>
       </form>
     </div>

src/widget.js

@@ -197,6 +197,7 @@ Widget.prototype = {
     }
 
     this.rsSignInForm = document.querySelector('.rs-sign-in-form');
+    this.rsConnectButton = document.querySelector('.rs-connect');
 
     this.rsDisconnectButton = document.querySelector('.rs-disconnect');
     this.rsSyncButton = document.querySelector('.rs-sync');
@@ -256,6 +257,7 @@ Widget.prototype = {
     this.rsSignInForm.addEventListener('submit', (e) => {
       e.preventDefault();
       let userAddress = document.querySelector('input[name=rs-user-address]').value;
+      this.rsConnectButton.disabled = true;
       this.rs.connect(userAddress);
     });
   },
@@ -428,6 +430,7 @@ Widget.prototype = {
     msgContainer.innerHTML = error.message;
     msgContainer.classList.remove('rs-hidden');
     msgContainer.classList.add('rs-visible');
+    this.rsConnectButton.disabled = false;
   },
 
   handleSyncError (/* error */) {