Let's Encrypt v2 (ACME draft 11) client for your browser. Companion to greenlock.js https://greenlock.domains
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <html>
  2. <head>
  3. <title>Greenlock&trade;</title>
  4. <meta property="og:image" content="https://greenlock.ppl.family/img/greenlock-mark-400x400.png" />
  5. <style>
  6. @font-face {
  7. font-family: 'Source Sans Pro';
  8. font-style: normal;
  9. font-display: block;
  10. font-weight: 400;
  11. src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
  12. 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;
  13. }
  14. @font-face {
  15. font-family: 'Source Sans Pro';
  16. font-style: normal;
  17. font-weight: 700;
  18. font-display: block;
  19. src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  20. 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;
  21. }
  22. </style>
  23. <link href="styles/main.css" rel="stylesheet">
  24. </head>
  25. <body hidden>
  26. <!-- let's define our SVG that we will reuse -->
  27. <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24">
  28. <defs>
  29. <g id="svg-check">
  30. <path fill="none" d="M0 0h24v24H0z"/>
  31. <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
  32. </g>
  33. </defs>
  34. </svg>
  35. <div class="column-container wide">
  36. <div class="column-row">
  37. <div id="js-progress-bar" class="progress-bar">
  38. <div class="progress-bar-step">
  39. <div class="circle">
  40. <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  41. <use xlink:href="#svg-check"></use>
  42. </svg>
  43. </div>
  44. <div class="progress-step-label"><div>Details</div></div>
  45. </div>
  46. <div class="progress-bar-step">
  47. <div class="circle">
  48. <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  49. <use xlink:href="#svg-check"></use>
  50. </svg>
  51. </div>
  52. <div class="progress-step-label"><div>Verify domain</div></div>
  53. </div>
  54. <div class="progress-bar-step">
  55. <div class="circle">
  56. <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  57. <use xlink:href="#svg-check"></use>
  58. </svg>
  59. </div>
  60. <div class="progress-step-label"><div>Install certificates</div></div>
  61. </div>
  62. <!-- hide until the steps are all updated
  63. <div class="progress-bar-step">
  64. <div class="circle">
  65. <svg display="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  66. <use xlink:href="#svg-check"></use>
  67. </svg>
  68. </div>
  69. <div class="progress-step-label"><div>Done</div></div>
  70. </div>
  71. -->
  72. </div>
  73. <div class="greenlock-logo-badge"><img src="./img/greenlock-mark-400x400.png"></div>
  74. <div class="greenlock-name">Greenlock</div>
  75. </div>
  76. <div class="column-row">
  77. <form class="js-acme-form js-acme-form-domains">
  78. <h1><label>What's your domain?</label></h1>
  79. <h4>Certificates are valid for 90 days. Renewal is free :)</h4>
  80. <input class="js-acme-domains" type="text" placeholder="example.com,*.example.com" required>
  81. <br>
  82. <button type="submit">Next</button>
  83. <br>
  84. <br>
  85. <br>
  86. <label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="v02" checked required>
  87. Production</label>
  88. <label><input class="js-acme-api-type" name="acme-api-type" type="radio" value="staging-v02" required>
  89. Testing</label>
  90. <br>
  91. <input class="js-acme-directory-url" type="url" placeholder="ACME directory url">
  92. </form>
  93. <!-- Step 2 Create Account -->
  94. <form class="js-acme-form js-acme-form-account">
  95. <h1><label>What's your email?</label></h1>
  96. <input class="js-acme-account-email" type="email" placeholder="john@doe.family" required>
  97. <br>
  98. <br>
  99. <label><input class="js-acme-account-tos" type="checkbox" required>
  100. Agree to <a class="js-acme-tos-url" target="acme-tos">Let's Encrypt&trade; Terms of Service</a>?</label>
  101. <br>
  102. <br>
  103. <label><input class="js-greenlock-account-tos" type="checkbox" required>
  104. Agree to <a class="js-gl-tos" target="_blank" href="./legal.html">Greenlock&trade; Terms of Service</a>?</label>
  105. <br>
  106. <br>
  107. <!--
  108. <a href="#">advanced (use existing account)</a>
  109. <br>
  110. <br>
  111. -->
  112. <button type="submit">Next</button>
  113. </form>
  114. <!-- Step 3 Set Challanges -->
  115. <form class="js-acme-form js-acme-form-challenges">
  116. <h1>How will you validate your domain?</h1>
  117. <br>
  118. <label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="http-01" checked required>
  119. File Upload to HTTP Web Server</label>
  120. <br>
  121. <label><input class="js-acme-challenge-type" name="acme-challenge-type" type="radio" value="dns-01" required>
  122. TXT Records on DNS Name Server</label>
  123. <br>
  124. <div class="js-acme-challenges">
  125. <h2>Verify Domains &amp; Sub-Domains</h2>
  126. <table class="js-acme-table-http-01">
  127. <thead>
  128. <tr>
  129. <th>Hostname</th>
  130. <th>File Location</th>
  131. <th>File Contents</th>
  132. </tr>
  133. </thead>
  134. <tbody>
  135. <tr>
  136. <td>example.com</td>
  137. <td>.well-known/acme-challenge/xxx</td>
  138. <td>sec.ret</td>
  139. </tr>
  140. </tbody>
  141. </table>
  142. <table class="js-acme-table-dns-01">
  143. <thead>
  144. <tr>
  145. <th>Hostname</th>
  146. <th>TXT Host</th>
  147. <th>TXT Value</th>
  148. </tr>
  149. </thead>
  150. <tbody>
  151. <tr>
  152. <td>example.com</td>
  153. <td>_acme-challenge.example.com</td>
  154. <td>4A54</td>
  155. </tr>
  156. </tbody>
  157. </table>
  158. </div>
  159. <div class="js-acme-wildcard">
  160. <h2>Verify Wildcard Domains</h2>
  161. <table class="js-acme-table-wildcard">
  162. <thead>
  163. <tr>
  164. <th>Hostname</th>
  165. <th>TXT Host</th>
  166. <th>TXT Value</th>
  167. </tr>
  168. </thead>
  169. <tbody>
  170. <tr>
  171. <td>example.com</td>
  172. <td>_acme-challenge.example.com</td>
  173. <td>4A54</td>
  174. </tr>
  175. </tbody>
  176. </table>
  177. </div>
  178. <button type="submit">Next</button>
  179. </form>
  180. <!-- Step 4 Process Challanges -->
  181. <form class="js-acme-form js-acme-form-poll">
  182. Verifying Domains... (give us 5 seconds or so...)
  183. <!--
  184. <table class="js-acme-table-verifying">
  185. <thead>
  186. <tr>
  187. <th>Hostname</th>
  188. <th>Type</th>
  189. <th>Pass</th>
  190. </tr>
  191. </thead>
  192. <tbody>
  193. <tr>
  194. <td>example.com</td>
  195. <td>http-01</td>
  196. <td>-</td>
  197. </tr>
  198. </tbody>
  199. </table>
  200. <a href="#">advanced (use existing keypair for domain)</a>
  201. <button type="submit">Next</button>
  202. -->
  203. </form>
  204. <!-- Step 5 Get Certs -->
  205. <form class="js-acme-form js-acme-form-download">
  206. <div>
  207. <h2><label>privkey.pem</label></h2>
  208. <textarea cols="80" rows="10" class="js-privkey">-</textarea>
  209. </div>
  210. <div>
  211. <h2><label>fullchain.pem</label></h2>
  212. <textarea cols="80" rows="60" class="js-fullchain">-</textarea>
  213. </div>
  214. <div>
  215. <h3>node.js https server example</h3>
  216. <pre><code>'use strict';
  217. var https = require('https');
  218. var server = https.createServer({
  219. key: require('fs').readFileSync('./privkey.pem')
  220. , cert: require('fs').readFileSync('./fullchain.pem')
  221. }, function (req, res) {
  222. res.end("Hello, World!");
  223. }).listen(443, function () {
  224. console.log('Listening on', this.address());
  225. })
  226. </code></pre>
  227. </div>
  228. <!--
  229. TODO
  230. <label>cert.pem</label>
  231. <textarea class="js-cert">-</textarea>
  232. <label>chain.pem</label>
  233. <textarea class="js-chain">-</textarea>
  234. <button type="button">Download SSL Certificates</button>
  235. <br>
  236. <a href="#">Advanced (copy and paste)</a>
  237. <br>
  238. <button type="submit">Start Over</button>
  239. -->
  240. </form>
  241. <br>
  242. <br>
  243. <br>
  244. <div><small>
  245. <h3></h3>
  246. <a href="https://git.coolaj86.com/coolaj86/greenlock.html">View Source</a> (git)
  247. <!-- or
  248. <pre><code>git clone https://git.coolaj86.com/coolaj86/greenlock.html.git</code></pre>
  249. Or view the live site code (same as live-site branch):
  250. <pre><code>wget https://greenlock.ppl.family --mirror --convert-links --adjust-extension --page-requisites --no-parent</code></pre>
  251. -->
  252. </small></div>
  253. <script src="./js/bacme.js"></script>
  254. <script src="./js/app.js"></script>
  255. <script src="./js/pkijs.org/v1.3.33/common.js"></script>
  256. <script src="./js/pkijs.org/v1.3.33/asn1.js"></script>
  257. <script src="./js/pkijs.org/v1.3.33/x509_schema.js"></script>
  258. <script src="./js/pkijs.org/v1.3.33/x509_simpl.js"></script>
  259. <script src="./js/browser-csr/v1.0.0-alpha/csr.js"></script>
  260. <!-- Global site tag (gtag.js) - Google Analytics -->
  261. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118745161-2"></script>
  262. <script>
  263. window.dataLayer = window.dataLayer || [];
  264. function gtag(){dataLayer.push(arguments);}
  265. gtag('js', new Date());
  266. gtag('config', 'UA-118745161-2');
  267. </script>
  268. </div>
  269. </div>
  270. </body>
  271. </html>