[#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>