keyoxide-web/views/profile.pug

extends templates/base.pug

mixin generatePersona(persona, isPrimary)
  if persona.claims.length > 0
    h2
      if persona.email
        | Identity claims (
        span.p-email #{persona.email}
        | )
      else
        | Identity claims
      if isPrimary
        small.primary primary
    if persona.description
      span.persona__description.p-comment
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
        |  #{persona.description}
    each claim in persona.claims
      if claim.matches.length > 0
        kx-claim.kx-item(data-claim=claim,data-status='running')
          details(aria-label="Claim")
            summary
              .info
                img(src=`https://design.keyoxide.org/brands/service-providers/_/icon.svg` onerror="this.src='https://design.keyoxide.org/brands/service-providers/_/icon.svg'")
                p
                  span.title= claim.display.profileName
                  span.subtitle-wrapper
                    |  [
                    span.subtitle= claim.display.serviceproviderName
                    | ]
              .icons
                .verificationStatus
                  .inProgress
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"></path></svg>
                  .success
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
                  .failure
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

            .content
              .subsection
                img(src='/static/img/link.png')
                div
                  p Claim link: 
                    a(rel="me" href=claim.uri aria-label="Link to claim")= claim.uri

block content
  if (data && 'publicKey' in data)
    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
      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)
        if (theme)
          style
            | :root {
            |   --primary-color-light: #{theme.primary.light};
            |   --primary-color-dark: #{theme.primary.dark};
            |   --primary-color-subtle-light: #{theme.primarySubtle.light};
            |   --primary-color-subtle-dark: #{theme.primarySubtle.dark};
            |   --background-color-light: #{theme.background.light};
            |   --background-color-dark: #{theme.background.dark};
            | }
        .profile__header
          img.profile__avatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar")

          p.profile__name.p-name= data.personas[data.primaryPersonaIndex].name
          if (data.personas[data.primaryPersonaIndex].description)
            p= data.personas[data.primaryPersonaIndex].description

          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

        .profile__claims
          +generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1)
          each persona, index in data.personas
            unless index == data.primaryPersonaIndex
              +generatePersona(persona, false)
          h2 Profile
          if data.verifiers.length > 0
            button.themed(onClick=`showQR('${data.verifiers[0].url}', 'profile_verifier_url')` aria-label='Show profile ID QR') Keyoxide profile QR
          button.themed(onClick=`showQR('${data.identifier}', 'profile_identifier')` aria-label='Show profile ID QR') Profile ID QR

    section
      h2 Profile information
      if (data && data.publicKey)
        h3 Public key
        kx-key.kx-item(data-keydata=data.publicKey)
          details(aria-label="Key")
            summary
              .info
                p
                  span.title= data.identifier
                  span.subtitle-wrapper
                    |  [
                    span.subtitle= data.publicKey.fetch.method
                    | ]
            .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