users.html

{% extends "apppage.html" %}
{% block content %}
<style>
  .ip-cell {
    max-width: 360px;
  }

  .ip-cell .badge {
    font-family: monospace;
  }
</style>
<div class="container my-4 col-lg-10">

    {% if resetok %}
    <div class="alert alert-info alert-dismissible fade show">
        {{ "IP addresses cleared"|trans }}
    </div>
    {% endif %}

    {% if ok %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ "User"|trans }} <strong>{{ ok }}</strong> {{ "created"|trans }}!
    </div>
    {% endif %}

    {% if error %}
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ error }}
    </div>
    {% endif %}

    {% if delok %}
    <div class="alert alert-warning alert-dismissible fade show">
        {{ "User deleted"|trans }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}

    {% if devok %}
    <div class="alert alert-info alert-dismissible fade show">
        {{ "Device token cleared"|trans }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}

    {% if lockok %}
    <div class="alert alert-info alert-dismissible fade show">
        {{ "IP slots filled up to 10"|trans }}
        <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}

    <div class="d-flex justify-content-between align-items-center mb-2">
        <h3 class="mb-0">{{ "Users"|trans }}</h3>
        <button class="btn btn-primary"
                data-toggle="modal"
                data-target="#newUserModal">
            + {{ "Add user"|trans }}
        </button>
    </div>

    <table class="table table-sm table-bordered align-middle">
        <thead class="table-light">
        <tr>
            <th>Login</th>
            <th>Role</th>
            <th class="w-50">Trusted IPs</th>
            <th>Device token</th>
            <th class="text-center" style="width:185px"></th>
        </tr>
        </thead>
        <tbody>
        {% for u in users %}
        <tr>
            <td>{{ u.login }}</td>
            <td>{{ u.role }}</td>
            <td class="ip-cell">
                {% for ip in u.ip_list|split(', ') %}
                <span class="badge badge-light mb-1">{{ ip }}</span>
                {% endfor %}
            </td>

            <td>{{ u.dev_token ? "yes" : "-" }}</td>
            <td class="text-nowrap text-center py-1">
                <div class="d-flex flex-column">
                    <div class="btn-group btn-group-sm mb-1">
                        <form method="post">
                            <input type="hidden" name="uid" value="{{ u.id }}">
                            <input type="hidden" name="action" value="reset_ip">
                            <button class="btn btn-outline-danger btn-sm"
                                    onclick="return confirm('Clear IP for {{ u.login }}?')">
                                Reset IP
                            </button>
                        </form>
                        <form method="post">
                            <input type="hidden" name="uid" value="{{ u.id }}">
                            <input type="hidden" name="action" value="reset_device">
                            <button class="btn btn-outline-secondary btn-sm"
                                    onclick="return confirm('Reset device token for {{u.login}}?')">
                                Reset Device
                            </button>
                        </form>
                    </div>
                    <div class="btn-group btn-group-sm mb-1">
                        <form method="post">
                            <input type="hidden" name="uid" value="{{ u.id }}">
                            <input type="hidden" name="action" value="lock_ips">
                            <button class="btn btn-outline-primary btn-sm"
                                    onclick="return confirm('Fill empty IP slots for {{u.login}}?')">
                                Lock IPs
                            </button>
                        </form>
                        {% if u.id != _SESSION['uid'] %}
                        <form method="post">
                            <input type="hidden" name="uid" value="{{ u.id }}">
                            <input type="hidden" name="action" value="delete_user">
                            <button class="btn btn-outline-secondary btn-sm"
                                    onclick="return confirm('Delete user {{ u.login }}?')">
                                Delete
                            </button>
                        </form>
                        {% endif %}
                    </div>
                </div>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="modal fade" id="newUserModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="post" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ "Add new user"|trans }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {% if error %}
                <div class="alert alert-danger py-1">{{ error }}</div>
                {% endif %}
                <div class="mb-2">
                    <label class="form-label">{{ "Login"|trans }}</label>
                    <input name="login" class="form-control" required>
                </div>
                <div class="mb-2">
                    <label class="form-label">{{ "Password"|trans }}</label>
                    <input name="pass" type="password" class="form-control" required>
                </div>
                <div class="mb-0">
                    <label class="form-label">{{ "Role"|trans }}</label>
                    <select name="role" class="form-control">
                        <option value="user">user</option>
                        <option value="admin">admin</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">{{ "Create"|trans }}</button>
            </div>
        </form>
    </div>
</div>

{% endblock %}