Keybase Test

by Benjamin Lupton

HTML

<script src="rawgit.com/github/fetch/0.11.0/fetch.js"></script>
<script src="keybase.io/_/brew/_/assignment/kbpgp-sitewide-js.js"></script>
<div class="demo">
  <div class="add">Demo: 3-users generating private keys at once</div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: Lato, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  font-weight: 600;
}

.demo {
  background: #eee;
  padding: 1em;
  border-radius: 5px;
}

.demo .result {
  background: #f8f8f8;
  color: #999;
  padding: 0.6em 1em;
  margin-top: 1em;
  letter-spacing: .3px;
  font-weight: 400;
}
.demo .result div {
  margin: 0.2em 0;
}

.demo .add {
  background: hsl(154, 58%, 52%);
  border-radius: 1em;
  color: white;
  padding: 0.5em 1em;
  cursor: pointer;
}
.demo .add:hover {
  background: hsl(154, 58%, 42%);
}

JavaScript

(function () {

  function yell (err) { throw err }

  // Fetch the specified number of random names, and turn that into a person
  function fetchPeople (total) {
    return fetch(`http://randomuser.me/api/?nat=us&results=${total}`, {headers: 'Accept: application/json'}).then(function (response) {
      return response.json().then(function (data) {
        return data.results.map(function (item, index) {
          // Third person should be 1024 bits, as according to demo
          return new Person(item.user, (index + 1) % 3 ? 2048 : 1024)
        }).catch(yell)
      }).catch(yell)
    }).catch(yell)
  }

  // Person class for managing a person and generating their key pair
  class Person {

    // Apply the persons details from the API, and their nbits
    constructor (details, nbits) {
      this.details = details
      this.code = `${details.name.first} ${details.name.last} <${details.email}>`
      this.nbits = nbits
    }

    // Generate a key pair for the person
    // and keep track of the status via a element injected into the parent element
    // return a promise once done
    generateKeyPair (parentElement) {
      var person = this
      var status = document.createElement('div')
      parentElement.appendChild(status)

      return new Promise(function (resolve) {
        function progress (o) {
          /*
                            guess
                            hunting for a prime ...739
                            confirming prime candidate 50%
                            found a prime
                            */
          var message
          switch ( o.what ) {
            case 'guess':
              message = 'guess'
              break

              case 'fermat':
              message = `hunting for a prime ...${o.p.toString().substr(-3)}`
              break

              case 'mr':
              var percent = Math.floor(o.i / o.total * 100)
              message = `confirming prime candidate ${percent}%`
              break

 ...