freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Admin: Show certain fields redacted by default

Browse source
This commit is contained in:
baldo 2022-05-30 11:52:03 +02:00
parent 0f60436b2c
commit 72a54c8325
1 changed files with 82 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
frontend/src/views/AdminNodesView.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import {useNodesStore} from "@/stores/nodes";
import {ref} from "vue";
import type {MAC} from "@/types";
import type {EnhancedNode, MAC} from "@/types";
type NodeRedactField = "nickname" | "email" | "token";
type NodeRedactFieldsMap = Partial<Record<NodeRedactField, boolean>>;
@ -9,18 +9,36 @@ type NodesRedactFieldsMap = Partial<Record<MAC, NodeRedactFieldsMap>>;
const nodes = useNodesStore();
const page = ref(0);
const nodesRedactFieldsMap = ref({} as NodesRedactFieldsMap)
function refresh(): void {
nodes.refresh();
}
function shallRedactField(node: EnhancedNode, field: NodeRedactField): boolean {
const redactFieldsMap = nodesRedactFieldsMap.value[node.mac];
if (!redactFieldsMap) {
return true;
}
const redactField = redactFieldsMap[field];
return redactField === undefined || redactField;
}
function setRedactField(node: EnhancedNode, field: NodeRedactField, value: boolean): void {
let redactFieldsMap = nodesRedactFieldsMap.value[node.mac];
if (!redactFieldsMap) {
redactFieldsMap = {};
nodesRedactFieldsMap.value[node.mac] = redactFieldsMap;
}
redactFieldsMap[field] = value;
}
refresh();
</script>
<template>
<main>
<h2>Knoten</h2>
<table>
<thead>
<tr>
@ -41,9 +59,48 @@ refresh();
<tbody>
<tr v-for="node in nodes.getNodes">
<td>{{node.hostname}}</td>
<td>{{node.nickname}}</td><!-- TODO: Redact values -->
<td>{{node.email}}</td><!-- TODO: Redact values -->
<td>{{node.token}}</td><!-- TODO: Redact values -->
<td v-if="shallRedactField(node, 'nickname')">
<span
class="redacted"
@click="setRedactField(node, 'nickname', false)">
nickname
</span>
</td>
<td v-if="!shallRedactField(node, 'nickname')">
<span
class="redactable"
@click="setRedactField(node, 'nickname', true)">
{{node.nickname}}
</span>
</td>
<td v-if="shallRedactField(node, 'email')">
<span
class="redacted"
@click="setRedactField(node, 'email', false)">
email@example.com
</span>
</td>
<td v-if="!shallRedactField(node, 'email')">
<span
class="redactable"
@click="setRedactField(node, 'email', true)">
{{node.email}}
</span>
</td>
<td v-if="shallRedactField(node, 'token')">
<span
class="redacted"
@click="setRedactField(node, 'token', false)">
0123456789abcdef
</span>
</td>
<td v-if="!shallRedactField(node, 'token')">
<span
class="redactable"
@click="setRedactField(node, 'token', true)">
{{node.token}}
</span>
</td>
<td>{{node.mac}}</td>
<td>{{node.key}}</td><!-- TODO: Icon if set -->
<td>{{node.site}}</td>
@ -58,4 +115,24 @@ refresh();
</template>
<style lang="scss" scoped>
@import "../scss/variables";
table {
border-collapse: collapse;
th, td {
padding: 0.5em 0.25em;
}
td {
border-top: 1px solid $gray-light;
}
.redacted, .redactable {
cursor: pointer;
}
.redacted {
filter: blur(0.2em);
}
}
</style>