minor fix

Add close button and data-testids to toast messages

.env.sample

@@ -22,6 +22,7 @@ BROWSER_TIMEOUT=
 IGNORE_UNAUTHORIZED_CA=
 IGNORE_HTTPS_ERRORS=
 IGNORE_URL_SIZE_LIMIT=
+ADMINISTRATOR=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -76,6 +77,13 @@ AUTH0_ISSUER=
 AUTH0_CLIENT_SECRET=
 AUTH0_CLIENT_ID=
 
+# Authelia
+NEXT_PUBLIC_AUTHELIA_ENABLED=""
+AUTHELIA_CLIENT_ID=""
+AUTHELIA_CLIENT_SECRET=""
+AUTHELIA_WELLKNOWN_URL=""
+
+
 # Authentik
 NEXT_PUBLIC_AUTHENTIK_ENABLED=
 AUTHENTIK_CUSTOM_NAME=

Dockerfile

@@ -20,4 +20,4 @@ COPY . .
 RUN yarn prisma generate && \
     yarn build
 
-CMD yarn prisma migrate deploy && yarn start
+CMD yarn prisma migrate deploy && yarn start

components/ClickAwayHandler.tsx

@@ -8,19 +8,38 @@ type Props = {
   onMount?: (rect: DOMRect) => void;
 };
 
+function getZIndex(element: HTMLElement): number {
+  let zIndex = 0;
+  while (element) {
+    const zIndexStyle = window
+      .getComputedStyle(element)
+      .getPropertyValue("z-index");
+    const numericZIndex = Number(zIndexStyle);
+    if (zIndexStyle !== "auto" && !isNaN(numericZIndex)) {
+      zIndex = numericZIndex;
+      break;
+    }
+    element = element.parentElement as HTMLElement;
+  }
+  return zIndex;
+}
+
 function useOutsideAlerter(
   ref: RefObject<HTMLElement>,
   onClickOutside: Function
 ) {
   useEffect(() => {
-    function handleClickOutside(event: Event) {
+    function handleClickOutside(event: MouseEvent) {
-      if (
+      const clickedElement = event.target as HTMLElement;
-        ref.current &&
+      if (ref.current && !ref.current.contains(clickedElement)) {
-        !ref.current.contains(event.target as HTMLInputElement)
+        const refZIndex = getZIndex(ref.current);
-      ) {
+        const clickedZIndex = getZIndex(clickedElement);
-        onClickOutside(event);
+        if (clickedZIndex <= refZIndex) {
+          onClickOutside(event);
+        }
       }
     }
+
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);

components/LinkViews/LinkCard.tsx

@@ -19,6 +19,7 @@ import { generateLinkHref } from "@/lib/client/generateLinkHref";
 import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
+import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -53,7 +54,9 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
   let shortendURL;
 
   try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
+    if (link.url) {
+      shortendURL = new URL(link.url).host.toLowerCase();
+    }
   } catch (error) {
     console.log(error);
   }
@@ -109,7 +112,6 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
     editMode &&
     (permissions === true || permissions?.canCreate || permissions?.canDelete);
 
-  // window.open ('www.yourdomain.com', '_ blank');
   return (
     <div
       ref={ref}
@@ -162,18 +164,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
             {unescapeString(link.name || link.description) || link.url}
           </p>
 
-          <Link
+          <LinkTypeBadge link={link} />
-            href={link.url || ""}
-            target="_blank"
-            title={link.url || ""}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
-          >
-            <i className="bi-link-45deg text-lg mt-[0.10rem] leading-none"></i>
-            <p className="text-sm truncate">{shortendURL}</p>
-          </Link>
         </div>
 
         <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -122,18 +122,20 @@ export default function LinkActions({
               </div>
             </li>
           ) : undefined}
-          <li>
+          {link.type === "url" && (
-            <div
+            <li>
-              role="button"
+              <div
-              tabIndex={0}
+                role="button"
-              onClick={() => {
+                tabIndex={0}
-                (document?.activeElement as HTMLElement)?.blur();
+                onClick={() => {
-                setPreservedFormatsModal(true);
+                  (document?.activeElement as HTMLElement)?.blur();
-              }}
+                  setPreservedFormatsModal(true);
-            >
+                }}
-              Preserved Formats
+              >
-            </div>
+                Preserved Formats
-          </li>
+              </div>
+            </li>
+          )}
           {permissions === true || permissions?.canDelete ? (
             <li>
               <div

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -6,9 +6,11 @@ import React from "react";
 export default function LinkIcon({
   link,
   width,
+  className,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
   width?: string;
+  className?: string;
 }) {
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
@@ -16,33 +18,55 @@ export default function LinkIcon({
   const iconClasses: string =
     "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10" +
     " " +
-    (width || "w-12");
+    (width || "w-12") +
+    " " +
+    (className || "");
 
   const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
 
   return (
     <>
-      {link.url && url && showFavicon ? (
+      {link.type === "url" && url ? (
-        <Image
+        showFavicon ? (
-          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+          <Image
-          width={64}
+            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-          height={64}
+            width={64}
-          alt=""
+            height={64}
-          className={iconClasses}
+            alt=""
-          draggable="false"
+            className={iconClasses}
-          onError={() => {
+            draggable="false"
-            setShowFavicon(false);
+            onError={() => {
-          }}
+              setShowFavicon(false);
-        />
+            }}
-      ) : showFavicon === false ? (
+          />
-        <div className={iconClasses}>
+        ) : (
-          <i className="bi-link-45deg text-4xl text-black"></i>
+          <LinkPlaceholderIcon iconClasses={iconClasses} icon="bi-link-45deg" />
-        </div>
+        )
       ) : link.type === "pdf" ? (
-        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
+        <LinkPlaceholderIcon
+          iconClasses={iconClasses}
+          icon="bi-file-earmark-pdf"
+        />
       ) : link.type === "image" ? (
-        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
+        <LinkPlaceholderIcon
+          iconClasses={iconClasses}
+          icon="bi-file-earmark-image"
+        />
       ) : undefined}
     </>
   );
 }
+
+const LinkPlaceholderIcon = ({
+  iconClasses,
+  icon,
+}: {
+  iconClasses: string;
+  icon: string;
+}) => {
+  return (
+    <div className={`text-4xl text-black aspect-square ${iconClasses}`}>
+      <i className={`${icon} m-auto`}></i>
+    </div>
+  );
+};

components/LinkViews/LinkComponents/LinkTypeBadge.tsx

@@ -0,0 +1,38 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Link from "next/link";
+import React from "react";
+
+export default function LinkTypeBadge({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  let shortendURL;
+
+  if (link.type === "url" && link.url) {
+    try {
+      shortendURL = new URL(link.url).host.toLowerCase();
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return link.url && shortendURL ? (
+    <Link
+      href={link.url || ""}
+      target="_blank"
+      title={link.url || ""}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
+    >
+      <i className="bi-link-45deg text-lg mt-[0.1rem] leading-none"></i>
+      <p className="text-sm truncate">{shortendURL}</p>
+    </Link>
+  ) : (
+    <div className="badge badge-primary badge-sm my-1 select-none">
+      {link.type}
+    </div>
+  );
+}

components/LinkViews/LinkList.tsx

@@ -16,6 +16,7 @@ import { generateLinkHref } from "@/lib/client/generateLinkHref";
 import useAccountStore from "@/store/account";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
+import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -56,14 +57,6 @@ export default function LinkCardCompact({
     }
   };
 
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
   const [collection, setCollection] =
     useState<CollectionIncludingMembersAndLinkCount>(
       collections.find(
@@ -130,7 +123,11 @@ export default function LinkCardCompact({
           }
         >
           <div className="shrink-0">
-            <LinkIcon link={link} width="sm:w-12 w-8 mt-1 sm:mt-0" />
+            <LinkIcon
+              link={link}
+              width="sm:w-12 w-8"
+              className="mt-1 sm:mt-0"
+            />
           </div>
 
           <div className="w-[calc(100%-56px)] ml-2">
@@ -143,24 +140,7 @@ export default function LinkCardCompact({
                 {collection ? (
                   <LinkCollection link={link} collection={collection} />
                 ) : undefined}
-                {link.url ? (
+                <LinkTypeBadge link={link} />
-                  <Link
-                    href={link.url || ""}
-                    target="_blank"
-                    title={link.url || ""}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                    }}
-                    className="flex gap-1 item-center select-none text-neutral mt-1 hover:opacity-70 duration-100"
-                  >
-                    <i className="bi-link-45deg text-lg mt-[0.1rem] leading-none"></i>
-                    <p className="text-sm truncate">{shortendURL}</p>
-                  </Link>
-                ) : (
-                  <div className="badge badge-primary badge-sm my-1 select-none">
-                    {link.type}
-                  </div>
-                )}
                 <LinkDate link={link} />
               </div>
             </div>

components/ModalContent/DeleteUserModal.tsx

@@ -0,0 +1,51 @@
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import useUserStore from "@/store/admin/users";
+
+type Props = {
+  onClose: Function;
+  userId: number;
+};
+
+export default function DeleteUserModal({ onClose, userId }: Props) {
+  const { removeUser } = useUserStore();
+
+  const deleteUser = async () => {
+    const load = toast.loading("Deleting...");
+
+    const response = await removeUser(userId);
+
+    toast.dismiss(load);
+
+    response.ok && toast.success(`User Deleted.`);
+
+    onClose();
+  };
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin text-red-500">Delete User</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <div className="flex flex-col gap-3">
+        <p>Are you sure you want to remove this user?</p>
+
+        <div role="alert" className="alert alert-warning">
+          <i className="bi-exclamation-triangle text-xl" />
+          <span>
+            <b>Warning:</b> This action is irreversible!
+          </span>
+        </div>
+
+        <button
+          className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
+          onClick={deleteUser}
+        >
+          <i className="bi-trash text-xl" />
+          Delete, I know what I&apos;m doing
+        </button>
+      </div>
+    </Modal>
+  );
+}

components/ModalContent/NewUserModal.tsx

@@ -0,0 +1,133 @@
+import toast from "react-hot-toast";
+import Modal from "../Modal";
+import useUserStore from "@/store/admin/users";
+import TextInput from "../TextInput";
+import { FormEvent, useState } from "react";
+
+type Props = {
+  onClose: Function;
+};
+
+type FormData = {
+  name: string;
+  username?: string;
+  email?: string;
+  password: string;
+};
+
+const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
+
+export default function NewUserModal({ onClose }: Props) {
+  const { addUser } = useUserStore();
+
+  const [form, setForm] = useState<FormData>({
+    name: "",
+    username: "",
+    email: emailEnabled ? "" : undefined,
+    password: "",
+  });
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (!submitLoader) {
+      const checkFields = () => {
+        if (emailEnabled) {
+          return form.name !== "" && form.email !== "" && form.password !== "";
+        } else {
+          return (
+            form.name !== "" && form.username !== "" && form.password !== ""
+          );
+        }
+      };
+
+      if (checkFields()) {
+        if (form.password.length < 8)
+          return toast.error("Passwords must be at least 8 characters.");
+
+        setSubmitLoader(true);
+
+        const load = toast.loading("Creating Account...");
+
+        const response = await addUser(form);
+
+        toast.dismiss(load);
+        setSubmitLoader(false);
+
+        if (response.ok) {
+          toast.success("User Created!");
+          onClose();
+        } else {
+          toast.error(response.data as string);
+        }
+      } else {
+        toast.error("Please fill out all the fields.");
+      }
+    }
+  }
+
+  return (
+    <Modal toggleModal={onClose}>
+      <p className="text-xl font-thin">Create New User</p>
+
+      <div className="divider mb-3 mt-1"></div>
+
+      <form onSubmit={submit}>
+        <div className="grid sm:grid-cols-2 gap-3">
+          <div>
+            <p className="mb-2">Display Name</p>
+            <TextInput
+              placeholder="Johnny"
+              className="bg-base-200"
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              value={form.name}
+            />
+          </div>
+
+          {emailEnabled ? (
+            <div>
+              <p className="mb-2">Username</p>
+              <TextInput
+                placeholder="john"
+                className="bg-base-200"
+                onChange={(e) => setForm({ ...form, username: e.target.value })}
+                value={form.username}
+              />
+            </div>
+          ) : undefined}
+
+          <div>
+            <p className="mb-2">Email</p>
+            <TextInput
+              placeholder="johnny@example.com"
+              className="bg-base-200"
+              onChange={(e) => setForm({ ...form, email: e.target.value })}
+              value={form.email}
+            />
+          </div>
+
+          <div>
+            <p className="mb-2">Password</p>
+            <TextInput
+              placeholder="••••••••••••••"
+              className="bg-base-200"
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+              value={form.password}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center mt-5">
+          <button
+            className="btn btn-accent dark:border-violet-400 text-white ml-auto"
+            type="submit"
+          >
+            Create User
+          </button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

components/ModalContent/UploadFileModal.tsx

@@ -43,7 +43,7 @@ export default function UploadFileModal({ onClose }: Props) {
 
   const [file, setFile] = useState<File>();
 
-  const { addLink } = useLinkStore();
+  const { uploadFile } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const [optionsExpanded, setOptionsExpanded] = useState(false);
@@ -100,56 +100,22 @@ export default function UploadFileModal({ onClose }: Props) {
 
   const submit = async () => {
     if (!submitLoader && file) {
-      let fileType: ArchivedFormat | null = null;
+      setSubmitLoader(true);
-      let linkType: "url" | "image" | "pdf" | null = null;
 
-      if (file?.type === "image/jpg" || file.type === "image/jpeg") {
+      const load = toast.loading("Creating...");
-        fileType = ArchivedFormat.jpeg;
-        linkType = "image";
-      } else if (file.type === "image/png") {
-        fileType = ArchivedFormat.png;
-        linkType = "image";
-      } else if (file.type === "application/pdf") {
-        fileType = ArchivedFormat.pdf;
-        linkType = "pdf";
-      }
 
-      if (fileType !== null && linkType !== null) {
+      const response = await uploadFile(link, file);
-        setSubmitLoader(true);
 
-        let response;
+      toast.dismiss(load);
 
-        const load = toast.loading("Creating...");
+      if (response.ok) {
+        toast.success(`Created!`);
+        onClose();
+      } else toast.error(response.data as string);
 
-        response = await addLink({
+      setSubmitLoader(false);
-          ...link,
-          type: linkType,
-          name: link.name ? link.name : file.name.replace(/\.[^/.]+$/, ""),
-        });
 
-        toast.dismiss(load);
+      return response;
-
-        if (response.ok) {
-          const formBody = new FormData();
-          file && formBody.append("file", file);
-
-          await fetch(
-            `/api/v1/archives/${
-              (response.data as LinkIncludingShortenedCollectionAndTags).id
-            }?format=${fileType}`,
-            {
-              body: formBody,
-              method: "POST",
-            }
-          );
-          toast.success(`Created!`);
-          onClose();
-        } else toast.error(response.data as string);
-
-        setSubmitLoader(false);
-
-        return response;
-      }
     }
   };
 
@@ -238,7 +204,7 @@ export default function UploadFileModal({ onClose }: Props) {
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Create Link
+          Upload File
         </button>
       </div>
     </Modal>

components/Navbar.tsx

@@ -1,40 +1,24 @@
-import { signOut } from "next-auth/react";
 import { useEffect, useState } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
 import SearchBar from "@/components/SearchBar";
-import useAccountStore from "@/store/account";
-import ProfilePhoto from "@/components/ProfilePhoto";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 import ToggleDarkMode from "./ToggleDarkMode";
-import useLocalSettingsStore from "@/store/localSettings";
 import NewLinkModal from "./ModalContent/NewLinkModal";
 import NewCollectionModal from "./ModalContent/NewCollectionModal";
-import Link from "next/link";
 import UploadFileModal from "./ModalContent/UploadFileModal";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import MobileNavigation from "./MobileNavigation";
+import ProfileDropdown from "./ProfileDropdown";
 
 export default function Navbar() {
-  const { settings, updateSettings } = useLocalSettingsStore();
-
-  const { account } = useAccountStore();
-
   const router = useRouter();
 
   const [sidebar, setSidebar] = useState(false);
 
   const { width } = useWindowDimensions();
 
-  const handleToggle = () => {
-    if (settings.theme === "dark") {
-      updateSettings({ theme: "light" });
-    } else {
-      updateSettings({ theme: "dark" });
-    }
-  };
-
   useEffect(() => {
     setSidebar(false);
     document.body.style.overflow = "auto";
@@ -93,7 +77,7 @@ export default function Navbar() {
                 New Link
               </div>
             </li>
-            {/* <li>
+            <li>
               <div
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
@@ -104,7 +88,7 @@ export default function Navbar() {
               >
                 Upload File
               </div>
-            </li> */}
+            </li>
             <li>
               <div
                 onClick={() => {
@@ -120,55 +104,7 @@ export default function Navbar() {
           </ul>
         </div>
 
-        <div className="dropdown dropdown-end">
+        <ProfileDropdown />
-          <div
-            tabIndex={0}
-            role="button"
-            onMouseDown={dropdownTriggerer}
-            className="btn btn-circle btn-ghost"
-          >
-            <ProfilePhoto
-              src={account.image ? account.image : undefined}
-              priority={true}
-            />
-          </div>
-          <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
-            <li>
-              <Link
-                href="/settings/account"
-                onClick={() => (document?.activeElement as HTMLElement)?.blur()}
-                tabIndex={0}
-                role="button"
-              >
-                Settings
-              </Link>
-            </li>
-            <li className="block sm:hidden">
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  handleToggle();
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                Switch to {settings.theme === "light" ? "Dark" : "Light"}
-              </div>
-            </li>
-            <li>
-              <div
-                onClick={() => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  signOut();
-                }}
-                tabIndex={0}
-                role="button"
-              >
-                Logout
-              </div>
-            </li>
-          </ul>
-        </div>
       </div>
 
       <MobileNavigation />

components/ProfileDropdown.tsx

@@ -0,0 +1,71 @@
+import useLocalSettingsStore from "@/store/localSettings";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import ProfilePhoto from "./ProfilePhoto";
+import useAccountStore from "@/store/account";
+import Link from "next/link";
+import { signOut } from "next-auth/react";
+
+export default function ProfileDropdown() {
+  const { settings, updateSettings } = useLocalSettingsStore();
+  const { account } = useAccountStore();
+
+  const handleToggle = () => {
+    if (settings.theme === "dark") {
+      updateSettings({ theme: "light" });
+    } else {
+      updateSettings({ theme: "dark" });
+    }
+  };
+
+  return (
+    <div className="dropdown dropdown-end">
+      <div
+        tabIndex={0}
+        role="button"
+        onMouseDown={dropdownTriggerer}
+        className="btn btn-circle btn-ghost"
+      >
+        <ProfilePhoto
+          src={account.image ? account.image : undefined}
+          priority={true}
+        />
+      </div>
+      <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
+        <li>
+          <Link
+            href="/settings/account"
+            onClick={() => (document?.activeElement as HTMLElement)?.blur()}
+            tabIndex={0}
+            role="button"
+          >
+            Settings
+          </Link>
+        </li>
+        <li className="block sm:hidden">
+          <div
+            onClick={() => {
+              (document?.activeElement as HTMLElement)?.blur();
+              handleToggle();
+            }}
+            tabIndex={0}
+            role="button"
+          >
+            Switch to {settings.theme === "light" ? "Dark" : "Light"}
+          </div>
+        </li>
+        <li>
+          <div
+            onClick={() => {
+              (document?.activeElement as HTMLElement)?.blur();
+              signOut();
+            }}
+            tabIndex={0}
+            role="button"
+          >
+            Logout
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+}

components/SettingsSidebar.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
-  const LINKWARDEN_VERSION = "v2.5.2";
+  const LINKWARDEN_VERSION = process.env.version;
 
   const { collections } = useCollectionStore();
 

lib/api/archiveHandler.ts

@@ -7,9 +7,9 @@ import { JSDOM } from "jsdom";
 import DOMPurify from "dompurify";
 import { Collection, Link, User } from "@prisma/client";
 import validateUrlSize from "./validateUrlSize";
-import removeFile from "./storage/removeFile";
-import Jimp from "jimp";
 import createFolder from "./storage/createFolder";
+import generatePreview from "./generatePreview";
+import { removeFiles } from "./manageLinkFiles";
 
 type LinksAndCollectionAndOwner = Link & {
   collection: Collection & {
@@ -51,6 +51,14 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
     );
   });
 
+  createFolder({
+    filePath: `archives/preview/${link.collectionId}`,
+  });
+
+  createFolder({
+    filePath: `archives/${link.collectionId}`,
+  });
+
   try {
     await Promise.race([
       (async () => {
@@ -165,10 +173,6 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
             return metaTag ? (metaTag as any).content : null;
           });
 
-          createFolder({
-            filePath: `archives/preview/${link.collectionId}`,
-          });
-
           if (ogImageUrl) {
             console.log("Found og:image URL:", ogImageUrl);
 
@@ -178,35 +182,7 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
             // Check if imageResponse is not null
             if (imageResponse && !link.preview?.startsWith("archive")) {
               const buffer = await imageResponse.body();
-
+              await generatePreview(buffer, link.collectionId, link.id);
-              // Check if buffer is not null
-              if (buffer) {
-                // Load the image using Jimp
-                Jimp.read(buffer, async (err, image) => {
-                  if (image && !err) {
-                    image?.resize(1280, Jimp.AUTO).quality(20);
-                    const processedBuffer = await image?.getBufferAsync(
-                      Jimp.MIME_JPEG
-                    );
-
-                    createFile({
-                      data: processedBuffer,
-                      filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
-                    }).then(() => {
-                      return prisma.link.update({
-                        where: { id: link.id },
-                        data: {
-                          preview: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
-                        },
-                      });
-                    });
-                  }
-                }).catch((err) => {
-                  console.error("Error processing the image:", err);
-                });
-              } else {
-                console.log("No image data found.");
-              }
             }
 
             await page.goBack();
@@ -326,14 +302,7 @@ export default async function archiveHandler(link: LinksAndCollectionAndOwner) {
         },
       });
     else {
-      removeFile({ filePath: `archives/${link.collectionId}/${link.id}.png` });
+      await removeFiles(link.id, link.collectionId);
-      removeFile({ filePath: `archives/${link.collectionId}/${link.id}.pdf` });
-      removeFile({
-        filePath: `archives/${link.collectionId}/${link.id}_readability.json`,
-      });
-      removeFile({
-        filePath: `archives/preview/${link.collectionId}/${link.id}.jpeg`,
-      });
     }
 
     await browser.close();

lib/api/controllers/links/bulk/deleteLinksById.ts

@@ -2,6 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import removeFile from "@/lib/api/storage/removeFile";
+import { removeFiles } from "@/lib/api/manageLinkFiles";
 
 export default async function deleteLinksById(
   userId: number,
@@ -43,15 +44,7 @@ export default async function deleteLinksById(
     const linkId = linkIds[i];
     const collectionIsAccessible = collectionIsAccessibleArray[i];
 
-    removeFile({
+    if (collectionIsAccessible) removeFiles(linkId, collectionIsAccessible.id);
-      filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
-    });
-    removeFile({
-      filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
-    });
-    removeFile({
-      filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
-    });
   }
 
   return { response: deletedLinks, status: 200 };

lib/api/controllers/links/linkId/deleteLinkById.ts

@@ -2,6 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { Link, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import removeFile from "@/lib/api/storage/removeFile";
+import { removeFiles } from "@/lib/api/manageLinkFiles";
 
 export default async function deleteLink(userId: number, linkId: number) {
   if (!linkId) return { response: "Please choose a valid link.", status: 401 };
@@ -12,7 +13,10 @@ export default async function deleteLink(userId: number, linkId: number) {
     (e: UsersAndCollections) => e.userId === userId && e.canDelete
   );
 
-  if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
+  if (
+    !collectionIsAccessible ||
+    !(collectionIsAccessible?.ownerId === userId || memberHasAccess)
+  )
     return { response: "Collection is not accessible.", status: 401 };
 
   const deleteLink: Link = await prisma.link.delete({
@@ -21,15 +25,7 @@ export default async function deleteLink(userId: number, linkId: number) {
     },
   });
 
-  removeFile({
+  removeFiles(linkId, collectionIsAccessible.id);
-    filePath: `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
-  });
-  removeFile({
-    filePath: `archives/${collectionIsAccessible?.id}/${linkId}.png`,
-  });
-  removeFile({
-    filePath: `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
-  });
 
   return { response: deleteLink, status: 200 };
 }

lib/api/controllers/links/linkId/updateLinkById.ts

@@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import { UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
-import moveFile from "@/lib/api/storage/moveFile";
+import { moveFiles } from "@/lib/api/manageLinkFiles";
 
 export default async function updateLinkById(
   userId: number,
@@ -146,20 +146,7 @@ export default async function updateLinkById(
     });
 
     if (collectionIsAccessible?.id !== data.collection.id) {
-      await moveFile(
+      await moveFiles(linkId, collectionIsAccessible?.id, data.collection.id);
-        `archives/${collectionIsAccessible?.id}/${linkId}.pdf`,
-        `archives/${data.collection.id}/${linkId}.pdf`
-      );
-
-      await moveFile(
-        `archives/${collectionIsAccessible?.id}/${linkId}.png`,
-        `archives/${data.collection.id}/${linkId}.png`
-      );
-
-      await moveFile(
-        `archives/${collectionIsAccessible?.id}/${linkId}_readability.json`,
-        `archives/${data.collection.id}/${linkId}_readability.json`
-      );
     }
 
     return { response: updatedLink, status: 200 };

lib/api/controllers/links/postLink.ts

@@ -12,14 +12,16 @@ export default async function postLink(
   link: LinkIncludingShortenedCollectionAndTags,
   userId: number
 ) {
-  try {
+  if (link.url || link.type === "url") {
-    new URL(link.url || "");
+    try {
-  } catch (error) {
+      new URL(link.url || "");
-    return {
+    } catch (error) {
-      response:
+      return {
-        "Please enter a valid Address for the Link. (It should start with http/https)",
+        response:
-      status: 400,
+          "Please enter a valid Address for the Link. (It should start with http/https)",
-    };
+        status: 400,
+      };
+    }
   }
 
   if (!link.collection.id && link.collection.name) {
@@ -117,15 +119,24 @@ export default async function postLink(
   });
 
   if (user?.preventDuplicateLinks) {
+    const url = link.url?.trim().replace(/\/+$/, ""); // trim and remove trailing slashes from the URL
+    const hasWwwPrefix = url?.includes(`://www.`);
+    const urlWithoutWww = hasWwwPrefix ? url?.replace(`://www.`, "://") : url;
+    const urlWithWww = hasWwwPrefix ? url : url?.replace("://", `://www.`);
+
+    console.log(url, urlWithoutWww, urlWithWww);
+
     const existingLink = await prisma.link.findFirst({
       where: {
-        url: link.url?.trim(),
+        OR: [{ url: urlWithWww }, { url: urlWithoutWww }],
         collection: {
           ownerId: userId,
         },
       },
     });
 
+    console.log(url, urlWithoutWww, urlWithWww, "DONE!");
+
     if (existingLink)
       return {
         response: "Link already exists",
@@ -172,7 +183,7 @@ export default async function postLink(
 
   const newLink = await prisma.link.create({
     data: {
-      url: link.url?.trim(),
+      url: link.url?.trim().replace(/\/+$/, "") || null,
       name: link.name,
       description,
       type: linkType,

lib/api/controllers/users/getUsers.ts

@@ -0,0 +1,21 @@
+import { prisma } from "@/lib/api/db";
+
+export default async function getUsers() {
+  // Get all users
+  const users = await prisma.user.findMany({
+    select: {
+      id: true,
+      username: true,
+      email: true,
+      emailVerified: true,
+      subscriptions: {
+        select: {
+          active: true,
+        },
+      },
+      createdAt: true,
+    },
+  });
+
+  return { response: users, status: 200 };
+}

lib/api/controllers/users/postUser.ts

@@ -1,9 +1,11 @@
 import { prisma } from "@/lib/api/db";
 import type { NextApiRequest, NextApiResponse } from "next";
 import bcrypt from "bcrypt";
+import verifyUser from "../../verifyUser";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
+const stripeEnabled = process.env.STRIPE_SECRET_KEY ? true : false;
 
 interface Data {
   response: string | object;
@@ -20,7 +22,15 @@ export default async function postUser(
   req: NextApiRequest,
   res: NextApiResponse<Data>
 ) {
-  if (process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true") {
+  let isServerAdmin = false;
+
+  const user = await verifyUser({ req, res });
+  if (process.env.ADMINISTRATOR === user?.username) isServerAdmin = true;
+
+  if (
+    process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" &&
+    !isServerAdmin
+  ) {
     return res.status(400).json({ response: "Registration is disabled." });
   }
 
@@ -57,13 +67,16 @@ export default async function postUser(
     });
 
   const checkIfUserExists = await prisma.user.findFirst({
-    where: emailEnabled
+    where: {
-      ? {
+      OR: [
+        {
           email: body.email?.toLowerCase().trim(),
-        }
+        },
-      : {
+        {
           username: (body.username as string).toLowerCase().trim(),
         },
+      ],
+    },
   });
 
   if (!checkIfUserExists) {
@@ -71,21 +84,63 @@ export default async function postUser(
 
     const hashedPassword = bcrypt.hashSync(body.password, saltRounds);
 
-    await prisma.user.create({
+    // Subscription dates
-      data: {
+    const currentPeriodStart = new Date();
-        name: body.name,
+    const currentPeriodEnd = new Date();
-        username: emailEnabled
+    currentPeriodEnd.setFullYear(currentPeriodEnd.getFullYear() + 1000); // end date is in 1000 years...
-          ? undefined
-          : (body.username as string).toLowerCase().trim(),
-        email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
-        password: hashedPassword,
-      },
-    });
 
-    return res.status(201).json({ response: "User successfully created." });
+    if (isServerAdmin) {
+      const user = await prisma.user.create({
+        data: {
+          name: body.name,
+          username: (body.username as string).toLowerCase().trim(),
+          email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
+          password: hashedPassword,
+          emailVerified: new Date(),
+          subscriptions: stripeEnabled
+            ? {
+                create: {
+                  stripeSubscriptionId:
+                    "fake_sub_" + Math.round(Math.random() * 10000000000000),
+                  active: true,
+                  currentPeriodStart,
+                  currentPeriodEnd,
+                },
+              }
+            : undefined,
+        },
+        select: {
+          id: true,
+          username: true,
+          email: true,
+          emailVerified: true,
+          subscriptions: {
+            select: {
+              active: true,
+            },
+          },
+          createdAt: true,
+        },
+      });
+
+      return res.status(201).json({ response: user });
+    } else {
+      await prisma.user.create({
+        data: {
+          name: body.name,
+          username: emailEnabled
+            ? undefined
+            : (body.username as string).toLowerCase().trim(),
+          email: emailEnabled ? body.email?.toLowerCase().trim() : undefined,
+          password: hashedPassword,
+        },
+      });
+
+      return res.status(201).json({ response: "User successfully created." });
+    }
   } else if (checkIfUserExists) {
     return res.status(400).json({
-      response: `${emailEnabled ? "Email" : "Username"} already exists.`,
+      response: `Email or Username already exists.`,
     });
   }
 }

lib/api/controllers/users/userId/deleteUserById.ts

@@ -10,7 +10,8 @@ const authentikEnabled = process.env.AUTHENTIK_CLIENT_SECRET;
 
 export default async function deleteUserById(
   userId: number,
-  body: DeleteUserBody
+  body: DeleteUserBody,
+  isServerAdmin?: boolean
 ) {
   // First, we retrieve the user from the database
   const user = await prisma.user.findUnique({
@@ -25,13 +26,13 @@ export default async function deleteUserById(
   }
 
   // Then, we check if the provided password matches the one stored in the database (disabled in Keycloak integration)
-  if (!keycloakEnabled && !authentikEnabled) {
+  if (!keycloakEnabled && !authentikEnabled && !isServerAdmin) {
     const isPasswordValid = bcrypt.compareSync(
       body.password,
       user.password as string
     );
 
-    if (!isPasswordValid) {
+    if (!isPasswordValid && !isServerAdmin) {
       return {
         response: "Invalid credentials.",
         status: 401, // Unauthorized
@@ -43,6 +44,11 @@ export default async function deleteUserById(
   await prisma
     .$transaction(
       async (prisma) => {
+        // Delete Access Tokens
+        await prisma.accessToken.deleteMany({
+          where: { userId },
+        });
+
         // Delete whitelisted users
         await prisma.whitelistedUser.deleteMany({
           where: { userId },
@@ -71,6 +77,10 @@ export default async function deleteUserById(
 
           // Delete archive folders
           removeFolder({ filePath: `archives/${collection.id}` });
+
+          await removeFolder({
+            filePath: `archives/preview/${collection.id}`,
+          });
         }
 
         // Delete collections after cleaning up related data
@@ -83,6 +93,7 @@ export default async function deleteUserById(
           await prisma.subscription.delete({
             where: { userId },
           });
+        // .catch((err) => console.log(err));
 
         await prisma.usersAndCollections.deleteMany({
           where: {

lib/api/generatePreview.ts

@@ -0,0 +1,36 @@
+import Jimp from "jimp";
+import { prisma } from "./db";
+import createFile from "./storage/createFile";
+import createFolder from "./storage/createFolder";
+
+const generatePreview = async (
+  buffer: Buffer,
+  collectionId: number,
+  linkId: number
+) => {
+  if (buffer && collectionId && linkId) {
+    // Load the image using Jimp
+    await Jimp.read(buffer, async (err, image) => {
+      if (image && !err) {
+        image?.resize(1280, Jimp.AUTO).quality(20);
+        const processedBuffer = await image?.getBufferAsync(Jimp.MIME_JPEG);
+
+        createFile({
+          data: processedBuffer,
+          filePath: `archives/preview/${collectionId}/${linkId}.jpeg`,
+        }).then(() => {
+          return prisma.link.update({
+            where: { id: linkId },
+            data: {
+              preview: `archives/preview/${collectionId}/${linkId}.jpeg`,
+            },
+          });
+        });
+      }
+    }).catch((err) => {
+      console.error("Error processing the image:", err);
+    });
+  }
+};
+
+export default generatePreview;

lib/api/manageLinkFiles.ts

@@ -0,0 +1,61 @@
+import moveFile from "./storage/moveFile";
+import removeFile from "./storage/removeFile";
+
+const removeFiles = async (linkId: number, collectionId: number) => {
+  // PDF
+  await removeFile({
+    filePath: `archives/${collectionId}/${linkId}.pdf`,
+  });
+  // Images
+  await removeFile({
+    filePath: `archives/${collectionId}/${linkId}.png`,
+  });
+  await removeFile({
+    filePath: `archives/${collectionId}/${linkId}.jpeg`,
+  });
+  await removeFile({
+    filePath: `archives/${collectionId}/${linkId}.jpg`,
+  });
+  // Preview
+  await removeFile({
+    filePath: `archives/preview/${collectionId}/${linkId}.jpeg`,
+  });
+  // Readability
+  await removeFile({
+    filePath: `archives/${collectionId}/${linkId}_readability.json`,
+  });
+};
+
+const moveFiles = async (linkId: number, from: number, to: number) => {
+  await moveFile(
+    `archives/${from}/${linkId}.pdf`,
+    `archives/${to}/${linkId}.pdf`
+  );
+
+  await moveFile(
+    `archives/${from}/${linkId}.png`,
+    `archives/${to}/${linkId}.png`
+  );
+
+  await moveFile(
+    `archives/${from}/${linkId}.jpeg`,
+    `archives/${to}/${linkId}.jpeg`
+  );
+
+  await moveFile(
+    `archives/${from}/${linkId}.jpg`,
+    `archives/${to}/${linkId}.jpg`
+  );
+
+  await moveFile(
+    `archives/preview/${from}/${linkId}.jpeg`,
+    `archives/preview/${to}/${linkId}.jpeg`
+  );
+
+  await moveFile(
+    `archives/${from}/${linkId}_readability.json`,
+    `archives/${to}/${linkId}_readability.json`
+  );
+};
+
+export { removeFiles, moveFiles };

lib/client/generateLinkHref.ts

@@ -16,24 +16,30 @@ export const generateLinkHref = (
 ): string => {
   // Return the links href based on the account's preference
   // If the user's preference is not available, return the original link
-  switch (account.linksRouteTo) {
+  if (account.linksRouteTo === LinksRouteTo.ORIGINAL && link.type === "url") {
-    case LinksRouteTo.ORIGINAL:
+    return link.url || "";
-      return link.url || "";
+  } else if (account.linksRouteTo === LinksRouteTo.PDF || link.type === "pdf") {
-    case LinksRouteTo.PDF:
+    if (!pdfAvailable(link)) return link.url || "";
-      if (!pdfAvailable(link)) return link.url || "";
 
-      return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`;
+    return `/preserved/${link?.id}?format=${ArchivedFormat.pdf}`;
-    case LinksRouteTo.READABLE:
+  } else if (
-      if (!readabilityAvailable(link)) return link.url || "";
+    account.linksRouteTo === LinksRouteTo.READABLE &&
+    link.type === "url"
+  ) {
+    if (!readabilityAvailable(link)) return link.url || "";
 
-      return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`;
+    return `/preserved/${link?.id}?format=${ArchivedFormat.readability}`;
-    case LinksRouteTo.SCREENSHOT:
+  } else if (
-      if (!screenshotAvailable(link)) return link.url || "";
+    account.linksRouteTo === LinksRouteTo.SCREENSHOT ||
+    link.type === "image"
+  ) {
+    console.log(link);
+    if (!screenshotAvailable(link)) return link.url || "";
 
-      return `/preserved/${link?.id}?format=${
+    return `/preserved/${link?.id}?format=${
-        link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg
+      link?.image?.endsWith("png") ? ArchivedFormat.png : ArchivedFormat.jpeg
-      }`;
+    }`;
-    default:
+  } else {
-      return link.url || "";
+    return link.url || "";
   }
 };

next.config.js

@@ -1,10 +1,15 @@
 /** @type {import('next').NextConfig} */
+const { version } = require("./package.json");
+
 const nextConfig = {
   reactStrictMode: true,
   images: {
     domains: ["t2.gstatic.com"],
     minimumCacheTTL: 10,
   },
+  env: {
+    version,
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "0.0.0",
+  "version": "v2.5.4",
   "main": "index.js",
   "repository": "https://github.com/linkwarden/linkwarden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",
@@ -79,7 +79,7 @@
     "nodemon": "^3.0.2",
     "postcss": "^8.4.26",
     "prettier": "3.1.1",
-    "prisma": "^5.1.0",
+    "prisma": "^4.16.2",
     "tailwindcss": "^3.3.3",
     "ts-node": "^10.9.2",
     "typescript": "4.9.4"

pages/_app.tsx

@@ -5,7 +5,8 @@ import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
-import { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
+import { Toaster, ToastBar } from "react-hot-toast";
 import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
 
@@ -61,7 +62,31 @@ export default function App({
             className:
               "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
           }}
-        />
+        >
+          {(t) => (
+            <ToastBar toast={t}>
+              {({ icon, message }) => (
+                <div
+                  className="flex flex-row"
+                  data-testid="toast-message-container"
+                  data-type={t.type}
+                >
+                  {icon}
+                  <span data-testid="toast-message">{message}</span>
+                  {t.type !== "loading" && (
+                    <button
+                      className="btn btn-xs outline-none btn-circle btn-ghost"
+                      data-testid="close-toast-button"
+                      onClick={() => toast.dismiss(t.id)}
+                    >
+                      <i className="bi bi-x"></i>
+                    </button>
+                  )}
+                </div>
+              )}
+            </ToastBar>
+          )}
+        </Toaster>
         <Component {...pageProps} />
       </AuthRedirect>
     </SessionProvider>

pages/admin.tsx

@@ -0,0 +1,174 @@
+import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
+import NewUserModal from "@/components/ModalContent/NewUserModal";
+import useUserStore from "@/store/admin/users";
+import { User as U } from "@prisma/client";
+import Link from "next/link";
+import { Fragment, useEffect, useState } from "react";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+type UserModal = {
+  isOpen: boolean;
+  userId: number | null;
+};
+
+export default function Admin() {
+  const { users, setUsers } = useUserStore();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredUsers, setFilteredUsers] = useState<User[]>();
+
+  const [deleteUserModal, setDeleteUserModal] = useState<UserModal>({
+    isOpen: false,
+    userId: null,
+  });
+
+  const [newUserModal, setNewUserModal] = useState(false);
+
+  useEffect(() => {
+    setUsers();
+  }, []);
+
+  return (
+    <div className="max-w-6xl mx-auto p-5">
+      <div className="flex sm:flex-row flex-col justify-between gap-2">
+        <div className="gap-2 inline-flex items-center">
+          <Link
+            href="/dashboard"
+            className="text-neutral btn btn-square btn-sm btn-ghost"
+          >
+            <i className="bi-chevron-left text-xl"></i>
+          </Link>
+          <p className="capitalize text-3xl font-thin inline">
+            User Administration
+          </p>
+        </div>
+
+        <div className="flex items-center relative justify-between gap-2">
+          <div>
+            <label
+              htmlFor="search-box"
+              className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+            >
+              <i className="bi-search"></i>
+            </label>
+
+            <input
+              id="search-box"
+              type="text"
+              placeholder={"Search for Users"}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+
+                if (users) {
+                  setFilteredUsers(
+                    users.filter((user) =>
+                      JSON.stringify(user)
+                        .toLowerCase()
+                        .includes(e.target.value.toLowerCase())
+                    )
+                  );
+                }
+              }}
+              className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:w-[15rem] md:max-w-full duration-200 outline-none"
+            />
+          </div>
+
+          <div
+            onClick={() => setNewUserModal(true)}
+            className="flex items-center btn btn-accent dark:border-violet-400 text-white btn-sm px-2 aspect-square relative"
+          >
+            <i className="bi-plus text-3xl absolute"></i>
+          </div>
+        </div>
+      </div>
+
+      <div className="divider my-3"></div>
+
+      {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
+        UserListing(filteredUsers, deleteUserModal, setDeleteUserModal)
+      ) : searchQuery !== "" ? (
+        <p>No users found with the given search query.</p>
+      ) : users && users.length > 0 ? (
+        UserListing(users, deleteUserModal, setDeleteUserModal)
+      ) : (
+        <p>No users found.</p>
+      )}
+
+      {newUserModal ? (
+        <NewUserModal onClose={() => setNewUserModal(false)} />
+      ) : null}
+    </div>
+  );
+}
+
+const UserListing = (
+  users: User[],
+  deleteUserModal: UserModal,
+  setDeleteUserModal: Function
+) => {
+  return (
+    <div className="overflow-x-auto whitespace-nowrap w-full">
+      <table className="table w-full">
+        <thead>
+          <tr>
+            <th></th>
+            <th>Username</th>
+            {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+              <th>Email</th>
+            )}
+            {process.env.NEXT_PUBLIC_STRIPE === "true" && <th>Subscribed</th>}
+            <th>Created At</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user, index) => (
+            <tr
+              key={index}
+              className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
+            >
+              <td className="text-primary">{index + 1}</td>
+              <td>{user.username ? user.username : <b>N/A</b>}</td>
+              {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
+                <td>{user.email}</td>
+              )}
+              {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+                <td>
+                  {user.subscriptions?.active ? (
+                    JSON.stringify(user.subscriptions?.active)
+                  ) : (
+                    <b>N/A</b>
+                  )}
+                </td>
+              )}
+              <td>{new Date(user.createdAt).toLocaleString()}</td>
+              <td className="relative">
+                <button
+                  className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
+                  onClick={() =>
+                    setDeleteUserModal({ isOpen: true, userId: user.id })
+                  }
+                >
+                  <i className="bi bi-trash"></i>
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {deleteUserModal.isOpen && deleteUserModal.userId ? (
+        <DeleteUserModal
+          onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
+          userId={deleteUserModal.userId}
+        />
+      ) : null}
+    </div>
+  );
+};

pages/api/v1/archives/[linkId].ts

@@ -9,6 +9,8 @@ import formidable from "formidable";
 import createFile from "@/lib/api/storage/createFile";
 import fs from "fs";
 import verifyToken from "@/lib/api/verifyToken";
+import generatePreview from "@/lib/api/generatePreview";
+import createFolder from "@/lib/api/storage/createFolder";
 
 export const config = {
   api: {
@@ -73,83 +75,97 @@ export default async function Index(req: NextApiRequest, res: NextApiResponse) {
 
       return res.send(file);
     }
+  } else if (req.method === "POST") {
+    const user = await verifyUser({ req, res });
+    if (!user) return;
+
+    const collectionPermissions = await getPermission({
+      userId: user.id,
+      linkId,
+    });
+
+    const memberHasAccess = collectionPermissions?.members.some(
+      (e: UsersAndCollections) => e.userId === user.id && e.canCreate
+    );
+
+    if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
+      return { response: "Collection is not accessible.", status: 401 };
+
+    // await uploadHandler(linkId, )
+
+    const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
+
+    const form = formidable({
+      maxFields: 1,
+      maxFiles: 1,
+      maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
+    });
+
+    form.parse(req, async (err, fields, files) => {
+      const allowedMIMETypes = [
+        "application/pdf",
+        "image/png",
+        "image/jpg",
+        "image/jpeg",
+      ];
+
+      if (
+        err ||
+        !files.file ||
+        !files.file[0] ||
+        !allowedMIMETypes.includes(files.file[0].mimetype || "")
+      ) {
+        // Handle parsing error
+        return res.status(500).json({
+          response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${MAX_UPLOAD_SIZE}MB.`,
+        });
+      } else {
+        const fileBuffer = fs.readFileSync(files.file[0].filepath);
+
+        const linkStillExists = await prisma.link.findUnique({
+          where: { id: linkId },
+        });
+
+        if (linkStillExists && files.file[0].mimetype?.includes("image")) {
+          const collectionId = collectionPermissions?.id as number;
+          createFolder({
+            filePath: `archives/preview/${collectionId}`,
+          });
+
+          generatePreview(fileBuffer, collectionId, linkId);
+        }
+
+        if (linkStillExists) {
+          await createFile({
+            filePath: `archives/${collectionPermissions?.id}/${
+              linkId + suffix
+            }`,
+            data: fileBuffer,
+          });
+
+          await prisma.link.update({
+            where: { id: linkId },
+            data: {
+              preview: files.file[0].mimetype?.includes("pdf")
+                ? "unavailable"
+                : undefined,
+              image: files.file[0].mimetype?.includes("image")
+                ? `archives/${collectionPermissions?.id}/${linkId + suffix}`
+                : null,
+              pdf: files.file[0].mimetype?.includes("pdf")
+                ? `archives/${collectionPermissions?.id}/${linkId + suffix}`
+                : null,
+              lastPreserved: new Date().toISOString(),
+            },
+          });
+        }
+
+        fs.unlinkSync(files.file[0].filepath);
+      }
+
+      return res.status(200).json({
+        response: files,
+      });
+    });
   }
-  // else if (req.method === "POST") {
-  //   const user = await verifyUser({ req, res });
-  //   if (!user) return;
-
-  //   const collectionPermissions = await getPermission({
-  //     userId: user.id,
-  //     linkId,
-  //   });
-
-  //   const memberHasAccess = collectionPermissions?.members.some(
-  //     (e: UsersAndCollections) => e.userId === user.id && e.canCreate
-  //   );
-
-  //   if (!(collectionPermissions?.ownerId === user.id || memberHasAccess))
-  //     return { response: "Collection is not accessible.", status: 401 };
-
-  //   // await uploadHandler(linkId, )
-
-  //   const MAX_UPLOAD_SIZE = Number(process.env.NEXT_PUBLIC_MAX_FILE_SIZE);
-
-  //   const form = formidable({
-  //     maxFields: 1,
-  //     maxFiles: 1,
-  //     maxFileSize: MAX_UPLOAD_SIZE || 30 * 1048576,
-  //   });
-
-  //   form.parse(req, async (err, fields, files) => {
-  //     const allowedMIMETypes = [
-  //       "application/pdf",
-  //       "image/png",
-  //       "image/jpg",
-  //       "image/jpeg",
-  //     ];
-
-  //     if (
-  //       err ||
-  //       !files.file ||
-  //       !files.file[0] ||
-  //       !allowedMIMETypes.includes(files.file[0].mimetype || "")
-  //     ) {
-  //       // Handle parsing error
-  //       return res.status(500).json({
-  //         response: `Sorry, we couldn't process your file. Please ensure it's a PDF, PNG, or JPG format and doesn't exceed ${MAX_UPLOAD_SIZE}MB.`,
-  //       });
-  //     } else {
-  //       const fileBuffer = fs.readFileSync(files.file[0].filepath);
-
-  //       const linkStillExists = await prisma.link.findUnique({
-  //         where: { id: linkId },
-  //       });
-
-  //       if (linkStillExists) {
-  //         await createFile({
-  //           filePath: `archives/${collectionPermissions?.id}/${
-  //             linkId + suffix
-  //           }`,
-  //           data: fileBuffer,
-  //         });
-
-  //         await prisma.link.update({
-  //           where: { id: linkId },
-  //           data: {
-  //             image: `archives/${collectionPermissions?.id}/${
-  //               linkId + suffix
-  //             }`,
-  //             lastPreserved: new Date().toISOString(),
-  //           },
-  //         });
-  //       }
-
-  //       fs.unlinkSync(files.file[0].filepath);
-  //     }
-
-  //     return res.status(200).json({
-  //       response: files,
-  //     });
-  //   });
-  // }
 }

pages/api/v1/auth/[...nextauth].ts

@@ -98,19 +98,19 @@ if (
         const user = await prisma.user.findFirst({
           where: emailEnabled
             ? {
-                OR: [
+              OR: [
-                  {
+                {
-                    username: username.toLowerCase(),
+                  username: username.toLowerCase(),
-                  },
+                },
-                  {
+                {
-                    email: username?.toLowerCase(),
+                  email: username?.toLowerCase(),
-                  },
+                },
-                ],
+              ],
-                emailVerified: { not: null },
+              emailVerified: { not: null },
-              }
+            }
             : {
-                username: username.toLowerCase(),
+              username: username.toLowerCase(),
-              },
+            },
         });
 
         let passwordMatches: boolean = false;
@@ -240,6 +240,37 @@ if (process.env.NEXT_PUBLIC_AUTH0_ENABLED === "true") {
   };
 }
 
+// Authelia
+if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
+  providers.push(
+    {
+      id: "authelia",
+      name: "Authelia",
+      type: "oauth",
+      clientId: process.env.AUTHELIA_CLIENT_ID!,
+      clientSecret: process.env.AUTHELIA_CLIENT_SECRET!,
+      wellKnown: process.env.AUTHELIA_WELLKNOWN_URL!,
+      authorization: { params: { scope: "openid email profile" } },
+      idToken: true,
+      checks: ["pkce", "state"],
+      profile(profile) {
+        return {
+          id: profile.sub,
+          name: profile.name,
+          email: profile.email,
+          username: profile.preferred_username,
+        }
+      },
+    }
+  );
+
+  const _linkAccount = adapter.linkAccount;
+  adapter.linkAccount = (account) => {
+    const { "not-before-policy": _, refresh_expires_in, ...data } = account;
+    return _linkAccount ? _linkAccount(data) : undefined;
+  };
+}
+
 // Authentik
 if (process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true") {
   providers.push(

pages/api/v1/links/[id]/archive/index.ts

@@ -2,8 +2,8 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { prisma } from "@/lib/api/db";
 import verifyUser from "@/lib/api/verifyUser";
 import isValidUrl from "@/lib/shared/isValidUrl";
-import removeFile from "@/lib/api/storage/removeFile";
 import { Collection, Link } from "@prisma/client";
+import { removeFiles } from "@/lib/api/manageLinkFiles";
 
 const RE_ARCHIVE_LIMIT = Number(process.env.RE_ARCHIVE_LIMIT) || 5;
 
@@ -80,16 +80,5 @@ const deleteArchivedFiles = async (link: Link & { collection: Collection }) => {
     },
   });
 
-  await removeFile({
+  await removeFiles(link.id, link.collection.id);
-    filePath: `archives/${link.collection.id}/${link.id}.pdf`,
-  });
-  await removeFile({
-    filePath: `archives/${link.collection.id}/${link.id}.png`,
-  });
-  await removeFile({
-    filePath: `archives/${link.collection.id}/${link.id}_readability.json`,
-  });
-  await removeFile({
-    filePath: `archives/preview/${link.collection.id}/${link.id}.png`,
-  });
 };

pages/api/v1/logins/index.ts

@@ -391,10 +391,17 @@ export function getLogins() {
       name: process.env.ZOOM_CUSTOM_NAME ?? "Zoom",
     });
   }
+  // Authelia
+  if (process.env.NEXT_PUBLIC_AUTHELIA_ENABLED === "true") {
+    buttonAuths.push({
+      method: "authelia",
+      name: process.env.AUTHELIA_CUSTOM_NAME ?? "Authelia",
+    });
+  }
   return {
     credentialsEnabled:
       process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === "true" ||
-      process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
+        process.env.NEXT_PUBLIC_CREDENTIALS_ENABLED === undefined
         ? "true"
         : "false",
     emailEnabled:

pages/api/v1/users/[id].ts

@@ -16,9 +16,17 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
     return null;
   }
 
-  const userId = token?.id;
+  const user = await prisma.user.findUnique({
+    where: {
+      id: token?.id,
+    },
+  });
 
-  if (userId !== Number(req.query.id))
+  const isServerAdmin = process.env.ADMINISTRATOR === user?.username;
+
+  const userId = isServerAdmin ? Number(req.query.id) : token.id;
+
+  if (userId !== Number(req.query.id) && !isServerAdmin)
     return res.status(401).json({ response: "Permission denied." });
 
   if (req.method === "GET") {
@@ -53,7 +61,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") {
-    const updated = await deleteUserById(userId, req.body);
+    const updated = await deleteUserById(userId, req.body, isServerAdmin);
     return res.status(updated.status).json({ response: updated.response });
   }
 }

pages/api/v1/users/index.ts

@@ -1,9 +1,18 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import postUser from "@/lib/api/controllers/users/postUser";
+import getUsers from "@/lib/api/controllers/users/getUsers";
+import verifyUser from "@/lib/api/verifyUser";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   if (req.method === "POST") {
     const response = await postUser(req, res);
     return response;
+  } else if (req.method === "GET") {
+    const user = await verifyUser({ req, res });
+    if (!user || process.env.ADMINISTRATOR !== user.username)
+      return res.status(401).json({ response: "Unauthorized..." });
+
+    const response = await getUsers();
+    return res.status(response.status).json({ response: response.response });
   }
 }

store/admin/users.ts

@@ -0,0 +1,66 @@
+import { User as U } from "@prisma/client";
+import { create } from "zustand";
+
+interface User extends U {
+  subscriptions: {
+    active: boolean;
+  };
+}
+
+type ResponseObject = {
+  ok: boolean;
+  data: object | string;
+};
+
+type UserStore = {
+  users: User[];
+  setUsers: () => void;
+  addUser: (body: Partial<U>) => Promise<ResponseObject>;
+  removeUser: (userId: number) => Promise<ResponseObject>;
+};
+
+const useUserStore = create<UserStore>((set) => ({
+  users: [],
+  setUsers: async () => {
+    const response = await fetch("/api/v1/users");
+
+    const data = await response.json();
+
+    if (response.ok) set({ users: data.response });
+    else if (response.status === 401) window.location.href = "/dashboard";
+  },
+  addUser: async (body) => {
+    const response = await fetch("/api/v1/users", {
+      method: "POST",
+      body: JSON.stringify(body),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const data = await response.json();
+
+    if (response.ok)
+      set((state) => ({
+        users: [...state.users, data.response],
+      }));
+
+    return { ok: response.ok, data: data.response };
+  },
+  removeUser: async (userId) => {
+    const response = await fetch(`/api/v1/users/${userId}`, {
+      method: "DELETE",
+    });
+
+    const data = await response.json();
+
+    if (response.ok)
+      set((state) => ({
+        users: state.users.filter((user) => user.id !== userId),
+      }));
+
+    return { ok: response.ok, data: data.response };
+  },
+}));
+
+export default useUserStore;

store/links.ts

@@ -1,5 +1,8 @@
 import { create } from "zustand";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import useTagStore from "./tags";
 import useCollectionStore from "./collections";
 
@@ -19,6 +22,10 @@ type LinkStore = {
   addLink: (
     body: LinkIncludingShortenedCollectionAndTags
   ) => Promise<ResponseObject>;
+  uploadFile: (
+    link: LinkIncludingShortenedCollectionAndTags,
+    file: File
+  ) => Promise<ResponseObject>;
   getLink: (linkId: number, publicRoute?: boolean) => Promise<ResponseObject>;
   updateLink: (
     link: LinkIncludingShortenedCollectionAndTags
@@ -79,6 +86,82 @@ const useLinkStore = create<LinkStore>()((set) => ({
 
     return { ok: response.ok, data: data.response };
   },
+  uploadFile: async (link, file) => {
+    let fileType: ArchivedFormat | null = null;
+    let linkType: "url" | "image" | "pdf" | null = null;
+
+    if (file?.type === "image/jpg" || file.type === "image/jpeg") {
+      fileType = ArchivedFormat.jpeg;
+      linkType = "image";
+    } else if (file.type === "image/png") {
+      fileType = ArchivedFormat.png;
+      linkType = "image";
+    } else if (file.type === "application/pdf") {
+      fileType = ArchivedFormat.pdf;
+      linkType = "pdf";
+    } else {
+      return { ok: false, data: "Invalid file type." };
+    }
+
+    const response = await fetch("/api/v1/links", {
+      body: JSON.stringify({
+        ...link,
+        type: linkType,
+        name: link.name ? link.name : file.name,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+
+    const data = await response.json();
+
+    const createdLink: LinkIncludingShortenedCollectionAndTags = data.response;
+
+    console.log(data);
+
+    if (response.ok) {
+      const formBody = new FormData();
+      file && formBody.append("file", file);
+
+      await fetch(
+        `/api/v1/archives/${(data as any).response.id}?format=${fileType}`,
+        {
+          body: formBody,
+          method: "POST",
+        }
+      );
+
+      // get file extension
+      const extension = file.name.split(".").pop() || "";
+
+      set((state) => ({
+        links: [
+          {
+            ...createdLink,
+            image:
+              linkType === "image"
+                ? `archives/${createdLink.collectionId}/${
+                    createdLink.id + extension
+                  }`
+                : null,
+            pdf:
+              linkType === "pdf"
+                ? `archives/${createdLink.collectionId}/${
+                    createdLink.id + ".pdf"
+                  }`
+                : null,
+          },
+          ...state.links,
+        ],
+      }));
+      useTagStore.getState().setTags();
+      useCollectionStore.getState().setCollections();
+    }
+
+    return { ok: response.ok, data: data.response };
+  },
   getLink: async (linkId, publicRoute) => {
     const path = publicRoute
       ? `/api/v1/public/links/${linkId}`

types/enviornment.d.ts

@@ -14,6 +14,7 @@ declare global {
       ARCHIVE_TAKE_COUNT?: string;
       IGNORE_UNAUTHORIZED_CA?: string;
       IGNORE_URL_SIZE_LIMIT?: string;
+      ADMINISTRATOR?: string;
 
       SPACES_KEY?: string;
       SPACES_SECRET?: string;
@@ -77,6 +78,13 @@ declare global {
       AUTH0_CLIENT_SECRET?: string;
       AUTH0_CLIENT_ID?: string;
 
+      // Authelia
+      NEXT_PUBLIC_AUTHELIA_ENABLED?: string;
+      AUTHELIA_CUSTOM_NAME?: string;
+      AUTHELIA_CLIENT_ID?: string;
+      AUTHELIA_CLIENT_SECRET?: string;
+      AUTHELIA_WELLKNOWN_URL?: string;
+
       // Authentik
       NEXT_PUBLIC_AUTHENTIK_ENABLED?: string;
       AUTHENTIK_CUSTOM_NAME?: string;

yarn.lock

@@ -1301,10 +1301,10 @@
   resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-4.16.1-1.4bc8b6e1b66cb932731fb1bdbbc550d1e010de81.tgz#d3b5dcf95b6d220e258cbf6ae19b06d30a7e9f14"
   integrity sha512-q617EUWfRIDTriWADZ4YiWRZXCa/WuhNgLTVd+HqWLffjMSPzyM5uOWoauX91wvQClSKZU4pzI4JJLQ9Kl62Qg==
 
-"@prisma/engines@5.1.0":
+"@prisma/engines@4.16.2":
-  version "5.1.0"
+  version "4.16.2"
-  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.1.0.tgz#4ccf7f344eaeee08ca1e4a1bb2dc14e36ff1d5ec"
+  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-4.16.2.tgz#5ec8dd672c2173d597e469194916ad4826ce2e5f"
-  integrity sha512-HqaFsnPmZOdMWkPq6tT2eTVTQyaAXEDdKszcZ4yc7DGMBIYRP6j/zAJTtZUG9SsMV8FaucdL5vRyxY/p5Ni28g==
+  integrity sha512-vx1nxVvN4QeT/cepQce68deh/Turxy5Mr+4L4zClFuK1GlxN3+ivxfuv+ej/gvidWn1cE1uAhW7ALLNlYbRUAw==
 
 "@radix-ui/primitive@1.0.1":
   version "1.0.1"
@@ -5038,12 +5038,12 @@ pretty-format@^3.8.0:
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
   integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==
 
-prisma@^5.1.0:
+prisma@^4.16.2:
-  version "5.1.0"
+  version "4.16.2"
-  resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.1.0.tgz#29e316b54844f5694a83017a9781a6d6f7cb99ea"
+  resolved "https://registry.yarnpkg.com/prisma/-/prisma-4.16.2.tgz#469e0a0991c6ae5bcde289401726bb012253339e"
-  integrity sha512-wkXvh+6wxk03G8qwpZMOed4Y3j+EQ+bMTlvbDZHeal6k1E8QuGKzRO7DRXlE1NV0WNgOAas8kwZqcLETQ2+BiQ==
+  integrity sha512-SYCsBvDf0/7XSJyf2cHTLjLeTLVXYfqp7pG5eEVafFLeT0u/hLFz/9W196nDRGUOo1JfPatAEb+uEnTQImQC1g==
   dependencies:
-    "@prisma/engines" "5.1.0"
+    "@prisma/engines" "4.16.2"
 
 process@^0.11.10:
   version "0.11.10"