secrets migration & restitution

html/ui/js/Cluster.js

@@ -1,16 +1,37 @@
 
 import Downloads from './Downloads.js';
+import GetCopy from './GetCopy.js';
 
 export default {
-    components: { Downloads },
+    components: { Downloads, GetCopy },
     props: [ 'cluster', 'token', 'state' ],
     template: `
 <div class="cluster">
   <div class="title">Cluster {{ cluster.Name }}</div>
+  <div class="section">Tokens</div>
+  <section class="links">
+    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
+  </section>
+  <div class="section">Passwords</div>
+  <section class="links">
+    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
+  </section>
   <div class="section">Downloads</div>
   <section class="downloads">
     <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />
   </section>
+  <div class="section">CAs</div>
+  <section v-for="ca in cluster.CAs">
+    {{ ca.Name }}:
+        <GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" />
+        <template v-if="ca.Signed">
+          {{" "}}signed
+          <template v-for="signed in ca.Signed">
+            {{" "}}
+            <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
+          </template>
+        </template>
+  </section>
 </div>
 `
 }

html/ui/js/GetCopy.js

@@ -0,0 +1,21 @@
+export default {
+    props: [ 'name', 'href', 'token' ],
+    data() { return {showCopied: false} },
+    template: `<span class="notif"><div v-if="showCopied">copied!</div><a :href="href" @click="fetchAndCopy()">{{name}}<small>&nbsp;&#x1F5D0;</small></a></span>`,
+    methods: {
+        fetchAndCopy() {
+            event.preventDefault()
+
+            fetch(this.href, {
+                method: 'GET',
+                headers: { 'Authorization': 'Bearer ' + this.token },
+            }).then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
+              .then((value) => {
+                window.navigator.clipboard.writeText(value)
+                this.showCopied = true
+                setTimeout(() => { this.showCopied = false }, 1000)
+              })
+              .catch((e) => { console.log("failed to get value:", e); alert('failed to get value') })
+        },
+    },
+}

html/ui/style.css

@@ -45,7 +45,7 @@ th, tr:last-child > td {
     background: #333;
     color: #eee;
   }
-  a[href], button.link {
+  a[href], a[href]:visited, button.link {
     border: none;
     color: #31b0fa;
   }
@@ -125,3 +125,23 @@ header .utils > * {
     margin: 2pt 6pt 6pt 6pt;
 }
 
+.notif {
+    display: inline-block;
+    position: relative;
+}
+.notif > div:first-child {
+    position: absolute;
+    min-width: 100%; height: 100%;
+    background: white;
+    opacity: 75%;
+    text-align: center;
+}
+
+.links > * { margin-left: 1ex; }
+.links > *:first-child { margin-left: 0; }
+
+@media (prefers-color-scheme: dark) {
+  .notif > div:first-child {
+    background: black;
+  }
+}