datasette/datasette/templates/permissions_debug.html

{% extends "base.html" %}

{% block title %}Debug permissions{% endblock %}

{% block extra_head %}
<style type="text/css">
.check-result-true {
    color: green;
}
.check-result-false {
    color: red;
}
.check-result-no-opinion {
    color: #aaa;
}
.check h2 {
    font-size: 1em
}
.check-action, .check-when, .check-result {
    font-size: 1.3em;
}
textarea {
    height: 10em;
    width: 95%;
    box-sizing: border-box;
    padding: 0.5em;
    border: 2px dotted black;
}
.two-col {
    display: inline-block;
    width: 48%;
}
.two-col label {
    width: 48%;
}
@media only screen and (max-width: 576px) {
    .two-col {
        width: 100%;
    }
}
</style>
{% endblock %}

{% block content %}

<h1>Permission check testing tool</h1>

<p>This tool lets you simulate an actor and a permission check for that actor.</p>

<form action="{{ urls.path('-/permissions') }}" id="debug-post" method="post" style="margin-bottom: 1em">
    <input type="hidden" name="csrftoken" value="{{ csrftoken() }}">
    <div class="two-col">
        <p><label>Actor</label></p>
        <textarea name="actor">{% if actor_input %}{{ actor_input }}{% else %}{"id": "root"}{% endif %}</textarea>
    </div>
    <div class="two-col" style="vertical-align: top">
        <p><label for="permission" style="display:block">Permission</label>
        <select name="permission" id="permission">
            {% for permission in permissions %}
                <option value="{{ permission.name }}">{{ permission.name }} (default {{ permission.default }})</option>
            {% endfor %}
        </select>
        <p><label for="resource_1">Database name</label><input type="text" id="resource_1" name="resource_1"></p>
        <p><label for="resource_2">Table or query name</label><input type="text" id="resource_2" name="resource_2"></p>
    </div>
    <div style="margin-top: 1em;">
        <input type="submit" value="Simulate permission check">
    </div>
    <pre style="margin-top: 1em" id="debugResult"></pre>
</form>

<script>
var rawPerms = {{ permissions|tojson }};
var permissions = Object.fromEntries(rawPerms.map(p => [p.name, p]));
var permissionSelect = document.getElementById('permission');
var resource1 = document.getElementById('resource_1');
var resource2 = document.getElementById('resource_2');
function updateResourceVisibility() {
    var permission = permissionSelect.value;
    var {takes_database, takes_resource} = permissions[permission];
    if (takes_database) {
        resource1.closest('p').style.display = 'block';
    } else {
        resource1.closest('p').style.display = 'none';
    }
    if (takes_resource) {
        resource2.closest('p').style.display = 'block';
    } else {
        resource2.closest('p').style.display = 'none';
    }
}
permissionSelect.addEventListener('change', updateResourceVisibility);
updateResourceVisibility();

// When #debug-post form is submitted, use fetch() to POST data
var debugPost = document.getElementById('debug-post');
var debugResult = document.getElementById('debugResult');
debugPost.addEventListener('submit', function(ev) {
    ev.preventDefault();
    var formData = new FormData(debugPost);
    console.log(formData);
    fetch(debugPost.action, {
        method: 'POST',
        body: new URLSearchParams(formData),
    }).then(function(response) {
        return response.json();
    }).then(function(data) {
        debugResult.innerText = JSON.stringify(data, null, 4);
    });
});
</script>

<h1>Recent permissions checks</h1>

{% for check in permission_checks %}
    <div class="check">
        <h2>
            <span class="check-action">{{ check.action }}</span>
            checked at
            <span class="check-when">{{ check.when }}</span>
            {% if check.result %}
                <span class="check-result check-result-true">✓</span>
            {% elif check.result is none %}
                <span class="check-result check-result-no-opinion">none</span>
            {% else %}
                <span class="check-result check-result-false">✗</span>
            {% endif %}
            {% if check.used_default %}
                <span class="check-used-default">(used default)</span>
            {% endif %}
        </h2>
        <p><strong>Actor:</strong> {{ check.actor|tojson }}</p>
        {% if check.resource %}
            <p><strong>Resource:</strong> {{ check.resource }}</p>
        {% endif %}
    </div>
{% endfor %}

{% endblock %}