< html >
< head >
< title > Greenlock™ < / title >
< meta property = "og:image" content = "https://greenlock.ppl.family/img/greenlock-mark-400x400.png" / >
< style >
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-display: block;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-display: block;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
< / style >
< link href = "styles/main.css" rel = "stylesheet" >
< / head >
< body hidden >
<!-- let's define our SVG that we will reuse -->
< svg xmlns = "http://www.w3.org/2000/svg" width = "0" height = "0" viewBox = "0 0 24 24" >
< defs >
< g id = "svg-check" >
< path fill = "none" d = "M0 0h24v24H0z" / >
< path d = "M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" / >
< / g >
< / defs >
< / svg >
< div class = "column-container wide" >
< div class = "column-row" >
< div id = "js-progress-bar" class = "progress-bar" >
< div class = "progress-bar-step" >
< div class = "circle" >
< svg display = "none" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" >
< use xlink:href = "#svg-check" > < / use >
< / svg >
< / div >
< div class = "progress-step-label" > < div > Details< / div > < / div >
< / div >
< div class = "progress-bar-step" >
< div class = "circle" >
< svg display = "none" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" >
< use xlink:href = "#svg-check" > < / use >
< / svg >
< / div >
< div class = "progress-step-label" > < div > Verify domain< / div > < / div >
< / div >
< div class = "progress-bar-step" >
< div class = "circle" >
< svg display = "none" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" >
< use xlink:href = "#svg-check" > < / use >
< / svg >
< / div >
< div class = "progress-step-label" > < div > Install certificates< / div > < / div >
< / div >
<!-- hide until the steps are all updated
< div class = "progress-bar-step" >
< div class = "circle" >
< svg display = "none" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" >
< use xlink:href = "#svg-check" > < / use >
< / svg >
< / div >
< div class = "progress-step-label" > < div > Done< / div > < / div >
< / div >
-->
< / div >
< div class = "greenlock-logo-badge" > < img src = "./img/greenlock-mark-400x400.png" > < / div >
< div class = "greenlock-name" > Greenlock< / div >
< / div >
< div class = "column-row" >
< form class = "js-acme-form js-acme-form-domains" >
< h1 > < label > What's your domain?< / label > < / h1 >
< h4 > Certificates are valid for 90 days. Renewal is free :)< / h4 >
< input class = "js-acme-domains" type = "text" placeholder = "example.com,*.example.com" required >
< br >
< button type = "submit" > Next< / button >
< br >
< br >
< br >
< label > < input class = "js-acme-api-type" name = "acme-api-type" type = "radio" value = "v02" checked required >
Production< / label >
< label > < input class = "js-acme-api-type" name = "acme-api-type" type = "radio" value = "staging-v02" required >
Testing< / label >
< br >
< input class = "js-acme-directory-url" type = "url" placeholder = "ACME directory url" >
< / form >
<!-- Step 2 Create Account -->
< form class = "js-acme-form js-acme-form-account" >
< h1 > < label > What's your email?< / label > < / h1 >
< input class = "js-acme-account-email" type = "email" placeholder = "john@doe.family" required >
< br >
< br >
< label > < input class = "js-acme-account-tos" type = "checkbox" required >
Agree to < a class = "js-acme-tos-url" target = "acme-tos" > Let's Encrypt™ Terms of Service< / a > ?< / label >
< br >
< br >
< label > < input class = "js-greenlock-account-tos" type = "checkbox" required >
Agree to < a class = "js-gl-tos" target = "_blank" href = "./legal.html" > Greenlock™ Terms of Service< / a > ?< / label >
< br >
< br >
<!--
< a href = "#" > advanced (use existing account)< / a >
< br >
< br >
-->
< button type = "submit" > Next< / button >
< / form >
<!-- Step 3 Set Challanges -->
< form class = "js-acme-form js-acme-form-challenges" >
< h1 > How will you validate your domain?< / h1 >
< br >
< label > < input class = "js-acme-challenge-type" name = "acme-challenge-type" type = "radio" value = "http-01" checked required >
File Upload to HTTP Web Server< / label >
< br >
< label > < input class = "js-acme-challenge-type" name = "acme-challenge-type" type = "radio" value = "dns-01" required >
TXT Records on DNS Name Server< / label >
< br >
< div class = "js-acme-challenges" >
< h2 > Verify Domains & Sub-Domains< / h2 >
< table class = "js-acme-table-http-01" >
< thead >
< tr >
< th > Hostname< / th >
< th > File Location< / th >
< th > File Contents< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > example.com< / td >
< td > .well-known/acme-challenge/xxx< / td >
< td > sec.ret< / td >
< / tr >
< / tbody >
< / table >
< table class = "js-acme-table-dns-01" >
< thead >
< tr >
< th > Hostname< / th >
< th > TXT Host< / th >
< th > TXT Value< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > example.com< / td >
< td > _acme-challenge.example.com< / td >
< td > 4A54< / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "js-acme-wildcard" >
< h2 > Verify Wildcard Domains< / h2 >
< table class = "js-acme-table-wildcard" >
< thead >
< tr >
< th > Hostname< / th >
< th > TXT Host< / th >
< th > TXT Value< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > example.com< / td >
< td > _acme-challenge.example.com< / td >
< td > 4A54< / td >
< / tr >
< / tbody >
< / table >
< / div >
< button type = "submit" > Next< / button >
< / form >
<!-- Step 4 Process Challanges -->
< form class = "js-acme-form js-acme-form-poll" >
Verifying Domains... (give us 5 seconds or so...)
<!--
< table class = "js-acme-table-verifying" >
< thead >
< tr >
< th > Hostname< / th >
< th > Type< / th >
< th > Pass< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > example.com< / td >
< td > http-01< / td >
< td > -< / td >
< / tr >
< / tbody >
< / table >
< a href = "#" > advanced (use existing keypair for domain)< / a >
< button type = "submit" > Next< / button >
-->
< / form >
<!-- Step 5 Get Certs -->
< form class = "js-acme-form js-acme-form-download" >
< div >
< h2 > < label > privkey.pem< / label > < / h2 >
< textarea cols = "80" rows = "10" class = "js-privkey" > -< / textarea >
< / div >
< div >
< h2 > < label > fullchain.pem< / label > < / h2 >
< textarea cols = "80" rows = "60" class = "js-fullchain" > -< / textarea >
< / div >
< div >
< h3 > node.js https server example< / h3 >
< pre > < code > 'use strict';
var https = require('https');
var server = https.createServer({
key: require('fs').readFileSync('./privkey.pem')
, cert: require('fs').readFileSync('./fullchain.pem')
}, function (req, res) {
res.end("Hello, World!");
}).listen(443, function () {
console.log('Listening on', this.address());
})
< / code > < / pre >
< / div >
<!--
TODO
< label > cert.pem< / label >
< textarea class = "js-cert" > -< / textarea >
< label > chain.pem< / label >
< textarea class = "js-chain" > -< / textarea >
< button type = "button" > Download SSL Certificates< / button >
< br >
< a href = "#" > Advanced (copy and paste)< / a >
< br >
< button type = "submit" > Start Over< / button >
-->
< / form >
< br >
< br >
< br >
< div > < small >
< h3 > < / h3 >
< a href = "https://git.coolaj86.com/coolaj86/greenlock.html" > View Source< / a > (git)
<!-- or
< pre > < code > git clone https://git.coolaj86.com/coolaj86/greenlock.html.git< / code > < / pre >
Or view the live site code (same as live-site branch):
< pre > < code > wget https://greenlock.ppl.family --mirror --convert-links --adjust-extension --page-requisites --no-parent< / code > < / pre >
-->
< / small > < / div >
< script src = "./js/bacme.js" > < / script >
< script src = "./js/app.js" > < / script >
< script src = "./js/pkijs.org/v1.3.33/common.js" > < / script >
< script src = "./js/pkijs.org/v1.3.33/asn1.js" > < / script >
< script src = "./js/pkijs.org/v1.3.33/x509_schema.js" > < / script >
< script src = "./js/pkijs.org/v1.3.33/x509_simpl.js" > < / script >
< script src = "./js/browser-csr/v1.0.0-alpha/csr.js" > < / script >
<!-- Global site tag (gtag.js) - Google Analytics -->
< script async src = "https://www.googletagmanager.com/gtag/js?id=UA-118745161-2" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-118745161-2');
< / script >
< / div >
< / div >
< / body >
< / html >