updated protected files visualization

ui/src/components/records/RecordFileThumb.svelte

@@ -2,7 +2,6 @@
     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 = "";
@@ -14,16 +13,7 @@
     let token = "";
     let isLoadingToken = false;
 
-    $: withToken =
-        typeof $privateFilesCollectionsCache[record?.collectionId] !== "undefined"
-            ? $privateFilesCollectionsCache[record?.collectionId]
-            : true;
-
-    $: if (withToken) {
-        loadFileToken();
-    } else {
-        token = "";
-    }
+    loadFileToken();
 
     $: type = CommonHelper.getFileType(filename);
 
@@ -39,7 +29,7 @@
         isLoadingToken = true;
 
         try {
-            token = await ApiClient.getAdminFileToken();
+            token = await ApiClient.getAdminFileToken(record.collectionId);
         } catch (err) {
             console.warn("File token failure:", err);
         }

ui/src/components/records/RecordUpsertPanel.svelte

@@ -92,6 +92,9 @@
         initialDraft = getDraft();
         if (!initialDraft || areRecordsEqual(record, initialDraft)) {
             initialDraft = null;
+        } else {
+            delete initialDraft.password;
+            delete initialDraft.passwordConfirm;
         }
 
         originalSerializedData = JSON.stringify(record);
@@ -482,7 +485,7 @@
             </Field>
 
             {#if collection?.isAuth}
-                <AuthFields bind:record {collection} />
+                <AuthFields bind:record {isNew} {collection} />
 
                 {#if collection?.schema?.length}
                     <hr />

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

@@ -9,6 +9,7 @@
 
     export let collection = new Collection();
     export let record = new Record();
+    export let isNew = record.$isNew;
 
     let originalUsername = record.username || null;
 
@@ -28,15 +29,15 @@
 
 <div class="grid m-b-base">
     <div class="col-lg-6">
-        <Field class="form-field {!record.$isNew ? 'required' : ''}" name="username" let:uniqueId>
+        <Field class="form-field {!isNew ? 'required' : ''}" name="username" let:uniqueId>
             <label for={uniqueId}>
                 <i class={CommonHelper.getFieldTypeIcon("user")} />
                 <span class="txt">Username</span>
             </label>
             <input
                 type="text"
-                requried={!record.$isNew}
-                placeholder={record.$isNew ? "Leave empty to auto generate..." : originalUsername}
+                requried={!isNew}
+                placeholder={isNew ? "Leave empty to auto generate..." : originalUsername}
                 id={uniqueId}
                 bind:value={record.username}
             />
@@ -69,7 +70,7 @@
             <!-- svelte-ignore a11y-autofocus -->
             <input
                 type="email"
-                autofocus={record.$isNew}
+                autofocus={isNew}
                 autocomplete="off"
                 id={uniqueId}
                 required={collection.options?.requireEmail}
@@ -79,14 +80,14 @@
     </div>
 
     <div class="col-lg-12">
-        {#if !record.$isNew}
+        {#if !isNew}
             <Field class="form-field form-field-toggle" name="verified" let:uniqueId>
                 <input type="checkbox" id={uniqueId} bind:checked={changePasswordToggle} />
                 <label for={uniqueId}>Change password</label>
             </Field>
         {/if}
 
-        {#if record.$isNew || changePasswordToggle}
+        {#if isNew || changePasswordToggle}
             <div class="block" transition:slide|local={{ duration: 150 }}>
                 <div class="grid" class:p-t-xs={changePasswordToggle}>
                     <div class="col-sm-6">
@@ -131,7 +132,7 @@
                 id={uniqueId}
                 bind:checked={record.verified}
                 on:change|preventDefault={(e) => {
-                    if (record.$isNew) {
+                    if (isNew) {
                         return; // no confirmation required
                     }
                     confirm(

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

@@ -6,6 +6,7 @@
     import Field from "@/components/base/Field.svelte";
     import UploadedFilePreview from "@/components/base/UploadedFilePreview.svelte";
     import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
+    import { onMount } from "svelte";
 
     export let record;
     export let value = "";
@@ -16,6 +17,7 @@
     let fileInput;
     let filesListElem;
     let isDragOver = false;
+    let fileToken = "";
 
     // normalize uploadedFiles type
     $: if (!Array.isArray(uploadedFiles)) {
@@ -93,6 +95,10 @@
 
         uploadedFiles = uploadedFiles;
     }
+
+    onMount(async () => {
+        fileToken = await ApiClient.getAdminFileToken(record.collectionId);
+    });
 </script>
 
 <div
@@ -129,7 +135,7 @@
 
                     <div class="content">
                         <a
-                            href={ApiClient.files.getUrl(record, filename)}
+                            href={ApiClient.files.getUrl(record, filename, { token: fileToken })}
                             class="txt-ellipsis {isDeleted ? 'txt-strikethrough txt-hint' : 'link-primary'}"
                             title="Download"
                             target="_blank"