Renter settings

htdocs/css/general.css

@@ -7,7 +7,7 @@
     --app-header-font-size: 25px;
     --default-animation-time: .5s;
     --default-font-color: #c2c2c2;
-    --default-header-color: #a5b3c0;
+    --default-header-color: #abbacd;
     --default-amount-color: #a5b3c0;
     --default-padding: 0 0 8px 0;
 }
@@ -35,10 +35,11 @@ div {
 }
 
 div.footer {
-    margin: 0 auto;
-    position: absolute;
-    bottom: 10px;
-    width: 98%;
+    padding-left: 10px;
+    padding-top: 5px;
+    padding-right: 0;
+    padding-bottom: 0;
+    margin: 0;
 }
 
 .padded {
@@ -78,7 +79,7 @@ h3 {
 p {
     padding: var(--default-padding);
     font-size: var(--h2-font-size);
-    color: var(--default-header-color);
+    color: var(--default-font-color);
     margin: 0;
 }
 

htdocs/index.html

@@ -113,7 +113,7 @@
             <td style="text-align: left;white-space: nowrap;"><b>Height:</b></td>
             <td style="white-space: nowrap;" id="ID_BlockHeight">...</td>
             <td style="text-align: right; vertical-align: bottom;width: 100%;">
-              <button style="width: 110px;" id="ID_OKButton">OK</button>
+              <button type="button" style="width: 110px;" id="ID_ExitButton">Exit</button>
             </td>
           </tr>
         </table>
@@ -154,5 +154,23 @@
         <p>Waiting to establish connection to Sia...</p>
       </div>
     </div>
+    <div class="hidden-element" id="renter_settings_window">
+      <div class="box" id="renter_settings">
+        <h1>Buy storage on the Sia Decentralized Network</h1>
+        <p>You need to allocate funds to upload and download on Sia. Your allowance remains locked for 3 months. Unspent funds are then refunded*. You can increase your allowance at any time.</p>
+        <p>Your storage allowance automatically refills every 6 weeks. Your computer must be online with your wallet unlocked to complete the refill. If Sia fails to refill the allowance by the end of the lock-in period, your data may be lost.</p>
+        <p class="footnote">*contract fees are non-refundable. They will be subtracted from the allowance that you set.</p>
+        <h2>Set Allocated Funds</h2>
+        <input type="number" id="ID_RenterSetFunds"><br><br>
+        <h2>Set Number of Hosts</h2>
+        <input type="number" id="ID_RenterSetHosts"><br><br>
+        <h2>Set Contract Duration</h2>
+        <input type="number" id="ID_RenterSetDuration"><br><br>
+        <h2>Set Renew Window</h2>
+        <input type="number" id="ID_RenterSetRenewWindow"><br><br>
+        <button id="ID_RenterSettingsOK" type="button">Save</button>
+        <button id="ID_RenterSettingsCancel" type="button">Cancel</button>
+      </div>
+    </div>
   </body>
 </html>

htdocs/js/index.js

@@ -85,7 +85,8 @@
         if (document.getElementById('ID_MountButton').innerText !== 'Unmount') {
           setSelect('ID_MountDrives', drives);
         }
-      }
+      },
+      notifyDriveUnmounted: _notifyDriveUnmounted
     };
   })();
 
@@ -158,6 +159,8 @@
     };
   })();
 
+  let _mountHandler;
+
   function setMainWindow(name) {
     console.log('Setting main window: ' + name);
     const elem = document.getElementById(name);
@@ -181,13 +184,29 @@
     }
   }
 
+  function _notifyDriveUnmounted() {
+    const mountButton = document.getElementById('ID_MountButton');
+    const mountSelect = document.getElementById('ID_MountDrives');
+    if (mountButton.innerText === 'Unmount') {
+      mountButton.innerText = "Mount";
+      mountButton.onclick = _mountHandler;
+      mountButton.disabled = false;
+      mountSelect.disabled = false;
+    }
+  }
+
   function beginMainApplication() {
     AppActions.startApp();
     setMainWindow('app_window');
+    const renterEditLink = document.getElementById('ID_Renter_Edit');
+    renterEditLink.onclick = ()=> {
+      renterEditLink.onclick = null;
+      handleRenterEditSettings();
+    };
     const mountButton = document.getElementById('ID_MountButton');
     const mountSelect = document.getElementById('ID_MountDrives');
 
-    const mountHandler = ()=> {
+    _mountHandler = ()=> {
       mountButton.onclick = null;
       mountButton.disabled = true;
       mountSelect.disabled = true;
@@ -198,23 +217,31 @@
           } else {
             displayErrorPopup('Mount Failed', reason);
           }
-          mountButton.onclick = mountHandler;
+          mountButton.onclick = _mountHandler;
           mountButton.disabled = false;
         });
       } else {
         AppActions.unmountDrive((success, reason) => {
           if (success) {
-            mountButton.innerText = "Mount";
-            mountSelect.disabled = false;
+            _notifyDriveUnmounted()
           } else {
             displayErrorPopup('Unmount Failed', reason);
+            mountButton.onclick = _mountHandler;
+            mountButton.disabled = false;
           }
-          mountButton.onclick = mountHandler;
-          mountButton.disabled = false;
         });
       }
     };
-    mountButton.onclick = mountHandler;
+    mountButton.onclick = _mountHandler;
+  }
+
+  function handleRenterEditSettings() {
+    setMainWindow('renter_settings_window');
+    const cancelButton = document.getElementById('ID_RenterSettingsCancel');
+    cancelButton.onclick = ()=> {
+      cancelButton.onclick = null;
+      beginMainApplication();
+    }
   }
 
   function handleUnlockWallet() {
@@ -225,7 +252,6 @@
       unlockButton.onclick = null;
       const password = document.getElementById('ID_WalletUnlockPwd');
       if (AppActions.unlockWallet(password.value, (success, reason) => {
-          password.value = '';
           if (success) {
             beginMainApplication();
           } else {
@@ -234,7 +260,10 @@
             });
           }
         })) {
+        password.value = '';
         setMainWindow('unlocking_window');
+      } else {
+        password.value = '';
       }
     };
   }