🎉 able to ban/unban users

packages/api/prisma/migrations/20211010084624_/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ALTER COLUMN "banReason" SET DATA TYPE TEXT;

packages/api/prisma/schema.prisma

@@ -37,7 +37,7 @@ model User {
   isDispatch           Boolean             @default(false)
   isTow                Boolean             @default(false)
   banned               Boolean             @default(false)
-  banReason            Boolean?
+  banReason            String?
   avatarUrl            String?             @db.Text
   steamId              String?             @db.VarChar(255)
   whitelistStatus      WhitelistStatus     @default(ACCEPTED)

packages/api/src/controllers/admin/manage/Users.ts

@@ -1,8 +1,13 @@
+import { Rank } from ".prisma/client";
+import { PathParams, BodyParams, Context } from "@tsed/common";
 import { Controller } from "@tsed/di";
+import { BadRequest, NotFound } from "@tsed/exceptions";
 import { UseBeforeEach } from "@tsed/platform-middlewares";
-import { Get } from "@tsed/schema";
+import { Get, JsonRequestBody, Post } from "@tsed/schema";
+import { userProperties } from "../../../lib/auth";
 import { prisma } from "../../../lib/prisma";
 import { IsAuth, IsAdmin } from "../../../middlewares";
+import { BAN_SCHEMA, validate } from "@snailycad/schemas";
 
 @UseBeforeEach(IsAuth, IsAdmin)
 @Controller("/users")
@@ -13,4 +18,66 @@ export class ManageUsersController {
 
     return users;
   }
+
+  @Get("/:id")
+  async getUserById(@PathParams("id") userId: string) {
+    const user = await prisma.user.findUnique({ where: { id: userId }, select: userProperties });
+
+    return user;
+  }
+
+  @Post("/:id")
+  async updateUserById(@PathParams("id") userId: string, @BodyParams() body: JsonRequestBody) {
+    const user = await prisma.user.findUnique({ where: { id: userId } });
+    body;
+    if (!user) {
+      throw new NotFound("notFound");
+    }
+
+    return "TODO";
+
+    // return user;
+  }
+
+  @Post("/:id/:type")
+  async banUserById(
+    @Context() ctx: Context,
+    @PathParams("id") userId: string,
+    @PathParams("type") banType: "ban" | "unban",
+    @BodyParams() body: JsonRequestBody,
+  ) {
+    if (!["ban", "unban"].includes(banType)) {
+      throw new NotFound("notFound");
+    }
+
+    if (banType === "ban") {
+      const error = validate(BAN_SCHEMA, body.toJSON(), true);
+      if (error) {
+        throw new BadRequest(error);
+      }
+    }
+
+    const user = await prisma.user.findUnique({ where: { id: userId } });
+
+    if (!user) {
+      throw new NotFound("notFound");
+    }
+
+    if (user.rank === Rank.OWNER || ctx.get("user").id === user.id) {
+      throw new BadRequest("cannotBanSelfOrOwner");
+    }
+
+    const updated = await prisma.user.update({
+      where: {
+        id: user.id,
+      },
+      data: {
+        banReason: banType === "ban" ? body.get("reason") : null,
+        banned: banType === "ban",
+      },
+      select: userProperties,
+    });
+
+    return updated;
+  }
 }

packages/api/src/controllers/citizen/CitizenController.ts

@@ -58,7 +58,7 @@ export class CitizenController {
 
   @Post("/")
   async createCitizen(@Context() ctx: Context, @BodyParams() body: JsonRequestBody) {
-    const error = validate(CREATE_CITIZEN_SCHEMA(true), body.toJSON(), true);
+    const error = validate(CREATE_CITIZEN_SCHEMA, body.toJSON(), true);
 
     if (error) {
       return new BadRequest(error);
@@ -113,7 +113,7 @@ export class CitizenController {
     @Context() ctx: Context,
     @BodyParams() body: JsonRequestBody,
   ) {
-    const error = validate(CREATE_CITIZEN_SCHEMA(true), body.toJSON(), true);
+    const error = validate(CREATE_CITIZEN_SCHEMA, body.toJSON(), true);
     if (error) {
       return new BadRequest(error);
     }

packages/api/src/middlewares/IsAuth.ts

@@ -7,7 +7,16 @@ export class IsAuth implements MiddlewareMethods {
   async use(@Req() req: Req, @Context() ctx: Context) {
     const user = await getSessionUser(req);
 
-    const cad = await prisma.cad.findFirst();
+    const cad = await prisma.cad.findFirst({
+      select: {
+        name: true,
+        areaOfPlay: true,
+        maxPlateLength: true,
+        towWhitelisted: true,
+        whitelisted: true,
+        // features: true,
+      },
+    });
 
     ctx.set("cad", cad);
     ctx.set("user", user);

packages/client/locales/en/citizen.json

@@ -21,6 +21,7 @@
     "address": "Address",
     "dateOfBirth": "Date of Birth",
     "image": "Image",
+    "age": "Age",
     "driversLicense": "Drivers License",
     "weaponLicense": "Firearms License",
     "pilotLicense": "Pilot License",
@@ -57,4 +58,4 @@
     "deleteMedicalRecord": "Delete Medical Record",
     "alert_deleteMedicalRecord": "Are you sure you want to delete this medical record? This action cannot be undone."
   }
-}
+}

packages/client/locales/en/common.json

@@ -12,7 +12,8 @@
     "off": "Off",
     "error": "An unexpected error occurred",
     "view": "View",
-    "create": "Create"
+    "create": "Create",
+    "reason": "Reason"
   },
   "Errors": {
     "unknown": "An unexpected error occurred",
@@ -26,4 +27,4 @@
     "plateAlreadyInUse": "That plate is already being used on a vehicle.",
     "invalidImageType": "Only types image/png, image/jpeg, image/jpg and image/jpg are supported"
   }
-}
+}

packages/client/package.json

@@ -14,6 +14,7 @@
     "@snailycad/config": "0.0.0",
     "@snailycad/schemas": "0.0.2-dev",
     "axios": "^0.22.0",
+    "date-fns": "^2.25.0",
     "formik": "^2.2.9",
     "next": "^11.1.2",
     "next-intl": "^2.0.5",

packages/client/src/components/admin/manage/BanArea.tsx

@@ -0,0 +1,103 @@
+import { Button } from "components/Button";
+import { Error } from "components/form/Error";
+import { FormField } from "components/form/FormField";
+import { Input } from "components/form/Input";
+import { Loader } from "components/Loader";
+import { useAuth } from "context/AuthContext";
+import { Formik } from "formik";
+import { handleValidate } from "lib/handleValidate";
+import useFetch from "lib/useFetch";
+import { User } from "types/prisma";
+import { useTranslations } from "use-intl";
+import { BAN_SCHEMA } from "@snailycad/schemas";
+
+interface Props {
+  user: User;
+  setUser: React.Dispatch<React.SetStateAction<User | null>>;
+}
+
+export const BanArea = ({ user, setUser }: Props) => {
+  const common = useTranslations("Common");
+  const { state, execute } = useFetch();
+  const { user: session } = useAuth();
+
+  const formDisabled = user.rank === "OWNER" || user.id === session?.id;
+
+  async function onSubmit(values: { reason: string }) {
+    if (formDisabled) return;
+
+    const { json } = await execute(`/admin/manage/users/${user.id}/ban`, {
+      method: "POST",
+      data: values,
+    });
+
+    if (json.id) {
+      setUser({ ...user, ...json });
+    }
+  }
+
+  async function handleUnban() {
+    if (formDisabled) return;
+
+    const { json } = await execute(`/admin/manage/users/${user.id}/unban`, {
+      method: "POST",
+    });
+
+    if (json.id) {
+      setUser({ ...user, ...json });
+    }
+  }
+
+  const validate = handleValidate(BAN_SCHEMA);
+
+  return (
+    <div className="bg-gray-200 mt-10 rounded-md p-3">
+      <h1 className="text-2xl font-semibold">Ban area</h1>
+
+      {user.banned && user.rank !== "OWNER" ? (
+        <div className="mt-1">
+          <p>
+            <span className="font-semibold">Ban Reason: </span> {user.banReason}
+          </p>
+
+          <Button
+            className="flex items-center mt-2"
+            disabled={state === "loading"}
+            onClick={handleUnban}
+          >
+            {state === "loading" ? <Loader className="mr-3" /> : null}
+            Unban
+          </Button>
+        </div>
+      ) : (
+        <Formik validate={validate} onSubmit={onSubmit} initialValues={{ reason: "" }}>
+          {({ handleChange, handleSubmit, values, errors }) => (
+            <form className="mt-3" onSubmit={handleSubmit}>
+              <FormField fieldId="reason" label={common("reason")}>
+                <Input
+                  hasError={!!errors.reason}
+                  className="bg-gray-100"
+                  value={values.reason}
+                  onChange={handleChange}
+                  id="reason"
+                  disabled={formDisabled}
+                />
+                <Error>{errors.reason} </Error>
+              </FormField>
+
+              <Button
+                className="flex items-center"
+                type="submit"
+                disabled={formDisabled || state === "loading"}
+                variant="danger"
+              >
+                {state === "loading" ? <Loader className="border-red-300 mr-3" /> : null}
+                Ban User
+              </Button>
+            </form>
+          )}
+        </Formik>
+      )}
+    </div>
+  );
+};

packages/client/src/components/form/FormRow.tsx

@@ -1,21 +1,32 @@
+import { classNames } from "lib/classNames";
 import type * as React from "react";
 
-interface Props {
+type Props = JSX.IntrinsicElements["div"] & {
   children: React.ReactNode;
   justify?: boolean;
   flexLike?: boolean;
-}
+};
 
-export const FormRow = ({ justify = true, flexLike = false, children }: Props) => {
+export const FormRow = ({
+  justify = true,
+  flexLike = false,
+  children,
+  className = "",
+  ...rest
+}: Props) => {
   const cols = Array.isArray(children)
-    ? `grid grid-cols-1 sm:grid-cols-${children.length}`
+    ? `grid grid-cols-1 sm:grid-cols-${children.length / 2} md:grid-cols-${children.length}`
     : "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4";
 
   return (
     <div
-      className={`mb-3 w-full ${flexLike ? "grid grid-cols-1 sm:flex" : cols} gap-2 ${
-        justify && "justify-between"
-      }`}
+      {...rest}
+      className={classNames(
+        "mb-3 w-full gap-2",
+        flexLike ? "grid grid-cols-1 sm:flex" : cols,
+        justify && "justify-between",
+        className,
+      )}
     >
       {children}
     </div>

packages/client/src/components/form/Input.tsx

@@ -7,13 +7,13 @@ type Props = JSX.IntrinsicElements["input"] & {
 export const Input = React.forwardRef<HTMLInputElement, Props>(({ hasError, ...rest }, ref) => (
   <input
     ref={ref}
+    {...rest}
     className={`
     w-full p-1.5 px-3 bg-white rounded-md border-[1.5px] border-gray-200
     outline-none focus:border-gray-800
     hover:border-dark-gray
     disabled:cursor-not-allowed disabled:opacity-80
     transition-all ${rest.className} ${hasError && "border-red-500"} `}
-    {...rest}
   />
 ));
 
@@ -35,7 +35,7 @@ export const PasswordInput = (props: Exclude<Props, "type">) => {
       <button
         type="button"
         onClick={handleClick}
-        className="p-1 px-3 rounded-md absolute top-1/2 right-2 -translate-y-1/2 bg-gray-300"
+        className="p-1 px-3 rounded-md absolute top-1/2 right-1 -translate-y-1/2 bg-gray-300"
       >
         {type === "password" ? "show" : "hide"}
       </button>

packages/client/src/lib/useFetch.ts

@@ -3,6 +3,7 @@ import { AxiosRequestConfig, AxiosError } from "axios";
 import { handleRequest } from "./fetch";
 import toast from "react-hot-toast";
 import { useTranslations } from "use-intl";
+import Common from "../../locales/en/common.json";
 
 type NullableAbortController = AbortController | null;
 type State = "loading" | "error";
@@ -33,8 +34,11 @@ export default function useFetch(
     const error = response instanceof Error ? parseError(response as AxiosError) : null;
 
     if (error) {
+      const hasKey = Object.keys(Common.Errors).some((e) => e === error);
+      const key = hasKey ? error : "unknown";
+
       setState("error");
-      toast.error(t(error));
+      toast.error(t(key));
 
       return {
         json: {},

packages/client/src/lib/utils.ts

@@ -3,3 +3,9 @@ const IMAGE_URL = "http://localhost:8080/";
 export function makeImageUrl(type: "citizens" | "users", id: string) {
   return `${IMAGE_URL}${type}/${id}`;
 }
+
+export function calculateAge(dateOfBirth: string | Date) {
+  return ((Date.now() - new Date(dateOfBirth).getTime()) / (60 * 60 * 24 * 365.25 * 1000))
+    .toString()
+    .split(".")[0];
+}