Password card

password-card.markdown

Password card

A Pen by TanelTM on CodePen.

License.

password-card.pug

input(type="password" placeholder="Master password")
table

script.coffeescript

timer = null

$('input').on('input', ->
  render $(this).val()
  clearTimeout(timer)
  timer = setTimeout(clearMasterPass, 30000)
)

clearMasterPass = ->
  $('input').val('')
  $('table').empty()

render = (master) ->
  $('table').empty()
  
  if !master then return

  shaObj = new jsSHA("SHA-512", "TEXT");
  shaObj.update(master);
  a = shaObj.getHash("HEX");


  b = ""

  for i in [0...a.length]
    char = a.charAt(i)
    if i % 2 then char = char.toUpperCase()
    b += char

  c = b.match(/.{1,10}/g)

 
  for pass, i in c
    if pass.length == 10
      $('table').append("<tr><td>#{i}</td><td>#{pass}</td></tr>")

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsSHA/2.2.0/sha512.js"></script>
<script src="https://use.fontawesome.com/633a459ec2.js"></script>

style.stylus

body
  font-family monospace

body, input
  background-color black
  color mix(blue, cyan)
  
input
  border 1px solid orange
  padding 2px
  
  &:focus
    outline none
    border 1px solid mix(blue, cyan)

input, table
  width 200px
  box-sizing border-box

table:not(:empty), td
  border 1px solid mix(blue, cyan)