status.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <div class="ui stackable four column grid">
  2. <div class="column">
  3. <div id="serverstatus" class="ui green inverted segment">
  4. <h3 class="ui header">
  5. <i class="exchange icon"></i>
  6. <div class="content">
  7. <span id="statusTitle">Offline</span>
  8. <div class="sub header" id="statusText">Reverse proxy server is offline</div>
  9. </div>
  10. </h3>
  11. </div>
  12. </div>
  13. <div class="column">Column 2</div>
  14. <div class="column">Column 3</div>
  15. <div class="column">Column 4</div>
  16. </div>
  17. <div class="ui divider"></div>
  18. <p>Inbound Port (Port to be proxied)</p>
  19. <div class="ui action fluid input">
  20. <input type="text" id="incomingPort" placeholder="Incoming Port" value="80">
  21. <button class="ui button" onclick="handlePortChange();">Apply</button>
  22. </div>
  23. <br>
  24. <div id="tls" class="ui toggle checkbox">
  25. <input type="checkbox">
  26. <label>Use TLS to serve proxy request</label>
  27. </div>
  28. <br>
  29. <div id="redirect" class="ui toggle checkbox" style="margin-top: 0.6em;">
  30. <input type="checkbox">
  31. <label>Force redirect HTTP request to HTTPS<br>
  32. <small>(Only apply when listening port is 443)</small></label>
  33. </div>
  34. <br>
  35. <div id="portUpdateSucc" class="ui green message" style="display:none;">
  36. <i class="ui green checkmark icon"></i> Setting Updated
  37. </div>
  38. <Br>
  39. <button id="startbtn" class="ui teal button" onclick="startService();">Start Service</button>
  40. <button id="stopbtn" class="ui red disabled button" onclick="stopService();">Stop Service</button>
  41. <script>
  42. //Get the latest server status from proxy server
  43. function initRPStaste(){
  44. $.get("/api/proxy/status", function(data){
  45. if (data.Running == true){
  46. $("#startbtn").addClass("disabled");
  47. $("#stopbtn").removeClass("disabled");
  48. $("#serverstatus").addClass("green");
  49. $("#statusTitle").text("Online");
  50. $("#statusText").text("Reverse proxying request on port: " + data.ListenPort);
  51. }else{
  52. $("#startbtn").removeClass("disabled");
  53. $("#stopbtn").addClass("disabled");
  54. $("#statusTitle").text("Offline");
  55. $("#statusText").text("Reverse proxy server is offline");
  56. $("#serverstatus").removeClass("green");
  57. }
  58. $("#incomingPort").val(data.ListenPort);
  59. });
  60. }
  61. //Start and stop service button
  62. function startService(){
  63. $.post("/api/proxy/enable", {enable: true}, function(data){
  64. if (data.error != undefined){
  65. errmsg(data.error);
  66. }
  67. initRPStaste();
  68. });
  69. }
  70. function stopService(){
  71. $.post("/api/proxy/enable", {enable: false}, function(data){
  72. if (data.error != undefined){
  73. errmsg(data.error);
  74. }
  75. initRPStaste();
  76. });
  77. }
  78. function handlePortChange(){
  79. var newPortValue = $("#incomingPort").val();
  80. if (isNaN(newPortValue - 1)){
  81. alert("Invalid incoming port value");
  82. return;
  83. }
  84. $.post("/api/proxy/setIncoming", {incoming: newPortValue}, function(data){
  85. if (data.error != undefined){
  86. errmsg(data.error);
  87. }
  88. $("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  89. initRPStaste();
  90. });
  91. }
  92. function initHTTPtoHTTPSRedirectSetting(){
  93. $.get("/api/proxy/useHttpsRedirect", function(data){
  94. if (data == true){
  95. $("#redirect").checkbox("set checked");
  96. }
  97. //Initiate the input listener on the checkbox
  98. $("#redirect").find("input").on("change", function(){
  99. let thisValue = $("#redirect").checkbox("is checked");
  100. $.ajax({
  101. url: "/api/proxy/useHttpsRedirect",
  102. data: {set: thisValue},
  103. success: function(data){
  104. if (data.error != undefined){
  105. alert(data.error);
  106. }else{
  107. //Updated
  108. $("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  109. initRPStaste();
  110. }
  111. }
  112. })
  113. });
  114. });
  115. }
  116. initHTTPtoHTTPSRedirectSetting();
  117. function initTlsSetting(){
  118. $.get("/api/cert/tls", function(data){
  119. if (data == true){
  120. $("#tls").checkbox("set checked");
  121. }
  122. //Initiate the input listener on the checkbox
  123. $("#tls").find("input").on("change", function(){
  124. let thisValue = $("#tls").checkbox("is checked");
  125. $.ajax({
  126. url: "/api/cert/tls",
  127. data: {set: thisValue},
  128. success: function(data){
  129. if (data.error != undefined){
  130. alert(data.error);
  131. }else{
  132. //Updated
  133. $("#portUpdateSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  134. initRPStaste();
  135. }
  136. }
  137. })
  138. });
  139. })
  140. }
  141. initTlsSetting();
  142. </script>