keyoxide-web/views/profile.pug

extends templates/base.pug

mixin generatePersona(persona, isPrimary)
  h2
    if persona.email
      span.p-email Identity claims (#{persona.email})
    else
      span.p-email Identity claims
    if isPrimary
      small.primary primary
  if persona.description
    span.p-comment ⓘ #{persona.description}
  each claim in persona.claims
    if claim.matches.length > 0
      kx-claim.kx-item(data-claim=claim)
        details(aria-label="Claim")
          summary
            .info
              p.subtitle= claim.display.serviceproviderName
              p.title= claim.display.name
            .icons
              .verificationStatus(data-value='running')
                .inProgress
          .content
            .subsection
              img(src='/static/img/link.png')
              div
                if (claim.display.url)
                  p Profile link: 
                    a(rel='me' href=claim.display.url aria-label="Link to profile")= claim.display.url
                else
                  p Profile link: not accessible from browser
                if (claim.matches.length === 1 && claim.matches[0].proof.uri)
                  p Proof link: 
                    a(href=claim.matches[0].proof.uri aria-label="Link to proof")= claim.matches[0].proof.uri
                else
                  p Proof link: not accessible from browser

block content
  script.
    kx = {
      publicKey: !{JSON.stringify(data.publicKey)}
    }

  if (data && 'errors' in data && data.errors.length > 0)
    section
      h2 Something went wrong while viewing the profile
      .card 
        if data.errors.length === 1
          p The following error was reported:
        else
          p The following errors were reported:
        ul
        each error in data.errors
          li
            p= error
        p Please see the 
          a(href="https://docs.keyoxide.org/getting-started/something-went-wrong/") documentation
          |  for help.
  else
    section.profile.narrow.h-card
      noscript
        p Keyoxide requires JavaScript to function.

      if (enable_message_encryption)
        dialog#dialog--encryptMessage
          div
            form(method='post')
              label(for="encryptionInput") Message to encrypt 
              textarea#encryptionInput.input(name='message')
              input.no-margin(type='submit' name='submit' value='ENCRYPT MESSAGE')
              br
              br
              label(for="encryptionOutput") Encryption result 
              textarea#encryptionOutput.output(name='message' placeholder='Waiting for input' readonly)
            form(method="dialog")
              input(type="submit" value="Close")

      if (enable_signature_verification)
        dialog#dialog--verifySignature
          div
            form(method='post')
              label(for="sigVerInput") Signature name
              textarea#sigVerOutput.output(name='message' placeholder='Waiting for input' readonly)
            form(method="dialog")
              input(type="submit" value="Close")

      dialog#dialog--qr
        div
          canvas#qr
          p
            a(href="" tabindex="0")#qr--altLink
          form(method="dialog")
            input(type="submit" value="Close")

      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')

      unless (isSignature && !signature)
        #profileHeader.card.card--transparent.card--profileHeader
          img#profileAvatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar")

          p#profileName.p-name= data.personas[data.primaryPersonaIndex].name

          if (enable_message_encryption || enable_signature_verification)
            .button-wrapper
              if (enable_message_encryption)
                button(onClick="document.querySelector('#dialog--encryptMessage').showModal();") Encrypt message
              if (enable_signature_verification)
                button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature

        +generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1)
        each persona, index in data.personas
          unless index == data.primaryPersonaIndex
            +generatePersona(persona, false)

        #profileProofs.card.card--transparent
          h2 Key
          kx-key.kx-item(data-keydata=data.publicKey)
            details(aria-label="Key")
              summary
                .info
                  p.subtitle= data.publicKey.fetch.method
                  p.title= data.identifier
              .content
                .subsection
                  img(src='/static/img/link.png')
                  div
                    p Key link: 
                      a.u-key(href=data.publicKey.fetch.resolvedUrl rel="pgpkey" aria-label="Link to cryptographic key")= data.publicKey.fetch.resolvedUrl
                hr
                if (data.profileType === 'openpgp')
                  .subsection
                    img(src='/static/img/qrcode.png')
                    div
                      button(onClick=`showQR('${data.publicKey.fingerprint}', 'fingerprint')` aria-label='Show QR code for cryptographic fingerprint') Show OpenPGP fingerprint QR