Implement static bootstrap homepage

This commit is contained in:
Tankred Hase 2016-06-11 01:06:14 +02:00
parent ab8d0e7496
commit 5087ad1f3a
9 changed files with 237 additions and 95 deletions

View File

@ -42,7 +42,7 @@ The HKP apis are not documented here. Please refer to the [HKP specification](ht
#### Accepted `search` parameters
* Email addresses
* V4 Fingerprints
* Key ID strings with at least 16 digits (64-bit long key ID)
* Key IDs with 16 digits (64-bit long key ID)
#### Accepted `op` parameters
* get

View File

@ -31,10 +31,6 @@ module.exports = {
name: process.env.SENDER_NAME,
email: process.env.SENDER_EMAIL
}
},
ui: {
title: process.env.UI_TITLE || 'OpenPGP Public Key Server'
}
};

View File

@ -20,6 +20,7 @@
"config": "^1.20.4",
"koa": "^1.2.0",
"koa-router": "^5.4.0",
"koa-static": "^2.0.0",
"mongodb": "^2.1.20",
"nodemailer": "^2.4.2",
"nodemailer-openpgp": "^1.0.2",

View File

@ -29,7 +29,6 @@ const PGP = require('./service/pgp');
const PublicKey = require('./service/public-key');
const HKP = require('./route/hkp');
const REST = require('./route/rest');
const home = require('./route/home');
let mongo, email, pgp, publicKey, hkp, rest;
@ -70,9 +69,6 @@ router.get('/user/:search', function *() {
yield rest.share(this);
});
// display homepage
router.get('/', home);
// Redirect all http traffic to https
app.use(function *(next) {
if (util.isTrue(config.server.httpsUpgrade) && util.checkHTTP(this)) {
@ -101,6 +97,9 @@ app.use(function *(next) {
app.use(router.routes());
app.use(router.allowedMethods());
// serve static files
app.use(require('koa-static')(__dirname + '/static'));
app.on('error', (error, ctx) => {
if (error.status) {
log.verbose('app', 'Request faild: %s, %s', error.status, error.message);

View File

@ -1,86 +0,0 @@
'use strict';
const util = require('../service/util');
const config = require('config');
module.exports = function () {
let hkpLink = util.hkpUrl(this);
this.body =
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>${config.ui.title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<h1>${config.ui.title}</h1>
<h2>Try it out</h2>
<ol>
<li>Upload your public OpenPGP key using the form below.</li>
<li>Check your inbox and click on the verification link inside the encrypted message.</li>
<li>You can delete all your data from the server at any time using the form below.</li>
<li>Configure this key server in your HKP compatible OpenPGP client using this url: <a href="${hkpLink}" target="_blank">${hkpLink}</a></li>
</ol>
<h2>Documentation and code</h2>
<p>Please refer to <a href="https://github.com/mailvelope/keyserver" target="_blank">the documentation</a> to learn more about the REST api.</p>
<p>License AGPL v3.0</p>
<hr>
<h2>
<a id="extract" name="extract">Find OpenPGP Key</a>
</h2>
<form action="/pks/lookup" method="get">
<p>
Get:
<input type="radio" name="op" value="get" checked="checked">
Index:
<input type="radio" name="op" value="index">
</p>
<p>
Search:
<input name="search" spellcheck="false" size="40" placeholder="Email address, long key ID or fingerprint">
</p>
<p>
<input type="reset" value="Reset">
<input type="submit" value="Search">
</p>
</form>
<hr>
<h2>
<a id="upload" name="submit">Upload a new OpenPGP Key</a>
</h2>
<form action="/pks/add" method="post">
<p>Paste ASCII-armored OpenPGP key block here:</p>
<p>
<textarea name="keytext" rows="20" cols="50"></textarea>
</p>
<p>
<input type="reset" value="Reset">
<input type="submit" value="Upload">
</p>
</form>
<hr>
<h2>
<a id="delete" name="extract">Delete your OpenPGP Key</a>
</h2>
<form action="/api/v1/removeKey" method="get">
<p>
Remove:
<input name="email" type="email" spellcheck="false" size="40" placeholder="Email address">
</p>
<p>
<input type="reset" value="Reset">
<input type="submit" value="Remove">
</p>
</form>
</body>
</html>
`;
this.set('Content-Type', 'text/html; charset=utf-8');
};

6
src/static/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,79 @@
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}

80
src/static/demo.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="An OpenPGP public key server that verifies users by sending an encrypted verification email.">
<meta name="author" content="Tankred Hase">
<title>Mailvelope Key Server</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation"><a href="index.html">Home</a></li>
<li role="presentation" class="active"><a href="#">Demo</a></li>
<li role="presentation"><a href="https://github.com/mailvelope/keyserver" target="_blank">GitHub</a></li>
</ul>
</nav>
<h3 class="text-muted">Mailvelope Key Server</h3>
</div>
<div class="row marketing">
<div class="col-lg-12">
<h2>OpenPGP key lookup</h2>
<form action="/pks/lookup" method="get">
<input type="radio" name="op" value="get" checked="checked" style="display: none">
<div class="input-group input-group-lg">
<input class="form-control" name="search" type="text" spellcheck="false" placeholder="Email address or Key ID e.g. 0x11A1A9C84B18732F" required>
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Search">
</span>
</div><!-- /input-group -->
</form>
<hr>
</div> <!-- /col-lg-12 -->
<div class="col-lg-12">
<h2>OpenPGP key upload</h2>
<form action="/pks/add" method="post">
<p><textarea class="form-control" name="keytext" rows="5" placeholder="Paste -----PGP PUBLIC KEY BLOCK----- here" required></textarea></p>
<input class="btn btn-primary btn-lg" type="submit" value="Upload">
</form>
<hr>
</div> <!-- /col-lg-12 -->
<div class="col-lg-12">
<h2>OpenPGP key removal</h2>
<form action="/api/v1/removeKey" method="get">
<div class="input-group input-group-lg">
<input class="form-control" name="email" type="email" spellcheck="false" placeholder="Email address" required>
<span class="input-group-btn">
<input class="btn btn-default" type="submit" value="Delete">
</span>
</div><!-- /input-group -->
</form>
<hr>
</div> <!-- /col-lg-12 -->
<div class="col-lg-12">
<h2>HKP and REST Apis</h2>
<p>The server offers a modern REST api over HTTPS with HSTS and public key pinning that can be integrated into any app architecture. It is also compatible to the OpenPGP HTTP Keyserver Protocol (HKP). Just copy and paste <a href="hkps://keys.mailvelope.com" target="_blank">hkps://keys.mailvelope.com</a> into your current OpenPGP plugin and go. <a href="https://github.com/mailvelope/keyserver/blob/master/README.md#api" target="_blank">Learn more</a>.</p>
</div>
</div> <!-- /row marketing -->
<footer class="footer">
<p>&copy; 2016 Mailvelope GmbH</p>
</footer>
</div> <!-- /container -->
</body>
</html>

67
src/static/index.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="An OpenPGP public key server that verifies users by sending an encrypted verification email.">
<meta name="author" content="Tankred Hase">
<title>Mailvelope Key Server</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="demo.html">Demo</a></li>
<li role="presentation"><a href="https://github.com/mailvelope/keyserver" target="_blank">GitHub</a></li>
</ul>
</nav>
<h3 class="text-muted">Mailvelope Key Server</h3>
</div>
<div class="jumbotron">
<h1>Secure. Easy.</h1>
<p class="lead">The Mailvelope OpenPGP public key server is the first of its kind. It allows automatic public key lookup to make email privacy <strong>just as painless as modern messengers</strong>.</p>
<p><a class="btn btn-lg btn-success" href="demo.html" role="button">Try it now</a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Privacy made Easy</h4>
<p>Automatic key lookup in OpenPGP mail user agents makes reading and writing encrypted email just as painless as modern messenengers.</p>
<h4>No Web of Trust</h4>
<p>No more key signing parties or publishing your social network online. You can even delete your public key at anytime. <a href="https://github.com/mailvelope/keyserver/blob/master/README.md#why-not-use-web-of-trust" target="_blank">Learn more</a>.</p>
<h4>Secure REST Api</h4>
<p>The server offers a modern REST api over HTTPS with HSTS and public key pinning that can be integrated into any app architecture. <a href="https://github.com/mailvelope/keyserver/blob/master/README.md#rest-api" target="_blank">Learn more</a>.</p>
</div>
<div class="col-lg-6">
<h4>Verify Yourself</h4>
<p>The server verifies email address ownership as well as private key ownership by sending an encrypted verification email.</p>
<h4>Completely Open</h4>
<p>The code is licensed under the AGPL v3.0 which means you are free to host your own key directory under your domain. <a href="https://github.com/mailvelope/keyserver/blob/master/README.md#development" target="_blank">Learn more</a>.</p>
<h4>HKP Compatible</h4>
<p>No need to update your current OpenPGP plugin. Just copy and paste <a href="hkps://keys.mailvelope.com" target="_blank">hkps://keys.mailvelope.com</a> into your settings and go. <a href="https://github.com/mailvelope/keyserver/blob/master/README.md#hkp-api" target="_blank">Learn more</a>.</p>
</div>
</div>
<footer class="footer">
<p>&copy; 2016 Mailvelope GmbH</p>
</footer>
</div> <!-- /container -->
</body>
</html>