acme.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  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. <div class="ui toggle checkbox">
  32. <input type="checkbox" id="enableCertAutoRenew">
  33. <label>Enable Certificate Auto Renew</label>
  34. </div>
  35. <br>
  36. <h3>ACME Email</h3>
  37. <p>Email is generally required for renewing via ACME. Zoraxy do not support no-email renew due to security reasons.</p>
  38. <div class="ui fluid action input">
  39. <input id="caRegisterEmail" type="text" placeholder="[email protected]">
  40. <button class="ui icon basic button">
  41. <i class="blue save icon"></i>
  42. </button>
  43. </div>
  44. </div>
  45. <div class="ui yellow message">
  46. Certificate Renew only works on the certification authority (CA) supported by Zoraxy. Check Zoraxy wiki for more information on supported list of CAs.
  47. </div>
  48. <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;">
  49. <div class="ui accordion advanceSettings">
  50. <div class="title">
  51. <i class="dropdown icon"></i>
  52. Advance Renew Policy
  53. </div>
  54. <div class="content">
  55. <p>Renew all certificates with ACME supported CAs</p>
  56. <div class="ui toggle checkbox">
  57. <input type="checkbox" id="renewAllSupported" onchange="setAutoRenewIfCASupportMode(this.checked);" checked>
  58. <label>Auto renew if CA is supported</label>
  59. </div><br>
  60. <button class="ui basic right floated button" style="margin-top: -2em;"><i class="yellow refresh icon"></i> Renew Now</button>
  61. <div class="ui horizontal divider"> OR </div>
  62. <p>Select the certificates to automatic renew in the list below</p>
  63. <table id="domainCertFileTable" class="ui very compact unstackable basic disabled table">
  64. <thead>
  65. <tr>
  66. <th>Domain Name</th>
  67. <th>Filename</th>
  68. <th>Auto-Renew</th>
  69. </tr>
  70. </thead>
  71. <tbody id="domainTableBody"></tbody>
  72. </table>
  73. <small><i class="ui red info circle icon"></i> Domain in red are expired</small><br>
  74. <button class="ui basic right floated button"><i class="blue save icon"></i> Save Changes</button>
  75. <button class="ui basic right floated button"><i class="yellow refresh icon"></i> Renew Selected</button>
  76. <br><br>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="ui divider"></div>
  81. <h3>Manual Renew</h3>
  82. <p>Pick a certificate below to force renew</p>
  83. <div class="ui form">
  84. <div class="field">
  85. <label>Domain(s)</label>
  86. <input id="domainsInput" type="text" placeholder="example.com" onkeyup="checkIfInputDomainIsMultiple();">
  87. <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>
  88. </div>
  89. <div class="field multiDomainOnly" style="display:none;">
  90. <label>Matching Rule</label>
  91. <input id="filenameInput" type="text" placeholder="Enter filename (no file extension)">
  92. <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>
  93. </div>
  94. <div class="field multiDomainOnly" style="display:none;">
  95. <button class="ui basic fluid button" onclick="autoDetectMatchingRules();">Auto Detect Matching Rule</button>
  96. </div>
  97. <div class="field">
  98. <label>Certificate Authority (CA)</label>
  99. <div class="ui selection dropdown" id="ca">
  100. <input type="hidden" name="ca">
  101. <i class="dropdown icon"></i>
  102. <div class="default text">Let's Encrypt</div>
  103. <div class="menu">
  104. <div class="item" data-value="Let's Encrypt">Let's Encrypt</div>
  105. <div class="item" data-value="Buypass">Buypass</div>
  106. <div class="item" data-value="ZeroSSL">ZeroSSL</div>
  107. <!-- <div class="item" data-value="Google">Google</div> -->
  108. </div>
  109. </div>
  110. </div>
  111. <button id="obtainButton" class="ui basic button" type="submit"><i class="yellow refresh icon"></i> Renew Certificate</button>
  112. </div>
  113. <button class="ui basic button" style="float: right;" onclick="parent.hideSideWrapper();"><i class="remove icon"></i> Cancel</button>
  114. <br><br><br><br>
  115. </div>
  116. <script>
  117. let expiredDomains = [];
  118. $(".accordion").accordion();
  119. $(".dropdown").dropdown();
  120. function setAutoRenewIfCASupportMode(useAutoMode = true){
  121. if (useAutoMode){
  122. $("#domainCertFileTable").addClass("disabled");
  123. }else{
  124. $("#domainCertFileTable").removeClass("disabled");
  125. }
  126. }
  127. //Render the domains table that exists in this zoraxy host
  128. function renderDomainTable(domains) {
  129. // Get the table body element
  130. var tableBody = $('#domainTableBody');
  131. // Clear the table body
  132. tableBody.empty();
  133. // Iterate over the domain names
  134. var counter = 0;
  135. for (const [domain, srcfile] of Object.entries(domains)) {
  136. // Create a table row
  137. var row = $('<tr>');
  138. // Create the domain name cell
  139. var domainClass = "validDomain";
  140. if (expiredDomains.includes(domain)){
  141. domainClass = "expiredDomain";
  142. }
  143. var domainCell = $('<td class="' + domainClass +'">').text(domain);
  144. row.append(domainCell);
  145. var srcFileCell = $('<td>').text(srcfile);
  146. row.append(srcFileCell);
  147. // Create the auto-renew checkbox cell
  148. var checkboxCell = $(`<td domain="${domain}" srcfile="${srcfile}">`);
  149. var checkbox = $('<input>').attr('type', 'checkbox');
  150. checkboxCell.append(checkbox);
  151. row.append(checkboxCell);
  152. // Add the row to the table body
  153. tableBody.append(row);
  154. counter++;
  155. }
  156. }
  157. //Initiate domain table. If you needs to update the expired domain as well
  158. //call from initDomainFileList() instead
  159. function initDomainTable(){
  160. $.get("/api/cert/listdomains", function(data){
  161. if (data.error != undefined){
  162. parent.msgbox(data.error, false);
  163. }else{
  164. renderDomainTable(data);
  165. }
  166. })
  167. }
  168. function initDomainFileList() {
  169. $.ajax({
  170. url: "/api/acme/listExpiredDomains",
  171. method: "GET",
  172. success: function(response) {
  173. // Render domain table
  174. expiredDomains = response.domain;
  175. initDomainTable();
  176. //renderDomainTable(response.domain);
  177. },
  178. error: function(error) {
  179. console.log("Failed to fetch expired domains:", error);
  180. }
  181. });
  182. }
  183. initDomainFileList();
  184. // Button click event handler for obtaining certificate
  185. $("#obtainButton").click(function() {
  186. $("#obtainButton").addClass("loading").addClass("disabled");
  187. obtainCertificate();
  188. });
  189. // Obtain certificate from API
  190. function obtainCertificate() {
  191. var domains = $("#domainsInput").val();
  192. var filename = $("#filenameInput").val();
  193. if (filename.trim() == "" && !domains.includes(",")){
  194. //Zoraxy filename are the matching name for domains.
  195. //Use the same as domains
  196. filename = domains;
  197. }else if (filename != "" && !domains.includes(",")){
  198. //Invalid settings. Force the filename to be same as domain
  199. //if there are only 1 domain
  200. filename = domains;
  201. }else{
  202. parent.msgbox("Filename cannot be empty for certs containing multiple domains.")
  203. return;
  204. }
  205. var ca = $("#ca").dropdown("get value");
  206. $.ajax({
  207. url: "/api/acme/obtainCert",
  208. method: "GET",
  209. data: {
  210. domains: domains,
  211. filename: filename,
  212. ca: ca,
  213. },
  214. success: function(response) {
  215. $("#obtainButton").removeClass("loading").removeClass("disabled");
  216. if (response.error) {
  217. console.log("Error:", response.error);
  218. // Show error message
  219. parent.msgbox(response.error, false, 12000);
  220. } else {
  221. console.log("Certificate renewed successfully");
  222. // Show success message
  223. parent.msgbox("Certificate renewed successfully");
  224. // Renew the parent certificate list
  225. parent.initManagedDomainCertificateList();
  226. }
  227. },
  228. error: function(error) {
  229. $("#obtainButton").removeClass("loading").removeClass("disabled");
  230. console.log("Failed to renewed certificate:", error);
  231. }
  232. });
  233. }
  234. function checkIfInputDomainIsMultiple(){
  235. var inputDomains = $("#domainsInput").val();
  236. if (inputDomains.includes(",")){
  237. $(".multiDomainOnly").show();
  238. }else{
  239. $(".multiDomainOnly").hide();
  240. }
  241. }
  242. function autoDetectMatchingRules(){
  243. var domainsString = $("#domainsInput").val();
  244. if (!domainsString.includes(",")){
  245. return domainsString;
  246. }
  247. let domains = domainsString.split(",");
  248. //Clean out any spacing between commas
  249. for (var i = 0; i < domains.length; i++){
  250. domains[i] = domains[i].trim();
  251. }
  252. function getLongestCommonSuffix(strings) {
  253. if (strings.length === 0) {
  254. return ''; // Return an empty string if the array is empty
  255. }
  256. var sortedStrings = strings.slice().sort(); // Create a sorted copy of the array
  257. var firstString = sortedStrings[0];
  258. var lastString = sortedStrings[sortedStrings.length - 1];
  259. var suffix = '';
  260. var minLength = Math.min(firstString.length, lastString.length);
  261. for (var i = 0; i < minLength; i++) {
  262. if (firstString[firstString.length - 1 - i] !== lastString[lastString.length - 1 - i]) {
  263. break; // Stop iterating if characters don't match
  264. }
  265. suffix = firstString[firstString.length - 1 - i] + suffix;
  266. }
  267. return suffix;
  268. }
  269. let longestSuffix = getLongestCommonSuffix(domains);
  270. //Check if the suffix is a valid domain
  271. if (longestSuffix.substr(0,1) == "."){
  272. //Trim off the first dot
  273. longestSuffix = longestSuffix.substr(1);
  274. }
  275. if (!longestSuffix.includes(".")){
  276. parent.msgbox("Auto Detect failed: Multiple Domains", false, 5000);
  277. return;
  278. }
  279. $("#filenameInput").val(longestSuffix);
  280. }
  281. //Clear up the input field when page load
  282. $("#filenameInput").val("");
  283. </script>
  284. </body>
  285. </html>