feat: auth-roles, image-gallery, click-to-open (#166)

* schema changes

* db generate

* db migration

* add role based middleware

* implement attachment token access

* generate docs

* implement role based auth

* replace attachment specific tokens with gen token

* run linter

* cleanup temporary token implementation

frontend/components/Item/AttachmentsList.vue

@@ -10,7 +10,12 @@
         <span class="ml-2 w-0 flex-1 truncate"> {{ attachment.document.title }}</span>
       </div>
       <div class="ml-4 flex-shrink-0">
-        <button class="font-medium" @click="getAttachmentUrl(attachment)">Download</button>
+        <a class="tooltip mr-2" data-tip="Download" :href="attachmentURL(attachment.id)" target="_blank">
+          <Icon class="h-5 w-5" name="mdi-download" />
+        </a>
+        <a class="tooltip" data-tip="Open" :href="attachmentURL(attachment.id)" target="_blank">
+          <Icon class="h-5 w-5" name="mdi-open-in-new" />
+        </a>
       </div>
     </li>
   </ul>
@@ -31,25 +36,9 @@
   });
 
   const api = useUserApi();
-  const toast = useNotifier();
-  async function getAttachmentUrl(attachment: ItemAttachment) {
-    const url = await api.items.getAttachmentUrl(props.itemId, attachment.id);
 
-    if (!url) {
-      toast.error("Failed to get attachment url");
-      return;
-    }
-
-    if (!document) {
-      window.open(url, "_blank");
-      return;
-    }
-
-    const link = document.createElement("a");
-    link.href = url;
-    link.target = "_blank";
-    link.setAttribute("download", attachment.document.title);
-    link.click();
+  function attachmentURL(attachmentId: string) {
+    return api.authURL(`/items/${props.itemId}/attachments/${attachmentId}`);
   }
 </script>
 

frontend/composables/use-api.ts

@@ -43,5 +43,5 @@ export function useUserApi(): UserClient {
     requests.addResponseInterceptor(observer.handler);
   }
 
-  return new UserClient(requests);
+  return new UserClient(requests, authStore.attachmentToken);
 }

frontend/lib/api/base/base-api.ts

@@ -27,9 +27,21 @@ export function parseDate<T>(obj: T, keys: Array<keyof T> = []): T {
 
 export class BaseAPI {
   http: Requests;
+  attachmentToken: string;
 
-  constructor(requests: Requests) {
+  constructor(requests: Requests, attachmentToken = "") {
     this.http = requests;
+    this.attachmentToken = attachmentToken;
+  }
+
+  // if a attachmentToken is present it will be added to URL as a query param
+  // this is done with a simple appending of the query param to the URL. If your
+  // URL already has a query param, this will not work.
+  authURL(url: string): string {
+    if (this.attachmentToken) {
+      return `/api/v1${url}?access_token=${this.attachmentToken}`;
+    }
+    return url;
   }
 
   /**

frontend/lib/api/classes/items.ts

@@ -1,13 +1,6 @@
 import { BaseAPI, route } from "../base";
 import { parseDate } from "../base/base-api";
-import {
-  ItemAttachmentToken,
-  ItemAttachmentUpdate,
-  ItemCreate,
-  ItemOut,
-  ItemSummary,
-  ItemUpdate,
-} from "../types/data-contracts";
+import { ItemAttachmentUpdate, ItemCreate, ItemOut, ItemSummary, ItemUpdate } from "../types/data-contracts";
 import { AttachmentTypes, PaginationResult } from "../types/non-generated";
 
 export type ItemsQuery = {
@@ -79,18 +72,6 @@ export class ItemsApi extends BaseAPI {
     });
   }
 
-  async getAttachmentUrl(id: string, attachmentId: string): Promise<string> {
-    const payload = await this.http.get<ItemAttachmentToken>({
-      url: route(`/items/${id}/attachments/${attachmentId}`),
-    });
-
-    if (!payload.data) {
-      return "";
-    }
-
-    return route(`/items/${id}/attachments/download`, { token: payload.data.token });
-  }
-
   async deleteAttachment(id: string, attachmentId: string) {
     return await this.http.delete<void>({ url: route(`/items/${id}/attachments/${attachmentId}`) });
   }

frontend/lib/api/types/data-contracts.ts

@@ -324,6 +324,7 @@ export interface ItemAttachmentToken {
 }
 
 export interface TokenResponse {
+  attachmentToken: string;
   expiresAt: Date;
   token: string;
 }

frontend/lib/api/user.ts

@@ -15,8 +15,8 @@ export class UserClient extends BaseAPI {
   user: UserApi;
   actions: ActionsAPI;
 
-  constructor(requests: Requests) {
-    super(requests);
+  constructor(requests: Requests, attachmentToken: string) {
+    super(requests, attachmentToken);
 
     this.locations = new LocationsApi(requests);
     this.labels = new LabelsApi(requests);

frontend/pages/index.vue

@@ -105,6 +105,7 @@
     authStore.$patch({
       token: data.token,
       expires: data.expiresAt,
+      attachmentToken: data.attachmentToken,
     });
 
     navigateTo("/home");

frontend/pages/item/[id]/index.vue

@@ -27,17 +27,32 @@
   });
 
   type FilteredAttachments = {
-    photos: ItemAttachment[];
     attachments: ItemAttachment[];
     warranty: ItemAttachment[];
     manuals: ItemAttachment[];
     receipts: ItemAttachment[];
   };
 
+  type Photo = {
+    src: string;
+  };
+
+  const photos = computed<Photo[]>(() => {
+    return (
+      item.value?.attachments.reduce((acc, cur) => {
+        if (cur.type === "photo") {
+          acc.push({
+            src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
+          });
+        }
+        return acc;
+      }, [] as Photo[]) || []
+    );
+  });
+
   const attachments = computed<FilteredAttachments>(() => {
     if (!item.value) {
       return {
-        photos: [],
         attachments: [],
         manuals: [],
         warranty: [],
@@ -48,8 +63,9 @@
     return item.value.attachments.reduce(
       (acc, attachment) => {
         if (attachment.type === "photo") {
-          acc.photos.push(attachment);
-        } else if (attachment.type === "warranty") {
+          return acc;
+        }
+        if (attachment.type === "warranty") {
           acc.warranty.push(attachment);
         } else if (attachment.type === "manual") {
           acc.manuals.push(attachment);
@@ -61,7 +77,6 @@
         return acc;
       },
       {
-        photos: [] as ItemAttachment[],
         attachments: [] as ItemAttachment[],
         warranty: [] as ItemAttachment[],
         manuals: [] as ItemAttachment[],
@@ -144,7 +159,6 @@
     }
 
     return (
-      attachments.value.photos.length > 0 ||
       attachments.value.attachments.length > 0 ||
       attachments.value.warranty.length > 0 ||
       attachments.value.manuals.length > 0 ||
@@ -163,10 +177,6 @@
       });
     };
 
-    if (attachments.value.photos.length > 0) {
-      push("Photos");
-    }
-
     if (attachments.value.attachments.length > 0) {
       push("Attachments");
     }
@@ -292,10 +302,43 @@
     toast.success("Item deleted");
     navigateTo("/home");
   }
+
+  const refDialog = ref<HTMLDialogElement>();
+  const dialoged = reactive({
+    src: "",
+  });
+
+  function openDialog(img: Photo) {
+    refDialog.value.showModal();
+    dialoged.src = img.src;
+  }
+
+  function closeDialog() {
+    refDialog.value.close();
+  }
+
+  const refDialogBody = ref<HTMLDivElement>();
+  onClickOutside(refDialogBody, () => {
+    closeDialog();
+  });
 </script>
 
 <template>
   <BaseContainer v-if="item" class="pb-8">
+    <dialog ref="refDialog" class="z-[999] fixed bg-transparent">
+      <div ref="refDialogBody" class="relative">
+        <div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1">
+          <a class="btn btn-sm sm:btn-md btn-primary btn-circle" :href="dialoged.src" download>
+            <Icon class="h-5 w-5" name="mdi-download" />
+          </a>
+          <button class="btn btn-sm sm:btn-md btn-primary btn-circle" @click="closeDialog()">
+            <Icon class="h-5 w-5" name="mdi-close" />
+          </button>
+        </div>
+
+        <img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src" />
+      </div>
+    </dialog>
     <section class="px-3">
       <div class="flex justify-between items-center">
         <div class="form-control"></div>
@@ -353,6 +396,15 @@
           <DetailsSection :details="itemDetails" />
         </BaseCard>
 
+        <BaseCard>
+          <template #title> Photos </template>
+          <div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll">
+            <button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
+              <img class="rounded max-h-[200px]" :src="img.src" />
+            </button>
+          </div>
+        </BaseCard>
+
         <BaseCard v-if="showAttachments">
           <template #title> Attachments </template>
           <DetailsSection :details="attachmentDetails">
@@ -377,13 +429,6 @@
                 :item-id="item.id"
               />
             </template>
-            <template #photos>
-              <ItemAttachmentsList
-                v-if="attachments.photos.length > 0"
-                :attachments="attachments.photos"
-                :item-id="item.id"
-              />
-            </template>
             <template #receipts>
               <ItemAttachmentsList
                 v-if="attachments.receipts.length > 0"
@@ -419,3 +464,10 @@
     </section>
   </BaseContainer>
 </template>
+
+<style>
+  /* Style dialog background */
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+</style>

frontend/stores/auth.ts

@@ -6,6 +6,7 @@ import { UserOut } from "~~/lib/api/types/data-contracts";
 export const useAuthStore = defineStore("auth", {
   state: () => ({
     token: useLocalStorage("pinia/auth/token", ""),
+    attachmentToken: useLocalStorage("pinia/auth/attachmentToken", ""),
     expires: useLocalStorage("pinia/auth/expires", ""),
     self: null as UserOut | null,
   }),
@@ -27,6 +28,7 @@ export const useAuthStore = defineStore("auth", {
       const result = await api.user.logout();
 
       this.token = "";
+      this.attachmentToken = "";
       this.expires = "";
       this.self = null;