chore: standardised the eslint config structure accross the project (#11814)

apps/login/src/components/avatar.tsx

@@ -13,30 +13,21 @@ interface AvatarProps {
 }
 
 export function getInitials(name: string, loginName: string) {
-  let credentials = "";
   if (name) {
     const split = name.split(" ");
-    if (split) {
-      const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
-      credentials = initials;
-    } else {
-      credentials = name.charAt(0);
-    }
-  } else {
-    const username = loginName.split("@")[0];
-    let separator = "_";
-    if (username.includes("-")) {
-      separator = "-";
-    }
-    if (username.includes(".")) {
-      separator = ".";
-    }
-    const split = username.split(separator);
-    const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
-    credentials = initials;
+    return split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
   }
 
-  return credentials;
+  const username = loginName.split("@")[0];
+  let separator = "_";
+  if (username.includes("-")) {
+    separator = "-";
+  }
+  if (username.includes(".")) {
+    separator = ".";
+  }
+  const split = username.split(separator);
+  return split[0].charAt(0) + (split[1] ? split[1].charAt(0) : "");
 }
 
 // Helper function to get avatar roundness from theme

apps/login/src/components/button.tsx

@@ -65,7 +65,6 @@ function getDefaultButtonAppearance(): string {
   return appearance?.button || "border border-button-light-border dark:border-button-dark-border"; // Fallback to flat design
 }
 
-// eslint-disable-next-line react/display-name
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {

apps/login/src/components/card.tsx

@@ -35,7 +35,6 @@ function getDefaultCardStyling(): string {
   return appearance?.card || "shadow-sm border-0"; // Fallback to material design
 }
 
-// eslint-disable-next-line react/display-name
 export const Card = forwardRef<HTMLDivElement, CardProps>(
   (
     {

apps/login/src/components/checkbox.tsx

@@ -26,7 +26,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
             checked={enabled}
             onChange={(event) => {
               setEnabled(event.target?.checked);
-              onChangeVal && onChangeVal(event.target?.checked);
+              if (onChangeVal) onChangeVal(event.target?.checked);
             }}
             disabled={disabled}
             type="checkbox"

apps/login/src/components/copy-to-clipboard.tsx

@@ -17,7 +17,7 @@ export function CopyToClipboard({ value }: Props) {
       const to = setTimeout(setCopied, 1000, false);
       return () => clearTimeout(to);
     }
-  }, [copied]);
+  }, [copied, value]);
 
   return (
     <div className="flex flex-row items-center px-2">

apps/login/src/components/idp-process-handler.tsx

@@ -91,7 +91,7 @@ export function IdpProcessHandler({
         setError(err instanceof Error ? err.message : t("processing.unexpectedError"));
         setLoading(false);
       });
-  }, [provider, id, token, requestId, organization, link, sessionId, postErrorRedirectUrl, router]);
+  }, [provider, id, token, requestId, organization, link, sessionId, linkFingerprint, postErrorRedirectUrl, router, t]);
 
   return (
     <div className="flex min-h-screen items-center justify-center">

apps/login/src/components/input.tsx

@@ -37,7 +37,6 @@ function getDefaultInputRoundness(): string {
   return getComponentRoundness("input");
 }
 
-// eslint-disable-next-line react/display-name
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {

apps/login/src/components/register-passkey.tsx

@@ -11,7 +11,7 @@ import { Button, ButtonVariants } from "./button";
 import { Spinner } from "./spinner";
 import { Translated } from "./translated";
 
-type Inputs = {};
+type Inputs = Record<string, never>;
 
 type Props = {
   sessionId?: string;
@@ -44,6 +44,35 @@ export function RegisterPasskey({
 
   const router = useRouter();
 
+  const continueAndLogin = useCallback(
+    (loginName?: string) => {
+      const params = new URLSearchParams();
+
+      if (organization) {
+        params.set("organization", organization);
+      }
+
+      if (requestId) {
+        params.set("requestId", requestId);
+      }
+
+      if (sessionId) {
+        params.set("sessionId", sessionId);
+      }
+
+      if (userId) {
+        params.set("userId", userId);
+      }
+
+      if (loginName ?? initialLoginName) {
+        params.set("loginName", loginName ?? initialLoginName ?? "");
+      }
+
+      router.push("/passkey?" + params);
+    },
+    [organization, requestId, sessionId, userId, initialLoginName, router],
+  );
+
   async function submitVerify(
     passkeyId: string,
     passkeyName: string,
@@ -166,7 +195,7 @@ export function RegisterPasskey({
     }
 
     continueAndLogin(verificationResponse.loginName);
-  }, [sessionId, userId, code]);
+  }, [sessionId, userId, code, codeId, continueAndLogin]);
 
   // Auto-submit when code is provided (similar to VerifyForm)
   useEffect(() => {
@@ -175,32 +204,6 @@ export function RegisterPasskey({
     }
   }, [code, submitRegisterAndContinue]);
 
-  function continueAndLogin(loginName?: string) {
-    const params = new URLSearchParams();
-
-    if (organization) {
-      params.set("organization", organization);
-    }
-
-    if (requestId) {
-      params.set("requestId", requestId);
-    }
-
-    if (sessionId) {
-      params.set("sessionId", sessionId);
-    }
-
-    if (userId) {
-      params.set("userId", userId);
-    }
-
-    if (loginName ?? initialLoginName) {
-      params.set("loginName", loginName ?? initialLoginName ?? "");
-    }
-
-    router.push("/passkey?" + params);
-  }
-
   return (
     <form className="w-full">
       {error && (

apps/login/src/components/sessions-clear-list.tsx

@@ -4,7 +4,7 @@ import { clearSession } from "@/lib/server/session";
 import { timestampDate } from "@zitadel/client";
 import { Session } from "@zitadel/proto/zitadel/session/v2/session_pb";
 import { redirect, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Alert, AlertType } from "./alert";
 import { SessionClearItem } from "./session-clear-item";
 import { Translated } from "./translated";
@@ -20,7 +20,7 @@ export function SessionsClearList({ sessions, logoutHint, postLogoutRedirectUri,
   const [list, setList] = useState<Session[]>(sessions);
   const router = useRouter();
 
-  async function clearHintedSession() {
+  const clearHintedSession = useCallback(async () => {
     console.log("Clearing session for login hint:", logoutHint);
     // If a login hint is provided, we logout that specific session
     const sessionIdToBeCleared = sessions.find((session) => {
@@ -53,13 +53,13 @@ export function SessionsClearList({ sessions, logoutHint, postLogoutRedirectUri,
     } else {
       console.warn(`No session found for login hint: ${logoutHint}`);
     }
-  }
+  }, [logoutHint, sessions, postLogoutRedirectUri, organization, router]);
 
   useEffect(() => {
     if (logoutHint) {
       clearHintedSession();
     }
-  }, []);
+  }, [logoutHint, clearHintedSession]);
 
   return sessions ? (
     <div className="flex flex-col space-y-2">

apps/login/src/components/username-form.tsx

@@ -5,7 +5,7 @@ import { sendLoginname } from "@/lib/server/loginname";
 import { LoginSettings } from "@zitadel/proto/zitadel/settings/v2/login_settings_pb";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { Alert } from "./alert";
 import { AutoSubmitForm } from "./auto-submit-form";
@@ -55,34 +55,37 @@ export function UsernameForm({
   const [error, setError] = useState<string>("");
   const [samlData, setSamlData] = useState<{ url: string; fields: Record<string, string> } | null>(null);
 
-  async function submitLoginName(values: Inputs, organization?: string) {
-    setLoading(true);
+  const submitLoginName = useCallback(
+    async (values: Inputs, organization?: string) => {
+      setLoading(true);
 
-    try {
-      const res = await sendLoginname({
-        loginName: values.loginName,
-        organization,
-        defaultOrganization,
-        requestId,
-        suffix,
-        ignoreUnknownUsernames: loginSettings?.ignoreUnknownUsernames,
-      });
+      try {
+        const res = await sendLoginname({
+          loginName: values.loginName,
+          organization,
+          defaultOrganization,
+          requestId,
+          suffix,
+          ignoreUnknownUsernames: loginSettings?.ignoreUnknownUsernames,
+        });
 
-      handleServerActionResponse(res, router, setSamlData, setError);
-      return res;
-    } catch {
-      setError(t("errors.internalError"));
-    } finally {
-      setLoading(false);
-    }
-  }
+        handleServerActionResponse(res, router, setSamlData, setError);
+        return res;
+      } catch {
+        setError(t("errors.internalError"));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [defaultOrganization, requestId, suffix, loginSettings, router, t],
+  );
 
   useEffect(() => {
     if (submit && loginName) {
       // When we navigate to this page, we always want to be redirected if submit is true and the parameters are valid.
       submitLoginName({ loginName }, organization);
     }
-  }, []);
+  }, [submit, loginName, organization, submitLoginName]);
 
   let inputLabel = t("labels.loginname");
   if (loginSettings?.disableLoginWithEmail && loginSettings?.disableLoginWithPhone) {

apps/login/src/components/verify-form.tsx

@@ -101,7 +101,7 @@ export function VerifyForm({ userId, loginName, organization, requestId, code, i
         setLoading(false);
       }
     },
-    [isInvite, userId],
+    [isInvite, userId, loginName, organization, requestId, router, t],
   );
 
   useEffect(() => {