From 12dd211f7a8d05a0f51a2d792db9564960d55f96 Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Mon, 29 Mar 2021 17:08:48 +0200 Subject: [PATCH] Update pages --- static/styles.css | 25 ++++-- views/encrypt.pug | 22 ++++++ views/guides.pug | 132 ++++++++++++++++---------------- views/index.pug | 2 +- views/long-form-content.pug | 4 +- views/partials/footer.pug | 16 ++-- views/partials/key_selector.pug | 24 ++++++ views/profile.pug | 6 +- views/verify.pug | 25 ++++++ 9 files changed, 167 insertions(+), 89 deletions(-) create mode 100644 views/encrypt.pug create mode 100644 views/partials/key_selector.pug create mode 100644 views/verify.pug diff --git a/static/styles.css b/static/styles.css index 24308de..24daf1a 100644 --- a/static/styles.css +++ b/static/styles.css @@ -95,15 +95,11 @@ footer { max-width: 1440px; margin: 0 auto; } -section.long_form { +.narrow { width: 100%; max-width: 720px; margin: 0 auto; } -section.profile, .demo { - max-width: 720px; - margin: 0 auto; -} section.profile .card, .demo .card { background-color: transparent; border: 0; @@ -156,7 +152,7 @@ section.profile p, .demo p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - + } .card--small-profile a { display: block; @@ -358,6 +354,12 @@ section.profile p, .demo p { .buttons a:hover { background-color: #ccc; } +.modes { + display: none; +} +.modes.modes--visible { + display: block; +} h1 { font-size: 1.6em; @@ -476,6 +478,15 @@ textarea { form { margin: 0 0 5.6rem; } +form label { + margin: 0 8px 0 0; +} +form .modesContainer { + margin: 16px 0; +} +form .modesContainer input { + margin: 0 8px 0 0; +} form input[type="submit"] { display: block; width: 100%; @@ -491,4 +502,4 @@ form input[type="submit"] { form input[type="submit"]:hover { background-color: var(--blue-700); color: #fff; -} \ No newline at end of file +} diff --git a/views/encrypt.pug b/views/encrypt.pug new file mode 100644 index 0000000..61d3d5e --- /dev/null +++ b/views/encrypt.pug @@ -0,0 +1,22 @@ +extends templates/base.pug + +block js + script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8') + script(type='application/javascript' src='/static/doip.js' charset='utf-8') + script(type='application/javascript' src='/static/scripts.js' charset='utf-8') + +block content + section.narrow + noscript + p Keyoxide requires JavaScript to function. + + h1 Encrypt + form#form-encrypt(method='post') + h3 Recipient + label(for='modeSelect') Mode: + include partials/key_selector + + h3 Message + textarea#message(name='message') + p#result + input.bigBtn(type='submit' name='submit' value='ENCRYPT MESSAGE') diff --git a/views/guides.pug b/views/guides.pug index c03ce8f..a29fce4 100644 --- a/views/guides.pug +++ b/views/guides.pug @@ -1,71 +1,67 @@ extends templates/base.pug block content - h1 Guides - .hcards.hcards--guides.hcards--max-3 - .card.guides__section - h3 Using Keyoxide - p - a(href='/guides/verify') Verifying a signature - br - a(href='/guides/encrypt') Encrypting a message - br - a(href='/guides/proofs') Verifying identity proofs - br - a(href='/guides/contributing') Contributing to Keyoxide - br - a(href='/guides/self-hosting-keyoxide') Self-hosting Keyoxide - - .card.guides__section - h3 OpenPGP and identity proofs - p - a(href='/guides/openpgp-proofs') How OpenPGP identity proofs work - br - a(href='/guides/web-key-directory') Uploading keys using web key directory - br - a(href='/guides/signature-profiles') Using signature profiles - - .card.guides__section - h3 Adding proofs - p - a(href='/guides/devto') Dev.to - br - a(href='/guides/discourse') Discourse - br - a(href='/guides/dns') Domain / DNS - br - a(href='/guides/gitea') Gitea - br - a(href='/guides/github') GitHub - br - a(href='/guides/gitlab') GitLab - br - a(href='/guides/hackernews') Hackernews - br - a(href='/guides/lobsters') Lobste.rs - br - a(href='/guides/mastodon') Mastodon - br - a(href='/guides/owncast') Owncast - br - a(href='/guides/pleroma') Pleroma - br - a(href='/guides/reddit') Reddit - br - a(href='/guides/twitter') Twitter - br - a(href='/guides/xmpp') XMPP+OMEMO - - .card.guides__section - h3 Other services - p - a(href='/guides/feature-comparison-keybase') Feature comparison with Keybase - br - a(href='/guides/migrating-from-keybase') Migrating from Keybase - - .card.guides__section - h3 Managing proofs in GnuPG - p - a(href='/guides/managing-proofs-listing') Listing proofs - br - a(href='/guides/managing-proofs-deleting') Deleting proofs + section.narrow + h1 Guides + .card + h2 Using Keyoxide + p + a(href='/guides/verify') Verifying a signature + br + a(href='/guides/encrypt') Encrypting a message + br + a(href='/guides/proofs') Verifying identity proofs + br + a(href='/guides/contributing') Contributing to Keyoxide + br + a(href='/guides/self-hosting-keyoxide') Self-hosting Keyoxide + + h2 OpenPGP and identity proofs + p + a(href='/guides/openpgp-proofs') How OpenPGP identity proofs work + br + a(href='/guides/web-key-directory') Uploading keys using web key directory + br + a(href='/guides/signature-profiles') Using signature profiles + + h2 Adding proofs + p + a(href='/guides/devto') Dev.to + br + a(href='/guides/discourse') Discourse + br + a(href='/guides/dns') Domain / DNS + br + a(href='/guides/gitea') Gitea + br + a(href='/guides/github') GitHub + br + a(href='/guides/gitlab') GitLab + br + a(href='/guides/hackernews') Hackernews + br + a(href='/guides/lobsters') Lobste.rs + br + a(href='/guides/mastodon') Mastodon + br + a(href='/guides/owncast') Owncast + br + a(href='/guides/pleroma') Pleroma + br + a(href='/guides/reddit') Reddit + br + a(href='/guides/twitter') Twitter + br + a(href='/guides/xmpp') XMPP+OMEMO + + h2 Other services + p + a(href='/guides/feature-comparison-keybase') Feature comparison with Keybase + br + a(href='/guides/migrating-from-keybase') Migrating from Keybase + + h2 Managing proofs in GnuPG + p + a(href='/guides/managing-proofs-listing') Listing proofs + br + a(href='/guides/managing-proofs-deleting') Deleting proofs diff --git a/views/index.pug b/views/index.pug index 2b4c0b1..beb89ea 100644 --- a/views/index.pug +++ b/views/index.pug @@ -19,7 +19,7 @@ block content .card.card--small-profile-dummy - n++ - .demo + .demo.narrow .card.card--profile .claim .claim__main diff --git a/views/long-form-content.pug b/views/long-form-content.pug index 3fa851c..5668ef7 100644 --- a/views/long-form-content.pug +++ b/views/long-form-content.pug @@ -1,6 +1,6 @@ extends templates/base.pug block content - section.long_form + section.long_form.narrow h1= title - .card !{ content } \ No newline at end of file + .card !{ content } diff --git a/views/partials/footer.pug b/views/partials/footer.pug index 10341d1..a7474a6 100644 --- a/views/partials/footer.pug +++ b/views/partials/footer.pug @@ -7,20 +7,20 @@ footer br a(href="/") What is Keyoxide? br - a(href="/") Getting started + a(href="/getting-started") Getting started br - a(href="/") Guides + a(href="/guides") Guides br - a(href="/") FAQ - + a(href="/faq") FAQ + div h1 Keyoxide project - a(href="/") Keyoxide.org + a(href="https://keyoxide.org") Keyoxide.org br - a(href="/") Keyoxide on Fediverse + a(href="https://fosstodon.org/@keyoxide") Keyoxide on Fediverse br - a(href="/") Key to Identity Foundation - + a(href="https://keytoidentity.foundation") Key to Identity Foundation + div h1 Development a(href="/") Source code diff --git a/views/partials/key_selector.pug b/views/partials/key_selector.pug new file mode 100644 index 0000000..94213cf --- /dev/null +++ b/views/partials/key_selector.pug @@ -0,0 +1,24 @@ +select#modeSelect.modeSelect(name='modeSelect') + option(value='auto' selected=(mode == "auto" ? true : false)) Autodetect + option(value='wkd' selected=(mode == "wkd" ? true : false)) Web Key Directory + option(value='hkp' selected=(mode == "hkp" ? true : false)) Keyserver + option(value='plaintext' selected=(mode == "plaintext" ? true : false)) Plaintext + option(value='keybase' selected=(mode == "keybase" ? true : false)) Keybase + +.modesContainer + .modes.modes--auto(class=(mode == "auto" ? "modes--visible" : "")) + input#auto_input(type='text' name='auto_input' placeholder='Email / key id / fingerprint' value=(mode == "auto" ? input : "")) + + .modes.modes--wkd(class=(mode == "wkd" ? "modes--visible" : "")) + input#wkd_input(type='text' name='wkd_input' placeholder='name@domain.org' value=(mode == "wkd" ? input : "")) + + .modes.modes--hkp(class=(mode == "hkp" ? "modes--visible" : "")) + input#hkp_input(type='text' name='hkp_input' placeholder='Email / key id / fingerprint' value=(mode == "hkp" ? input : "")) + input#hkp_server(type='text' name='hkp_server' placeholder='https://keys.openpgp.org/ (default)') + + .modes.modes--plaintext(class=(mode == "plaintext" ? "modes--visible" : "")) + textarea#plaintext_input(name='plaintext_input') + + .modes.modes--keybase(class=(mode == "keybase" ? "modes--visible" : "")) + input#keybase_username(type='text' name='keybase_username' placeholder='username' value=(mode == "keybase" ? username : "")) + input#keybase_fingerprint(type='text' name='keybase_fingerprint' placeholder='fingerprint' value=(mode == "keybase" ? fingerprint : "")) diff --git a/views/profile.pug b/views/profile.pug index dbb84b7..c623e38 100644 --- a/views/profile.pug +++ b/views/profile.pug @@ -6,7 +6,7 @@ block js script(type='application/javascript' src='/static/scripts.js' charset='utf-8') block content - section.profile + section.profile.narrow noscript p Keyoxide requires JavaScript to function. span#profileUid(style='display: none;') #{uid} @@ -19,11 +19,11 @@ block content label(for="plaintext_input") Please enter the raw profile signature below and press "Generate profile". textarea#plaintext_input(name='plaintext_input') input(type='submit', name='submit', value='Generate profile') - + #profileHeader.card.card--profileHeader #profileProofs.card if (mode == 'sig') //- p Waiting for input… else - p Loading keys & verifying proofs… \ No newline at end of file + p Loading keys & verifying proofs… diff --git a/views/verify.pug b/views/verify.pug new file mode 100644 index 0000000..d50f8a9 --- /dev/null +++ b/views/verify.pug @@ -0,0 +1,25 @@ +extends templates/base.pug + +block js + script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8') + script(type='application/javascript' src='/static/doip.js' charset='utf-8') + script(type='application/javascript' src='/static/scripts.js' charset='utf-8') + +block content + section.narrow + noscript + p Keyoxide requires JavaScript to function. + + h1 Verify + form#form-verify(method='post') + h3 Signer + label(for='modeSelect') Mode: + include partials/key_selector + + h3 Signature + textarea#signature(name='signature') + + h3 Result + p#result + p#resultContent + input.bigBtn(type='submit' name='submit' value='VERIFY SIGNATURE')