Fix: manage complex state

options/options.js

@@ -81,64 +81,73 @@ document.onclick = e => {
   const disconnectButton = document.querySelector('.sync-options .disconnect');
   const syncButton = document.querySelector('.sync-options .sync-now');
 
+  let state;
+  let syncing = false;
+
   // init button state
   prefs.initializing
     .then(() => {
       const name = prefs.get('sync.enabled');
       cloud.value = name;
-      if (name === 'none') {
+      state = name === 'none' ? 'disconnected' : 'connected';
-        connectButton.disabled = false;
+      updateButtons();
-        disconnectButton.disabled = true;
-        syncButton.disabled = true;
-        cloud.disabled = false;
-      } else {
-        connectButton.disabled = true;
-        disconnectButton.disabled = false;
-        syncButton.disabled = false;
-        cloud.disabled = true;
-      }
     });
 
   function validClick(e) {
     return e.button === 0 && !e.ctrl && !e.alt && !e.shift;
   }
 
+  cloud.addEventListener('change', updateButtons);
+
+  function updateButtons() {
+    cloud.disabled = state !== 'disconnected';
+    connectButton.disabled = state !== 'disconnected' || cloud.value === 'none';
+    disconnectButton.disabled = state !== 'connected';
+    syncButton.disabled = state !== 'connected' || syncing;
+  }
+
   connectButton.addEventListener('click', e => {
     if (validClick(e)) {
       if (cloud.value === 'none') {
         return;
       }
-      connectButton.disabled = true;
+      state = 'connecting';
-      cloud.disabled = true;
+      syncing = true;
+      updateButtons();
       prefs.set('sync.enabled', cloud.value)
         .then(() => API.syncStart())
         .catch(console.error)
         .then(() => {
-          disconnectButton.disabled = false;
+          state = 'connected';
+          syncing = false;
+          updateButtons();
         });
     }
   });
 
   disconnectButton.addEventListener('click', e => {
     if (validClick(e)) {
-      disconnectButton.disabled = true;
+      state = 'disconnecting';
-      cloud.disabled = false;
+      updateButtons();
       prefs.set('sync.enabled', 'none')
         .then(() => API.syncStop())
         .catch(console.error)
         .then(() => {
-          connectButton.disabled = false;
+          state = 'disconnected';
+          updateButtons();
         });
     }
   });
 
   syncButton.addEventListener('click', e => {
     if (validClick(e)) {
-      syncButton.disabled = true;
+      syncing = true;
+      updateButtons();
       API.syncNow()
         .catch(console.error)
         .then(() => {
-          syncButton.disabled = false;
+          syncing = false;
+          updateButtons();
         });
     }
   });