acme.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  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);" 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>Manual Renew</h3>
  84. <p>Pick a certificate below to force renew</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="Google">Google</div> -->
  110. </div>
  111. </div>
  112. </div>
  113. <button id="obtainButton" class="ui basic button" type="submit"><i class="yellow refresh icon"></i> Renew Certificate</button>
  114. </div>
  115. <button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Cancel</button>
  116. <br><br><br><br>
  117. </div>
  118. <script>
  119. let expiredDomains = [];
  120. let enableTrigerOnChangeEvent = true;
  121. $(".accordion").accordion();
  122. $(".dropdown").dropdown();
  123. function setAutoRenewIfCASupportMode(useAutoMode = true){
  124. if (useAutoMode){
  125. $("#domainCertFileTable").addClass("disabled");
  126. $("#renewNowBtn").removeClass("disabled");
  127. $("#renewSelectedButton").addClass("disabled");
  128. }else{
  129. $("#domainCertFileTable").removeClass("disabled");
  130. $("#renewNowBtn").addClass("disabled");
  131. $("#renewSelectedButton").removeClass("disabled");
  132. }
  133. }
  134. function initRenewerConfigFromFile(){
  135. $.get("/api/acme/autoRenew/enable", function(data){
  136. if (data == true){
  137. $("#enableCertAutoRenew").parent().checkbox("set checked");
  138. }
  139. $("#enableCertAutoRenew").on("change", function(){
  140. if (!enableTrigerOnChangeEvent){
  141. return;
  142. }
  143. toggleAutoRenew();
  144. })
  145. });
  146. $.get("/api/acme/autoRenew/email", function(data){
  147. if (data != "" && data != undefined && data != null){
  148. $("#caRegisterEmail").val(data);
  149. }
  150. });
  151. }
  152. initRenewerConfigFromFile();
  153. function saveEmailToConfig(btn){
  154. $.ajax({
  155. url: "/api/acme/autoRenew/email",
  156. data: {set: $("#caRegisterEmail").val()},
  157. success: function(data){
  158. if (data.error != undefined){
  159. parent.msgbox(data.error, false, 5000);
  160. }else{
  161. parent.msgbox("Email updated");
  162. $(btn).html(`<i class="green check icon"></i>`);
  163. $(btn).addClass("disabled");
  164. setTimeout(function(){
  165. $(btn).html(`<i class="blue save icon"></i>`);
  166. $(btn).removeClass("disabled");
  167. }, 3000);
  168. }
  169. }
  170. });
  171. }
  172. function toggleAutoRenew(){
  173. var enabled = $("#enableCertAutoRenew").parent().checkbox("is checked");
  174. $.post("/api/acme/autoRenew/enable?enable=" + enabled, function(data){
  175. if (data.error){
  176. parent.msgbox(data.error, false, 5000);
  177. if (enabled){
  178. enableTrigerOnChangeEvent = false;
  179. $("#enableCertAutoRenew").parent().checkbox("set unchecked");
  180. enableTrigerOnChangeEvent = true;
  181. }
  182. }else{
  183. $("#enableToggleSucc").stop().finish().fadeIn("fast").delay(3000).fadeOut("fast");
  184. }
  185. });
  186. }
  187. //Render the domains table that exists in this zoraxy host
  188. function renderDomainTable(domainFileList) {
  189. // Get the table body element
  190. var tableBody = $('#domainTableBody');
  191. // Clear the table body
  192. tableBody.empty();
  193. // Iterate over the domain names
  194. var counter = 0;
  195. for (const [srcfile, domains] of Object.entries(domainFileList)) {
  196. // Create a table row
  197. var row = $('<tr>');
  198. // Create the domain name cell
  199. var domainClass = "validDomain";
  200. for (var i = 0; i < domains.length; i++){
  201. let thisDomain = domains[i];
  202. if (expiredDomains.includes(thisDomain)){
  203. domainClass = "expiredDomain";
  204. }
  205. }
  206. var domainCell = $('<td class="' + domainClass +'">').html(domains.join("<br>"));
  207. row.append(domainCell);
  208. var srcFileCell = $('<td>').text(srcfile);
  209. row.append(srcFileCell);
  210. // Create the auto-renew checkbox cell
  211. let domainsEncoded = encodeURIComponent(JSON.stringify(domains));
  212. var checkboxCell = $(`<td domain="${domainsEncoded}" srcfile="${srcfile}">`);
  213. var checkbox = $(`<input name="${srcfile}">`).attr('type', 'checkbox');
  214. checkboxCell.append(checkbox);
  215. row.append(checkboxCell);
  216. // Add the row to the table body
  217. tableBody.append(row);
  218. counter++;
  219. }
  220. }
  221. //Initiate domain table. If you needs to update the expired domain as well
  222. //call from initDomainFileList() instead
  223. function initDomainTable(){
  224. $.get("/api/cert/listdomains?compact=true", function(data){
  225. if (data.error != undefined){
  226. parent.msgbox(data.error, false);
  227. }else{
  228. renderDomainTable(data);
  229. }
  230. initAutoRenewPolicy();
  231. })
  232. }
  233. function initDomainFileList() {
  234. $.ajax({
  235. url: "/api/acme/listExpiredDomains",
  236. method: "GET",
  237. success: function(response) {
  238. // Render domain table
  239. expiredDomains = response.domain;
  240. initDomainTable();
  241. //renderDomainTable(response.domain);
  242. },
  243. error: function(error) {
  244. console.log("Failed to fetch expired domains:", error);
  245. }
  246. });
  247. }
  248. initDomainFileList();
  249. // Button click event handler for obtaining certificate
  250. $("#obtainButton").click(function() {
  251. $("#obtainButton").addClass("loading").addClass("disabled");
  252. obtainCertificate();
  253. });
  254. // Obtain certificate from API
  255. function obtainCertificate() {
  256. var domains = $("#domainsInput").val();
  257. var filename = $("#filenameInput").val();
  258. var email = $("#caRegisterEmail").val();
  259. if (email == ""){
  260. parent.msgbox("ACME renew email is not set")
  261. return;
  262. }
  263. if (filename.trim() == "" && !domains.includes(",")){
  264. //Zoraxy filename are the matching name for domains.
  265. //Use the same as domains
  266. filename = domains;
  267. }else if (filename != "" && !domains.includes(",")){
  268. //Invalid settings. Force the filename to be same as domain
  269. //if there are only 1 domain
  270. filename = domains;
  271. }else{
  272. parent.msgbox("Filename cannot be empty for certs containing multiple domains.")
  273. return;
  274. }
  275. var ca = $("#ca").dropdown("get value");
  276. $.ajax({
  277. url: "/api/acme/obtainCert",
  278. method: "GET",
  279. data: {
  280. domains: domains,
  281. filename: filename,
  282. email: email,
  283. ca: ca,
  284. },
  285. success: function(response) {
  286. $("#obtainButton").removeClass("loading").removeClass("disabled");
  287. if (response.error) {
  288. console.log("Error:", response.error);
  289. // Show error message
  290. parent.msgbox(response.error, false, 12000);
  291. } else {
  292. console.log("Certificate renewed successfully");
  293. // Show success message
  294. parent.msgbox("Certificate renewed successfully");
  295. // Renew the parent certificate list
  296. parent.initManagedDomainCertificateList();
  297. }
  298. },
  299. error: function(error) {
  300. $("#obtainButton").removeClass("loading").removeClass("disabled");
  301. console.log("Failed to renewed certificate:", error);
  302. }
  303. });
  304. }
  305. function checkIfInputDomainIsMultiple(){
  306. var inputDomains = $("#domainsInput").val();
  307. if (inputDomains.includes(",")){
  308. $(".multiDomainOnly").show();
  309. }else{
  310. $(".multiDomainOnly").hide();
  311. }
  312. }
  313. //Grab the longest common suffix of all domains
  314. //not that smart technically
  315. function autoDetectMatchingRules(){
  316. var domainsString = $("#domainsInput").val();
  317. if (!domainsString.includes(",")){
  318. return domainsString;
  319. }
  320. let domains = domainsString.split(",");
  321. //Clean out any spacing between commas
  322. for (var i = 0; i < domains.length; i++){
  323. domains[i] = domains[i].trim();
  324. }
  325. function getLongestCommonSuffix(strings) {
  326. if (strings.length === 0) {
  327. return ''; // Return an empty string if the array is empty
  328. }
  329. var sortedStrings = strings.slice().sort(); // Create a sorted copy of the array
  330. var firstString = sortedStrings[0];
  331. var lastString = sortedStrings[sortedStrings.length - 1];
  332. var suffix = '';
  333. var minLength = Math.min(firstString.length, lastString.length);
  334. for (var i = 0; i < minLength; i++) {
  335. if (firstString[firstString.length - 1 - i] !== lastString[lastString.length - 1 - i]) {
  336. break; // Stop iterating if characters don't match
  337. }
  338. suffix = firstString[firstString.length - 1 - i] + suffix;
  339. }
  340. return suffix;
  341. }
  342. let longestSuffix = getLongestCommonSuffix(domains);
  343. //Check if the suffix is a valid domain
  344. if (longestSuffix.substr(0,1) == "."){
  345. //Trim off the first dot
  346. longestSuffix = longestSuffix.substr(1);
  347. }
  348. if (!longestSuffix.includes(".")){
  349. parent.msgbox("Auto Detect failed: Multiple Domains", false, 5000);
  350. return;
  351. }
  352. $("#filenameInput").val(longestSuffix);
  353. }
  354. //Handle the renew now btn click
  355. function renewNow(){
  356. alert("wip");
  357. return
  358. $.get("/api/acme/autoRenew/renewNow", function(data){
  359. alert(data);
  360. })
  361. }
  362. function initAutoRenewPolicy(){
  363. $.get("/api/acme/autoRenew/listDomains", function(data){
  364. if (data.error != undefined){
  365. parent.msgbox(data.error, false)
  366. }else{
  367. if (data[0] == "*"){
  368. //Auto select and renew is enabled
  369. $("#renewAllSupported").parent().checkbox("set checked");
  370. }else{
  371. //This is a list of domain files
  372. data.forEach(function(name) {
  373. $('#domainTableBody input[type="checkbox"][name="' + name + '"]').prop('checked', true);
  374. });
  375. $("#domainCertFileTable").removeClass("disabled");
  376. $("#renewNowBtn").addClass("disabled");
  377. $("#renewSelectedButton").removeClass("disabled");
  378. }
  379. }
  380. })
  381. }
  382. function saveAutoRenewPolicy(){
  383. let autoRenewAll = $("#renewAllSupported").parent().checkbox("is checked");
  384. if (autoRenewAll == true){
  385. $.ajax({
  386. url: "/api/acme/autoRenew/setDomains",
  387. data: {opr: "setAuto"},
  388. success: function(data){
  389. parent.msgbox("Renew policy rule updated")
  390. }
  391. });
  392. }else{
  393. let checkedNames = [];
  394. $('#domainTableBody input[type="checkbox"]:checked').each(function() {
  395. checkedNames.push($(this).attr('name'));
  396. });
  397. $.ajax({
  398. url: "/api/acme/autoRenew/setDomains",
  399. data: {opr: "setSelected", domains: JSON.stringify(checkedNames)},
  400. success: function(data){
  401. parent.msgbox("Renew policy rule updated")
  402. }
  403. });
  404. }
  405. }
  406. //Clear up the input field when page load
  407. $("#filenameInput").val("");
  408. </script>
  409. </body>
  410. </html>