local-server/html/ui/js/Cluster.js

import Downloads from './Downloads.js';
import GetCopy from './GetCopy.js';

export default {
    components: { Downloads, GetCopy },
    props: [ 'cluster', 'token', 'state' ],
    data() {
        return {
            signReqValidity: "1d",
            sshSignReq: {
                PubKey: "",
                Principal: "root",
            },
            sshUserCert: null,
            kubeSignReq: {
                CSR: "",
                User:   "anonymous",
                Group:  "",
            },
            kubeUserCert: null,
        };
    },
    methods: {
        sshCASign() {
            event.preventDefault();
            fetch(`/clusters/${this.cluster.Name}/ssh/user-ca/sign`, {
                method: 'POST',
                body: JSON.stringify({ ...this.sshSignReq, Validity: this.signReqValidity }),
                headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
            }).then((resp) => resp.blob())
              .then((cert) => { this.sshUserCert = URL.createObjectURL(cert) })
              .catch((e) => { alert('failed to sign: '+e); })
        },
        kubeCASign() {
            event.preventDefault();
            fetch(`/clusters/${this.cluster.Name}/kube/sign`, {
                method: 'POST',
                body: JSON.stringify({ ...this.kubeSignReq, Validity: this.signReqValidity }),
                headers: { 'Authorization': 'Bearer ' + this.token, 'Content-Type': 'application/json' },
            }).then((resp) => resp.blob())
              .then((cert) => { this.kubeUserCert = URL.createObjectURL(cert) })
              .catch((e) => { alert('failed to sign: '+e); })
        },
    },
    template: `
  <h3>Tokens</h3>
  <section class="links">
    <GetCopy v-for="n in cluster.Tokens" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/tokens/'+n" />
  </section>

  <h3>Passwords</h3>
  <section class="links">
    <GetCopy v-for="n in cluster.Passwords" :token="token" :name="n" :href="'/clusters/'+cluster.Name+'/passwords/'+n" />
  </section>

  <h3>Downloads</h3>
  <Downloads :token="token" :state="state" kind="cluster" :name="cluster.Name" />

  <h3>CAs</h3>
  <table><tr><th>Name</th><th>Certificate</th><th>Signed certificates</th></tr>
  <tr v-for="ca in cluster.CAs">
    <td>{{ ca.Name }}</td>
    <td><GetCopy :token="token" name="cert" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/certificate'" /></td>
    <td><template v-for="signed in ca.Signed">
      {{" "}}
      <GetCopy :token="token" :name="signed" :href="'/clusters/'+cluster.Name+'/CAs/'+ca.Name+'/signed?name='+signed" />
    </template></td>
  </tr></table>

  <h3>Access</h3>

  <p>Allow cluster access from a public key</p>
  <p>Certificate time validity: <input type="text" v-model="signReqValidity"/> <small>ie: -5m:1w, 5m, 1M, 1y, 1d-1s, etc.</p>

  <h4>Grant SSH access</h4>

  <p>Public key (OpenSSH format):<br/>
     <textarea v-model="sshSignReq.PubKey" style="width:64em;height:2lh"></textarea>
  </p>
  <p>Principal: <input type="text" v-model="sshSignReq.Principal"/></p>

  <p><button @click="sshCASign">Sign SSH access request</button></p>
  <p v-if="sshUserCert">
    <a :href="sshUserCert" download="ssh-cert.pub">Get certificate</a>
  </p>

  <h4>Grant Kubernetes API access</h4>

  <p>Certificate signing request (PEM format):<br/>
     <textarea v-model="kubeSignReq.CSR" style="width:64em;height:7lh;"></textarea>
  </p>
  <p>User: <input type="text" v-model="kubeSignReq.User"/></p>
  <p>Group: <input type="text" v-model="kubeSignReq.Group"/></p>

  <p><button @click="kubeCASign">Sign Kubernetes API access request</button></p>
  <p v-if="kubeUserCert">
    <a :href="kubeUserCert" download="kube-cert.pub">Get certificate</a>
  </p>
`
}