Refactor password update functionality

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>