egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added toasts popups + improved login/signup page + many more changes and improvements

Browse Source
This commit is contained in:
Daniel
2023-06-27 02:03:40 +03:30
parent 0ddd9079bf
commit f1bd48be83
28 changed files with 464 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LinkCard.tsx
+33 -15
View File
@@ -13,6 +13,7 @@ import useAccountStore from "@/store/account";
import useModalStore from "@/store/modals";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
@@ -48,6 +49,35 @@ export default function LinkCard({ link, count, className }: Props) {
const { removeLink, updateLink } = useLinkStore();
const pinLink = async () => {
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
const load = toast.loading("Applying...");
setExpandDropdown(false);
const response = await updateLink({
...link,
pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
});
toast.dismiss(load);
response.ok &&
toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
};
const deleteLink = async () => {
const load = toast.loading("Deleting...");
const response = await removeLink(link);
toast.dismiss(load);
response.ok && toast.success(`Link Deleted.`);
setExpandDropdown(false);
};
const url = new URL(link.url);
const formattedDate = new Date(link.createdAt as string).toLocaleString(
"en-US",
@@ -97,7 +127,7 @@ export default function LinkCard({ link, count, className }: Props) {
width={64}
height={64}
alt=""
className="blur-sm absolute w-16 group-hover:scale-50 group-hover:blur-none group-hover:opacity-100 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none"
className="blur-sm absolute w-16 group-hover:opacity-80 duration-100 rounded-md bottom-5 right-5 opacity-60 select-none"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
@@ -141,16 +171,7 @@ export default function LinkCard({ link, count, className }: Props) {
link?.pinnedBy && link.pinnedBy[0]
? "Unpin"
: "Pin to Dashboard",
onClick: () => {
updateLink({
...link,
pinnedBy:
link?.pinnedBy && link.pinnedBy[0]
? undefined
: [{ id: account.id }],
});
setExpandDropdown(false);
},
onClick: pinLink,
}
: undefined,
permissions === true || permissions?.canUpdate
@@ -173,10 +194,7 @@ export default function LinkCard({ link, count, className }: Props) {
permissions === true || permissions?.canDelete
? {
name: "Delete",
onClick: () => {
removeLink(link);
setExpandDropdown(false);
},
onClick: deleteLink,
}
: undefined,
]}
components/Modal/Collection/CollectionInfo.tsx
+22 -5
View File
@@ -1,4 +1,4 @@
import { Dispatch, SetStateAction } from "react";
import { Dispatch, SetStateAction, useState } from "react";
import {
faFolder,
faPenToSquare,
@@ -10,6 +10,7 @@ import RequiredBadge from "../../RequiredBadge";
import SubmitButton from "@/components/SubmitButton";
import { HexColorPicker } from "react-colorful";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { toast } from "react-hot-toast";
type Props = {
toggleCollectionModal: Function;
@@ -26,18 +27,33 @@ export default function CollectionInfo({
collection,
method,
}: Props) {
const [submitLoader, setSubmitLoader] = useState(false);
const { updateCollection, addCollection } = useCollectionStore();
const submit = async () => {
if (!collection) return null;
let response = null;
setSubmitLoader(true);
const load = toast.loading(
method === "UPDATE" ? "Applying..." : "Creating..."
);
let response;
if (method === "CREATE") response = await addCollection(collection);
else if (method === "UPDATE") response = await updateCollection(collection);
else console.log("Unknown method.");
else response = await updateCollection(collection);
if (response) toggleCollectionModal();
toast.dismiss(load);
if (response.ok) {
toast.success(
`Collection ${method === "UPDATE" ? "Saved!" : "Created!"}`
);
toggleCollectionModal();
} else toast.error(response.data as string);
setSubmitLoader(false);
};
return (
@@ -102,6 +118,7 @@ export default function CollectionInfo({
<SubmitButton
onClick={submit}
loading={submitLoader}
label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
components/Modal/Collection/DeleteCollection.tsx
+8 -1
View File
@@ -8,6 +8,7 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
type Props = {
toggleDeleteCollectionModal: Function;
@@ -27,8 +28,14 @@ export default function DeleteCollection({
const submit = async () => {
if (permissions === true) if (collection.name !== inputField) return null;
const load = toast.loading("Deleting...");
const response = await removeCollection(collection.id as number);
if (response) {
toast.dismiss(load);
if (response.ok) {
toast.success("Collection Deleted.");
toggleDeleteCollectionModal();
router.push("/collections");
}
components/Modal/Collection/TeamManagement.tsx
+21 -5
View File
@@ -14,6 +14,7 @@ import Checkbox from "../../Checkbox";
import SubmitButton from "@/components/SubmitButton";
import ProfilePhoto from "@/components/ProfilePhoto";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
type Props = {
toggleCollectionModal: Function;
@@ -69,16 +70,30 @@ export default function TeamManagement({
});
};
const [submitLoader, setSubmitLoader] = useState(false);
const submit = async () => {
if (!collection) return null;
let response = null;
setSubmitLoader(true);
const load = toast.loading(
method === "UPDATE" ? "Applying..." : "Creating..."
);
let response;
if (method === "CREATE") response = await addCollection(collection);
else if (method === "UPDATE") response = await updateCollection(collection);
else console.log("Unknown method.");
else response = await updateCollection(collection);
if (response) toggleCollectionModal();
toast.dismiss(load);
if (response.ok) {
toast.success("Collection Saved!");
toggleCollectionModal();
} else toast.error(response.data as string);
setSubmitLoader(false);
};
return (
@@ -111,7 +126,7 @@ export default function TeamManagement({
try {
navigator.clipboard
.writeText(publicCollectionURL)
.then(() => console.log("Copied!"));
.then(() => toast.success("Copied!"));
} catch (err) {
console.log(err);
}
@@ -379,6 +394,7 @@ export default function TeamManagement({
{permissions === true && (
<SubmitButton
onClick={submit}
loading={submitLoader}
label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
components/Modal/Link/EditLink.tsx
+21 -3
View File
@@ -10,6 +10,7 @@ import { useSession } from "next-auth/react";
import useCollectionStore from "@/store/collections";
import { useRouter } from "next/router";
import SubmitButton from "../../SubmitButton";
import { toast } from "react-hot-toast";
type Props =
| {
@@ -28,6 +29,8 @@ export default function EditLink({
method,
activeLink,
}: Props) {
const [submitLoader, setSubmitLoader] = useState(false);
const { data } = useSession();
const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>(
@@ -88,12 +91,26 @@ export default function EditLink({
};
const submit = async () => {
setSubmitLoader(true);
let response;
const load = toast.loading(
method === "UPDATE" ? "Applying..." : "Creating..."
);
if (method === "UPDATE") response = await updateLink(link);
else if (method === "CREATE") response = await addLink(link);
else response = await addLink(link);
response && toggleLinkModal();
toast.dismiss(load);
if (response.ok) {
toast.success(`Link ${method === "UPDATE" ? "Saved!" : "Created!"}`);
toggleLinkModal();
} else toast.error(response.data as string);
setSubmitLoader(false);
return response;
};
return (
@@ -188,7 +205,8 @@ export default function EditLink({
onClick={submit}
label={method === "CREATE" ? "Add" : "Save"}
icon={method === "CREATE" ? faPlus : faPenToSquare}
className="mx-auto mt-2"
loading={submitLoader}
className={`mx-auto mt-2`}
/>
</div>
);
components/Modal/Link/LinkDetails.tsx
+2 -2
View File
@@ -116,12 +116,12 @@ export default function LinkDetails({ link }: Props) {
return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
{!imageError && (
<div id="link-banner" className="link-banner h-44 -mx-5 -mt-5 relative">
<div id="link-banner" className="link-banner h-32 -mx-5 -mt-5 relative">
<div id="link-banner-inner" className="link-banner-inner"></div>
</div>
)}
<div
className={`relative flex gap-5 items-start ${!imageError && "-mt-32"}`}
className={`relative flex gap-5 items-start ${!imageError && "-mt-24"}`}
>
{!imageError && (
<Image
components/Modal/User/ChangePassword.tsx
+50 -31
View File
@@ -4,6 +4,7 @@ import useAccountStore from "@/store/account";
import { useSession } from "next-auth/react";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "@/components/SubmitButton";
import { toast } from "react-hot-toast";
type Props = {
togglePasswordFormModal: Function;
@@ -20,6 +21,8 @@ export default function ChangePassword({
const [newPassword, setNewPassword1] = useState("");
const [newPassword2, setNewPassword2] = useState("");
const [submitLoader, setSubmitLoader] = useState(false);
const { account, updateAccount } = useAccountStore();
const { update } = useSession();
@@ -34,57 +37,73 @@ export default function ChangePassword({
const submit = async () => {
if (oldPassword == "" || newPassword == "" || newPassword2 == "") {
console.log("Please fill all the fields.");
toast.error("Please fill all the fields.");
} else if (newPassword === newPassword2) {
setSubmitLoader(true);
const load = toast.loading("Applying...");
const response = await updateAccount({
...user,
});
toast.dismiss(load);
if (response.ok) {
toast.success("Settings Applied!");
togglePasswordFormModal();
} else toast.error(response.data as string);
setSubmitLoader(false);
if (user.email !== account.email || user.name !== account.name)
update({ email: user.email, name: user.name });
if (response) {
if (response.ok) {
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
togglePasswordFormModal();
}
} else {
console.log("Passwords do not match.");
toast.error("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>
<div className="mx-auto sm:w-[35rem] w-80">
<div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
<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={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={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"
/>
<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"
/>
<SubmitButton
onClick={submit}
loading={submitLoader}
label="Apply Settings"
icon={faPenToSquare}
className="mx-auto mt-2"
/>
</div>
</div>
);
}
components/Modal/User/PrivacySettings.tsx
+20 -2
View File
@@ -5,6 +5,7 @@ import { AccountSettings } from "@/types/global";
import { useSession } from "next-auth/react";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import SubmitButton from "../../SubmitButton";
import { toast } from "react-hot-toast";
type Props = {
toggleSettingsModal: Function;
@@ -20,6 +21,8 @@ export default function PrivacySettings({
const { update } = useSession();
const { account, updateAccount } = useAccountStore();
const [submitLoader, setSubmitLoader] = useState(false);
const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
user.whitelistedUsers.join(", ")
);
@@ -44,16 +47,30 @@ export default function PrivacySettings({
};
const submit = async () => {
setSubmitLoader(true);
const load = toast.loading("Applying...");
const response = await updateAccount({
...user,
});
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
toast.dismiss(load);
if (response.ok) {
toast.success("Settings Applied!");
toggleSettingsModal();
} else toast.error(response.data as string);
setSubmitLoader(false);
if (user.email !== account.email || user.name !== account.name)
update({ email: user.email, name: user.name });
if (response) toggleSettingsModal();
if (response.ok) {
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
toggleSettingsModal();
}
};
return (
@@ -93,6 +110,7 @@ export default function PrivacySettings({
<SubmitButton
onClick={submit}
loading={submitLoader}
label="Apply Settings"
icon={faPenToSquare}
className="mx-auto mt-2"
components/Modal/User/ProfileSettings.tsx
+22 -4
View File
@@ -8,6 +8,7 @@ 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";
type Props = {
toggleSettingsModal: Function;
@@ -24,6 +25,8 @@ export default function ProfileSettings({
const { account, updateAccount } = useAccountStore();
const [profileStatus, setProfileStatus] = useState(true);
const [submitLoader, setSubmitLoader] = useState(false);
const handleProfileStatus = (e: boolean) => {
setProfileStatus(!e);
};
@@ -48,10 +51,10 @@ export default function ProfileSettings({
reader.readAsDataURL(resizedFile);
} else {
console.log("Please select a PNG or JPEG file thats less than 1MB.");
toast.error("Please select a PNG or JPEG file thats less than 1MB.");
}
} else {
console.log("Invalid file format.");
toast.error("Invalid file format.");
}
};
@@ -60,16 +63,30 @@ export default function ProfileSettings({
}, []);
const submit = async () => {
setSubmitLoader(true);
const load = toast.loading("Applying...");
const response = await updateAccount({
...user,
});
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
toast.dismiss(load);
if (response.ok) {
toast.success("Settings Applied!");
toggleSettingsModal();
} else toast.error(response.data as string);
setSubmitLoader(false);
if (user.email !== account.email || user.name !== account.name)
update({ email: user.email, name: user.name });
if (response) toggleSettingsModal();
if (response.ok) {
setUser({ ...user, oldPassword: undefined, newPassword: undefined });
toggleSettingsModal();
}
};
return (
@@ -151,6 +168,7 @@ export default function ProfileSettings({
</div> */}
<SubmitButton
onClick={submit}
loading={submitLoader}
label="Apply Settings"
icon={faPenToSquare}
className="mx-auto mt-2"
components/ModalManagement.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function ModalManagement() {
<CollectionModal
toggleCollectionModal={toggleModal}
method={modal.method}
isOwner={modal.isOwner}
isOwner={modal.isOwner as boolean}
defaultIndex={modal.defaultIndex}
activeCollection={
modal.active as CollectionIncludingMembersAndLinkCount
components/Search.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import { useRouter } from "next/router";
import { toast } from "react-hot-toast";
export default function Search() {
const router = useRouter();
@@ -35,7 +36,7 @@ export default function Search() {
value={searchQuery}
onChange={(e) => {
e.target.value.includes("%") &&
console.log("The search query should not contain '%'.");
toast.error("The search query should not contain '%'.");
setSearchQuery(e.target.value.replace("%", ""));
}}
onKeyDown={(e) =>
components/SubmitButton.tsx
+13 -6
View File
@@ -1,11 +1,11 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconDefinition } from "@fortawesome/free-regular-svg-icons";
import { MouseEventHandler } from "react";
type Props = {
onClick: Function;
icon: IconDefinition;
icon?: IconDefinition;
label: string;
loading: boolean;
className?: string;
};
@@ -13,15 +13,22 @@ export default function SubmitButton({
onClick,
icon,
label,
loading,
className,
}: Props) {
return (
<div
className={`bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold cursor-pointer duration-100 hover:bg-sky-400 w-fit ${className}`}
onClick={onClick as MouseEventHandler<HTMLDivElement>}
className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
loading
? "bg-sky-400 cursor-auto"
: "bg-sky-500 hover:bg-sky-400 cursor-pointer"
} ${className}`}
onClick={() => {
if (!loading) onClick();
}}
>
<FontAwesomeIcon icon={icon} className="h-5" />
{label}
{icon && <FontAwesomeIcon icon={icon} className="h-5" />}
<p className="text-center w-full">{label}</p>
</div>
);
}