Format GPG fingerprints for display

ui/src/component/GpgFingerprint.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+
+const props = defineProps<{
+    fingerprint: string
+}>();
+
+// There's nothing particularly special about this format but it's the same as the GPG CLI prints and
+// it's what people are used to looking at for GPG keys. Hopefully that means its a little easier to
+// 40 characters grouped together.
+const fingerprintDisplay = computed(() => {
+    // It's a 160 bit hash, so 20 bytes, in hex is 40 characters
+    if (!props.fingerprint || props.fingerprint.length != 40) return '';
+
+    let repr = '';
+    for (let i = 0; i < 40; i += 4) {
+        repr += props.fingerprint.slice(i, i + 4) + ' ';
+
+        if (i === 20) repr += ' ';
+    }
+
+    return repr.trim();
+});
+
+</script>
+
+<template>
+<span>{{ fingerprintDisplay }}</span>
+</template>

ui/src/component/KeyList.vue

@@ -3,6 +3,7 @@ import { useMyKeysStore } from "../store/my-keys-store";
 import { formatDistanceToNow } from "date-fns";
 import { GpgKeyDist } from "../trusted/trusted/types";
 import { ref } from "vue";
+import GpgFingerprint from "./GpgFingerprint.vue";
 
 defineProps<{
   keys: GpgKeyDist[];
@@ -49,8 +50,8 @@ const copyFingerprint = (keyDist: GpgKeyDist) => {
         <td>{{ k.expires_at ? formatDistanceToNow(k.expires_at) : "-" }}</td>
 
         <td class="cursor-pointer font-mono" @click="copyFingerprint(k)">
-          <span class="mr-2">{{ k.fingerprint }}</span>
-          <span :class="{ 'text-success': copied === k.fingerprint }">
+          <GpgFingerprint :fingerprint="k.fingerprint" v-memo="[k.fingerprint]" />
+          <span :class="{ 'ms-2': true, 'text-success': copied === k.fingerprint }">
             <font-awesome-icon v-if="copied === k.fingerprint" icon="fa-regular fa-check-circle" size="lg" fixed-width />
             <font-awesome-icon v-else icon="fa-regular fa-clipboard" size="lg" fixed-width />
           </span>