xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

fully added profile photo submission

This commit is contained in:
Daniel 2023-05-22 15:50:48 +03:30
parent 22d8178c88
commit 59e4dc471f
13 changed files with 194 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/ClickAwayHandler.tsx
View File

@ -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]);
}

127
components/Modal/UserSettings.tsx
View File

@ -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 = {
name: account.name,
email: account.email,
collectionProtection: account.collectionProtection,
whitelistedUsers: account.whitelistedUsers,
};
useEffect(() => {
const determineProfilePicSource = async () => {
const path = `/api/avatar/${account.id}`;
const imageExists = await fileExists(path).catch((e) => console.log(e));
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) => {
setSelectedFile(e.target.files[0]);
};
const handleImageUpload = async (e: any) => {
const file: File = e.target.files[0];
const stateIsTampered = () => {
return JSON.stringify(user) !== JSON.stringify(initialUser);
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 });
};
reader.readAsDataURL(resizedFile);
} 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 = {
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)
if (user.email !== account.email || user.name !== account.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
<FontAwesomeIcon
icon={faCircleUser}
className="w-28 h-28 text-sky-500"
/>
<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">
<FontAwesomeIcon icon={faClose} className="w-3 h-3" />
</div>
{user.profilePic && user.profilePic !== "DELETE" ? (
<div>
<img
alt="Profile Photo"
className="rounded-full object-cover h-28 w-28 border border-sky-100 border-opacity-0"
src={user.profilePic}
/>
<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
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>
</div>
);
}

41
lib/api/controllers/users/updateUser.ts
View File

@ -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 };
}

9
lib/client/fileExists.ts Normal file
View File

@ -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;
}
}

2
lib/client/getInitialData.ts
View File

@ -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]);
}

17
lib/client/resizeImage.ts Normal file
View File

@ -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
);
});

1
package.json
View File

@ -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"

38
pages/api/avatar/[id].ts Normal file
View File

@ -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);
}

1
prisma/migrations/20230520142249_init/migration.sql → prisma/migrations/20230522122002_init/migration.sql
View File

@ -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")

1
prisma/schema.prisma
View File

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

6
store/account.ts
View File

@ -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", {

12
types/global.ts
View File

@ -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 = {
name: string;
email: string;
collectionProtection: boolean;
whitelistedUsers: string[];
};
export interface AccountSettings extends User {
profilePic: string | null;
}

5
yarn.lock
View File

@ -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"