keyoxide-web/views/profile.pug

extends templates/base.pug

mixin generateUser(user, isPrimary)
  h2
    | #{user.userData.email}
    if isPrimary
      small.primary primary
  each claim in user.claims
    kx-claim.kx-item(data-claim=claim)
      details
        summary
          .info
            p.subtitle= claim.matches[0].serviceprovider.name
            p.title= claim.matches[0].profile.display
          .icons
            .verificationStatus(data-value='running')
              .inProgress
        .content
          .subsection
            img(src='/static/img/link.png')
            div
              if (claim.matches[0].profile.uri)
                p Profile link: 
                  a(rel='me' href=claim.matches[0].profile.uri)= claim.matches[0].profile.uri
              else
                p Profile link: not accessible from browser
              if (claim.matches[0].proof.uri)
                p Proof link: 
                  a(rel='me' href=claim.matches[0].proof.uri)= claim.matches[0].proof.uri
              else
                p Proof link: not accessible from browser
              
block js
  script(type='application/javascript' src='/static/qrcode.min.js' charset='utf-8')
  script(type='application/javascript' src='/static/dialog-polyfill.js' charset='utf-8')
  script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
  script(type='application/javascript' src='/static/doip.min.js' charset='utf-8')
  script(type='application/javascript' src='/static/kx-claim.js' charset='utf-8')
  script(type='application/javascript' src='/static/kx-key.js' charset='utf-8')
  script(type='application/javascript' src='/static/scripts.js' charset='utf-8')

block css
  link(rel='stylesheet' href='/static/dialog-polyfill.css')

block content
  script.
    kx = {
      key: {
        url: "!{data && data.key && data.key.fetchURL ? data.key.fetchURL : null}",
        object: null
      }
    }

  section.profile.narrow
    noscript
      p Keyoxide requires JavaScript to function.

    dialog#dialog--encryptMessage
      div
        form(method='post')
          textarea.input(name='message' placeholder='Message')
          input.no-margin(type='submit' name='submit' value='ENCRYPT MESSAGE')
          textarea.output(name='message' placeholder='Waiting for input' readonly)
        form(method="dialog")
          input(type="submit" value="Close")

    dialog#dialog--verifySignature
      div
        form(method='post')
          textarea.input(name='signature' placeholder='Signature')
          input.no-margin(type='submit' name='submit' value='VERIFY SIGNATURE')
          textarea.output(name='message' placeholder='Waiting for input' readonly)
        form(method="dialog")
          input(type="submit" value="Close")

    dialog#dialog--qr
      div
        canvas#qr
        p
          a#qr--altLink

    if (isSignature)
      #profileSigInput.form-wrapper.card
        h2 Signature profile
        form#formGenerateSignatureProfile(method='post')
          label(for="signature")  Please enter the raw profile signature below and press "Generate profile".
          textarea#signature(name='signature')= signature
          input(type='submit', name='submit', value='Generate profile')


    if (data && 'errors' in data && data.errors.length > 0)
      h2 Something went wrong while generating the profile
      ul
      each error in data.errors
        li= error
    else
      unless (isSignature && !signature)
        #profileHeader.card.card--transparent.card--profileHeader
          a.avatar(href="#")
            img#profileAvatar(src=data.extra.avatarURL alt="avatar")

          p#profileName= data.keyData.users[data.keyData.primaryUserIndex].userData.name
          .button-wrapper
            button(onClick="document.querySelector('#dialog--encryptMessage').showModal();") Encrypt message
            button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature

        #profileProofs.card.card--transparent
          h2 Key
          kx-key.kx-item(data-keydata=data.keyData)
            details
              summary
                .info
                  p.subtitle= data.keyData.key.fetchMethod
                  p.title= data.keyData.fingerprint
              .content
                .subsection
                  img(src='/static/img/link.png')
                  div
                    p Key link: 
                      a(href=data.keyData.key.uri)= data.keyData.key.uri
                hr
                .subsection
                  img(src='/static/img/qrcode.png')
                  div
                    button(onClick=`showQR('${data.keyData.fingerprint}', 'fingerprint')`) Show OpenPGP fingerprint QR

          +generateUser(data.keyData.users[data.keyData.primaryUserIndex], true)
          each user, index in data.keyData.users
            unless index == data.keyData.primaryUserIndex
              +generateUser(user, false)