1
0

acme.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- Notes: This should be open in its original path-->
  5. <link rel="stylesheet" href="../script/semantic/semantic.min.css">
  6. <script src="../script/jquery-3.6.0.min.js"></script>
  7. <script src="../script/semantic/semantic.min.js"></script>
  8. <style>
  9. .disabled.table{
  10. opacity: 0.5;
  11. pointer-events: none;
  12. }
  13. .expiredDomain{
  14. color: rgb(238, 31, 31);
  15. }
  16. .validDomain{
  17. color: rgb(49, 192, 113);
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <br>
  23. <div class="ui container">
  24. <div class="ui header">
  25. <div class="content">
  26. Certificates Auto Renew Settings
  27. <div class="sub header">Fetch and renew your certificates with Automated Certificate Management Environment (ACME) protocol</div>
  28. </div>
  29. </div>
  30. <div class="ui basic segment">
  31. <p style="float: right; color: #21ba45; display:none;" id="enableToggleSucc"><i class="green checkmark icon"></i> Setting Updated</p>
  32. <div class="ui toggle checkbox">
  33. <input type="checkbox" id="enableCertAutoRenew">
  34. <label>Enable Certificate Auto Renew</label>
  35. </div>
  36. <br>
  37. <h3>ACME Email</h3>
  38. <p>Email is required by many CAs for renewing via ACME protocol</p>
  39. <div class="ui fluid action input">
  40. <input id="caRegisterEmail" type="text" placeholder="[email protected]">
  41. <button class="ui icon basic button" onclick="saveEmailToConfig(this);">
  42. <i class="blue save icon"></i>
  43. </button>
  44. </div>
  45. <small>If you don't want to share your private email address, you can also fill in an email address that point to a mailbox not exists on your domain.</small>
  46. </div>
  47. <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
  48. <div class="ui accordion advanceSettings">
  49. <div class="title">
  50. <i class="dropdown icon"></i>
  51. Advance Renew Policy
  52. </div>
  53. <div class="content">
  54. <p>Renew all certificates with ACME supported CAs</p>
  55. <div class="ui toggle checkbox">
  56. <input type="checkbox" id="renewAllSupported" onchange="setAutoRenewIfCASupportMode(this.checked);">
  57. <label>Renew All Certs</label>
  58. </div><br>
  59. <button id="renewNowBtn" onclick="renewNow();" class="ui basic right floated button" style="margin-top: -2em;"><i class="yellow refresh icon"></i> Renew Now</button>
  60. <div class="ui horizontal divider"> OR </div>
  61. <p>Select the certificates to automatic renew in the list below</p>
  62. <table id="domainCertFileTable" class="ui very compact unstackable basic disabled table">
  63. <thead>
  64. <tr>
  65. <th>Domain Name</th>
  66. <th>Match Rule</th>
  67. <th>Auto-Renew</th>
  68. </tr>
  69. </thead>
  70. <tbody id="domainTableBody"></tbody>
  71. </table>
  72. <small><i class="ui red info circle icon"></i> Domain in red are expired</small><br>
  73. <div class="ui yellow message">
  74. Certificate Renew only works on the certification authority (CA) supported by Zoraxy. Check Zoraxy wiki for more information on supported list of CAs.
  75. </div>
  76. <button class="ui basic right floated button" onclick="saveAutoRenewPolicy();"><i class="blue save icon"></i> Save Changes</button>
  77. <button id="renewSelectedButton" onclick="renewNow();" class="ui basic right floated disabled button"><i class="yellow refresh icon"></i> Renew Selected</button>
  78. <br><br>
  79. </div>
  80. </div>
  81. </div>
  82. <div class="ui divider"></div>
  83. <h3>Generate New Certificate</h3>
  84. <p>Enter a new / existing domain(s) to request new certificate(s)</p>
  85. <div class="ui form">
  86. <div class="field">
  87. <label>Domain(s)</label>
  88. <input id="domainsInput" type="text" placeholder="example.com" onkeyup="checkIfInputDomainIsMultiple();">
  89. <small>If you have more than one domain in a single certificate, enter the domains separated by commas (e.g. s1.dev.example.com,s2.dev.example.com)</small>
  90. </div>
  91. <div class="field multiDomainOnly" style="display:none;">
  92. <label>Matching Rule</label>
  93. <input id="filenameInput" type="text" placeholder="Enter filename (no file extension)">
  94. <small>Matching rule to let Zoraxy pick which certificate to use (Also be used as filename). Usually is the longest common suffix of the entered addresses. (e.g. dev.example.com)</small>
  95. </div>
  96. <div class="field multiDomainOnly" style="display:none;">
  97. <button class="ui basic fluid button" onclick="autoDetectMatchingRules();">Auto Detect Matching Rule</button>
  98. </div>
  99. <div class="field">
  100. <label>Certificate Authority (CA)</label>
  101. <div class="ui selection dropdown" id="ca">
  102. <input type="hidden" name="ca">
  103. <i class="dropdown icon"></i>
  104. <div class="default text">Let's Encrypt</div>
  105. <div class="menu">
  106. <div class="item" data-value="Let's Encrypt">Let's Encrypt</div>
  107. <div class="item" data-value="Buypass">Buypass</div>
  108. <div class="item" data-value="ZeroSSL">ZeroSSL</div>
  109. <div class="item" data-value="Custom ACME Server">Custom ACME Server</div>
  110. <!-- <div class="item" data-value="Google">Google</div> -->
  111. </div>
  112. </div>
  113. </div>
  114. <div class="field" id="caInput" style="display:none;">
  115. <label>ACME Server URL</label>
  116. <input id="caURL" type="text" placeholder="https://example.com/acme/dictionary">
  117. </div>
  118. <div class="field" id="kidInput" style="display:none;">
  119. <label>EAB Credentials (KID) for current provider</label>
  120. <input id="eab_kid" type="text" placeholder="Leave this field blank to keep the current configuration">
  121. </div>
  122. <div class="field" id="hmacInput" style="display:none;">
  123. <label>EAB HMAC Key for current provider</label>
  124. <input id="eab_hmac" type="text" placeholder="Leave this field blank to keep the current configuration">
  125. </div>
  126. <div class="field" id="skipTLS" style="display:none;">
  127. <div class="ui checkbox">
  128. <input type="checkbox" id="skipTLSCheckbox">
  129. <label>Ignore TLS/SSL Verification Error<br><small>E.g. self-signed, expired certificate (Not Recommended)</small></label>
  130. </div>
  131. </div>
  132. <button id="obtainButton" class="ui basic button" type="submit"><i class="yellow refresh icon"></i> Get Certificate</button>
  133. </div>
  134. <div class="ui divider"></div>
  135. <small>First time setting up HTTPS?<br>Try out our <a href="../tools/https.html" target="_blank">wizard</a></small>
  136. <button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Cancel</button>
  137. <br><br><br><br>
  138. </div>
  139. <script>
  140. let expiredDomains = [];
  141. let enableTrigerOnChangeEvent = true;
  142. $(".accordion").accordion();
  143. $(".dropdown").dropdown();
  144. $(".checkbox").checkbox();
  145. function setAutoRenewIfCASupportMode(useAutoMode = true){
  146. if (useAutoMode){
  147. $("#domainCertFileTable").addClass("disabled");
  148. $("#renewNowBtn").removeClass("disabled");
  149. $("#renewSelectedButton").addClass("disabled");
  150. }else{
  151. $("#domainCertFileTable").removeClass("disabled");
  152. $("#renewNowBtn").addClass("disabled");
  153. $("#renewSelectedButton").removeClass("disabled");
  154. }
  155. }
  156. function initRenewerConfigFromFile(){
  157. //Set the renew switch state
  158. $.get("/api/acme/autoRenew/enable", function(data){
  159. if (data == true){
  160. $("#enableCertAutoRenew").parent().checkbox("set checked");
  161. }
  162. $("#enableCertAutoRenew").on("change", function(){
  163. if (!enableTrigerOnChangeEvent){
  164. return;
  165. }
  166. toggleAutoRenew();
  167. })
  168. });
  169. //Load the email from server side
  170. $.get("/api/acme/autoRenew/email", function(data){
  171. if (data != "" && data != undefined && data != null){
  172. $("#caRegisterEmail").val(data);
  173. }
  174. });
  175. //Load the domain selection options
  176. $.get("/api/acme/autoRenew/renewPolicy", function(data){
  177. if (data == true){
  178. $("#renewAllSupported").parent().checkbox("set checked");
  179. }else{
  180. $("#renewAllSupported").parent().checkbox("set unchecked");
  181. }
  182. });
  183. }
  184. initRenewerConfigFromFile();
  185. function saveEmailToConfig(btn){
  186. $.ajax({
  187. url: "/api/acme/autoRenew/email",
  188. data: {set: $("#caRegisterEmail").val()},
  189. success: function(data){
  190. if (data.error != undefined){
  191. parent.msgbox(data.error, false, 5000);
  192. }else{
  193. parent.msgbox("Email updated");
  194. $(btn).html(`<i class="green check icon"></i>`);
  195. $(btn).addClass("disabled");
  196. setTimeout(function(){
  197. $(btn).html(`<i class="blue save icon"></i>`);
  198. $(btn).removeClass("disabled");
  199. }, 3000);
  200. }
  201. }
  202. });
  203. }
  204. function toggleAutoRenew(){
  205. var enabled = $("#enableCertAutoRenew").parent().checkbox("is checked");
  206. $.post("/api/acme/autoRenew/enable?enable=" + enabled, function(data){
  207. if (data.error){
  208. parent.msgbox(data.error, false, 5000);
  209. if (enabled){
  210. enableTrigerOnChangeEvent = false;
  211. $("#enableCertAutoRenew").parent().checkbox("set unchecked");
  212. enableTrigerOnChangeEvent = true;
  213. }
  214. if (parent && parent.setACMEEnableStates){
  215. parent.setACMEEnableStates(!enabled);
  216. }
  217. }else{
  218. $("#enableToggleSucc").stop().finish().fadeIn("fast").delay(3000).fadeOut("fast");
  219. if (parent && parent.setACMEEnableStates){
  220. parent.setACMEEnableStates(enabled);
  221. }
  222. }
  223. });
  224. }
  225. //Render the domains table that exists in this zoraxy host
  226. function renderDomainTable(domainFileList) {
  227. // Get the table body element
  228. var tableBody = $('#domainTableBody');
  229. // Clear the table body
  230. tableBody.empty();
  231. // Iterate over the domain names
  232. var counter = 0;
  233. for (const [srcfile, domains] of Object.entries(domainFileList)) {
  234. // Create a table row
  235. var row = $('<tr>');
  236. // Create the domain name cell
  237. var domainClass = "validDomain";
  238. for (var i = 0; i < domains.length; i++){
  239. let thisDomain = domains[i];
  240. if (expiredDomains.includes(thisDomain)){
  241. domainClass = "expiredDomain";
  242. }
  243. }
  244. var domainCell = $('<td class="' + domainClass +'">').html(domains.join("<br>"));
  245. row.append(domainCell);
  246. var srcFileCell = $('<td>').text(srcfile);
  247. row.append(srcFileCell);
  248. // Create the auto-renew checkbox cell
  249. let domainsEncoded = encodeURIComponent(JSON.stringify(domains));
  250. var checkboxCell = $(`<td domain="${domainsEncoded}" srcfile="${srcfile}">`);
  251. var checkbox = $(`<input name="${srcfile}">`).attr('type', 'checkbox');
  252. checkboxCell.append(checkbox);
  253. row.append(checkboxCell);
  254. // Add the row to the table body
  255. tableBody.append(row);
  256. counter++;
  257. }
  258. if (Object.keys(domainFileList).length == 0){
  259. //No certificate in this system
  260. tableBody.append(`<tr>
  261. <td colspan="3"><i class="ui green circle check icon"></i> No certificate in use</td>
  262. </tr>`);
  263. }
  264. }
  265. //Initiate domain table. If you needs to update the expired domain as well
  266. //call from initDomainFileList() instead
  267. function initDomainTable(){
  268. $.get("/api/cert/listdomains?compact=true", function(data){
  269. if (data.error != undefined){
  270. parent.msgbox(data.error, false);
  271. }else{
  272. renderDomainTable(data);
  273. }
  274. initAutoRenewPolicy();
  275. })
  276. }
  277. function initDomainFileList() {
  278. $.ajax({
  279. url: "/api/acme/listExpiredDomains",
  280. method: "GET",
  281. success: function(response) {
  282. // Render domain table
  283. expiredDomains = response.domain;
  284. initDomainTable();
  285. //renderDomainTable(response.domain);
  286. },
  287. error: function(error) {
  288. console.log("Failed to fetch expired domains:", error);
  289. }
  290. });
  291. }
  292. initDomainFileList();
  293. // Button click event handler for obtaining certificate
  294. $("#obtainButton").click(function() {
  295. $("#obtainButton").addClass("loading").addClass("disabled");
  296. updateCertificateEAB();
  297. obtainCertificate();
  298. });
  299. $("input[name=ca]").on('change', function() {
  300. if(this.value == "Custom ACME Server") {
  301. $("#caInput").show();
  302. $("#kidInput").show();
  303. $("#hmacInput").show();
  304. $("#skipTLS").show();
  305. } else if (this.value == "ZeroSSL") {
  306. $("#kidInput").show();
  307. $("#hmacInput").show();
  308. } else if (this.value == "Buypass") {
  309. $("#kidInput").show();
  310. $("#hmacInput").show();
  311. }else {
  312. $("#caInput").hide();
  313. $("#skipTLS").hide();
  314. $("#kidInput").hide();
  315. $("#hmacInput").hide();
  316. }
  317. })
  318. // Obtain certificate from API
  319. function updateCertificateEAB() {
  320. var ca = $("#ca").dropdown("get value");
  321. var caURL = "";
  322. if (ca == "Custom ACME Server") {
  323. ca = "custom";
  324. caURL = $("#caURL").val();
  325. }else if(ca == "Buypass") {
  326. caURL = "https://api.buypass.com/acme/directory";
  327. }else if(ca == "ZeroSSL") {
  328. caURL = "https://acme.zerossl.com/v2/DV90";
  329. }
  330. if(caURL == "") {
  331. return;
  332. }
  333. var kid = $("#eab_kid").val();
  334. var hmac = $("#eab_hmac").val();
  335. if(kid == "" || hmac == "") {
  336. return;
  337. }
  338. console.log(caURL + " " + kid + " " + hmac);
  339. $.ajax({
  340. url: "/api/acme/autoRenew/setEAB",
  341. method: "GET",
  342. data: {
  343. acmeDirectoryURL: caURL,
  344. kid: kid,
  345. hmacEncoded: hmac,
  346. },
  347. success: function(response) {
  348. //$("#obtainButton").removeClass("loading").removeClass("disabled");
  349. if (response.error) {
  350. console.log("Error:", response.error);
  351. // Show error message
  352. parent.msgbox(response.error, false, 12000);
  353. } else {
  354. console.log("Certificate EAB updated successfully");
  355. // Show success message
  356. parent.msgbox("Certificate EAB updated successfully");
  357. // Renew the parent certificate list
  358. parent.initManagedDomainCertificateList();
  359. }
  360. },
  361. error: function(error) {
  362. //$("#obtainButton").removeClass("loading").removeClass("disabled");
  363. console.log("Failed to update EAB configuration:", error);
  364. parent.msgbox("Failed to update EAB configuration");
  365. }
  366. });
  367. }
  368. // Obtain certificate from API
  369. function obtainCertificate() {
  370. var domains = $("#domainsInput").val();
  371. var filename = $("#filenameInput").val();
  372. var email = $("#caRegisterEmail").val();
  373. if (email == ""){
  374. parent.msgbox("ACME renew email is not set", false)
  375. $("#obtainButton").removeClass("loading").removeClass("disabled");
  376. return;
  377. }
  378. if (filename.trim() == "" && !domains.includes(",")){
  379. //Zoraxy filename are the matching name for domains.
  380. //Use the same as domains
  381. filename = domains;
  382. }else if (filename != "" && !domains.includes(",")){
  383. //Invalid settings. Force the filename to be same as domain
  384. //if there are only 1 domain
  385. filename = domains;
  386. }else if (filename == "" && domains.includes(",")){
  387. parent.msgbox("Filename cannot be empty for certs containing multiple domains.", false, 5000);
  388. $("#obtainButton").removeClass("loading").removeClass("disabled");
  389. return;
  390. }
  391. var ca = $("#ca").dropdown("get value");
  392. var caURL = "";
  393. if (ca == "Custom ACME Server") {
  394. ca = "custom";
  395. caURL = $("#caURL").val();
  396. }
  397. var skipTLSValue = $("#skipTLSCheckbox")[0].checked;
  398. $.ajax({
  399. url: "/api/acme/obtainCert",
  400. method: "GET",
  401. data: {
  402. domains: domains,
  403. filename: filename,
  404. email: email,
  405. ca: ca,
  406. caURL: caURL,
  407. skipTLS: skipTLSValue,
  408. },
  409. success: function(response) {
  410. $("#obtainButton").removeClass("loading").removeClass("disabled");
  411. if (response.error) {
  412. console.log("Error:", response.error);
  413. // Show error message
  414. parent.msgbox(response.error, false, 12000);
  415. } else {
  416. console.log("Certificate renewed successfully");
  417. // Show success message
  418. parent.msgbox("Certificate renewed successfully");
  419. // Renew the parent certificate list
  420. parent.initManagedDomainCertificateList();
  421. }
  422. },
  423. error: function(error) {
  424. $("#obtainButton").removeClass("loading").removeClass("disabled");
  425. console.log("Failed to renewed certificate:", error);
  426. }
  427. });
  428. }
  429. function checkIfInputDomainIsMultiple(){
  430. var inputDomains = $("#domainsInput").val();
  431. if (inputDomains.includes(",")){
  432. $(".multiDomainOnly").show();
  433. }else{
  434. $(".multiDomainOnly").hide();
  435. }
  436. }
  437. //Grab the longest common suffix of all domains
  438. //not that smart technically
  439. function autoDetectMatchingRules(){
  440. var domainsString = $("#domainsInput").val();
  441. if (!domainsString.includes(",")){
  442. return domainsString;
  443. }
  444. let domains = domainsString.split(",");
  445. //Clean out any spacing between commas
  446. for (var i = 0; i < domains.length; i++){
  447. domains[i] = domains[i].trim();
  448. }
  449. function getLongestCommonSuffix(strings) {
  450. if (strings.length === 0) {
  451. return ''; // Return an empty string if the array is empty
  452. }
  453. var sortedStrings = strings.slice().sort(); // Create a sorted copy of the array
  454. var firstString = sortedStrings[0];
  455. var lastString = sortedStrings[sortedStrings.length - 1];
  456. var suffix = '';
  457. var minLength = Math.min(firstString.length, lastString.length);
  458. for (var i = 0; i < minLength; i++) {
  459. if (firstString[firstString.length - 1 - i] !== lastString[lastString.length - 1 - i]) {
  460. break; // Stop iterating if characters don't match
  461. }
  462. suffix = firstString[firstString.length - 1 - i] + suffix;
  463. }
  464. return suffix;
  465. }
  466. let longestSuffix = getLongestCommonSuffix(domains);
  467. //Check if the suffix is a valid domain
  468. if (longestSuffix.substr(0,1) == "."){
  469. //Trim off the first dot
  470. longestSuffix = longestSuffix.substr(1);
  471. }
  472. if (!longestSuffix.includes(".")){
  473. parent.msgbox("Auto Detect failed: Multiple Domains", false, 5000);
  474. return;
  475. }
  476. $("#filenameInput").val(longestSuffix);
  477. }
  478. //Handle the renew now btn click
  479. function renewNow(){
  480. $.get("/api/acme/autoRenew/renewNow", function(data){
  481. if (data.error != undefined){
  482. parent.msgbox(data.error, false, 6000);
  483. }else{
  484. parent.msgbox(data)
  485. }
  486. })
  487. }
  488. function initAutoRenewPolicy(){
  489. $.get("/api/acme/autoRenew/listDomains", function(data){
  490. if (data.error != undefined){
  491. parent.msgbox(data.error, false)
  492. }else{
  493. if (data[0] == "*"){
  494. //Auto select and renew is enabled
  495. $("#renewAllSupported").parent().checkbox("set checked");
  496. }else{
  497. //This is a list of domain files
  498. data.forEach(function(name) {
  499. $('#domainTableBody input[type="checkbox"][name="' + name + '"]').prop('checked', true);
  500. });
  501. $("#domainCertFileTable").removeClass("disabled");
  502. $("#renewNowBtn").addClass("disabled");
  503. $("#renewSelectedButton").removeClass("disabled");
  504. }
  505. }
  506. })
  507. }
  508. function saveAutoRenewPolicy(){
  509. let autoRenewAll = $("#renewAllSupported").parent().checkbox("is checked");
  510. if (autoRenewAll == true){
  511. $.ajax({
  512. url: "/api/acme/autoRenew/setDomains",
  513. data: {opr: "setAuto"},
  514. success: function(data){
  515. parent.msgbox("Renew policy rule updated")
  516. }
  517. });
  518. }else{
  519. let checkedNames = [];
  520. $('#domainTableBody input[type="checkbox"]:checked').each(function() {
  521. checkedNames.push($(this).attr('name'));
  522. });
  523. $.ajax({
  524. url: "/api/acme/autoRenew/setDomains",
  525. data: {opr: "setSelected", domains: JSON.stringify(checkedNames)},
  526. success: function(data){
  527. parent.msgbox("Renew policy rule updated")
  528. }
  529. });
  530. }
  531. }
  532. //Clear up the input field when page load
  533. $("#filenameInput").val("");
  534. </script>
  535. </body>
  536. </html>