Redirect 401 to password page instead error page

src/app/(__components)/compPassword.tsx

@@ -1,12 +1,20 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import passwordHash from "utils/encryptionHelper/passwordHash";
 
 import { Constant } from "types/general/constant";
 
-function Password({ path }: { path: string }) {
+function Password({
+  path,
+  redirect,
+}: {
+  path: string;
+  redirect: string;
+}) {
+  const router = useRouter();
   const [password, setPassword] = useState<string>("");
 
   const handlePasswordSubmit = (
@@ -42,7 +50,7 @@ function Password({ path }: { path: string }) {
       )}; expires=${expires.toUTCString()}; path=/`;
     }
 
-    window.location.reload();
+    router.push(redirect);
   };
 
   return (

src/app/[...path]/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata, ResolvingMetadata } from "next";
 import { cookies } from "next/headers";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 
 import Breadcrumb from "components/compBreadcrumb";
 import FileLayout from "components/compFileLayout";
@@ -120,6 +120,16 @@ async function FilePage({ params }: Props) {
 
   if (!pathValidation.success) {
     const errorData = pathValidation as API_Error;
+    if (errorData.code === 401) {
+      const protectedPath = errorData.reason
+        .split('"')[1]
+        .split('"')[0];
+      redirect(
+        `/password?redirect=${params.path.join(
+          "/",
+        )}&path=${protectedPath}`,
+      );
+    }
     if (errorData.code === 404) {
       notFound();
     }

src/app/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import { cookies } from "next/headers";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 
 import Breadcrumb from "components/compBreadcrumb";
 import FileLayout from "components/compFileLayout";
@@ -75,6 +75,14 @@ async function RootPage() {
 
   if (!pathValidation.success) {
     const errorData = pathValidation as API_Error;
+    if (errorData.code === 401) {
+      const protectedPath = errorData.reason
+        .split('"')[1]
+        .split('"')[0];
+      redirect(
+        `/password?redirect=/&path=${protectedPath}`,
+      );
+    }
     if (errorData.code === 404) {
       notFound();
     }

src/app/password/page.tsx

@@ -0,0 +1,41 @@
+import { redirect } from "next/navigation";
+
+import CompPassword from "components/compPassword";
+
+type Props = {
+  searchParams: {
+    [key: string]: string | string[] | undefined;
+  };
+};
+function Password({ searchParams }: Props) {
+  if (
+    searchParams["redirect"] === undefined ||
+    searchParams["path"] === undefined
+  ) {
+    redirect("/");
+  }
+
+  return (
+    <div
+      className={
+        "relative flex h-full min-h-[80dvh] w-full flex-grow flex-col items-center justify-center gap-8"
+      }
+    >
+      {/* Image placeholder */}
+      <div
+        className={
+          "grid h-48 w-48 place-items-center rounded-lg bg-blue-300 font-semibold text-zinc-900"
+        }
+      >
+        Placeholder Image
+      </div>
+
+      <CompPassword
+        path={searchParams["path"] as string}
+        redirect={searchParams["redirect"] as string}
+      />
+    </div>
+  );
+}
+
+export default Password;