Zoraxy/web/components/upnp.html

<h3><i class="blue exchange icon"></i> Port Forward</h3>
<p>Port forward using UPnP protocol</p>
<div class="ui divider"></div>
<div class="ui message">
    <h4><i class="ui loading spinner icon"></i> Checking Upnp State</h4> 
    <p><i class="ui info circle icon"></i> If you are hosting this server under a home router which you have no access to, you can try port forward your services port and expose them to the internet via Upnp protocol.
        Note that not all router support this function, sometime this might be disabled by your ISP or administrator.</p>

        <button style="position: absolute; right: 0.6em; top: 0.6em;" class="ui circular basic icon button"><i class="ui green refresh icon"></i></button>
</div>
<div class="ui form">
    <div class="field">
      <div class="ui toggle checkbox">
        <input type="checkbox" name="upnp">
        <label>Enable UPnP</label>
      </div>
    </div>
    <div class="field">
      <label>Port to Forward</label>
      <div class="ui input">
        <input type="number" min="1" max="65535" name="forwardPort" placeholder="Forwardable Port">
      </div>
    </div>
    <div class="field">
      <label>Rule Name</label>
      <div class="ui input">
        <input type="text" name="ruleName" placeholder="Rule Name">
      </div>
    </div>
    <div class="field">
      <button class="ui teal button" type="button" name="addRule"><i class="ui add icon"></i> Add Rule</button>
    </div>
</div>
  
  <div class="ui basic segment">
    <p>Forwarded Ports</p>
    <table class="ui basic table">
      <thead>
        <tr>
          <th>Port Forwarded</th>
          <th>Name of Rule</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>80</td>
          <td>HTTP</td>
          <td><button class="ui button negative" type="button" name="deleteRule">Delete</button></td>
        </tr>
        <tr>
          <td>22</td>
          <td>SSH</td>
          <td><button class="ui button negative" type="button" name="deleteRule">Delete</button></td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <script>
    //Get value of the form
    function getFormValues() {
      var formValues = {};
      formValues.upnp = $('input[name="upnp"]').prop('checked');
      formValues.forwardPort = $('input[name="forwardPort"]').val();
      formValues.ruleName = $('input[name="ruleName"]').val();
      return formValues;
    }

  </script>