redesigned settings page [still WIP]

components/Modal/User/PrivacySettings.tsx

@@ -12,7 +12,6 @@ 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;

components/SettingsSidebar.tsx

@@ -34,13 +34,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`dark:bg-neutral-900 bg-white h-full w-64 xl:w-80 overflow-y-auto border-solid 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}`}
+      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>
   );

layouts/SettingsLayout.tsx

@@ -39,7 +39,7 @@ export default function SettingsLayout({ children }: Props) {
     <>
       <ModalManagement />
 
-      <div className="flex max-w-screen-lg mx-auto">
+      <div className="flex max-w-screen-md mx-auto">
         <div className="hidden lg:block">
           <SettingsSidebar />
         </div>
@@ -60,11 +60,13 @@ export default function SettingsLayout({ children }: Props) {
               <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
             </Link>
 
-            <p className="capitalize text-3xl">
+            <p className="capitalize text-3xl font-thin">
               {router.asPath.split("/").pop()} Settings
             </p>
           </div>
+
           <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
+
           {children}
 
           {sidebar ? (

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">
+                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,36 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import React from "react";
+import { useTheme } from "next-themes";
 
 export default function appearance() {
+  const { theme, setTheme } = useTheme();
+
+  const handleToggle = () => {
+    if (theme === "dark") {
+      setTheme("light");
+    } else {
+      setTheme("dark");
+    }
+  };
+
   return (
     <SettingsLayout>
-      <div>appearance</div>
+      <div className="flex gap-3 w-full">
+        <div
+          className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-black text-white"
+          onClick={() => setTheme("dark")}
+        >
+          <p>Dark Theme</p>
+
+          {/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
+        </div>
+        <div
+          className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-white text-black"
+          onClick={() => setTheme("light")}
+        >
+          <p>Light Theme</p>
+          {/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
+        </div>
+      </div>
     </SettingsLayout>
   );
 }

pages/settings/billing.tsx

@@ -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);
+  };
+
   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,183 +0,0 @@
-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";
-
-export default function profile() {
-  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>({
-    ...account,
-  });
-
-  useEffect(() => {
-    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,
-        });
-
-      setUser({ ...user, newPassword: undefined });
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <SettingsLayout>
-      <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80 mx-auto">
-        <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">
-                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 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
-                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>
-
-        <SubmitButton
-          onClick={submit}
-          loading={submitLoader}
-          label="Apply Settings"
-          icon={faPenToSquare}
-          className="mt-2 mx-auto lg:mx-0"
-        />
-      </div>
-    </SettingsLayout>
-  );
-}