admin actions

src/admin/ban-account.graphql

@@ -0,0 +1,9 @@
+mutation BanAccount($id: ID!) {
+  banAccount(id: $id) {
+    success
+    account {
+      id
+      banned
+    }
+  }
+}

src/admin/ban-toggle.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+
+import {
+  useBanAccountMutation,
+  useUnbanAccountMutation,
+  BaseAccount,
+} from "src/generated/graphql";
+
+export function BanToggle({
+  account,
+}: {
+  account: Omit<BaseAccount, "password">;
+}): JSX.Element {
+  const [banAccount] = useBanAccountMutation();
+  const [unbanAccount] = useUnbanAccountMutation();
+
+  function toggleBan() {
+    if (account.banned) {
+      unbanAccount({ variables: { id: account.id } });
+    } else {
+      banAccount({ variables: { id: account.id } });
+    }
+  }
+
+  return (
+    <FormGroup>
+      <FormControlLabel
+        control={<Switch checked={account.banned} onChange={toggleBan} />}
+        label={account.banned ? "Currently Banned" : "Not Banned"}
+      />
+    </FormGroup>
+  );
+}

src/admin/delete-account.graphql

@@ -0,0 +1,5 @@
+mutation DeleteAccount($id: ID!) {
+  deleteAccount(id: $id) {
+    success
+  }
+}

src/admin/delete-account.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+
+import { useDeleteAccountMutation, BaseAccount } from "src/generated/graphql";
+
+export function DeleteAccount({
+  account,
+}: {
+  account: Omit<BaseAccount, "password">;
+}): JSX.Element {
+  const [deleteAccountMutation] = useDeleteAccountMutation();
+  const [isArmed, setIsArmed] = useState<boolean>(false);
+
+  function deleteAccount() {
+    deleteAccountMutation({ variables: { id: account.id } });
+  }
+
+  return (
+    <Box>
+      <br />
+      <FormGroup>
+        <FormControlLabel
+          disabled={!account.banned}
+          control={
+            <Switch checked={isArmed} onChange={() => setIsArmed(!isArmed)} />
+          }
+          label={
+            account.banned
+              ? "Allow Account Deletion"
+              : "Must Be Banned to Delete"
+          }
+        />
+      </FormGroup>
+      <Button disabled={!isArmed} onClick={deleteAccount}>
+        Delete This Account
+      </Button>
+    </Box>
+  );
+}

src/admin/index.tsx

@@ -16,6 +16,8 @@ import { CreateItem } from "./create-item";
 import { GiveGold } from "./give-gold";
 import { SetSkill } from "./set-skill";
 import { AddLevels } from "./add-levels";
+import { BanToggle } from "./ban-toggle";
+import { DeleteAccount } from "./delete-account";
 
 export default function AdminPage(): JSX.Element {
   const [showData, setShowData] = useState<boolean>(false);
@@ -65,6 +67,8 @@ export default function AdminPage(): JSX.Element {
       {account && <GiveGold account={account} />}
       {account?.hero && <SetSkill hero={account.hero} />}
       {account && <AddLevels account={account} />}
+      {account && <BanToggle account={account} />}
+      {account && <DeleteAccount account={account} />}
       <br />
       <br />
       <br />

src/admin/unban-account.graphql

@@ -0,0 +1,9 @@
+mutation UnbanAccount($id: ID!) {
+  unbanAccount(id: $id) {
+    success
+    account {
+      id
+      banned
+    }
+  }
+}