sync

abac/templates/base.html

@@ -31,6 +31,8 @@
             <button class="btn btn-primary" onclick="window.location.href='{% url 'abac:upload_file' %}'">Upload File</button>
             {% if user.is_superuser %}
                 <a href="{% url 'abac:user_management' %}" class="btn btn-primary ml-2">User Management</a>
+                <a href="{% url 'abac:hierarchy_vis' %}" class="btn btn-primary ml-2">Rule Overview</a>
+                <a href="{% url 'abac:trusted_authorities' %}" class="btn btn-primary ml-2">Authorities</a>
             {% endif %}
             <span class="ml-auto">
                 <button class="btn btn-primary"  onclick="window.location.href='{% url 'abac:upload_certificate' %}'">Upload Certificate</button>
@@ -40,6 +42,18 @@
     </header>
 
     <main class="flex-shrink-0">
+        {% if messages %}
+            <div class="container mt-3">
+                {% for message in messages %}
+                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
         <div class="container mt-4">
             {% block content %}{% endblock %}
         </div>

abac/templates/trusted_authorities.html

@@ -0,0 +1,38 @@
+{% extends "base.html" %} 
+{% load static %} 
+
+{% block content %}
+<div class="container">
+    <h2>Trusted Authorities</h2>
+    <table class="table table-striped">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Public Key</th>
+                <th>Action</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for authority, hash in authorities_with_hashes %}
+            <tr>
+                <td>{{ authority.name }}</td>
+                <td>{{ hash }}</td>
+                <td>
+                    <form action="{% url 'abac:delete_authority' authority.id %}" method="post">
+                        {% csrf_token %}
+                        <button type="submit" class="btn btn-danger">Delete</button>
+                    </form>
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    
+    <h3>Add New Authority</h3>
+    <form method="post">
+        {% csrf_token %}
+        {{ form.as_p }}
+        <button type="submit" class="btn btn-primary">Add</button>
+    </form>
+</div>
+{% endblock %}

abac/templates/upload_public_key.html

@@ -0,0 +1,18 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="container mt-5">
+    <div class="row justify-content-center">
+        <div class="col-md-6">
+            <h2>Upload Public Key</h2>
+            <form method="post" class="mt-3">
+                {% csrf_token %}
+                <div class="form-group">
+                    <label for="public_key">Paste your public key here:</label>
+                    <textarea id="public_key" name="public_key" class="form-control" rows="6" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary">Upload Public Key</button>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}

abac/templates/user_detail.html

@@ -2,6 +2,16 @@
 
 {% block content %}
     <h2>{{ user.username }}'s Attributes</h2>
+
+    {% if user.public_key %}
+        <h3 class="mt-4">Public Key</h3>
+        <pre class="bg-light p-3">{{ user.public_key }}</pre>
+    {% else %}
+        <div class="alert alert-warning mt-3">
+            <strong>Note:</strong> No public key uploaded. 
+            <a href="{% url 'abac:upload_public_key' username=user.username %}" class="alert-link">Click here to upload.</a>
+        </div>
+    {% endif %}
     <table class="table">
         <thead>
             <tr>
@@ -30,4 +40,22 @@
             {% endfor %}
         </tbody>
     </table>
+
+    <h3 class="mt-4">Upload Precertified Definitions</h3>
+    <form method="post" enctype="multipart/form-data" class="mb-3">
+        {% csrf_token %}
+        <div class="custom-file mb-3">
+            <input type="file" class="custom-file-input" id="precertifiedFile" name="precertified_file">
+            <label class="custom-file-label" for="precertifiedFile">Choose file</label>
+        </div>
+        <button type="submit" class="btn btn-primary">Upload</button>
+    </form>
+    <script>
+        // This script ensures that the file name is displayed in the custom file input after selection
+        document.querySelector('.custom-file-input').addEventListener('change', function (e) {
+            var fileName = document.getElementById("precertifiedFile").files[0].name;
+            var nextSibling = e.target.nextElementSibling;
+            nextSibling.innerText = fileName;
+        });
+    </script>
 {% endblock %}

abac/templates/vis_tree.html

@@ -0,0 +1,152 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container">
+    <div class="tree-container col-md10"></div>
+</div>
+<!-- Include D3.js -->
+<script src="https://d3js.org/d3.v6.min.js"></script>
+
+<script>
+    data = {{data|safe}};
+
+    const width = 928;
+    const marginTop = 10;
+    const marginRight = 10;
+    const marginBottom = 10;
+    const marginLeft = 40;
+
+    // Rows are separated by dx pixels, columns by dy pixels. These names can be counter-intuitive
+    // (dx is a height, and dy a width). This because the tree must be viewed with the root at the
+    // “bottom”, in the data domain. The width of a column is based on the tree’s height.
+    const root = d3.hierarchy(data);
+    const dx = 20;
+    const dy = (width - marginRight - marginLeft) / (1 + root.height);
+
+    // Define the tree layout and the shape for links.
+    const tree = d3.tree().nodeSize([dx, dy]);
+    const diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x);
+
+    // Create the SVG container, a layer for the links and a layer for the nodes.
+    const svg = d3.select(".tree-container").append("svg")
+        .attr("width", width)
+        .attr("height", dx)
+        .attr("viewBox", [-marginLeft, -marginTop, width, dx])
+        .attr("style", "max-width: 100%; height: auto; font: 14px sans-serif; user-select: none;");
+
+    const gLink = svg.append("g")
+        .attr("fill", "none")
+        .attr("stroke", "#555")
+        .attr("stroke-opacity", 0.4)
+        .attr("stroke-width", 1.5);
+
+    const gNode = svg.append("g")
+        .attr("cursor", "pointer")
+        .attr("pointer-events", "all");
+
+    function update(event, source) {
+    const duration = event?.altKey ? 2500 : 250; // hold the alt key to slow down the transition
+    const nodes = root.descendants().reverse();
+    const links = root.links();
+
+    // Compute the new tree layout.
+    tree(root);
+
+    let left = root;
+    let right = root;
+    root.eachBefore(node => {
+        if (node.x < left.x) left = node;
+        if (node.x > right.x) right = node;
+    });
+
+    const height = right.x - left.x + marginTop + marginBottom;
+
+    const transition = svg.transition()
+        .duration(duration)
+        .attr("height", height)
+        .attr("viewBox", [-marginLeft, left.x - marginTop, width, height])
+        .tween("resize", window.ResizeObserver ? null : () => () => svg.dispatch("toggle"));
+
+    // Update the nodes…
+    const node = gNode.selectAll("g")
+        .data(nodes, d => d.id);
+
+    // Enter any new nodes at the parent's previous position.
+    const nodeEnter = node.enter().append("g")
+        .attr("transform", d => `translate(${source.y0},${source.x0})`)
+        .attr("fill-opacity", 0)
+        .attr("stroke-opacity", 0)
+        .on("click", (event, d) => {
+            d.children = d.children ? null : d._children;
+            update(event, d);
+        });
+
+    nodeEnter.append("circle")
+        .attr("r", 2.5)
+        .attr("fill", d => d._children ? "#555" : "#999")
+        .attr("stroke-width", 10);
+
+    nodeEnter.append("text")
+        .attr("dy", "0.31em")
+        .attr("x", d => d._children ? -6 : 6)
+        .attr("text-anchor", d => d._children ? "end" : "start")
+        .text(d => d.data.name)
+        .clone(true).lower()
+        .attr("stroke-linejoin", "round")
+        .attr("stroke-width", 3)
+        .attr("stroke", "white");
+
+    // Transition nodes to their new position.
+    const nodeUpdate = node.merge(nodeEnter).transition(transition)
+        .attr("transform", d => `translate(${d.y},${d.x})`)
+        .attr("fill-opacity", 1)
+        .attr("stroke-opacity", 1);
+
+    // Transition exiting nodes to the parent's new position.
+    const nodeExit = node.exit().transition(transition).remove()
+        .attr("transform", d => `translate(${source.y},${source.x})`)
+        .attr("fill-opacity", 0)
+        .attr("stroke-opacity", 0);
+
+    // Update the links…
+    const link = gLink.selectAll("path")
+        .data(links, d => d.target.id);
+
+    // Enter any new links at the parent's previous position.
+    const linkEnter = link.enter().append("path")
+        .attr("d", d => {
+            const o = {x: source.x0, y: source.y0};
+            return diagonal({source: o, target: o});
+        });
+
+    // Transition links to their new position.
+    link.merge(linkEnter).transition(transition)
+        .attr("d", diagonal);
+
+    // Transition exiting nodes to the parent's new position.
+    link.exit().transition(transition).remove()
+        .attr("d", d => {
+            const o = {x: source.x, y: source.y};
+            return diagonal({source: o, target: o});
+        });
+
+    // Stash the old positions for transition.
+    root.eachBefore(d => {
+        d.x0 = d.x;
+        d.y0 = d.y;
+    });
+    }
+
+    // Do the first update to the initial configuration of the tree — where a number of nodes
+    // are open (arbitrarily selected as the root, plus nodes with 7 letters).
+    root.x0 = dy / 2;
+    root.y0 = 0;
+    root.descendants().forEach((d, i) => {
+    d.id = i;
+    d._children = d.children;
+    if (d.depth && d.data.name.length !== 7) d.children = null;
+    });
+
+    update(null, root);
+</script>
+{% endblock %}