show channel security info

liamcottle · Nov 16, 2024 · b152914 · b152914
1 parent 9d55218
commit b152914
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 10 deletions.
diff --git a/src/components/channels/ChannelPskBadge.vue b/src/components/channels/ChannelPskBadge.vue
@@ -0,0 +1,80 @@
+<template>
+    <div>
+
+        <!-- no key -->
+        <div v-if="channel.settings.psk == null || channel.settings.psk.length === 0">
+            <div class="flex space-x-1 bg-gray-50 rounded-md px-2 py-1 text-xs text-gray-700 border border-gray-700 font-medium">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M14.5 1A4.5 4.5 0 0 0 10 5.5V9H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-1.5V5.5a3 3 0 1 1 6 0v2.75a.75.75 0 0 0 1.5 0V5.5A4.5 4.5 0 0 0 14.5 1Z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div>No Key</div>
+            </div>
+        </div>
+
+        <!-- default key -->
+        <div v-else-if="isDefaultPsk(channel.settings.psk)">
+            <div class="flex space-x-1 bg-gray-50 rounded-md px-2 py-1 text-xs text-gray-700 border border-gray-700 font-medium">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div>Default Key</div>
+            </div>
+        </div>
+
+        <!-- 8-bit key -->
+        <div v-else-if="channel.settings.psk.length === 1">
+            <div class="flex space-x-1 bg-yellow-50 rounded-md px-2 py-1 text-xs text-yellow-700 border border-yellow-700 font-medium">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div>8-Bit Key</div>
+            </div>
+        </div>
+
+        <!-- 128-bit key -->
+        <div v-else-if="channel.settings.psk.length === 16">
+            <div class="flex space-x-1 bg-green-50 rounded-md px-2 py-1 text-xs text-green-700 border border-green-700 font-medium">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div>128-Bit Key</div>
+            </div>
+        </div>
+
+        <!-- 256-bit key -->
+        <div v-else-if="channel.settings.psk.length === 32">
+            <div class="flex space-x-1 bg-green-50 rounded-md px-2 py-1 text-xs text-green-700 border border-green-700 font-medium">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
+                        <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 0 0-4.5 4.5V9H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-.5V5.5A4.5 4.5 0 0 0 10 1Zm3 8V5.5a3 3 0 1 0-6 0V9h6Z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div>256-Bit Key</div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+import SecurityUtils from "../../js/SecurityUtils.js";
+
+export default {
+    name: 'ChannelPskBadge',
+    props: {
+        channel: Object,
+    },
+    methods: {
+        isDefaultPsk: (psk) => SecurityUtils.isDefaultPsk(psk),
+    },
+}
+</script>
diff --git a/src/components/channels/ChannelsList.vue b/src/components/channels/ChannelsList.vue
@@ -1,16 +1,26 @@
 <template>
     <div class="w-full">
-        <div v-for="channel of enabledChannels" @click="onChannelClick(channel)" class="cursor-pointer p-2 shadow border-l-2" :class="[ selectedChannelId === channel.index ? 'bg-gray-100 border-blue-500' : 'bg-white border-transparent hover:bg-gray-50 hover:border-gray-200']">
-            <div>
-                <span v-if="channel.settings.name.length > 0">{{ channel.settings.name }}</span>
-                <span v-else class="text-gray-500 italic">Unnamed Channel</span>
+        <div v-for="channel of enabledChannels" @click="onChannelClick(channel)" class="flex cursor-pointer p-2 shadow border-l-2" :class="[ selectedChannelId === channel.index ? 'bg-gray-100 border-blue-500' : 'bg-white border-transparent hover:bg-gray-50 hover:border-gray-200']">
+
+            <!-- channel info -->
+            <div class="my-auto mr-auto">
+                <div>
+                    <span v-if="channel.settings.name.length > 0">{{ channel.settings.name }}</span>
+                    <span v-else class="text-gray-500 italic">Unnamed Channel</span>
+                </div>
+                <div class="text-sm text-gray-500">
+                    <span v-if="channel.role === Protobuf.Channel.Channel_Role.PRIMARY">Primary Channel</span>
+                    <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.SECONDARY">Secondary Channel</span>
+                    <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.DISABLED">Disabled Channel</span>
+                    <span v-else>Unknown Channel Role</span>
+                </div>
             </div>
-            <div class="text-sm text-gray-500">
-                <span v-if="channel.role === Protobuf.Channel.Channel_Role.PRIMARY">Primary Channel</span>
-                <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.SECONDARY">Secondary Channel</span>
-                <span v-else-if="channel.role === Protobuf.Channel.Channel_Role.DISABLED">Disabled Channel</span>
-                <span v-else>Unknown Channel Role</span>
+
+            <!-- security badge -->
+            <div class="my-auto">
+                <ChannelPskBadge :channel="channel"/>
             </div>
+
         </div>
     </div>
 </template>
@@ -19,8 +29,10 @@
 import {
     Protobuf,
 } from "@meshtastic/js";
+import ChannelPskBadge from "./ChannelPskBadge.vue";
 export default {
     name: 'ChannelsList',
+    components: {ChannelPskBadge},
     emits: [
         "channel-click",
     ],

diff --git a/src/components/pages/ChannelMessagesPage.vue b/src/components/pages/ChannelMessagesPage.vue
@@ -2,7 +2,11 @@
     <Page>
 
         <!-- app bar -->
-        <AppBar title="Channel Messages" :subtitle="subtitle"/>
+        <AppBar title="Channel Messages" :subtitle="subtitle">
+            <template v-slot:trailing>
+                <ChannelPskBadge v-if="channel" :channel="channel" class="mr-2"/>
+            </template>
+        </AppBar>
 
         <!-- list -->
         <div class="flex h-full w-full overflow-hidden">
@@ -17,10 +21,12 @@ import GlobalState from "../../js/GlobalState.js";
 import AppBar from "../AppBar.vue";
 import MessageViewer from "../messages/MessageViewer.vue";
 import Page from "./Page.vue";
+import ChannelPskBadge from "../channels/ChannelPskBadge.vue";
 
 export default {
     name: 'ChannelMessagesPage',
     components: {
+        ChannelPskBadge,
         Page,
         AppBar,
         MessageViewer,

diff --git a/src/js/SecurityUtils.js b/src/js/SecurityUtils.js
@@ -0,0 +1,10 @@
+class SecurityUtils {
+
+    static isDefaultPsk(pskAsUInt8Array) {
+        // default psk is 1 byte (8 bits) and is equal to 0x1 and is also known as "AQ=="
+        return pskAsUInt8Array != null && pskAsUInt8Array.length === 1 && pskAsUInt8Array[0] === 0x1;
+    }
+
+}
+
+export default SecurityUtils;