Login, logout and middleware updates

apps/link/app/(main)/_components/ClientOnly.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import { ReactNode } from "react";
 import dynamic from "next/dynamic";
 
-type ClientOnlyProps = { children: JSX.Element };
+type ClientOnlyProps = { children: ReactNode };
 const ClientOnly = (props: ClientOnlyProps) => {
   const { children } = props;
 

apps/link/app/(main)/_components/ZammadWrapper.tsx

@@ -69,7 +69,6 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
   }, [session]);
 
   if (!session || !authenticated) {
-    console.log("Not authenticated");
     return (
       <Box sx={{ width: "100%" }}>
         <Grid
@@ -89,7 +88,6 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
   }
 
   if (session && authenticated) {
-    console.log("Session and authenticated");
     return (
       <Iframe
         id={id}
@@ -102,10 +100,6 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
           const linkElement = document.querySelector(
             `#${id}`,
           ) as HTMLIFrameElement;
-
-          console.log({ path });
-          console.log({ id });
-          console.log({ linkElement });
           if (
             linkElement.contentDocument &&
             linkElement.contentDocument?.querySelector &&

apps/link/app/(main)/logout/page.tsx

@@ -1,9 +1,20 @@
 "use client";
 
+import { useEffect } from "react";
 import { signOut } from "next-auth/react";
 
 export default function Page() {
-  signOut({ callbackUrl: "/login" });
+  useEffect(() => {
+    const multistepSignOut = async () => {
+      const response = await fetch("/api/logout", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        credentials: "same-origin",
+      });
+      signOut({ callbackUrl: "/login" });
+    };
+    multistepSignOut();
+  }, []);
 
   return <div />;
 }

apps/link/app/(main)/overview/[overview]/_components/TicketCreateDialog.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { FC, useState, useEffect } from "react";
-import { useFormState } from "react-dom";
+import { FC, useState, useEffect, useActionState } from "react";
 import { useRouter } from "next/navigation";
 import { Grid } from "@mui/material";
 import {
@@ -44,7 +43,7 @@ export const TicketCreateDialog: FC<TicketCreateDialogProps> = ({
       },
     },
   };
-  const [formState, formAction] = useFormState(
+  const [formState, formAction] = useActionState(
     createTicketAction,
     initialState,
   );

apps/link/app/(main)/overview/[overview]/_components/TicketList.tsx

@@ -65,7 +65,6 @@ export const TicketList: FC<TicketListProps> = ({ title, tickets }) => {
         columns={gridColumns}
         onRowClick={onRowClick}
         getRowID={(row: any) => {
-          console.log({ row });
           return row.internalId;
         }}
         buttons={

apps/link/app/(main)/overview/[overview]/_components/ZammadOverview.tsx

@@ -13,16 +13,18 @@ type ZammadOverviewProps = {
 export const ZammadOverview: FC<ZammadOverviewProps> = ({ name }) => {
   const [tickets, setTickets] = useState([]);
 
-  useEffect(() => {
-    const hash = window?.location?.hash;
+  if (typeof window !== "undefined") {
+    useEffect(() => {
+      const hash = window?.location?.hash;
 
-    if (hash) {
-      const ticketID = hash.replace("#ticket/zoom/", "");
-      if (ticketID && !isNaN(parseInt(ticketID, 10))) {
-        redirect(`/tickets/${ticketID}`);
+      if (hash) {
+        const ticketID = hash.replace("#ticket/zoom/", "");
+        if (ticketID && !isNaN(parseInt(ticketID, 10))) {
+          redirect(`/tickets/${ticketID}`);
+        }
       }
-    }
-  }, [window?.location?.hash]);
+    }, [window?.location?.hash]);
+  }
 
   useEffect(() => {
     const fetchTickets = async () => {

apps/link/app/(main)/setup/_components/Setup.tsx

@@ -8,6 +8,13 @@ import { ZammadWrapper } from "app/(main)/_components/ZammadWrapper";
 export const Setup: FC = () => {
   const router = useRouter();
   useLayoutEffect(() => {
+    const fingerprint = localStorage.getItem("fingerprint");
+    if (!fingerprint || fingerprint === "") {
+      const newFingerprint = `${Math.floor(
+        Math.random() * 100000000,
+      )}`.padStart(8, "0");
+      localStorage.setItem("fingerprint", newFingerprint);
+    }
     setTimeout(() => router.push("/"), 4000);
   }, [router]);
 

apps/link/app/(main)/tickets/[id]/@edit/_components/TicketEdit.tsx

@@ -37,11 +37,6 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
   const [agents, setAgents] = useState<any>();
   const [pendingVisible, setPendingVisible] = useState(false);
 
-  const filteredStates =
-    ticketStates?.filter(
-      (state: any) => !["new", "merged", "removed"].includes(state.label),
-    ) ?? [];
-
   useEffect(() => {
     const fetchAgents = async () => {
       const groupID = formState?.values?.group?.split("/")?.pop();
@@ -96,7 +91,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
         [name]: value,
       },
     });
-    const stateName = filteredStates?.find(
+    const stateName = ticketStates?.find(
       (state: any) => state.id === formState.values.state,
     )?.name;
     setPendingVisible(stateName?.includes("pending") ?? false);
@@ -141,7 +136,7 @@ export const TicketEdit: FC<TicketEditProps> = ({ id }) => {
               label="State"
               formState={formState}
               updateFormState={updateFormState}
-              getOptions={() => filteredStates}
+              getOptions={() => ticketStates}
             />
           </Grid>
           <Grid