cloudron-box/src/views/users.html

<!-- Modal add user -->
<div class="modal fade" id="userAddModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add User</h4>
            </div>
            <div class="modal-body">
                <form name="useradd_form" role="form" ng-submit="useradd.submit()" autocomplete="off">
                    <div class="form-group" ng-class="{ 'has-error': (useradd_form.displayName.$dirty && useradd_form.displayName.$invalid) || (!useradd_form.displayName.$dirty && useradd.error.displayName) }">
                        <label class="control-label">Full Name</label>
                        <div class="control-label" ng-show="(!useradd_form.displayName.$dirty && useradd.error.displayName) || (useradd_form.displayName.$dirty && useradd_form.displayName.$invalid) || (!useradd_form.displayName.$dirty && useradd.error.displayName)">
                            <small ng-show="useradd_form.displayName.$error.displayName">This is not a valid name</small>
                            <small ng-show="!useradd_form.displayName.$dirty && useradd.error.displayName">{{ useradd.error.displayName }}</small>
                        </div>
                        <input type="text" class="form-control" ng-model="useradd.displayName" name="displayName" id="inputUserAddDisplayName" ng-required autofocus autocomplete="off">
                    </div>

                    <input type="password" style="display: none;">
                    <div class="form-group" ng-class="{ 'has-error': (useradd_form.email.$dirty && useradd_form.email.$invalid) || (!useradd_form.email.$dirty && useradd.error.email) }">
                        <label class="control-label">Email</label>
                        <div class="control-label" ng-show="(!useradd_form.email.$dirty && useradd.error.email) || (useradd_form.email.$dirty && useradd_form.email.$invalid) || (!useradd_form.email.$dirty && useradd.error.email)">
                            <small ng-show="useradd_form.email.$error.required">An email is required</small>
                            <small ng-show="useradd_form.email.$error.email">This is not a valid email</small>
                            <small ng-show="!useradd_form.email.$dirty && useradd.error.email">{{ useradd.error.email }}</small>
                        </div>
                        <input type="email" class="form-control" ng-model="useradd.email" name="email" id="inputUserAddEmail" required>
                    </div>

                    <div class="form-group" ng-class="{ 'has-error': (useradd_form.username.$dirty && useradd_form.username.$invalid) || (!useradd_form.username.$dirty && useradd.error.username) }">
                        <label class="control-label">Username</label>
                        <div class="control-label" ng-show="(!useradd_form.username.$dirty && useradd.error.username) || (useradd_form.username.$dirty && useradd_form.username.$invalid) || (!useradd_form.username.$dirty && useradd.error.username)">
                            <small ng-show="useradd_form.username.$error.username">This is not a valid username</small>
                            <small ng-show="!useradd_form.username.$dirty && useradd.error.username">{{ useradd.error.username }}</small>
                        </div>
                        <input type="text" class="form-control" ng-model="useradd.username" name="username" id="inputUserAddUsername" placeholder="Optional. If not provided, user can pick during sign up">
                    </div>

                    <div class="form-group">
                        <label class="control-label">Groups</label>
                        <div class="control-label">
                            <div ng-show="groups.length === 0">No groups available.</div>
                            <multiselect ng-show="groups.length !== 0" ng-model="useradd.selectedGroups" options="group.name for group in groups" data-compare-by="name" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="useradd.admin"> User is an administrator <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#administrators" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
                            </label>
                        </div>
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="useradd.sendInvite" id="inputUserAddSendInvite"> Send an invitation email now
                        </label>
                    </div>
                    <input class="ng-hide" type="submit" ng-disabled="useradd_form.$invalid || useradd.busy"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" ng-click="useradd.submit()" ng-disabled="useradd_form.$invalid || useradd.busy"><i class="fa fa-circle-notch fa-spin" ng-show="useradd.busy"></i> Add User</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal remove user -->
<div class="modal fade" id="userRemoveModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Delete user {{ userremove.userInfo.username || userremove.userInfo.email }}</h4>
      </div>
      <div class="modal-body">
        After deletion, the user will not be able to access the dashboard or login to any of the apps. Note that any user data inside
        the apps is not removed.
        <br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" ng-click="userremove.submit()" ng-disabled="userremove.busy"><i class="fa fa-circle-notch fa-spin" ng-show="userremove.busy"></i> Delete</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal edit user -->
<div class="modal fade" id="userEditModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit user {{ useredit.userInfo.username || useredit.userInfo.email }}</h4>
      </div>
      <div class="modal-body">
        <div ng-show="useredit.source">
          <p class="text-warning">This user is synced from the external LDAP directory.</p>
          <p><label>Display Name</label><br/><input type="text" class="form-control" ng-disabled="true" ng-model="useredit.displayName">
          <p><label>Email</label><br/><input type="text" class="form-control" ng-disabled="true" ng-model="useredit.email"></p>
        </div>

        <form name="useredit_form" role="form" ng-submit="useredit.submit()" autocomplete="off">
          <div class="form-group" ng-hide="useredit.source" ng-class="{ 'has-error': (useredit_form.displayName.$dirty && useredit_form.displayName.$invalid) || (!useredit_form.displayName.$dirty && useredit.error.displayName) }">
            <label class="control-label">Display Name</label>
            <div class="control-label" ng-show="(!useredit_form.displayName.$dirty && useredit.error.displayName) || (useredit_form.displayName.$dirty && useredit_form.displayName.$invalid) || (!useredit_form.displayName.$dirty && useredit.error.displayName)">
              <small ng-show="useredit_form.displayName.$error.required">Name is required</small>
              <small ng-show="!useredit_form.displayName.$dirty && useredit.error.displayName">{{ useredit.error.displayName }}</small>
            </div>
            <input type="text" class="form-control" ng-model="useredit.displayName" name="displayName" required autofocus autocomplete="off">
          </div>
          <div class="form-group" ng-hide="useredit.source" ng-class="{ 'has-error': (useredit_form.email.$dirty && useredit_form.email.$invalid) || (!useredit_form.email.$dirty && useredit.error.email) }">
            <label class="control-label">Primary email</label>
            <div class="control-label" ng-show="(!useredit_form.email.$dirty && useredit.error.email) || (useredit_form.email.$dirty && useredit_form.email.$invalid) || (!useredit_form.email.$dirty && useredit.error.email)">
              <small ng-show="useredit_form.email.$error.required">An email is required</small>
              <small ng-show="useredit_form.email.$error.email">This is not a valid email</small>
              <small ng-show="!useredit_form.email.$dirty && useredit.error.email">{{ useredit.error.email }}</small>
            </div>
            <input type="email" class="form-control" ng-model="useredit.email" name="email" required>
          </div>
          <div class="form-group" ng-hide="useredit.source" ng-class="{ 'has-error': (useredit_form.fallbackEmail.$dirty && useredit_form.fallbackEmail.$invalid) || (!useredit_form.fallbackEmail.$dirty && useredit.error.fallbackEmail) }">
            <label class="control-label">Password recovery email</label>
            <div class="control-label" ng-show="(!useredit_form.fallbackEmail.$dirty && useredit.error.fallbackEmail) || (useredit_form.fallbackEmail.$dirty && useredit_form.fallbackEmail.$invalid) || (!useredit_form.fallbackEmail.$dirty && useredit.error.fallbackEmail)">
              <small ng-show="useredit_form.fallbackEmail.$error.required">An email is required</small>
              <small ng-show="useredit_form.fallbackEmail.$error.fallbackEmail">This is not a valid email</small>
              <small ng-show="!useredit_form.fallbackEmail.$dirty && useredit.error.fallbackEmail">{{ useredit.error.fallbackEmail }}</small>
            </div>
            <input type="fallbackEmail" class="form-control" ng-model="useredit.fallbackEmail" name="fallbackEmail" required>
          </div>
          <div class="form-group">
            <label class="control-label">Groups</label>
            <div class="control-label">
              <div ng-show="groups.length === 0">No groups available.</div>
              <multiselect ng-show="groups.length !== 0" ng-model="useredit.selectedGroups" options="group.name for group in groups" data-compare-by="name" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
            </div>
          </div>
          <div class="form-group" ng-hide="isMe(useredit.userInfo)">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="useredit.admin"> User is an administrator <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#administrators" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
              </label>
            </div>
          </div>
          <div class="form-group" ng-hide="isMe(useredit.userInfo)">
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model="useredit.active"> User is active <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#disabling-a-user" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
              </label>
            </div>
          </div>
          <input class="hide" type="submit" ng-disabled="useredit_form.$invalid || useredit.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success" ng-click="useredit.submit()" ng-disabled="useredit_form.$invalid || useredit.busy"><i class="fa fa-circle-notch fa-spin" ng-show="useredit.busy"></i> Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal add group -->
<div class="modal fade" id="groupAddModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Add Group</h4>
      </div>
      <div class="modal-body">
        <form name="groupAddForm" role="form" novalidate ng-submit="groupAdd.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': (groupAddForm.name.$dirty && groupAddForm.name.$invalid) || (!groupAddForm.name.$dirty && groupAdd.error.name) }">
            <label class="control-label" for="groupAddName">Name</label>
            <div class="control-label" ng-show="(!groupAddForm.name.$dirty && groupAdd.error.name) || (groupAddForm.name.$dirty && groupAddForm.name.$invalid) || (!groupAddForm.name.$dirty && groupAdd.error.name)">
              <small ng-show="groupAddForm.name.$error.required">A name is required</small>
              <small ng-show="groupAddForm.name.$error.minlength">The name is too short</small>
              <small ng-show="groupAddForm.name.$error.maxlength">The name is too long</small>
              <small ng-show="!groupAddForm.name.$dirty && groupAdd.error.name">{{ groupAdd.error.name }}</small>
            </div>
            <input type="text" class="form-control" ng-model="groupAdd.name" id="groupAddName" name="name" ng-maxlength="200" ng-minlength="1" required autofocus>
          </div>
          <div class="form-group">
            <label class="control-label">Users</label>
            <div class="control-label">
              <multiselect ng-model="groupAdd.selectedUsers" options="(user.username || user.email) for user in allUsers" data-compare-by="email" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
            </div>
          </div>
          <input class="hide" type="submit" ng-disabled="groupAddForm.$invalid || groupAdd.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success" ng-click="groupAdd.submit()" ng-disabled="groupAddForm.$invalid || groupAdd.busy"><i class="fa fa-circle-notch fa-spin" ng-show="groupAdd.busy"></i> Add Group</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal edit group -->
<div class="modal fade" id="groupEditModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit group {{ groupEdit.groupInfo.name }}</h4>
      </div>
      <div class="modal-body">
        <form name="groupEdit_form" role="form" ng-submit="groupEdit.submit()" autocomplete="off">
          <div class="form-group" ng-class="{ 'has-error': groupEditForm.groupName.$invalid }">
            <label class="control-label">Group name</label>
            <input type="text" class="form-control" ng-model="groupEdit.name" name="groupName" ng-disabled="groupEdit.busy" autofocus>
          </div>
          <div class="form-group">
            <label class="control-label">Users</label>
            <div class="control-label">
              <multiselect ng-model="groupEdit.selectedUsers" options="(user.username || user.email) for user in allUsers" data-compare-by="email" data-multiple="true" filter-after-rows="5" scroll-after-rows="10"></multiselect>
            </div>
          </div>
          <input class="hide" type="submit" ng-disabled="groupEdit_form.$invalid || useredit.busy"/>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success" ng-click="groupEdit.submit()" ng-disabled="groupEdit_form.$invalid || groupEdit.busy"><i class="fa fa-circle-notch fa-spin" ng-show="groupEdit.busy"></i> Save</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal remove group -->
<div class="modal fade" id="groupRemoveModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Delete group {{ groupRemove.group.name }}</h4>
      </div>
      <div class="modal-body">
        <div ng-show="groupRemove.memberCount" class="text-danger">
          <b>This group still has {{ groupRemove.memberCount }} member(s). Are you sure this group is not used?</b>
          <br/>
          <br/>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-danger" ng-click="groupRemove.submit()" ng-disabled="groupRemove.busy"><i class="fa fa-circle-notch fa-spin" ng-show="groupRemove.busy"></i> Delete</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal invite -->
<div class="modal fade" id="invitationModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Setup link for User {{invitation.user.username || invitation.user.email}}</h4>
            </div>
            <div class="modal-body">
                <p>Use the link below to setup {{ invitation.user.username || invitation.user.email }}'s account or reset their password:</p>
                <div class="input-group">
                    <input type="text" id="setupLinkInput" class="form-control" ng-value="invitation.setupLink" readonly/>
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="setupLinkButton" type="button" data-clipboard-target="#setupLinkInput"><i class="fa fa-clipboard"></i></button>
                    </span>
                </div>
                <br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" ng-click="invitation.email()" ng-disabled="invitation.busy"><i class="fa fa-circle-notch fa-spin" ng-show="invitation.busy"></i> Email link to user</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal external ldap -->
<div class="modal fade" id="externalLdapModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Configure LDAP</h4>
      </div>
      <div class="modal-body">
        <p class="has-error text-center" ng-show="externalLdap.error.generic">{{ externalLdap.error.generic }}</p>

        <div class="form-group">
          <label class="control-label" for="ldapProvider">LDAP provider <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#external-ldap" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
          <select class="form-control" id="ldapProvider" ng-model="externalLdap.provider" ng-options="a.value as a.name for a in ldapProvider"></select>
        </div>

        <div uib-collapse="externalLdap.provider === 'noop'">
          <form name="externalLdapConfigForm" role="form" novalidate ng-submit="externalLdap.submit()" autocomplete="off">
            <fieldset>
              <!-- avoid browsers to attempt an autofill for bindDN/bindPassword -->
              <input type="password" style="display: none;">

              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="externalLdap.autoCreate"> Auto create users on first login
                  </label>
                </div>
              </div>

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.url }">
                <label class="control-label" for="inputExternalLdapConfigUrl">Server Url</label>
                <input type="text" class="form-control" ng-model="externalLdap.url" id="inputExternalLdapConfigUrl" name="url" ng-disabled="externalLdap.busy" placeholder="ldaps://example.com:636" required>
              </div>

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.baseDn }">
                <label class="control-label" for="inputExternalLdapConfigBaseDn">Base DN</label>
                <input type="text" class="form-control" ng-model="externalLdap.baseDn" id="inputExternalLdapConfigBaseDn" name="baseDn" ng-disabled="externalLdap.busy" placeholder="ou=users,dc=example,dc=com" required>
              </div>

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.filter }">
                <label class="control-label" for="inputExternalLdapConfigFilter">Filter</label>
                <input type="text" class="form-control" ng-model="externalLdap.filter" id="inputExternalLdapConfigFilter" name="filter" ng-disabled="externalLdap.busy" placeholder="(objectClass=inetOrgPerson)" required>
              </div>

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.usernameField }">
                <label class="control-label" for="inputExternalLdapConfigUsernameField">Username Field (case sensitive)</label>
                <input type="text" class="form-control" ng-model="externalLdap.usernameField" id="inputExternalLdapConfigUsernameField" name="usernameField" ng-disabled="externalLdap.busy" placeholder="uid or sAMAcountName">
              </div>

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.credentials }">
                <label class="control-label" for="inputExternalLdapConfigBindDn">Bind DN/Username (optional)</label>
                <input type="text" class="form-control" ng-model="externalLdap.bindDn" id="inputExternalLdapConfigBindDn" name="bindDn" ng-disabled="externalLdap.busy" placeholder="uid=admin,ou=Users,dc=example,dc=com">
              </div>

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.credentials }">
                <label class="control-label" for="inputExternalLdapConfigBindPassword">Bind Password (optional)</label>
                <input type="password" class="form-control" ng-model="externalLdap.bindPassword" id="inputExternalLdapConfigBindPassword" name="bindPassword" ng-disabled="externalLdap.busy" placeholder="">
              </div>

              <input class="ng-hide" type="submit" ng-disabled="externalLdapConfigForm.$invalid"/>
            </fieldset>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="externalLdap.submit()" ng-disabled="externalLdapConfigForm.$invalid || externalLdap.busy"><i class="fa fa-circle-notch fa-spin" ng-show="externalLdap.busy"></i> Save</button>
      </div>
    </div>
  </div>
</div>

<div class="content content-large">

  <div class="text-left">
    <h1>Users
        <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#users" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>

        <button class="btn btn-primary btn-outline pull-right" ng-click="useradd.show()">
            <i class="fa fa-user-plus"></i> New User
        </button>
    </h1>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="filter">
        <input type="text" class="form-control" style="min-width: 350px;" ng-model="userSearchString" ng-model-options="{ debounce: 1000 }" ng-change="updateFilter()" placeholder="Search"/>
        <select class="form-control" ng-model="pageItems" ng-options="a.name for a in pageItemCount" ng-change="updateFilter(true)"></select>
      </div>
      <div class="pagination pull-right">
        <button class="btn btn-default btn-outline" ng-click="showPrevPage()" ng-disabled="userRefreshBusy || currentPage <= 1"><i class="fa fa-angle-double-left"></i> prev</button>
        <button class="btn btn-default btn-outline" ng-click="showNextPage()" ng-disabled="userRefreshBusy || users.length < pageItems.value">next <i class="fa fa-angle-double-right"></i></button>
      </div>
    </div>
  </div>

  <div>
    <div class="card card-large">
      <div class="grid-item-top">
        <div class="row ng-hide" ng-show="userRefreshBusy">
          <div class="col-lg-12 text-center">
            <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
          </div>
        </div>
        <div class="row ng-hide" ng-hide="userRefreshBusy">
          <div class="col-lg-12">
            <table class="table table-hover" style="margin: 0;">
              <thead>
                <tr>
                  <th style="width: 0.5%;"></th>
                  <th style="width:45%">User</th>
                  <th style="width:49.5%" class="hidden-xs hidden-sm">Groups</th>
                  <th style="width: 5%" class="text-right">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-show="users.length === 0">
                  <td colspan="5" class="text-center text-muted">No users found</td>
                </tr>
                <tr ng-repeat="user in users" ng-class="{'text-muted': !user.active}">
                  <td>
                    <i class="fa fa-briefcase arrow" ng-show="user.active && user.admin" uib-tooltip="This user can manage apps, groups and other users" tooltip-class="long nowrap"></i>
                    <i class="fa fa-ban" ng-show="!user.active" uib-tooltip="User is inactive"></i>
                  </td>
                  <td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-show="user.username">
                    {{ user.displayName }} &nbsp; <span class="text-muted">{{ user.username }}</span> &nbsp; <i ng-show="user.source" class="far fa-address-book" uib-tooltip="From external LDAP directory"></i>
                  </td>
                  <td class="hand elide-table-cell" ng-click="useredit.show(user)" ng-hide="user.username">
                    <span class="text-muted" uib-tooltip="User is not activated yet">{{ user.fallbackEmail }}</span>
                  </td>
                  <td class="text-left hand elide-table-cell hidden-xs hidden-sm" ng-click="useredit.show(user)">
                    <span class="group-badge" ng-repeat="groupId in user.groupIds">
                      {{ groupsById[groupId].name }}
                    </span>
                  </td>

                  <td class="text-right no-wrap" style="vertical-align: bottom">
                    <button ng-disabled="isMe(user) || user.source" class="btn btn-xs btn-default" ng-click="invitation.show(user)" uib-tooltip="Reset password link"><i class="fa fa-paper-plane"></i></button>
                    <button class="btn btn-xs btn-default" ng-click="useredit.show(user)" uib-tooltip="Edit User"><i class="fa fa-pencil-alt"></i></button>
                    <button ng-disabled="isMe(user)" class="btn btn-xs btn-danger" ng-click="userremove.show(user)" uib-tooltip="Remove User"><i class="far fa-trash-alt"></i></button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <br/>

  <div class="text-left">
    <h1>Groups
        <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#groups" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
        <button class="btn btn-primary btn-outline pull-right" ng-click="groupAdd.show()"><i class="fa fa-plus"></i> New Group</button>
    </h1>
  </div>

  <div class="card card-large">
      <div class="grid-item-top">
          <div class="row ng-hide" ng-show="!ready">
              <div class="col-lg-12 text-center">
                  <h2><i class="fa fa-circle-notch fa-spin"></i></h2>
              </div>
          </div>
          <div class="row animateMeOpacity ng-hide" ng-show="ready">
              <div class="col-lg-12">
                  <table class="table table-hover" style="margin: 0;">
                      <thead>
                          <tr>
                              <th style="width: 45%">Name</th>
                              <th style="width: 49.5%" class="hidden-xs hidden-sm">Users</th>
                              <th style="width: 5%" class="text-right">Actions</th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr ng-repeat="group in groups">
                              <td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;" ng-click="groupEdit.show(group)">
                                  {{ group.name }}
                              </td>
                              <td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;" ng-click="groupEdit.show(group)">
                                {{ groupMembers(group) }}
                            </td>
                              <td class="text-right no-wrap" style="vertical-align: bottom">
                                    <button class="btn btn-xs btn-default" ng-click="groupEdit.show(group)" uib-tooltip="Edit Group"><i class="fa fa-pencil-alt"></i></button>
                                  <button class="btn btn-xs btn-danger" ng-click="groupRemove.show(group)" uib-tooltip="Remove Group"><i class="far fa-trash-alt"></i></button>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
      </div>
  </div>

  <div class="text-left" style="margin-top: 50px;">
    <h1>LDAP
        <sup><a ng-href="{{ config.webServerOrigin }}/documentation/user-management/#external-ldap" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
    </h1>
  </div>

  <div class="card card-large">
    <div class="row">
      <div class="col-md-12">
        Cloudron will authenticate users against the configured LDAP server.
      </div>
    </div>
    <br/>

    <div class="row">
      <div class="col-xs-6">
        <span class="text-muted">Provider</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.provider }}</span>
      </div>
    </div>

    <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
      <div class="col-xs-6">
        <span class="text-muted">User auto creation</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.autoCreate ? 'Yes' : 'No' }}</span>
      </div>
    </div>

    <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
      <div class="col-xs-6">
        <span class="text-muted">Server URL</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.url }}</span>
      </div>
    </div>

    <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
      <div class="col-xs-6">
        <span class="text-muted">Base DN</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.baseDn }}</span>
      </div>
    </div>

    <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
      <div class="col-xs-6">
        <span class="text-muted">Filter</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.filter }}</span>
      </div>
    </div>

    <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
      <div class="col-xs-6">
        <span class="text-muted">Username Field</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.usernameField || 'uid' }}</span>
      </div>
    </div>

    <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
      <div class="col-xs-6">
        <span class="text-muted">Auth</span>
      </div>
      <div class="col-xs-6 text-right">
        <span>{{ externalLdap.currentConfig.bindDn ? 'Yes' : 'No' }}</span>
      </div>
    </div>

    <div class="row">
      <br/>
      <div class="col-md-12" style="margin-bottom: 10px;">
        <div ng-show="externalLdap.syncBusy" class="progress progress-striped active animateMe">
          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ externalLdap.percent }}%"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <p ng-show="externalLdap.syncBusy">{{ externalLdap.message }}</p>
        <p ng-hide="externalLdap.syncBusy">
          <div class="has-error" ng-show="!externalLdap.active">{{ externalLdap.errorMessage }}</div>
        </p>
      </div>

      <div class="col-md-6 text-right">
        <button class="btn btn-primary pull-right" ng-click="externalLdap.show()">Configure</button>
        <button class="btn btn-success pull-right" ng-disabled="externalLdap.currentConfig.provider === 'noop'" ng-click="externalLdap.sync()"><i class="fa fa-circle-notch fa-spin" ng-show="externalLdap.syncBusy"></i> Synchronize</button>
        <a class="btn btn-primary pull-right" ng-show="externalLdap.taskId" ng-href="/logs.html?taskId={{ externalLdap.taskId }}" target="_blank">Show Logs</a>
      </div>
    </div>
  </div>
</div>