fix: show warning when password protect

src/components/Type.tsx

@@ -1,4 +1,15 @@
-import { Alert, Box, Button, Card, Center, Group, Image, LoadingOverlay, Text } from '@mantine/core';
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  Center,
+  Group,
+  Image,
+  LoadingOverlay,
+  Text,
+  UnstyledButton,
+} from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { AudioIcon, FileIcon, ImageIcon, PlayIcon } from './icons';
 import KaTeX from './render/KaTeX';
@@ -15,6 +26,15 @@ function PlaceholderContent({ text, Icon }) {
 }
 
 function Placeholder({ text, Icon, ...props }) {
+  if (props.onClick)
+    return (
+      <UnstyledButton sx={{ height: 200 }} {...props}>
+        <Center sx={{ height: 200 }}>
+          <PlaceholderContent text={text} Icon={Icon} />
+        </Center>
+      </UnstyledButton>
+    );
+
   return (
     <Box sx={{ height: 200 }} {...props}>
       <Center sx={{ height: 200 }}>
@@ -81,6 +101,17 @@ export default function Type({ file, popup = false, disableMediaPreview, ...prop
     return <Placeholder Icon={FileIcon} text={`Click to view file (${file.name})`} {...props} />;
   }
 
+  if (file.password) {
+    return (
+      <Placeholder
+        Icon={FileIcon}
+        text={`This file is password protected. Click to view file (${file.name})`}
+        onClick={() => window.open(file.url)}
+        {...props}
+      />
+    );
+  }
+
   return popup ? (
     media ? (
       {

src/pages/api/user/files.ts

@@ -41,7 +41,9 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
 
       logger.info(`User ${user.username} (${user.id}) deleted an image ${file.name} (${file.id})`);
 
-      delete file.password;
+      // @ts-ignore
+      if (file.password) file.password = true;
+
       return res.json(file);
     }
   } else if (req.method === 'PATCH') {
@@ -57,7 +59,8 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         },
       });
 
-    delete image.password;
+    // @ts-ignore
+    if (file.password) file.password = true;
     return res.json(image);
   } else {
     if (req.query.count) {

src/pages/api/user/folders/[id].ts

@@ -89,7 +89,8 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     if (req.query.files) {
       for (let i = 0; i !== folder.files.length; ++i) {
         const file = folder.files[i];
-        delete file.password;
+        // @ts-ignore
+        if (file.password) file.password = true;
 
         (folder.files[i] as unknown as { url: string }).url = formatRootUrl(
           config.uploader.route,
@@ -123,7 +124,8 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     if (req.query.files) {
       for (let i = 0; i !== folder.files.length; ++i) {
         const file = folder.files[i];
-        delete file.password;
+        // @ts-ignore
+        if (file.password) file.password = true;
 
         (folder.files[i] as unknown as { url: string }).url = formatRootUrl(
           config.uploader.route,
@@ -217,7 +219,8 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       if (req.query.files) {
         for (let i = 0; i !== folder.files.length; ++i) {
           const file = folder.files[i];
-          delete file.password;
+          // @ts-ignore
+          if (file.password) file.password = true;
 
           (folder.files[i] as unknown as { url: string }).url = formatRootUrl(
             config.uploader.route,
@@ -232,7 +235,8 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     if (req.query.files) {
       for (let i = 0; i !== folder.files.length; ++i) {
         const file = folder.files[i];
-        delete file.password;
+        // @ts-ignore
+        if (file.password) file.password = true;
 
         (folder.files[i] as unknown as { url: string }).url = formatRootUrl(
           config.uploader.route,

src/pages/api/user/folders/index.ts

@@ -81,7 +81,8 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
         const folder = folders[i];
         for (let j = 0; j !== folders[i].files.length; ++j) {
           const file = folder.files[j];
-          delete file.password;
+          // @ts-ignore
+          if (file.password) file.password = true;
 
           (folder.files[j] as unknown as { url: string }).url = formatRootUrl(
             config.uploader.route,

src/pages/api/user/paged.ts

@@ -58,6 +58,7 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
     maxViews: number;
     views: number;
     folderId: number;
+    password: string | boolean;
   }[] = await prisma.file.findMany({
     where,
     orderBy: {
@@ -73,13 +74,17 @@ async function handler(req: NextApiReq, res: NextApiRes, user: UserExtended) {
       views: true,
       maxViews: true,
       folderId: true,
+      password: true,
     },
     skip: page ? (Number(page) - 1) * pageCount : undefined,
     take: page ? pageCount : undefined,
   });
 
   for (let i = 0; i !== files.length; ++i) {
-    (files[i] as unknown as { url: string }).url = formatRootUrl(config.uploader.route, files[i].name);
+    const file = files[i];
+    if (file.password) file.password = true;
+
+    (file as unknown as { url: string }).url = formatRootUrl(config.uploader.route, file.name);
   }
 
   return res.json(files);

src/pages/folder/[id].tsx

@@ -35,8 +35,8 @@ export default function Folder({ title, folder }: Props) {
         <title>{full_title}</title>
       </Head>
       <Container size='lg'>
-        <Title align='center' my='lg'>
-          Viewing folder: {folder.name}
+        <Title size={50} align='center' my='lg'>
+          {folder.name}
         </Title>
         <SimpleGrid
           my='md'
@@ -80,6 +80,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
           id: true,
           views: true,
           createdAt: true,
+          password: true,
         },
       },
       user: {
@@ -101,6 +102,9 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
       folder.files[j].name
     );
 
+    // @ts-ignore
+    if (folder.files[j].password) folder.files[j].password = true;
+
     (folder.files[j].createdAt as unknown) = folder.files[j].createdAt.toString();
   }
 

src/pages/view/[id].tsx

@@ -197,7 +197,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   else if (prismRender && file.password) {
     const pass = file.password ? true : false;
-    delete file.password;
+    // @ts-ignore
+    if (file.password) file.password = true;
     return {
       props: {
         image: file,
@@ -214,7 +215,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     const data = await datasource.get(file.name);
     if (!data) return { notFound: true };
 
-    delete file.password;
+    // @ts-ignore
+    if (file.password) file.password = true;
 
     return {
       props: {
@@ -223,14 +225,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       },
     };
   }
+  // @ts-ignore
+  if (file.password) file.password = true;
 
-  const pass = file.password ? true : false;
-  delete file.password;
   return {
     props: {
       file,
       user,
-      pass,
+      pass: file.password ? true : false,
     },
   };
 };