Browse Source

make Prettier™

master
AJ ONeal 5 years ago
parent
commit
513fb992c9
  1. 4
      .prettierrc
  2. 15
      README.md
  3. 778
      app/index.html
  4. 6227
      app/js/bluecrypt-acme.js
  5. 1111
      app/js/greenlock.js
  6. 285
      app/styles/main.css
  7. 250
      index.html
  8. 71
      js/app.js
  9. 516
      legal.html
  10. 137
      styles/main.css

4
.prettierrc

@ -0,0 +1,4 @@
{
"trailingComma": "none",
"useTabs": true
}

15
README.md

@ -1,10 +1,8 @@
Greenlock™ in your Browser # Greenlock™ in your Browser
=========================
Taking greenlock™ (Let's Encrypt v2 / ACME client) where it's never been before: Your browser! Taking greenlock™ (Let's Encrypt v2 / ACME client) where it's never been before: Your browser!
Official Site # Official Site
=============
This app is available at <https://greenlock.domains>. This app is available at <https://greenlock.domains>.
@ -14,14 +12,12 @@ If it doesn't, please open an issue to let us know why.
We'd much rather improve the app than have a hundred different versions running in the wild. We'd much rather improve the app than have a hundred different versions running in the wild.
However, in keeping to our values we've released the source for others to inspect, improve, and modify. However, in keeping to our values we've released the source for others to inspect, improve, and modify.
Trademark Notice # Trademark Notice
================
Greenlock&trade; is our trademark. If you do host your own copy of this app, Greenlock&trade; is our trademark. If you do host your own copy of this app,
please do provide attribution, but please also use your branding. please do provide attribution, but please also use your branding.
Install # Install
=======
```bash ```bash
git clone ssh://gitea@git.coolaj86.com:22042/coolaj86/greenlock.html.git git clone ssh://gitea@git.coolaj86.com:22042/coolaj86/greenlock.html.git
@ -30,8 +26,7 @@ pushd greenlock.html/
popd popd
``` ```
Usage # Usage
=====
Simply host from your webserver. Simply host from your webserver.

778
app/index.html

@ -1,262 +1,403 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>Greenlock&trade;</title> <title>Greenlock&trade;</title>
<meta property="og:image" content="https://greenlock.domains/img/greenlock-mark-400x400.png" /> <meta
<style> property="og:image"
@font-face { content="https://greenlock.domains/img/greenlock-mark-400x400.png"
font-family: 'Source Sans Pro'; />
font-style: normal; <style>
font-display: block; @font-face {
font-weight: 400; font-family: "Source Sans Pro";
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'); font-style: normal;
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-display: block;
} font-weight: 400;
@font-face { src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
font-family: 'Source Sans Pro'; url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format("woff2");
font-style: normal; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
font-weight: 700; U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
font-display: block; U+2212, U+2215, U+FEFF, U+FFFD;
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; @font-face {
} font-family: "Source Sans Pro";
@font-face { font-style: normal;
font-family: 'Source Code Pro'; font-weight: 700;
font-style: normal; font-display: block;
font-weight: 400; src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2'); url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.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; format("woff2");
} unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
</style> 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 Code Pro";
font-style: normal;
font-weight: 400;
src: local("Source Code Pro"), local("SourceCodePro-Regular"),
url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.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"> <link href="styles/main.css" rel="stylesheet" />
<link rel="preload" href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous"> <link
<link rel="preload" href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous"> rel="preload"
href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2"
as="font"
crossorigin="anonymous"
/>
<link
rel="preload"
href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2"
as="font"
crossorigin="anonymous"
/>
<link rel="preload" href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous"> <link
<link rel="preload" href="./js/bluecrypt-acme.js" as="script"> rel="preload"
<link rel="preload" href="./js/greenlock.js" as="script"> href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2"
as="font"
crossorigin="anonymous"
/>
<link rel="preload" href="./js/bluecrypt-acme.js" as="script" />
<link rel="preload" href="./js/greenlock.js" as="script" />
</head>
<body hidden>
<!-- let's define our SVG that we will reuse -->
</head> <svg
<body hidden> xmlns="http://www.w3.org/2000/svg"
<!-- let's define our SVG that we will reuse --> width="0"
height="0"
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24"> viewbox="0 0 24 24"
<defs> >
<g id="svg-check"> <defs>
<path fill="none" d="M0 0h24v24H0z"/> <g id="svg-check">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/> <path fill="none" d="M0 0h24v24H0z" />
</g> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
<g id="svg-checked"> </g>
<path d="M0 0h24v24H0z" fill="none"/> <g id="svg-checked">
<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> <path d="M0 0h24v24H0z" fill="none" />
</g> <path
<g id="svg-unchecked"> d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/> />
<path d="M0 0h24v24H0z" fill="none"/> </g>
</g> <g id="svg-unchecked">
<g id="svg-download"> <path
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
<path d="M0 0h24v24H0z" fill="none"/> />
</g> <path d="M0 0h24v24H0z" fill="none" />
</defs> </g>
</svg> <g id="svg-download">
<div class="column-container wide"> <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
<div class="header-row column-row"> <path d="M0 0h24v24H0z" fill="none" />
<div id="js-progress-bar" class="progress-bar"> </g>
<div class="progress-bar-step"> </defs>
<div class="circle"> </svg>
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <div class="column-container wide">
<use xlink:href="#svg-check"></use> <div class="header-row column-row">
</svg> <div id="js-progress-bar" class="progress-bar">
</div> <div class="progress-bar-step">
<div class="progress-step-label"><div>Details</div></div> <div class="circle">
</div> <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="progress-bar-step">
<div class="circle"> <div class="circle">
<svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <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> <use xlink:href="#svg-check"></use>
</svg> </svg>
</div> </div>
<div class="progress-step-label"><div>Done</div></div> <div class="progress-step-label"><div>Done</div></div>
</div> </div>
--> -->
</div> </div>
<div class="greenlock-logo-badge"><img src="./img/greenlock-mark-400x400.png"></div> <div class="greenlock-logo-badge">
<div class="greenlock-name">Greenlock</div> <img src="./img/greenlock-mark-400x400.png" />
</div> </div>
<div class="column-row"> <div class="greenlock-name">Greenlock</div>
<form class="js-acme-form js-acme-form-domains"> </div>
<h1><label>What's your domain?</label></h1> <div class="column-row">
<h4>Certificates are valid for 90 days. Renewal is free :)</h4> <form class="js-acme-form js-acme-form-domains">
<input class="js-acme-domains" type="text" placeholder="example.com,*.example.com" required> <h1><label>What's your domain?</label></h1>
<br> <h4>Certificates are valid for 90 days. Renewal is free :)</h4>
<button type="submit">Next</button> <input
class="js-acme-domains"
type="text"
placeholder="example.com,*.example.com"
required
/>
<br />
<button type="submit">Next</button>
<br> <br />
<br> <br />
<br> <br />
<label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="v02" checked required> <label
Production</label> ><input
<label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="staging-v02" required> class="js-acme-api-type"
Testing</label> name="acme-api-type"
<br> type="radio"
<input class="js-acme-directory-url" type="url" placeholder="ACME directory url"> value="v02"
</form> 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 --> <!-- Step 2 Create Account -->
<form class="js-acme-form js-acme-form-account"> <form class="js-acme-form js-acme-form-account">
<h1><label>What's your email?</label></h1> <h1><label>What's your email?</label></h1>
<input class="js-acme-account-email acme-account-email" type="email" placeholder="john@doe.family" required> <input
<div class="checkbox-array"> class="js-acme-account-email acme-account-email"
<label> type="email"
<input class="js-acme-account-tos" type="checkbox" required> placeholder="john@doe.family"
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> required
<use xlink:href="#svg-checked"></use> />
</svg> <div class="checkbox-array">
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <label>
<use xlink:href="#svg-unchecked"></use> <input class="js-acme-account-tos" type="checkbox" required />
</svg> <svg
Agree to &nbsp<a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>? class="icon-checked-box"
</label> xmlns="http://www.w3.org/2000/svg"
<label> viewbox="0 0 24 24"
<input class="js-greenlock-account-tos" type="checkbox" required> >
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <use xlink:href="#svg-checked"></use>
<use xlink:href="#svg-checked"></use> </svg>
</svg> <svg
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> class="icon-unchecked-box"
<use xlink:href="#svg-unchecked"></use> xmlns="http://www.w3.org/2000/svg"
</svg> viewbox="0 0 24 24"
Agree to &nbsp<a class="js-gl-tos" target="_blank" href="/legal/#terms">Greenlock&trade; Terms of Service</a>? >
</label> <use xlink:href="#svg-unchecked"></use>
</div> </svg>
<!-- Agree to &nbsp;<a class="js-acme-tos-url" target="acme-tos"
>Let's Encrypt&trade; Terms of Service</a
>?
</label>
<label>
<input
class="js-greenlock-account-tos"
type="checkbox"
required
/>
<svg
class="icon-checked-box"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
>
<use xlink:href="#svg-checked"></use>
</svg>
<svg
class="icon-unchecked-box"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
>
<use xlink:href="#svg-unchecked"></use>
</svg>
Agree to &nbsp<a
class="js-gl-tos"
target="_blank"
href="/legal/#terms"
>Greenlock&trade; Terms of Service</a
>?
</label>
</div>
<!--
<a href="#">advanced (use existing account)</a> <a href="#">advanced (use existing account)</a>
<br> <br>
<br> <br>
--> -->
<button class="button-next js-account-next" type="submit">Next</button> <button class="button-next js-account-next" type="submit">
<div class="email-usage"> Next
Why do we need your email? </button>
We link your SSL certificates to the email you use so that you'll <div class="email-usage">
be notified before the certificate expires and so you can manage Why do we need your email? We link your SSL certificates to the
your certificates in the future. email you use so that you'll be notified before the certificate
</div> expires and so you can manage your certificates in the future.
</form> </div>
</form>
<!-- Step 3 Set Challanges --> <!-- Step 3 Set Challanges -->
<form class="js-acme-form js-acme-form-challenges"> <form class="js-acme-form js-acme-form-challenges">
<h1>Let's verify your domain</h1>
<div class="js-acme-challenges">
<div class="tabbed-selector">
<label>
<input
class="js-acme-challenge-type"
name="acme-challenge-type"
type="radio"
value="http-01"
checked
required
/>
File Upload
<div></div>
</label>
<label>
<input
class="js-acme-challenge-type"
name="acme-challenge-type"
type="radio"
value="dns-01"
required
/>
DNS Record
<div></div>
</label>
</div>
<div>
<div class="js-acme-verification-http-01">
<h3>Upload each file</h3>
<div class="js-acme-http">
<div class="http-verification-info file-preview">
<div class="paper-fold"></div>
<div>
<div class="file-ver-info-header">FILENAME</div>
<pre class="js-acme-ver-file-location">...loading</pre>
</div>
<hr />
<div>
<div class="file-ver-info-header">CONTENTS</div>
<pre class="js-acme-ver-content">...loading</pre>
</div>
<div class="download-file">
<svg
class="mdicon icon-download"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
>
<use xlink:href="#svg-download"></use>
</svg>
<a
class="js-download-verify-link"
href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
download="hello.txt"
target="_blank"
>
Download
</a>
</div>
<hr />
<div>
<div class="file-ver-info-header">LOCATION</div>
<pre class="js-acme-ver-uri">..loading</pre>
</div>
</div>
<br />
</div>
</div>
<div class="js-acme-verification-dns-01">
<h3>Set each DNS Record</h3>
<div class="js-acme-dns">
<div class="acme-ver-dns-label">TXT Host</div>
<div class="js-acme-ver-txt-host">loading...</div>
<div class="acme-ver-dns-label">TXT Value</div>
<div class="js-acme-ver-txt-value">loading...</div>
<br />
</div>
<p>
<strong>Warning</strong>: You should wait at least 30 seconds
after setting DNS records before continuing.
</p>
<p>
<strong>Google DNS Users</strong>: You may need to wait up to
5 minutes.
</p>
</div>
</div>
<h1>Let's verify your domain</h1> <div class="js-acme-wildcard-challenges">
<div class="js-acme-challenges"> <div class="js-acme-verification-wildcard">
<div class="tabbed-selector"> <h3>Set each DNS Record (for wildcards)</h3>
<label> <div class="js-acme-wildcard">
<input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required> <div class="acme-ver-dns-label">TXT Host</div>
File Upload <div class="js-acme-ver-txt-host">loading...</div>
<div></div> <div class="acme-ver-dns-label">TXT Value</div>
</label> <div class="js-acme-ver-txt-value">loading...</div>
<label> <br />
<input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required> </div>
DNS Record <p>
<div></div> <strong>Warning</strong>: You should wait at least 30 seconds
</label> after setting DNS records before continuing.
</div> </p>
<div> <p>
<div class="js-acme-verification-http-01"> <strong>Google DNS</strong>: You may need to wait up to 5
<h3>Upload each file</h3> minutes.
<div class="js-acme-http"> </p>
<div class="http-verification-info file-preview"> </div>
<div class="paper-fold"></div> </div>
<div> </div>
<div class="file-ver-info-header">FILENAME</div>
<pre class="js-acme-ver-file-location">...loading</pre>
</div>
<hr>
<div>
<div class="file-ver-info-header">CONTENTS</div>
<pre class="js-acme-ver-content">...loading</pre>
</div>
<div class="download-file">
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<use xlink:href="#svg-download"></use>
</svg>
<a class="js-download-verify-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="hello.txt" target="_blank">
Download
</a>
</div>
<hr>
<div>
<div class="file-ver-info-header">LOCATION</div>
<pre class="js-acme-ver-uri">..loading</pre>
</div>
</div>
<br>
</div>
</div>
<div class="js-acme-verification-dns-01">
<h3>Set each DNS Record</h3>
<div class="js-acme-dns">
<div class="acme-ver-dns-label">TXT Host</div>
<div class="js-acme-ver-txt-host">loading...</div>
<div class="acme-ver-dns-label">TXT Value</div>
<div class="js-acme-ver-txt-value">loading...</div>
<br>
</div>
<p><strong>Warning</strong>:
You should wait at least 30 seconds after setting DNS records before continuing.</p>
<p><strong>Google DNS Users</strong>:
You may need to wait up to 5 minutes.</p>
</div>
</div>
<div class="js-acme-wildcard-challenges"> <button class="button-next" type="submit">Next</button>
<div class="js-acme-verification-wildcard"> </form>
<h3>Set each DNS Record (for wildcards)</h3>
<div class="js-acme-wildcard">
<div class="acme-ver-dns-label">TXT Host</div>
<div class="js-acme-ver-txt-host">loading...</div>
<div class="acme-ver-dns-label">TXT Value</div>
<div class="js-acme-ver-txt-value">loading...</div>
<br>
</div>
<p><strong>Warning</strong>:
You should wait at least 30 seconds after setting DNS records before continuing.</p>
<p><strong>Google DNS</strong>:
You may need to wait up to 5 minutes.</p>
</div>
</div>
</div>
<button class="button-next" type="submit">Next</button> <!-- Step 4 Process Challanges -->
</form> <form class="js-acme-form js-acme-form-poll">
Verifying Domains... (give us 5 seconds or so...)
<div class="js-challenge-responses" hidden>
Checking
<span class="js-challenge-response-altname">&nbsp;</span>
using <span class="js-challenge-response-type">&nbsp;</span> :
<span class="js-challenge-response-status">&nbsp;</span>
</div>
<!-- Step 4 Process Challanges --> <!--
<form class="js-acme-form js-acme-form-poll">
Verifying Domains... (give us 5 seconds or so...)
<div class="js-challenge-responses" hidden>
Checking
<span class="js-challenge-response-altname">&nbsp;</span>
using <span class="js-challenge-response-type">&nbsp;</span>
: <span class="js-challenge-response-status">&nbsp;</span>
</div>
<!--
<table class="js-acme-table-verifying"> <table class="js-acme-table-verifying">
<thead> <thead>
<tr> <tr>
@ -278,42 +419,58 @@
<button type="submit">Next</button> <button type="submit">Next</button>
--> -->
</form> </form>
<!-- Step 5 Get Certs --> <!-- Step 5 Get Certs -->
<form class="js-acme-form js-acme-form-download"> <form class="js-acme-form js-acme-form-download">
<div class="cert-download-container"> <div class="cert-download-container">
<h2><label>privkey.pem</label></h2> <h2><label>privkey.pem</label></h2>
<div class="acme-result-privkey file-preview"> <div class="acme-result-privkey file-preview">
<div class="paper-fold"></div> <div class="paper-fold"></div>
<pre id="js-privkey"> <pre id="js-privkey"></pre>
</pre> </div>
</div> <div class="download-file">
<div class="download-file"> <svg
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> class="mdicon icon-download"
<use xlink:href="#svg-download"></use> xmlns="http://www.w3.org/2000/svg"
</svg> viewbox="0 0 24 24"
<a id="js-download-privkey-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="privkey.pem" target="_blank"> >
Download <use xlink:href="#svg-download"></use>
</a> </svg>
</div> <a
<h2><label>fullchain.pem</label></h2> id="js-download-privkey-link"
<div class="acme-result-fullchain file-preview"> href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
<div class="paper-fold"></div> download="privkey.pem"
<pre id="js-fullchain"> target="_blank"
</pre> >
</div> Download
<div class="download-file"> </a>
<svg class="mdicon icon-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> </div>
<use xlink:href="#svg-download"></use> <h2><label>fullchain.pem</label></h2>
</svg> <div class="acme-result-fullchain file-preview">
<a id="js-download-fullchain-link" href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4=" download="fullchain.pem" target="_blank"> <div class="paper-fold"></div>
Download <pre id="js-fullchain"></pre>
</a> </div>
</div> <div class="download-file">
<div> <svg
<h3>node.js https server example</h3> class="mdicon icon-download"
<pre><code> 'use strict'; xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24"
>
<use xlink:href="#svg-download"></use>
</svg>
<a
id="js-download-fullchain-link"
href="data:text/octet-stream;base64,SGVsbG8gV29ybGQuLi4="
download="fullchain.pem"
target="_blank"
>
Download
</a>
</div>
<div>
<h3>node.js https server example</h3>
<pre><code> 'use strict';
var https = require('https'); var https = require('https');
var server = https.createServer({ var server = https.createServer({
@ -325,9 +482,9 @@
console.log('Listening on', this.address()); console.log('Listening on', this.address());
}) })
</code></pre> </code></pre>
</div> </div>
<!-- <!--
TODO TODO
<label>cert.pem</label> <label>cert.pem</label>
<textarea class="js-cert">-</textarea> <textarea class="js-cert">-</textarea>
@ -340,39 +497,60 @@
<a href="#">Advanced (copy and paste)</a> <a href="#">Advanced (copy and paste)</a>
<br> <br>
<button type="submit">Start Over</button> <button type="submit">Start Over</button>
--> --></div>
</form> </form>
</div>
<div><small><center> <div>
<div> <small
A <a href="https://rootprojects.org/" target="_blank">Root</a> Project ><center>
| <a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">View Source</a> (git) <div>
| <a href="https://rootprojects.org/legal/#terms" target="_blank">Terms of Service</a> A
| <a href="https://rootprojects.org/legal/#privacy" target="_blank">Privacy Policy</a> <a href="https://rootprojects.org/" target="_blank">Root</a>
</div> Project |
<!-- or <a
href="https://git.coolaj86.com/coolaj86/greenlock.html"
target="_blank"
>View Source</a
>
(git) |
<a href="https://rootprojects.org/legal/#terms" target="_blank"
>Terms of Service</a
>
|
<a
href="https://rootprojects.org/legal/#privacy"
target="_blank"
>Privacy Policy</a
>
</div>
<!-- or
<pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre> <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): Or view the live site code (same as live-site branch):
<pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre> <pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
--> -->
</center></small></div> </center></small
<br> >
</div>
<br />
<script src="./js/bluecrypt-acme.js"></script> <script src="./js/bluecrypt-acme.js"></script>
<script src="./js/greenlock.js"></script> <script src="./js/greenlock.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script> <script
<script> async
window.dataLayer = window.dataLayer || []; src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"
function gtag(){dataLayer.push(arguments);} ></script>
gtag('js', new Date()); <script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag('config', 'UA-118745161-2'); gtag("config", "UA-118745161-2");
</script> </script>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

6227
app/js/bluecrypt-acme.js

File diff suppressed because it is too large

1111
app/js/greenlock.js

File diff suppressed because it is too large

285
app/styles/main.css

@ -1,263 +1,270 @@
body { body {
font-size: 18px; font-size: 18px;
font-family: Source Sans Pro, sans-serif; font-family: Source Sans Pro, sans-serif;
margin: 0; margin: 0;
line-height: 1.33; line-height: 1.33;
color: #1a1a1a; color: #1a1a1a;
} }
h1 { h1 {
text-align: center; text-align: center;
font-size: 1.77777778em; font-size: 1.77777778em;
} }
a { a {
color: #1a1a1a; color: #1a1a1a;
} }
input[type=email], input[type=text] { input[type="email"],
font-size: 1em; input[type="text"] {
padding: 0.444444444em 0.888889em; font-size: 1em;
width: 100%; padding: 0.444444444em 0.888889em;
border: solid 1px #d9d9d9; width: 100%;
border-radius: 2px; border: solid 1px #d9d9d9;
border-radius: 2px;
} }
pre { pre {
margin: 0; margin: 0;
font-family: Source Code Pro, monospace; font-family: Source Code Pro, monospace;
} }
.column-row { .column-row {
width: 22.222222em; width: 22.222222em;
} }
.column-container { .column-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.progress-bar { .progress-bar {
height: 0; height: 0;
border: solid 1px #5bc17f; border: solid 1px #5bc17f;
background-color: #5bc17f; background-color: #5bc17f;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 22em; width: 22em;
margin: 1.388888889em auto; margin: 1.388888889em auto;
} }
.greenlock-logo-badge > img { .greenlock-logo-badge > img {
width: 100%; width: 100%;
} }
.greenlock-logo-badge { .greenlock-logo-badge {
display: inline-block; display: inline-block;
border: solid 1px #d9d9d9; border: solid 1px #d9d9d9;
border-radius: 500px; border-radius: 500px;
width: 5.333333333em; width: 5.333333333em;
height: 5.333333333em; height: 5.333333333em;
margin-top: 4.277777778em; margin-top: 4.277777778em;
} }
.header-row { .header-row {
text-align: center; text-align: center;
} }
.progress-bar-step { .progress-bar-step {
position: relative; position: relative;
margin: -0.722222222em -0.166666667em; margin: -0.722222222em -0.166666667em;
display: inline-block; display: inline-block;
background-color: white; background-color: white;
/* border-radius: 100%; */ /* border-radius: 100%; */
padding: 0 0.111111em; padding: 0 0.111111em;
} }
.progress-bar-step > .circle { .progress-bar-step > .circle {
content: ""; content: "";
display: inline-block; display: inline-block;
border: solid 0.111111111em #5bc17f; border: solid 0.111111111em #5bc17f;
width: 0.888888889em; width: 0.888888889em;
height: 0.888888889em; height: 0.888888889em;
border-radius: 100%; border-radius: 100%;
background: white; background: white;
} }
.progress-step-label { .progress-step-label {
text-align: center; text-align: center;
position: absolute; position: absolute;
left: 50%; left: 50%;
=: block font-size: ; top: 139%;
top: 139%; font-size: 0.722222222em;
font-size: 0.722222222em; white-space: nowrap;
white-space: nowrap;
} }
.progress-step-label > div { .progress-step-label > div {
position: relative; position: relative;
right: 50%; right: 50%;
} }
.greenlock-name { .greenlock-name {
color: #808080; color: #808080;
} }
.file-preview { .file-preview {
background: #f7f7f7; background: #f7f7f7;
position: relative; position: relative;
font-size: 0.833333333em; font-size: 0.833333333em;
padding: 1.6em 2.9333em 1.6em 1.6em; padding: 1.6em 2.9333em 1.6em 1.6em;
} }
.js-progress-step-complete > .circle, .js-progress-step-started > .circle { .js-progress-step-complete > .circle,
background-color: #5bc17f; .js-progress-step-started > .circle {
background-color: #5bc17f;
} }
.progress-bar-step.js-progress-step-complete svg { .progress-bar-step.js-progress-step-complete svg {
fill: white; fill: white;
/* stroke: none; */ /* stroke: none; */
display: initial; display: initial;
} }
.checkbox-array { .checkbox-array {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em 0; padding: 1em 0;
} }
.checkbox-array input[type=checkbox] { .checkbox-array input[type="checkbox"] {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
} }
.checkbox-array input[type=checkbox] ~ .icon-checked-box { .checkbox-array input[type="checkbox"] ~ .icon-checked-box {
display: none; display: none;
} }
.checkbox-array input[type=checkbox] ~ .icon-unchecked-box { .checkbox-array input[type="checkbox"] ~ .icon-unchecked-box {
display: initial; display: initial;
} }
.checkbox-array input[type=checkbox]:checked ~ .icon-checked-box { .checkbox-array input[type="checkbox"]:checked ~ .icon-checked-box {
display: initial; display: initial;
} }
.checkbox-array input[type=checkbox]:checked ~ .icon-unchecked-box { .checkbox-array input[type="checkbox"]:checked ~ .icon-unchecked-box {
display: none; display: none;
} }
.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box { .checkbox-array .icon-checked-box,
width: 1.333333333em; .checkbox-array .icon-unchecked-box {
fill: #5bc17f; width: 1.333333333em;
margin-right: 0.666666667em; fill: #5bc17f;
margin-right: 0.666666667em;
} }
.checkbox-array label { .checkbox-array label {
display: flex; display: flex;
height: 1.333333333em; height: 1.333333333em;
font-size: 0.833333333em; font-size: 0.833333333em;
margin: 0.4em 0; margin: 0.4em 0;
} }
.checkbox-array input[type=checkbox]:focus ~ .icon-checked-box, .checkbox-array input[type=checkbox]:focus ~ .icon-unchecked-box { .checkbox-array input[type="checkbox"]:focus ~ .icon-checked-box,
background: #5bc17f52; .checkbox-array input[type="checkbox"]:focus ~ .icon-unchecked-box {
background: #5bc17f52;
} }
.email-usage { .email-usage {
color: #666666; color: #666666;
font-size: 0.833333333em; font-size: 0.833333333em;
margin: 2em 0; margin: 2em 0;
} }
.button-next { .button-next {
width: 100%; width: 100%;
background-color: #5bc17f; background-color: #5bc17f;
border: none; border: none;
font-size: 1em; font-size: 1em;
color: white; color: white;
padding: 0.44444em; padding: 0.44444em;
margin: 1em 0; margin: 1em 0;
} }
.tabbed-selector label { .tabbed-selector label {
width: 50%; width: 50%;
padding: 0.5em 0; padding: 0.5em 0;
} }
.tabbed-selector { .tabbed-selector {
display: flex; display: flex;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.tabbed-selector input[type=radio] { .tabbed-selector input[type="radio"] {
display: none; display: none;
} }
.download-file svg { .download-file svg {
fill: #5bc17f; fill: #5bc17f;
width: 1.333333333em; width: 1.333333333em;
} }
.download-file a { .download-file a {
color: #5bc17f; color: #5bc17f;
} }
.mdicon { .mdicon {
position: relative; position: relative;
top: 0.4em; top: 0.4em;
} }
.http-verification-info { .http-verification-info {
padding-right: 6.933333333em; padding-right: 6.933333333em;
} }
.paper-fold { .paper-fold {
position: absolute; position: absolute;
width: 2em; width: 2em;
height: 2em; height: 2em;
border-left: solid #d9d9d9 1px; border-left: solid #d9d9d9 1px;
border-bottom: solid #d9d9d9 1px; border-bottom: solid #d9d9d9 1px;
right: 0; right: 0;
top: 0; top: 0;
background: linear-gradient(45deg, #f7f7f7 0%,#f7f7f7 50%,#ffffff 50%,#ffffff 100%); background: linear-gradient(
45deg,
#f7f7f7 0%,
#f7f7f7 50%,
#ffffff 50%,
#ffffff 100%
);
} }
.file-ver-info-header { .file-ver-info-header {
color: #808080; color: #808080;
} }
.http-verification-info hr { .http-verification-info hr {
border: none; border: none;
border-bottom: solid 1px #d9d9d9; border-bottom: solid 1px #d9d9d9;
} }
.acme-ver-uri { .acme-ver-uri {
word-break: break-all; word-break: break-all;
margin: auto; margin: auto;
} }
.acme-ver-dns-label { .acme-ver-dns-label {
margin: 1.777777778em 0 0.444444444em 0; margin: 1.777777778em 0 0.444444444em 0;
border-bottom: solid 1px #d9d9d9; border-bottom: solid 1px #d9d9d9;
font-weight: bold; font-weight: bold;
padding-bottom: 0.166666667em; padding-bottom: 0.166666667em;
} }
.tabbed-selector input[type="radio"]:checked ~ div { .tabbed-selector input[type="radio"]:checked ~ div {
border: solid 1px #5bc17f; border: solid 1px #5bc17f;
background-color: #5bc17f; background-color: #5bc17f;
} }
.file-preview pre { .file-preview pre {
white-space: pre-line; white-space: pre-line;
word-break: break-all; word-break: break-all;
} }
.cert-download-container { .cert-download-container {
margin: 0 -31%; margin: 0 -31%;
} }

250
index.html

@ -1,99 +1,171 @@
<html> <html>
<head> <head>
<title>Greenlock&trade;</title> <title>Greenlock&trade;</title>
<meta property="og:image" content="https://greenlock.domains/img/greenlock-mark-400x400.png" /> <meta
<link href="styles/main.css" rel="stylesheet"> property="og:image"
<style> content="https://greenlock.domains/img/greenlock-mark-400x400.png"
@font-face { />
font-family: 'Source Sans Pro'; <link href="styles/main.css" rel="stylesheet" />
font-style: normal; <style>
font-display: block; @font-face {
font-weight: 400; font-family: "Source Sans Pro";
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'); font-style: normal;
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-display: block;
} font-weight: 400;
@font-face { src: local("Source Sans Pro Regular"), local("SourceSansPro-Regular"),
font-family: 'Source Sans Pro'; url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format("woff2");
font-style: normal; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
font-weight: 700; U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
font-display: block; U+2212, U+2215, U+FEFF, U+FFFD;
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; @font-face {
} font-family: "Source Sans Pro";
</style> font-style: normal;
<link rel="preload" href="./app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous"> font-weight: 700;
<link rel="preload" href="./app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous"> font-display: block;
<link rel="prefetch" href="./app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous"> src: local("Source Sans Pro Bold"), local("SourceSansPro-Bold"),
<link rel="prefetch" href="./app/js/bluecrypt-acme.js" as="script"> url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2)
<link rel="prefetch" href="./app/js/greenlock.js" as="script"> format("woff2");
<link rel="prefetch" href="./js/app.js" as="script"> unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
</head> U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
<body class="js-app-ready"> U+2212, U+2215, U+FEFF, U+FFFD;
<script> }
document.querySelector('body').classList.remove("js-app-ready"); </style>
</script> <link
<div class="column-container wide"> rel="preload"
href="./app/fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2"
as="font"
crossorigin="anonymous"
/>
<link
rel="preload"
href="./app/fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2"
as="font"
crossorigin="anonymous"
/>
<link
rel="prefetch"
href="./app/fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2"
as="font"
crossorigin="anonymous"
/>
<link rel="prefetch" href="./app/js/bluecrypt-acme.js" as="script" />
<link rel="prefetch" href="./app/js/greenlock.js" as="script" />
<link rel="prefetch" href="./js/app.js" as="script" />
</head>
<body class="js-app-ready">
<script>
document.querySelector("body").classList.remove("js-app-ready");
</script>
<div class="column-container wide">
<div class="column-row">
<img alt="Greenlock logo" src="img/greenlock-146.png" />
</div>
<div class="column-row">
<h1>Get the green lock for your website</h1>
</div>
<div class="column-row">
<div class="js-javascript-warning">
Greenlock will process the CSR in the browser and request the
certificates directly from letsencrypt.org. Please enable Javascript
before continuing.
</div>
<form id="js-acme-form" action="./app/" method="GET">
<div class="domain-psuedo-input">
<span class="secure-green">Secure</span> |
<span class="secure-green">https:</span>//<input
aria-label="domains to secure"
id="acme-domains"
type="text"
name="acme-domains"
placeholder="Your domain name"
required
/>
</div>
<button type="submit">Go</button>
<div class="domain-subtext">
Domain, subdomain, or wildcard domain
</div>
<div class="column-row"> <div class="acme-advanced-fields">
<img src="img/greenlock-146.png"> <label
</div> ><input
<div class="column-row"> name="acme-api-type"
<h1>Get the green lock for your website</h1> type="radio"
</div> value="v02"
<div class="column-row"> checked
<div class="js-javascript-warning"> required
Greenlock will process the CSR in the browser and request the certificates directly from letsencrypt.org. />
Please enable Javascript before continuing. Production
</div> </label>
<form id="js-acme-form" action="./app/" method="GET"> <label
<div class="domain-psuedo-input"> ><input
<span class="secure-green">Secure</span> | <span class="secure-green">https:</span>//<input aria-label="domains to secure" id="acme-domains" type="text" name="acme-domains" placeholder="Your domain name" required> name="acme-api-type"
</div> type="radio"
<button type="submit">Go</button> value="staging-v02"
<div class="domain-subtext">Domain, subdomain, or wildcard domain</div> required
/>
<div class="acme-advanced-fields"> Testing</label
<label><input name="acme-api-type" type="radio" value="v02" checked required> >
Production <input
</label> id="js-acme-api-url"
<label><input name="acme-api-type" type="radio" value="staging-v02" required> type="url"
Testing</label> placeholder="ACME directory url"
<input id="js-acme-api-url" type="url" placeholder="ACME directory url"> />
<br> <br />
API Compatibility: Let's Encrypt v2 / ACME draft 15 API Compatibility: Let's Encrypt v2 / ACME draft 15
<div> <div>
<br> <br />
A <a href="https://rootprojects.org/" target="_blank">Root</a> Project A
| <a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank">View Source</a> (git) <a href="https://rootprojects.org/" target="_blank">Root</a>
| <a href="https://rootprojects.org/legal/#terms" target="_blank">Terms of Service</a> Project |
| <a href="https://rootprojects.org/legal/#privacy" target="_blank">Privacy Policy</a> <a
</div> href="https://git.coolaj86.com/coolaj86/greenlock.html"
</div> target="_blank"
</form> >View Source</a
</div> >
<div class="column-row"> (git) |
<div class="why-you-need"> <a href="https://rootprojects.org/legal/#terms" target="_blank"
<h2>Why you need HTTPS</h2> >Terms of Service</a
SSL Certificates are required for secure login, accepting payments, and for browsers like Google Chrome to stop showing security warnings to your users. >
</div> |
</div> <a href="https://rootprojects.org/legal/#privacy" target="_blank"
<!-- or >Privacy Policy</a
>
</div>
</div>
</form>
</div>
<div class="column-row">
<div class="why-you-need">
<h2>Why you need HTTPS</h2>
SSL Certificates are required for secure login, accepting payments,
and for browsers like Google Chrome to stop showing security warnings
to your users.
</div>
</div>
<!-- or
<pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre> <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): Or view the live site code (same as live-site branch):
<pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre> <pre><code>wget https://greenlock.domains --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
--> -->
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script> <script
<script> async
window.dataLayer = window.dataLayer || []; src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"
function gtag(){dataLayer.push(arguments);} ></script>
gtag('js', new Date()); <script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag('config', 'UA-118745161-2'); gtag("config", "UA-118745161-2");
</script> </script>
</div> </div>
</body> </body>
</html> </html>

71
js/app.js

@ -1,32 +1,39 @@
(function () { (function() {
'use strict'; "use strict";
var $qs = function (s) { return window.document.querySelector(s); }; var $qs = function(s) {
return window.document.querySelector(s);
$qs('.js-javascript-warning').hidden = true; };
var apiUrl = 'https://acme-{{env}}.api.letsencrypt.org/directory'; $qs(".js-javascript-warning").hidden = true;
function updateApiType() { var apiUrl = "https://acme-{{env}}.api.letsencrypt.org/directory";
var formData = new FormData($qs("#js-acme-form"));
function updateApiType() {
console.log('ACME api type radio:'); var formData = new FormData($qs("#js-acme-form"));
var value = formData.get("acme-api-type"); console.log("ACME api type radio:");
$qs('#js-acme-api-url').value = apiUrl.replace(/{{env}}/g, value);
} var value = formData.get("acme-api-type");
$qs("#js-acme-api-url").value = apiUrl.replace(/{{env}}/g, value);
$qs('#js-acme-form').addEventListener('change', updateApiType); }
//$qs('#js-acme-form').addEventListener('submit', prettyRedirect);
$qs("#js-acme-form").addEventListener("change", updateApiType);
updateApiType(); //$qs('#js-acme-form').addEventListener('submit', prettyRedirect);
try {
document.fonts.load().then(function() { updateApiType();
$qs('body').classList.add("js-app-ready"); try {
}).catch(function(e) { document.fonts
$qs('body').classList.add("js-app-ready"); .load()
}); .then(function() {
} catch(e) { $qs("body").classList.add("js-app-ready");
setTimeout(function() {$qs('body').classList.add("js-app-ready");}, 200); })
} .catch(function(e) {
}()); $qs("body").classList.add("js-app-ready");
});
} catch (e) {
setTimeout(function() {
$qs("body").classList.add("js-app-ready");
}, 200);
}
})();

516
legal.html

@ -1,201 +1,315 @@
<h1>Greetings!</h1> <!DOCTYPE html>
<html>
<p>I, AJ ONeal, am not a big fan of legalize, but I am a fan of communicating <head>
clearly. I hope that this accomplish both defining some legal boundaries as well <title>Root Legal</title>
as communicating in a friendly and clear way, at least to the degree that suits </head>
our needs for the current stage of our products and services. <body>
<h1>Greetings!</h1>
<p>This is important because it is our intent to create sustainable open source
projects, which means that we do want to create brand value, grow community, <p>
and, eventually, be able to work full time on creating more great software and services. I, AJ ONeal, am not a big fan of legalize, but I am a fan of communicating
clearly. I hope that this accomplish both defining some legal boundaries
<p>If you'd like to contact me, especially if you feel that I (or we) have made as well as communicating in a friendly and clear way, at least to the
a mistake in how we operate, please do so: degree that suits our needs for the current stage of our products and
services.
<ul> </p>
<li><a href="mailto:coolaj86@gmail.com">coolaj86@gmail.com</a></li>
<li><a href="tel:+13852360466">+1 (385) 236-0466</a></li> <p>
<li><a href="http://coolaj86.com">https://coolaj86.com</a></li> This is important because it is our intent to create sustainable open
</ul> source projects, which means that we do want to create brand value, grow
community, and, eventually, be able to work full time on creating more
<h1>Contents</h1> great software and services.
<p>Here's what I've worked through so far: </p>
<ul> <p>
<li><a href="#greenlock">Greelock Domains</a></li> If you'd like to contact me, especially if you feel that I (or we) have
<li><a href="#licensing">Licensing</a></li> made a mistake in how we operate, please do so:
<li><a href="#terms">Terms of Service</a></li> </p>
<li><a href="#trademark">Trademark</a></li>
<li><a href="#privacy">Privacy</a></li> <ul>
</ul> <li><a href="mailto:coolaj86@gmail.com">coolaj86@gmail.com</a></li>
<li><a href="tel:+13852360466">+1 (385) 236-0466</a></li>
<h1 id="greenlock">Greenlock Domains&trade;</h1> <li><a href="http://coolaj86.com">https://coolaj86.com</a></li>
</ul>
<p>Greenlock Domains is a service provided by
<em><a href="https://coolaj86.com">AJ</a>, Brian, <h1>Contents</h1>
<a href="https://jshaver.net">John</a>, &amp; Josh</em> <p>Here's what I've worked through so far:</p>
(collectively <a href="https://therootcompany.com">Root</a>)
for automated TLS, SSL, and HTTPS. <ul>
<li><a href="#greenlock">Greelock Domains</a></li>
<ul> <li><a href="#licensing">Licensing</a></li>
<li><a href="https://greenlock.domains" target="_blank"> <li><a href="#terms">Terms of Service</a></li>
https://greenlock.domains</a></li> <li><a href="#trademark">Trademark</a></li>
<li><a href="#privacy">Privacy</a></li>
<li><a href="https://git.coolaj86.com/coolaj86/greenlock-express.js" target="_blank"> </ul>
https://git.coolaj86.com/coolaj86/greenlock-express.js</a></li>
<h1 id="greenlock">Greenlock Domains&trade;</h1>
<li><a href="https://git.coolaj86.com/coolaj86/greenlock.js" target="_blank">
https://git.coolaj86.com/coolaj86/greenlock.js</a></li> <p>
Greenlock Domains is a service provided by
<li><a href="https://git.coolaj86.com/coolaj86/greenlock.html" target="_blank"> <em
https://git.coolaj86.com/coolaj86/greenlock.html</a></li> ><a href="https://coolaj86.com">AJ</a>, Brian,
</ul> <a href="https://jshaver.net">John</a>, &amp; Josh</em
>
<p>Greenlock Domains is an important product / service combo to us (collectively <a href="https://therootcompany.com">Root</a>) for automated
because it's a huge milestone on the path to a more decentralized web. TLS, SSL, and HTTPS.
We believe in <em>ownership</em> and <em>control</em> and we're </p>
building a <a href="https://therootcompany.com">Home Server</a>
because we envision a world in which everyone is empowered to make <ul>
the choice of whether to rent or own their stuff. <li>
<a href="https://greenlock.domains" target="_blank">
<p>If we don't do this, well, with the way the cloud is headed, https://greenlock.domains</a
renting may be the only option in the future. >
</li>
<p>We need <em>Root</em> because we want ownership.
<li>
<p>If at any time you feel that any of our messaging or practices <a
are in conflict with our mission or these values, please let us know. href="https://git.coolaj86.com/coolaj86/greenlock-express.js"
target="_blank"
<h1 id="licensing">Licensing</h1> >
https://git.coolaj86.com/coolaj86/greenlock-express.js</a
<p>Each of our products comes with its own LICENSE file and the license(s) >
may alse be in some sort of manifest file (such as package.json). </li>
<p>We typically use the MIT and Apache-2.0 licenses for libraries that we <li>
actively want others to copy, modify, use and redistribute. <a
href="https://git.coolaj86.com/coolaj86/greenlock.js"
<p>We typically use ISC and MPL-2.0 with products for which we're a little more target="_blank"
concerned about branding or about which we have particularly strong opinions. >
https://git.coolaj86.com/coolaj86/greenlock.js</a
<p>Although we do keep some of our software proprietary and we do use trademarks, >
because we believe in empowerment and choice we do our best to provide usable </li>
self-service forms of our products and services for personal use.
<li>
<p>If at any time you feel that our Licensing is in conflict with our mission or values, <a
please let us know. href="https://git.coolaj86.com/coolaj86/greenlock.html"
target="_blank"
<h1 id="terms">Terms of Service</h1> >
https://git.coolaj86.com/coolaj86/greenlock.html</a
<p>We want to make the world a better place. >
Everyone has a different definition of what "a better place" means, </li>
so the purpose of our terms is to rule out some things that </ul>
we think makes the world (and particularly our world) a worse place:
<p>
<p>You agree that you will use the Greenlock&trade; service, code, libraries, Greenlock Domains is an important product / service combo to us because
documentation, etc (provided by <a href="#greenlock">us</a>) it's a huge milestone on the path to a more decentralized web. We believe
primarily for securing network connections for yourself, your customers, in
on your and your customer's devices on internets, intranets, and... other nets. <em>ownership</em> and <em>control</em> and we're building a
<a href="https://therootcompany.com">Home Server</a> because we envision a
<p>You agree that you will take reasonable measures to keep up-to-date with security world in which everyone is empowered to make the choice of whether to rent
releases. or own their stuff.
</p>
<p>You agree to not use our products or services in a way that would cause unusual
or undue burden on our servers or services, our partners servers or services, or our <p>
customers servers or services, or in a way that harms or misrepresents the reputation If we don't do this, well, with the way the cloud is headed, renting may
or brand value (including causing brand confusion) of the aforementioned parties be the only option in the future.
(or really anybody). </p>
<p>This is not to say that you can't publicly have a negative opinion, but don't <p>We need <em>Root</em> because we want ownership.</p>
bite the hand that feeds and don't be vicious or misrepresentative.
<p>
<p>If you have a use case that may be in violation of these terms (particularly If at any time you feel that any of our messaging or practices are in
the part about undue burden), but you feel contributes to making the world a better conflict with our mission or these values, please let us know.
place, we're here to help (assuming it also aligns with our values). </p>
Although it may not be appropriate to use our services, but perhaps we can help
you with a solution based on our no-cost, low-cost or open source products. <h1 id="licensing">Licensing</h1>
<p>If at any time you feel that our Terms of Service are in conflict with our <p>
mission or values, please let us know. Each of our products comes with its own LICENSE file and the license(s)
may alse be in some sort of manifest file (such as package.json).
<h1 id="trademark">Trademark</h1> </p>
<p>"Greenlock" and the "green G lock" mark are Trademarks of <p>
<a href="https://coolaj86.com" target="_blank">AJ ONeal</a>. We typically use the MIT and Apache-2.0 licenses for libraries that we
actively want others to copy, modify, use and redistribute.
<p>We'll be coming out with a brand guide as to how you should use </p>
the marks. In the meantime: don't change the proportions, colors
(excepting the case of greyscale and black and white). <p>
We typically use ISC and MPL-2.0 with products for which we're a little
<p>It is appropriate to use the trademark in a way that promotes the more concerned about branding or about which we have particularly strong
brand with proper attribution, linking to the official project repositories, etc. opinions.
</p>
<p>It is appropriate use the name greenlock in a plugin for Greenlock&trade;,
as long as it is clear that it is a community contribution. <p>
Although we do keep some of our software proprietary and we do use
<p>If you create a "hard" fork of our code or any products or services, trademarks, because we believe in empowerment and choice we do our best to
you should give your fork its own name, and not use ours. provide usable self-service forms of our products and services for
That sound, we gladly welcome your suggestiosn and pull requests. personal use.
</p>
<p>If you mirror our code you should make it clear that it is a mirror
and link to the official repository. <p>
in association with usand the disclose that you use Greenlock If at any time you feel that our Licensing is in conflict with our mission
or values, please let us know.
<p>If at any time you feel that our Trademark policies are in conflict with our </p>
values, please let us know.
<h1 id="terms">Terms of Service</h1>
<h1 id="privacy">Privacy Policy</h1>
<p>
<p>What we collect and (more importantly) <em>Why</em>: We want to make the world a better place. Everyone has a different
definition of what "a better place" means, so the purpose of our terms is
<p><strong>Name</strong>: to rule out some things that we think makes the world (and particularly
<p>In the cases that we collect your name, it's because we want to know how to address you. our world) a worse place:
All four of us want to be personable if and when we reach out. </p>
<p><strong>Email</strong>: <p>
<p>There are three main purposes for which we may use your email address: You agree that you will use the Greenlock&trade; service, code, libraries,
documentation, etc (provided by <a href="#greenlock">us</a>) primarily for
<p>1. A one-time outreach to ask if you were able to do what you intended to do. securing network connections for yourself, your customers, on your and
We want to make a great product. Although open source projects traditionally have your customer's devices on internets, intranets, and... other nets.
a <em>reactive</em> approach to communication (i.e. you file a bug and wait for a response), </p>
we believe that creating sustainable open source requires a <em>proactive</em> approach.
<p>
<p>2. Security and legal notifications. It's important that we have a way to contact you You agree that you will take reasonable measures to keep up-to-date with
if we've made a mistake or discover a mistake that needs to be addressed. This security releases.
may include vulnerabilities as well as mandatory upgrades (such as when a </p>
significant change to the Let's Encrypt API is made). Making sure that our products
work and are secure aligns with our values and contributes to our brand identity. <p>
You agree to not use our products or services in a way that would cause
<p>3. Opt-in updates. Many of you want to know when we have significant feature updates unusual or undue burden on our servers or services, our partners servers
or when we have something that we believe is really valuable to share. We've created an or services, or our customers servers or services, or in a way that harms
opt-in avenue for that. And you can always opt-out as well. or misrepresents the reputation or brand value (including causing brand
confusion) of the aforementioned parties (or really anybody).
<p><strong>Telemetry</strong>: </p>
<p>We believe that the current open source model needs improvement - it often
relies heavily on large centralized platforms which aggregate a lot of user <p>
information for the platform without appropriately targeting the relationship This is not to say that you can't publicly have a negative opinion, but
between authors and users of projcts (i.e. npm, github, etc). We believe that don't bite the hand that feeds and don't be vicious or misrepresentative.
making open source sustainable means a greater focus on empowering authors </p>
and users. We've learned from other projects (Caddy, Heroku, and others) which
use telemetry as part of a proactive approach to open source and we believe that <p>
it can be a great avenue for us to be proactive as well. If you have a use case that may be in violation of these terms
(particularly the part about undue burden), but you feel contributes to
<p>We may use telemetry about operating system, browser, node version, code version, making the world a better place, we're here to help (assuming it also
and other system-level information to better understand how we can serve our users (you) aligns with our values). Although it may not be appropriate to use our
and proactively solve problems that we might not otherwise hear about. For example, if services, but perhaps we can help you with a solution based on our
we see many page visits in a certain browser (or installs with a new version of node), no-cost, low-cost or open source products.
but few successful registrations, we know that something is wrong. </p>
<p><strong>Other</strong>: <p>
<p>We also use Google Analytics on our web sites for basic functionality. If at any time you feel that our Terms of Service are in conflict with our
Other than that, nothing else comes to mind right now. mission or values, please let us know.
As we consider what we will do in the future, it will be measured against our mission and values. </p>
We never want to come across as spammy or forceful. We want to do things that help us build
our brand, acknowledge our customers; things that are proactive, and that <h1 id="trademark">Trademark</h1>
promote sustainable source.
<p>
<p>If at any time you feel that our Privacy policy is in conflict with our mission or values, "Greenlock" and the "green G lock" mark are Trademarks of
please let us know. <a href="https://coolaj86.com" target="_blank">AJ ONeal</a>.
</p>
<br>
<br> <p>
<p>Copyright 2018 AJ ONeal We'll be coming out with a brand guide as to how you should use the marks.
In the meantime: don't change the proportions, colors (excepting the case
of greyscale and black and white).
</p>
<p>
It is appropriate to use the trademark in a way that promotes the brand
with proper attribution, linking to the official project repositories,
etc.
</p>
<p>
It is appropriate use the name greenlock in a plugin for Greenlock&trade;,
as long as it is clear that it is a community contribution.
</p>
<p>
If you create a "hard" fork of our code or any products or services, you
should give your fork its own name, and not use ours. That sound, we
gladly welcome your suggestiosn and pull requests.
</p>
<p>
If you mirror our code you should make it clear that it is a mirror and
link to the official repository. in association with usand the disclose
that you use Greenlock
</p>
<p>
If at any time you feel that our Trademark policies are in conflict with
our values, please let us know.
</p>
<h1 id="privacy">Privacy Policy</h1>
<p>What we collect and (more importantly) <em>Why</em>:</p>
<p><strong>Name</strong>:</p>
<p>
In the cases that we collect your name, it's because we want to know how
to address you. All four of us want to be personable if and when we reach
out.
</p>
<p><strong>Email</strong>:</p>
<p>
There are three main purposes for which we may use your email address:
</p>
<p>
1. A one-time outreach to ask if you were able to do what you intended to
do. We want to make a great product. Although open source projects
traditionally have a <em>reactive</em> approach to communication (i.e. you
file a bug and wait for a response), we believe that creating sustainable
open source requires a <em>proactive</em> approach.
</p>
<p>
2. Security and legal notifications. It's important that we have a way to
contact you if we've made a mistake or discover a mistake that needs to be
addressed. This may include vulnerabilities as well as mandatory upgrades
(such as when a significant change to the Let's Encrypt API is made).
Making sure that our products work and are secure aligns with our values
and contributes to our brand identity.
</p>
<p>
3. Opt-in updates. Many of you want to know when we have significant
feature updates or when we have something that we believe is really
valuable to share. We've created an opt-in avenue for that. And you can
always opt-out as well.
</p>
<p><strong>Telemetry</strong>:</p>
<p>
We believe that the current open source model needs improvement - it often
relies heavily on large centralized platforms which aggregate a lot of
user information for the platform without appropriately targeting the
relationship between authors and users of projcts (i.e. npm, github, etc).
We believe that making open source sustainable means a greater focus on
empowering authors and users. We've learned from other projects (Caddy,
Heroku, and others) which use telemetry as part of a proactive approach to
open source and we believe that it can be a great avenue for us to be
proactive as well.
</p>
<p>
We may use telemetry about operating system, browser, node version, code
version, and other system-level information to better understand how we
can serve our users (you) and proactively solve problems that we might not
otherwise hear about. For example, if we see many page visits in a certain
browser (or installs with a new version of node), but few successful
registrations, we know that something is wrong.
</p>
<p><strong>Other</strong>:</p>
<p>
We also use Google Analytics on our web sites for basic functionality.
Other than that, nothing else comes to mind right now. As we consider what
we will do in the future, it will be measured against our mission and
values. We never want to come across as spammy or forceful. We want to do
things that help us build our brand, acknowledge our customers; things
that are proactive, and that promote sustainable source.
</p>
<p>
If at any time you feel that our Privacy policy is in conflict with our
mission or values, please let us know.
</p>
<br />
<br />
<p>Copyright 2018 AJ ONeal</p>
</body>
</html>

137
styles/main.css

@ -1,115 +1,114 @@
.column-row { .column-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
align-items: center; align-items: center;
} }
body { body {
position: relative; position: relative;
margin-top: 5.777777778em; margin-top: 5.777777778em;
min-height: 36em; min-height: 36em;
font-size: 18px; font-size: 18px;
font-family: 'Source Sans Pro', sans-serif; font-family: "Source Sans Pro", sans-serif;
font-stretch: normal; font-stretch: normal;
line-height: 1.33; line-height: 1.33;
letter-spacing: -0.4px; letter-spacing: -0.4px;
color: #1a1a1a; color: #1a1a1a;
opacity: 0; opacity: 0;
} }
h1 { h1 {
font-size: 2.666666667em; font-size: 2.666666667em;
max-width: 8em; max-width: 8em;
text-align: center; text-align: center;
} }
input { input {
font-size: 1em; font-size: 1em;
padding: 0.444444444em; padding: 0.444444444em;
border: solid #d9d9d9 1px; border: solid #d9d9d9 1px;
border-radius: 2px; border-radius: 2px;
font-family: inherit; font-family: inherit;
} }
button { button {
padding: 0.444444444em 1.2em; padding: 0.444444444em 1.2em;
font-size: 1em; font-size: 1em;
background-color: #5bc17f; background-color: #5bc17f;
border: solid 1px #5bc17f; border: solid 1px #5bc17f;
border-radius: 2px; border-radius: 2px;
font-weight: normal; font-weight: normal;
font-stretch: normal; font-stretch: normal;
letter-spacing: -0.4px; letter-spacing: -0.4px;
font-family: inherit; font-family: inherit;
text-align: center; text-align: center;
color: white; color: white;
height: 40px; height: 40px;
line-height: 1.13; line-height: 1.13;
} }
.acme-advanced-fields { .acme-advanced-fields {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
padding: 1em; padding: 1em;
text-align: center; text-align: center;
} }
.domain-subtext { .domain-subtext {
font-size: 0.833333333em; font-size: 0.833333333em;
color: #666; color: #666;
text-align: center; text-align: center;
margin: 0.5em; margin: 0.5em;
} }
input#acme-domains:before { input#acme-domains:before {
content: "Secure | https://"; content: "Secure | https://";
} }
.domain-psuedo-input { .domain-psuedo-input {
display: inline-block; display: inline-block;
margin-right: .6666667em; margin-right: 0.6666667em;
border: solid #d9d9d9 1px; border: solid #d9d9d9 1px;
border-radius: 2px; border-radius: 2px;
padding: 0.44444444em; padding: 0.44444444em;
color: #d9d9d9; color: #d9d9d9;
} }
input#acme-domains { input#acme-domains {
border: none; border: none;
padding: 0; padding: 0;
padding-right: 0; padding-right: 0;
width: 17.2222222em; width: 17.2222222em;
color: #222; color: #222;
} }
input#acme-domains:focus { input#acme-domains:focus {
outline: none; outline: none;
} }
span.secure-green { span.secure-green {
color: #5bc17f; color: #5bc17f;
} }
.why-you-need { .why-you-need {
width: 26.555556em; width: 26.555556em;
} }
body.js-app-ready { body.js-app-ready {
transition: opacity 0.2s; transition: opacity 0.2s;
opacity: 1; opacity: 1;
} }
.acme-advanced-fields > * { .acme-advanced-fields > * {
margin: 0 0.5em; margin: 0 0.5em;
} }
.js-javascript-warning { .js-javascript-warning {
border: solid 1px red; border: solid 1px red;
background-color: #ffc0cb40; background-color: #ffc0cb40;
border-radius: 2px; border-radius: 2px;
margin: 0.6em; margin: 0.6em;
padding: 0.5em 1em; padding: 0.5em 1em;
width: 30em; width: 30em;
} }

Loading…
Cancel
Save