1<loader loading="loading"></loader>
2<div class="ldap" id="configuration-ldap">
3  <div class="row column">
4    <h1>LDAP</h1>
5  </div>
6  <div class="row column">
7    <p>Configure LDAP settings and manage role groups.</p>
8  </div>
9  <div class="row column">
10    <h2 class="subhead">
11      Settings
12    </h2>
13  </div>
14  <div class="row column">
15    <label class="control-check ldap__control-check">
16      <input type="checkbox" aria-labelledby="ldap-auth-label"
17      ng-change="updateServiceEnabled(); ldap__configuration.$setUntouched()"
18      ng-model="ldapProperties.ServiceEnabled" />
19      <span class="control__indicator"></span>
20      <span id="ldap-auth-label" class="control__label">
21        <strong>Enable LDAP authentication</strong> <br>
22        LDAP authentication must be enabled to modify role groups.
23      </span>
24    </label>
25  </div>
26  <div class="row column">
27    <form id="ldap__configuration" name="ldap__configuration" ng-class="{'submitted': submitted}"
28      class="ldap__configuration" novalidate>
29      <fieldset ng-disabled="!ldapProperties.ServiceEnabled">
30        <legend class="screen-reader-offscreen">LDAP Settings</legend>
31        <div class="ldap__configure-settings row column">
32          <div class="large-3 column ldap__ssl-column" ng-class="{'disabled' : !ldapProperties.ServiceEnabled}">
33            <label class="control-check" ng-class="{'disabled' : (!ldapCertificate || !caCertificate) || !ldapProperties.ServiceEnabled}">
34              <input id="secure-ldap-ssl" aria-labelledby="use-ssl" type="checkbox"
35                ng-change="ldap__configuration.ldap__uri.$touched = true"
36                ng-model="ldapProperties.useSSL" ng-checked="ldapProperties.useSSL"
37                ng-disabled="!ldapCertificate || !caCertificate" />
38              <span class="control__indicator"></span>
39              <span class="control__label" id="use-ssl">Secure LDAP using SSL</span>
40            </label>
41            <dl class="ldap__certificate-info" ng-if="caCertificate && ldapCertificate">
42              <dt>CA certificate valid until</dt>
43              <dd>{{caCertificate.ValidNotAfter | localeDate }}</dd>
44            </dl>
45            <dl class="ldap__certificate-info" ng-if="caCertificate && ldapCertificate">
46              <dt>LDAP certificate valid until</dt>
47              <dd>{{ldapCertificate.ValidNotAfter | localeDate }}</dd>
48            </dl>
49            <p class="ldap__certificate-info" ng-if="!ldapCertificate || !caCertificate">
50              <span>A CA certificate and LDAP certificate are required. One or more are missing.</span>
51            </p>
52            <p ng-if="!ldapCertificate || !caCertificate" class="ldap__certificate-info">
53              <a ng-class="{'disabled': !ldapProperties.ServiceEnabled}" ng-href="{{ldapProperties.ServiceEnabled ? '#/access-control/ssl-certificates' : ''}}">Go to SSL certificates</a>
54            </p>
55          </div>
56          <div class="large-9 columns ldap__server-info">
57            <div class="column service-type-column">
58              <fieldset class="ldap__server-info-service-type">
59                <legend class="content-label">Service Type</legend>
60                <label class="control-radio control__radio__label">Open LDAP
61                  <input type="radio" name="service_enabled_type" id="open-ldap" value="LDAP"
62                    ng-checked="ldapProperties.LDAPServiceEnabled"
63                    ng-change="ldapProperties.EnabledServiceUpdated = true" ng-model="ldapProperties.EnabledServiceType"
64                    required />
65                  <span class="control__indicator control__indicator-on control__indicator-service-type"></span>
66                </label>
67                <label class="control-radio control__radio__label">Active directory
68                  <input type="radio" name="service_enabled_type" id="active-directory"
69                    ng-change="ldapProperties.EnabledServiceUpdated = true" value="ActiveDirectory"
70                    ng-checked="ldapProperties.ADServiceEnabled" ng-model="ldapProperties.EnabledServiceType"
71                    required />
72                  <span class="control__indicator control__indicator-on control__indicator-service-type"></span>
73                </label>
74              </fieldset>
75            </div>
76            <div class="medium-6 large-4 columns">
77              <label for="ldap__uri">Server uri</label>
78              <input id="ldap__uri" name="ldap__uri" type="text"
79                ng-change="ldapProperties.ServiceAddressesUpdated = true"
80                ng-model="ldapProperties.ServiceAddresses[0]"
81                ng-pattern="ldapProperties.useSSL ? '^ldaps://.*' : '^ldap://.*'"
82                required />
83              <div ng-messages="ldap__configuration.ldap__uri.$error" class="form-error"
84                ng-class="{'visible' : ldap__configuration.ldap__uri.$touched || submitted}" role="alert">
85                <p ng-message="required">Field is required</p>
86                <p ng-message="pattern">Must start with {{ldapProperties.useSSL ? 'ldaps://' : 'ldap://'}}</p>
87              </div>
88            </div>
89            <div class="medium-6 large-4 columns">
90              <label for="ldap__bind__dn">Bind DN</label>
91              <input id="ldap__bind__dn" name="ldap__bind__dn" type="text"
92                ng-change="ldapProperties.UsernameUpdated = true" ng-model="ldapProperties.Username" required />
93              <div ng-messages="ldap__configuration.ldap__bind__dn.$error" class="form-error"
94                ng-class="{'visible' : ldap__configuration.ldap__bind__dn.$touched || submitted}" role="alert">
95                <p ng-message="required">Field is required</p>
96              </div>
97            </div>
98            <div class="medium-6 large-4 columns">
99              <label for="ldap__bind_pw">Bind password</label>
100              <input id="ldap__bind_pw" type="{{showpassword ? 'text' : 'password'}}" name="ldap__bind_pw"
101                ng-change="ldapProperties.PasswordUpdated = true" autocomplete="off" ng-model="ldapProperties.Password"
102                required />
103              <button ng-model="showpassword" ng-class="{'disabled' : !ldap__configuration.$valid}"
104                ng-click="togglePassword = !togglePassword; showpassword = !showpassword;" class="password-toggle">
105                <span ng-hide="togglePassword">Show</span>
106                <span ng-show="togglePassword">Hide</span>
107              </button>
108              <div ng-messages="ldap__configuration.ldap__bind_pw.$error" class="form-error"
109                ng-class="{'visible' : ldap__configuration.ldap__bind_pw.$touched || submitted}" role="alert">
110                <p ng-message="required">Field is required</p>
111              </div>
112            </div>
113            <div class="medium-6 large-4 columns">
114              <label for="ldap__base__dn">Base DN</label>
115              <input id="ldap__base__dn" name="ldap__base__dn" type="text"
116                ng-change="ldapProperties.BaseDistinguishedNamesUpdated = true"
117                ng-model="ldapProperties.BaseDistinguishedNames[0]" required />
118              <div ng-messages="ldap__configuration.ldap__base__dn.$error" class="form-error"
119                ng-class="{'visible' : ldap__configuration.ldap__base__dn.$touched || submitted}" role="alert">
120                <p ng-message="required">Field is required</p>
121              </div>
122            </div>
123            <div class="medium-6 large-4 columns">
124              <label for="ldap__user_attribute">User id attribute (optional)</label>
125              <input id="ldap__user_attribute" name="ldap__user_attribute" type="text"
126                ng-change="ldapProperties.UsernameAttributeUpdated = true" ng-model="ldapProperties.UsernameAttribute"
127                class="ldap__optional-field" />
128            </div>
129            <div class="medium-6 large-4 columns">
130              <label for="ldap__group_attribute">Group id attribute (optional)</label>
131              <input id="ldap__group_attribute" name="ldap__group_attribute" type="text"
132                ng-change="ldapProperties.GroupsAttributeUpdated = true" ng-model="ldapProperties.GroupsAttribute"
133                class="ldap__optional-field" />
134            </div>
135            <div class="column ldap__configuration-buttons">
136              <button type="submit" class="btn btn-primary" ng-disabled="!ldap__configuration.$valid"
137                ng-click="$parent.submitted=true; ldap__configuration.$valid && saveLdapSettings(); ldap__configuration.$setUntouched()">Save</button>
138              <button type="button" class="btn btn-secondary"
139                ng-click="loadLdap(); ldap__configuration.$setUntouched()">Reset</button>
140            </div>
141      </fieldset>
142    </form>
143  </div>
144</div>
145<div class="ldap-groups row column">
146  <h2 class="small-12 subhead">
147    Role groups
148  </h2>
149  <div class="row column">
150    <div class="small-12">
151      <ldap-user-roles role-groups="roleGroups" role-group-type="roleGroupType" enabled="ldapProperties.ServiceEnabled">
152      </ldap-user-roles>
153    </div>
154  </div>
155</div>