Zoraxy/web/components/redirection.html

<div class="standardContainer">
  <div class="ui basic segment">
      <h2>Path & Redirection</h2>
      <p>Setup redirection and path specific settings like custom header, contents and status codes</p>
  </div>

  <div class="ui top attached tabular menu">
    <a class="pathAndRedirect item active" data-tab="tab_redirect"><i class="ui blue level up alternate icon"></i> Redirect</a>
    <a class="pathAndRedirect item" data-tab="tab_pathrules"><i class="ui code icon"></i> Path Rules</a>
    <a class="pathAndRedirect item" data-tab="tab_pathcache"><i class="ui teal database icon"></i> Caches</a>
  </div>

  <div class="ui bottom attached tab segment active" data-tab="tab_redirect">
    <div class="ui basic segment">
      <h2>Redirection Rules</h2>
      <p>Add exception case for redirecting any matching URLs</p>
    </div>
    <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>
    <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</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>
    </div>
  </div>

  <!-- Path Rules -->
  <div class="ui bottom attached tab segment" data-tab="tab_pathrules">
    <div class="ui basic segment">
      <h2>Special Path Rules</h2>
      <p>Advanced customization for response on particular matching path or URL</p>
    </div>
    <div style="width: 100%; overflow-x: auto;">
      <table class="ui sortable unstackable celled table" >
        <thead>
            <tr>
                <th>Matching Path</th>
                <th>Status Code</th>
                <th class="no-sort">Exact Match</th>
                <th class="no-sort">Case Sensitive</th>
                <th class="no-sort">Enabled</th>
                <th class="no-sort">Actions</th>
            </tr>
        </thead>
        <tbody id="specialPathRules">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
  </div>
  <div class="ui divider"></div>
  <h4>Add Special Path Rule</h4>
  <div class="ui form">
    <div class="field">
      <label>Matching URI</label>
      <input type="text" name="matchingPath" placeholder="Matching URL">
      <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>
    </div>
    <div class="field">
      <div class="ui checkbox">
        <input type="checkbox" name="exactMatch" tabindex="0" class="hidden">
        <label>Require Exact Match</label>
      </div>
      <div class="ui message">
        <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>
        <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>
        <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 
      </div>
    </div>
    <div class="field">
      <label>Response Status Code</label>
      <input type="text"name="statusCode" placeholder="500">
      <small><i class="ui circle info icon"></i> HTTP Status Code to be served by this rule</small>
    </div>
  </div>
  </div>

  <!-- Path Rules -->
  <div class="ui bottom attached tab segment" data-tab="tab_pathcache">
    <p>Work In Progress</p>
  </div>
</div>
<script>
    $('.menu .pathAndRedirect.item').tab();
    $('.menu .pathAndRedirect.item').addClass("activated"); 
    
  /*
    Redirection functions
  */
    $(".checkbox").checkbox();

    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();
            }
        });
    }

    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>${entry.RedirectURL} </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="checkmark icon"></i> No redirection rule</td></tr>`);
            }
            
        });
    }
    initRedirectionRuleList();

    $("#rurl").on('change', (event) => {
      const value = event.target.value.trim().replace(/^(https?:\/\/)/, '');
      event.target.value = value;
    });
    
</script>