fully added profile photo submission

components/ClickAwayHandler.tsx

@@ -24,9 +24,9 @@ function useOutsideAlerter(
         onClickOutside(event);
       }
     }
-    document.addEventListener("mouseup", handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener("mouseup", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [ref, onClickOutside]);
 }

components/Modal/UserSettings.tsx

@@ -3,13 +3,15 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleUser, faClose } from "@fortawesome/free-solid-svg-icons";
+import { faUser, faClose } from "@fortawesome/free-solid-svg-icons";
 import Checkbox from "../Checkbox";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { useSession } from "next-auth/react";
+import { resizeImage } from "@/lib/client/resizeImage";
+import fileExists from "@/lib/client/fileExists";
 
 type Props = {
   toggleSettingsModal: Function;
@@ -19,38 +21,54 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
   const { update } = useSession();
   const { account, updateAccount } = useAccountStore();
 
-  let initialUser = {
+  useEffect(() => {
-    name: account.name,
+    const determineProfilePicSource = async () => {
-    email: account.email,
+      const path = `/api/avatar/${account.id}`;
-    collectionProtection: account.collectionProtection,
+      const imageExists = await fileExists(path).catch((e) => console.log(e));
-    whitelistedUsers: account.whitelistedUsers,
+      if (imageExists) setUser({ ...user, profilePic: path });
     };
 
-  const [user, setUser] = useState<AccountSettings>(initialUser);
+    determineProfilePicSource();
+  }, []);
 
-  const [selectedFile, setSelectedFile] = useState(null);
+  const [user, setUser] = useState<AccountSettings>({
+    ...account,
+    profilePic: null,
+  });
 
-  const handleFileChange = (e: any) => {
+  const handleImageUpload = async (e: any) => {
-    setSelectedFile(e.target.files[0]);
+    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);
+
+      console.log(resizedFile.size);
+
+      if (
+        resizedFile.size < 1048576 // 1048576 Bytes == 1MB
+      ) {
+        const reader = new FileReader();
+
+        reader.onload = () => {
+          setUser({ ...user, profilePic: reader.result as string });
         };
 
-  const stateIsTampered = () => {
+        reader.readAsDataURL(resizedFile);
-    return JSON.stringify(user) !== JSON.stringify(initialUser);
+      } else {
+        console.log("Please select a PNG or JPEG file thats less than 1MB.");
+      }
+    } else {
+      console.log("Invalid file format.");
+    }
   };
 
   const submit = async () => {
     await updateAccount(user);
 
-    initialUser = {
+    if (user.email !== account.email || user.name !== account.name)
-      name: account.name,
-      email: account.email,
-      collectionProtection: account.collectionProtection,
-      whitelistedUsers: account.whitelistedUsers,
-    };
-
-    console.log({ email: user.email, name: user.name });
-
-    if (user.email !== initialUser.email || user.name !== initialUser.name)
       update({ email: user.email, name: user.name });
   };
 
@@ -60,7 +78,7 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
 
       <p className="text-sky-600">Profile Settings</p>
 
-      {user.email !== initialUser.email || user.name !== initialUser.name ? (
+      {user.email !== account.email || user.name !== account.name ? (
         <p className="text-gray-500 text-sm">
           Note: The page will be refreshed to apply the changes of "Email" or
           "Display Name".
@@ -100,19 +118,37 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
           </div>
         </div>
 
-        {/* <div className="sm:row-span-2 sm:justify-self-center mb-3">
+        <div className="sm:row-span-2 sm:justify-self-center mb-3">
           <p className="text-sm font-bold text-sky-300 mb-2 sm:text-center">
             Profile Photo
           </p>
           <div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
-            // Image goes here 
+            {user.profilePic && user.profilePic !== "DELETE" ? (
-            <FontAwesomeIcon
+              <div>
-              icon={faCircleUser}
+                <img
-              className="w-28 h-28 text-sky-500"
+                  alt="Profile Photo"
+                  className="rounded-full object-cover h-28 w-28 border border-sky-100 border-opacity-0"
+                  src={user.profilePic}
                 />
-            <div className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 bg-white border-sky-100 rounded-full text-gray-500 hover:text-red-500 duration-100 cursor-pointer">
+                <div
+                  onClick={() =>
+                    setUser({
+                      ...user,
+                      profilePic: "DELETE",
+                    })
+                  }
+                  className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 bg-white border-sky-100 rounded-full text-gray-500 hover:text-red-500 duration-100 cursor-pointer"
+                >
                   <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
                 </div>
+              </div>
+            ) : (
+              <FontAwesomeIcon
+                icon={faUser}
+                className="w-10 h-10 text-sky-400"
+              />
+            )}
+
             <div className="absolute -bottom-2 left-0 right-0 mx-auto w-fit text-center">
               <label
                 htmlFor="upload-photo"
@@ -124,14 +160,14 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
                   type="file"
                   name="photo"
                   id="upload-photo"
-                  accept="image/png, image/jpeg"
+                  accept=".png, .jpeg, .jpg"
                   className="hidden"
-                  onChange={handleFileChange}
+                  onChange={handleImageUpload}
                 />
               </label>
             </div>
           </div>
-        </div> */}
+        </div>
       </div>
 
       <hr />
@@ -164,21 +200,18 @@ export default function UserSettings({ toggleSettingsModal }: Props) {
             you to additional collections in the box below, separated by spaces.
           </p>
           <textarea
-            autoFocus
             className="w-full resize-none border rounded-md duration-100 bg-white p-2 outline-none border-sky-100 focus:border-sky-500"
             placeholder="No one can add you to any collections right now..."
           ></textarea>
         </div>
       ) : null}
 
-      {stateIsTampered() ? (
       <div
         className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
         onClick={submit}
       >
         Apply Settings
       </div>
-      ) : null}
     </div>
   );
 }

lib/api/controllers/users/updateUser.ts

@@ -5,9 +5,38 @@
 
 import { prisma } from "@/lib/api/db";
 import { AccountSettings } from "@/types/global";
+import fs from "fs";
+import path from "path";
 
 export default async function (user: AccountSettings, userId: number) {
-  console.log(typeof user);
+  console.log(console.log(user.profilePic));
+
+  const profilePic = user.profilePic;
+
+  if (profilePic && profilePic !== "DELETE") {
+    if ((user?.profilePic?.length as number) < 1572864) {
+      try {
+        const filePath = path.join(
+          process.cwd(),
+          `data/uploads/avatar/${userId}.jpg`
+        );
+
+        const base64Data = profilePic.replace(/^data:image\/jpeg;base64,/, "");
+
+        fs.writeFile(filePath, base64Data, "base64", function (err) {
+          console.log(err);
+        });
+      } catch (err) {
+        console.log("Error saving image:", err);
+      }
+    } else {
+      console.log("A file larger than 1.5MB was uploaded.");
+    }
+  } else if (profilePic === "DELETE") {
+    fs.unlink(`data/uploads/avatar/${userId}.jpg`, (err) => {
+      if (err) console.log(err);
+    });
+  }
 
   const updatedUser = await prisma.user.update({
     where: {
@@ -19,13 +48,9 @@ export default async function (user: AccountSettings, userId: number) {
       collectionProtection: user.collectionProtection,
       whitelistedUsers: user.whitelistedUsers,
     },
-    select: {
-      name: true,
-      email: true,
-      collectionProtection: true,
-      whitelistedUsers: true,
-    },
   });
 
-  return { response: updatedUser, status: 200 };
+  const { password, ...unsensitiveInfo } = updatedUser;
+
+  return { response: unsensitiveInfo, status: 200 };
 }

lib/client/fileExists.ts

@@ -0,0 +1,9 @@
+export default async function fileExists(fileUrl: string): Promise<boolean> {
+  try {
+    const response = await fetch(fileUrl, { method: "HEAD" });
+    return response.ok;
+  } catch (error) {
+    console.error("Error checking file existence:", error);
+    return false;
+  }
+}

lib/client/getInitialData.ts

@@ -22,7 +22,7 @@ export default function () {
       setCollections();
       setTags();
       setLinks();
-      setAccount(data.user.email as string);
+      setAccount(data.user.email as string, data.user.id);
     }
   }, [status]);
 }

lib/client/resizeImage.ts

@@ -0,0 +1,17 @@
+import Resizer from "react-image-file-resizer";
+
+export const resizeImage = (file: File): Promise<Blob> =>
+  new Promise<Blob>((resolve) => {
+    Resizer.imageFileResizer(
+      file,
+      150, // target width
+      150, // target height
+      "JPEG", // output format
+      100, // quality
+      0, // rotation
+      (uri: any) => {
+        resolve(uri as Blob);
+      },
+      "blob" // output type
+    );
+  });

package.json

@@ -36,6 +36,7 @@
     "puppeteer-extra-plugin-stealth": "^2.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-image-file-resizer": "^0.4.8",
     "react-select": "^5.7.0",
     "typescript": "4.9.4",
     "zustand": "^4.3.3"

pages/api/avatar/[id].ts

@@ -0,0 +1,38 @@
+// Copyright (C) 2022-present Daniel31x13 <daniel31x13@gmail.com>
+// This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3.
+// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { NextApiRequest, NextApiResponse } from "next";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "pages/api/auth/[...nextauth]";
+import path from "path";
+import fs from "fs";
+
+export default async function (req: NextApiRequest, res: NextApiResponse) {
+  if (!req.query.id)
+    return res.status(401).json({ response: "Invalid parameters." });
+
+  const session = await getServerSession(req, res, authOptions);
+
+  if (!session?.user?.email)
+    return res.status(401).json({ response: "You must be logged in." });
+
+  // TODO: If profile is private, hide it to other users...
+
+  const filePath = path.join(
+    process.cwd(),
+    `data/uploads/avatar/${req.query.id}.jpg`
+  );
+
+  console.log(filePath);
+  const file = fs.existsSync(filePath)
+    ? fs.readFileSync(filePath)
+    : "File not found.";
+
+  if (!fs.existsSync(filePath))
+    res.setHeader("Content-Type", "text/plain").status(404);
+  else res.setHeader("Content-Type", "image/jpeg").status(200);
+
+  return res.send(file);
+}

prisma/migrations/20230522122002_init/migration.sql

@@ -6,7 +6,6 @@ CREATE TABLE "User" (
     "password" TEXT NOT NULL,
     "collectionProtection" BOOLEAN NOT NULL DEFAULT false,
     "whitelistedUsers" TEXT[] DEFAULT ARRAY[]::TEXT[],
-    "profilePhotoPath" TEXT NOT NULL DEFAULT '',
     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
 
     CONSTRAINT "User_pkey" PRIMARY KEY ("id")

prisma/schema.prisma

@@ -22,7 +22,6 @@ model User {
   collectionsJoined UsersAndCollections[]
   collectionProtection Boolean @default(false)
   whitelistedUsers String[] @default([])
-  profilePhotoPath String @default("")
   createdAt DateTime @default(now())
 }
 

store/account.ts

@@ -9,20 +9,20 @@ import { AccountSettings } from "@/types/global";
 
 type AccountStore = {
   account: User;
-  setAccount: (email: string) => void;
+  setAccount: (email: string, id: number) => void;
   updateAccount: (user: AccountSettings) => Promise<boolean>;
 };
 
 const useAccountStore = create<AccountStore>()((set) => ({
   account: {} as User,
-  setAccount: async (email) => {
+  setAccount: async (email, id) => {
     const response = await fetch(`/api/routes/users?email=${email}`);
 
     const data = await response.json();
 
     console.log(data);
 
-    if (response.ok) set({ account: data.response });
+    if (response.ok) set({ account: { ...data.response } });
   },
   updateAccount: async (user) => {
     const response = await fetch("/api/routes/users", {

types/global.ts

@@ -3,7 +3,8 @@
 // This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 // You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { Collection, Link, Tag } from "@prisma/client";
+import { Collection, Link, Tag, User } from "@prisma/client";
+import { SetStateAction } from "react";
 
 export interface ExtendedLink extends Link {
   tags: Tag[];
@@ -58,9 +59,6 @@ export type SearchSettings = {
   };
 };
 
-export type AccountSettings = {
+export interface AccountSettings extends User {
-  name: string;
+  profilePic: string | null;
-  email: string;
+}
-  collectionProtection: boolean;
-  whitelistedUsers: string[];
-};

yarn.lock

@@ -3140,6 +3140,11 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-image-file-resizer@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz#85f4ae4469fd2867d961568af660ef403d7a79af"
+  integrity sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"