wireguard-ui/templates/client_default_settings.html

{{define "title"}}
Client Defaults Settings
{{end}}

{{define "top_css"}}
{{end}}

{{define "username"}}
{{ .username }}
{{end}}

{{define "page_title"}}
Client Defaults Settings
{{end}}

{{define "page_content"}}
<section class="content">
  <div class="container-fluid">
    <!-- <h5 class="mt-4 mb-2">Global Settings</h5> -->
    <div class="row">
      <!-- left column -->
      <div class="col-md-6">
        <div class="card card-success">
          <div class="card-header">
            <h3 class="card-title">Client Defaults Settings</h3>
          </div>
          <!-- /.card-header -->
          <!-- form start -->
          <form role="form" id="frm_client_default_settings" name="frm_client_default_settings">
            <div class="card-body">
              <div class="form-group">
                <label for="allowed_ips" class="control-label">Allowed IPs</label>
                <input type="text" data-role="tagsinput" class="form-control" id="allowed_ips" value="">
              </div>
              <div class="form-group">
                <label for="extra_allowed_ips" class="control-label">Extra Allowed IPs</label>
                <input type="text" data-role="tagsinput" class="form-control" id="extra_allowed_ips" value="">
              </div>


              <div class="form-group">
                <div class="icheck-primary d-inline">
                  <input type="checkbox" id="use_server_dns_chkbox" {{ if .clientDefaultSettings.UseServerDNS }}checked{{ end }}>
                  <label for="use_server_dns_chkbox">
                    Use server DNS
                  </label>
                </div>
              </div>

              <div class="form-group">
                <div class="icheck-primary d-inline">
                  <input type="checkbox" id="enable_after_creation_chkbox" {{ if .clientDefaultSettings.EnableAfterCreation }}checked{{ end }}>
                  <label for="enable_after_creation_chkbox">
                    Enable after creation
                  </label>
                </div>
              </div>
            </div>
            <!-- /.card-body -->

            <div class="card-footer">
              <button type="submit" class="btn btn-success" >Save</button>
            </div>
          </form>
        </div>
        <!-- /.card -->
      </div>
      <div class="col-md-6">
        <div class="card card-success">
          <div class="card-header">
            <h3 class="card-title">Help</h3>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <dl>
              <dt>1. Endpoint Address</dt>
              <dd>The public IP address of your Wireguard server that the client will connect to. Click on
                <strong>Suggest</strong> button to auto detect the public IP address of your server.</dd>
              <dt>2. DNS Servers</dt>
              <dd>The DNS servers will be set to client config.</dd>
              <dt>3. MTU</dt>
              <dd>The MTU will be set to server and client config. By default it is <code>1420</code>. You might want
                to adjust the MTU size if your connection (e.g PPPoE, 3G, satellite network, etc) has a low MTU.</dd>
              <dd>Leave blank to omit this setting in the configs.</dd>
              <dt>4. Persistent Keepalive</dt>
              <dd>By default, WireGuard peers remain silent while they do not need to communicate,
                so peers located behind a NAT and/or firewall may be unreachable from other peers
                until they reach out to other peers themselves. Adding <code>PersistentKeepalive</code>
                can ensure that the connection remains open.</dd>
              <dd>Leave blank to omit this setting in the Client config.</dd>
              <dt>5. Forward Mark</dt>
              <dd>Set an <code>fwmark</code> on all packets going out of WireGuard's UDP socket. Default value: <code>0xca6c</code></dd>
              <dt>6. Wireguard Config File Path</dt>
              <dd>The path of your Wireguard server config file. Please make sure the parent directory
                exists and is writable.</dd>
            </dl>
          </div>
        </div>
        <!-- /.card -->
      </div>
    </div>
    <!-- /.row -->
  </div>
</section>

{{end}}

{{define "bottom_js"}}
<script>
  function submitClientDefaultSettings() {
    const allowed_ips = $("#allowed_ips").val().split(",");
    const extra_allowed_ips = $("#extra_allowed_ips").val().split(",");
    const use_server_dns = $("#use_server_dns_chkbox").is(':checked');
    const enable_after_creation = $("#enable_after_creation_chkbox").is(':checked');
    const data = {"allowed_ips": allowed_ips, "extra_allowed_ips": extra_allowed_ips, "use_server_dns": use_server_dns, "enable_after_creation": enable_after_creation};
    $.ajax({
      cache: false,
      method: 'POST',
      url: '{{.basePath}}/client-default-settings',
      dataType: 'json',
      contentType: "application/json",
      data: JSON.stringify(data),
      success: function(data) {
        toastr.success('Update client default settings successfully');
      },
      error: function(jqXHR, exception) {
        const responseJson = jQuery.parseJSON(jqXHR.responseText);
        toastr.error(responseJson['message']);
      }
    });
  }
</script>
<script>
  $("#allowed_ips").tagsInput({
    'width': '100%',
    'height': '75%',
    'interactive': true,
    'defaultText': 'Add More',
    'removeWithBackspace': true,
    'minChars': 0,
    'placeholderColor': '#666666'
  });
  $("#extra_allowed_ips").tagsInput({
    'width': '100%',
    'height': '75%',
    'interactive': true,
    'defaultText': 'Add More',
    'removeWithBackspace': true,
    'minChars': 0,
    'placeholderColor': '#666666'
  });

  {{range .clientDefaultSettings.AllowedIps}}
  $("#allowed_ips").removeTag('{{.}}');
  $("#allowed_ips").addTag('{{.}}');
  {{end}}
  {{range .clientDefaultSettings.ExtraAllowedIps}}
  $("#extra_allowed_ips").removeTag('{{.}}');
  $("#extra_allowed_ips").addTag('{{.}}');
  {{end}}

  // Global setting form validation
  $(document).ready(function () {
    $.validator.setDefaults({
      submitHandler: function () {
        submitClientDefaultSettings();
      }
    });
    $("#frm_client_default_settings").validate({
    });
  });
</script>
{{end}}