complete secure files

app/Conductors/MediaConductor.php

@@ -51,8 +51,9 @@ class MediaConductor extends Conductor
 
         /** @var \App\Models\User */
         $user = auth()->user();
+        $fields = arrayRemoveItem($fields, 'security_data');
         if ($user === null || $user->hasPermission('admin/media') === false) {
-            $fields = arrayRemoveItem($fields, ['security', 'storage']);
+            $fields = arrayRemoveItem($fields, 'storage');
         }
 
         return $fields;
@@ -68,13 +69,13 @@ class MediaConductor extends Conductor
     {
         $user = auth()->user();
         if ($user === null) {
-            $builder->where('security', '');
+            $builder->where('security_type', '');
         } else {
             $builder->where(function ($query) use ($user) {
-                $query->where('security', '')
+                $query->where('security_type', '')
                     ->orWhere(function ($subquery) use ($user) {
-                        $subquery->where('security', 'LIKE', 'permission:%')
+                        $subquery->where('security_type', 'permission')
-                            ->whereIn(DB::raw("SUBSTRING(security, 11)"), $user->permissions);
+                            ->whereIn('security_data', $user->permissions);
                     });
             });
         }

app/Http/Controllers/Api/MediaController.php

@@ -13,6 +13,7 @@ use Illuminate\Http\Request;
 use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Carbon;
 use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Storage;
 use Laravel\Sanctum\PersonalAccessToken;
 
 class MediaController extends ApiController
@@ -162,15 +163,20 @@ class MediaController extends ApiController
                 $data['storage'] = $request->get('storage', '');
             }
 
-            if ($request->has('security') === true || $file !== null) {
+            if ($request->has('security_type') === true || $file !== null) {
-                $data['security'] = $request->get('security', '');
+                $data['security']['type'] = $request->get('security_type', '');
+                $data['security']['data'] = $request->get('security_data', '');
+
+                if($data['security']['type'] === '') {
+                    $data['security']['data'] = '';
+                }
             }
 
             if(array_key_exists('storage', $data) === true && 
-                array_key_exists('security', $data) === true && 
+                (array_key_exists('security', $data) === true && array_key_exists('type', $data['security']) === true) && 
                 array_key_exists('mime_type', $data) === true && 
                 $data['mime_type'] !== "") {
-                    $error = Media::verifyStorage($data['mime_type'], $data['security'], $data['storage']);
+                    $error = Media::verifyStorage($data['mime_type'], $data['security']['type'], $data['storage']);
                     switch($error) {
                         case Media::STORAGE_VALID:
                             break;
@@ -284,47 +290,49 @@ class MediaController extends ApiController
      */
     public function download(Request $request, Media $medium)
     {
-        $respondJson = in_array('application/json', explode(',', $request->header('Accept', 'application/json')));
-
         $headers = [];
-        $path = $medium->path();
+        
-
+        /* Check file exists */
-        /* File exists */
+        if(Storage::disk($medium->storage)->exists($medium->name) === true) {
-        if (file_exists($path) === false) {
+            return $this->respondNotFound();
-            if ($respondJson === false) {
-                return redirect('/not-found');
-            } else {
-                return $this->respondNotFound();
-            }
         }
-
+        
-        $updated_at = Carbon::parse(filemtime($path));
+        $updated_at = Carbon::parse(Storage::disk($medium->storage)->lastModified($medium->name));
 
         $headerPragma = 'no-cache';
         $headerCacheControl = 'max-age=0, must-revalidate';
         $headerExpires = $updated_at->toRfc2822String();
 
-        if (empty($medium->permission) === true) {
+        /* construct user if can */
-            if ($request->user() === null && $request->has('token') === true) {
+        $user = $request->user();
-                $accessToken = PersonalAccessToken::findToken(urldecode($request->input('token')));
+        if ($user === null && $request->has('token') === true) {
+            $accessToken = PersonalAccessToken::findToken(urldecode($request->input('token')));
 
-                if (
+            if (
-                    $accessToken !== null && (config('sanctum.expiration') === null ||
+                $accessToken !== null && (config('sanctum.expiration') === null ||
-                    $accessToken->created_at->lte(now()->subMinutes(config('sanctum.expiration'))) === false)
+                $accessToken->created_at->lte(now()->subMinutes(config('sanctum.expiration'))) === false)
-                ) {
+            ) {
-                    $user = $accessToken->tokenable;
+                $user = $accessToken->tokenable;
-                }
             }
-            if ($request->user() === null || $user->hasPermission($medium->permission) === false) {
+        }
-                if ($respondJson === false) {
+
-                    return redirect('/login?redirect=' . $request->path());
+        if ($medium->security_type === '') {
-                } else {
+            /* no security */
-                    return $this->respondForbidden();
-                }
-            }
-        } else {
             $headerPragma = 'public';
             $headerExpires = $updated_at->addMonth()->toRfc2822String();
+        } else if (strcasecmp('password', $medium->security_type) === 0) {
+            /* password */
+            if(
+                ($user === null || $user->hasPermission('admin/media') === false) && 
+                ($request->has('password') === false || $request->get('password') !== $medium->security_data)) {
+                    return $this->respondForbidden();
+            }
+        } else if (strcasecmp('permission', $medium->security_type) === 0) {
+            /* permission */
+            if(
+                $user === null || ($user->hasPermission('admin/media') === false && $user->hasPermission($medium->security_data) === false)) {
+                    return $this->respondForbidden();
+            }
         }//end if
 
         // deepcode ignore InsecureHash: Browsers expect Etag to be a md5 hash
@@ -333,7 +341,7 @@ class MediaController extends ApiController
 
         $headers = [
             'Cache-Control' => $headerCacheControl,
-            'Content-Disposition' => sprintf('inline; filename="%s"', basename($path)),
+            'Content-Disposition' => sprintf('inline; filename="%s"', basename($medium->name)),
             'Etag' => $headerEtag,
             'Expires' => $headerExpires,
             'Last-Modified' => $headerLastModified,
@@ -352,7 +360,18 @@ class MediaController extends ApiController
             return response()->make('', 304, $headers);
         }
 
-        return response()->file($path, $headers);
+        $headers['Content-Type'] = Storage::disk($medium->storage)->mimeType($medium->name);
+        $headers['Content-Length'] = Storage::disk($medium->storage)->size($medium->name);
+        $headers['Content-Disposition'] = 'inline; filename="' . basename($medium->name) . '"';
+
+        $stream = Storage::disk($medium->storage)->readStream($medium->name);
+        return response()->stream(
+            function () use ($stream) {
+                fclose($stream);
+            },
+            200,
+            $headers
+        );
     }
 
     /**

app/Jobs/MediaWorkerJob.php

@@ -86,13 +86,14 @@ class MediaWorkerJob implements ShouldQueue
                 }//end if
 
                 // get security
-                $security = '';
+                $security = [];
                 if ($media === null) {
                     if (array_key_exists('security', $data) === true) {
                         $security = $data['security'];
                     }
                 } else {
-                    $security = $media->security;
+                    $security['type'] = $media->security_type;
+                    $security['data'] = $media->security_data;
                 }
 
                 // get storage
@@ -106,7 +107,7 @@ class MediaWorkerJob implements ShouldQueue
                 }
 
                 if ($storage === '') {
-                    if(strlen($security) === 0) {
+                    if(count($security) === 0 || $security['type'] === '') {
                         if (strpos($data['mime_type'], 'image/') === 0) {
                             $storage = 'local';
                         } else {
@@ -145,7 +146,8 @@ class MediaWorkerJob implements ShouldQueue
                         'name' => $data['name'],
                         'mime_type' => $data['mime_type'],
                         'size' => $data['size'],
-                        'security' => $data['security'],
+                        'security_type' => $data['security']['type'],
+                        'security_data' => $data['security']['data'],
                         'storage' => $storage,
                     ]);
                 }//end if
@@ -296,8 +298,9 @@ class MediaWorkerJob implements ShouldQueue
             }
 
             // Relocate file (if requested)
-            if (array_key_exists('security', $data) === true) {
+            if (array_key_exists('security', $data) === true && array_key_exists('type', $data['security']) === true) {
-                $media->security = $data['security'];
+                $media->security_type = $data['security']['type'];
+                $media->security_data = $data['security']['data'];
             }
             
             if (array_key_exists('storage', $data) === true) {

app/Models/Media.php

@@ -51,7 +51,8 @@ class Media extends Model
         'title',
         'user_id',
         'mime_type',
-        'security',
+        'security_type',
+        'security_data',
         'storage',
         'description',
         'name',
@@ -77,7 +78,8 @@ class Media extends Model
         'variants' => '[]',
         'description' => '',
         'dimensions' => '',
-        'security' => '',
+        'security_type' => '',
+        'security_data' => '',
         'thumbnail' => '',
     ];
 
@@ -335,11 +337,12 @@ class Media extends Model
      */
     public function getUrlAttribute(): string
     {
-        if (isset($this->attributes['name']) === true) {
+        $url = self::getUrlPath();
-            return self::getUrlPath() . $this->name;
-        }
 
-        return '';
+        $url = str_replace('{id}', $this->id, $url);
+        $url = str_replace('{name}', $this->name, $url);
+
+        return $url;
     }
 
     /**
@@ -377,49 +380,6 @@ class Media extends Model
         return null;
     }
 
-    /**
-     * Download the file from the storage to the user.
-     *
-     * @param string  $variant  The variant to download or null if none.
-     * @param boolean $fallback Fallback to the original file if the variant is not found.
-     * @return JsonResponse|StreamedResponse The response.
-     * @throws BindingResolutionException The Exception.
-     */
-    public function download(string $variant = null, bool $fallback = true)
-    {
-        $path = $this->name;
-        if ($variant !== null) {
-            if (array_key_exists($variant, $this->variant) === true) {
-                $path = $this->variant[$variant];
-            } else {
-                return response()->json(
-                    ['message' => 'The resource was not found.'],
-                    HttpResponseCodes::HTTP_NOT_FOUND
-                );
-            }
-        }
-
-        $disk = Storage::disk($this->storage);
-        if ($disk->exists($path) === true) {
-            $stream = $disk->readStream($path);
-            $response = response()->stream(
-                function () use ($stream) {
-                    fpassthru($stream);
-                },
-                200,
-                [
-                    'Content-Type' => $this->mime_type,
-                    'Content-Length' => $disk->size($path),
-                    'Content-Disposition' => 'attachment; filename="' . basename($path) . '"',
-                ]
-            );
-
-            return $response;
-        }
-
-        return response()->json(['message' => 'The resource was not found.'], HttpResponseCodes::HTTP_NOT_FOUND);
-    }
-
     /**
      * Get the server maximum upload size
      *
@@ -773,7 +733,7 @@ class Media extends Model
         $newFilename = pathinfo($this->name, PATHINFO_FILENAME) . "-" . uniqid() . "-thumb.webp";
         $success = false;
 
-        if ($this->security === '') {
+        if ($this->security_type === '') {
             if (strpos($this->mime_type, 'image/') === 0) {
                 $image = Image::make($filePath);
                 $image->orientate();
@@ -897,7 +857,7 @@ class Media extends Model
         }
         $this->variants = [];
 
-        if ($this->security === '') {
+        if ($this->security_type === '') {
             if (strpos($this->mime_type, 'image/') === 0) {
                 // Generate additional image sizes
                 $sizes = Media::getObjectVariants('image');
@@ -1025,13 +985,13 @@ class Media extends Model
         return $this->hasMany(MediaJob::class, 'media_id');
     }
 
-    public static function verifyStorage($mime_type, $security, &$storage): int {
+    public static function verifyStorage($mime_type, $security_type, &$storage): int {
         if($mime_type === '') {
             return Media::STORAGE_MIME_MISSING;
         }
 
         if($storage === '') {
-            if($security === '') {
+            if($security_type === '') {
                 if (strpos($mime_type, 'image/') === 0) {
                     $storage = 'local';
                 } else {

app/Models/MediaJob.php

@@ -181,10 +181,10 @@ class MediaJob extends Model
                         $data['mime_type'] = $mime;
 
                         if(array_key_exists('storage', $data) === true && 
-                        array_key_exists('security', $data) === true && 
+                        array_key_exists('security_type', $data) === true && 
                         array_key_exists('mime_type', $data) === true && 
                         $data['mime_type'] !== "") {
-                            $error = Media::verifyStorage($data['mime_type'], $data['security'], $data['storage']);
+                            $error = Media::verifyStorage($data['mime_type'], $data['security_type'], $data['storage']);
                             switch($error) {
                                 case Media::STORAGE_VALID:
                                     break;

config/filesystems.php

@@ -44,7 +44,7 @@ return [
             'secret' => env('AWS_PUBLIC_SECRET_ACCESS_KEY'),
             'region' => env('AWS_PUBLIC_DEFAULT_REGION'),
             'bucket' => env('AWS_PUBLIC_BUCKET'),
-            'url' => env('AWS_PUBLIC_URL'),
+            'url' => env('AWS_PUBLIC_URL') . '/{name}',
             'endpoint' => env('AWS_PUBLIC_ENDPOINT'),
             'use_path_style_endpoint' => env('AWS_PUBLIC_USE_PATH_STYLE_ENDPOINT', false),
             'throw' => false,
@@ -55,25 +55,18 @@ return [
         ],
 
         'private' => [
-            'driver' => 's3',
+            'driver' => 'local',
-            'key' => env('AWS_PRIVATE_ACCESS_KEY_ID'),
+            'root' => storage_path('app/private'),
-            'secret' => env('AWS_PRIVATE_SECRET_ACCESS_KEY'),
+            // 'url' => env('APP_URL') . '/file',
-            'region' => env('AWS_PRIVATE_DEFAULT_REGION'),
+            'url' => env('APP_URL_API') . '/media/{id}/download',
-            'bucket' => env('AWS_PRIVATE_BUCKET'),
+            'visibility' => 'private',
-            'url' => env('AWS_PRIVATE_URL'),
-            'endpoint' => env('AWS_PRIVATE_ENDPOINT'),
-            'use_path_style_endpoint' => env('AWS_PRIVATE_USE_PATH_STYLE_ENDPOINT', false),
             'throw' => false,
-            'public' => false,
-            'options' => [
-                'ACL' => '',
-            ]
         ],
 
         'public' => [
             'driver' => 'local',
             'root' => storage_path('app/public'),
-            'url' => env('APP_URL') . '/storage',
+            'url' => env('APP_URL') . '/storage/{name}',
             'visibility' => 'public',
             'throw' => false,
         ],

database/migrations/2023_09_25_053320_rename_permission_column_in_media_table.php

@@ -12,12 +12,13 @@ return new class extends Migration
     public function up(): void
     {
         Schema::table('media', function (Blueprint $table) {
-            $table->renameColumn('permission', 'security');
+            $table->string('security_type');
+            $table->renameColumn('permission', 'security_data');
         });
 
         DB::table('media')
-            ->where('security', '!=', '')
+            ->where('security_data', '!=', '')
-            ->update(['security' => DB::raw("CONCAT('permission:', security)")]);
+            ->update(['security_type' => 'permission']);
     }
 
     /**
@@ -26,17 +27,12 @@ return new class extends Migration
     public function down(): void
     {
         DB::table('media')
-        ->where(function ($query) {
+        ->where('security_type', '!=', 'permission')
-            $query->where('security', 'NOT LIKE', 'permission:%');
+        ->update(['security_data' => '']);
-        })
-        ->update(['security' => '']);
-
-        DB::table('media')
-        ->where('security', 'LIKE', 'permission:%')
-        ->update(['security' => DB::raw("SUBSTRING(security, 11)")]);
 
         Schema::table('media', function (Blueprint $table) {
-            $table->renameColumn('security', 'permission');
+            $table->renameColumn('security_data', 'permission');
+            $table->dropColumn('security_type');
         });
     }
 };

resources/js/components/SMAttachments.vue

@@ -11,7 +11,7 @@
             v-if="modelValue && modelValue.length > 0"
             class="w-full border-1 rounded-2 bg-white text-sm mt-2">
             <tbody>
-                <tr v-for="file of modelValue" :key="file.id">
+                <tr v-for="file of fileList" :key="file.id">
                     <td class="py-2 pl-2 hidden sm:block">
                         <img
                             :src="getFileIconImagePath(file.name || file.title)"
@@ -82,6 +82,9 @@ import SMHeader from "../components/SMHeader.vue";
 import { openDialog } from "../components/SMDialog";
 import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
 import { Media } from "../helpers/api.types";
+import { onMounted, ref, watch } from "vue";
+import { ImportMetaExtras } from "../../../import-meta";
+import { strCaseCmp } from "../helpers/string";
 
 const emits = defineEmits(["update:modelValue"]);
 const props = defineProps({
@@ -97,6 +100,8 @@ const props = defineProps({
     },
 });
 
+const fileList = ref([]);
+
 /**
  * Handle the user adding a new media item.
  */
@@ -112,7 +117,7 @@ const handleClickAdd = async () => {
         if (result) {
             const mediaResult = result as Media[];
             let newValue = props.modelValue;
-            let mediaIds = new Set(newValue.map((item) => item.id));
+            let mediaIds = new Set(newValue.map((item) => (item as Media).id));
 
             mediaResult.forEach((item) => {
                 if (!mediaIds.has(item.id)) {
@@ -128,105 +133,50 @@ const handleClickAdd = async () => {
 
 const handleClickDelete = (id: string) => {
     if (props.showEditor == true) {
-        const newList = props.modelValue.filter((item) => item.id !== id);
+        const newList = props.modelValue.filter(
+            (item) => (item as Media).id !== id,
+        );
         emits("update:modelValue", newList);
     }
 };
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+        updateFileList(newValue as Array<Media>);
+    },
+);
+
+onMounted(() => {
+    if (props.modelValue !== undefined) {
+        updateFileList(props.modelValue as Array<Media>);
+    }
+});
+
+const updateFileList = (newFileList: Array<Media>) => {
+    fileList.value = [];
+
+    for (const mediaItem of newFileList) {
+        const webUrl = (import.meta as ImportMetaExtras).env.APP_URL;
+        const apiUrl = (import.meta as ImportMetaExtras).env.APP_URL_API;
+
+        // Is the URL a API request?
+        if (mediaItem.url.startsWith(apiUrl)) {
+            const fileUrlPath = mediaItem.url.substring(apiUrl.length);
+            const fileUrlParts = fileUrlPath.split("/");
+
+            if (
+                fileUrlParts.length === 4 &&
+                fileUrlParts[0].length === 0 &&
+                strCaseCmp("media", fileUrlParts[1]) === true &&
+                strCaseCmp("download", fileUrlParts[3]) === true
+            ) {
+                mediaItem.url = webUrl + "/file/" + fileUrlParts[2];
+                fileList.value.push(mediaItem);
+            }
+        } else {
+            fileList.value.push(mediaItem);
+        }
+    }
+};
 </script>
-
-<!-- <style lang="scss">
-.attachment-list {
-    border: 1px solid var(--base-color);
-    border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
-    // max-width: 580px;
-    margin-top: 12px;
-    background-color: var(--base-color-light);
-
-    .attachment-row {
-        td {
-            padding: 8px 0;
-        }
-
-        &:last-child td {
-            border-bottom: 0;
-        }
-
-        .attachment-file-icon {
-            width: 56px;
-            padding-left: 8px;
-
-            img {
-                display: block;
-            }
-        }
-
-        .attachment-file-name {
-            font-size: 80%;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            a {
-                text-decoration: none;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        .attachment-download {
-            width: 28px;
-            text-align: center;
-
-            a {
-                display: block;
-                color: var(--base-color-dark);
-                transition: color 0.2s ease-in-out;
-
-                &:hover {
-                    color: var(--primary-color);
-                }
-
-                svg {
-                    margin-top: 4px;
-                    width: 24px;
-                    height: 24px;
-                }
-            }
-        }
-
-        .attachment-file-size {
-            width: 80px;
-            font-size: 75%;
-            color: var(--base-color-dark);
-            white-space: nowrap;
-            text-align: right;
-            padding-right: 8px;
-        }
-    }
-}
-
-@media only screen and (max-width: 640px) {
-    .attachment-list {
-        .attachment-file-icon img {
-            margin: 0 4px;
-        }
-
-        .attachment-download a,
-        .attachment-file-size {
-            padding-left: 8px;
-        }
-    }
-}
-
-@media only screen and (max-width: 440px) {
-    .attachment-list {
-        .attachment-file-icon {
-            display: none;
-        }
-    }
-}
-</style> -->

resources/js/components/dialogs/SMDialogMedia.vue

@@ -144,6 +144,16 @@
                                                     item,
                                                 )}')`,
                                             }">
+                                            <div
+                                                v-if="item.security_type != ''">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    viewBox="0 0 24 24">
+                                                    <title>locked</title>
+                                                    <path
+                                                        d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
+                                                </svg>
+                                            </div>
                                             <div
                                                 class="absolute -bottom-6 small w-full text-ellipsis overflow-hidden whitespace-nowrap">
                                                 {{ item.title }}

resources/js/helpers/api.types.ts

@@ -66,7 +66,7 @@ export interface Media {
     title: string;
     name: string;
     mime_type: string;
-    permission: string;
+    security_type: string;
     size: number;
     storage: string;
     url: string;

resources/js/helpers/string.ts

@@ -113,3 +113,13 @@ export const toPrice = (numOrString: number | string): string => {
             : numOrString;
     return num.toFixed(num % 1 === 0 ? 0 : 2);
 };
+
+/**
+ * Compare 2 strings case insensitive
+ * @param {string} string1 The first string for comparison.
+ * @param {string} string2 The second string for comparison.
+ * @returns {boolean} If the strings match.
+ */
+export const strCaseCmp = (string1: string, string2: string): boolean => {
+    return string1.toLowerCase() === string2.toLowerCase();
+};

resources/js/router/index.js

@@ -426,6 +426,14 @@ export const routes = [
         },
         component: () => import("@/views/ForgotPassword.vue"),
     },
+    {
+        path: "/file/:id",
+        name: "file",
+        meta: {
+            title: "File",
+        },
+        component: () => import("@/views/File.vue"),
+    },
     {
         path: "/cart",
         name: "cart",
@@ -448,8 +456,7 @@ export const routes = [
 const router = createRouter({
     history: createWebHistory(),
     routes,
-    scrollBehavior(to, from, savedPosition) {
+    scrollBehavior() {
-        // always scroll to top
         return { top: 0 };
     },
 });

resources/js/views/File.vue

@@ -0,0 +1,132 @@
+<template>
+    <SMPageStatus
+        v-if="pageLoading == false && pageStatus != 200"
+        :status="pageStatus" />
+    <SMLoading v-else-if="pageLoading == true"></SMLoading>
+    <SMForm
+        v-else-if="showPasswordForm == true"
+        :model-value="form"
+        @submit="handleSubmit">
+        <SMFormCard>
+            <template #header>
+                <h3>Password Required</h3>
+                <p>This file requires a password before it can be viewed</p>
+            </template>
+            <template #body>
+                <SMInput
+                    control="password"
+                    type="password"
+                    label="File Password"
+                    autofocus />
+            </template>
+            <template #footer-space-between>
+                <input role="button" type="submit" value="OK" />
+            </template>
+        </SMFormCard>
+    </SMForm>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { api } from "../helpers/api";
+import { useRoute } from "vue-router";
+import { Media } from "../helpers/api.types";
+import SMLoading from "../components/SMLoading.vue";
+import { strCaseCmp } from "../helpers/string";
+import { useUserStore } from "../store/UserStore";
+import { Form, FormControl, FormObject } from "../helpers/form";
+import { Required } from "../helpers/validate";
+
+const pageStatus = ref(200);
+const pageLoading = ref(true);
+const showPasswordForm = ref(false);
+const fileUrl = ref("");
+const userStore = useUserStore();
+
+const form: FormObject = reactive(
+    Form({
+        password: FormControl("", Required()),
+    }),
+);
+
+/*
+ * Download file from URL
+ */
+const downloadFile = (params = {}) => {
+    let url = fileUrl.value;
+
+    // Check if the URL already contains query parameters
+    const hasQueryParameters = url.includes("?");
+
+    if (Object.keys(params).length > 0) {
+        url += hasQueryParameters ? "&" : "?";
+        url += Object.keys(params)
+            .map(
+                (key) =>
+                    encodeURIComponent(key) +
+                    "=" +
+                    encodeURIComponent(params[key]),
+            )
+            .join("&");
+    }
+
+    window.location.href = url;
+};
+
+/*
+ * Handle password form submit
+ */
+const handleSubmit = () => {
+    const params = {
+        password: form.controls.password.value,
+    };
+
+    downloadFile(params);
+};
+
+/**
+ * Handle page loading
+ */
+const handleLoad = async () => {
+    const route = useRoute();
+    if (route.params.id === undefined) {
+        pageStatus.value = 403;
+    } else {
+        const params = {
+            id: route.params.id,
+        };
+
+        let result = await api.get({
+            url: "/media/:id",
+            params: params,
+        });
+
+        if (result.status === 200) {
+            const medium = result.data as Media;
+            fileUrl.value = medium.url;
+
+            if (medium.security_type === "") {
+                downloadFile();
+            } else if (
+                strCaseCmp("permission", medium.security_type) === true &&
+                userStore.id
+            ) {
+                const params = {
+                    token: userStore.token,
+                };
+
+                downloadFile(params);
+            } else if (strCaseCmp("password", medium.security_type) === true) {
+                showPasswordForm.value = true;
+            } else {
+                /* unknown security type */
+                pageStatus.value = 403;
+            }
+        } else {
+            pageStatus.value = result.status;
+        }
+    }
+};
+
+handleLoad();
+</script>

resources/js/views/dashboard/MediaEdit.vue

@@ -21,7 +21,26 @@
                     accepts="*"
                     class="mb-4" />
                 <SMInput control="title" class="mb-4" />
-                <SMInput control="permission" class="mb-4" />
+                <div class="flex flex-col md:flex-row gap-4">
+                    <SMDropdown
+                        class="mb-4"
+                        control="security_type"
+                        type="select"
+                        :options="{
+                            '': 'None',
+                            permission: 'Permission',
+                            password: 'Password',
+                        }" />
+                    <SMInput
+                        v-if="form.controls.security_type.value != ''"
+                        class="mb-4"
+                        control="security_data"
+                        :label="
+                            toTitleCase(
+                                form.controls.security_type.value.toString(),
+                            )
+                        " />
+                </div>
                 <div
                     v-if="!editMultiple"
                     class="flex flex-col md:flex-row gap-4">
@@ -77,7 +96,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from "vue";
+import { computed, reactive, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { ApiOptions, api } from "../../helpers/api";
 import { Form, FormControl } from "../../helpers/form";
@@ -92,6 +111,7 @@ import { closeDialog, openDialog } from "../../components/SMDialog";
 import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
 import SMForm from "../../components/SMForm.vue";
 import SMInput from "../../components/SMInput.vue";
+import SMDropdown from "../../components/SMDropdown.vue";
 import SMMastHead from "../../components/SMMastHead.vue";
 import SMLoading from "../../components/SMLoading.vue";
 import { useToastStore } from "../../store/ToastStore";
@@ -119,7 +139,8 @@ const form = reactive(
         file: FormControl("", And([Required()])),
         title: FormControl("", Required()),
         description: FormControl(),
-        permission: FormControl(),
+        security_type: FormControl(),
+        security_data: FormControl(),
     }),
 );
 
@@ -153,7 +174,8 @@ const handleLoad = async () => {
                 form.controls.file.value = data.medium;
                 form.controls.title.value = data.medium.title;
                 form.controls.description.value = data.medium.description;
-                form.controls.permission.value = data.medium.permission;
+                form.controls.security_type.value = data.medium.security_type;
+                form.controls.security_data.value = data.medium.security_data;
                 fileData.url = data.medium.url;
                 fileData.mime_type = data.medium.mime_type;
                 fileData.size = data.medium.size;
@@ -232,8 +254,14 @@ const handleSubmit = async (enableFormCallBack) => {
 
         submitData.append("title", form.controls.title.value as string);
         submitData.append(
-            "permission",
+            "security_type",
-            form.controls.permission.value as string,
+            form.controls.security_type.value as string,
+        );
+        submitData.append(
+            "security_data",
+            form.controls.security_type.value == ""
+                ? ""
+                : (form.controls.security_data.value as string),
         );
         submitData.append(
             "description",

resources/js/views/form.ts

@@ -0,0 +1,8 @@
+import { reactive } from "vue";
+import { Form, FormControl, FormObject } from "../helpers/form";
+
+export const form: FormObject = reactive(
+    Form({
+        password: FormControl("", Required()),
+    }),
+);