diff --git a/admin/core/components/authentication/auth-banner.tsx b/admin/core/components/authentication/auth-banner.tsx new file mode 100644 index 000000000..191d7a0a7 --- /dev/null +++ b/admin/core/components/authentication/auth-banner.tsx @@ -0,0 +1,29 @@ +import { FC } from "react"; +import { Info, X } from "lucide-react"; +// helpers +import { TAuthErrorInfo } from "@/helpers/authentication.helper"; + +type TAuthBanner = { + bannerData: TAuthErrorInfo | undefined; + handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void; +}; + +export const AuthBanner: FC = (props) => { + const { bannerData, handleBannerData } = props; + + if (!bannerData) return <>; + return ( +
+
+ +
+
{bannerData?.message}
+
handleBannerData && handleBannerData(undefined)} + > + +
+
+ ); +}; diff --git a/admin/core/components/authentication/index.ts b/admin/core/components/authentication/index.ts index 2c13b7728..d189a727b 100644 --- a/admin/core/components/authentication/index.ts +++ b/admin/core/components/authentication/index.ts @@ -1,3 +1,4 @@ +export * from "./auth-banner"; export * from "./email-config-switch"; export * from "./password-config-switch"; export * from "./authentication-method-card"; diff --git a/admin/core/components/login/sign-in-form.tsx b/admin/core/components/login/sign-in-form.tsx index 30d7011e7..aa67d4936 100644 --- a/admin/core/components/login/sign-in-form.tsx +++ b/admin/core/components/login/sign-in-form.tsx @@ -8,8 +8,16 @@ import { Button, Input, Spinner } from "@plane/ui"; // components import { Banner } from "@/components/common"; // helpers +import { + authErrorHandler, + EAuthenticationErrorCodes, + EErrorAlertType, + TAuthErrorInfo, +} from "@/helpers/authentication.helper"; + import { API_BASE_URL } from "@/helpers/common.helper"; import { AuthService } from "@/services/auth.service"; +import { AuthBanner } from "../authentication"; // ui // icons @@ -53,6 +61,7 @@ export const InstanceSignInForm: FC = (props) => { const [csrfToken, setCsrfToken] = useState(undefined); const [formData, setFormData] = useState(defaultFromData); const [isSubmitting, setIsSubmitting] = useState(false); + const [errorInfo, setErrorInfo] = useState(undefined); const handleFormChange = (key: keyof TFormData, value: string | boolean) => setFormData((prev) => ({ ...prev, [key]: value })); @@ -91,6 +100,15 @@ export const InstanceSignInForm: FC = (props) => { [formData.email, formData.password, isSubmitting] ); + useEffect(() => { + if (errorCode) { + const errorDetail = authErrorHandler(errorCode?.toString() as EAuthenticationErrorCodes); + if (errorDetail) { + setErrorInfo(errorDetail); + } + } + }, [errorCode]); + return (
@@ -103,7 +121,11 @@ export const InstanceSignInForm: FC = (props) => {

- {errorData.type && errorData?.message && } + {errorData.type && errorData?.message ? ( + + ) : ( + <>{errorInfo && setErrorInfo(value)} />} + )}