@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/forms/Login/TMLoginForm.js

@@ -0,0 +1,737 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { AppModules, AuthenticationModes, CultureIDs, LocalStorageService, SDK_Globals, SDK_Localizator, SessionDescriptor, TopMediaServer, TopMediaSession } from "@topconsultnpm/sdk-ts";
+import deMessages from "devextreme/localization/messages/de.json";
+import enMessages from "devextreme/localization/messages/en.json";
+import esMessages from "devextreme/localization/messages/es.json";
+import frMessages from "devextreme/localization/messages/fr.json";
+import itMessages from "devextreme/localization/messages/it.json";
+import ptMessages from "devextreme/localization/messages/pt.json";
+import { locale as dxlocale, loadMessages } from "devextreme/localization";
+import styled from "styled-components";
+import Menu from "./Menu";
+import TextBox from "./TextBox";
+import Chooser from "./Chooser";
+import SelectBox from "./SelectBox";
+import six from '../../../assets/six.png';
+import it from '../../../assets/italy.svg';
+import en from '../../../assets/united-kingdom.svg';
+import es from '../../../assets/spain.svg';
+import fr from '../../../assets/france.svg';
+import de from '../../../assets/german.svg';
+import pt from '../../../assets/portugal.svg';
+import OTPReader from "./OTPReader";
+import ChangePassword from "./ChangePassword";
+import RecoverPasswordFlow from "./RecoverPasswordFlow";
+import RapidAccessLogin from "./RapidAccessLogin";
+import { LoginValidator } from "./LoginValidatorService";
+import { LOGINLocalizator } from "./LOGINLocalizator";
+import { TMAboutApp } from "../../sidebar/TMAboutApp";
+import { SDKUI_Localizator, IconWifi, IconRefresh, IconInfo, IconAccessPoint, IconArchiveDoc, IconLogin, IconWeb, IconArrowLeft, IconUser, IconPassword } from "../../../helper";
+import { TMColors } from "../../../utils/theme";
+import ShowAlert from "../../base/TMAlert";
+import TMButton from "../../base/TMButton";
+import { useDeviceType, DeviceType } from "../../base/TMDeviceProvider";
+import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from "../../base/TMPopUp";
+import TMSpinner from "../../base/TMSpinner";
+import TMTooltip from "../../base/TMTooltip";
+import TMCheckBox from "../../editors/TMCheckBox";
+export var WindowHeight;
+(function (WindowHeight) {
+    WindowHeight["SMALL"] = "sm";
+    WindowHeight["MEDIUM"] = "md";
+    WindowHeight["LARGE"] = "lg";
+})(WindowHeight || (WindowHeight = {}));
+export const onChangeLanguage = (cultureID) => {
+    //localizzazione devexpress
+    switch (cultureID) {
+        case CultureIDs.De_DE:
+            dxlocale("de");
+            break;
+        case CultureIDs.Es_ES:
+            dxlocale("es");
+            break;
+        case CultureIDs.Fr_FR:
+            dxlocale("fr");
+            break;
+        case CultureIDs.It_IT:
+            dxlocale("it");
+            break;
+        case CultureIDs.Pt_PT:
+            dxlocale("pt");
+            break;
+        default:
+            dxlocale("en");
+            break;
+    }
+    SDKUI_Localizator.setLanguage(cultureID);
+    SDK_Localizator.setLanguage(cultureID);
+    LOGINLocalizator.setLanguage(cultureID);
+};
+export const useCultureID = ({ cultureID = CultureIDs.It_IT }) => {
+    const [currentCultureID, setCurrentCultureID] = useState(cultureID);
+    useEffect(() => {
+        onChangeLanguage(cultureID);
+        setCurrentCultureID(cultureID);
+    }, [cultureID]);
+    useEffect(() => {
+        loadMessages(deMessages);
+        loadMessages(enMessages);
+        loadMessages(esMessages);
+        loadMessages(frMessages);
+        loadMessages(itMessages);
+        loadMessages(ptMessages);
+    }, []);
+    return (currentCultureID);
+};
+export const cultureIDsDataSource = [{ value: CultureIDs.It_IT, display: "Italiano" }, { value: CultureIDs.Fr_FR, display: "Française" }, { value: CultureIDs.Pt_PT, display: "Português" }, { value: CultureIDs.En_US, display: "English" }, { value: CultureIDs.Es_ES, display: "Español" }, { value: CultureIDs.De_DE, display: "Deutsch" },];
+const TMLoginForm = (props) => {
+    const LOCAL_STORAGE_KEY = 'LOGIN_HISTORY';
+    const BANNER_DIMENSION = 25;
+    const deviceType = useDeviceType();
+    const isMobile = useMemo(() => {
+        return deviceType === DeviceType.MOBILE;
+    }, [deviceType]);
+    const isDesktop = useMemo(() => {
+        return deviceType === DeviceType.DESKTOP;
+    }, [deviceType]);
+    const isTablet = useMemo(() => {
+        return deviceType === DeviceType.TABLET;
+    }, [deviceType]);
+    let localRa = LocalStorageService.getItem(LOCAL_STORAGE_KEY);
+    const authDomainRef = useRef(null);
+    const usernameRef = useRef(null);
+    const passwordRef = useRef(null);
+    const usernameOnBehalfOfRef = useRef(null);
+    const passwordOnBehalfOfRRef = useRef(null);
+    const [loginStep, setLoginStep] = useState(1);
+    const [tmServer, setTmServer] = useState();
+    const [tmSession, setTmSession] = useState();
+    const [endpoint, setEndpoint] = useState();
+    const [showCultureIDs, setShowCultureIDs] = useState(false);
+    const [dcmtArchives, setDcmtArchives] = useState([]);
+    const [dcmtArchive, setDcmtArchive] = useState();
+    const [authMode, setAuthMode] = useState(AuthenticationModes.TopMedia);
+    const [username, setUsername] = useState('SysAdmin');
+    const [password, setPassword] = useState('');
+    const [authDomain, setAuthDomain] = useState('');
+    const [usernameOnBehalf, setUsernameOnBehalf] = useState('');
+    const [passwordOnBehalf, setPasswordOnBehalf] = useState('');
+    const [showChangePassword, setShowChangePassword] = useState(false);
+    const [showForgetPassword, setShowForgetPassword] = useState(false);
+    const [showRapidAccess, setShowRapidAccess] = useState(false);
+    const [otpCode, setOtpCode] = useState(['', '', '', '', '', '']);
+    const [saveLoginEnable, setSaveLoginEnable] = useState(false);
+    const [saveLoginName, setSaveLoginName] = useState('');
+    const [isSuccess, setIsSuccess] = useState(true);
+    const [isOTPSent, setIsOTPSent] = useState(false);
+    const [showDefaultLogo, setShowDefaultLogo] = useState(true);
+    const loginData = useMemo(() => {
+        return {
+            authenticationMode: authMode,
+            cultureID: props.cultureID ?? CultureIDs.It_IT,
+            dcmtArchive: dcmtArchive,
+            endpoint: endpoint,
+            authDomain: authDomain,
+            authDomainOnBehalfOf: authDomain,
+            otp: otpCode.join(''),
+            password: password,
+            passwordOnBehalfOf: passwordOnBehalf,
+            rapidAccessName: saveLoginName,
+            saveAsRapidAccess: saveLoginEnable,
+            username: username,
+            usernameOnBehalfOf: usernameOnBehalf
+        };
+    }, [authMode, props.cultureID, dcmtArchive, endpoint, authDomain, otpCode, password, passwordOnBehalf, saveLoginName, saveLoginEnable, username, usernameOnBehalf]);
+    const inputRefs = useMemo(() => {
+        switch (authMode) {
+            case AuthenticationModes.TopMedia:
+            case AuthenticationModes.TopMediaWithMFA: return [usernameRef, passwordRef];
+            case AuthenticationModes.WindowsThroughTopMedia: return [authDomainRef, usernameRef, passwordRef];
+            case AuthenticationModes.TopMediaOnBehalfOf: return [usernameRef, passwordRef, authDomainRef, usernameOnBehalfOfRef, passwordOnBehalfOfRRef];
+            default: return [];
+        }
+    }, [authMode]);
+    const hasSingleOption = useMemo(() => {
+        return (props.endpoints.length === 1 && dcmtArchives.length === 1);
+    }, [dcmtArchives, props.endpoints]);
+    useEffect(() => {
+        if (props.isConnector) {
+            setShowDefaultLogo(true);
+            return;
+        }
+        fetch('logo-custom.svg', { method: 'HEAD' })
+            .then(res => {
+            const isSvg = res.headers.get('Content-Type')?.includes('image/svg');
+            if (res.ok && isSvg) {
+                setShowDefaultLogo(false);
+            }
+            else {
+                setShowDefaultLogo(true);
+            }
+        })
+            .catch(() => setShowDefaultLogo(true));
+    }, [props.isConnector]);
+    useEffect(() => {
+        const checkRefsReady = () => inputRefs.every(ref => ref?.current);
+        if (!checkRefsReady()) {
+            const interval = setInterval(() => {
+                if (checkRefsReady()) {
+                    clearInterval(interval);
+                    const firstEmpty = inputRefs.find(input => input?.current?.value === '');
+                    firstEmpty?.current?.focus();
+                }
+            }, 100);
+            return () => clearInterval(interval);
+        }
+        else {
+            const firstEmpty = inputRefs.find(input => input?.current?.value === '');
+            firstEmpty?.current?.focus();
+        }
+        return () => { };
+    }, [inputRefs]);
+    useEffect(() => {
+        if (props.sdInput) {
+            if (props.sdInput.userName)
+                setUsername(props.sdInput.userName);
+        }
+    }, []);
+    useEffect(() => {
+        if (!hasSingleOption)
+            return;
+        setLoginStep(2);
+    }, [hasSingleOption]);
+    useEffect(() => { if (loginStep === 1) {
+        setShowCultureIDs(false);
+    } }, [loginStep]);
+    useEffect(() => {
+        if (isSuccess)
+            return;
+        setDcmtArchives([]);
+        setDcmtArchive(undefined);
+    }, [isSuccess]);
+    useEffect(() => {
+        let preferredRapidAccess = localRa?.find(ar => ar.preferred === true);
+        if (preferredRapidAccess) {
+            handleRapidAccessSelection(preferredRapidAccess);
+            return;
+        }
+        if (props.endpoints.length === 1) {
+            setEndpoint(props.endpoints[0]);
+            return;
+        }
+        if (!props.endpoints.find(ep => ep.isDefault === 1))
+            return;
+        setEndpoint(props.endpoints.find(ep => ep.isDefault === 1));
+    }, [props.endpoints]);
+    useEffect(() => {
+        setTmServer(new TopMediaServer(endpoint?.URL));
+    }, [endpoint]);
+    useEffect(() => {
+        if (!tmServer)
+            return;
+        setTmSession(new TopMediaSession(tmServer));
+    }, [tmServer]);
+    useEffect(() => {
+        getArchivesAsync();
+    }, [tmSession]);
+    useEffect(() => {
+        if (!saveLoginEnable || !dcmtArchive)
+            return;
+        setSaveLoginName(dcmtArchive?.description + ' - ' + username);
+    }, [saveLoginEnable, dcmtArchive, username]);
+    const validators = LoginValidator.validate(loginData);
+    const fieldValidations = useCallback((key) => {
+        return validators.fieldValidations.get(key) ?? [];
+    }, [validators]);
+    const accessPointChooserColumns = useMemo(() => [
+        { caption: "Descrizione", field: "Description" },
+        { caption: "URL", field: "URL" },
+        { caption: "Default", field: "isDefault", type: "boolean" }
+    ], []);
+    const dcmtArchiveChooserColumns = useMemo(() => [
+        { caption: "ID", field: "id" },
+        { caption: "Descrizione", field: "description" },
+        { caption: "Default", field: "isDefault", type: "boolean" }
+    ], []);
+    const authModeOptions = useMemo(() => {
+        return [{ value: AuthenticationModes.TopMedia, display: 'TopMedia' },
+            { value: AuthenticationModes.TopMediaWithMFA, display: LOGINLocalizator.TopMediaWithMFA },
+            { value: AuthenticationModes.TopMediaOnBehalfOf, display: SDKUI_Localizator.AuthMode_OnBehalfOf },
+            { value: AuthenticationModes.WindowsThroughTopMedia, display: SDKUI_Localizator.AuthMode_WindowsViaTopMedia },
+            { value: AuthenticationModes.MSAzure, display: 'MSAzure' }];
+    }, [props.cultureID]);
+    const accessPointAdditionalIcons = useMemo(() => {
+        return [
+            { icon: _jsx(IconWifi, {}), onClick: async () => pingAsync(endpoint), tooltip: 'Ping' },
+            { icon: _jsx(IconRefresh, { fontSize: 20 }), onClick: async () => getArchivesAsync(), tooltip: SDKUI_Localizator.Refresh, visible: !isSuccess }
+        ];
+    }, [endpoint, isSuccess]);
+    const showPasswordOperations = useMemo(() => {
+        return loginStep === 2 && (authMode === AuthenticationModes.TopMedia || authMode === AuthenticationModes.TopMediaWithMFA || authMode === AuthenticationModes.TopMediaOnBehalfOf);
+    }, [authMode, loginStep]);
+    const disablePasswordOperations = useMemo(() => {
+        return (username.length === 0 || !dcmtArchive || !endpoint);
+    }, [username, dcmtArchive, endpoint]);
+    const showLoginBtn = useMemo(() => {
+        if (loginStep === 1)
+            return false;
+        if (loginStep === 2 && authMode === AuthenticationModes.TopMediaWithMFA)
+            return false;
+        return true;
+    }, [loginStep, authMode]);
+    const showContinueBtn = useMemo(() => {
+        if (loginStep === 3)
+            return false;
+        if (loginStep === 2 && authMode !== AuthenticationModes.TopMediaWithMFA)
+            return false;
+        return true;
+    }, [loginStep, authMode]);
+    const showBackBtn = useMemo(() => {
+        return loginStep !== 1;
+    }, [loginStep]);
+    const windowHeight = useMemo(() => {
+        let currentHeight = window.innerHeight;
+        if (!currentHeight)
+            return WindowHeight.LARGE;
+        if (currentHeight > 730)
+            return WindowHeight.LARGE;
+        if (currentHeight <= 730 && currentHeight > 680)
+            return WindowHeight.MEDIUM;
+        return WindowHeight.SMALL;
+    }, []);
+    const disableContinueBtn = useMemo(() => {
+        switch (loginStep) {
+            case 1: return fieldValidations('endpoint').length > 0 || fieldValidations('dcmtArchive').length > 0;
+            case 2: return fieldValidations('authenticationMode').length > 0 || fieldValidations('username').length > 0 || fieldValidations('password').length > 0;
+            default: return false;
+        }
+    }, [loginStep, validators]);
+    const disableLoginBtn = useMemo(() => {
+        return validators.totalValidationItems.length > 0;
+    }, [validators]);
+    const changePswTmSession = useMemo(() => {
+        let tmServer = new TopMediaServer(endpoint?.URL);
+        let tmSession = tmServer.NewSession();
+        let sd = new SessionDescriptor();
+        sd.userName = username;
+        sd.accessToken = "CHANGEPSWTOKEN";
+        sd.archiveID = dcmtArchive?.id;
+        tmSession.SessionDescr = sd;
+        return tmSession;
+    }, [endpoint, username, dcmtArchive]);
+    const nextStepHandler = async () => {
+        if (!endpoint || !dcmtArchive)
+            return;
+        if (loginStep === 1) {
+            setLoginStep(2);
+        }
+        if (loginStep === 2 && authMode === AuthenticationModes.TopMediaWithMFA) {
+            try {
+                await loginForMFAAsync(3);
+            }
+            catch (e) {
+                TMExceptionBoxManager.show({ exception: e });
+                return;
+            }
+        }
+        if (loginStep === 3)
+            return;
+    };
+    const loginHandler = async () => {
+        if (saveLoginEnable)
+            await handleRapidAccessCreate();
+        else
+            await loginAsync();
+    };
+    const previousStepHandler = useCallback(() => {
+        if (loginStep === 1)
+            return;
+        setLoginStep(prev => prev - 1);
+    }, [loginStep]);
+    const getArchivesAsync = async () => {
+        if (!tmSession)
+            return;
+        setIsSuccess(true);
+        try {
+            TMSpinner.show({ description: '' });
+            let archives = tmSession.TopMediaServer.BaseAddress && await tmSession.NewArchiveEngine().RetrieveAllAsync();
+            if (!archives)
+                return;
+            setDcmtArchives(archives);
+            if (archives.length === 1) {
+                setDcmtArchive(archives[0]);
+                return;
+            }
+            !dcmtArchive && setDcmtArchive(archives.find(arch => arch.isDefault === 1));
+        }
+        catch (e) {
+            setIsSuccess(false);
+            return TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const pingAsync = async (endpoint) => {
+        const server = new TopMediaServer(endpoint.URL);
+        try {
+            TMSpinner.show();
+            TMMessageBoxManager.show({ title: 'Ping', message: (await server?.PingAsync())?.toString(), buttons: [ButtonNames.OK] });
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    async function loginAsync() {
+        TMSpinner.show();
+        try {
+            const sdInput = {
+                authenticationMode: authMode,
+                appModuleID: props.appModule,
+                archiveID: dcmtArchive?.id,
+                description: dcmtArchive?.description,
+                userName: username,
+                password: password,
+                cultureID: props.cultureID,
+                domain: authMode === AuthenticationModes.WindowsThroughTopMedia ? authDomain : '',
+                otp: loginStep === 3 && authMode === AuthenticationModes.TopMediaWithMFA ? parseInt(otpCode.join('')) : undefined,
+                onBehalfOf: {
+                    domain: authMode === AuthenticationModes.TopMediaOnBehalfOf ? authDomain : '',
+                    userName: authMode === AuthenticationModes.TopMediaOnBehalfOf ? usernameOnBehalf : '',
+                    password: authMode === AuthenticationModes.TopMediaOnBehalfOf ? passwordOnBehalf : ''
+                }
+            };
+            let tmServer = new TopMediaServer(endpoint?.URL);
+            let tmSession = tmServer.NewSession();
+            await tmSession.LoginAsync(sdInput);
+            switch (props.appModule) {
+                case AppModules.DESIGNER:
+                case AppModules.ORCHESTRATOR:
+                case AppModules.SURFER:
+                    try {
+                        SDK_Globals.license = await tmSession.NewLicenseEngine().RetrieveAsync();
+                    }
+                    catch (e) {
+                        TMExceptionBoxManager.show({ title: LOGINLocalizator.LicenseLoadingError, exception: e });
+                    }
+                    break;
+            }
+            props.onLogged(tmSession);
+            return true;
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+            return false;
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }
+    async function loginForMFAAsync(otp) {
+        try {
+            TMSpinner.show();
+            const sdInput = {
+                authenticationMode: authMode,
+                appModuleID: props.appModule,
+                archiveID: dcmtArchive?.id,
+                description: dcmtArchive?.description,
+                userName: username,
+                password: password,
+                cultureID: props.cultureID,
+                domain: authDomain,
+                otp: otp
+            };
+            let tmServer = new TopMediaServer(endpoint?.URL);
+            let tmSession = tmServer.NewSession();
+            await tmSession.LoginAsync(sdInput);
+            if (otp === 1) {
+                ShowAlert({ message: LOGINLocalizator.OtpCodeSent, mode: 'success', duration: 5000, title: 'OTP' });
+                setIsOTPSent(true);
+            }
+            if (otp === 2) {
+                TMMessageBoxManager.show({ buttons: [ButtonNames.OK], message: SDK_Globals.tmSession?.SessionDescr?.customData2, title: LOGINLocalizator.ConfigureAuthenticator });
+            }
+            if (otp === 3) {
+                setLoginStep(3);
+            }
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }
+    const getCultureIDImg = useCallback(() => {
+        switch (props.cultureID) {
+            case CultureIDs.En_US: return en;
+            case CultureIDs.De_DE: return de;
+            case CultureIDs.Es_ES: return es;
+            case CultureIDs.Fr_FR: return fr;
+            case CultureIDs.Pt_PT: return pt;
+            default: return it;
+        }
+    }, [props.cultureID]);
+    const cultureIDHandler = useCallback((CID) => {
+        if (!props.onChangeLanguage)
+            return;
+        props.onChangeLanguage(CID);
+        setShowCultureIDs(false);
+    }, [props.onChangeLanguage]);
+    const handleDigitChange = (index, value) => {
+        const updated = [...otpCode];
+        updated[index] = value;
+        setOtpCode(updated);
+    };
+    const handleFullChange = (newDigits) => {
+        setOtpCode(newDigits.slice(0, 6));
+    };
+    const handleRapidAccessSelection = (ra) => {
+        if (!ra)
+            return;
+        setEndpoint(ra.endpoint);
+        setDcmtArchive(ra.archive);
+        setAuthMode(ra.authenticationMode);
+        setUsername(ra.username);
+        setAuthDomain(ra.domain.length > 0 ? ra.domain : ra.domainAlternative);
+        setUsernameOnBehalf(ra.onBehalfUsername);
+        cultureIDHandler(ra.language);
+        setLoginStep(2);
+    };
+    const handleRapidAccessCreate = async () => {
+        if (!saveLoginEnable)
+            return;
+        let ra = LocalStorageService.getItem(LOCAL_STORAGE_KEY);
+        if (!ra) {
+            ra = [];
+        }
+        ; //NOSONAR
+        let maxId = ra.length > 0
+            ? ra.reduce((max, obj) => (obj.id > max.id ? obj : max), ra[0]).id //NOSONAR
+            : 0;
+        let loginToBeSaved = {
+            archive: dcmtArchive,
+            authenticationMode: authMode,
+            domain: authMode === AuthenticationModes.WindowsThroughTopMedia ? authDomain : '',
+            domainAlternative: authMode === AuthenticationModes.TopMediaOnBehalfOf ? authDomain : '',
+            endpoint: endpoint,
+            id: maxId + 1,
+            language: props.cultureID ?? CultureIDs.It_IT,
+            name: saveLoginName,
+            onBehalfUsername: usernameOnBehalf,
+            preferred: false,
+            username: username
+        };
+        if (ra.find(rapidAccess => rapidAccess.name === saveLoginName)) {
+            let existedRapidAccessIndex = ra.findIndex(rapidAccess => rapidAccess.name === saveLoginName);
+            TMMessageBoxManager.show({
+                buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+                message: LOGINLocalizator.QuickAccessExistsReplace,
+                title: LOGINLocalizator.QuickAccessExists,
+                onButtonClick(e) {
+                    (async () => {
+                        switch (e) {
+                            case ButtonNames.CANCEL: return;
+                            case ButtonNames.NO:
+                                await loginAsync();
+                                return;
+                            default: {
+                                const success = await loginAsync();
+                                if (success) {
+                                    ra[existedRapidAccessIndex] = loginToBeSaved;
+                                    LocalStorageService.setItem(LOCAL_STORAGE_KEY, ra);
+                                }
+                            }
+                        }
+                    })();
+                }
+            });
+            return;
+        }
+        const success = await loginAsync();
+        if (success) {
+            ra.push(loginToBeSaved);
+            LocalStorageService.setItem(LOCAL_STORAGE_KEY, ra);
+        }
+    };
+    const showVersionPopup = () => {
+        TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: false }) });
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                if (showContinueBtn && !disableContinueBtn) {
+                    nextStepHandler();
+                }
+                else if (showLoginBtn && !disableLoginBtn) {
+                    loginHandler();
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [showContinueBtn, disableContinueBtn, showLoginBtn, disableLoginBtn, nextStepHandler, loginHandler]);
+    const welcomeAppName = useMemo(() => {
+        switch (SDK_Globals.appModule) {
+            case AppModules.ORCHESTRATOR: return AppModules.ORCHESTRATOR;
+            case AppModules.DESIGNER: return AppModules.DESIGNER;
+            default: return AppModules.SURFER;
+        }
+    }, [SDK_Globals.appModule]);
+    const welcomeAppNameHeader = useMemo(() => {
+        switch (SDK_Globals.appModule) {
+            case AppModules.EXCEL_CONNECTOR: return 'ExcelConnector';
+            case AppModules.WORD_CONNECTOR: return 'WordConnector';
+            case AppModules.OUTLOOK_CONNECTOR: return 'OutlookConnector';
+            case AppModules.POWERPOINT_CONNECTOR: return 'PowerPointConnector';
+            default: return SDK_Globals.appModule;
+        }
+    }, [SDK_Globals.appModule]);
+    return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, "$isConnector": props.isConnector ?? false, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + welcomeAppNameHeader + ' ' + 'v.' + SDK_Globals.appVersion }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsx(StyledOverlay, { "$isMobile": isMobile, children: _jsx(StyledCustomLogo, { style: { backgroundImage: `url(${showDefaultLogo ? 'logo-default.svg' : 'logo-custom.svg'})` } }) }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [((((getDeviceType() === 'desktop' || isDesktop || isTablet) && windowHeight !== WindowHeight.SMALL)) && !isMobile) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsx(StyledLogo, { children: _jsx("img", { src: six, alt: "six", height: 50 }) }), _jsx(StyledWelcomeText, { children: welcomeAppName })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
+                                        _jsxs(StyledStepContainer, { "$deviceType": deviceType, children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), _jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })] }), loginStep === 2 &&
+                                        _jsxs(_Fragment, { children: [_jsxs(StyledSummaryContainer, { style: {
+                                                        display: 'flex',
+                                                        justifyContent: 'center',
+                                                        alignItems: 'center',
+                                                        flexWrap: 'wrap',
+                                                        gap: '10px',
+                                                        marginBottom: windowHeight === WindowHeight.SMALL ? '30px' : '25px',
+                                                        width: '100%',
+                                                        minHeight: '15px'
+                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive?.description ?? '', children: _jsx("p", { children: dcmtArchive?.description && dcmtArchive.description.length > 20 ? dcmtArchive.description.substring(0, 20) + '...' : dcmtArchive?.description }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                                                                    _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
+                                                            _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] })] }), loginStep === 3 &&
+                                        _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
+                                                        _jsx(TMButton, { btnStyle: 'text', caption: LOGINLocalizator.SetupAuthenticator, showTooltip: false, onClick: async () => await loginForMFAAsync(2), color: 'success' }, 0),
+                                                        _jsx(TMButton, { btnStyle: 'text', disabled: isOTPSent, caption: LOGINLocalizator.SendOtpByEmail, showTooltip: false, onClick: async () => await loginForMFAAsync(1), color: 'primary' }, 1),
+                                                    ] }), _jsx(StyledRapidAccessWrapper, { "$isMobile": isMobile, children: _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) }) })] }), _jsxs(StyledButtonContainer, { "$windowHeight": windowHeight, children: [showContinueBtn && _jsx(TMButton, { fontSize: "1.2rem", onClick: nextStepHandler, showTooltip: false, caption: LOGINLocalizator.Continue, disabled: disableContinueBtn }), showLoginBtn && _jsx(TMButton, { fontSize: "1.2rem", showTooltip: false, onClick: loginHandler, caption: saveLoginEnable ? SDKUI_Localizator.SaveAndLogin : SDKUI_Localizator.Login, disabled: disableLoginBtn })] })] }), showPasswordOperations && _jsx(StyledForgetPassword, { "$isMobile": isMobile, children: _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "text", caption: SDKUI_Localizator.ForgetPassword, showTooltip: false, onClick: () => setShowForgetPassword(true) }) }), showBackBtn && _jsx(StyledBackButton, { children: _jsx(TMButton, { onClick: previousStepHandler, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) }), showCultureIDs && _jsx(Menu, { onClose: () => setShowCultureIDs(false), x: 'calc(100% - 250px)', y: 50, visible: showCultureIDs, children: _jsxs(StyledMenuItemContainer, { children: [_jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.It_IT), title: cultureIDsDataSource[0].display, src: it, alt: "it", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.En_US), title: cultureIDsDataSource[3].display, src: en, alt: "en", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Fr_FR), title: cultureIDsDataSource[1].display, src: fr, alt: "fr", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Es_ES), title: cultureIDsDataSource[4].display, src: es, alt: "es", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Pt_PT), title: cultureIDsDataSource[2].display, src: pt, alt: "pt", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.De_DE), title: cultureIDsDataSource[5].display, src: de, alt: "de", width: BANNER_DIMENSION, height: BANNER_DIMENSION })] }) }), showChangePassword && _jsx(ChangePassword, { tmSession: changePswTmSession, onClose: () => setShowChangePassword(false) }), showForgetPassword && _jsx(RecoverPasswordFlow, { isMobile: isMobile, tmSession: changePswTmSession, onClose: () => setShowForgetPassword(false), windowHeight: windowHeight }), showRapidAccess && _jsx(RapidAccessLogin, { isMobile: isMobile, onClose: () => setShowRapidAccess(false), onSelect: handleRapidAccessSelection })] })] })] }));
+};
+export default TMLoginForm;
+const CeredentialContainer = forwardRef(({ isMobile = false, authMode = AuthenticationModes.TopMedia, password = '', username = '', onPasswordChanged, onUsernameChanged, passwordValidator = [], usernameValidator = [], secondaryRef }, ref) => {
+    const passwordRef = useRef(null);
+    useImperativeHandle(ref, () => {
+        return usernameRef.current;
+    });
+    const usernameRef = useRef(null);
+    useEffect(() => {
+        setTimeout(() => {
+            const autoUser = usernameRef.current?.value ?? '';
+            const autoPass = passwordRef.current?.value ?? '';
+            if (autoUser !== username)
+                onUsernameChanged(autoUser);
+            if (autoPass !== password)
+                onPasswordChanged(autoPass);
+        }, 100);
+    }, []);
+    useEffect(() => {
+        if (!secondaryRef)
+            return;
+        if (typeof secondaryRef === 'function') {
+            secondaryRef(passwordRef.current);
+        }
+        else if (typeof secondaryRef === 'object' && secondaryRef !== null) {
+            secondaryRef.current = passwordRef.current;
+        }
+    }, [secondaryRef]);
+    return (_jsxs(StyledCredentialContainer, { "$isMobile": isMobile, "$authMode": authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password })] }));
+});
+const RapidAccessContainer = ({ isSaveEnable, name, nameValidationItems, onEnableSaveChange, onNameChange }) => {
+    return (_jsxs(StyledRapidLoginSave, { children: [_jsx(TMCheckBox, { label: LOGINLocalizator.CreateNewQuickAccess, onValueChanged: () => onEnableSaveChange(), value: isSaveEnable, labelColor: "#313131" }), isSaveEnable && _jsx(TextBox, { validationItems: nameValidationItems, disabled: !isSaveEnable, type: "text", value: name, onValueChanged: (value) => onNameChange(value), placeHolder: "Es: Admin risorse umane" })] }));
+};
+const getDeviceType = () => {
+    const ua = navigator.userAgent;
+    const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    if (/Mobi|Android/i.test(ua))
+        return 'mobile';
+    if (/iPad|Tablet/i.test(ua) || (isTouch && /Macintosh/i.test(ua)))
+        return 'tablet';
+    return 'desktop';
+};
+const getTopOffset = (windowHeight, isMobile, isTablet) => {
+    const isEdge = /Edg/.test(navigator.userAgent);
+    if (windowHeight === WindowHeight.LARGE) {
+        if (isMobile)
+            return '70px';
+        if (isTablet)
+            return '130px';
+        if (getDeviceType() !== 'desktop')
+            return '120px';
+        return isEdge ? '120px' : '180px';
+    }
+    if (windowHeight === WindowHeight.MEDIUM) {
+        if (getDeviceType() === 'desktop') {
+            if (isMobile)
+                return '60px';
+        }
+        return '120px';
+    }
+    return '60px';
+};
+const getFlexDirection = (isMobile, authMode) => {
+    if (isMobile)
+        return 'column';
+    return authMode === AuthenticationModes.TopMediaOnBehalfOf ? 'row' : 'column';
+};
+const getPadding = (windowHeight, isMobile) => {
+    if (windowHeight === WindowHeight.LARGE) {
+        return isMobile ? '35px 35px 10px 35px' : '65px 65px 10px 65px';
+    }
+    if (windowHeight === WindowHeight.MEDIUM) {
+        return isMobile ? '20px' : '20px 55px';
+    }
+    return '20px';
+};
+const StyledMobileVersionIcon = styled.div ` display: flex; align-items: center; justify-content: center; border-radius: 30px; width: 25px; height: 25px; background-color: white; `;
+const StyledWrapper = styled.div ` display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; overflow: hidden; background-color: transparent; `;
+const StyledVersionContainer = styled.div ` position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); color: ${TMColors.primary}; font-size: 0.9rem; display:flex; align-items:center; gap:10px; `;
+const StyledVersion = styled.div ` display: flex; align-items: center; gap: 2px; `;
+const StyledVersionName = styled.p ` display: flex; align-items: center; gap: 3px; `;
+const StyledLoginContainer = styled.div ` min-width: ${props => props.$isMobile ? '100%' : '800px'}; width: ${props => props.$isMobile ? '100%' : '50%'}; height:${props => props.$isMobile ? '100%' : '80%'}; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: ${props => !props.$isMobile ? '7px 7px 5px #AEAEAFBF' : 'none'}; border-radius: ${props => !props.$isMobile ? '10px' : 'none'};; opacity: 1; display: flex; flex-direction: ${props => props.$isMobile ? 'column' : 'row'}; overflow: hidden; `;
+const StyledLeftSection = styled.div ` width: ${props => props.$isMobile ? '100%' : '33%'}; min-width: ${props => props.$isMobile ? '100%' : '300px'}; height: ${props => props.$isMobile ? 'calc(25% - 40px)' : '100%'}; background: ${props => props.$isConnector ? TMColors.primary : `transparent linear-gradient(180deg, ${TMColors.primaryColor + 'B2'} 0%, ${TMColors.primaryColor} 100%) 0% 0% no-repeat padding-box`} ;mix-blend-mode: multiply; opacity: 1; position: relative; `; //NOSONAR
+const StyledOverlay = styled.div ` position: ${props => props.$isMobile ? 'unset' : 'absolute'}; top: 148px; left: 0; width: 100%; height: ${props => props.$isMobile ? 'calc(100% - 40px)' : '150px'}; background: linear-gradient(90deg, transparent, #ffffff95, transparent); opacity: 1; display: flex; align-items: center; justify-content: center; padding:10px; `;
+const StyledPoweredByContainer = styled.div ` position: absolute; width: 100%; height: 20px; bottom: ${props => props.$isMobile ? '10px' : '40px'}; left: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem; `;
+const StyledRightSection = styled.div ` width: ${props => props.$isMobile ? '100%' : '67%'}; min-width: ${props => props.$isMobile ? '100%' : '500px'}; height: ${props => props.$isMobile ? '80%' : '100%'}; background: white; mix-blend-mode: multiply; opacity: 1; position: relative; display: flex; align-items: center; justify-content: center; `;
+const StyledLogoContainer = styled.div ` position: absolute; top: ${props => props.$isMobile ? '40px' : '20px'}; left: 0; width: 100%; height: fit-content; padding: ${props => props.$isMobile ? '40px' : '30px'} 10px; transform:${props => props.$isMobile ? 'scale(0.8)' : 'scale(0.9)'}; display: flex; align-items: center; justify-content: center; gap: 10px; `;
+const StyledWelcomeText = styled.h1 ` text-align: left; letter-spacing: 0px; color: ${TMColors.primary}; opacity: 1; `;
+const StyledLogo = styled.div ` display: flex; gap: 5px; align-items: center; `;
+const StyledFormContainer = styled.div ` display: flex; flex-direction: column; padding: ${props => getPadding(props.$windowHeight, props.$isMobile)} ; align-items: center; justify-content: center; gap: 10px; width: 100%; height: fit-content; max-height: calc(100% - 100px); margin-top : ${props => !props.$isMobile && props.$windowHeight === WindowHeight.MEDIUM ? '70px' : '0'} ; `;
+const StyledButtonContainer = styled.div ` display: flex; align-items: center; justify-content: center; padding: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; width: 100%; margin-top: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; `;
+const StyledDescription = styled.div ` display: flex; align-items: center; gap: 2px; `;
+const StyledRapidLoginSave = styled.div ` display: flex; flex-direction: column; width: 100%; gap: 2px; `;
+const StyledForgetPassword = styled.div ` position: absolute; bottom: ${props => props.$isMobile ? '15px' : '25px'}; left: 50%; transform: translateX(-50%); font-size: 0.8rem; `;
+const StyledBackButton = styled.div ` position: absolute; top: 20px; left: 20px; `;
+const StyledLanguageChooser = styled.button ` border: none; border-radius: 50px; background-color: transparent; cursor: pointer; `;
+const StyledLangChooser = styled.img ` cursor: pointer; border: 3px solid white; border-radius: 50px; `;
+const StyledSummaryContainer = styled.div ` 
+    display: flex; 
+    align-items: center; 
+    gap: 10px;
+`;
+const StyledCredentialContainer = styled.div ` 
+    width: 100%; 
+    display: flex; 
+    flex-direction: ${props => getFlexDirection(props.$isMobile, props.$authMode)}; 
+    gap: 10px; 
+    
+    & > * {
+        flex: ${props => props.$authMode === AuthenticationModes.TopMediaOnBehalfOf && !props.$isMobile ? '1' : 'unset'};
+        min-width: 0;
+    }
+`;
+const StyledCredentialWrapper = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; `;
+const StyledToolbarContainer = styled.div ` display: flex; gap: 10px; align-items: center; position: absolute; top: 20px; right: 20px; `;
+const StyledStepContainer = styled.div ` width: 100%; display: flex; flex-direction: column; gap: ${props => props.$windowHeight !== WindowHeight.SMALL ? '10px' : '0'}; overflow: ${props => props.$deviceType === DeviceType.MOBILE ? 'auto' : 'unset'}; padding-right: ${props => props.$windowHeight === WindowHeight.LARGE ? '0' : '5px'};`;
+const StyledStepThreeContainer = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px ${props => props.$isMobile ? '0' : '60px'}; `;
+const StyledRapidAccessWrapper = styled.div `width:100%; margin-top:${props => props.$isMobile ? '0' : '30px'};`;
+const StyledMenuItemContainer = styled.div `display:flex;align-items:center;gap:10px;padding:5px;`;
+const StyledTopBar = styled.div ` width: 100%; height: 40px; background-color: ${() => TMColors.primaryColor}; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; `;
+const StyledTitle = styled.div ` width: 100%; color: white; font-size: 1rem; `;
+const StyledCustomLogo = styled.div ` width: 100%; height: 100%; padding: 10px; background-position: center; background-repeat: no-repeat; background-size: contain; transition: background-image 0.3s ease-in-out; `;
+function IconPasswordOutline(props) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 15 15", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "none", stroke: "currentColor", d: "M12.5 8.5v-1a1 1 0 0 0-1-1h-10a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-1m0-4h-4a2 2 0 1 0 0 4h4m0-4a2 2 0 1 1 0 4m-9-6v-3a3 3 0 0 1 6 0v3m2.5 4h1m-3 0h1m-3 0h1" }), " "] })); } //NOSONAR
+function IconFastAccess(props) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [" ", _jsx("circle", { cx: "256", cy: "56", r: "40", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "32" }), " ", _jsx("path", { fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "32", d: "M204.23 274.44c2.9-18.06 4.2-35.52-.5-47.59c-4-10.38-12.7-16.19-23.2-20.15L88 176.76c-12-4-23.21-10.7-24-23.94c-1-17 14-28 29-24c0 0 88 31.14 163 31.14s162-31 162-31c18-5 30 9 30 23.79c0 14.21-11 19.21-24 23.94l-88 31.91c-8 3-21 9-26 18.18c-6 10.75-5 29.53-2.1 47.59l5.9 29.63l37.41 163.9c2.8 13.15-6.3 25.44-19.4 27.74S308 489 304.12 476.28l-37.56-115.93q-2.71-8.34-4.8-16.87L256 320l-5.3 21.65q-2.52 10.35-5.8 20.48L208 476.18c-4 12.85-14.5 21.75-27.6 19.46s-22.4-15.59-19.46-27.74l37.39-163.83Z" }), " "] })); } //NOSONAR