portainer/app/components/settingsAuthentication/settingsAuthentication.html

<rd-header>
  <rd-header-title title="Authentication settings">
    <i id="loadingViewSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px;"></i>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="settings">Settings</a> &gt; Authentication
  </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-header icon="fa-users" title="Authentication"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            Authentication method
          </div>
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0">
            <div class="boxselector_wrapper">
              <div>
                <input type="radio" id="registry_quay" ng-model="settings.AuthenticationMethod" ng-value="1">
                <label for="registry_quay">
                  <div class="boxselector_header">
                    <i class="fa fa-users" aria-hidden="true" style="margin-right: 2px;"></i>
                    Internal
                  </div>
                  <p>Internal authentication mechanism</p>
                </label>
              </div>
              <div>
                <input type="radio" id="registry_custom" ng-model="settings.AuthenticationMethod" ng-value="2">
                <label for="registry_custom">
                  <div class="boxselector_header">
                    <i class="fa fa-users" aria-hidden="true" style="margin-right: 2px;"></i>
                    LDAP
                  </div>
                  <p>LDAP authentication</p>
                </label>
              </div>
            </div>
          </div>
          <div class="col-sm-12 form-section-title">
            Information
          </div>
          <div class="form-group" ng-if="settings.AuthenticationMethod === 1">
            <span class="col-sm-12 text-muted small">
              When using internal authentication, Portainer will encrypt user passwords and store credentials locally.
            </span>
          </div>
          <div class="form-group" ng-if="settings.AuthenticationMethod === 2">
            <span class="col-sm-12 text-muted small">
              When using LDAP authentication, Portainer will delegate user authentication to a LDAP server (exception for the <b>admin</b> user that always uses internal authentication).
              <p style="margin-top:5px;">
                <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
                <u>Users still need to be created in Portainer beforehand.</u>
              </p>
            </span>
          </div>

          <div ng-if="settings.AuthenticationMethod === 2">
            <div class="col-sm-12 form-section-title">
              LDAP configuration
            </div>

            <div class="form-group">
              <label for="ldap_url" class="col-sm-3 col-lg-2 control-label text-left">
                LDAP URL
                <portainer-tooltip position="bottom" message="URL or IP address of the LDAP server."></portainer-tooltip>
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="ldap_url" ng-model="LDAPSettings.URL" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389">
              </div>
            </div>

            <div class="form-group">
              <label for="ldap_username" class="col-sm-3 col-lg-2 control-label text-left">
                Reader DN
                <portainer-tooltip position="bottom" message="Account that will be used to search for users."></portainer-tooltip>
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" class="form-control" id="ldap_username" ng-model="LDAPSettings.ReaderDN" placeholder="cn=readonly-account,dc=ldap,dc=domain,dc=tld">
              </div>
            </div>

            <div class="form-group">
              <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
                Password
              </label>
              <div class="col-sm-9 col-lg-10">
                <input type="password" class="form-control" id="ldap_password" ng-model="LDAPSettings.Password" placeholder="password">
              </div>
            </div>

            <div class="form-group" ng-if="!LDAPSettings.TLSConfig.TLS && !LDAPSettings.StartTLS">
              <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
                Connectivity check
                <i class="fa fa-check green-icon" style="margin-left: 5px;" ng-if="state.successfulConnectivityCheck"></i>
                <i class="fa fa-times red-icon" style="margin-left: 5px;" ng-if="state.failedConnectivityCheck"></i>
              </label>
              <div class="col-sm-9 col-lg-10">
                <button type="button" class="btn btn-primary btn-sm" ng-disabled="!LDAPSettings.URL || !LDAPSettings.ReaderDN || !LDAPSettings.Password" ng-click="LDAPConnectivityCheck()">Test connectivity</button>
                <i id="connectivityCheckSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
              </div>
            </div>

            <div class="col-sm-12 form-section-title">
              LDAP security
            </div>

            <!-- starttls -->
            <div class="form-group" ng-if="!LDAPSettings.TLSConfig.TLS">
              <div class="col-sm-12">
                <label for="tls" class="control-label text-left">
                  Use StartTLS
                  <portainer-tooltip position="bottom" message="Enable this option if want to use StartTLS to secure the connection to the server. Ignored if Use TLS is selected."></portainer-tooltip>
                </label>
                <label class="switch" style="margin-left: 20px;">
                  <input type="checkbox" ng-model="LDAPSettings.StartTLS"><i></i>
                </label>
              </div>
            </div>
            <!-- !starttls -->

            <!-- tls-checkbox -->
            <div class="form-group" ng-if="!LDAPSettings.StartTLS">
              <div class="col-sm-12">
                <label for="tls" class="control-label text-left">
                  Use TLS
                  <portainer-tooltip position="bottom" message="Enable this option if you need to specify TLS certificates to connect to the LDAP server."></portainer-tooltip>
                </label>
                <label class="switch" style="margin-left: 20px;">
                  <input type="checkbox" ng-model="LDAPSettings.TLSConfig.TLS"><i></i>
                </label>
              </div>
            </div>
            <!-- !tls-checkbox -->

            <!-- tls-skip-verify -->
            <div class="form-group">
              <div class="col-sm-12">
                <label for="tls" class="control-label text-left">
                  Skip verification of server certificate
                  <portainer-tooltip position="bottom" message="Skip the verification of the server TLS certificate. Not recommended on unsecured networks."></portainer-tooltip>
                </label>
                <label class="switch" style="margin-left: 20px;">
                  <input type="checkbox" ng-model="LDAPSettings.TLSConfig.TLSSkipVerify"><i></i>
                </label>
              </div>
            </div>
            <!-- !tls-skip-verify -->

            <!-- tls-certs -->
            <div ng-if="LDAPSettings.TLSConfig.TLS || LDAPSettings.StartTLS">
              <!-- ca-input -->
              <div class="form-group" ng-if="!LDAPSettings.TLSConfig.TLSSkipVerify">
                <label class="col-sm-2 control-label text-left">TLS CA certificate</label>
                <div class="col-sm-10">
                  <button class="btn btn-sm btn-primary" ngf-select ng-model="formValues.TLSCACert">Select file</button>
                  <span style="margin-left: 5px;">
                    {{ formValues.TLSCACert.name }}
                    <i class="fa fa-check green-icon" ng-if="formValues.TLSCACert && formValues.TLSCACert === LDAPSettings.TLSConfig.TLSCACert" aria-hidden="true"></i>
                    <i class="fa fa-times red-icon" ng-if="!formValues.TLSCACert" aria-hidden="true"></i>
                    <i class="fa fa-circle-o-notch fa-spin" ng-if="state.uploadInProgress"></i>
                  </span>
                </div>
              </div>
              <!-- !ca-input -->
            </div>
            <!-- !tls-certs -->

            <div class="form-group" ng-if="LDAPSettings.TLSConfig.TLS || LDAPSettings.StartTLS">
              <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
                Connectivity check
                <i class="fa fa-check green-icon" style="margin-left: 5px;" ng-if="state.successfulConnectivityCheck"></i>
                <i class="fa fa-times red-icon" style="margin-left: 5px;" ng-if="state.failedConnectivityCheck"></i>
              </label>
              <div class="col-sm-9 col-lg-10">
                <button type="button" class="btn btn-primary btn-sm" ng-click="LDAPConnectivityCheck()" ng-disabled="!LDAPSettings.URL || !LDAPSettings.ReaderDN || !LDAPSettings.Password || (!formValues.TLSCACert && !LDAPSettings.TLSConfig.TLSSkipVerify)">Test connectivity</button>
                <i id="connectivityCheckSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
              </div>
            </div>

            <div class="col-sm-12 form-section-title">
              User search configurations
            </div>

            <!-- search-settings -->
            <div ng-repeat="config in LDAPSettings.SearchSettings | limitTo: (1 - LDAPSettings.SearchSettings)" style="margin-top: 5px;">

              <div class="form-group" ng-if="$index > 0">
                <span class="col-sm-12 text-muted small">
                  Extra search configuration
                </span>
              </div>

              <div class="form-group">
                <label for="ldap_basedn_{{$index}}" class="col-sm-4 col-md-2 control-label text-left">
                  Base DN
                  <portainer-tooltip position="bottom" message="The distinguished name of the element from which the LDAP server will search for users."></portainer-tooltip>
                </label>
                <div class="col-sm-8 col-md-4">
                  <input type="text" class="form-control" id="ldap_basedn_{{$index}}" ng-model="config.BaseDN" placeholder="dc=ldap,dc=domain,dc=tld">
                </div>

                <label for="ldap_username_att_{{$index}}" class="col-sm-4 col-md-3 col-lg-2 margin-sm-top control-label text-left">
                  Username attribute
                  <portainer-tooltip position="bottom" message="LDAP attribute which denotes the username."></portainer-tooltip>
                </label>
                <div class="col-sm-8 col-md-3 col-lg-4 margin-sm-top">
                  <input type="text" class="form-control" id="ldap_username_att_{{$index}}" ng-model="config.UserNameAttribute" placeholder="uid">
                </div>
              </div>
              <div class="form-group">
                <label for="ldap_filter_{{$index}}" class="col-sm-4 col-md-2 control-label text-left">
                  Filter
                  <portainer-tooltip position="bottom" message="The LDAP search filter used to select user elements, optional."></portainer-tooltip>
                </label>
                <div class="col-sm-7 col-md-9">
                  <input type="text" class="form-control" id="ldap_filter_{{$index}}" ng-model="config.Filter" placeholder="(objectClass=account)">
                </div>
                <div class="col-sm-1" ng-if="$index > 0">
                  <button class="btn btn-sm btn-danger" type="button" ng-click="removeSearchConfiguration($index)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                  </button>
                </div>
              </div>

              <div class="form-group">
                <span class="label label-default interactive" style="margin-left: 10px;" ng-click="addSearchConfiguration()">
                  <i class="fa fa-plus-circle" aria-hidden="true"></i> add search configuration
                </span>
              </div>

            </div>
            <!-- !search-settings -->
          </div>

          <!-- actions -->
          <div class="form-group">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ng-click="saveSettings()">Save</button>
              <i id="updateSettingsSpinner" class="fa fa-cog fa-spin" style="margin-left: 5px; display: none;"></i>
              <!-- <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span> -->
            </div>
          </div>
          <!-- !actions -->

        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>