cityssm/attendance-tracking

<%- include('_header'); -%>

<div class="columns">
  <div class="column is-3"><%- include('_admin.menu.ejs') %></div>
  <div class="column">
    <nav class="breadcrumb is-hidden-mobile">
      <ul>
        <li class="is-active">
          <a href="#"> Administration </a>
        </li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <span>User Maintenance</span>
          </a>
        </li>
      </ul>
    </nav>
    <div class="columns is-vcentered is-mobile">
      <div class="column">
        <h1 class="title is-1 is-size-3-mobile">User Maintenance</h1>
      </div>
      <div class="column is-narrow">
        <button class="button is-success is-add-user-button" data-cy="add" type="button">
          <span class="icon is-small">
            <i class="fas fa-plus" aria-hidden="true"></i>
          </span>
          <span>Add User</span>
        </button>
      </div>
    </div>

    <div class="message is-info">
      <p class="message-body is-size-7-mobile">
        Note that users must log out and log back in to see changes to their
        permissions.
      </p>
    </div>

    <table class="table is-fullwidth is-hoverable is-fade-hoverable is-striped has-sticky-header">
      <thead>
        <tr>
          <th>User Name</th>
          <th class="has-width-1 has-text-centered">
            Can Log In<br />
            <label class="checkbox is-size-7">
              <input type="checkbox" id="filter--canLogin" checked />
              Filter
            </label>
          </th>
          <th class="has-width-1 has-text-centered">Is Admin</th>
          <th class="has-width-1">
            <span class="is-sr-only">Permissions</span>
          </th>
          <th class="has-width-1">
            <span class="is-sr-only">Options</span>
          </th>
        </tr>
      </thead>
      <tbody id="tbody--users"></tbody>
      <% if (tempUsers.length > 0) { %>
        <tbody>
          <tr>
            <th colspan="5">
              Temporary Users
            </th>
          </tr>
          <% for (const tempUser of tempUsers) { %>
            <% const user = tempUser.user %>
            <tr>
              <td><%= user.userName %></td>
              <td>
                <% if (user.canLogin) { %>
                  <i class="fas fa-fw fa-check" aria-hidden="true"></i>
                  Can Log In
                <% } else { %>
                  <i class="fas fa-fw fa-times" aria-hidden="true"></i>
                  Access Denied
                <% } %>
              </td>
              <td>
                <% if (user.isAdmin) { %>
                  <i class="fas fa-fw fa-check" aria-hidden="true"></i>
                  Administrator
                <% } else { %>
                  <i class="fas fa-fw fa-times" aria-hidden="true"></i>
                  No Admin Access
                <% } %>
              </td>
              <td colspan="2">
                <em>Managed in config file</em>
              </td>
            </tr>
          <% } %>
        </tbody>
      <% } %>
    </table>
  </div>
</div>

<datalist id="datalist--unusedEmployeeUserNames">
  <% for (const userName of unusedEmployeeUserNames) { %>
    <option value="<%= userName %>"></option>
  <% } %>
</datalist>

<%- include('_footerA'); -%>

<script>
  exports.users = <%- JSON.stringify(users) %>;
  exports.userDomain = "<%= configFunctions.getConfigProperty('application.userDomain') %>";
  exports.availablePermissionValues = <%- JSON.stringify(availablePermissionValues) %>;
</script>

<script src="<%= urlPrefix %>/javascripts/admin.users.min.js"></script>

<%- include('_footerB'); -%>