Modals and API calls working for admin tab

src/ui/account/modals/AccountPasswordResetModal.tsx

@@ -0,0 +1,74 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import PasswordInput from "@/components/input/PasswordInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useResetPassword } from "@/hooks/AccountHooks";
+import { Account } from "@/interface/Account";
+import { useState } from "react";
+
+
+export default function AccountPasswordRestModal({
+	display,
+	close,
+	account
+}:{
+	display: boolean;
+	close: () => void;
+	account: Account | undefined;
+}){
+	const [ newPassword, setNewPassword ] = useState<string>("");
+
+
+	const passwordResetMutate = useResetPassword(account?.accountId ?? "");
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	const resetPassword = () => {
+		passwordResetMutate.mutate(newPassword);
+	}
+
+	if(passwordResetMutate.isSuccess){
+		passwordResetMutate.reset();
+		close();
+	}
+	else if(passwordResetMutate.isError){
+		//TODO: Add message modal here
+		console.log(passwordResetMutate.error);
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={"Reset Password"}
+			modalBody={
+				<div
+					className="flex flex-col gap-4"
+				>
+					<div>Enter new password for {account?.username}.</div>
+					<PasswordInput
+						id={`passwordResetModal${modalId}`}
+						value={newPassword}
+						onChange={(e) => setNewPassword(e.target.value)}
+						placeholder="Password"
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={resetPassword}
+					>
+						Reset
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}