| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 1 | <loader loading="loading"></loader> | 
|  | 2 | <div class="ldap" id="configuration-ldap"> | 
|  | 3 | <div class="row column"> | 
| miramurali23 | afc8a79 | 2019-06-17 13:07:24 -0500 | [diff] [blame] | 4 | <h1>LDAP</h1> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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"> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 16 | <input type="checkbox" aria-labelledby="ldap-auth-label" | 
|  | 17 | ng-change="updateServiceEnabled(); ldap__configuration.$setUntouched()" | 
|  | 18 | ng-model="ldapProperties.ServiceEnabled" /> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 19 | <span class="control__indicator"></span> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 20 | <span id="ldap-auth-label" class="control__label"> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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"> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 30 | <legend class="screen-reader-offscreen">LDAP Settings</legend> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 31 | <div class="ldap__configure-settings row column"> | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 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}"> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 34 | <input id="secure-ldap-ssl" aria-labelledby="use-ssl" type="checkbox" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 35 | ng-change="ldap__configuration.ldap__uri.$touched = true" | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 36 | ng-model="ldapProperties.useSSL" ng-checked="ldapProperties.useSSL" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 37 | ng-disabled="!ldapCertificate || !caCertificate" /> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 38 | <span class="control__indicator"></span> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 39 | <span class="control__label" id="use-ssl">Secure LDAP using SSL</span> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 40 | </label> | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 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> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 60 | <label class="control-radio control__radio__label">Open LDAP | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 61 | <input type="radio" name="service_enabled_type" id="open-ldap" value="LDAP" | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 67 | <label class="control-radio control__radio__label">Active directory | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 68 | <input type="radio" name="service_enabled_type" id="active-directory" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 69 | ng-change="ldapProperties.EnabledServiceUpdated = true" value="ActiveDirectory" | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 79 | ng-change="ldapProperties.ServiceAddressesUpdated = true" | 
|  | 80 | ng-model="ldapProperties.ServiceAddresses[0]" | 
|  | 81 | ng-pattern="ldapProperties.useSSL ? '^ldaps://.*' : '^ldap://.*'" | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 82 | required /> | 
|  | 83 | <div ng-messages="ldap__configuration.ldap__uri.$error" class="form-error" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 84 | ng-class="{'visible' : ldap__configuration.ldap__uri.$touched || submitted}" role="alert"> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 85 | <p ng-message="required">Field is required</p> | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 86 | <p ng-message="pattern">Must start with {{ldapProperties.useSSL ? 'ldaps://' : 'ldap://'}}</p> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 94 | ng-class="{'visible' : ldap__configuration.ldap__bind__dn.$touched || submitted}" role="alert"> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 109 | ng-class="{'visible' : ldap__configuration.ldap__bind_pw.$touched || submitted}" role="alert"> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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" | 
| Derick Montague | 7bdb91d | 2019-09-24 12:09:30 -0500 | [diff] [blame] | 119 | ng-class="{'visible' : ldap__configuration.ldap__base__dn.$touched || submitted}" role="alert"> | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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"> | 
| Dixsie Wolmers | 28e9ed8 | 2019-07-11 13:46:08 -0500 | [diff] [blame] | 136 | <button type="submit" class="btn btn-primary" ng-disabled="!ldap__configuration.$valid" | 
| beccabroek | 5e258e4 | 2018-11-07 12:22:31 -0600 | [diff] [blame] | 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> |