display Trust Icon alongside user details

frontend/src/components/TrustDetails.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="state === State.Loading">
+    <div v-if="onFetchError == null">
+      {{ t('common.loading') }}
+    </div>
+    <div v-else>
+      <FetchError :error="onFetchError" :retry="checkTrust"/>
+    </div>
+  </div>
+  <Popover v-else-if="state === State.ShowTrust" as="div" class="relative inline-block text-left">
+    <PopoverButton class="inline-flex items-center bg-gray-50 ring-1 ring-inset ring-gray-500/10 mx-1 p-1 rounded-full focus:outline-none focus:ring-primary">
+      <ShieldExclamationIcon v-if="trustLevel === -1" class="h-4 w-4 text-red-500" aria-label="Unverified" />
+      <ShieldCheckIcon v-else class="h-4 w-4 text-primary" aria-label="Verified" />
+    </PopoverButton>
+
+    <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
+        <PopoverPanel class="absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white p-4 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <p class="text-sm">Trust Level {{ trustLevel }}</p>
+          <button v-if="trustLevel === -1" @click="sign()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary  text-base font-medium text-white hover:bg-primary-d1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm">
+            TODO sign
+          </button>
+        </PopoverPanel>
+    </transition>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import { ShieldCheckIcon, ShieldExclamationIcon } from '@heroicons/vue/20/solid';
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import backend, { TrustDto, UserDto } from '../common/backend';
+import FetchError from './FetchError.vue';
+
+enum State {
+  Loading,
+  ShowTrust
+}
+
+const { t } = useI18n({ useScope: 'global' });
+
+const props = defineProps<{
+  me: UserDto,
+  userId: string
+}>();
+
+const state = ref(State.Loading);
+const onFetchError = ref<Error | null>();
+const trust = ref<TrustDto | undefined>();
+const trustLevel = computed(() => props.me.id === props.userId ? 0 : trust.value?.signatureChain.length || -1);
+
+onMounted(checkTrust);
+
+async function checkTrust() {
+  try {
+    trust.value = await backend.trust.get(props.userId);
+    state.value = State.ShowTrust;
+  } catch (error) {
+    console.error('Fetching data failed.', error);
+    onFetchError.value = error instanceof Error ? error : new Error('Unknown Error');
+  }
+}
+
+const sign = () => {
+  console.log('Sign');
+};
+
+</script>

frontend/src/components/VaultDetails.vue

@@ -44,9 +44,10 @@
           <template v-for="member in members.values()" :key="member.id">
             <li class="py-3 flex flex-col">
               <div class="flex justify-between items-center">
-                <div class="flex items-center text-ellipsis whitespace-nowrap overflow-hidden" :title="member.name">
+                <div class="flex items-center whitespace-nowrap w-full" :title="member.name">
                   <img :src="member.pictureUrl" alt="" class="w-8 h-8 rounded-full" />
                   <p class="w-full ml-4 text-sm font-medium text-gray-900 truncate">{{ member.name }}</p>
+                  <TrustDetails v-if="me" :me="me" :user-id="member.id"/>
                   <div v-if="member.role == 'OWNER'" class="ml-3 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">{{ t('vaultDetails.sharedWith.badge.owner') }}</div>
                 </div>
                 <Menu v-if="member.id != me?.id" as="div" class="relative ml-2 inline-block flex-shrink-0 text-left">
@@ -226,6 +227,7 @@ import GrantPermissionDialog from './GrantPermissionDialog.vue';
 import ReactivateVaultDialog from './ReactivateVaultDialog.vue';
 import RecoverVaultDialog from './RecoverVaultDialog.vue';
 import SearchInputGroup from './SearchInputGroup.vue';
+import TrustDetails from './TrustDetails.vue';
 
 const { t, d } = useI18n({ useScope: 'global' });