From a8ffbc87d1a179a7a974125931dbbf9bf1daed23 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 18 Jul 2024 16:29:59 -0400
Subject: [PATCH] UI improvements

---
 .env.sample                              |  4 +-
 pages/api/v1/archives/[linkId].ts        |  2 +-
 pages/api/v1/auth/forgot-password.ts     |  2 +-
 pages/api/v1/auth/reset-password.ts      |  2 +-
 pages/api/v1/auth/verify-email.ts        |  2 +-
 pages/api/v1/collections/[id].ts         |  4 +-
 pages/api/v1/collections/index.ts        |  2 +-
 pages/api/v1/links/[id]/archive/index.ts |  2 +-
 pages/api/v1/links/[id]/index.ts         |  4 +-
 pages/api/v1/links/index.ts              |  6 +--
 pages/api/v1/migration/index.ts          |  2 +-
 pages/api/v1/tags/[id].ts                |  4 +-
 pages/api/v1/tokens/[id].ts              |  2 +-
 pages/api/v1/tokens/index.ts             |  2 +-
 pages/api/v1/users/[id].ts               |  4 +-
 pages/api/v1/users/index.ts              |  2 +-
 pages/login.tsx                          | 60 ++++++++++++++++++++++++
 17 files changed, 84 insertions(+), 22 deletions(-)

diff --git a/.env.sample b/.env.sample
index 2993c39a..22bda557 100644
--- a/.env.sample
+++ b/.env.sample
@@ -21,7 +21,9 @@ BROWSER_TIMEOUT=
 IGNORE_UNAUTHORIZED_CA=
 IGNORE_HTTPS_ERRORS=
 IGNORE_URL_SIZE_LIMIT=
-DEMO_MODE=
+NEXT_PUBLIC_DEMO=
+NEXT_PUBLIC_DEMO_USERNAME=
+NEXT_PUBLIC_DEMO_PASSWORD=
 NEXT_PUBLIC_ADMIN=
 NEXT_PUBLIC_MAX_FILE_BUFFER=
 MONOLITH_MAX_BUFFER=
diff --git a/pages/api/v1/archives/[linkId].ts b/pages/api/v1/archives/[linkId].ts
index cf044b1e..aed82889 100644
--- a/pages/api/v1/archives/[linkId].ts
+++ b/pages/api/v1/archives/[linkId].ts
@@ -77,7 +77,7 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
       return res.send(file);
     }
   } else if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/auth/forgot-password.ts b/pages/api/v1/auth/forgot-password.ts
index 17283652..66fb8073 100644
--- a/pages/api/v1/auth/forgot-password.ts
+++ b/pages/api/v1/auth/forgot-password.ts
@@ -7,7 +7,7 @@ export default async function forgotPassword(
   res: NextApiResponse
 ) {
   if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/auth/reset-password.ts b/pages/api/v1/auth/reset-password.ts
index 7199fcb5..5bbadfd8 100644
--- a/pages/api/v1/auth/reset-password.ts
+++ b/pages/api/v1/auth/reset-password.ts
@@ -7,7 +7,7 @@ export default async function resetPassword(
   res: NextApiResponse
 ) {
   if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/auth/verify-email.ts b/pages/api/v1/auth/verify-email.ts
index c19521d7..41a9d0c1 100644
--- a/pages/api/v1/auth/verify-email.ts
+++ b/pages/api/v1/auth/verify-email.ts
@@ -7,7 +7,7 @@ export default async function verifyEmail(
   res: NextApiResponse
 ) {
   if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/collections/[id].ts b/pages/api/v1/collections/[id].ts
index 994dd335..94090317 100644
--- a/pages/api/v1/collections/[id].ts
+++ b/pages/api/v1/collections/[id].ts
@@ -19,7 +19,7 @@ export default async function collections(
       .status(collections.status)
       .json({ response: collections.response });
   } else if (req.method === "PUT") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
@@ -28,7 +28,7 @@ export default async function collections(
     const updated = await updateCollectionById(user.id, collectionId, req.body);
     return res.status(updated.status).json({ response: updated.response });
   } else if (req.method === "DELETE") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/collections/index.ts b/pages/api/v1/collections/index.ts
index 369863f3..3198ea5e 100644
--- a/pages/api/v1/collections/index.ts
+++ b/pages/api/v1/collections/index.ts
@@ -16,7 +16,7 @@ export default async function collections(
       .status(collections.status)
       .json({ response: collections.response });
   } else if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/links/[id]/archive/index.ts b/pages/api/v1/links/[id]/archive/index.ts
index fa6cf83b..6cacf73b 100644
--- a/pages/api/v1/links/[id]/archive/index.ts
+++ b/pages/api/v1/links/[id]/archive/index.ts
@@ -29,7 +29,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     });
 
   if (req.method === "PUT") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/links/[id]/index.ts b/pages/api/v1/links/[id]/index.ts
index 02299f47..7f33c662 100644
--- a/pages/api/v1/links/[id]/index.ts
+++ b/pages/api/v1/links/[id]/index.ts
@@ -14,7 +14,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: updated.response,
     });
   } else if (req.method === "PUT") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
@@ -29,7 +29,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: updated.response,
     });
   } else if (req.method === "DELETE") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
index f506d3b9..2000e79f 100644
--- a/pages/api/v1/links/index.ts
+++ b/pages/api/v1/links/index.ts
@@ -37,7 +37,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     const links = await getLinks(user.id, convertedData);
     return res.status(links.status).json({ response: links.response });
   } else if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
@@ -48,7 +48,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: newlink.response,
     });
   } else if (req.method === "PUT") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
@@ -64,7 +64,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       response: updated.response,
     });
   } else if (req.method === "DELETE") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/migration/index.ts b/pages/api/v1/migration/index.ts
index 60f52a74..4e479847 100644
--- a/pages/api/v1/migration/index.ts
+++ b/pages/api/v1/migration/index.ts
@@ -30,7 +30,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
         .status(data.status)
         .json(data.response);
   } else if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/tags/[id].ts b/pages/api/v1/tags/[id].ts
index f9a9fd84..606daf0c 100644
--- a/pages/api/v1/tags/[id].ts
+++ b/pages/api/v1/tags/[id].ts
@@ -10,7 +10,7 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
   const tagId = Number(req.query.id);
 
   if (req.method === "PUT") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
@@ -19,7 +19,7 @@ export default async function tags(req: NextApiRequest, res: NextApiResponse) {
     const tags = await updeteTagById(user.id, tagId, req.body);
     return res.status(tags.status).json({ response: tags.response });
   } else if (req.method === "DELETE") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/tokens/[id].ts b/pages/api/v1/tokens/[id].ts
index a0615d7a..c4501fb8 100644
--- a/pages/api/v1/tokens/[id].ts
+++ b/pages/api/v1/tokens/[id].ts
@@ -7,7 +7,7 @@ export default async function token(req: NextApiRequest, res: NextApiResponse) {
   if (!user) return;
 
   if (req.method === "DELETE") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/tokens/index.ts b/pages/api/v1/tokens/index.ts
index 915980f9..bc5117eb 100644
--- a/pages/api/v1/tokens/index.ts
+++ b/pages/api/v1/tokens/index.ts
@@ -11,7 +11,7 @@ export default async function tokens(
   if (!user) return;
 
   if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/users/[id].ts b/pages/api/v1/users/[id].ts
index 9e102f9a..5213d7fe 100644
--- a/pages/api/v1/users/[id].ts
+++ b/pages/api/v1/users/[id].ts
@@ -58,7 +58,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
   }
 
   if (req.method === "PUT") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
@@ -67,7 +67,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
     const updated = await updateUserById(userId, req.body);
     return res.status(updated.status).json({ response: updated.response });
   } else if (req.method === "DELETE") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/api/v1/users/index.ts b/pages/api/v1/users/index.ts
index 8f1f7703..356a9f01 100644
--- a/pages/api/v1/users/index.ts
+++ b/pages/api/v1/users/index.ts
@@ -5,7 +5,7 @@ import verifyUser from "@/lib/api/verifyUser";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === "POST") {
-    if (process.env.DEMO_MODE === "true")
+    if (process.env.NEXT_PUBLIC_DEMO === "true")
       return res.status(400).json({
         response:
           "This action is disabled because this is a read-only demo of Linkwarden.",
diff --git a/pages/login.tsx b/pages/login.tsx
index 6694cffa..cc1a7f0b 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -92,6 +92,66 @@ export default function Login({
             {t("enter_credentials")}
           </p>
           <hr className="border-1 border-sky-100 dark:border-neutral-700" />
+
+          {process.env.NEXT_PUBLIC_DEMO === "true" &&
+            process.env.NEXT_PUBLIC_DEMO_USERNAME &&
+            process.env.NEXT_PUBLIC_DEMO_PASSWORD && (
+              <div className="p-3 shadow-lg border border-primary rounded-xl">
+                <div className="flex flex-col gap-2 items-center text-center w-full">
+                  <div className="flex items-center gap-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      className="stroke-info h-6 w-6 shrink-0"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                      ></path>
+                    </svg>
+                    <p className="font-bold">Demo Only</p>
+                  </div>
+                  <div className="text-xs">
+                    This is only a demo instance of Linkwarden and uploads are
+                    disabled.
+                  </div>
+
+                  <div className="text-xs">
+                    If you want to try out the full version, you can sign up for
+                    a free trial at:{" "}
+                    <a
+                      href="https://cloud.linkwarden.app"
+                      target="_blank"
+                      className="font-bold"
+                    >
+                      cloud.linkwarden.app
+                    </a>
+                  </div>
+                  <div
+                    className="btn btn-sm btn-primary w-full"
+                    onClick={async () => {
+                      setForm({
+                        username: process.env
+                          .NEXT_PUBLIC_DEMO_USERNAME as string,
+                        password: process.env
+                          .NEXT_PUBLIC_DEMO_PASSWORD as string,
+                      });
+                      await signIn("credentials", {
+                        username: process.env.NEXT_PUBLIC_DEMO_USERNAME,
+                        password: process.env.NEXT_PUBLIC_DEMO_PASSWORD,
+                        redirect: false,
+                      });
+                    }}
+                  >
+                    Login as demo user
+                  </div>
+                </div>
+              </div>
+            )}
+
           <div>
             <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
               {availableLogins.emailEnabled === "true"