tab-seperated modals + eslint fix + much more bug fixed and improvements
This commit is contained in:
Daniel
@@ -0,0 +1,90 @@
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import { AccountSettings } from "@/types/global";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
|
||||
type Props = {
|
||||
togglePasswordFormModal: Function;
|
||||
setUser: Dispatch<SetStateAction<AccountSettings>>;
|
||||
user: AccountSettings;
|
||||
};
|
||||
|
||||
export default function ChangePassword({
|
||||
togglePasswordFormModal,
|
||||
setUser,
|
||||
user,
|
||||
}: Props) {
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword1] = useState("");
|
||||
const [newPassword2, setNewPassword2] = useState("");
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
const { update } = useSession();
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!(oldPassword == "" || newPassword == "" || newPassword2 == "") &&
|
||||
newPassword === newPassword2
|
||||
) {
|
||||
setUser({ ...user, oldPassword, newPassword });
|
||||
}
|
||||
}, [oldPassword, newPassword, newPassword2]);
|
||||
|
||||
const submit = async () => {
|
||||
if (oldPassword == "" || newPassword == "" || newPassword2 == "") {
|
||||
console.log("Please fill all the fields.");
|
||||
} else if (newPassword === newPassword2) {
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
});
|
||||
|
||||
if (user.email !== account.email || user.name !== account.name)
|
||||
update({ email: user.email, name: user.name });
|
||||
|
||||
if (response) {
|
||||
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
|
||||
togglePasswordFormModal();
|
||||
}
|
||||
} else {
|
||||
console.log("Passwords do not match.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
|
||||
<p className="text-sm text-sky-500">Old Password</p>
|
||||
|
||||
<input
|
||||
value={oldPassword}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
type="password"
|
||||
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
<p className="text-sm text-sky-500">New Password</p>
|
||||
|
||||
<input
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword1(e.target.value)}
|
||||
type="password"
|
||||
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
<p className="text-sm text-sky-500">Re-enter New Password</p>
|
||||
|
||||
<input
|
||||
value={newPassword2}
|
||||
onChange={(e) => setNewPassword2(e.target.value)}
|
||||
type="password"
|
||||
className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
label="Apply Settings"
|
||||
icon={faPenToSquare}
|
||||
className="mx-auto mt-2"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import Checkbox from "../../Checkbox";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { AccountSettings } from "@/types/global";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
||||
import SubmitButton from "../../SubmitButton";
|
||||
|
||||
type Props = {
|
||||
toggleSettingsModal: Function;
|
||||
setUser: Dispatch<SetStateAction<AccountSettings>>;
|
||||
user: AccountSettings;
|
||||
};
|
||||
|
||||
export default function PrivacySettings({
|
||||
toggleSettingsModal,
|
||||
setUser,
|
||||
user,
|
||||
}: Props) {
|
||||
const { update } = useSession();
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
|
||||
user.whitelistedUsers.join(", ")
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setUser({
|
||||
...user,
|
||||
whitelistedUsers: stringToArray(whitelistedUsersTextbox),
|
||||
});
|
||||
}, [whitelistedUsersTextbox]);
|
||||
|
||||
useEffect(() => {
|
||||
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
|
||||
}, []);
|
||||
|
||||
const stringToArray = (str: string) => {
|
||||
const stringWithoutSpaces = str.replace(/\s+/g, "");
|
||||
|
||||
const wordsArray = stringWithoutSpaces.split(",");
|
||||
|
||||
return wordsArray;
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
});
|
||||
|
||||
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
|
||||
|
||||
if (user.email !== account.email || user.name !== account.name)
|
||||
update({ email: user.email, name: user.name });
|
||||
|
||||
if (response) toggleSettingsModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
|
||||
<div>
|
||||
<p className="text-sm text-sky-500 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 text-sm">
|
||||
This will limit who can find and add you to other Collections.
|
||||
</p>
|
||||
|
||||
{user.isPrivate && (
|
||||
<div>
|
||||
<p className="text-sm text-sky-500 my-2">Whitelisted Users</p>
|
||||
<p className="text-gray-500 text-sm mb-3">
|
||||
Please provide the Email addresses 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-white p-2 outline-none border-sky-100 focus:border-sky-500"
|
||||
placeholder="Your profile is hidden from everyone right now..."
|
||||
value={whitelistedUsersTextbox}
|
||||
onChange={(e) => {
|
||||
setWhiteListedUsersTextbox(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
label="Apply Settings"
|
||||
icon={faPenToSquare}
|
||||
className="mx-auto mt-2"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { Dispatch, SetStateAction, useEffect } 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 { 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";
|
||||
|
||||
type Props = {
|
||||
toggleSettingsModal: Function;
|
||||
setUser: Dispatch<SetStateAction<AccountSettings>>;
|
||||
user: AccountSettings;
|
||||
};
|
||||
|
||||
export default function ProfileSettings({
|
||||
toggleSettingsModal,
|
||||
setUser,
|
||||
user,
|
||||
}: Props) {
|
||||
const { update } = useSession();
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
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 {
|
||||
console.log("Please select a PNG or JPEG file thats less than 1MB.");
|
||||
}
|
||||
} else {
|
||||
console.log("Invalid file format.");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
|
||||
}, []);
|
||||
|
||||
const submit = async () => {
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
});
|
||||
|
||||
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
|
||||
|
||||
if (user.email !== account.email || user.name !== account.name)
|
||||
update({ email: user.email, name: user.name });
|
||||
|
||||
if (response) toggleSettingsModal();
|
||||
};
|
||||
|
||||
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-sky-500 mb-2 text-center">Profile Photo</p>
|
||||
<div className="w-28 h-28 flex items-center justify-center border border-sky-100 rounded-full relative">
|
||||
<ProfilePhoto
|
||||
src={user.profilePic}
|
||||
className="h-28 w-28 border-[1px]"
|
||||
/>
|
||||
{user.profilePic && (
|
||||
<div
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
profilePic: "",
|
||||
})
|
||||
}
|
||||
className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 bg-white border-slate-200 rounded-full text-gray-500 hover:text-red-500 duration-100 cursor-pointer"
|
||||
>
|
||||
<FontAwesomeIcon icon={faClose} className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="absolute -bottom-2 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 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500"
|
||||
>
|
||||
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-sky-500 mb-2">Display Name</p>
|
||||
<input
|
||||
type="text"
|
||||
value={user.name}
|
||||
onChange={(e) => setUser({ ...user, name: e.target.value })}
|
||||
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-sky-500 mb-2">Email</p>
|
||||
<input
|
||||
type="text"
|
||||
value={user.email}
|
||||
onChange={(e) => setUser({ ...user, email: e.target.value })}
|
||||
className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <hr /> TODO: Export functionality
|
||||
|
||||
<p className="text-sky-600">Data Settings</p>
|
||||
|
||||
<div className="w-fit">
|
||||
<div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-500">
|
||||
Export Data
|
||||
</div>
|
||||
</div> */}
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
label="Apply Settings"
|
||||
icon={faPenToSquare}
|
||||
className="mx-auto mt-2"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
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";
|
||||
|
||||
type Props = {
|
||||
toggleSettingsModal: Function;
|
||||
activeUser: AccountSettings;
|
||||
className?: string;
|
||||
defaultIndex?: number;
|
||||
};
|
||||
|
||||
export default function UserModal({
|
||||
className,
|
||||
defaultIndex,
|
||||
toggleSettingsModal,
|
||||
activeUser,
|
||||
}: Props) {
|
||||
const [user, setUser] = useState<AccountSettings>(activeUser);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Tab.Group defaultIndex={defaultIndex}>
|
||||
<p className="text-xl text-sky-500 mb-5 text-center">
|
||||
Account Settings
|
||||
</p>
|
||||
<Tab.List className="flex justify-center flex-col sm:flex-row gap-2 sm:gap-3 mb-5 text-sky-600">
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
selected
|
||||
? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
|
||||
: "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
|
||||
}
|
||||
>
|
||||
Profile Settings
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
selected
|
||||
? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
|
||||
: "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
|
||||
}
|
||||
>
|
||||
Privacy Settings
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
className={({ selected }) =>
|
||||
selected
|
||||
? "px-2 py-1 bg-sky-200 duration-100 rounded-md outline-none"
|
||||
: "px-2 py-1 hover:bg-slate-200 rounded-md duration-100 outline-none"
|
||||
}
|
||||
>
|
||||
Password
|
||||
</Tab>
|
||||
</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>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user