Show release notes and confirm update before installation (#181)

src/global-styles/custom.scss

@@ -54,7 +54,7 @@ a {
     border: none !important;
     text-transform: uppercase;
     box-shadow: none !important;
-    &.btn-danger {
+    &.btn-danger,&.btn-warning {
         color: #fff;
     }
     &.btn-outline-danger:hover {

src/layouts/DashboardLayout.vue

@@ -68,6 +68,65 @@
       </b-col>
 
       <b-col col lg="9" xl="10">
+        <b-modal
+          id="confirm-update-modal"
+          size="lg"
+          centered
+          hide-footer
+          v-if="availableUpdate.version"
+          v-model="showUpdateConfirmationModal"
+        >
+          <template v-slot:modal-header>
+            <div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
+              <h3>Umbrel v{{ availableUpdate.version }}</h3>
+              <!-- Emulate built in modal header close button action -->
+              <a
+                href="#"
+                class="align-self-center"
+                v-on:click.stop.prevent="hideUpdateConfirmationModal"
+              >
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 18 18"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M13.6003 4.44197C13.3562 4.19789 12.9605 4.19789 12.7164 4.44197L9.02116 8.1372L5.32596 4.442C5.08188 4.19792 4.68615 4.19792 4.44207 4.442C4.198 4.68607 4.198 5.0818 4.44207 5.32588L8.13728 9.02109L4.44185 12.7165C4.19777 12.9606 4.19777 13.3563 4.44185 13.6004C4.68592 13.8445 5.08165 13.8445 5.32573 13.6004L9.02116 9.90497L12.7166 13.6004C12.9607 13.8445 13.3564 13.8445 13.6005 13.6004C13.8446 13.3563 13.8446 12.9606 13.6005 12.7165L9.90505 9.02109L13.6003 5.32585C13.8444 5.08178 13.8444 4.68605 13.6003 4.44197Z"
+                    fill="#6c757d"
+                  />
+                </svg>
+              </a>
+            </div>
+          </template>
+          <div class="px-2 px-sm-3 pb-2 pb-sm-3">
+            <div class>
+              <p v-if="availableUpdate.notes">{{ availableUpdate.notes }}</p>
+              <b-alert variant="warning" show>
+                <small>Please download the latest backup of your payment channels before updating and make sure to note down your 24 secret words (if you haven't already). You'll need these to recover your funds in case something goes wrong.</small>
+                <b-button
+                  class="mt-2 mb-1 d-block"
+                  variant="warning"
+                  size="sm"
+                  @click="downloadChannelBackup"
+                >
+                  <small>
+                    <b-icon icon="download" class="mr-1"></b-icon>
+                  </small>Download channel backup
+                </b-button>
+              </b-alert>
+              <b-button
+                block
+                variant="success"
+                :disabled="isUpdating"
+                @click="startUpdate"
+              >{{isUpdating ? 'Starting update...' : 'Install now'}}</b-button>
+            </div>
+          </div>
+        </b-modal>
         <div class="pr-xl-2">
           <b-alert
             class="mt-4 mb-0"
@@ -85,7 +144,7 @@
             <a
               href="#"
               class="alert-link float-right"
-              @click.prevent="startUpdate"
+              @click.prevent="confirmUpdate"
               v-show="!isUpdating"
             >Install now</a>
             <b-spinner v-show="isUpdating" variant="success" small class="float-right mt-1"></b-spinner>
@@ -125,7 +184,9 @@ export default {
       name: state => state.user.name,
       chain: state => state.bitcoin.chain,
       availableUpdate: state => state.system.availableUpdate,
-      updateStatus: state => state.system.updateStatus
+      updateStatus: state => state.system.updateStatus,
+      showUpdateConfirmationModal: state =>
+        state.system.showUpdateConfirmationModal
     }),
     isMobileMenuOpen() {
       return this.$store.getters.isMobileMenuOpen;
@@ -153,6 +214,20 @@ export default {
     toggleMobileMenu() {
       this.$store.commit("toggleMobileMenu");
     },
+    async downloadChannelBackup() {
+      await API.download(
+        `${process.env.VUE_APP_MIDDLEWARE_API_URL}/v1/lnd/util/download-channel-backup`,
+        {},
+        true,
+        "my-umbrel-channels.backup"
+      );
+    },
+    hideUpdateConfirmationModal() {
+      this.$store.dispatch("system/hideUpdateConfirmationModal");
+    },
+    confirmUpdate() {
+      this.$store.dispatch("system/confirmUpdate");
+    },
     async startUpdate() {
       try {
         await API.post(

src/store/modules/system.js

@@ -13,6 +13,7 @@ const state = () => ({
     progress: 0, //progress of update installation
     description: ""
   },
+  showUpdateConfirmationModal: false,
   loading: true,
   rebooting: false,
   hasRebooted: false,
@@ -67,6 +68,9 @@ const mutations = {
   },
   setUpdateStatus(state, status) {
     state.updateStatus = status
+  },
+  setShowUpdateConfirmationModal(state, show) {
+    state.showUpdateConfirmationModal = show;
   }
 };
 
@@ -119,6 +123,12 @@ const actions = {
       });
     }
   },
+  hideUpdateConfirmationModal({ commit }) {
+    commit("setShowUpdateConfirmationModal", false);
+  },
+  confirmUpdate({ commit }) {
+    commit("setShowUpdateConfirmationModal", true);
+  },
   async getUpdateStatus({ commit }) {
     const status = await API.get(`${process.env.VUE_APP_MANAGER_API_URL}/v1/system/update-status`);
     if (status && status.progress) {

src/views/Settings.vue

@@ -227,7 +227,7 @@
                   class="mt-2"
                   variant="primary"
                   size="sm"
-                  @click="startUpdate"
+                  @click.prevent="confirmUpdate"
                   :disabled="isUpdating"
                 >Install now</b-button>
               </div>
@@ -359,36 +359,14 @@ export default {
       this.newPassword = "";
       this.confirmNewPassword = "";
     },
+    confirmUpdate() {
+      this.$store.dispatch("system/confirmUpdate");
+    },
     async checkForUpdate() {
       this.isCheckingForUpdate = true;
       await this.$store.dispatch("system/getAvailableUpdate");
       this.isCheckingForUpdate = false;
     },
-    async startUpdate() {
-      try {
-        await API.post(
-          `${process.env.VUE_APP_MANAGER_API_URL}/v1/system/update`,
-          {}
-        );
-        this.isUpdating = true;
-        // poll update status every 2s until the update process begins
-        // because after it's updated, the loading view will take over
-        this.pollUpdateStatus = window.setInterval(async () => {
-          await this.$store.dispatch("system/getUpdateStatus");
-          if (this.updateStatus.state === "installing") {
-            window.clearInterval(this.pollUpdateStatus);
-          }
-        }, 2 * 1000);
-      } catch (error) {
-        this.$bvToast.toast(`Unable to start the update process`, {
-          title: "Error",
-          autoHideDelay: 3000,
-          variant: "danger",
-          solid: true,
-          toaster: "b-toaster-bottom-right"
-        });
-      }
-    },
     async shutdownPrompt() {
       // disable on testnet
       if (window.location.hostname === "testnet.getumbrel.com") {