portainer/app/directives/endpointSecurity/porEndpointSecurity.html

<div>
  <!-- tls-checkbox -->
  <div class="form-group">
    <div class="col-sm-12">
      <label for="tls" class="control-label text-left">
        TLS
        <portainer-tooltip position="bottom" message="Enable this option if you need to connect to the Docker endpoint with TLS."></portainer-tooltip>
      </label>
      <label class="switch" style="margin-left: 20px;">
        <input type="checkbox" ng-model="$ctrl.formData.TLS"><i></i>
      </label>
    </div>
  </div>
  <!-- !tls-checkbox -->
  <div class="col-sm-12 form-section-title" ng-if="$ctrl.formData.TLS">
    TLS mode
  </div>
  <!-- note -->
  <div class="form-group" ng-if="$ctrl.formData.TLS">
    <div class="col-sm-12">
      <span class="small text-muted">
        You can find out more information about how to protect a Docker environment with TLS in the <a href="https://docs.docker.com/engine/security/https/" target="_blank">Docker documentation</a>.
      </span>
    </div>
  </div>
  <div class="form-group"></div>
  <!-- endpoint-tls-mode -->
  <div class="form-group" style="margin-bottom: 0" ng-if="$ctrl.formData.TLS">
    <div class="boxselector_wrapper">
      <div>
        <input type="radio" id="tls_client_ca" ng-model="$ctrl.formData.TLSMode" value="tls_client_ca">
        <label for="tls_client_ca">
          <div class="boxselector_header">
            <i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
            TLS with server and client verification
          </div>
          <p>Use client certificates and server verification</p>
        </label>
      </div>
      <div>
        <input type="radio" id="tls_client_noca" ng-model="$ctrl.formData.TLSMode" value="tls_client_noca">
        <label for="tls_client_noca">
          <div class="boxselector_header">
            <i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
            TLS with client verification only
          </div>
          <p>Use client certificates without server verification</p>
        </label>
      </div>
      <div>
        <input type="radio" id="tls_ca" ng-model="$ctrl.formData.TLSMode" value="tls_ca">
        <label for="tls_ca">
          <div class="boxselector_header">
            <i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
            TLS with server verification only
          </div>
          <p>Only verify the server certificate</p>
        </label>
      </div>
      <div>
        <input type="radio" id="tls_only" ng-model="$ctrl.formData.TLSMode" value="tls_only">
        <label for="tls_only">
          <div class="boxselector_header">
            <i class="fa fa-shield" aria-hidden="true" style="margin-right: 2px;"></i>
            TLS only
          </div>
          <p>No server/client verification</p>
        </label>
      </div>
    </div>
  </div>
  <!-- !endpoint-tls-mode -->
  <div class="col-sm-12 form-section-title" ng-if="$ctrl.formData.TLS && $ctrl.formData.TLSMode !== 'tls_only'">
    Required TLS files
  </div>
  <!-- tls-file-upload -->
  <div ng-if="$ctrl.formData.TLS">
    <!-- tls-file-ca -->
    <div class="form-group" ng-if="$ctrl.formData.TLSMode === 'tls_client_ca' || $ctrl.formData.TLSMode === 'tls_ca'">
      <label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
      <div class="col-sm-9 col-lg-10">
        <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCACert">Select file</button>
        <span style="margin-left: 5px;">
          {{ $ctrl.formData.TLSCACert.name }}
          <i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" aria-hidden="true"></i>
          <i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCACert" aria-hidden="true"></i>
          <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
        </span>
      </div>
    </div>
    <!-- !tls-file-ca -->
    <!-- tls-files-cert-key -->
    <div ng-if="$ctrl.formData.TLSMode === 'tls_client_ca' || $ctrl.formData.TLSMode === 'tls_client_noca'">
      <!-- tls-file-cert -->
      <div class="form-group">
        <label for="tls_cert" class="col-sm-3 col-lg-2 control-label text-left">TLS certificate</label>
        <div class="col-sm-9 col-lg-10">
          <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCert">Select file</button>
          <span style="margin-left: 5px;">
            {{ $ctrl.formData.TLSCert.name }}
            <i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" aria-hidden="true"></i>
            <i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCert" aria-hidden="true"></i>
            <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
          </span>
        </div>
      </div>
      <!-- !tls-file-cert -->
      <!-- tls-file-key -->
      <div class="form-group">
        <label class="col-sm-3 col-lg-2 control-label text-left">TLS key</label>
        <div class="col-sm-9 col-lg-10">
          <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSKey">Select file</button>
          <span style="margin-left: 5px;">
            {{ $ctrl.formData.TLSKey.name }}
            <i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" aria-hidden="true"></i>
            <i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSKey" aria-hidden="true"></i>
            <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
          </span>
        </div>
      </div>
      <!-- !tls-file-key -->
    </div>
    <!-- tls-files-cert-key -->
  </div>
  <!-- !tls-file-upload -->
</div>