keyoxide-web/views/profile.pug
Yarmo Mackenbach a44a88fbea
Add aria labels
2021-06-09 13:58:36 +02:00

140 lines
5.4 KiB
Text

extends templates/base.pug
mixin generateUser(user, isPrimary)
h2
| #{user.userData.email}
if isPrimary
small.primary primary
each claim in user.claims
if claim.matches.length > 0
kx-claim.kx-item(data-claim=claim)
details(aria-label="Claim")
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 aria-label="Link to profile")= 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 aria-label="Link to proof")= 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')
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")
dialog#dialog--verifySignature
div
form(method='post')
label(for="sigVerInput") Signature
textarea#sigVerInput.input(name='signature')
input.no-margin(type='submit' name='submit' value='VERIFY SIGNATURE')
br
br
label(for="sigVerOutput") Verification result
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')
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
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(aria-label="Key")
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 aria-label="Link to cryptographic key")= data.keyData.key.uri
hr
.subsection
img(src='/static/img/qrcode.png')
div
button(onClick=`showQR('${data.keyData.fingerprint}', 'fingerprint')` aria-label='Show QR code for cryptographic 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)