<div class="standardContainer"> <div class="ui basic segment"> <h2>Redirection Rules</h2> <p>Add exception case for redirecting any matching URLs</p> </div> <!-- Current list of redirection rules--> <div style="width: 100%; overflow-x: auto;"> <table class="ui sortable unstackable celled table" > <thead> <tr> <th>Redirection URL</th> <th>Destination URL</th> <th class="no-sort">Copy Pathname</th> <th class="no-sort">Status Code</th> <th class="no-sort">Remove</th> </tr> </thead> <tbody id="redirectionRuleList"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> <div class="ui green message" id="delRuleSucc" style="display:none;"> <i class="ui green checkmark icon"></i> Redirection Rule Deleted </div> <!-- Options --> <div class="ui basic segment" style="background-color: #f7f7f7; border-radius: 1em;"> <div class="ui accordion advanceSettings"> <div class="title"> <i class="dropdown icon"></i> Advance Settings </div> <div class="content"> <div class="ui basic segment"> <div class="ui toggle checkbox"> <input id="redirectRegex" type="checkbox"> <label>Enable Regular Expression Support<br> <small>Regular expression redirection check will noticeably slow down page load<br> Support <a href="https://yourbasic.org/golang/regexp-cheat-sheet/" target="_blank">Go style regex</a>. e.g. <code style="background-color: rgb(44, 44, 44); color: white">.\.redirect\.example\.com</code></small></label> </div> </div> </div> </div> </div> <!-- Add New Redirection Rules --> <div class="ui divider"></div> <h4>Add Redirection Rule</h4> <div class="ui form"> <div class="field"> <label>Redirection URL (From)</label> <input type="text" id="rurl" name="redirection-url" placeholder="Redirection URL"> <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> </div> <div class="field"> <label>Destination URL (To)</label> <input type="text" name="destination-url" placeholder="Destination URL"> <small><i class="ui circle info icon"></i> The target URL request being redirected to, e.g. dest.example.com/mysite/ or dest.example.com/script.php, <b>sometime you might need to add tailing slash (/) to your URL depending on your use cases</b></small> </div> <div class="field"> <div class="ui checkbox"> <input type="checkbox" name="forward-childpath" tabindex="0" class="hidden" checked> <label>Forward Pathname</label> </div> <div class="ui message"> <p>Append the current pathname after the redirect destination</p> <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> <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 </div> </div> <div class="grouped fields"> <label>Redirection Status Code</label> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="redirect-type" value="307" checked> <label>Temporary Redirect <br><small>Status Code: 307</small></label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="redirect-type" value="301"> <label>Moved Permanently <br><small>Status Code: 301</small></label> </div> </div> </div> <button class="ui basic button" onclick="addRules();"><i class="ui teal plus icon"></i> Add Redirection Rule</button> <div class="ui green message" id="ruleAddSucc" style="display:none;"> <i class="ui green checkmark icon"></i> Redirection Rules Added </div> <br><br> </div> </div> </div> <script> /* Redirection functions */ $(".checkbox").checkbox(); $(".advanceSettings").accordion(); function resetForm() { document.getElementById("rurl").value = ""; document.getElementsByName("destination-url")[0].value = ""; document.getElementsByName("forward-childpath")[0].checked = true; } function addRules(){ let redirectUrl = document.querySelector('input[name="redirection-url"]').value; let destUrl = document.querySelector('input[name="destination-url"]').value; let forwardChildpath = document.querySelector('input[name="forward-childpath"]').checked; let redirectType = document.querySelector('input[name="redirect-type"]:checked').value; $.ajax({ url: "/api/redirect/add", method: "POST", data: { redirectUrl: redirectUrl, destUrl: destUrl, forwardChildpath: forwardChildpath, redirectType: parseInt(redirectType), }, success: function(data){ if (data.error != undefined){ alert(data.error); }else{ $("#ruleAddSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast"); } initRedirectionRuleList(); resetForm(); } }); } function deleteRule(obj){ let targetURL = $(obj).attr("rurl"); targetURL = JSON.parse(decodeURIComponent(targetURL)); if (confirm("Confirm remove redirection from " + targetURL + " ?")){ $.ajax({ url: "/api/redirect/delete", method: "POST", data: { redirectUrl: targetURL, }, success: function(data){ if (data.error != undefined){ alert(data.error); }else{ $("#delRuleSucc").stop().finish().slideDown("fast").delay(3000).slideUp("fast"); } initRedirectionRuleList(); } }); } } function initRedirectionRuleList(){ $("#redirectionRuleList").html(""); $.get("/api/redirect/list", function(data){ data.forEach(function(entry){ $("#redirectionRuleList").append(`<tr> <td><a href="${entry.RedirectURL}" target="_blank">${entry.RedirectURL}</a></td> <td>${entry.TargetURL}</td> <td>${entry.ForwardChildpath?"<i class='ui green checkmark icon'></i>":"<i class='ui red remove icon'></i>"}</td> <td>${entry.StatusCode==307?"Temporary Redirect (307)":"Moved Permanently (301)"}</td> <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> </tr>`); }); if (data.length == 0){ $("#redirectionRuleList").append(`<tr colspan="4"><td><i class="green check circle icon"></i> No redirection rule</td></tr>`); } }); } initRedirectionRuleList(); function initRegexpSupportToggle(){ $.get("/api/redirect/regex", function(data){ //Set the checkbox initial state if (data == true){ $("#redirectRegex").parent().checkbox("set checked"); }else{ $("#redirectRegex").parent().checkbox("set unchecked"); } //Bind event to the checkbox $("#redirectRegex").on("change", function(){ $.ajax({ url: "/api/redirect/regex", data: {"enable": $(this)[0].checked}, success: function(data){ if (data.error != undefined){ msgbox(data.error, false); }else{ msgbox("Regex redirect setting updated", true); } } }); }); }); } initRegexpSupportToggle(); $("#rurl").on('change', (event) => { const value = event.target.value.trim().replace(/^(https?:\/\/)/, ''); event.target.value = value; }); </script>