cloudron-box/src/views/users.html

<!-- Modal subscription -->
<div class="modal fade" id="subscriptionRequiredModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Subscription required</h4>
      </div>
      <div class="modal-body">
        <p>To add more users, please setup a paid plain.</p>
      </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="openSubscriptionSetup()">Setup Subscription</button>
      </div>
    </div>
  </div>
</div>

<!-- 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" ng-show="userInfo.isAtLeastAdmin">
                      <label class="control-label">Role <sup><a ng-href="https://docs.cloudron.io/user-management/#roles" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
                      <div class="control-label">
                        <select class="form-control" ng-model="useradd.role" ng-options="role.id as role.name disable when role.disabled for role in roles"></select>
                      </div>
                    </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="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">
        <p class="text-bold text-danger" ng-show="userremove.error">{{ userremove.error }}</p>
        <p ng-hide="userremove.error">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.</p>
      </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-hide="userremove.error" 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">
          <p class="has-error text-center" ng-show="useredit.error.generic">{{ useredit.error.generic }}</p>

          <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" ng-show="!isMe(useredit.userInfo) && userInfo.isAtLeastAdmin">
            <label class="control-label">Role <sup><a ng-href="https://docs.cloudron.io/user-management/#roles" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
            <div class="control-label">
              <select class="form-control" ng-model="useredit.role" ng-options="role.id as role.name disable when role.disabled for role in roles"></select>
            </div>
          </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="id" 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.active"> User is active <sup><a ng-href="https://docs.cloudron.io/user-management/#disable-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">
        <p class="text-warning" ng-show="groupEdit.source">This group is synced from the external LDAP directory.</p>

        <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 || groupEdit.source" 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">Reset password or invite link for <b>{{invitation.user.username || invitation.user.email}}</b></h4>
            </div>
            <div class="modal-body">
                <p>Use the link below to reset {{ invitation.user.username || invitation.user.email }}'s password or re-invite:</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="https://docs.cloudron.io/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" 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">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="externalLdap.acceptSelfSignedCerts"> Accept Self-signed certificate
                  </label>
                </div>
                <p class="text-error" ng-show="externalLdap.error.acceptSelfSignedCerts">Server is using an invlid or self-signed certificate.</p>
              </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">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="externalLdap.syncGroups"> Sync Groups</sup>
                  </label>
                </div>
              </div>

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

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

              <div class="form-group" ng-class="{ 'has-error': externalLdap.error.groupnameField }" ng-show="externalLdap.syncGroups">
                <label class="control-label" for="inputExternalLdapConfigGroupnameField">Groupname Field (case sensitive)</label>
                <input type="text" class="form-control" ng-model="externalLdap.groupnameField" id="inputExternalLdapConfigGroupnameField" name="groupnameField" ng-disabled="externalLdap.busy" placeholder="cn" ng-required="externalLdap.syncGroups">
              </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>

              <div class="form-group">
                <div class="checkbox">
                  <label>
                    <input type="checkbox" ng-model="externalLdap.autoCreate"> Automatically create users when they login to Cloudron
                  </label>
                </div>
              </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">
    <h2>
      Users
      <button class="btn btn-primary btn-outline pull-right" ng-click="useradd.show()">
        <i class="fa fa-user-plus"></i> New User
      </button>
    </h2>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <div class="users-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="fas fa-crown arrow" ng-show="user.active && user.role === 'owner'" uib-tooltip="This user is a superadmin" tooltip-class="long nowrap"></i>
                    <i class="fa fa-user-tie arrow" ng-show="user.active && user.role === 'admin'" uib-tooltip="This user is an admin" tooltip-class="long nowrap"></i>
                    <i class="fas fa-users-cog arrow" ng-show="user.active && user.role === 'usermanager'" uib-tooltip="This user can manage 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="canEdit(user) && 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="canEdit(user) && 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="canEdit(user) && 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="!canEdit(user) || isMe(user) || user.source" class="btn btn-xs btn-default" ng-click="invitation.show(user)" uib-tooltip="Reset password or invite link"><i class="fa fa-redo"></i></button>
                    <button ng-disabled="!canEdit(user)" 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="!canEdit(user) || 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">
    <h2>
      Groups
      <button class="btn btn-primary btn-outline pull-right" ng-click="groupAdd.show()"><i class="fa fa-plus"></i> New Group</button>
    </h2>
  </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 }} &nbsp; <i ng-show="group.source" class="far fa-address-book" uib-tooltip="From external LDAP directory"></i>
                              </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;" ng-show="user.isAtLeastAdmin">
    <h2>Settings</h2>
  </div>

  <div class="card card-large" ng-show="user.isAtLeastAdmin">
    <form name="directoryConfigForm" role="form" novalidate ng-submit="directoryConfig.submit()" autocomplete="off">
      <fieldset ng-disabled="directoryConfig.busy || !config.features.directoryConfig">
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="directoryConfig.editableUserProfiles">&nbsp;&nbsp;Allow users to edit their name &amp; email <sup><a ng-href="https://docs.cloudron.io/user-management/#lock-profile" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" ng-model="directoryConfig.mandatory2FA">&nbsp;&nbsp;Require users to setup 2FA
          </label>
        </div>
      </fieldset>
    </form>

    <br/>

    <div class="row" ng-hide="config.features.directoryConfig">
      <div class="col-md-12">
        <span>These features are only available in the paid plans. <a href="" class="pull-right" ng-click="openSubscriptionSetup()">Setup Subscription Now</a></span>
      </div>
    </div>

    <div class="row" ng-show="config.features.directoryConfig">
      <div class="col-md-12">
        <span class="has-error" ng-show="directoryConfig.errorMessage">{{ directoryConfig.errorMessage }}</span>

        <button class="btn btn-outline btn-primary pull-right" ng-click="directoryConfig.submit()" ng-disabled="!directoryConfigForm.$dirty || directoryConfig.busy">
          <i class="fa fa-circle-notch fa-spin" ng-show="directoryConfig.busy"></i> Save
        </button>
      </div>
    </div>

  </div>

  <div class="text-left" style="margin-top: 50px;" ng-show="user.isAtLeastAdmin">
    <h2>LDAP</h2>
  </div>

  <div class="card card-large" ng-show="user.isAtLeastAdmin">
    <div class="row">
      <div class="col-md-12">
        Cloudron will synchronize users and groups from an external LDAP or ActiveDirectory server.
        Password verification for authenticating those users is done against the external server.
        The synchronization is not run automatically but needs to be triggered manually.
      </div>
    </div>

    <br/>

    <div class="row" ng-hide="config.features.externalLdap">
      <div class="col-md-12">
        This feature is only available is only available in the paid plans. <a href="" class="pull-right" ng-click="openSubscriptionSetup()">Setup Subscription Now</a>
      </div>
    </div>

    <div ng-show="config.features.externalLdap">

      <div class="row" ng-show="externalLdap.currentConfig.provider === 'noop'">
        <div class="col-xs-12">
          <span class="text-muted">LDAP authentication is not configured.</span>
        </div>
      </div>

      <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop'">
        <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">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">Accept Self-signed certificate</span>
        </div>
        <div class="col-xs-6 text-right">
          <span>{{ externalLdap.currentConfig.acceptSelfSignedCerts ? 'Yes' : 'No' }}</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">Sync Groups</span>
        </div>
        <div class="col-xs-6 text-right">
          <span>{{ externalLdap.currentConfig.syncGroups ? 'Yes' : 'No' }}</span>
        </div>
      </div>

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

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

      <div class="row" ng-show="externalLdap.currentConfig.provider !== 'noop' && externalLdap.currentConfig.syncGroups">
        <div class="col-xs-6">
          <span class="text-muted">Groupname Field</span>
        </div>
        <div class="col-xs-6 text-right">
          <span>{{ externalLdap.currentConfig.groupnameField }}</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" ng-show="externalLdap.currentConfig.provider !== 'noop'">
        <div class="col-xs-6">
          <span class="text-muted">Automatically create users when they login to Cloudron </span>
        </div>
        <div class="col-xs-6 text-right">
          <span>{{ externalLdap.currentConfig.autoCreate ? '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>
</div>