redirection.html 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <div class="standardContainer">
  2. <div class="ui basic segment">
  3. <h2>Path & Redirection</h2>
  4. <p>Setup redirection and path specific settings like custom header, contents and status codes</p>
  5. </div>
  6. <div class="ui top attached tabular menu">
  7. <a class="pathAndRedirect item active" data-tab="tab_redirect"><i class="ui blue level up alternate icon"></i> Redirect</a>
  8. <a class="pathAndRedirect item" data-tab="tab_pathrules"><i class="ui code icon"></i> Path Rules</a>
  9. <a class="pathAndRedirect item" data-tab="tab_pathcache"><i class="ui teal database icon"></i> Caches</a>
  10. </div>
  11. <div class="ui bottom attached tab segment active" data-tab="tab_redirect">
  12. <div class="ui basic segment">
  13. <h2>Redirection Rules</h2>
  14. <p>Add exception case for redirecting any matching URLs</p>
  15. </div>
  16. <div style="width: 100%; overflow-x: auto;">
  17. <table class="ui sortable unstackable celled table" >
  18. <thead>
  19. <tr>
  20. <th>Redirection URL</th>
  21. <th>Destination URL</th>
  22. <th class="no-sort">Copy Pathname</th>
  23. <th class="no-sort">Status Code</th>
  24. <th class="no-sort">Remove</th>
  25. </tr>
  26. </thead>
  27. <tbody id="redirectionRuleList">
  28. <tr>
  29. <td></td>
  30. <td></td>
  31. <td></td>
  32. <td></td>
  33. </tr>
  34. </tbody>
  35. </table>
  36. </div>
  37. <div class="ui green message" id="delRuleSucc" style="display:none;">
  38. <i class="ui green checkmark icon"></i> Redirection Rule Deleted
  39. </div>
  40. <div class="ui divider"></div>
  41. <h4>Add Redirection Rule</h4>
  42. <div class="ui form">
  43. <div class="field">
  44. <label>Redirection URL (From)</label>
  45. <input type="text" id="rurl" name="redirection-url" placeholder="Redirection URL">
  46. <small><i class="ui circle info icon"></i> Any matching prefix of the request URL will be redirected to the destination URL, e.g. redirect.example.com</small>
  47. </div>
  48. <div class="field">
  49. <label>Destination URL (To)</label>
  50. <input type="text" name="destination-url" placeholder="Destination URL">
  51. <small><i class="ui circle info icon"></i> The target URL request being redirected to, e.g. dest.example.com/mysite</small>
  52. </div>
  53. <div class="field">
  54. <div class="ui checkbox">
  55. <input type="checkbox" name="forward-childpath" tabindex="0" class="hidden" checked>
  56. <label>Forward Pathname</label>
  57. </div>
  58. <div class="ui message">
  59. <p>Append the current pathname after the redirect destination</p>
  60. <i class="check square outline icon"></i> old.example.com<b>/blog?post=13</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> new.example.com<b>/blog?post=13</b> <br>
  61. <i class="square outline icon"></i> old.example.com<b>/blog?post=13</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> new.example.com
  62. </div>
  63. </div>
  64. <div class="grouped fields">
  65. <label>Redirection Status Code</label>
  66. <div class="field">
  67. <div class="ui radio checkbox">
  68. <input type="radio" name="redirect-type" value="307" checked>
  69. <label>Temporary Redirect <br><small>Status Code: 307</small></label>
  70. </div>
  71. </div>
  72. <div class="field">
  73. <div class="ui radio checkbox">
  74. <input type="radio" name="redirect-type" value="301">
  75. <label>Moved Permanently <br><small>Status Code: 301</small></label>
  76. </div>
  77. </div>
  78. </div>
  79. <button class="ui basic button" onclick="addRules();"><i class="ui teal plus icon"></i> Add Redirection Rule</button>
  80. <div class="ui green message" id="ruleAddSucc" style="display:none;">
  81. <i class="ui green checkmark icon"></i> Redirection Rules Added
  82. </div>
  83. </div>
  84. </div>
  85. <!-- Path Rules -->
  86. <div class="ui bottom attached tab segment" data-tab="tab_pathrules">
  87. <div class="ui basic segment">
  88. <h2>Special Path Rules</h2>
  89. <p>Advanced customization for response on particular matching path or URL</p>
  90. </div>
  91. <div style="width: 100%; overflow-x: auto;">
  92. <table class="ui sortable unstackable celled table" >
  93. <thead>
  94. <tr>
  95. <th>Matching Path</th>
  96. <th>Status Code</th>
  97. <th class="no-sort">Exact Match</th>
  98. <th class="no-sort">Case Sensitive</th>
  99. <th class="no-sort">Enabled</th>
  100. <th class="no-sort">Actions</th>
  101. </tr>
  102. </thead>
  103. <tbody id="specialPathRules">
  104. <tr>
  105. <td></td>
  106. <td></td>
  107. <td></td>
  108. <td></td>
  109. <td></td>
  110. <td></td>
  111. </tr>
  112. </tbody>
  113. </table>
  114. </div>
  115. <div class="ui divider"></div>
  116. <h4>Add Special Path Rule</h4>
  117. <div class="ui form">
  118. <div class="field">
  119. <label>Matching URI</label>
  120. <input type="text" name="matchingPath" placeholder="Matching URL">
  121. <small><i class="ui circle info icon"></i> Any matching prefix of the request URL will be handled by this rule, e.g. example.com/secret</small>
  122. </div>
  123. <div class="field">
  124. <div class="ui checkbox">
  125. <input type="checkbox" name="exactMatch" tabindex="0" class="hidden">
  126. <label>Require Exact Match</label>
  127. </div>
  128. <div class="ui message">
  129. <p>Require exactly match but not prefix match (default). Enable this if you only want to block access to a directory but not the resources inside the directory. Assume you have entered a matching URI of <b>example.com/secret/</b> and set it to return 401</p>
  130. <i class="check square outline icon"></i> example.com/secret<b>/image.png</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> (content of image.png)<br>
  131. <i class="square outline icon"></i> example.com/secret<b>/image.png</b> <i class="long arrow alternate right icon" style="margin-left: 1em;"></i> HTTP 401
  132. </div>
  133. </div>
  134. <div class="field">
  135. <label>Response Status Code</label>
  136. <input type="text"name="statusCode" placeholder="500">
  137. <small><i class="ui circle info icon"></i> HTTP Status Code to be served by this rule</small>
  138. </div>
  139. </div>
  140. </div>
  141. <!-- Path Rules -->
  142. <div class="ui bottom attached tab segment" data-tab="tab_pathcache">
  143. <p>Work In Progress</p>
  144. </div>
  145. </div>
  146. <script>
  147. $('.menu .pathAndRedirect.item').tab();
  148. $('.menu .pathAndRedirect.item').addClass("activated");
  149. /*
  150. Redirection functions
  151. */
  152. $(".checkbox").checkbox();
  153. function resetForm() {
  154. document.getElementById("rurl").value = "";
  155. document.getElementsByName("destination-url")[0].value = "";
  156. document.getElementsByName("forward-childpath")[0].checked = true;
  157. }
  158. function addRules(){
  159. let redirectUrl = document.querySelector('input[name="redirection-url"]').value;
  160. let destUrl = document.querySelector('input[name="destination-url"]').value;
  161. let forwardChildpath = document.querySelector('input[name="forward-childpath"]').checked;
  162. let redirectType = document.querySelector('input[name="redirect-type"]:checked').value;
  163. $.ajax({
  164. url: "/api/redirect/add",
  165. method: "POST",
  166. data: {
  167. redirectUrl: redirectUrl,
  168. destUrl: destUrl,
  169. forwardChildpath: forwardChildpath,
  170. redirectType: parseInt(redirectType),
  171. },
  172. success: function(data){
  173. if (data.error != undefined){
  174. alert(data.error);
  175. }else{
  176. $("#ruleAddSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  177. }
  178. initRedirectionRuleList();
  179. }
  180. });
  181. }
  182. function deleteRule(obj){
  183. let targetURL = $(obj).attr("rurl");
  184. targetURL = JSON.parse(decodeURIComponent(targetURL));
  185. if (confirm("Confirm remove redirection from " + targetURL + " ?")){
  186. $.ajax({
  187. url: "/api/redirect/delete",
  188. method: "POST",
  189. data: {
  190. redirectUrl: targetURL,
  191. },
  192. success: function(data){
  193. if (data.error != undefined){
  194. alert(data.error);
  195. }else{
  196. $("#delRuleSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast");
  197. }
  198. initRedirectionRuleList();
  199. }
  200. });
  201. }
  202. }
  203. function initRedirectionRuleList(){
  204. $("#redirectionRuleList").html("");
  205. $.get("/api/redirect/list", function(data){
  206. data.forEach(function(entry){
  207. $("#redirectionRuleList").append(`<tr>
  208. <td>${entry.RedirectURL} </td>
  209. <td>${entry.TargetURL}</td>
  210. <td>${entry.ForwardChildpath?"<i class='ui green checkmark icon'></i>":"<i class='ui red remove icon'></i>"}</td>
  211. <td>${entry.StatusCode==307?"Temporary Redirect (307)":"Moved Permanently (301)"}</td>
  212. <td><button onclick="deleteRule(this);" rurl="${encodeURIComponent(JSON.stringify(entry.RedirectURL))}" title="Delete redirection rule" class="ui mini red icon basic button"><i class="trash icon"></i></button></td>
  213. </tr>`);
  214. });
  215. if (data.length == 0){
  216. $("#redirectionRuleList").append(`<tr colspan="4"><td><i class="checkmark icon"></i> No redirection rule</td></tr>`);
  217. }
  218. });
  219. }
  220. initRedirectionRuleList();
  221. $("#rurl").on('change', (event) => {
  222. const value = event.target.value.trim().replace(/^(https?:\/\/)/, '');
  223. event.target.value = value;
  224. });
  225. </script>