Modals and API calls working for admin tab
This commit is contained in:
113
src/ui/account/modals/AccountModal.tsx
Normal file
113
src/ui/account/modals/AccountModal.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import AccountStatusSelector from "@/components/account/AccountStatusSelector";
|
||||
import PrimaryButton from "@/components/button/PrimaryButton";
|
||||
import SecondaryButton from "@/components/button/SecondaryButton";
|
||||
import PasswordInput from "@/components/input/PasswordInput";
|
||||
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 { useEffect, useState } from "react";
|
||||
|
||||
|
||||
export default function AccountModal({
|
||||
display,
|
||||
close,
|
||||
account
|
||||
}:{
|
||||
display: boolean;
|
||||
close: () => void;
|
||||
account: Account | undefined;
|
||||
}){
|
||||
const [ username, setUsername ] = useState<string>(account?.username ?? "");
|
||||
const [ email, setEmail ] = useState<string>(account?.email ?? "");
|
||||
const [ password, setPassword ] = useState<string>("");
|
||||
const [ accountStatus, setAccountStatus ] = useState<AccountStatus>(account?.accountStatus ?? AccountStatus.ACTIVE);
|
||||
const modalId = crypto.randomUUID().replace("-", "");
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setUsername(account?.username ?? "");
|
||||
setEmail(account?.email ?? "");
|
||||
setPassword(account?.password ?? "");
|
||||
setAccountStatus(account?.accountStatus ?? AccountStatus.ACTIVE);
|
||||
}, [ account, setUsername, setEmail, setPassword, setAccountStatus ]);
|
||||
|
||||
|
||||
const updateAccountMutate = useUpdateAccount();
|
||||
const createAccountMutate = useCreateAccount();
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
const updateAccount = () => {
|
||||
updateAccountMutate.mutate({accountId: account?.accountId, username, email, password, accountStatus} as Account);
|
||||
}
|
||||
|
||||
const createAccount = () => {
|
||||
createAccountMutate.mutate({username, email, password, accountStatus} as Account);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<RaidBuilderModal
|
||||
display={display}
|
||||
close={close}
|
||||
modalHeader={account ? "Update Account" : "Create Account"}
|
||||
modalBody={
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-4"
|
||||
>
|
||||
<TextInput
|
||||
id={`accountModalUsername${modalId}`}
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
<TextInput
|
||||
id={`accountModalEmail${modalId}`}
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
{
|
||||
!account && (
|
||||
<PasswordInput
|
||||
id={`accountModalPassword${modalId}`}
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<AccountStatusSelector
|
||||
value={accountStatus}
|
||||
onChange={(e) => setAccountStatus(e.currentTarget.value as AccountStatus)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
modalFooter={
|
||||
<>
|
||||
<PrimaryButton
|
||||
onClick={account ? updateAccount : createAccount}
|
||||
>
|
||||
{account ? "Update" : "Create"}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
74
src/ui/account/modals/AccountPasswordResetModal.tsx
Normal file
74
src/ui/account/modals/AccountPasswordResetModal.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
55
src/ui/account/modals/DeleteAccountModal.tsx
Normal file
55
src/ui/account/modals/DeleteAccountModal.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import DangerButton from "@/components/button/DangerButton";
|
||||
import SecondaryButton from "@/components/button/SecondaryButton";
|
||||
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
|
||||
import { useDeleteAccount } from "@/hooks/AccountHooks";
|
||||
import { Account } from "@/interface/Account";
|
||||
|
||||
|
||||
export default function DeleteAccountModal({
|
||||
display,
|
||||
close,
|
||||
account
|
||||
}:{
|
||||
display: boolean;
|
||||
close: () => void;
|
||||
account: Account | undefined;
|
||||
}){
|
||||
const deleteAccountMutate = useDeleteAccount(account?.accountId ?? "");
|
||||
|
||||
|
||||
const deleteAccount = () => {
|
||||
deleteAccountMutate.mutate();
|
||||
}
|
||||
|
||||
if(deleteAccountMutate.isSuccess){
|
||||
deleteAccountMutate.reset();
|
||||
close();
|
||||
}
|
||||
else if(deleteAccountMutate.isError){
|
||||
//TODO: Add message modal here
|
||||
console.log(deleteAccountMutate.error);
|
||||
}
|
||||
|
||||
return (
|
||||
<RaidBuilderModal
|
||||
display={display}
|
||||
close={close}
|
||||
modalHeader={"Delete Account"}
|
||||
modalBody={`Are you sure you want to delete ${account?.username}?`}
|
||||
modalFooter={
|
||||
<>
|
||||
<DangerButton
|
||||
onClick={deleteAccount}
|
||||
>
|
||||
Delete
|
||||
</DangerButton>
|
||||
<SecondaryButton
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
56
src/ui/account/modals/ForcePasswordResetModal.tsx
Normal file
56
src/ui/account/modals/ForcePasswordResetModal.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import DangerButton from "@/components/button/DangerButton";
|
||||
import SecondaryButton from "@/components/button/SecondaryButton";
|
||||
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
|
||||
import { useForcePasswordReset } from "@/hooks/AccountHooks";
|
||||
import { Account } from "@/interface/Account";
|
||||
|
||||
|
||||
export default function ForcePasswordResetModal({
|
||||
display,
|
||||
close,
|
||||
account
|
||||
}:{
|
||||
display: boolean;
|
||||
close: () => void;
|
||||
account: Account | undefined;
|
||||
}){
|
||||
const accountMutate = useForcePasswordReset(account?.accountId ?? "");
|
||||
|
||||
|
||||
const forcePasswordReset = () => {
|
||||
accountMutate.mutate();
|
||||
}
|
||||
|
||||
if(accountMutate.isSuccess){
|
||||
accountMutate.reset();
|
||||
close();
|
||||
}
|
||||
else if(accountMutate.isError){
|
||||
//TODO: Add message modal here
|
||||
console.log(accountMutate.error);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<RaidBuilderModal
|
||||
display={display}
|
||||
close={close}
|
||||
modalHeader={"Force Password Reset"}
|
||||
modalBody={`Are you sure you want to force reset the password for ${account?.username}?`}
|
||||
modalFooter={
|
||||
<>
|
||||
<DangerButton
|
||||
onClick={forcePasswordReset}
|
||||
>
|
||||
Reset
|
||||
</DangerButton>
|
||||
<SecondaryButton
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
56
src/ui/account/modals/RevokeRefreshTokenModal.tsx
Normal file
56
src/ui/account/modals/RevokeRefreshTokenModal.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import DangerButton from "@/components/button/DangerButton";
|
||||
import SecondaryButton from "@/components/button/SecondaryButton";
|
||||
import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
|
||||
import { useRevokeRefreshToken } from "@/hooks/AccountHooks";
|
||||
import { Account } from "@/interface/Account";
|
||||
|
||||
|
||||
export default function RevokeRefreshTokenModal({
|
||||
display,
|
||||
close,
|
||||
account
|
||||
}:{
|
||||
display: boolean;
|
||||
close: () => void;
|
||||
account: Account | undefined;
|
||||
}){
|
||||
const revokeRefreshTokenMutate = useRevokeRefreshToken(account?.accountId ?? "");
|
||||
|
||||
|
||||
const revokeRefreshToken = () => {
|
||||
revokeRefreshTokenMutate.mutate();
|
||||
}
|
||||
|
||||
if(revokeRefreshTokenMutate.isSuccess){
|
||||
revokeRefreshTokenMutate.reset();
|
||||
close();
|
||||
}
|
||||
else if(revokeRefreshTokenMutate.isError){
|
||||
//TODO: Add message modal here
|
||||
console.log(revokeRefreshTokenMutate.error);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<RaidBuilderModal
|
||||
display={display}
|
||||
close={close}
|
||||
modalHeader={"Revoke Refresh Token"}
|
||||
modalBody={`Are you sure you want to revoke the refresh token for ${account?.username}?`}
|
||||
modalFooter={
|
||||
<>
|
||||
<DangerButton
|
||||
onClick={revokeRefreshToken}
|
||||
>
|
||||
Revoke
|
||||
</DangerButton>
|
||||
<SecondaryButton
|
||||
onClick={close}
|
||||
>
|
||||
Cancel
|
||||
</SecondaryButton>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user