Fixed protected file download response and icons

SU-SWS · Jun 11, 2024 · 7457297 · 7457297
1 parent d6379eb
commit 7457297
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/app/system/[...slug]/route.tsx b/app/system/[...slug]/route.tsx
@@ -16,5 +16,14 @@ export const GET = async (request: NextRequest) => {
   if (!res.ok) {
     return NextResponse.json({message: "Unauthorized"}, {status: 401})
   }
-  return new NextResponse(await res.blob(), {status: 200, statusText: "OK", headers: res.headers})
+
+  const filename = request.nextUrl.pathname.split("/").pop()
+  return new NextResponse(await res.blob(), {
+    status: 200,
+    statusText: "OK",
+    headers: {
+      "Content-Disposition": `attachment; filename=${filename}`,
+      "Content-Type": res.headers.get("Content-Type") || "application/octet-stream",
+    },
+  })
 }
diff --git a/src/components/paragraphs/sup-file-list/file-list-paragraph.tsx b/src/components/paragraphs/sup-file-list/file-list-paragraph.tsx
@@ -2,7 +2,8 @@ import {HtmlHTMLAttributes} from "react"
 import {ParagraphSupFileList} from "@lib/gql/__generated__/drupal.d"
 import FileListSelection from "@components/paragraphs/sup-file-list/file-list-selection"
 import {H2} from "@components/elements/headers"
-import {DocumentIcon} from "@heroicons/react/24/outline"
+import {DocumentTextIcon} from "@heroicons/react/24/outline"
+import {LockClosedIcon} from "@heroicons/react/24/solid"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphSupFileList
@@ -33,9 +34,21 @@ const FileListParagraph = ({paragraph, ...props}: Props) => {
           <li key={media.value}>
             <a
               href={media.url}
-              className="flex w-fit items-center gap-10 text-m1 text-press-sand-dark"
+              className="group flex w-fit items-center gap-10 text-m1 text-press-sand-dark"
             >
-              <DocumentIcon width={50} />
+              <span className="relative block">
+                <DocumentTextIcon
+                  width={50}
+                  className="text-press-sand-light group-hover:text-press-sand-dark group-focus:text-press-sand-dark"
+                />
+
+                {media.url.startsWith("/system/") && (
+                  <LockClosedIcon
+                    width={30}
+                    className="absolute bottom-0 right-0"
+                  />
+                )}
+              </span>
               {media.label}
             </a>
           </li>