mirror of
https://codeberg.org/keyoxide/keyoxide-web.git
synced 2024-12-22 14:59:29 -07:00
feat: rewrite templates
This commit is contained in:
Yarmo Mackenbach
parent
4cb94fd40e
commit
c5ea6c3024
12 changed files with 124 additions and 137 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
extends templates/base.pug
|
extends templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.long_form.narrow
|
section
|
||||||
h1= title
|
h1= title
|
||||||
.card !{ content }
|
!{ content }
|
||||||
|
|
|
||||||
|
|
@ -1,76 +1,41 @@
|
||||||
extends templates/base.pug
|
extends templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
#search.form-wrapper.card
|
section#search.form-wrapper
|
||||||
h2#searchTitle View a profile
|
|
||||||
form(action="post")
|
form(action="post")
|
||||||
label#searchQuery(for="query") Query for fingerprint or email identifier
|
input#query(type="search" name="query" required placeholder="Search for a profile")
|
||||||
input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks" aria-labelledby="searchTitle searchQuery")
|
input(type="submit" value="Search")
|
||||||
|
|
||||||
input(type="submit" value="View profile")
|
section
|
||||||
p Or view a
|
h2 About Keyoxide
|
||||||
a(href="/sig") plaintext signature
|
p Keyoxide is a decentralized tool to create and verify decentralized online identities.
|
||||||
| profile.
|
p Just like passports for real life identities, Keyoxide can be used to verify the online identity of people to make sure one is interacting with whom they intended to be and not an imposter.
|
||||||
|
p Unlike real life passports, Keyoxide works with online identities or "personas", meaning these identities can be anonymous and one can have multiple separate personas to protect their privacy, both online and in real life.
|
||||||
if highlights.length > 0
|
|
||||||
h2 Highlights
|
|
||||||
.hcards.hcards--highlights
|
|
||||||
each hl in highlights
|
|
||||||
.card.card--small-profile
|
|
||||||
h3.name= hl.name
|
|
||||||
p
|
|
||||||
span.fingerprint= hl.fingerprint
|
|
||||||
br
|
|
||||||
span.details= hl.description
|
|
||||||
.spacer
|
|
||||||
p
|
|
||||||
a(href=`/${hl.fingerprint}`).button.full-width View profile
|
|
||||||
- var n = 0
|
|
||||||
while n < 3-highlights.length
|
|
||||||
.card.card--small-profile-dummy
|
|
||||||
- n++
|
|
||||||
|
|
||||||
h2 About Keyoxide
|
|
||||||
.hcards.hcards--features.hcards--max-2
|
|
||||||
.card
|
|
||||||
h3 Online identity
|
|
||||||
p Verifying online identity with cryptography. View
|
|
||||||
a(href="/project@keyoxide.org") Keyoxide's profile
|
|
||||||
| .
|
|
||||||
.card
|
|
||||||
h3 Mobile app
|
|
||||||
p Available on Android and iOS. More information on
|
|
||||||
a(href="https://mobile.keyoxide.org") mobile.keyoxide.org
|
|
||||||
| .
|
|
||||||
.card
|
|
||||||
h3 Decentralization & privacy
|
|
||||||
p No central server or database. No collected data. Control how your data is stored and accessed.
|
|
||||||
.card
|
|
||||||
h3 Cryptography
|
|
||||||
p Your online identity verifiably signed with widely-used cryptographic standards (OpenPGP, others coming).
|
|
||||||
.card
|
|
||||||
h3 Open Source
|
|
||||||
p All Keyoxide projects are licensed under AGPL-3.0-or-later.
|
|
||||||
.card
|
|
||||||
h3 Transparent funding
|
|
||||||
p Funded by donations. Keyoxide stands against VC and surveillance capitalism.
|
|
||||||
|
|
||||||
h2 Community
|
|
||||||
.card
|
|
||||||
p
|
p
|
||||||
| Discussion of the Keyoxide project happens primarily on the
|
| Here is what a
|
||||||
|
a(href="/project@keyoxide.org") Keyoxide profile
|
||||||
|
| looks like.
|
||||||
|
p
|
||||||
|
a(href="https://docs.keyoxide.org/getting-started") Get started
|
||||||
|
| and create your own!
|
||||||
|
section
|
||||||
|
h2 Community
|
||||||
|
p
|
||||||
|
| Discussion of the Keyoxide project primarily happens on the
|
||||||
|
a(href="https://matrix.to/#/#keyoxide:matrix.org") #keyoxide Matrix channel
|
||||||
|
| and the
|
||||||
a(href="https://community.keyoxide.org") Keyoxide Community Forum
|
a(href="https://community.keyoxide.org") Keyoxide Community Forum
|
||||||
| . This is the place to propose new service providers for identity verification, make feature suggestions or report bugs.
|
| .
|
||||||
|
| The Matrix channel is great for troubleshooting.
|
||||||
|
| The forum is the place to propose new service providers for identity verification, make feature suggestions or report bugs.
|
||||||
p
|
p
|
||||||
| There is also the
|
| There is also the
|
||||||
a(href="irc://irc.libera.chat/#keyoxide") #keyoxide:libera.chat IRC room
|
a(href="irc://irc.libera.chat/#keyoxide") #keyoxide:libera.chat IRC room
|
||||||
| , the
|
|
||||||
a(href="https://matrix.to/#/#keyoxide:matrix.org") #keyoxide Matrix channel
|
|
||||||
| and the
|
| and the
|
||||||
a(href="https://lists.sr.ht/~yarmo/keyoxide-devel") keyoxide-devel mailing list
|
a(href="https://lists.sr.ht/~yarmo/keyoxide-devel") keyoxide-devel mailing list
|
||||||
| . The IRC room and Matrix channel are bridged together.
|
| . The IRC room and Matrix channel are bridged together.
|
||||||
p
|
p
|
||||||
| The project is also present on the fediverse as
|
| The project is also present on the fediverse:
|
||||||
a(href="https://fosstodon.org/@keyoxide") @keyoxide@fosstodon.org
|
a(href="https://fosstodon.org/@keyoxide") @keyoxide@fosstodon.org
|
||||||
| .
|
| .
|
||||||
p
|
p
|
||||||
|
|
@ -79,10 +44,10 @@ block content
|
||||||
| .
|
| .
|
||||||
|
|
||||||
|
|
||||||
h2 Fund the project
|
section
|
||||||
.card
|
h2 Fund the project
|
||||||
p
|
p
|
||||||
| The development of Keyoxide and the Decentralized OpenPGP Identity Proofs ecosystem is entirely funded by donations.
|
| The development of Keyoxide and the Decentralized Online Identity Proofs ecosystem is entirely funded by donations.
|
||||||
p
|
p
|
||||||
| The Keyoxide project was awarded a NGI Zero grant from the
|
| The Keyoxide project was awarded a NGI Zero grant from the
|
||||||
a(href='https://nlnet.nl/') NLnet Foundation
|
a(href='https://nlnet.nl/') NLnet Foundation
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,34 @@
|
||||||
footer
|
footer
|
||||||
.container
|
.container
|
||||||
.hcards
|
p
|
||||||
div
|
| This site:
|
||||||
h1 Keyoxide
|
a(href="/") Homepage
|
||||||
a(href="/") Homepage
|
| •
|
||||||
br
|
a(href="/util") Utilities
|
||||||
a(href="/util") Utilities
|
| •
|
||||||
br
|
a(href="/privacy") Privacy policy
|
||||||
a(href="/privacy") Privacy policy
|
br
|
||||||
|
|
||||||
div
|
| Keyoxide project:
|
||||||
h1 Keyoxide project
|
a(href="https://community.keyoxide.org") Forum
|
||||||
a(href="https://keyoxide.org") Keyoxide.org
|
| •
|
||||||
br
|
a(href="https://docs.keyoxide.org") Documentation
|
||||||
a(href="https://community.keyoxide.org") Community forum
|
| •
|
||||||
br
|
a(href="https://blog.keyoxide.org") Blog
|
||||||
a(href="https://docs.keyoxide.org") Documentation
|
| •
|
||||||
br
|
a(href="https://codeberg.org/keyoxide") Source code
|
||||||
a(href="https://blog.keyoxide.org") Blog
|
br
|
||||||
|
|
||||||
div
|
| Related:
|
||||||
h1 Development
|
a(href="https://doip.rocks") doip.rocks
|
||||||
a(href="https://codeberg.org/keyoxide/") Source code
|
| •
|
||||||
br
|
a(href="https://ariadne.id") ariadne.id
|
||||||
a(href="https://doip.rocks") doip.rocks
|
|
||||||
br
|
|
||||||
a(href="https://ariadne.id") ariadne.id
|
|
||||||
|
|
||||||
p.copyright
|
p
|
||||||
| Version #{meta.keyoxide.version}
|
| Version #{meta.keyoxide.version}
|
||||||
if (meta.env === "development")
|
if (meta.env === "development")
|
||||||
| -dev
|
| -dev
|
||||||
br
|
br
|
||||||
|
|
||||||
| © 2023 Keyoxide project contributors
|
| © 2023 Keyoxide project contributors
|
||||||
|
|
||||||
|
|
@ -3,7 +3,8 @@ header
|
||||||
nav
|
nav
|
||||||
a.logo(href='/' aria-label='Home')
|
a.logo(href='/' aria-label='Home')
|
||||||
img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true')
|
img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true')
|
||||||
a.text(href='/') Home
|
| Keyoxide
|
||||||
a.text(href='https://docs.keyoxide.org') Docs
|
.links
|
||||||
a.text(href='https://blog.keyoxide.org') Blog
|
a.text(href='https://docs.keyoxide.org/getting-started') Getting started
|
||||||
a.text(href='https://community.keyoxide.org') Forum
|
a.text(href='https://docs.keyoxide.org') Docs
|
||||||
|
a.text(href='https://blog.keyoxide.org') Blog
|
||||||
|
|
|
||||||
|
|
@ -3,24 +3,38 @@ extends templates/base.pug
|
||||||
mixin generatePersona(persona, isPrimary)
|
mixin generatePersona(persona, isPrimary)
|
||||||
h2
|
h2
|
||||||
if persona.email
|
if persona.email
|
||||||
span.p-email Identity claims (#{persona.email})
|
| Identity claims (
|
||||||
|
span.p-email #{persona.email}
|
||||||
|
| )
|
||||||
else
|
else
|
||||||
span.p-email Identity claims
|
| Identity claims
|
||||||
if isPrimary
|
if isPrimary
|
||||||
small.primary primary
|
small.primary primary
|
||||||
if persona.description
|
if persona.description
|
||||||
span.p-comment ⓘ #{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
|
each claim in persona.claims
|
||||||
if claim.matches.length > 0
|
if claim.matches.length > 0
|
||||||
kx-claim.kx-item(data-claim=claim)
|
kx-claim.kx-item(data-claim=claim,data-status='running')
|
||||||
details(aria-label="Claim")
|
details(aria-label="Claim")
|
||||||
summary
|
summary
|
||||||
.info
|
.info
|
||||||
p.subtitle= claim.display.serviceproviderName
|
p
|
||||||
p.title= claim.display.name
|
span.title= claim.display.name
|
||||||
|
span.subtitle-wrapper
|
||||||
|
| [
|
||||||
|
span.subtitle= claim.display.serviceproviderName
|
||||||
|
| ]
|
||||||
.icons
|
.icons
|
||||||
.verificationStatus(data-value='running')
|
.verificationStatus
|
||||||
.inProgress
|
.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
|
.content
|
||||||
.subsection
|
.subsection
|
||||||
img(src='/static/img/link.png')
|
img(src='/static/img/link.png')
|
||||||
|
|
@ -59,7 +73,7 @@ block content
|
||||||
a(href="https://docs.keyoxide.org/getting-started/something-went-wrong/") documentation
|
a(href="https://docs.keyoxide.org/getting-started/something-went-wrong/") documentation
|
||||||
| for help.
|
| for help.
|
||||||
else
|
else
|
||||||
section.profile.narrow.h-card
|
section.profile
|
||||||
noscript
|
noscript
|
||||||
p Keyoxide requires JavaScript to function.
|
p Keyoxide requires JavaScript to function.
|
||||||
|
|
||||||
|
|
@ -103,10 +117,12 @@ block content
|
||||||
input(type='submit', name='submit', value='Generate profile')
|
input(type='submit', name='submit', value='Generate profile')
|
||||||
|
|
||||||
unless (isSignature && !signature)
|
unless (isSignature && !signature)
|
||||||
#profileHeader.card.card--transparent.card--profileHeader
|
.profile__header
|
||||||
img#profileAvatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar")
|
img.profile__avatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar")
|
||||||
|
|
||||||
p#profileName.p-name= data.personas[data.primaryPersonaIndex].name
|
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)
|
if (enable_message_encryption || enable_signature_verification)
|
||||||
.button-wrapper
|
.button-wrapper
|
||||||
|
|
@ -115,28 +131,34 @@ block content
|
||||||
if (enable_signature_verification)
|
if (enable_signature_verification)
|
||||||
button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature
|
button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature
|
||||||
|
|
||||||
+generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1)
|
.profile__claims
|
||||||
each persona, index in data.personas
|
+generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1)
|
||||||
unless index == data.primaryPersonaIndex
|
each persona, index in data.personas
|
||||||
+generatePersona(persona, false)
|
unless index == data.primaryPersonaIndex
|
||||||
|
+generatePersona(persona, false)
|
||||||
|
|
||||||
#profileProofs.card.card--transparent
|
section
|
||||||
h2 Key
|
h2 Profile information
|
||||||
kx-key.kx-item(data-keydata=data.publicKey)
|
h3 Public key
|
||||||
details(aria-label="Key")
|
kx-key.kx-item(data-keydata=data.publicKey)
|
||||||
summary
|
details(aria-label="Key")
|
||||||
.info
|
summary
|
||||||
p.subtitle= data.publicKey.fetch.method
|
.info
|
||||||
p.title= data.identifier
|
p
|
||||||
.content
|
span.title= data.identifier
|
||||||
.subsection
|
span.subtitle-wrapper
|
||||||
img(src='/static/img/link.png')
|
| [
|
||||||
div
|
span.subtitle= data.publicKey.fetch.method
|
||||||
p Key link:
|
| ]
|
||||||
a.u-key(href=data.publicKey.fetch.resolvedUrl rel="pgpkey" aria-label="Link to cryptographic key")= data.publicKey.fetch.resolvedUrl
|
.content
|
||||||
hr
|
.subsection
|
||||||
if (data.profileType === 'openpgp')
|
img(src='/static/img/link.png')
|
||||||
.subsection
|
div
|
||||||
img(src='/static/img/qrcode.png')
|
p Key link:
|
||||||
div
|
a.u-key(href=data.publicKey.fetch.resolvedUrl rel="pgpkey" aria-label="Link to cryptographic key")= data.publicKey.fetch.resolvedUrl
|
||||||
button(onClick=`showQR('${data.publicKey.fingerprint}', 'fingerprint')` aria-label='Show QR code for cryptographic fingerprint') Show OpenPGP fingerprint QR
|
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
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 Argon2 utility
|
h1 Argon2 utility
|
||||||
|
|
||||||
h2 Generate Argon2 hash
|
h2 Generate Argon2 hash
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 bcrypt utility
|
h1 bcrypt utility
|
||||||
|
|
||||||
h2 Generate bcrypt hash
|
h2 Generate bcrypt hash
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 Keyoxide utilities
|
h2 Keyoxide utilities
|
||||||
p
|
p
|
||||||
a(href="/util/profile-url") Get the URL for a Keyoxide profile
|
a(href="/util/profile-url") Get the URL for a Keyoxide profile
|
||||||
p
|
p
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 Profile URL
|
h1 Profile URL
|
||||||
form#form-util-profile-url(method='post')
|
form#form-util-profile-url(method='post')
|
||||||
p This tool generates an URL for your Keyoxide profile page.
|
p This tool generates an URL for your Keyoxide profile page.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 QR Code
|
h1 QR Code
|
||||||
form#form-util-qr(method='post')
|
form#form-util-qr(method='post')
|
||||||
pre
|
pre
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 QR Code
|
h1 QR Code
|
||||||
form#form-util-qrfp(method='post')
|
form#form-util-qrfp(method='post')
|
||||||
p
|
p
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
extends ../templates/base.pug
|
extends ../templates/base.pug
|
||||||
|
|
||||||
block content
|
block content
|
||||||
section.narrow
|
section
|
||||||
h1 Web Key Directory URL generator
|
h1 Web Key Directory URL generator
|
||||||
form#form-util-wkd(method='post')
|
form#form-util-wkd(method='post')
|
||||||
p
|
p
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue