From 1920db06e6b35b612df6e1fa2edbe1af3637f7f7 Mon Sep 17 00:00:00 2001
From: Nicolas Stalder <n@stalder.io>
Date: Thu, 25 Apr 2019 11:11:45 +0200
Subject: [PATCH] Warning not to tab out during update. Some layout fixes

---
 index.html | 61 ++++++++++++++++++++++++++++++++++--------------------
 js/main.js |  1 +
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 5ddfccb..711fdcc 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,32 @@
             <br>
             For this, unplug your key, and plug in while keeping pressed until the LED blinks.
           </p>
+
+          <template v-if="cannot_flash">
+            <article class="message is-danger">
+              <div class="message-header">
+                <p>DEVICE IS NOT IN BOOTLOADER MODE</p>
+              </div>
+              <div class="message-body">
+                <p>Please unplug your key, and plug in while keeping pressed until the LED blinks.</p>
+                <p>Then try to flash again</p>
+              </div>
+            </article>
+          </template>
+
+          <template>
+            <article class="message is-warning">
+              <div class="message-header">
+                <p>DO NOT TAB OUT</p>
+              </div>
+              <div class="message-body">
+                During the firmware update, you will see flashing popups - this is normal.
+                <br>
+                Do NOT TAB OUT during the update, or it will abort.
+              </div>
+            </article>
+          </template>
+
           <button onclick="update()" class="button is-primary" v-if="is_solo_secure">Reflash Solo Secure</button>
           <button onclick="update()" class="button is-primary" v-if="is_solo_hacker">Reflash Solo Hacker</button>
           <p>
@@ -115,6 +141,18 @@
             <span v-if="update_progress" v-text="update_progress"></span>
             <progress class="progress is-success is-large" v-bind:value="p_progress" max="100" v-if="p_progress">{{ p_progress }}%</progress>
           </p>
+
+          <template v-if="update_success">
+            <article class="message is-success">
+              <div class="message-header">
+                <p>UPDATE SUCCESSFUL!</p>
+              </div>
+              <div class="message-body">
+                Your key is now updated.
+              </div>
+            </article>
+          </template>
+
         </div>
       </template>
 
@@ -130,29 +168,6 @@
         </article>
       </template>
 
-      <template v-if="update_success">
-        <article class="message is-success">
-          <div class="message-header">
-            <p>UPDATE SUCCESSFUL!</p>
-          </div>
-          <div class="message-body">
-            Your key is now updated.
-          </div>
-        </article>
-      </template>
-
-      <template v-if="cannot_flash">
-        <article class="message is-danger">
-          <div class="message-header">
-            <p>DEVICE IS NOT IN BOOTLOADER MODE</p>
-          </div>
-          <div class="message-body">
-            <p>Please unplug your key, and plug in while keeping pressed until the LED blinks.</p>
-            <p>Then try to flash again</p>
-          </div>
-        </article>
-      </template>
-
     </section>
     <section class="section">
       <div class="container">
diff --git a/js/main.js b/js/main.js
index 33acfb5..3f595d1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -19,6 +19,7 @@ var app = new Vue({
     cannot_inspect: null,
     cannot_flash: null,
     update_success: null,
+    about_to_flash: null,
     p_progress: null,
     is_linux: null,
   }