store download & add key

html/ui/app.css

@@ -17,3 +17,21 @@
     max-height: 100pt;
     overflow: auto;
 }
+
+#store-infos {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+    justify-content: flex-start;
+    border-bottom: dashed 1pt;
+    margin-bottom: 1ex;
+}
+#store-infos > * {
+    display: block;
+    font-size: medium;
+    padding: 2pt 1ex;
+    margin: 0 0 0 1ex;
+}
+#store-infos > *:first-child {
+    margin-left: 0;
+}

html/ui/index.html

@@ -41,15 +41,15 @@
 <template v-else-if="publicState.Store.New">
     <p>Store is new.</p>
     <form @submit="unlockStore" action="/public/unlock-store">
-        <input type="password" v-model="forms.store.pass1" name="passphrase" />
-        <input type="password" v-model="forms.store.pass2" />
+        <input type="password" v-model="forms.store.pass1" name="passphrase" required />
+        <input type="password" v-model="forms.store.pass2" required />
         <input type="submit" value="initialize" :disabled="!forms.store.pass1 || forms.store.pass1 != forms.store.pass2" />
     </form>
 </template>
 <template v-else-if="!publicState.Store.Open">
     <p>Store is not open.</p>
     <form @submit="unlockStore" action="/public/unlock-store">
-        <input type="password" name="passphrase" v-model="forms.store.pass1" />
+        <input type="password" name="passphrase" v-model="forms.store.pass1" required />
         <input type="submit" value="unlock" :disabled="!forms.store.pass1" />
     </form>
 </template>
@@ -58,12 +58,23 @@
     <p v-else>Invalid token</p>
 
     <form @submit="setToken">
-        <input type="password" v-model="forms.setToken" />
+        <input type="password" v-model="forms.setToken" required />
         <input type="submit" value="set token"/>
     </form>
 </template>
 <template v-else>
+  <div id="store-infos">
+    <h2>Store</h2>
+    <a :href="'/public/store.tar?token='+state.Store.DownloadToken" target="_blank">download</a>
+    <form @submit="storeAddKey" action="/store/add-key">
+        <input type="password" v-model="forms.store.pass1" name="passphrase" autocomplete="new-password" required />
+        <input type="password" v-model="forms.store.pass2" autocomplete="new-password" required />
+        <input type="submit" value="add unlock phrase" :disabled="!forms.store.pass1 || forms.store.pass1 != forms.store.pass2" />
+    </form>
+  </div>
+
   <div v-if="state.Clusters" id="clusters">
+
     <h2>Clusters</h2>
 
     <div class="sheets">

html/ui/js/app.js

@@ -60,6 +60,11 @@ createApp({
             this.session.token = this.forms.setToken
             this.forms.setToken = null
         },
+        storeAddKey() {
+            this.apiPost('/store/add-key', this.forms.store.pass1, (v) => {
+                this.forms.store = {}
+            })
+        },
         unlockStore() {
             this.apiPost('/public/unlock-store', this.forms.store.pass1, (v) => {
                 this.forms.store = {}