Merge pull request #235 from linkwarden/dev

Dev

components/LinkCard.tsx

@@ -20,6 +20,7 @@ import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/client/isValidUrl";
 import Link from "next/link";
+import unescapeString from "@/lib/client/unescapeString";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -161,7 +162,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 {count + 1}
               </p>
               <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                {link.name || link.description}
+                {unescapeString(link.name || link.description)}
               </p>
             </div>
             <Link

components/Modal/Link/LinkDetails.tsx

@@ -239,6 +239,16 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           </div>
 
           <div className="flex text-black dark:text-white gap-1">
+            <div
+              onClick={() => handleDownload("png")}
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
+              />
+            </div>
+
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.png`}
               target="_blank"
@@ -249,16 +259,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
                 className="w-5 h-5 text-sky-500 dark:text-sky-500"
               />
             </Link>
-
-            <div
-              onClick={() => handleDownload("png")}
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
-              />
-            </div>
           </div>
         </div>
 
@@ -272,6 +272,16 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
           </div>
 
           <div className="flex text-black dark:text-white gap-1">
+            <div
+              onClick={() => handleDownload("pdf")}
+              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
+            >
+              <FontAwesomeIcon
+                icon={faCloudArrowDown}
+                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
+              />
+            </div>
+
             <Link
               href={`/api/archives/${link.collectionId}/${link.id}.pdf`}
               target="_blank"
@@ -282,16 +292,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
                 className="w-5 h-5 text-sky-500 dark:text-sky-500"
               />
             </Link>
-
-            <div
-              onClick={() => handleDownload("pdf")}
-              className="cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 p-2 rounded-md"
-            >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-sky-500 dark:text-sky-500"
-              />
-            </div>
           </div>
         </div>
 
@@ -301,7 +301,9 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) {
               <FontAwesomeIcon icon={faGlobe} className="w-6 h-6" />
             </div>
 
-            <p className="text-black dark:text-white">Archive.org Snapshot</p>
+            <p className="text-black dark:text-white">
+              Latest archive.org Snapshot
+            </p>
           </div>
 
           <Link

components/Modal/User/BillingPortal.tsx

@@ -1,46 +0,0 @@
-import { useState } from "react";
-import SubmitButton from "@/components/SubmitButton";
-import { toast } from "react-hot-toast";
-import { useRouter } from "next/router";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
-
-export default function PaymentPortal() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const router = useRouter();
-
-  const submit = () => {
-    setSubmitLoader(true);
-    const load = toast.loading("Redirecting to billing portal...");
-
-    router.push(process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL as string);
-  };
-
-  return (
-    <div className="mx-auto sm:w-[35rem] w-80">
-      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-md text-black dark:text-white">
-          To manage/cancel your subsciption, visit the billing portal.
-        </p>
-
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Go to Billing Portal"
-          icon={faArrowUpRightFromSquare}
-          className="mx-auto mt-2"
-        />
-
-        <p className="text-md text-black dark:text-white">
-          If you still need help or encountered any issues, feel free to reach
-          out to us at:{" "}
-          <a
-            className="font-semibold underline"
-            href="mailto:support@linkwarden.app"
-          >
-            support@linkwarden.app
-          </a>
-        </p>
-      </div>
-    </div>
-  );
-}

components/Modal/User/ChangePassword.tsx

@@ -1,115 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { AccountSettings } from "@/types/global";
-import useAccountStore from "@/store/account";
-import { signOut, useSession } from "next-auth/react";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "@/components/SubmitButton";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  togglePasswordFormModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-export default function ChangePassword({
-  togglePasswordFormModal,
-  setUser,
-  user,
-}: Props) {
-  const [newPassword, setNewPassword1] = useState("");
-  const [newPassword2, setNewPassword2] = useState("");
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
-  const { update, data } = useSession();
-
-  useEffect(() => {
-    if (
-      !(newPassword == "" || newPassword2 == "") &&
-      newPassword === newPassword2
-    ) {
-      setUser({ ...user, newPassword });
-    }
-  }, [newPassword, newPassword2]);
-
-  const submit = async () => {
-    if (newPassword == "" || newPassword2 == "") {
-      toast.error("Please fill all the fields.");
-    }
-
-    if (newPassword !== newPassword2)
-      return toast.error("Passwords do not match.");
-    else if (newPassword.length < 8)
-      return toast.error("Passwords must be at least 8 characters.");
-
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Settings Applied!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      togglePasswordFormModal();
-    } else toast.error(response.data as string);
-
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="mx-auto sm:w-[35rem] w-80">
-      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-2 justify-between">
-        <p className="text-sm text-black dark:text-white">New Password</p>
-
-        <TextInput
-          value={newPassword}
-          onChange={(e) => setNewPassword1(e.target.value)}
-          placeholder="••••••••••••••"
-          type="password"
-        />
-
-        <p className="text-sm text-black dark:text-white">
-          Confirm New Password
-        </p>
-
-        <TextInput
-          value={newPassword2}
-          onChange={(e) => setNewPassword2(e.target.value)}
-          placeholder="••••••••••••••"
-          type="password"
-        />
-
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Apply Settings"
-          icon={faPenToSquare}
-          className="mx-auto mt-2"
-        />
-      </div>
-    </div>
-  );
-}

components/Modal/User/PrivacySettings.tsx

@@ -1,249 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import Checkbox from "../../Checkbox";
-import useAccountStore from "@/store/account";
-import {
-  AccountSettings,
-  MigrationFormat,
-  MigrationRequest,
-} from "@/types/global";
-import { signOut, useSession } from "next-auth/react";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../../SubmitButton";
-import { toast } from "react-hot-toast";
-import Link from "next/link";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
-import useInitialData from "@/hooks/useInitialData";
-
-type Props = {
-  toggleSettingsModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-export default function PrivacySettings({
-  toggleSettingsModal,
-  setUser,
-  user,
-}: Props) {
-  const { update, data } = useSession();
-  const { account, updateAccount } = useAccountStore();
-
-  const [importDropdown, setImportDropdown] = useState(false);
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
-    user.whitelistedUsers.join(", ")
-  );
-
-  useEffect(() => {
-    setUser({
-      ...user,
-      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
-    });
-  }, [whitelistedUsersTextbox]);
-
-  useEffect(() => {
-    setUser({ ...user, newPassword: undefined });
-  }, []);
-
-  const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str.replace(/\s+/g, "");
-
-    const wordsArray = stringWithoutSpaces.split(",");
-
-    return wordsArray;
-  };
-
-  const importBookmarks = async (e: any, format: MigrationFormat) => {
-    const file: File = e.target.files[0];
-
-    if (file) {
-      var reader = new FileReader();
-      reader.readAsText(file, "UTF-8");
-      reader.onload = async function (e) {
-        const load = toast.loading("Importing...");
-
-        const request: string = e.target?.result as string;
-
-        const body: MigrationRequest = {
-          format,
-          data: request,
-        };
-
-        const response = await fetch("/api/migration", {
-          method: "POST",
-          body: JSON.stringify(body),
-        });
-
-        const data = await response.json();
-
-        toast.dismiss(load);
-
-        toast.success("Imported the Bookmarks! Reloading the page...");
-
-        setImportDropdown(false);
-
-        setTimeout(() => {
-          location.reload();
-        }, 2000);
-      };
-      reader.onerror = function (e) {
-        console.log("Error:", e);
-      };
-    }
-  };
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Settings Applied!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      toggleSettingsModal();
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      <div>
-        <p className="text-sm text-black dark:text-white mb-2">
-          Profile Visibility
-        </p>
-
-        <Checkbox
-          label="Make profile private"
-          state={user.isPrivate}
-          className="text-sm sm:text-base"
-          onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
-        />
-
-        <p className="text-gray-500 dark:text-gray-300 text-sm">
-          This will limit who can find and add you to other Collections.
-        </p>
-
-        {user.isPrivate && (
-          <div>
-            <p className="text-sm text-black dark:text-white mt-2">
-              Whitelisted Users
-            </p>
-            <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
-              Please provide the Username of the users you wish to grant
-              visibility to your profile. Separated by comma.
-            </p>
-            <textarea
-              className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
-              placeholder="Your profile is hidden from everyone right now..."
-              value={whitelistedUsersTextbox}
-              onChange={(e) => {
-                setWhiteListedUsersTextbox(e.target.value);
-              }}
-            />
-          </div>
-        )}
-      </div>
-
-      <div className="mt-5">
-        <p className="text-sm text-black dark:text-white mb-2">Import Data</p>
-
-        <div className="flex gap-2">
-          <div
-            onClick={() => setImportDropdown(true)}
-            className="w-fit relative"
-            id="import-dropdown"
-          >
-            <div
-              id="import-dropdown"
-              className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
-            >
-              Import From
-            </div>
-            {importDropdown ? (
-              <ClickAwayHandler
-                onClickOutside={(e: Event) => {
-                  const target = e.target as HTMLInputElement;
-                  if (target.id !== "import-dropdown") setImportDropdown(false);
-                }}
-                className={`absolute top-7 left-0 w-48 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
-              >
-                <div className="cursor-pointer rounded-md">
-                  <label
-                    htmlFor="import-html-file"
-                    title="HTML File"
-                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
-                  >
-                    Bookmarks HTML file...
-                    <input
-                      type="file"
-                      name="photo"
-                      id="import-html-file"
-                      accept=".html"
-                      className="hidden"
-                      onChange={(e) =>
-                        importBookmarks(e, MigrationFormat.htmlFile)
-                      }
-                    />
-                  </label>
-                  <label
-                    htmlFor="import-linkwarden-file"
-                    title="JSON File"
-                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
-                  >
-                    Linkwarden...
-                    <input
-                      type="file"
-                      name="photo"
-                      id="import-linkwarden-file"
-                      accept=".json"
-                      className="hidden"
-                      onChange={(e) =>
-                        importBookmarks(e, MigrationFormat.linkwarden)
-                      }
-                    />
-                  </label>
-                </div>
-              </ClickAwayHandler>
-            ) : null}
-          </div>
-
-          <Link className="w-fit" href="/api/migration">
-            <div className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
-              Export Data
-            </div>
-          </Link>
-        </div>
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Apply Settings"
-        icon={faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/User/ProfileSettings.tsx

@@ -1,195 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import useAccountStore from "@/store/account";
-import { AccountSettings } from "@/types/global";
-import { signOut, useSession } from "next-auth/react";
-import { resizeImage } from "@/lib/client/resizeImage";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
-import SubmitButton from "../../SubmitButton";
-import ProfilePhoto from "../../ProfilePhoto";
-import { toast } from "react-hot-toast";
-import TextInput from "@/components/TextInput";
-
-type Props = {
-  toggleSettingsModal: Function;
-  setUser: Dispatch<SetStateAction<AccountSettings>>;
-  user: AccountSettings;
-};
-
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
-
-export default function ProfileSettings({
-  toggleSettingsModal,
-  setUser,
-  user,
-}: Props) {
-  const { update, data } = useSession();
-  const { account, updateAccount } = useAccountStore();
-  const [profileStatus, setProfileStatus] = useState(true);
-
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const handleProfileStatus = (e: boolean) => {
-    setProfileStatus(!e);
-  };
-
-  const handleImageUpload = async (e: any) => {
-    const file: File = e.target.files[0];
-
-    const fileExtension = file.name.split(".").pop()?.toLowerCase();
-    const allowedExtensions = ["png", "jpeg", "jpg"];
-
-    if (allowedExtensions.includes(fileExtension as string)) {
-      const resizedFile = await resizeImage(file);
-
-      if (
-        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
-      ) {
-        const reader = new FileReader();
-
-        reader.onload = () => {
-          setUser({ ...user, profilePic: reader.result as string });
-        };
-
-        reader.readAsDataURL(resizedFile);
-      } else {
-        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
-      }
-    } else {
-      toast.error("Invalid file format.");
-    }
-  };
-
-  useEffect(() => {
-    setUser({ ...user, newPassword: undefined });
-  }, []);
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Settings Applied!");
-
-      if (user.email !== account.email) {
-        update({
-          id: data?.user.id,
-        });
-
-        signOut();
-      } else if (
-        user.username !== account.username ||
-        user.name !== account.name
-      )
-        update({
-          id: data?.user.id,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-      toggleSettingsModal();
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
-      <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
-        <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-black dark:text-white mb-2 text-center">
-            Profile Photo
-          </p>
-          <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
-            <ProfilePhoto
-              src={user.profilePic}
-              className="h-auto border-none w-28"
-              status={handleProfileStatus}
-            />
-            {profileStatus && (
-              <div
-                onClick={() =>
-                  setUser({
-                    ...user,
-                    profilePic: "",
-                  })
-                }
-                className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
-              >
-                <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
-              </div>
-            )}
-
-            <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
-              <label
-                htmlFor="upload-photo"
-                title="PNG or JPG (Max: 3MB)"
-                className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
-              >
-                Browse...
-                <input
-                  type="file"
-                  name="photo"
-                  id="upload-photo"
-                  accept=".png, .jpeg, .jpg"
-                  className="hidden"
-                  onChange={handleImageUpload}
-                />
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex flex-col gap-3">
-          <div>
-            <p className="text-sm text-black dark:text-white mb-2">
-              Display Name
-            </p>
-            <TextInput
-              value={user.name || ""}
-              onChange={(e) => setUser({ ...user, name: e.target.value })}
-            />
-          </div>
-
-          <div>
-            <p className="text-sm text-black dark:text-white mb-2">Username</p>
-            <TextInput
-              value={user.username || ""}
-              onChange={(e) => setUser({ ...user, username: e.target.value })}
-            />
-          </div>
-
-          {emailEnabled ? (
-            <div>
-              <p className="text-sm text-black dark:text-white mb-2">Email</p>
-              <TextInput
-                value={user.email || ""}
-                onChange={(e) => setUser({ ...user, email: e.target.value })}
-              />
-            </div>
-          ) : undefined}
-
-          {user.email !== account.email ? (
-            <p className="text-gray-500">
-              You will need to log back in after you apply this Email.
-            </p>
-          ) : undefined}
-        </div>
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Apply Settings"
-        icon={faPenToSquare}
-        className="mx-auto mt-2"
-      />
-    </div>
-  );
-}

components/Modal/User/index.tsx

@@ -1,107 +0,0 @@
-import { Tab } from "@headlessui/react";
-import { AccountSettings } from "@/types/global";
-import { useState } from "react";
-import ChangePassword from "./ChangePassword";
-import ProfileSettings from "./ProfileSettings";
-import PrivacySettings from "./PrivacySettings";
-import BillingPortal from "./BillingPortal";
-
-type Props = {
-  toggleSettingsModal: Function;
-  activeUser: AccountSettings;
-  className?: string;
-  defaultIndex?: number;
-};
-
-const STRIPE_BILLING_PORTAL_URL =
-  process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL;
-
-export default function UserModal({
-  className,
-  defaultIndex,
-  toggleSettingsModal,
-  activeUser,
-}: Props) {
-  const [user, setUser] = useState<AccountSettings>(activeUser);
-
-  return (
-    <div className={className}>
-      <Tab.Group defaultIndex={defaultIndex}>
-        <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white  duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-            }
-          >
-            Profile Settings
-          </Tab>
-
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-            }
-          >
-            Privacy Settings
-          </Tab>
-
-          <Tab
-            className={({ selected }) =>
-              selected
-                ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
-                : "px-2 py-1 hover:bg-slate-200  hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-            }
-          >
-            Password
-          </Tab>
-
-          {STRIPE_BILLING_PORTAL_URL ? (
-            <Tab
-              className={({ selected }) =>
-                selected
-                  ? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
-                  : "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
-              }
-            >
-              Billing
-            </Tab>
-          ) : undefined}
-        </Tab.List>
-        <Tab.Panels>
-          <Tab.Panel>
-            <ProfileSettings
-              toggleSettingsModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          <Tab.Panel>
-            <PrivacySettings
-              toggleSettingsModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          <Tab.Panel>
-            <ChangePassword
-              togglePasswordFormModal={toggleSettingsModal}
-              setUser={setUser}
-              user={user}
-            />
-          </Tab.Panel>
-
-          {STRIPE_BILLING_PORTAL_URL ? (
-            <Tab.Panel>
-              <BillingPortal />
-            </Tab.Panel>
-          ) : undefined}
-        </Tab.Panels>
-      </Tab.Group>
-    </div>
-  );
-}

components/ModalManagement.tsx

@@ -2,12 +2,10 @@ import useModalStore from "@/store/modals";
 import Modal from "./Modal";
 import LinkModal from "./Modal/Link";
 import {
-  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import CollectionModal from "./Modal/Collection";
-import UserModal from "./Modal/User";
 import { useEffect } from "react";
 import { useRouter } from "next/router";
 
@@ -49,15 +47,5 @@ export default function ModalManagement() {
         />
       </Modal>
     );
-  else if (modal && modal.modal === "ACCOUNT")
-    return (
-      <Modal toggleModal={toggleModal}>
-        <UserModal
-          toggleSettingsModal={toggleModal}
-          defaultIndex={modal.defaultIndex}
-          activeUser={modal.active as AccountSettings}
-        />
-      </Modal>
-    );
   else return <></>;
 }

components/Navbar.tsx

@@ -94,14 +94,7 @@ export default function Navbar() {
               items={[
                 {
                   name: "Settings",
-                  onClick: () => {
-                    setModal({
-                      modal: "ACCOUNT",
-                      state: true,
-                      active: account,
-                    });
-                    setProfileDropdown(!profileDropdown);
-                  },
+                  href: "/settings/account",
                 },
                 {
                   name: `Switch to ${theme === "light" ? "Dark" : "Light"}`,

components/PublicPage/LinkCard.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import { Link as LinkType, Tag } from "@prisma/client";
 import isValidUrl from "@/lib/client/isValidUrl";
+import unescapeString from "@/lib/client/unescapeString";
 
 interface LinksIncludingTags extends LinkType {
   tags: Tag[];
@@ -60,12 +61,12 @@ export default function LinkCard({ link, count }: Props) {
             <div className="flex items-baseline gap-1">
               <p className="text-xs text-gray-500">{count + 1}</p>
               <p className="text-lg text-black">
-                {link.name || link.description}
+                {unescapeString(link.name || link.description)}
               </p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
-              {link.description}
+              {unescapeString(link.description)}
             </p>
             <div className="flex gap-3 items-center flex-wrap my-3">
               <div className="flex gap-1 items-center flex-wrap mt-1">

components/SettingsSidebar.tsx

@@ -34,13 +34,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
+      className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
     >
       <div className="flex flex-col gap-1">
-        <Link href="/settings/profile">
+        <Link href="/settings/account">
           <div
             className={`${
-              active === `/settings/profile`
+              active === `/settings/account`
                 ? "bg-sky-200 dark:bg-sky-800"
                 : "hover:bg-slate-200 hover:dark:bg-neutral-700"
             } duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
@@ -51,7 +51,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             />
 
             <p className="text-black dark:text-white truncate w-full pr-7">
-              Profile
+              Account
             </p>
           </div>
         </Link>
@@ -94,7 +94,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        <Link href="/settings/migration">
+        {/* <Link href="/settings/migration">
           <div
             className={`${
               active === `/settings/migration`
@@ -111,9 +111,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               Import & Export
             </p>
           </div>
-        </Link>
+        </Link> */}
 
-        <Link href="/settings/privacy">
+        {/* <Link href="/settings/privacy">
           <div
             className={`${
               active === `/settings/privacy`
@@ -130,7 +130,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               Privacy
             </p>
           </div>
-        </Link>
+        </Link> */}
 
         <Link href="/settings/password">
           <div
@@ -174,6 +174,36 @@ export default function SettingsSidebar({ className }: { className?: string }) {
       </div>
 
       <div className="flex flex-col gap-1">
+        <Link href="https://docs.linkwarden.app" target="_blank">
+          <div
+            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faCircleQuestion as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              Help
+            </p>
+          </div>
+        </Link>
+
+        <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
+          <div
+            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+          >
+            <FontAwesomeIcon
+              icon={faGithub as any}
+              className="w-6 h-6 text-sky-500 dark:text-sky-500"
+            />
+
+            <p className="text-black dark:text-white truncate w-full pr-7">
+              GitHub
+            </p>
+          </div>
+        </Link>
+
         <Link href="https://twitter.com/linkwarden_app" target="_blank">
           <div
             className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
@@ -203,36 +233,6 @@ export default function SettingsSidebar({ className }: { className?: string }) {
             </p>
           </div>
         </Link>
-
-        <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
-          <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
-          >
-            <FontAwesomeIcon
-              icon={faGithub as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
-
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              GitHub
-            </p>
-          </div>
-        </Link>
-
-        <Link href="https://docs.linkwarden.app" target="_blank">
-          <div
-            className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
-          >
-            <FontAwesomeIcon
-              icon={faCircleQuestion as any}
-              className="w-6 h-6 text-sky-500 dark:text-sky-500"
-            />
-
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Help
-            </p>
-          </div>
-        </Link>
       </div>
     </div>
   );

components/SubmitButton.tsx

@@ -27,8 +27,8 @@ export default function SubmitButton({
         if (!loading) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
-      <p className="text-center w-full">{label}</p>
+      {icon && <FontAwesomeIcon icon={icon} className="h-5 select-none" />}
+      <p className="text-center w-full select-none">{label}</p>
     </div>
   );
 }

layouts/SettingsLayout.tsx

@@ -5,7 +5,8 @@ import useModalStore from "@/store/modals";
 import { useRouter } from "next/router";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import Link from "next/link";
 
 interface Props {
   children: ReactNode;
@@ -38,12 +39,12 @@ export default function SettingsLayout({ children }: Props) {
     <>
       <ModalManagement />
 
-      <div className="flex">
+      <div className="flex max-w-screen-md mx-auto">
         <div className="hidden lg:block">
-          <SettingsSidebar className="fixed top-0" />
+          <SettingsSidebar />
         </div>
 
-        <div className="w-full flex flex-col h-screen lg:ml-64 xl:ml-80 p-5">
+        <div className="w-full flex flex-col h-screen p-5">
           <div className="flex gap-3">
             <div
               onClick={toggleSidebar}
@@ -52,11 +53,20 @@ export default function SettingsLayout({ children }: Props) {
               <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
             </div>
 
-            <p className="capitalize text-3xl">
+            <Link
+              href="/dashboard"
+              className="inline-flex gap-1 items-center select-none cursor-pointer p-2 text-gray-500 dark:text-gray-300 rounded-md duration-100 hover:bg-slate-200 dark:hover:bg-neutral-700"
+            >
+              <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
+            </Link>
+
+            <p className="capitalize text-3xl font-thin">
               {router.asPath.split("/").pop()} Settings
             </p>
           </div>
-          <hr className="my-3" />
+
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
           {children}
 
           {sidebar ? (

lib/api/archive.ts

@@ -1,55 +1,72 @@
-import { Page, chromium, devices } from "playwright";
+import { chromium, devices } from "playwright";
 import { prisma } from "@/lib/api/db";
 import createFile from "@/lib/api/storage/createFile";
 import sendToWayback from "./sendToWayback";
 
-export default async function archive(linkId: number, url: string) {
-  const browser = await chromium.launch();
-  const context = await browser.newContext(devices["Desktop Chrome"]);
-  const page = await context.newPage();
+export default async function archive(
+  linkId: number,
+  url: string,
+  userId: number
+) {
+  const user = await prisma.user.findUnique({
+    where: {
+      id: userId,
+    },
+  });
 
-  sendToWayback(url);
+  if (user?.archiveAsWaybackMachine) sendToWayback(url);
 
-  try {
-    await page.goto(url, { waitUntil: "domcontentloaded" });
+  if (user?.archiveAsPDF || user?.archiveAsScreenshot) {
+    const browser = await chromium.launch();
+    const context = await browser.newContext(devices["Desktop Chrome"]);
+    const page = await context.newPage();
 
-    await page.evaluate(
-      autoScroll,
-      Number(process.env.AUTOSCROLL_TIMEOUT) || 30
-    );
+    try {
+      await page.goto(url, { waitUntil: "domcontentloaded" });
 
-    const linkExists = await prisma.link.findUnique({
-      where: {
-        id: linkId,
-      },
-    });
+      await page.evaluate(
+        autoScroll,
+        Number(process.env.AUTOSCROLL_TIMEOUT) || 30
+      );
 
-    if (linkExists) {
-      const pdf = await page.pdf({
-        width: "1366px",
-        height: "1931px",
-        printBackground: true,
-        margin: { top: "15px", bottom: "15px" },
-      });
-      const screenshot = await page.screenshot({
-        fullPage: true,
+      const linkExists = await prisma.link.findUnique({
+        where: {
+          id: linkId,
+        },
       });
 
-      createFile({
-        data: screenshot,
-        filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
-      });
+      if (linkExists) {
+        if (user.archiveAsScreenshot) {
+          const screenshot = await page.screenshot({
+            fullPage: true,
+          });
 
-      createFile({
-        data: pdf,
-        filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
-      });
+          createFile({
+            data: screenshot,
+            filePath: `archives/${linkExists.collectionId}/${linkId}.png`,
+          });
+        }
+
+        if (user.archiveAsPDF) {
+          const pdf = await page.pdf({
+            width: "1366px",
+            height: "1931px",
+            printBackground: true,
+            margin: { top: "15px", bottom: "15px" },
+          });
+
+          createFile({
+            data: pdf,
+            filePath: `archives/${linkExists.collectionId}/${linkId}.pdf`,
+          });
+        }
+      }
+
+      await browser.close();
+    } catch (err) {
+      console.log(err);
+      await browser.close();
     }
-
-    await browser.close();
-  } catch (err) {
-    console.log(err);
-    await browser.close();
   }
 }
 

lib/api/controllers/links/postLink.ts

@@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import getTitle from "@/lib/api/getTitle";
 import archive from "@/lib/api/archive";
-import { Collection, Link, UsersAndCollections } from "@prisma/client";
+import { Collection, UsersAndCollections } from "@prisma/client";
 import getPermission from "@/lib/api/getPermission";
 import createFolder from "@/lib/api/storage/createFolder";
 
@@ -94,7 +94,7 @@ export default async function postLink(
 
   createFolder({ filePath: `archives/${newLink.collectionId}` });
 
-  archive(newLink.id, newLink.url);
+  archive(newLink.id, newLink.url, userId);
 
   return { response: newLink, status: 200 };
 }

lib/api/controllers/users/updateUser.ts

@@ -108,6 +108,9 @@ export default async function updateUser(
       username: user.username.toLowerCase(),
       email: user.email?.toLowerCase(),
       isPrivate: user.isPrivate,
+      archiveAsScreenshot: user.archiveAsScreenshot,
+      archiveAsPDF: user.archiveAsPDF,
+      archiveAsWaybackMachine: user.archiveAsWaybackMachine,
       password:
         user.newPassword && user.newPassword !== ""
           ? newHashedPassword
@@ -161,7 +164,7 @@ export default async function updateUser(
 
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
 
-  if (STRIPE_SECRET_KEY && emailEnabled)
+  if (STRIPE_SECRET_KEY && emailEnabled && sessionUser.email !== user.email)
     await updateCustomerEmail(
       STRIPE_SECRET_KEY,
       sessionUser.email,

pages/_app.tsx

@@ -52,7 +52,7 @@ export default function App({
             reverseOrder={false}
             toastOptions={{
               className:
-                "border border-sky-100 dark:dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
+                "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white",
             }}
           />
           <Component {...pageProps} />

pages/choose-username.tsx

@@ -1,15 +1,13 @@
 import SubmitButton from "@/components/SubmitButton";
 import { signOut } from "next-auth/react";
-import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
 import useAccountStore from "@/store/account";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
 
-export default function Subscribe() {
+export default function ChooseUsername() {
   const [submitLoader, setSubmitLoader] = useState(false);
   const [inputedUsername, setInputedUsername] = useState("");
 

pages/forgot.tsx

@@ -2,7 +2,6 @@ import SubmitButton from "@/components/SubmitButton";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
-import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-hot-toast";

pages/login.tsx

@@ -2,7 +2,6 @@ import SubmitButton from "@/components/SubmitButton";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
-import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "react-hot-toast";

pages/settings/account.tsx

@@ -0,0 +1,393 @@
+import { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import SettingsLayout from "@/layouts/SettingsLayout";
+import TextInput from "@/components/TextInput";
+import { resizeImage } from "@/lib/client/resizeImage";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import SubmitButton from "@/components/SubmitButton";
+import { useSession, signOut } from "next-auth/react";
+import React from "react";
+import { MigrationFormat, MigrationRequest } from "@/types/global";
+import Link from "next/link";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import Checkbox from "@/components/Checkbox";
+
+export default function Account() {
+  const { update, data } = useSession();
+
+  const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+
+  const [profileStatus, setProfileStatus] = useState(true);
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const handleProfileStatus = (e: boolean) => {
+    setProfileStatus(!e);
+  };
+
+  const { account, updateAccount } = useAccountStore();
+
+  const [user, setUser] = useState<AccountSettings>(
+    !objectIsEmpty(account)
+      ? account
+      : ({
+          // @ts-ignore
+          id: null,
+          name: "",
+          username: "",
+          email: "",
+          emailVerified: null,
+          image: null,
+          isPrivate: true,
+          // @ts-ignore
+          createdAt: null,
+          whitelistedUsers: [],
+          profilePic: "",
+        } as unknown as AccountSettings)
+  );
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) setUser({ ...account });
+  }, [account]);
+
+  const handleImageUpload = async (e: any) => {
+    const file: File = e.target.files[0];
+    const fileExtension = file.name.split(".").pop()?.toLowerCase();
+    const allowedExtensions = ["png", "jpeg", "jpg"];
+    if (allowedExtensions.includes(fileExtension as string)) {
+      const resizedFile = await resizeImage(file);
+      if (
+        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
+      ) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          setUser({ ...user, profilePic: reader.result as string });
+        };
+        reader.readAsDataURL(resizedFile);
+      } else {
+        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
+      }
+    } else {
+      toast.error("Invalid file format.");
+    }
+  };
+
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+
+      if (user.email !== account.email) {
+        update({
+          id: data?.user.id,
+        });
+
+        signOut();
+      } else if (
+        user.username !== account.username ||
+        user.name !== account.name
+      )
+        update({
+          id: data?.user.id,
+        });
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
+  const [importDropdown, setImportDropdown] = useState(false);
+
+  const importBookmarks = async (e: any, format: MigrationFormat) => {
+    const file: File = e.target.files[0];
+
+    if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = async function (e) {
+        const load = toast.loading("Importing...");
+
+        const request: string = e.target?.result as string;
+
+        const body: MigrationRequest = {
+          format,
+          data: request,
+        };
+
+        const response = await fetch("/api/migration", {
+          method: "POST",
+          body: JSON.stringify(body),
+        });
+
+        const data = await response.json();
+
+        toast.dismiss(load);
+
+        toast.success("Imported the Bookmarks! Reloading the page...");
+
+        setImportDropdown(false);
+
+        setTimeout(() => {
+          location.reload();
+        }, 2000);
+      };
+      reader.onerror = function (e) {
+        console.log("Error:", e);
+      };
+    }
+  };
+
+  const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState("");
+
+  useEffect(() => {
+    setWhiteListedUsersTextbox(account?.whitelistedUsers?.join(", "));
+  }, [account]);
+
+  useEffect(() => {
+    setUser({
+      ...user,
+      whitelistedUsers: stringToArray(whitelistedUsersTextbox),
+    });
+  }, [whitelistedUsersTextbox]);
+
+  const stringToArray = (str: string) => {
+    const stringWithoutSpaces = str?.replace(/\s+/g, "");
+
+    const wordsArray = stringWithoutSpaces?.split(",");
+
+    return wordsArray;
+  };
+
+  return (
+    <SettingsLayout>
+      <div className="flex flex-col gap-10 justify-between sm:w-[35rem] w-80 mx-auto lg:mx-0">
+        <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
+          <div className="flex flex-col gap-3">
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Display Name
+              </p>
+              <TextInput
+                value={user.name || ""}
+                onChange={(e) => setUser({ ...user, name: e.target.value })}
+              />
+            </div>
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Username
+              </p>
+              <TextInput
+                value={user.username || ""}
+                onChange={(e) => setUser({ ...user, username: e.target.value })}
+              />
+            </div>
+
+            {emailEnabled ? (
+              <div>
+                <p className="text-sm text-black dark:text-white mb-2">Email</p>
+                <TextInput
+                  value={user.email || ""}
+                  onChange={(e) => setUser({ ...user, email: e.target.value })}
+                />
+              </div>
+            ) : undefined}
+
+            {user.email !== account.email ? (
+              <p className="text-gray-500 dark:text-gray-400">
+                You will need to log back in after you apply this Email.
+              </p>
+            ) : undefined}
+          </div>
+
+          <div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
+            <p className="text-sm text-black dark:text-white mb-2 text-center">
+              Profile Photo
+            </p>
+            <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
+              <ProfilePhoto
+                priority={true}
+                src={user.profilePic}
+                className="h-auto border-none w-28"
+                status={handleProfileStatus}
+              />
+              {profileStatus && (
+                <div
+                  onClick={() =>
+                    setUser({
+                      ...user,
+                      profilePic: "",
+                    })
+                  }
+                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
+                >
+                  <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
+                </div>
+              )}
+              <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
+                <label className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
+                  Browse...
+                  <input
+                    type="file"
+                    name="photo"
+                    id="upload-photo"
+                    accept=".png, .jpeg, .jpg"
+                    className="hidden"
+                    onChange={handleImageUpload}
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
+              Import & Export
+            </p>
+          </div>
+
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
+          <div className="flex gap-3 flex-col">
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Import your data from other platforms.
+              </p>
+              <div
+                onClick={() => setImportDropdown(true)}
+                className="w-fit relative"
+                id="import-dropdown"
+              >
+                <div
+                  id="import-dropdown"
+                  className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
+                >
+                  Import From
+                </div>
+                {importDropdown ? (
+                  <ClickAwayHandler
+                    onClickOutside={(e: Event) => {
+                      const target = e.target as HTMLInputElement;
+                      if (target.id !== "import-dropdown")
+                        setImportDropdown(false);
+                    }}
+                    className={`absolute top-7 left-0 w-48 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
+                  >
+                    <div className="cursor-pointer rounded-md">
+                      <label
+                        htmlFor="import-linkwarden-file"
+                        title="JSON File"
+                        className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                      >
+                        Linkwarden...
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-linkwarden-file"
+                          accept=".json"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.linkwarden)
+                          }
+                        />
+                      </label>
+                      <label
+                        htmlFor="import-html-file"
+                        title="HTML File"
+                        className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700  duration-100 cursor-pointer"
+                      >
+                        Bookmarks HTML file...
+                        <input
+                          type="file"
+                          name="photo"
+                          id="import-html-file"
+                          accept=".html"
+                          className="hidden"
+                          onChange={(e) =>
+                            importBookmarks(e, MigrationFormat.htmlFile)
+                          }
+                        />
+                      </label>
+                    </div>
+                  </ClickAwayHandler>
+                ) : null}
+              </div>
+            </div>
+
+            <div>
+              <p className="text-sm text-black dark:text-white mb-2">
+                Download your data instantly.
+              </p>
+              <Link className="w-fit" href="/api/migration">
+                <div className="border w-fit border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
+                  Export Data
+                </div>
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div className="flex items-center gap-2 w-full rounded-md h-8">
+            <p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
+              Profile Visibility
+            </p>
+          </div>
+
+          <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
+          <Checkbox
+            label="Make profile private"
+            state={user.isPrivate}
+            className="text-sm sm:text-base"
+            onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
+          />
+
+          <p className="text-gray-500 dark:text-gray-300 text-sm">
+            This will limit who can find and add you to other Collections.
+          </p>
+
+          {user.isPrivate && (
+            <div>
+              <p className="text-sm text-black dark:text-white mt-2">
+                Whitelisted Users
+              </p>
+              <p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
+                Please provide the Username of the users you wish to grant
+                visibility to your profile. Separated by comma.
+              </p>
+              <textarea
+                className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
+                placeholder="Your profile is hidden from everyone right now..."
+                value={whitelistedUsersTextbox}
+                onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
+              />
+            </div>
+          )}
+        </div>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save"
+          className="mt-2 mx-auto lg:mx-0"
+        />
+      </div>
+    </SettingsLayout>
+  );
+}

pages/settings/appearance.tsx

@@ -1,10 +1,39 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
+import { useTheme } from "next-themes";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+
+export default function Appearance() {
+  const { theme, setTheme } = useTheme();
 
-export default function appearance() {
   return (
     <SettingsLayout>
-      <div>appearance</div>
+      <p className="mb-3 text-sm">Select Theme</p>
+      <div className="flex gap-3 w-full">
+        <div
+          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+            theme === "dark"
+              ? "dark:outline-sky-500 text-sky-500"
+              : "text-white"
+          }`}
+          onClick={() => setTheme("dark")}
+        >
+          <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+          <p className="text-2xl">Dark Theme</p>
+
+          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+        </div>
+        <div
+          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+            theme === "light" ? "outline-sky-500 text-sky-500" : "text-black"
+          }`}
+          onClick={() => setTheme("light")}
+        >
+          <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+          <p className="text-2xl">Light Theme</p>
+          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+        </div>
+      </div>
     </SettingsLayout>
   );
 }

pages/settings/archive.tsx

@@ -1,10 +1,88 @@
+import Checkbox from "@/components/Checkbox";
+import SubmitButton from "@/components/SubmitButton";
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
+import React, { useEffect, useState } from "react";
+import useAccountStore from "@/store/account";
+import { toast } from "react-hot-toast";
+import { AccountSettings } from "@/types/global";
+
+export default function Archive() {
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { account, updateAccount } = useAccountStore();
+  const [user, setUser] = useState<AccountSettings>(account);
+
+  const [archiveAsScreenshot, setArchiveAsScreenshot] =
+    useState<boolean>(false);
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    setUser({
+      ...account,
+      archiveAsScreenshot,
+      archiveAsPDF,
+      archiveAsWaybackMachine,
+    });
+  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) {
+      setArchiveAsScreenshot(account.archiveAsScreenshot);
+      setArchiveAsPDF(account.archiveAsPDF);
+      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
+    }
+  }, [account]);
+
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
 
-export default function archive() {
   return (
     <SettingsLayout>
-      <div>archive</div>
+      <p>Formats to Archive webpages:</p>
+      <div className="p-3">
+        <Checkbox
+          label="Screenshot"
+          state={archiveAsScreenshot}
+          onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
+        />
+        <Checkbox
+          label="PDF"
+          state={archiveAsPDF}
+          onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+        />
+
+        <Checkbox
+          label="Archive.org Snapshot"
+          state={archiveAsWaybackMachine}
+          onClick={() => setArchiveAsWaybackMachine(!archiveAsWaybackMachine)}
+        />
+      </div>
+
+      <SubmitButton
+        onClick={submit}
+        loading={submitLoader}
+        label="Save"
+        className="mt-2 mx-auto lg:mx-0"
+      />
     </SettingsLayout>
   );
 }

pages/settings/billing.tsx

@@ -2,7 +2,7 @@ import SettingsLayout from "@/layouts/SettingsLayout";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-export default function billing() {
+export default function Billing() {
   const router = useRouter();
 
   useEffect(() => {
@@ -12,7 +12,29 @@ export default function billing() {
 
   return (
     <SettingsLayout>
-      <div>Billing</div>
+      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md text-black dark:text-white">
+          To manage/cancel your subsciption, visit the{" "}
+          <a
+            href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
+            className="underline"
+          >
+            Billing Portal
+          </a>
+          .
+        </p>
+
+        <p className="text-md text-black dark:text-white">
+          If you still need help or encountered any issues, feel free to reach
+          out to us at:{" "}
+          <a
+            className="font-semibold underline"
+            href="mailto:support@linkwarden.app"
+          >
+            support@linkwarden.app
+          </a>
+        </p>
+      </div>
     </SettingsLayout>
   );
 }

pages/settings/migration.tsx

@@ -1,10 +0,0 @@
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
-
-export default function appearance() {
-  return (
-    <SettingsLayout>
-      <div>Migration</div>
-    </SettingsLayout>
-  );
-}

pages/settings/password.tsx

@@ -1,10 +1,83 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
+import { useState } from "react";
+import useAccountStore from "@/store/account";
+import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
+import SubmitButton from "@/components/SubmitButton";
+import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
+
+export default function Password() {
+  const [newPassword, setNewPassword1] = useState("");
+  const [newPassword2, setNewPassword2] = useState("");
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { account, updateAccount } = useAccountStore();
+
+  const submit = async () => {
+    if (newPassword == "" || newPassword2 == "") {
+      toast.error("Please fill all the fields.");
+    }
+
+    if (newPassword !== newPassword2)
+      return toast.error("Passwords do not match.");
+    else if (newPassword.length < 8)
+      return toast.error("Passwords must be at least 8 characters.");
+
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...account,
+      newPassword,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+      setNewPassword1("");
+      setNewPassword2("");
+    } else toast.error(response.data as string);
+
+    setSubmitLoader(false);
+  };
 
-export default function password() {
   return (
     <SettingsLayout>
-      <div>password</div>
+      <p className="mb-3">
+        To change your password, please fill out the following. Your password
+        should be at least 8 characters.
+      </p>
+      <div className="w-full flex flex-col gap-2 justify-between">
+        <p className="text-sm text-black dark:text-white">New Password</p>
+
+        <TextInput
+          value={newPassword}
+          onChange={(e) => setNewPassword1(e.target.value)}
+          placeholder="••••••••••••••"
+          type="password"
+        />
+
+        <p className="text-sm text-black dark:text-white">
+          Confirm New Password
+        </p>
+
+        <TextInput
+          value={newPassword2}
+          onChange={(e) => setNewPassword2(e.target.value)}
+          placeholder="••••••••••••••"
+          type="password"
+        />
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save"
+          className="mt-2 mx-auto lg:mx-0"
+        />
+      </div>
     </SettingsLayout>
   );
 }

pages/settings/privacy.tsx

@@ -1,10 +0,0 @@
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
-
-export default function privacy() {
-  return (
-    <SettingsLayout>
-      <div>privacy</div>
-    </SettingsLayout>
-  );
-}

pages/settings/profile.tsx

@@ -1,10 +0,0 @@
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
-
-export default function profile() {
-  return (
-    <SettingsLayout>
-      <div>profile</div>
-    </SettingsLayout>
-  );
-}

pages/subscribe.tsx

@@ -1,6 +1,6 @@
 import SubmitButton from "@/components/SubmitButton";
 import { signOut } from "next-auth/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";

prisma/migrations/20231019032936_modify_archive_formats/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "archiveAsPDF" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "archiveAsScreenshot" BOOLEAN NOT NULL DEFAULT true,
+ADD COLUMN     "archiveAsWaybackMachine" BOOLEAN NOT NULL DEFAULT false;

prisma/schema.prisma

@@ -54,6 +54,10 @@ model User {
 
   pinnedLinks Link[]
 
+  archiveAsScreenshot     Boolean         @default(true)
+  archiveAsPDF            Boolean         @default(true)
+  archiveAsWaybackMachine Boolean         @default(false)
+
   collectionsJoined UsersAndCollections[]
   isPrivate         Boolean               @default(false)
   whitelistedUsers  WhitelistedUser[]

store/modals.ts

@@ -1,17 +1,10 @@
 import {
-  AccountSettings,
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import { create } from "zustand";
 
 type Modal =
-  | {
-      modal: "ACCOUNT";
-      state: boolean;
-      active: AccountSettings;
-      defaultIndex?: number;
-    }
   | {
       modal: "LINK";
       state: boolean;