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