acme.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  7. <title>ACME</title>
  8. </head>
  9. <body>
  10. <div class="ui container">
  11. <h1 class="ui header">Welcome to ACME</h1>
  12. <div class="ui segment">
  13. <p>This is an example of using ACME.</p>
  14. <button id="fetchButton" class="ui primary button">Fetch Expired Domains</button>
  15. </div>
  16. <div id="domainTable" class="ui segment hidden">
  17. <h2 class="ui header">Expired Domains</h2>
  18. <table id="domainList" class="ui celled table">
  19. <thead>
  20. <tr>
  21. <th>Domain</th>
  22. </tr>
  23. </thead>
  24. <tbody></tbody>
  25. </table>
  26. <div class="ui segment">
  27. <h2 class="ui header">Obtain Certificate</h2>
  28. <div class="ui form">
  29. <div class="field">
  30. <label>Domains</label>
  31. <input id="domainsInput" type="text" placeholder="Enter domains separated by commas (e.g. r5desktop.alanyeung.co,alanyeung.co)">
  32. </div>
  33. <div class="field">
  34. <label>Filename</label>
  35. <input id="filenameInput" type="text" placeholder="Enter filename">
  36. </div>
  37. <button id="obtainButton" class="ui button" type="submit">Obtain Certificate</button>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  43. <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
  44. <script>
  45. $(document).ready(function() {
  46. // Button click event handler
  47. $("#fetchButton").click(function() {
  48. fetchExpiredDomains();
  49. });
  50. // Fetch expired domains from API
  51. function fetchExpiredDomains() {
  52. $.ajax({
  53. url: "/api/acme/listExpiredDomains",
  54. method: "GET",
  55. success: function(response) {
  56. // Render domain table
  57. renderDomainTable(response.domain);
  58. },
  59. error: function(error) {
  60. console.log("Failed to fetch expired domains:", error);
  61. }
  62. });
  63. }
  64. // Render domain table with data
  65. function renderDomainTable(domains) {
  66. var tableBody = $("#domainList tbody");
  67. tableBody.empty();
  68. $.each(domains, function(index, domain) {
  69. var row = $("<tr>").appendTo(tableBody);
  70. $("<td>").text(domain).appendTo(row);
  71. });
  72. // Show the domain table
  73. $("#domainTable").removeClass("hidden");
  74. }
  75. // Button click event handler for obtaining certificate
  76. $("#obtainButton").click(function() {
  77. obtainCertificate();
  78. });
  79. // Obtain certificate from API
  80. function obtainCertificate() {
  81. var domains = $("#domainsInput").val();
  82. var filename = $("#filenameInput").val();
  83. $.ajax({
  84. url: "/api/acme/obtainCert",
  85. method: "GET",
  86. data: {
  87. domains: domains,
  88. filename: filename
  89. },
  90. success: function(response) {
  91. if (response.error) {
  92. console.log("Error:", response.error);
  93. // Show error message
  94. showMessage(response.error);
  95. } else {
  96. console.log("Certificate obtained successfully");
  97. // Show success message
  98. showMessage("Certificate obtained successfully");
  99. }
  100. },
  101. error: function(error) {
  102. console.log("Failed to obtain certificate:", error);
  103. }
  104. });
  105. }
  106. // Show message in a popup
  107. function showMessage(message) {
  108. $("<div>").addClass("ui message").text(message).appendTo("body").modal({
  109. onHide: function() {
  110. $(this).remove();
  111. }
  112. }).modal("show");
  113. }
  114. });
  115. </script>
  116. </body>
  117. </html>