Add AccountList skeleton

src/ui/account/modals/AccountModal.tsx

@@ -6,6 +6,7 @@ import TextInput from "@/components/input/TextInput";
 import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
 import { useCreateAccount, useUpdateAccount } from "@/hooks/AccountHooks";
 import { Account, AccountStatus } from "@/interface/Account";
+import { useTimedModal } from "@/providers/TimedModalProvider";
 import { useEffect, useState } from "react";
 
 
@@ -35,17 +36,31 @@ export default function AccountModal({
 
 	const updateAccountMutate = useUpdateAccount();
 	const createAccountMutate = useCreateAccount();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
 
-	if((updateAccountMutate.isSuccess) || (createAccountMutate.isSuccess)){
-		updateAccountMutate.reset();
-		createAccountMutate.reset();
-		close();
-	}
-	else if((updateAccountMutate.isError) || (updateAccountMutate.isError)){
-		//TODO: Add message modal here
-		console.log(updateAccountMutate.error);
-		console.log(createAccountMutate.error);
-	}
+
+	useEffect(() => {
+		if(createAccountMutate.isSuccess){
+			createAccountMutate.reset();
+			addSuccessMessage(`Account ${username} created successfully`);
+			close();
+		}
+		else if(updateAccountMutate.isSuccess){
+			updateAccountMutate.reset();
+			addSuccessMessage(`Account ${username} updated successfully`);
+			close();
+		}
+		else if(createAccountMutate.isError){
+			createAccountMutate.reset();
+			addErrorMessage(`Error creating account ${username}: ${createAccountMutate.error.message}`);
+			console.log(createAccountMutate.error);
+		}
+		else if(updateAccountMutate.isError){
+			updateAccountMutate.reset();
+			addErrorMessage(`Error updating account ${username}: ${updateAccountMutate.error.message}`);
+			console.log(updateAccountMutate.error);
+		}
+	});
 
 
 	const updateAccount = () => {

src/ui/account/modals/AccountPasswordResetModal.tsx

@@ -4,7 +4,8 @@ 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";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
 
 
 export default function AccountPasswordRestModal({
@@ -17,6 +18,7 @@ export default function AccountPasswordRestModal({
 	account: Account | undefined;
 }){
 	const [ newPassword, setNewPassword ] = useState<string>("");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
 
 
 	const passwordResetMutate = useResetPassword(account?.accountId ?? "");
@@ -27,14 +29,18 @@ export default function AccountPasswordRestModal({
 		passwordResetMutate.mutate(newPassword);
 	}
 
-	if(passwordResetMutate.isSuccess){
-		passwordResetMutate.reset();
-		close();
-	}
-	else if(passwordResetMutate.isError){
-		//TODO: Add message modal here
-		console.log(passwordResetMutate.error);
-	}
+	useEffect(() => {
+		if(passwordResetMutate.isSuccess){
+			passwordResetMutate.reset();
+			addSuccessMessage(`Successfully reset password for ${account?.username}`);
+			close();
+		}
+		else if(passwordResetMutate.isError){
+			passwordResetMutate.reset();
+			addErrorMessage(`Failed to reset password for ${account?.username}: ${passwordResetMutate.error.message}`);
+			console.log(passwordResetMutate.error);
+		}
+	});
 
 
 	return (

src/ui/account/modals/DeleteAccountModal.tsx

@@ -3,6 +3,8 @@ import SecondaryButton from "@/components/button/SecondaryButton";
 import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
 import { useDeleteAccount } from "@/hooks/AccountHooks";
 import { Account } from "@/interface/Account";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
 
 
 export default function DeleteAccountModal({
@@ -15,20 +17,26 @@ export default function DeleteAccountModal({
 	account: Account | undefined;
 }){
 	const deleteAccountMutate = useDeleteAccount(account?.accountId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
 
 
 	const deleteAccount = () => {
 		deleteAccountMutate.mutate();
 	}
 
-	if(deleteAccountMutate.isSuccess){
-		deleteAccountMutate.reset();
-		close();
-	}
-	else if(deleteAccountMutate.isError){
-		//TODO: Add message modal here
-		console.log(deleteAccountMutate.error);
-	}
+	useEffect(() => {
+		if(deleteAccountMutate.isSuccess){
+			deleteAccountMutate.reset();
+			addSuccessMessage(`Successfully deleted ${account?.username}`);
+			close();
+		}
+		else if(deleteAccountMutate.isError){
+			deleteAccountMutate.reset();
+			addErrorMessage(`Error deleting ${account?.username}: ${deleteAccountMutate.error.message}`);
+			console.log(deleteAccountMutate.error);
+		}
+	});
+
 
 	return (
 		<RaidBuilderModal

src/ui/account/modals/ForcePasswordResetModal.tsx

@@ -3,6 +3,8 @@ import SecondaryButton from "@/components/button/SecondaryButton";
 import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
 import { useForcePasswordReset } from "@/hooks/AccountHooks";
 import { Account } from "@/interface/Account";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
 
 
 export default function ForcePasswordResetModal({
@@ -14,21 +16,26 @@ export default function ForcePasswordResetModal({
 	close: () => void;
 	account: Account | undefined;
 }){
-	const accountMutate = useForcePasswordReset(account?.accountId ?? "");
+	const forcePasswordResetMutate = useForcePasswordReset(account?.accountId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
 
 
 	const forcePasswordReset = () => {
-		accountMutate.mutate();
+		forcePasswordResetMutate.mutate();
 	}
 
-	if(accountMutate.isSuccess){
-		accountMutate.reset();
-		close();
-	}
-	else if(accountMutate.isError){
-		//TODO: Add message modal here
-		console.log(accountMutate.error);
-	}
+	useEffect(() => {
+		if(forcePasswordResetMutate.isSuccess){
+			forcePasswordResetMutate.reset();
+			addSuccessMessage(`Successfully forced password reset for ${account?.username}`);
+			close();
+		}
+		else if(forcePasswordResetMutate.isError){
+			forcePasswordResetMutate.reset();
+			addErrorMessage(`Error forcing password reset for ${account?.username}: ${forcePasswordResetMutate.error.message}`);
+			console.log(forcePasswordResetMutate.error);
+		}
+	});
 
 
 	return (

src/ui/account/modals/RevokeRefreshTokenModal.tsx

@@ -3,6 +3,8 @@ import SecondaryButton from "@/components/button/SecondaryButton";
 import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
 import { useRevokeRefreshToken } from "@/hooks/AccountHooks";
 import { Account } from "@/interface/Account";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
 
 
 export default function RevokeRefreshTokenModal({
@@ -15,20 +17,25 @@ export default function RevokeRefreshTokenModal({
 	account: Account | undefined;
 }){
 	const revokeRefreshTokenMutate = useRevokeRefreshToken(account?.accountId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
 
 
 	const revokeRefreshToken = () => {
 		revokeRefreshTokenMutate.mutate();
 	}
 
-	if(revokeRefreshTokenMutate.isSuccess){
-		revokeRefreshTokenMutate.reset();
-		close();
-	}
-	else if(revokeRefreshTokenMutate.isError){
-		//TODO: Add message modal here
-		console.log(revokeRefreshTokenMutate.error);
-	}
+	useEffect(() => {
+		if(revokeRefreshTokenMutate.isSuccess){
+			revokeRefreshTokenMutate.reset();
+			addSuccessMessage(`Refresh token for ${account?.username} was successfully revoked`);
+			close();
+		}
+		else if(revokeRefreshTokenMutate.isError){
+			revokeRefreshTokenMutate.reset();
+			addErrorMessage(`Error revoking refresh token for ${account?.username}: ${revokeRefreshTokenMutate.error.message}`);
+			console.log(revokeRefreshTokenMutate.error);
+		}
+	});
 
 
 	return (