UI improvements

.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=

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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.",

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"