Refactor password update functionality

lib/api/controllers/users/userId/updateUserById.ts

@@ -23,11 +23,6 @@ export default async function updateUserById(
       response: "Username invalid.",
       status: 400,
     };
-  if (data.newPassword && data.newPassword?.length < 8)
-    return {
-      response: "Password must be at least 8 characters.",
-      status: 400,
-    };
 
   // Check email (if enabled)
   const checkEmail =
@@ -155,6 +150,37 @@ export default async function updateUserById(
     );
   }
 
+  // Password Settings
+
+  if (data.newPassword || data.oldPassword) {
+    if (!data.oldPassword || !data.newPassword)
+      return {
+        response: "Please fill out all the fields.",
+        status: 400,
+      };
+    else if (!user?.password)
+      return {
+        response:
+          "User has no password. Please reset your password from the forgot password page.",
+        status: 400,
+      };
+    else if (!bcrypt.compareSync(data.oldPassword, user.password))
+      return {
+        response: "Old password is incorrect.",
+        status: 400,
+      };
+    else if (data.newPassword?.length < 8)
+      return {
+        response: "Password must be at least 8 characters.",
+        status: 400,
+      };
+    else if (data.newPassword === data.oldPassword)
+      return {
+        response: "New password must be different from the old password.",
+        status: 400,
+      };
+  }
+
   // Other settings / Apply changes
 
   const saltRounds = 10;

pages/settings/password.tsx

@@ -6,21 +6,18 @@ import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 
 export default function Password() {
-  const [newPassword, setNewPassword1] = useState("");
-  const [newPassword2, setNewPassword2] = useState("");
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
 
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const { account, updateAccount } = useAccountStore();
 
   const submit = async () => {
-    if (newPassword == "" || newPassword2 == "") {
+    if (newPassword == "" || oldPassword == "") {
       return toast.error("Please fill all the fields.");
     }
-
-    if (newPassword !== newPassword2)
-      return toast.error("Passwords do not match.");
-    else if (newPassword.length < 8)
+    if (newPassword.length < 8)
       return toast.error("Passwords must be at least 8 characters.");
 
     setSubmitLoader(true);
@@ -30,14 +27,15 @@ export default function Password() {
     const response = await updateAccount({
       ...account,
       newPassword,
+      oldPassword,
     });
 
     toast.dismiss(load);
 
     if (response.ok) {
       toast.success("Settings Applied!");
-      setNewPassword1("");
-      setNewPassword2("");
+      setNewPassword("");
+      setOldPassword("");
     } else toast.error(response.data as string);
 
     setSubmitLoader(false);
@@ -54,22 +52,22 @@ export default function Password() {
         should be at least 8 characters.
       </p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p>New Password</p>
+        <p>Old Password</p>
 
         <TextInput
-          value={newPassword}
+          value={oldPassword}
           className="bg-base-200"
-          onChange={(e) => setNewPassword1(e.target.value)}
+          onChange={(e) => setOldPassword(e.target.value)}
           placeholder="••••••••••••••"
           type="password"
         />
 
-        <p>Confirm New Password</p>
+        <p className="mt-3">New Password</p>
 
         <TextInput
-          value={newPassword2}
+          value={newPassword}
           className="bg-base-200"
-          onChange={(e) => setNewPassword2(e.target.value)}
+          onChange={(e) => setNewPassword(e.target.value)}
           placeholder="••••••••••••••"
           type="password"
         />
@@ -78,7 +76,7 @@ export default function Password() {
           onClick={submit}
           loading={submitLoader}
           label="Save Changes"
-          className="mt-2 w-full sm:w-fit"
+          className="mt-3 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>

types/global.ts

@@ -50,6 +50,7 @@ export interface TagIncludingLinkCount extends Tag {
 
 export interface AccountSettings extends User {
   newPassword?: string;
+  oldPassword?: string;
   whitelistedUsers: string[];
   subscription?: {
     active?: boolean;