@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,737 +0,0 @@
-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