[#215] updated the admin ui to allow displaying private files

ui/src/components/base/PreviewPopup.svelte

@@ -5,7 +5,12 @@
     let panel;
     let url = "";
 
-    $: filename = url.substring(url.lastIndexOf("/") + 1);
+    $: queryParamsIndex = url.indexOf("?");
+
+    $: filename = url.substring(
+        url.lastIndexOf("/") + 1,
+        queryParamsIndex > 0 ? queryParamsIndex : undefined
+    );
 
     $: type = CommonHelper.getFileType(filename);
 

ui/src/components/records/RecordFileThumb.svelte

@@ -2,6 +2,7 @@
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
     import PreviewPopup from "@/components/base/PreviewPopup.svelte";
+    import { privateFilesCollectionsCache } from "@/stores/collections";
 
     export let record = null;
     export let filename = "";
@@ -9,39 +10,72 @@
 
     let previewPopup;
     let thumbUrl = "";
-    let originalUrl = ApiClient.getFileUrl(record, filename);
+    let originalUrl = "";
+    let token = "";
+    let isLoadingToken = false;
+
+    $: withToken =
+        typeof $privateFilesCollectionsCache[record?.collectionId] !== "undefined"
+            ? $privateFilesCollectionsCache[record?.collectionId]
+            : true;
+
+    $: if (withToken) {
+        loadFileToken();
+    } else {
+        token = "";
+    }
 
     $: type = CommonHelper.getFileType(filename);
 
     $: hasPreview = ["image", "audio", "video"].includes(type) || filename.endsWith(".pdf");
 
-    $: thumbUrl = originalUrl ? originalUrl + "?thumb=100x100" : "";
+    $: originalUrl = !isLoadingToken ? ApiClient.files.getUrl(record, filename, { token }) : "";
+
+    $: thumbUrl = !isLoadingToken
+        ? ApiClient.files.getUrl(record, filename, { thumb: "100x100", token: token })
+        : "";
+
+    async function loadFileToken() {
+        isLoadingToken = true;
+
+        try {
+            token = await ApiClient.getAdminFileToken();
+        } catch (err) {
+            console.warn("File token failure:", err);
+        }
+
+        isLoadingToken = false;
+    }
 
     function onError() {
         thumbUrl = "";
     }
 </script>
 
-<a
-    class="thumb {size ? `thumb-${size}` : ''}"
-    href={originalUrl}
-    target="_blank"
-    rel="noreferrer"
-    title={(hasPreview ? "Preview" : "Download") + " " + filename}
-    on:click|stopPropagation={(e) => {
-        if (hasPreview) {
-            e.preventDefault();
-            previewPopup?.show(originalUrl);
-        }
-    }}
->
-    {#if type === "image"}
-        <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
-    {:else if type === "video" || type === "audio"}
-        <i class="ri-video-line" />
-    {:else}
-        <i class="ri-file-3-line" />
-    {/if}
-</a>
+{#if isLoadingToken}
+    <div class="thumb {size ? `thumb-${size}` : ''}" />
+{:else}
+    <a
+        class="thumb {size ? `thumb-${size}` : ''}"
+        href={originalUrl}
+        target="_blank"
+        rel="noreferrer"
+        title={(hasPreview ? "Preview" : "Download") + " " + filename}
+        on:click|stopPropagation={(e) => {
+            if (hasPreview) {
+                e.preventDefault();
+                previewPopup?.show(originalUrl);
+            }
+        }}
+    >
+        {#if type === "image"}
+            <img src={thumbUrl} alt={filename} title="Preview {filename}" on:error={onError} />
+        {:else if type === "video" || type === "audio"}
+            <i class="ri-video-line" />
+        {:else}
+            <i class="ri-file-3-line" />
+        {/if}
+    </a>
+{/if}
 
 <PreviewPopup bind:this={previewPopup} />

ui/src/components/records/fields/FileField.svelte

@@ -90,7 +90,7 @@
 
                 <div class="content">
                     <a
-                        href={ApiClient.getFileUrl(record, filename)}
+                        href={ApiClient.files.getUrl(record, filename)}
                         class="txt-ellipsis {isDeleted ? 'txt-strikethrough txt-hint' : 'link-primary'}"
                         title="Download"
                         target="_blank"

ui/src/components/settings/PageTokenOptions.svelte

@@ -6,14 +6,20 @@
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import Field from "@/components/base/Field.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
+    import TokenField from "@/components/settings/TokenField.svelte";
 
-    const tokensList = [
+    const recordTokensList = [
         { key: "recordAuthToken", label: "Auth record authentication token" },
         { key: "recordVerificationToken", label: "Auth record email verification token" },
         { key: "recordPasswordResetToken", label: "Auth record password reset token" },
         { key: "recordEmailChangeToken", label: "Auth record email change token" },
+        { key: "recordFileToken", label: "Records private file access token" },
+    ];
+
+    const adminTokensList = [
         { key: "adminAuthToken", label: "Admins auth token" },
         { key: "adminPasswordResetToken", label: "Admins password reset token" },
+        { key: "adminFileToken", label: "Admins private file access token" },
     ];
 
     $pageTitle = "Token options";
@@ -64,6 +70,8 @@
         data = data || {};
         formSettings = {};
 
+        const tokensList = recordTokensList.concat(adminTokensList);
+
         for (const listItem of tokensList) {
             formSettings[listItem.key] = {
                 duration: data[listItem.key]?.duration || 0,
@@ -97,33 +105,26 @@
             {#if isLoading}
                 <div class="loader" />
             {:else}
-                {#each tokensList as token (token.key)}
-                    <Field class="form-field required" name="{token.key}.duration" let:uniqueId>
-                        <label for={uniqueId}>{token.label} duration (in seconds)</label>
-                        <input
-                            type="number"
-                            id={uniqueId}
-                            required
-                            bind:value={formSettings[token.key].duration}
-                        />
-                        <div class="help-block">
-                            <span
-                                class="link-primary"
-                                class:txt-success={formSettings[token.key].secret}
-                                on:click={() => {
-                                    // toggle
-                                    if (formSettings[token.key].secret) {
-                                        delete formSettings[token.key].secret;
-                                        formSettings[token.key] = formSettings[token.key];
-                                    } else {
-                                        formSettings[token.key].secret = CommonHelper.randomString(50);
-                                    }
-                                }}
-                            >
-                                Invalidate all previously issued tokens
-                            </span>
-                        </div>
-                    </Field>
+                <h3 class="section-title">Record tokens</h3>
+                {#each recordTokensList as token (token.key)}
+                    <TokenField
+                        key={token.key}
+                        label={token.label}
+                        bind:duration={formSettings[token.key].duration}
+                        bind:secret={formSettings[token.key].secret}
+                    />
+                {/each}
+
+                <hr />
+
+                <h3 class="section-title">Admin tokens</h3>
+                {#each adminTokensList as token (token.key)}
+                    <TokenField
+                        key={token.key}
+                        label={token.label}
+                        bind:duration={formSettings[token.key].duration}
+                        bind:secret={formSettings[token.key].secret}
+                    />
                 {/each}
 
                 <div class="flex">

ui/src/components/settings/TokenField.svelte

@@ -0,0 +1,31 @@
+<script>
+    import CommonHelper from "@/utils/CommonHelper";
+    import Field from "@/components/base/Field.svelte";
+
+    export let key;
+    export let label;
+    export let duration;
+    export let secret;
+</script>
+
+<Field class="form-field required" name="{key}.duration" let:uniqueId>
+    <label for={uniqueId}>{label} duration (in seconds)</label>
+    <input type="number" id={uniqueId} required bind:value={duration} />
+    <div class="help-block">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <span
+            class="link-primary"
+            class:txt-success={!!secret}
+            on:click={() => {
+                // toggle
+                if (secret) {
+                    secret = undefined;
+                } else {
+                    secret = CommonHelper.randomString(50);
+                }
+            }}
+        >
+            Invalidate all previously issued tokens
+        </span>
+    </div>
+</Field>

ui/src/scss/_base.scss

@@ -677,6 +677,9 @@ a.thumb:not(.thumb-active) {
     }
 
     // sizes
+    &.loader-xs {
+        --loaderSize: 18px;
+    }
     &.loader-sm {
         --loaderSize: 24px;
     }

ui/src/stores/collections.js

@@ -2,9 +2,10 @@ import { writable } from "svelte/store";
 import ApiClient    from "@/utils/ApiClient";
 import CommonHelper from "@/utils/CommonHelper";
 
-export const collections          = writable([]);
-export const activeCollection     = writable({});
-export const isCollectionsLoading = writable(false);
+export const collections           = writable([]);
+export const activeCollection      = writable({});
+export const isCollectionsLoading  = writable(false);
+export const privateFilesCollectionsCache = writable({});
 
 export function changeActiveCollectionById(collectionId) {
     collections.update((list) => {
@@ -28,6 +29,9 @@ export function addCollection(collection) {
 
     collections.update((list) => {
         CommonHelper.pushOrReplaceByKey(list, collection, "id");
+
+        refreshPrivateFilesCollectionsCache();
+
         return CommonHelper.sortCollections(list);
     });
 }
@@ -43,6 +47,8 @@ export function removeCollection(collection) {
             return current;
         });
 
+        refreshPrivateFilesCollectionsCache();
+
         return list;
     });
 }
@@ -66,9 +72,25 @@ export async function loadCollections(activeId = null) {
         } else if (items.length) {
             activeCollection.set(items[0]);
         }
+
+        refreshPrivateFilesCollectionsCache();
     } catch (err) {
         ApiClient.errorResponseHandler(err);
     }
 
     isCollectionsLoading.set(false);
 }
+
+function refreshPrivateFilesCollectionsCache() {
+    privateFilesCollectionsCache.update((cache) => {
+        collections.update((current) => {
+            for (let c of current) {
+                cache[c.id] = !!c.schema?.find((f) => f.type == "file" && f.options?.private);
+            }
+
+            return current;
+        });
+
+        return cache;
+    });
+}

ui/src/utils/ApiClient.js

@@ -1,4 +1,4 @@
-import PocketBase, { LocalAuthStore, Admin } from "pocketbase";
+import PocketBase, { LocalAuthStore, Admin, isTokenExpired } from "pocketbase";
 // ---
 import CommonHelper      from "@/utils/CommonHelper";
 import { replace }       from "svelte-spa-router";
@@ -6,6 +6,8 @@ import { addErrorToast } from "@/stores/toasts";
 import { setErrors }     from "@/stores/errors";
 import { setAdmin }      from "@/stores/admin";
 
+const adminFileTokenKey = "pb_admin_file_token";
+
 /**
  * Clears the authorized state and redirects to the login page.
  *
@@ -63,6 +65,29 @@ PocketBase.prototype.errorResponseHandler = function(err, notify = true, default
     }
 };
 
+/**
+ * @return {Promise<String>}
+ */
+PocketBase.prototype.getAdminFileToken = async function() {
+    let token = localStorage.getItem(adminFileTokenKey) || '';
+
+    // request a new token only if the previous one is missing or will expire soon
+    if (!token || isTokenExpired(token, 15)) {
+        // remove previously stored token (if any)
+        token && localStorage.removeItem(adminFileTokenKey);
+
+        if (!this._adminFileTokenRequest) {
+            this._adminFileTokenRequest = this.files.getToken();
+        }
+
+        token = await this._adminFileTokenRequest;
+        localStorage.setItem(adminFileTokenKey, token);
+        this._adminFileTokenRequest = null;
+    }
+
+    return token;
+}
+
 // Custom auth store to sync the svelte admin store state with the authorized admin instance.
 class AppAuthStore extends LocalAuthStore {
     /**