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
|
||||
|
||||
block content
|
||||
section.long_form.narrow
|
||||
section
|
||||
h1= title
|
||||
.card !{ content }
|
||||
!{ content }
|
||||
|
|
|
|||
|
|
@ -1,76 +1,41 @@
|
|||
extends templates/base.pug
|
||||
|
||||
block content
|
||||
#search.form-wrapper.card
|
||||
h2#searchTitle View a profile
|
||||
section#search.form-wrapper
|
||||
form(action="post")
|
||||
label#searchQuery(for="query") Query for fingerprint or email identifier
|
||||
input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks" aria-labelledby="searchTitle searchQuery")
|
||||
input#query(type="search" name="query" required placeholder="Search for a profile")
|
||||
input(type="submit" value="Search")
|
||||
|
||||
input(type="submit" value="View profile")
|
||||
p Or view a
|
||||
a(href="/sig") plaintext signature
|
||||
| profile.
|
||||
|
||||
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
|
||||
section
|
||||
h2 About Keyoxide
|
||||
p Keyoxide is a decentralized tool to create and verify decentralized online identities.
|
||||
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.
|
||||
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
|
||||
| . 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
|
||||
| There is also the
|
||||
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
|
||||
a(href="https://lists.sr.ht/~yarmo/keyoxide-devel") keyoxide-devel mailing list
|
||||
| . The IRC room and Matrix channel are bridged together.
|
||||
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
|
||||
| .
|
||||
p
|
||||
|
|
@ -79,10 +44,10 @@ block content
|
|||
| .
|
||||
|
||||
|
||||
h2 Fund the project
|
||||
.card
|
||||
section
|
||||
h2 Fund the project
|
||||
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
|
||||
| The Keyoxide project was awarded a NGI Zero grant from the
|
||||
a(href='https://nlnet.nl/') NLnet Foundation
|
||||
|
|
|
|||
|
|
@ -1,35 +1,34 @@
|
|||
footer
|
||||
.container
|
||||
.hcards
|
||||
div
|
||||
h1 Keyoxide
|
||||
a(href="/") Homepage
|
||||
br
|
||||
a(href="/util") Utilities
|
||||
br
|
||||
a(href="/privacy") Privacy policy
|
||||
p
|
||||
| This site:
|
||||
a(href="/") Homepage
|
||||
| •
|
||||
a(href="/util") Utilities
|
||||
| •
|
||||
a(href="/privacy") Privacy policy
|
||||
br
|
||||
|
||||
div
|
||||
h1 Keyoxide project
|
||||
a(href="https://keyoxide.org") Keyoxide.org
|
||||
br
|
||||
a(href="https://community.keyoxide.org") Community forum
|
||||
br
|
||||
a(href="https://docs.keyoxide.org") Documentation
|
||||
br
|
||||
a(href="https://blog.keyoxide.org") Blog
|
||||
| Keyoxide project:
|
||||
a(href="https://community.keyoxide.org") Forum
|
||||
| •
|
||||
a(href="https://docs.keyoxide.org") Documentation
|
||||
| •
|
||||
a(href="https://blog.keyoxide.org") Blog
|
||||
| •
|
||||
a(href="https://codeberg.org/keyoxide") Source code
|
||||
br
|
||||
|
||||
div
|
||||
h1 Development
|
||||
a(href="https://codeberg.org/keyoxide/") Source code
|
||||
br
|
||||
a(href="https://doip.rocks") doip.rocks
|
||||
br
|
||||
a(href="https://ariadne.id") ariadne.id
|
||||
| Related:
|
||||
a(href="https://doip.rocks") doip.rocks
|
||||
| •
|
||||
a(href="https://ariadne.id") ariadne.id
|
||||
|
||||
p.copyright
|
||||
p
|
||||
| Version #{meta.keyoxide.version}
|
||||
if (meta.env === "development")
|
||||
| -dev
|
||||
br
|
||||
| © 2023 Keyoxide project contributors
|
||||
|
||||
| © 2023 Keyoxide project contributors
|
||||
|
||||
|
|
@ -3,7 +3,8 @@ header
|
|||
nav
|
||||
a.logo(href='/' aria-label='Home')
|
||||
img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true')
|
||||
a.text(href='/') Home
|
||||
a.text(href='https://docs.keyoxide.org') Docs
|
||||
a.text(href='https://blog.keyoxide.org') Blog
|
||||
a.text(href='https://community.keyoxide.org') Forum
|
||||
| Keyoxide
|
||||
.links
|
||||
a.text(href='https://docs.keyoxide.org/getting-started') Getting started
|
||||
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)
|
||||
h2
|
||||
if persona.email
|
||||
span.p-email Identity claims (#{persona.email})
|
||||
| Identity claims (
|
||||
span.p-email #{persona.email}
|
||||
| )
|
||||
else
|
||||
span.p-email Identity claims
|
||||
| Identity claims
|
||||
if isPrimary
|
||||
small.primary primary
|
||||
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
|
||||
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")
|
||||
summary
|
||||
.info
|
||||
p.subtitle= claim.display.serviceproviderName
|
||||
p.title= claim.display.name
|
||||
p
|
||||
span.title= claim.display.name
|
||||
span.subtitle-wrapper
|
||||
| [
|
||||
span.subtitle= claim.display.serviceproviderName
|
||||
| ]
|
||||
.icons
|
||||
.verificationStatus(data-value='running')
|
||||
.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')
|
||||
|
|
@ -59,7 +73,7 @@ block content
|
|||
a(href="https://docs.keyoxide.org/getting-started/something-went-wrong/") documentation
|
||||
| for help.
|
||||
else
|
||||
section.profile.narrow.h-card
|
||||
section.profile
|
||||
noscript
|
||||
p Keyoxide requires JavaScript to function.
|
||||
|
||||
|
|
@ -103,10 +117,12 @@ block content
|
|||
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")
|
||||
.profile__header
|
||||
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)
|
||||
.button-wrapper
|
||||
|
|
@ -115,28 +131,34 @@ block content
|
|||
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)
|
||||
.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)
|
||||
|
||||
#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
|
||||
section
|
||||
h2 Profile information
|
||||
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
|
||||
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
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
section
|
||||
h1 Argon2 utility
|
||||
|
||||
h2 Generate Argon2 hash
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
extends ../templates/base.pug
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
section
|
||||
h1 bcrypt utility
|
||||
|
||||
h2 Generate bcrypt hash
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
extends ../templates/base.pug
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
h1 Keyoxide utilities
|
||||
section
|
||||
h2 Keyoxide utilities
|
||||
p
|
||||
a(href="/util/profile-url") Get the URL for a Keyoxide profile
|
||||
p
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
extends ../templates/base.pug
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
section
|
||||
h1 Profile URL
|
||||
form#form-util-profile-url(method='post')
|
||||
p This tool generates an URL for your Keyoxide profile page.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
extends ../templates/base.pug
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
section
|
||||
h1 QR Code
|
||||
form#form-util-qr(method='post')
|
||||
pre
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
extends ../templates/base.pug
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
section
|
||||
h1 QR Code
|
||||
form#form-util-qrfp(method='post')
|
||||
p
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
extends ../templates/base.pug
|
||||
|
||||
block content
|
||||
section.narrow
|
||||
section
|
||||
h1 Web Key Directory URL generator
|
||||
form#form-util-wkd(method='post')
|
||||
p
|
||||
|
|
|
|||
Loading…
Reference in a new issue