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

2023-06-27 02:03:40 +03:30
parent 0ddd9079bf
commit f1bd48be83
28 changed files with 464 additions and 199 deletions
@@ -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>
  );
 }
@@ -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"
@@ -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"