feat: add operator roles and checks

fix: #12
affected: #9 #10

apps/app/src/components/app.tsx

@@ -26,6 +26,7 @@ setupIonicReact();
 
 const App: React.FC = () => {
     const [operator, setOperator] = useState(null);
+    const [role, setRole] = useState(null);
 
     return (
         <IonApp>
@@ -35,6 +36,8 @@ const App: React.FC = () => {
                         value={{
                             operator: operator,
                             setOperator: setOperator,
+                            role: role,
+                            setRole: setRole,
                         }}
                     >
                         <Route path="/onboarding" render={() => <Onboarding />} exact={true} />

apps/app/src/components/operator-tabs.tsx

@@ -1,12 +1,17 @@
 import { Redirect, Route } from "react-router-dom";
 import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonLabel } from "@ionic/react";
-import { Icons } from "@trashtrack/ui";
+import { Icons, OperatorContext } from "@trashtrack/ui";
 
 import OperatorDashboard from "../pages/operator/dashboard";
 import OperatorTrashbinDisplay from "../pages/operator/trash-bin/display";
 import OperatorUserDisplay from "../pages/operator/user/display";
+import { useContext } from "react";
 
 const OperatorTabs: React.FC = () => {
+    const operator = useContext(OperatorContext);
+
+    const isAdmin = operator.role === "admin";
+
     return (
         <IonTabs>
             <IonRouterOutlet animated={false} mode="ios">
@@ -24,10 +29,12 @@ const OperatorTabs: React.FC = () => {
                     <Icons.trash strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
                     <IonLabel className="pt-2">Trashbin</IonLabel>
                 </IonTabButton>
-                <IonTabButton tab="tab3" href="/operator/tabs/user">
-                    <Icons.user strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
-                    <IonLabel className="pt-2">User</IonLabel>
-                </IonTabButton>
+                {isAdmin && (
+                    <IonTabButton tab="tab3" href="/operator/tabs/user">
+                        <Icons.user strokeWidth={1} className="pt-2 w-[32px] h-[30px]" />
+                        <IonLabel className="pt-2">User</IonLabel>
+                    </IonTabButton>
+                )}
             </IonTabBar>
         </IonTabs>
     );

apps/app/src/main.tsx

@@ -1,3 +1,10 @@
+/**
+ * Notes from the lead developer of this codebase:
+ * "Never gonna touch Capacitor again, after this competition is over. Such a mess.
+ * I'll be considering moving to Expo, or Flutter, or just plain old web."
+ * - @elizielx
+ */
+
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { ErrorBoundary } from "react-error-boundary";

apps/app/src/pages/operator/dashboard.tsx

@@ -1,9 +1,12 @@
 import { IonContent, IonPage } from "@ionic/react";
 import { Card, CardContent, Button } from "@trashtrack/ui";
+import { OperatorContext } from "@trashtrack/ui";
+import { useContext } from "react";
 import { useHistory } from "react-router-dom";
 
 export function OperatorDashboard() {
     const history = useHistory();
+    const operator = useContext(OperatorContext);
 
     return (
         <IonPage>
@@ -13,6 +16,12 @@ export function OperatorDashboard() {
                     <p className="text-xs text-left text-slate-600">Dashboard</p>
                 </div>
                 <div className="flex flex-col pt-8 gap-4">
+                    <Card className="flex flex-col mt-8">
+                        <CardContent className="pt-6">
+                            <p className="text-sm text-slate-700">Operator Login: {operator.operator}</p>
+                            <p className="text-sm text-slate-700">Operator Role: {operator.role}</p>
+                        </CardContent>
+                    </Card>
                     <Card className="flex flex-col mt-8">
                         <CardContent className="pt-6">
                             <Button

libs/components/src/api/operator-context.tsx

@@ -2,6 +2,9 @@ import { createContext } from "react";
 
 export const OperatorContext = createContext({
     operator: null,
+    role: null,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     setOperator: (operator: any) => {},
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    setRole: (role: any) => {},
 });

libs/components/src/forms/operator/auth/login-form.tsx

@@ -7,7 +7,7 @@ import { z } from "zod";
 import { Button } from "../../../ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../../ui/form";
 import { Input } from "../../../ui/input";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { API_URL } from "@trashtrack/utils";
 
 import {
@@ -54,7 +54,7 @@ const formSchema = z.object({
 
 export function LoginForm() {
     const history = useHistory();
-    const { setOperator } = useContext(OperatorContext);
+    const { setOperator, setRole } = useContext(OperatorContext);
     const [isOpen, setIsOpen] = useState(false);
     const { t } = useTranslation();
 
@@ -66,7 +66,13 @@ export function LoginForm() {
         },
     });
 
-    const { mutateAsync } = useMutation({
+    const { data, refetch } = useQuery({
+        queryKey: ["getUserDataLoginForm"],
+        queryFn: () => fetch(API_URL + `/user/username/${form.getValues("username")}`).then((res) => res.json()),
+        enabled: false,
+    });
+
+    const { mutateAsync, isPending } = useMutation({
         mutationKey: ["comparePassword"],
         mutationFn: (values: { username: string; password: string }) => {
             return fetch(API_URL + `/user/compare-password/${values.username}`, {
@@ -78,17 +84,20 @@ export function LoginForm() {
                 body: JSON.stringify({ password: values.password }),
             }).then((res) => res.json());
         },
-        onSuccess: (data) => {
-            if (data.data === true) {
+        onSuccess: (dataMutation) => {
+            if (dataMutation.data === true) {
                 setOperator(form.getValues("username"));
-                history.push("/operator/tabs/dashboard");
+                setRole(data.data.role);
+
+                history.replace("/operator/tabs/dashboard");
             } else {
                 setIsOpen(true);
             }
         },
     });
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
+        refetch();
         await mutateAsync({
             username: values.username,
             password: values.password,
@@ -105,7 +114,12 @@ export function LoginForm() {
                         <FormItem>
                             <FormLabel>Username</FormLabel>
                             <FormControl>
-                                <Input type="text" placeholder="totallynotaopeator123" {...field} />
+                                <Input
+                                    disabled={isPending}
+                                    type="text"
+                                    placeholder="totallynotaopeator123"
+                                    {...field}
+                                />
                             </FormControl>
                             <FormMessage />
                         </FormItem>
@@ -118,18 +132,28 @@ export function LoginForm() {
                         <FormItem>
                             <FormLabel>Password</FormLabel>
                             <FormControl>
-                                <Input type="password" placeholder="totallynotapassword123" {...field} />
+                                <Input
+                                    disabled={isPending}
+                                    type="password"
+                                    placeholder="totallynotapassword123"
+                                    {...field}
+                                />
                             </FormControl>
                             <FormMessage />
                         </FormItem>
                     )}
                 />
 
                 <div className="flex flex-col gap-4">
-                    <Button className="w-full" type="submit">
+                    <Button className="w-full" type="submit" disabled={isPending}>
                         {t("operator.form.login.submit")}
                     </Button>
-                    <Button className="w-full" variant="secondary" onClick={() => history.replace("/tabs/home")}>
+                    <Button
+                        className="w-full"
+                        variant="secondary"
+                        onClick={() => history.replace("/tabs/home")}
+                        disabled={isPending}
+                    >
                         {t("operator.form.login.back")}
                     </Button>
                 </div>