1<!-- Add & Remove Role Groups Buttons -->
2<div class="row column">
3  <button
4    type="button"
5    ng-class="{'disabled' : roleGroupType === '' }"
6    ng-disabled="roleGroupType === ''"
7    class="btn btn-tertiary"
8    ng-click="addGroupFn(); $parent.newGroup={}"
9  >
10    <icon aria-hidden="true" file="icon-plus.svg"></icon>
11    <span>Add role group</span>
12  </button>
13  <button
14    type="button"
15    ng-disabled="roleGroupType === '' || !hasSelectedGroup"
16    class="btn btn-tertiary"
17    ng-click="removeMultipleRoleGroupsFn() "
18  >
19    <icon aria-hidden="true" file="icon-trashcan.svg"></icon>
20    <span>Remove role groups</span>
21  </button>
22</div>
23<!-- LDAP Role Groups Table -->
24<div class="ldap__table">
25  <!-- LDAP Role Groups Table Header -->
26  <div class="table__row-header row column" ng-class="{'disabled' : !enabled }">
27    <div class="row column">
28      <div class="table__cell-select">
29        <label class="control-check">
30          <span class="screen-reader-offscreen" id="select-all-groups"
31            >select or deselect all groups</span
32          >
33          <input
34            type="checkbox"
35            aria-labelledby="select-all-groups"
36            ng-disabled="!enabled || roleGroups.length < 1 "
37            ng-click="toggleAll()"
38            ng-checked="roleGroupIsSelectedChanged()"
39            ng-model="all"
40          />
41          <span class="control__indicator"></span>
42        </label>
43      </div>
44      <div class="table__cell-sort">
45        <div class="column small-2 sort_button_wrapper">
46          <button
47            class="sort-ascending"
48            aria-label="sort group names in ascending order"
49            ng-click="sortBy('RemoteGroup', false)"
50            ng-disabled="!enabled || roleGroups.length < 1 "
51          ></button>
52          <button
53            class="sort-descending"
54            aria-label="sort group names in descending order"
55            ng-click="sortBy('RemoteGroup', true)"
56            ng-disabled="!enabled || roleGroups.length < 1 "
57          ></button>
58        </div>
59      </div>
60      <div class="table__cell-ldap-group">
61        Group name
62      </div>
63      <div class="table__cell-sort">
64        <div class="column small-2 sort_button_wrapper">
65          <button
66            class="sort-ascending"
67            aria-label="sort group privileges in ascending order"
68            ng-click="sortBy('LocalRole', false)"
69            ng-disabled="!enabled || roleGroups.length < 1 "
70          ></button>
71          <button
72            class="sort-descending"
73            aria-label="sort group privileges in descending order"
74            ng-click="sortBy('LocalRole', true)"
75            ng-disabled="!enabled || roleGroups.length < 1 "
76          ></button>
77        </div>
78      </div>
79      <div class="table__cell-ldap-role">
80        Group privilege
81      </div>
82    </div>
83  </div>
84  <!-- LDAP Disabled Role Groups Table Row -->
85  <div class="empty__logs" ng-if="roleGroups.length < 1 || !enabled">
86    <p
87      ng-if="!roleGroups.length && roleGroupType"
88    >
89      No role groups have been created yet.
90    </p>
91    <p ng-if=" roleGroupType === '' " ng-class="{'disabled' : !enabled }">
92      LDAP authentication must be enabled before creating role groups.
93    </p>
94  </div>
95  <div
96    ng-repeat="group in roleGroups | orderBy:sortPropertyName:reverse track by $index "
97  >
98    <!-- Enabled LDAP Role Groups Table Rows -->
99    <div class="row column table__row-value" ng-if="enabled">
100      <div class="table__cell-select select-header">
101        <label class="control-check">
102          <span class="screen-reader-offscreen" id="select-group"
103            >select or deselect {{ group.RemoteGroup }}</span
104          >
105          <input
106            type="checkbox"
107            aria-labelledby="select-group"
108            ng-model="group.isSelected"
109            ng-change="roleGroupIsSelectedChanged(); optionToggled()"
110          />
111          <span class="control__indicator"></span>
112        </label>
113      </div>
114      <div class="table__cell-ldap">
115        {{ group.RemoteGroup }}
116      </div>
117      <div class="table__cell-ldap">
118        {{ group.LocalRole }}
119      </div>
120      <div class="table__cell-buttons">
121        <button
122          class="btn btn-tertiary"
123          type="button"
124          aria-label="edit group {{ group.RemoteGroup }}"
125          ng-click="editGroupFn(group.RemoteGroup, group.LocalRole, $index); newGroup.RemoteGroup = group.RemoteGroup; newGroup.LocalRole = group.LocalRole; selectedGroupIndex = $index"
126        >
127          <icon aria-hidden="true" file="icon-edit.svg"></icon>
128        </button>
129        <button
130          class="btn btn-tertiary"
131          type="button"
132          aria-label="delete group {{ group.RemoteGroup }}"
133          ng-class="{'disabled' : roleGroups.length < 1}"
134          ng-click="removeGroupFn($index); newGroup.RemoteGroup = group.RemoteGroup; newGroup.LocalRole = group.LocalRole; selectedGroupIndex = $index"
135        >
136          <icon aria-hidden="true" file="icon-trashcan.svg"></icon>
137        </button>
138      </div>
139    </div>
140  </div>
141</div>
142<!-- Add/Edit Role Group Modal -->
143<section
144  class="modal"
145  aria-labelledby="add-or-edit-group"
146  role="dialog"
147  ng-class="{'active': addGroup || editGroup}"
148>
149  <h3 id="add-or-edit-group" class="subhead">
150    {{ addGroup ? "Add new role group" : "Edit group privilege" }}
151  </h3>
152  <div class="modal__content-ldap">
153    <!-- Add Role Group Modal Content -->
154    <div ng-if="addGroup">
155      <form name="add__group__form" id="add__group__form" novalidate>
156        <div class="small-9">
157          <label for="group_name">Role group name</label>
158          <input
159            type="text"
160            name="group_name"
161            id="group_name"
162            ng-model="newGroup.RemoteGroup"
163            required
164          />
165          <div
166            ng-messages="add__group__form.group_name.$error"
167            class="form-error"
168            ng-class="{'visible' : add__group__form.group_name.$touched}"
169          >
170            <p ng-message="required">Field is required</p>
171          </div>
172        </div>
173        <div class="small-9">
174          <label for="group__role">Privilege</label>
175          <select
176            id="group__role"
177            class="select__group-role"
178            name="group__role"
179            ng-model="newGroup.LocalRole"
180            required
181          >
182            <option class="courier-bold" ng-value="">Select an option</option>
183            <option class="courier-bold" ng-repeat="privilege in privileges">{{
184              privilege
185            }}</option>
186          </select>
187          <div
188            ng-messages="add__group__form.group__role.$error"
189            class="form-error"
190            ng-class="{'visible' : add__group__form.group__role.$touched}"
191          >
192            <p ng-message="required">Field is required</p>
193          </div>
194        </div>
195      </form>
196      <div class="form-actions">
197        <button
198          type="button"
199          class="btn btn-primary"
200          ng-class="{'disabled' : add__group__form.$invalid}"
201          ng-click="addRoleGroup(); $parent.addGroup=false; $parent.newGroup={}"
202        >
203          Save
204        </button>
205        <button
206          type="button"
207          class="btn btn-secondary"
208          ng-click="$parent.addGroup=false; $parent.newGroup={}"
209        >
210          Cancel
211        </button>
212      </div>
213    </div>
214    <!-- Edit Role Group Modal Content -->
215    <div ng-if="editGroup">
216      <form name="edit__group__form" id="edit__group__form" novalidate>
217        <label>Role group name</label>
218        <div class="small-9 edit-group-name" ng-model="newGroup.RemoteGroup">
219          {{ newGroup.RemoteGroup }}
220        </div>
221        <div class="small-9">
222          <label for="group__role__edit">Privilege</label>
223          <select
224            id="group__role__edit"
225            name="group__role__edit"
226            ng-model="newGroup.LocalRole"
227            required
228          >
229            <option class="courier-bold" ng-repeat="privilege in privileges">{{
230              privilege
231            }}</option>
232          </select>
233          <div
234            ng-messages="edit__group__form.group__role__edit.$error"
235            class="form-error"
236            ng-class="{'visible' : edit__group__form.group__role__edit.$touched}"
237          >
238            <p ng-message="required">Field is required</p>
239          </div>
240        </div>
241      </form>
242      <div class="form-actions">
243        <button
244          type="button"
245          class="btn btn-primary"
246          ng-click="editRoleGroup();$parent.editGroup=false; $parent.newGroup={}"
247        >
248          Save
249        </button>
250        <button
251          type="button"
252          class="btn btn-secondary"
253          ng-click="$parent.editGroup=false; $parent.newGroup={}"
254        >
255          Cancel
256        </button>
257      </div>
258    </div>
259  </div>
260</section>
261<!-- Remove Role Groups Modal -->
262<section
263  class="modal"
264  role="dialog"
265  aria-labelledby="remove-role-group"
266  ng-class="{'active': removeGroup}"
267>
268  <h3 id="remove-role-group" class="subhead">Remove role group</h3>
269  <div class="modal__content-ldap">
270    <p>Are you sure you want to remove "{{ newGroup.RemoteGroup }}"?</p>
271  </div>
272  <div class="form-actions">
273    <button
274      type="button"
275      class="btn btn-primary"
276      ng-click="removeRoleGroup(); $parent.removeGroup=false; newGroup={}"
277    >
278      Remove
279    </button>
280    <button
281      type="button"
282      class="btn btn-secondary"
283      ng-click="removeGroup=false; $parent.removeGroup=false; newGroup={}"
284    >
285      Cancel
286    </button>
287  </div>
288</section>
289<!-- Remove Multiple Role Groups Modal -->
290<section
291  class="modal"
292  role="dialog"
293  ng-class="{'active': removeMultipleGroups}"
294>
295  <div class="page-header">
296    <h3>Remove role group</h3>
297  </div>
298  <div class="modal__content-ldap">
299    <p>
300      Are you sure you want to remove
301      <span ng-repeat="groups in roleGroups | filter:{isSelected:true}"
302        >{{ $last && !$first ? " and " : $first ? "" : ", "
303        }}{{ "'" + groups.RemoteGroup + "'" }}?</span
304      >
305    </p>
306  </div>
307  <div class="form-actions">
308    <button
309      type="button"
310      class="btn btn-primary"
311      ng-click="removeMultipleRoleGroups();$parent.removeMultipleGroups=false; $parent.newGroup={}"
312    >
313      Remove
314    </button>
315    <button
316      type="button"
317      class="btn btn-secondary"
318      ng-click="removeMultipleGroups = false"
319    >
320      Cancel
321    </button>
322  </div>
323</section>
324<div
325  class="modal-overlay"
326  tabindex="-1"
327  ng-class="{'active': addGroup || editGroup || removeGroup || removeMultipleGroups}"
328></div>
329