store signature

frontend/src/common/backend.ts

@@ -252,7 +252,7 @@ class UserService {
 
 class TrustService {
   public async trustUser(userId: string, signature: string): Promise<void> {
-    return axiosAuth.put(`/users/trusted/${userId}`, signature);
+    return axiosAuth.put(`/users/trusted/${userId}`, signature, { headers: { 'Content-Type': 'text/plain' } });
   }
   public async get(userId: string): Promise<TrustDto | undefined> {
     return axiosAuth.get<TrustDto>(`/users/trusted/${userId}`).then(response => response.data)

frontend/src/components/TrustDetails.vue

@@ -16,7 +16,7 @@
     <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">
+          <button v-if="trustLevel === -1 && trustedUser.ecdsaPublicKey" @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>
@@ -42,7 +42,7 @@ enum State {
 const { t } = useI18n({ useScope: 'global' });
 
 const props = defineProps<{
-  userId: string
+  trustedUser: UserDto
 }>();
 
 const state = ref(State.Loading);
@@ -56,7 +56,7 @@ onMounted(fetchData);
 async function fetchData() {
   try {
     me.value = await userdata.me;
-    trust.value = await backend.trust.get(props.userId);
+    trust.value = await backend.trust.get(props.trustedUser.id);
     state.value = State.ShowTrust;
   } catch (error) {
     console.error('Fetching data failed.', error);
@@ -65,30 +65,31 @@ async function fetchData() {
 }
 
 function computeTrustLevel() {
-  if (me.value?.id === props.userId) {
+  if (me.value?.id === props.trustedUser.id) {
     return 0; // Self
   } else if (trust.value) {
+    // TODO: check signature
     return trust.value.signatureChain.length;
   } else {
     return -1; // Unverified
   }
 }
 
 async function sign() {
+  if (!props.trustedUser.ecdsaPublicKey) {
+    throw new Error('No public key to sign');
+  }
   const userKeys = await userdata.decryptUserKeysWithBrowser();
   const signature = await JWT.build({
     alg: 'ES384',
     typ: 'JWT',
     b64: true,
     iss: me.value?.id,
-    sub: props.userId,
+    sub: props.trustedUser.id,
     iat: Math.floor(Date.now() / 1000)
-  }, props.userId, userKeys.ecdsaKeyPair.privateKey);
-  // backend.trust.trustUser(props.userId, signature);
-
-  // TODO: remove debug output (for verifification onbly)
-  console.log('Signature: ', signature);
-  console.log('Signer\'s Public Key: ', await crypto.subtle.exportKey('jwk', userKeys.ecdsaKeyPair.publicKey));
+  }, props.trustedUser.ecdsaPublicKey, userKeys.ecdsaKeyPair.privateKey);
+  await backend.trust.trustUser(props.trustedUser.id, signature);
+  trust.value = await backend.trust.get(props.trustedUser.id);
 };
 
 </script>

frontend/src/components/VaultDetails.vue

@@ -47,7 +47,7 @@
                 <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 :user-id="member.id"/>
+                  <TrustDetails v-if="member.type === 'USER'" :trusted-user="member"/>
                   <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">