@topconsultnpm/sdkui-react-beta 6.11.60 → 6.11.62

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

@@ -258,14 +258,14 @@ const RapidAccessItem = ({ rapidAccess, isMobile = false, onRemove, onSelect, on
         handleClose();
     };
     return (_jsxs(Container, { children: [_jsxs(ItemWrapper, { children: [_jsxs(ItemProfileWrapper, { style: { zIndex: 100 - index }, onDoubleClick: () => onSelect(rapidAccess.id), children: [_jsx(PreferredIconContainer, { onClick: () => onDefault(rapidAccess.id), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Default, children: rapidAccess.preferred ? _jsx(IconStarSolid, { color: TMColors.tertiary, fontSize: 20 }) : _jsx(IconStarOutline, { fontSize: 20 }) }) }), _jsx(ProfileCircle, { "$color": rapidAccess.color ?? TMColors.primary, onClick: () => setIsMenuOpen(true), children: iconMap[rapidAccess.icon] ?? _jsx(IconUser, { fontSize: 20 }) }), _jsxs("p", { children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? _jsx(IconCollapse, { fontSize: 16 }) : _jsx(IconExpand, { fontSize: 16 }) }), _jsx(TMButton, { color: 'primary', caption: SDKUI_Localizator.Select, showTooltip: false, onClick: () => onSelect(rapidAccess.id) }), _jsx(TMButton, { color: 'tertiary', caption: SDKUI_Localizator.Remove, showTooltip: false, onClick: onRemovePopup })] }), _jsx(Menu, { x: isMobile ? 0 : 80, y: isMobile ? -40 : 0, onClose: () => handleClose(), visible: isMenuOpen, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: [colors.map((color, index) => (_jsx(ColorWrapper, { onClick: () => onColorPick(color), children: _jsx(ColorPicker, { "$color": color }) }, index * 2))), _jsx(ColorWrapper, { onClick: () => setShowIconMenu(!showIconMenu), children: icons.find(icon => icon[0] === rapidAccess.icon)?.[1] ?? _jsx(IconUser, {}) })] }), showIconMenu && _jsx(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: icons.map(([key, icon]) => (_jsx(ColorWrapper, { onClick: () => onIconPick(key), children: _jsx(ColorPicker, { "$color": "white", children: icon }) }, key))) })] }) })] }), isExpanded &&
-                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                     _jsx(TextBox, { value: rapidAccess.onBehalfUsername, type: 'text', label: SDKUI_Localizator.UserName + ' ' + `(${SDKUI_Localizator.OnBehalfOf})`, disabled: true })] })] })] }));
 };
 const ColorWrapper = styled.div ` cursor: pointer; width: 30px; height: 30px; background-color: white; border-radius: 30px; display: flex; align-items: center; justify-content: center; `;
 const ColorPicker = styled.div ` width: 25px; height: 25px; border-radius: 25px; background-color: ${props => props.$color} ; display:flex; align-items:center; justify-content:center; `;
 const ExpandButton = styled.div ` cursor: pointer; display: flex; align-items: center; justify-content: center; `;
 const ExpandedAria = styled.div ` width: 100%; padding: 10px 0; display: flex; flex-direction: column; gap: 10px; `;
-const InputContainer = styled.div ` width: 100%; display: flex; align-items: center; gap: 10px; `;
+const InputContainer = styled.div ` width: 100%; display: flex; flex-direction:${props => props.$isMobile ? 'column' : 'row'} ; align-items: center; gap: 10px; `;
 const List = styled.div ` width: 100%; display: flex; flex-direction: column; max-height: calc(100%); overflow: visible; `;
 const ItemWrapper = styled.div ` width: 100%; display: flex; align-items: center; justify-content: space-between; position:relative;  `;
 const ItemProfileWrapper = styled.div ` display: flex; align-items: center; gap: 5px; padding: 10px 0; `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.11.60",
+  "version": "6.11.62",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/lib/components/forms/TMLoginForm.d.ts

@@ -1,49 +0,0 @@
-import React from "react";
-import { AppModules, ArchiveDescriptor, AuthenticationModes, CultureIDs, ITopMediaSession, SessionDescriptor } from "@topconsultnpm/sdk-ts-beta";
-import { DeviceType } from "../base/TMDeviceProvider";
-export declare const onChangeLanguage: (cultureID: CultureIDs) => void;
-export declare const useCultureID: ({ cultureID }: {
-    cultureID: CultureIDs;
-}) => CultureIDs;
-export declare const LOGIN_HISTORY_KEY = "LOGIN_HISTORY";
-export interface ITMLoginHistory {
-    id: number;
-    name: string;
-    endpoint: TMEndpointsType | undefined;
-    archive: ArchiveDescriptor | undefined;
-    domain: string;
-    domainAlternative: string;
-    authenticationMode: AuthenticationModes;
-    username: string;
-    language: CultureIDs;
-    onBehalfUsername: string;
-    preferred: boolean;
-}
-export type TMEndpointsType = {
-    Description: string;
-    URL: string;
-    isDefault?: 0 | 1;
-};
-interface ITMLoginFormProps {
-    sdInput?: SessionDescriptor;
-    endpoints: TMEndpointsType[];
-    appModule: AppModules;
-    onLogged: (tmSession: ITopMediaSession) => void;
-    onChangeLanguage?: (e: CultureIDs) => void;
-    cultureID?: CultureIDs;
-    saveLoginHistoryToLocalStorage?: boolean;
-}
-export declare const cultureIDsDataSource: {
-    value: CultureIDs;
-    display: string;
-}[];
-declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
-export declare const TMChangePassword: ({ deviceType, tmSession, username, onClose, enable, hasBack }: {
-    deviceType?: DeviceType;
-    hasBack?: boolean;
-    tmSession?: ITopMediaSession;
-    username: string;
-    onClose?: () => void;
-    enable?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default TMLoginForm;

package/lib/components/forms/TMLoginForm.js

@@ -1,1163 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { AppModules, ArchiveDescriptor, AuthenticationModes, CultureIDs, ChangePswDescriptor, SDK_Localizator, SessionDescriptor, TopMediaServer, ValidationItem, ResultTypes, SDK_Globals, LocalStorageService, DBBrands } from "@topconsultnpm/sdk-ts-beta";
-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 backgroundLogin from '../../assets/login-bg.png';
-import six from '../../assets/loading.png';
-import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, IconArrowLeft, SDKUI_Globals, IconChangeUser, IconInfo } from "../../helper";
-import styled from "styled-components";
-import DataGrid, { Column, Selection } from "devextreme-react/cjs/data-grid";
-import { ScrollBar } from "devextreme-react/cjs/chart";
-import TMLayoutContainer, { TMCard, TMLayoutItem } from "../base/TMLayout";
-import { TMColors } from "../../utils/theme";
-import TMSpinner from "../base/TMSpinner";
-import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
-import TMTextBox from "../editors/TMTextBox";
-import TMButton from "../base/TMButton";
-import TMSummary from "../editors/TMSummary";
-import TMDropDown from "../editors/TMDropDown";
-import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
-import TMCheckBox from "../editors/TMCheckBox";
-import { TMAboutApp } from "../sidebar/TMAboutApp";
-import TMTooltip from "../base/TMTooltip";
-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);
-};
-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 LOGIN_HISTORY_KEY = 'LOGIN_HISTORY';
-const StyledLoginContainer = styled.div ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 3px 3px 10px #00000024; width: ${props => props.$responsiveWidth ? props.$responsiveWidth : '51%'}; height: ${props => props.$responsiveHeight ? props.$responsiveHeight : '71%'}; border-radius: 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: #FFFFFF 0% 0% no-repeat padding-box; overflow: hidden; `;
-const StyledContainer = styled.div ` width: 100%; overflow: auto; height: 100%; position: absolute; `;
-const StyledHeaderText = styled.p ` padding-top: 15px; padding-bottom: 15px; font-size: 1.4rem; font-weight: bolder; color: ${TMColors.primary}; `;
-const StyledOTPContainer = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; color: ${TMColors.primary}; `;
-const StyledOTPInputContainer = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; `;
-const StyledOTPInput = styled.input `font-weight:bold; width: 40px; height: 40px; border-radius: 7px; border: 1px solid; border-color: ${TMColors.primary}; padding-left: 5px; &::-webkit-inner-spin-button, ::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; } `;
-const StyledOTPWaitPanel = styled.div ` width: 265px; margin-top: 30px; color: ${TMColors.primary}; font-size: 0.9rem; display: flex; flex-direction: column; `;
-const StyledOTPLabel = styled.p ` width: 265px; text-align: left; display :flex; justify-content: space-between; align-items: center; `;
-const StyledLogoContainer = styled.div ` position: relative; width: ${props => props.$width}; height: ${props => props.$height}; top: ${props => props.$top}; background: transparent linear-gradient(90deg, #FFFFFF00 0%, #FFFFFFCF 25%, #FFFFFFE8 51%, #FFFFFFCF 75%, #FFFFFF00 100%) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 10px #00000029; opacity: 1; `;
-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 [currentCultureID, setCurrentCultureID] = useState<CultureIDs>(CultureIDs.It_IT);
-    const deviceType = useDeviceType();
-    const [endpoints, setEndpoints] = useState();
-    const [selectedEndpoint, setSelectedEndPoint] = useState();
-    const [selectedArchive, setSelectedArchive] = useState();
-    const [endpoint, setEndpoint] = useState();
-    const [tmServer, setTmServer] = useState();
-    const [tmSession, setTmSession] = useState();
-    const [archives, setArchives] = useState();
-    const [archive, setArchive] = useState();
-    const [archiveID, setArchiveID] = useState('');
-    const [authMode, setAuthMode] = useState(AuthenticationModes.TopMedia);
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-    const [onBehalfUsername, setOnBeHalfUsername] = useState('');
-    const [onBeHalfPassword, setOnBeHalfPassword] = useState('');
-    const [domain, setDomain] = useState('');
-    const [domainAlternative, setDomainArternative] = useState('');
-    const [loginValidationItems, setLoginValidationItems] = useState([]);
-    const [recoveryPasswordValidationItems, setrecoveryPasswordValidationItems] = useState([]);
-    const [togglePages, setTogglePages] = useState({ change: false, recovery: false, endpoint: false, archive: false });
-    const [recoveryPasswordState, setRecoveryPasswordState] = useState({ confermPassword: '', email: '', newPassword: '', otp: '', step: 0 });
-    const [wait, setWait] = useState(60);
-    const otp1Ref = useRef(null);
-    const otp2Ref = useRef(null);
-    const otp3Ref = useRef(null);
-    const otp4Ref = useRef(null);
-    const otp5Ref = useRef(null);
-    const otp6Ref = useRef(null);
-    const [otpValues, setOtpValues] = useState(['', '', '', '', '', '']);
-    const [otpHasFilled, setOtpHasFilled] = useState([false, false, false, false, false, false]);
-    // popup save login State
-    const [popupSaveLoginInfoVisible, setPopupSaveLoginInfoVisible] = useState(false);
-    const [saveLoginInfo, setSaveLoginInfo] = useState(false);
-    const [saveLoginInfoName, setSaveLoginInfoName] = useState("");
-    const [loginHistory, setLoginHistory] = useState(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
-    const [preferredLoginItem, setPreferredLoginItem] = useState(undefined);
-    const [loadLoginInfoFromExternal, setLoadLoginInfoFromExternal] = useState(false);
-    const [forceArchiveDefault, setForceArchiveDefault] = useState(false);
-    /*  #1. useEffect hook to handle initialization and state setup when the component mounts
-            Set the local state of endpoints using the value from props
-    */
-    useEffect(() => {
-        setEndpoints(props.endpoints);
-        if (props.sdInput) {
-            if (props.sdInput.userName)
-                setUsername(props.sdInput.userName);
-        }
-    }, []);
-    /* #2.  useEffect hook to handle the preferred login item logic.
-            If the `saveLoginHistoryToLocalStorage` prop is true, find and set the preferred login item from the `loginHistory` array where the item is marked as preferred.
-            If `saveLoginHistoryToLocalStorage` is false, clear the preferred login item (set to undefined).
-            This effect runs whenever the `endpoints` dependency changes.
-    */
-    useEffect(() => {
-        props.saveLoginHistoryToLocalStorage ? setPreferredLoginItem(loginHistory.find(item => item.preferred)) : setPreferredLoginItem(undefined);
-    }, [endpoints]);
-    /* #3.  useEffect hook to handle the endpoint and set the state.
-           If `preferredLoginItem` is undefined, set the endpoint to the default one (where `isDefault` is true)
-           If `preferredLoginItem` is defined, set the endpoint to the one specified by it.
-           the dependency array ensures this effect only runs when `preferredLoginItem` changes.
-   */
-    useEffect(() => {
-        if (preferredLoginItem === undefined)
-            setEndpoint(props.endpoints.find(ep => ep.isDefault));
-        else {
-            setEndpoint(preferredLoginItem.endpoint);
-        }
-    }, [preferredLoginItem]);
-    /* #4.  useEffect hook to handle the tm server and set the state.
-            It sets up a new instance of the `TopMediaServer` class, passing in
-            the `URL` property of the `endpoint` object, and updates the `tmServer` state.
-            useEffect hook runs whenever the `endpoint` dependency changes.
-    */
-    useEffect(() => {
-        setTmServer(new TopMediaServer(endpoint?.URL));
-    }, [endpoint]);
-    /* #5.  useEffect hook to handle the tm session and set the state.
-            If `tmServer` exists, create a new session using its `NewSession` method and update the `tmSession` state with the newly created session.
-            useEffect hook runs whenever the `tmServer` dependency changes.
-    */
-    useEffect(() => {
-        setTmSession(tmServer?.NewSession());
-    }, [tmServer]);
-    /* #6.  useEffect hook to handle the archives and set the state.
-            It calls the asynchronous function 'getArchivesAsync', which fetches data related to archives from some source
-            Once 'getArchivesAsync' resolves (using a Promise), the returned result updating the 'archives' state with the new data
-            useEffect hook is triggered whenever the 'tmSession' dependency changes.
-    */
-    useEffect(() => {
-        getArchivesAsync().then((result) => {
-            setArchives(result);
-        });
-    }, [tmSession]);
-    /* 7.  useEffect hook to handle the archive and set the state.
-            Check if login info is being loaded from an external source. If true, exit the effect early to avoid executing further logic.
-            If no preferred login item is set, set the archive to the default archive from the archives list (where `isDefault` is true)
-            If a preferred login item exists, set the archive to its associated archive.
-            useEffect hook is triggered whenever the 'archives' dependency changes.
-     */
-    useEffect(() => {
-        if (loadLoginInfoFromExternal)
-            return;
-        if (preferredLoginItem === undefined || forceArchiveDefault)
-            setArchive(archives && archives.find(a => a.isDefault == 1));
-        else {
-            setArchive(preferredLoginItem.archive);
-        }
-    }, [archives, forceArchiveDefault]);
-    /* 8.   useEffect hook to handle the archive ID and set the state.
-            useEffect hook is triggered whenever the 'archive' dependency changes.
-    */
-    useEffect(() => {
-        if (archive && archive.id) {
-            setArchiveID(archive.id);
-        }
-        else
-            setArchiveID('');
-    }, [archive]);
-    /* 9.   Load and set login info when an external source and a preferred login item are provided
-            useEffect hook is triggered whenever the 'loadLoginInfoFromExternal' dependency changes.
-    */
-    useEffect(() => {
-        if (props.saveLoginHistoryToLocalStorage && preferredLoginItem) {
-            setAuthMode(preferredLoginItem.authenticationMode);
-            setDomain(preferredLoginItem.domain);
-            setDomainArternative(preferredLoginItem.domainAlternative);
-            setUsername(preferredLoginItem.username);
-            setPassword("");
-            setOnBeHalfUsername(preferredLoginItem.onBehalfUsername);
-            setOnBeHalfPassword("");
-            if (props.onChangeLanguage) {
-                props.onChangeLanguage(preferredLoginItem.language);
-            }
-        }
-    }, [preferredLoginItem]);
-    useEffect(() => {
-        let interval;
-        if (recoveryPasswordState.step === 2 && wait > 0) {
-            interval = setInterval(() => { setWait(prev => prev - 1); }, 1000);
-        }
-        return () => clearInterval(interval);
-    }, [recoveryPasswordState.step, wait]);
-    useEffect(() => {
-        let arr = [...otpValues];
-        for (let i = 0; i < otpValues.length; i++) {
-            if (otpValues[i].length > 1) {
-                arr[i] = otpValues[i][0];
-                let a = '';
-                for (let j = 1; j < otpValues[i].length; j++) {
-                    a += otpValues[i][j];
-                }
-                arr[i + 1] = a;
-                setOtpValues(arr);
-            }
-        }
-    }, [otpValues]);
-    useEffect(() => {
-        setEndpoints(props.endpoints);
-        if (props.sdInput) {
-            if (props.sdInput.userName && preferredLoginItem === undefined)
-                setUsername(props.sdInput.userName);
-        }
-    }, []);
-    useEffect(() => {
-        const loginWidthEnterKey = (e) => { if (loginValidationItems.length === 0 && !popupSaveLoginInfoVisible) {
-            if (e.key === 'Enter')
-                login();
-        } };
-        window.addEventListener('keyup', loginWidthEnterKey);
-        return () => window.removeEventListener('keyup', loginWidthEnterKey);
-    }, [loginValidationItems, popupSaveLoginInfoVisible]);
-    useEffect(() => { loginValidator(); }, [username, password, domain, endpoint, archive, archives, domainAlternative, archiveID, props.cultureID, authMode, onBehalfUsername, onBeHalfPassword, saveLoginInfo, saveLoginInfoName]);
-    useEffect(() => { recoveryPasswordValidator(); }, [recoveryPasswordState.confermPassword, recoveryPasswordState.email, recoveryPasswordState.newPassword, recoveryPasswordState.otp, recoveryPasswordState.step]);
-    useEffect(() => {
-        let arr = [...otpHasFilled];
-        if (otpValues[0].length > 0) {
-            arr[0] = true;
-            setOtpHasFilled(arr);
-        }
-        else {
-            arr[0] = false;
-            setOtpHasFilled(arr);
-        }
-        if (otpValues[1].length > 0) {
-            arr[1] = true;
-            setOtpHasFilled(arr);
-        }
-        else {
-            arr[1] = false;
-            setOtpHasFilled(arr);
-        }
-        if (otpValues[2].length > 0) {
-            arr[2] = true;
-            setOtpHasFilled(arr);
-        }
-        else {
-            arr[2] = false;
-            setOtpHasFilled(arr);
-        }
-        if (otpValues[3].length > 0) {
-            arr[3] = true;
-            setOtpHasFilled(arr);
-        }
-        else {
-            arr[3] = false;
-            setOtpHasFilled(arr);
-        }
-        if (otpValues[4].length > 0) {
-            arr[4] = true;
-            setOtpHasFilled(arr);
-        }
-        else {
-            arr[4] = false;
-            setOtpHasFilled(arr);
-        }
-        if (otpValues[5].length > 0) {
-            arr[5] = true;
-            setOtpHasFilled(arr);
-        }
-        else {
-            arr[5] = false;
-            setOtpHasFilled(arr);
-        }
-    }, [otpValues]);
-    useEffect(() => {
-        if (otpHasFilled[0]) {
-            otp1Ref.current?.blur();
-            otp2Ref.current?.focus();
-        }
-        if (otpHasFilled[1]) {
-            otp2Ref.current?.blur();
-            otp3Ref.current?.focus();
-        }
-        if (otpHasFilled[2]) {
-            otp3Ref.current?.blur();
-            otp4Ref.current?.focus();
-        }
-        if (otpHasFilled[3]) {
-            otp4Ref.current?.blur();
-            otp5Ref.current?.focus();
-        }
-        if (otpHasFilled[4]) {
-            otp5Ref.current?.blur();
-            otp6Ref.current?.focus();
-        }
-        if (otpHasFilled[5]) {
-            otp6Ref.current?.blur();
-        }
-        if (otpHasFilled[0] && otpHasFilled[1] && otpHasFilled[2] && otpHasFilled[3] && otpHasFilled[4] && otpHasFilled[5]) {
-            setRecoveryPasswordState({ ...recoveryPasswordState, otp: otpValues[0] + otpValues[1] + otpValues[2] + otpValues[3] + otpValues[4] + otpValues[5] });
-        }
-        else {
-            setRecoveryPasswordState({ ...recoveryPasswordState, otp: '' });
-        }
-    }, [otpHasFilled]);
-    const loginValidator = () => {
-        let arr = [...loginValidationItems];
-        arr = [];
-        if (!endpoint || endpoint?.URL.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'endpoint')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'endpoint', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'endpoint');
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        if (!archive && archiveID.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'archive')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'archive', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'archive');
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        if (!authMode) {
-            if (!arr.find(item => item.PropertyName === 'authMode')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'authMode', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'authMode');
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        if (!props.cultureID) {
-            if (!arr.find(item => item.PropertyName === 'cultureId')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'cultureId', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'cultureId');
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        if (username.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'username')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'username', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'username');
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        if (password.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'password')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'password', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'password');
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        if (saveLoginInfo && saveLoginInfoName.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'saveLoginName')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDK_Localizator.RequiredField));
-            }
-            ;
-            setLoginValidationItems(arr);
-        }
-        else {
-            const findItemByField = LocalStorageService.findItemByField(LOGIN_HISTORY_KEY, "name", saveLoginInfoName);
-            if (findItemByField) {
-                if (!arr.find(item => item.PropertyName === 'saveLoginName')) {
-                    arr.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDKUI_Localizator.DuplicateNameError));
-                }
-            }
-            else {
-                arr = arr.filter(item => item.PropertyName !== 'saveLoginName');
-            }
-            setLoginValidationItems(arr);
-        }
-        switch (authMode) {
-            case AuthenticationModes.TopMedia:
-                arr.filter(item => item.PropertyName !== 'domain' && item.PropertyName !== 'domain_alt' && item.PropertyName !== 'onBeHalfUsername' && item.PropertyName !== 'onBeHalfPassword');
-                break;
-            case AuthenticationModes.WindowsThroughTopMedia:
-                arr.filter(item => item.PropertyName !== 'onBeHalfUsername' && item.PropertyName !== 'onBeHalfPassword' && item.PropertyName !== 'domain');
-                if (domainAlternative.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'domain_alt')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'domain_alt', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'domain_alt');
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                break;
-            case AuthenticationModes.TopMediaOnBehalfOf:
-                arr.filter(item => item.PropertyName !== 'domain_alt');
-                if (domain.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'domain')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'domain', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'domain');
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                if (onBehalfUsername.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'onBeHalfUsername')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'onBeHalfUsername', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'onBeHalfUsername');
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                if (onBeHalfPassword.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'onBeHalfPassword')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'onBeHalfPassword', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'onBeHalfPassword');
-                    }
-                    ;
-                    setLoginValidationItems(arr);
-                }
-                // 
-                break;
-            case AuthenticationModes.MSAzure:
-                arr = arr.filter(item => item.PropertyName !== 'username' && item.PropertyName !== 'password' && item.PropertyName !== 'domain' && item.PropertyName !== 'domain_alt' && item.PropertyName !== 'onBeHalfUsername' && item.PropertyName !== 'onBeHalfPassword');
-                setLoginValidationItems(arr);
-                break;
-        }
-    };
-    const updateLoginHistory = (newEntry) => {
-        // Get the existing history from localStorage or initialize an empty array if none exists
-        const currentHistory = JSON.parse(localStorage.getItem(LOGIN_HISTORY_KEY) ?? "[]");
-        // Generate a new ID (incremental)
-        const newId = currentHistory.length > 0 ? Math.max(...currentHistory.map((item) => item.id)) + 1 : 1;
-        // Create a new object with the generated ID
-        const newLoginHistory = { ...newEntry, id: newId };
-        // Add the new entry to the current history
-        currentHistory.push(newLoginHistory);
-        // Update Login History State
-        setLoginHistory(currentHistory);
-        // Save the updated array back to localStorage
-        LocalStorageService.setItem(LOGIN_HISTORY_KEY, currentHistory);
-    };
-    // onSelectEndpoint is a function that handles actions when a new endpoint is selected
-    const onSelectEndpoint = () => {
-        setLoadLoginInfoFromExternal(false);
-        setForceArchiveDefault(true);
-        setEndpoint(selectedEndpoint);
-        backToLogin();
-        setSelectedEndPoint(undefined);
-    };
-    const showPopupSaveLoginInfo = () => { setPopupSaveLoginInfoVisible(true); };
-    const hidePopupSaveLoginInfo = () => { setPopupSaveLoginInfoVisible(false); };
-    const recoveryPasswordValidator = () => {
-        let arr = [...recoveryPasswordValidationItems];
-        let char_upperCase = new RegExp(/([A-Z])/g);
-        let char_lowerCase = new RegExp(/([a-z])/g);
-        let char_number = new RegExp(/([0-9])/g);
-        let char_symbol = new RegExp(/[!@?#\$%\^\&*\)\(+=._-]/g);
-        // let email_validation = new RegExp(/^[-\.]+@([\w-]+\.)+[\w-]{2,4}$/g)
-        let email_validation = new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g);
-        switch (recoveryPasswordState.step) {
-            case 1:
-                // if (recoveryPasswordState.email?.length === 0) { if (!arr.find(item => item.PropertyName === 'recoveryPass_email')) { arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_email', SDK_Localizator.RequiredField)) }; setrecoveryPasswordValidationItems(arr); } else { { arr = arr.filter(item => item.PropertyName !== 'recoveryPass_email') }; setrecoveryPasswordValidationItems(arr); }
-                if (recoveryPasswordState.email?.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_email')) {
-                        arr.unshift(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_email', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_email');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (!recoveryPasswordState.email?.match(email_validation)) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_notEmail')) {
-                        arr.push(new ValidationItem(ResultTypes.INFO, 'recoveryPass_notEmail', SDKUI_Localizator.EmailIsNotValid));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_notEmail');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                break;
-            case 2:
-                if (recoveryPasswordState.otp?.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_otp')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_otp', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_otp');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                break;
-            case 3:
-                if (recoveryPasswordState.newPassword?.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_new')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_new', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_new');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (recoveryPasswordState.confermPassword?.length === 0) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_confirm')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_confirm', SDK_Localizator.RequiredField));
-                    }
-                    ;
-                    arr = arr.filter(item => item.PropertyName !== 'changePass_notConfirmed');
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_confirm');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.confermPassword.length > 0 && recoveryPasswordState.newPassword !== recoveryPasswordState.confermPassword) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_notConfirmed')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_notConfirmed', SDKUI_Localizator.PasswordConfirmError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.confermPassword.length > 0 && recoveryPasswordState.newPassword === recoveryPasswordState.confermPassword) {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_notConfirmed');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.newPassword?.toLowerCase() === username.toLowerCase()) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_equalUsername')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_equalUsername', SDKUI_Localizator.PasswordEqualsUsernameError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_equalUsername');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.newPassword?.toLowerCase().includes(username.toLowerCase())) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_containUsername')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_containUsername', SDKUI_Localizator.PasswordEqualsUsernameError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_containUsername');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (!char_symbol.test(recoveryPasswordState.newPassword)) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotSymbol')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotSymbol', SDKUI_Localizator.PasswordSymbolError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotSymbol');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (!char_number.test(recoveryPasswordState.newPassword)) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotNumber')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotNumber', SDKUI_Localizator.PasswordNumberError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotNumber');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (!char_lowerCase.test(recoveryPasswordState.newPassword)) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotLower')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotLower', SDKUI_Localizator.PasswordLowercaseError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotLower');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (!char_upperCase.test(recoveryPasswordState.newPassword)) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotUpper')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotUpper', SDKUI_Localizator.PasswordUppercaseError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotUpper');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                if (recoveryPasswordState.newPassword.length < 10 || recoveryPasswordState.newPassword.length > 128) {
-                    if (!arr.find(item => item.PropertyName === 'recoveryPass_length')) {
-                        arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_length', SDKUI_Localizator.PasswordLengthError));
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                else {
-                    {
-                        arr = arr.filter(item => item.PropertyName !== 'recoveryPass_length');
-                    }
-                    ;
-                    setrecoveryPasswordValidationItems(arr);
-                }
-                break;
-        }
-    };
-    async function login() {
-        TMSpinner.show({ description: '' });
-        try {
-            const sdInput = {
-                authenticationMode: authMode,
-                appModuleID: props.appModule,
-                archiveID: archiveID,
-                userName: username,
-                password: password,
-                cultureID: props.cultureID,
-                domain: domainAlternative,
-                onBehalfOf: {
-                    domain: domain,
-                    userName: onBehalfUsername,
-                    password: onBeHalfPassword
-                }
-            };
-            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: 'Errore caricamento licenza', exception: e });
-                    }
-                    break;
-            }
-            props.onLogged(tmSession);
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e });
-        }
-        finally {
-            try {
-                if (SDK_Globals.tmSession && saveLoginInfo && saveLoginInfoName.length > 0) {
-                    const maxId = loginHistory.reduce((max, item) => (item.id > max ? item.id : max), 0);
-                    const archiveModified = ArchiveDescriptor.fromJS({ ...archive, dbBrand: DBBrands.None, imageID: 0, msAzureTenantID: "", msAzureClientID: "", isDefault: 0, });
-                    const loginHistoryNewEntry = {
-                        id: maxId + 1,
-                        name: saveLoginInfoName,
-                        endpoint: endpoint ?? undefined,
-                        archive: archiveModified ?? undefined,
-                        domain: domain ?? '',
-                        domainAlternative: domainAlternative ?? '',
-                        authenticationMode: authMode,
-                        username: username,
-                        language: props.cultureID ?? CultureIDs.None,
-                        onBehalfUsername: onBehalfUsername,
-                        preferred: false
-                    };
-                    updateLoginHistory(loginHistoryNewEntry);
-                }
-            }
-            catch (e) {
-                // Login failed
-                console.log("Login failed. Please check your username and password.");
-                // return TMExceptionBoxManager.show({ exception: e })
-            }
-            finally {
-                TMSpinner.hide();
-            }
-        }
-    }
-    async function getArchivesAsync() {
-        try {
-            TMSpinner.show({ description: '' });
-            return tmSession?.TopMediaServer.BaseAddress && await tmSession?.NewArchiveEngine().RetrieveAllAsync();
-        }
-        catch (e) {
-            return TMExceptionBoxManager.show({ exception: e });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    }
-    async function pingAsync(endpoint) {
-        const server = new TopMediaServer(endpoint.URL);
-        // server.NewSession()
-        try {
-            TMSpinner.show();
-            TMMessageBoxManager.show({ title: 'Ping', message: (await server?.PingAsync())?.toString(), buttons: [ButtonNames.OK] });
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    }
-    const isPasswordChangeEnable = () => {
-        if (endpoint && (archive || archiveID.length > 0) && authMode === AuthenticationModes.TopMedia && username.length > 0) {
-            return true;
-        }
-        else
-            return false;
-    };
-    const showRecoveryPassword = () => { setRecoveryPasswordState({ ...recoveryPasswordState, step: 1 }); setTogglePages({ change: false, recovery: true, archive: false, endpoint: false }); };
-    const showEndpoints = () => { setTogglePages({ change: false, recovery: false, archive: false, endpoint: true }); };
-    const showArchives = () => { setTogglePages({ change: false, recovery: false, archive: true, endpoint: false }); };
-    const backToLogin = () => { setTogglePages({ change: false, recovery: false, archive: false, endpoint: false }); setOtpValues(['', '', '', '', '', '']); };
-    const isLoginPage = () => { if ((!togglePages.change && !togglePages.recovery && !togglePages.endpoint && !togglePages.archive))
-        return true;
-    else
-        return false; };
-    const getChangePswTmSession = () => {
-        let tmServer = new TopMediaServer(endpoint?.URL);
-        let tmSession = tmServer.NewSession();
-        let sd = new SessionDescriptor();
-        sd.userName = username;
-        sd.accessToken = "CHANGEPSWTOKEN";
-        sd.archiveID = archiveID;
-        tmSession.SessionDescr = sd;
-        return tmSession;
-    };
-    const recoveryPasswordOnClickManager = async () => {
-        let cpd = new ChangePswDescriptor();
-        switch (recoveryPasswordState.step) {
-            case 1:
-                cpd.archiveID = archiveID;
-                cpd.userName = username;
-                cpd.eMail = recoveryPasswordState.email;
-                cpd.cultureID = props.cultureID;
-                try {
-                    TMSpinner.show();
-                    await getChangePswTmSession().NewUserEngine().RecoveryPasswordAsync(cpd);
-                    setRecoveryPasswordState({ ...recoveryPasswordState, step: 2 });
-                }
-                catch (e) {
-                    TMExceptionBoxManager.show({ exception: e });
-                }
-                finally {
-                    TMSpinner.hide();
-                }
-                break;
-            case 2:
-                cpd.archiveID = archiveID;
-                cpd.userName = username;
-                cpd.eMail = recoveryPasswordState.email;
-                cpd.cultureID = props.cultureID;
-                cpd.otp = Number(recoveryPasswordState.otp); // OTP ricevuto per mail
-                cpd.newPassword = 'password_123!';
-                cpd.onlyCheckOTP = 1;
-                try {
-                    TMSpinner.show();
-                    await getChangePswTmSession().NewUserEngine().ChangePasswordAsync(cpd);
-                    setRecoveryPasswordState({ ...recoveryPasswordState, step: 3 });
-                }
-                catch (e) {
-                    TMExceptionBoxManager.show({ exception: e });
-                }
-                finally {
-                    TMSpinner.hide();
-                }
-                break;
-            case 3:
-                cpd.archiveID = archiveID;
-                cpd.userName = username;
-                cpd.eMail = recoveryPasswordState.email;
-                cpd.cultureID = props.cultureID;
-                cpd.otp = Number(recoveryPasswordState.otp);
-                cpd.onlyCheckOTP = 0;
-                cpd.newPassword = recoveryPasswordState.newPassword;
-                try {
-                    TMSpinner.show();
-                    await getChangePswTmSession().NewUserEngine().ChangePasswordAsync(cpd);
-                    TMMessageBoxManager.show({ buttons: [ButtonNames.OK], onButtonClick: (e) => e === ButtonNames.OK && backToLogin(), message: SDKUI_Localizator.PasswordChangedSuccessfully });
-                }
-                catch (e) {
-                    TMExceptionBoxManager.show({ exception: e });
-                }
-                finally {
-                    TMSpinner.hide();
-                }
-                break;
-        }
-    };
-    const recoveryPasswordBackClick = () => {
-        switch (recoveryPasswordState.step) {
-            case 1:
-            case 2:
-                backToLogin();
-                setRecoveryPasswordState({ confermPassword: '', email: '', newPassword: '', otp: '', step: 0 });
-                setrecoveryPasswordValidationItems([]);
-                break;
-            case 3:
-                let arr = [...recoveryPasswordValidationItems];
-                arr = arr.filter(item => item.PropertyName === 'recoveryPass_email' || item.PropertyName === 'recoveryPass_notEmail' || item.PropertyName === 'recoveryPass_otp');
-                setrecoveryPasswordValidationItems(arr);
-                setRecoveryPasswordState({ ...recoveryPasswordState, step: 2, otp: '' });
-                setOtpValues(['', '', '', '', '', '']);
-        }
-    };
-    return (_jsx(StyledLoginContainer, { "$responsiveHeight": calcResponsiveSizes(deviceType, '75%', '96%', '98%'), "$responsiveWidth": calcResponsiveSizes(deviceType, '55%', '95%', '95%'), children: _jsxs(TMLayoutContainer, { direction: calcResponsiveDirection(deviceType, "horizontal", "vertical", "vertical"), children: [_jsx(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "40%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '20%', '20%'), children: _jsx("div", { style: { width: '100%', height: '100%', backgroundImage: `url(${backgroundLogin})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '10px' }, children: _jsx(StyledLogoContainer, { "$width": "100%", "$height": calcResponsiveSizes(deviceType, '21%', '50%', '50%'), "$top": '20%', children: _jsx("div", { style: { display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', fontWeight: 'bolder', color: TMColors.secondary, fontStyle: 'italic' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 10 }, children: [_jsx("img", { src: six, height: 40, alt: "" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { fontSize: '0.8rem', color: '#343434', fontWeight: 'lighter' }, children: "TopMedia" }), _jsxs("div", { children: [_jsx("span", { style: { fontSize: '2.5rem', lineHeight: 1 }, children: SDK_Globals.appModule }), "\u00A0", _jsx(IconInfo, { fontSize: "22px", cursor: "pointer", onClick: () => { TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: false }) }); } })] })] })] }) }) }) }) }), _jsxs(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "60%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '80%', '80%'), children: [togglePages.recovery &&
-                            _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ForgetPassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: "max-content", children: _jsxs("div", { style: { width: '100%', height: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: '20px' }, children: [_jsx("div", { style: { transform: 'translateX(-1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: TMColors.primary, zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "1" }), _jsx("div", { style: { width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 1 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "2" }), _jsx("div", { style: { transform: 'translateX(1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 2 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "3" }), _jsx("div", { style: { width: '100%', height: '5px', backgroundColor: 'rgb(180,180,180)', position: 'absolute' } }), _jsx("div", { style: { width: recoveryPasswordState.step === 1 ? '0%' : recoveryPasswordState.step === 2 ? '50%' : '100%', transition: '500ms ease', height: '5px', backgroundColor: TMColors.primary, position: 'absolute' } })] }) }), recoveryPasswordState.step === 1 && _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "email", elementStyle: { marginTop: '30px' }, label: SDKUI_Localizator.InsertYourEmail, icon: _jsx(IconMail, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, email: e.target.value }), value: recoveryPasswordState.email, validationItems: recoveryPasswordState.email?.length === 0 ? recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_email') : recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_notEmail') }) }), recoveryPasswordState.step === 2 && _jsx(TMLayoutItem, { children: _jsxs(StyledOTPContainer, { children: [_jsxs(StyledOTPLabel, { children: [" ", SDKUI_Localizator.InsertOTP, " ", otpHasFilled.find(input => input === true) && _jsx("strong", { style: { cursor: 'pointer' }, onClick: () => setOtpValues(['', '', '', '', '', '']), children: SDKUI_Localizator.ClearOTP }), " "] }), _jsxs(StyledOTPInputContainer, { children: [_jsx(StyledOTPInput, { ref: otp1Ref, type: "number", max: 9, min: 0, value: otpValues[0], onChange: (e) => { let arr = [...otpValues]; arr[0] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp2Ref, type: "number", max: 9, min: 0, value: otpValues[1], onChange: (e) => { let arr = [...otpValues]; arr[1] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp3Ref, type: "number", max: 9, min: 0, value: otpValues[2], onChange: (e) => { let arr = [...otpValues]; arr[2] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp4Ref, type: "number", max: 9, min: 0, value: otpValues[3], onChange: (e) => { let arr = [...otpValues]; arr[3] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp5Ref, type: "number", max: 9, min: 0, value: otpValues[4], onChange: (e) => { let arr = [...otpValues]; arr[4] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp6Ref, type: "number", max: 9, min: 0, value: otpValues[5], onChange: (e) => { let arr = [...otpValues]; arr[5] = e.target.value; setOtpValues(arr); } })] }), _jsxs(StyledOTPWaitPanel, { children: [_jsxs("em", { children: [" ", SDKUI_Localizator.OTPSent, " ", _jsx("strong", { children: recoveryPasswordState.email }), ". ", SDKUI_Localizator.OTPNewRequest, " ", _jsx("strong", { children: wait }), " ", SDKUI_Localizator.Seconds] }), ".", wait === 0 && _jsx(TMButton, { caption: SDKUI_Localizator.NewOTP, showTooltip: false, onClick: () => setWait(60) })] })] }) }), recoveryPasswordState.step === 3 && _jsxs(_Fragment, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, newPassword: e.target.value }), value: recoveryPasswordState.newPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_new' || item.PropertyName === 'recoveryPass_equalUsername' || item.PropertyName === 'recoveryPass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, confermPassword: e.target.value }), value: recoveryPasswordState.confermPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_confirm' || item.PropertyName === 'recoveryPass_notConfirmed') }) })] })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: () => { recoveryPasswordBackClick(); }, tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && recoveryPasswordBackClick(), style: { userSelect: 'none', cursor: 'pointer', color: TMColors.primary, fontSize: '1rem' }, children: (recoveryPasswordState.step === 1 || recoveryPasswordState.step === 3) ? SDKUI_Localizator.Back : SDKUI_Localizator.Cancel }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: recoveryPasswordValidationItems.filter(vil => vil.ResultType === ResultTypes.ERROR).length > 0, caption: recoveryPasswordState.step < 3 ? SDKUI_Localizator.Next : SDKUI_Localizator.Save, onClick: () => recoveryPasswordOnClickManager(), showTooltip: false }) }) })] }) }), togglePages.change && _jsx(TMChangePassword, { deviceType: deviceType, tmSession: getChangePswTmSession(), username: username, enable: isPasswordChangeEnable(), onClose: () => backToLogin() }), togglePages.endpoint && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.Endpoint }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', elementAttr: { class: 'dx-custom-row' }, dataSource: endpoints, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "URL", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedEndPoint(e.selectedRowsData[0]), onRowDblClick: onSelectEndpoint, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(ScrollBar, { width: 3 }), _jsx(Column, { dataField: "Description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "URL", caption: 'URL', allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '10px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedEndpoint, caption: SDKUI_Localizator.Select, onClick: onSelectEndpoint, showTooltip: false }), _jsx(TMButton, { caption: 'Ping', btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", disabled: !selectedEndpoint, onClick: () => pingAsync(selectedEndpoint), icon: _jsx(IconWifi, {}) })] }) })] }) }), togglePages.archive && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ArchiveID }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', dataSource: archives, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "id", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedArchive(e.selectedRowsData[0]), onRowDblClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Column, { dataField: "id", caption: 'ID', allowSorting: false }), _jsx(Column, { dataField: "description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedArchive, caption: SDKUI_Localizator.Select, onClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, showTooltip: false })] }) })] }) }), (isLoginPage()) &&
-                            _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: "Login" }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsxs(TMLayoutItem, { children: [_jsx(TMSummary, { label: SDKUI_Localizator.Endpoint, icon: _jsx(IconAccessPoint, {}), showClearButton: true, onClearClick: () => setEndpoint(undefined), iconEditButton: _jsx(IconSearch, {}), template: _jsx("div", { children: endpoint?.Description }), buttons: [{ text: "Ping", icon: _jsx(IconWifi, { color: "gray" }), onClick: () => pingAsync(endpoint) }], validationItems: loginValidationItems.filter(item => item.PropertyName === 'endpoint'), onEditorClick: showEndpoints }), archives && archives.length > 0 ?
-                                                                        _jsx(TMSummary, { label: SDKUI_Localizator.ArchiveID, onClearClick: () => setArchive(undefined), iconEditButton: _jsx(IconSearch, {}), icon: _jsx(IconArchive, {}), template: _jsx("div", { children: archive ? archive.description : null }), validationItems: loginValidationItems.filter(item => item.PropertyName === 'archive'), onEditorClick: showArchives }) :
-                                                                        _jsx(TMTextBox, { label: SDKUI_Localizator.ArchiveID, icon: _jsx(IconArchive, {}), onValueChanged: (e) => setArchiveID(e.target.value), value: archiveID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'archive') }), _jsx(TMDropDown, { dataSource: [{ display: 'TopMedia', value: AuthenticationModes.TopMedia }, { display: SDKUI_Localizator.AuthMode_OnBehalfOf, value: AuthenticationModes.TopMediaOnBehalfOf }, { display: 'MSAzure', value: AuthenticationModes.MSAzure }, { display: SDKUI_Localizator.AuthMode_WindowsViaTopMedia, value: AuthenticationModes.WindowsThroughTopMedia }], label: SDKUI_Localizator.AuthMode, value: authMode, icon: _jsx(IconLogin, {}), onValueChanged: (e) => { setAuthMode(e.target.value); }, validationItems: loginValidationItems.filter(item => item.PropertyName === 'authMode') })] }), (authMode === AuthenticationModes.TopMedia || authMode === AuthenticationModes.WindowsThroughTopMedia) && _jsx(TMLayoutItem, { children: authMode === AuthenticationModes.WindowsThroughTopMedia ?
-                                                                    _jsxs(_Fragment, { children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Domain, icon: _jsx(IconWeb, {}), value: domainAlternative, onValueChanged: (e) => setDomainArternative(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'domain_alt') }), _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }), _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) })] })
-                                                                    :
-                                                                        _jsxs(_Fragment, { children: [_jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) }) })] }) }), authMode === AuthenticationModes.TopMediaOnBehalfOf && _jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { direction: "horizontal", children: [_jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'username'), label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: username, onValueChanged: (e) => setUsername(e.target.value) }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { validationItems: loginValidationItems.filter(item => item.PropertyName === 'password'), type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: password, onValueChanged: (e) => setPassword(e.target.value) }) })] }) }), _jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { label: SDKUI_Localizator.Domain, icon: _jsx(IconWeb, {}), value: domain, onValueChanged: (e) => setDomain(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'domain') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { label: SDKUI_Localizator.UserName, icon: _jsx(IconUser, {}), value: onBehalfUsername, onValueChanged: (e) => setOnBeHalfUsername(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'onBeHalfUsername') }) })] }) })] }) }), authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(TMLayoutItem, { children: _jsx(TMDropDown, { dataSource: cultureIDsDataSource, icon: _jsx(IconLanguage, {}), label: SDKUI_Localizator.CultureID, onValueChanged: (e) => props.onChangeLanguage && props.onChangeLanguage(e.target.value), value: props.cultureID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'cultureId') }) }) :
-                                                                _jsxs(TMLayoutContainer, { direction: "horizontal", children: [_jsx(TMLayoutItem, { children: _jsx(TMDropDown, { dataSource: cultureIDsDataSource, icon: _jsx(IconLanguage, {}), label: SDKUI_Localizator.CultureID, onValueChanged: (e) => props.onChangeLanguage && props.onChangeLanguage(e.target.value), value: props.cultureID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'cultureId') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: onBeHalfPassword, onValueChanged: (e) => setOnBeHalfPassword(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'onBeHalfPassword') }) })] }), props.saveLoginHistoryToLocalStorage && _jsxs(TMLayoutItem, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', marginTop: 12 }, children: [_jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), _jsx(TMCheckBox, { elementStyle: { marginLeft: 5 }, labelPosition: "left", label: SDKUI_Localizator.RememberCredentials, value: saveLoginInfo, onValueChanged: () => { setSaveLoginInfo(prevSaveLoginInfo => !prevSaveLoginInfo); }, isModifiedWhen: saveLoginInfo }), _jsx("div", { style: { marginLeft: 'auto', position: 'relative' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.SwitchUser, children: _jsx(TMButton, { label: SDKUI_Localizator.SwitchUser, color: 'primary', btnStyle: 'toolbar', icon: _jsx(IconChangeUser, {}), onClick: showPopupSaveLoginInfo }) }) })] }), saveLoginInfo && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.EnterNameForAccess, icon: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), value: saveLoginInfoName, onValueChanged: (e) => setSaveLoginInfoName(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'saveLoginName') })] })] }) }) }) }), _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: authMode === AuthenticationModes.TopMedia && _jsxs("div", { style: { display: "flex", flexWrap: "nowrap", gap: "10px" }, children: [_jsx("p", { onClick: () => isPasswordChangeEnable() && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), style: { userSelect: 'none', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.ChangePassword }), _jsx("p", { tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && showRecoveryPassword(), onClick: () => isPasswordChangeEnable() && showRecoveryPassword(), style: { userSelect: 'none', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', fontSize: '0.9rem' }, children: SDKUI_Localizator.ForgetPassword })] }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '250px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1.1rem", caption: "Login", disabled: loginValidationItems.length > 0, onClick: login, showTooltip: false }) }) })] }) })] })] }) }));
-};
-const TMPasswordManager = ({ validationItems = [], operation = 'change' }) => {
-    const passwordStrength = () => {
-        let arr = [...validationItems];
-        if (operation === 'change') {
-            arr = arr.filter(item => item.PropertyName !== 'changePass_old' && item.PropertyName !== 'changePass_new' && item.PropertyName !== 'changePass_confirm' && item.PropertyName !== 'changePass_notConfirmed' && item.PropertyName !== 'changePass_equalUsername' && item.PropertyName !== 'changePass_containUsername');
-        }
-        if (operation === 'recovery') {
-            arr = arr.filter(item => item.PropertyName !== 'recoveryPass_email' && item.PropertyName !== 'recoveryPass_otp' && item.PropertyName !== 'recoveryPass_new' && item.PropertyName !== 'recoveryPass_confirm' && item.PropertyName !== 'recoveryPass_notConfirmed' && item.PropertyName !== 'recoveryPass_equalUsername' && item.PropertyName !== 'recoveryPass_containUsername');
-        }
-        if (arr.length > 4)
-            return { width: '20%', color: TMColors.error };
-        if (arr.length <= 4 && arr.length > 2)
-            return { width: '40%', color: TMColors.tertiary };
-        if (arr.length === 2)
-            return { width: '60%', color: TMColors.warning };
-        if (arr.length === 1)
-            return { width: '80%', color: TMColors.warning };
-        if (arr.length === 0)
-            return { width: '100%', color: TMColors.success };
-        return { width: '', color: '' };
-    };
-    return (_jsxs(TMLayoutItem, { height: "60%", children: [_jsx("div", { style: { width: 'calc(100% - 70px)', height: '5px', backgroundColor: 'white', margin: '0px 0px 10px 45px', borderRadius: '2px', overflow: 'hidden' }, children: _jsx("div", { style: { width: passwordStrength().width, height: '100%', backgroundColor: passwordStrength().color, transition: 'ease 300ms' } }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 2, padding: '0 45px 10px 45px' }, children: [_jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_length`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_length`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordLengthError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotLower`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotLower`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordLowercaseError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotUpper`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotUpper`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordUppercaseError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotNumber`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotNumber`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordNumberError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotSymbol`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsxs("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotSymbol`) ? 'red' : 'green' }, children: [SDKUI_Localizator.PasswordSymbolError, " "] }) })] })] })] }));
-};
-export const TMChangePassword = ({ deviceType = DeviceType.DESKTOP, tmSession, username, onClose, enable, hasBack = true }) => {
-    const [changePasswordState, setChangePasswordState] = useState({ confermPassword: '', newPassword: '', oldPassword: '' });
-    const [changePasswordValidationItems, setChangePasswordValidationItems] = useState([]);
-    useEffect(() => { changePasswordValidator(); }, [changePasswordState.oldPassword, changePasswordState.newPassword, changePasswordState.confermPassword, username]);
-    const changePasswordValidator = () => {
-        let arr = [...changePasswordValidationItems];
-        let char_upperCase = new RegExp(/([A-Z])/g);
-        let char_lowerCase = new RegExp(/([a-z])/g);
-        let char_number = new RegExp(/([0-9])/g);
-        let char_symbol = new RegExp(/[!@?#\$%\^\&*\)\(+=._-]/g);
-        if (changePasswordState.oldPassword?.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'changePass_old')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_old', SDK_Localizator.RequiredField));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_old');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (changePasswordState.newPassword?.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'changePass_new')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_new', SDK_Localizator.RequiredField));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_new');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (changePasswordState.confermPassword?.length === 0) {
-            if (!arr.find(item => item.PropertyName === 'changePass_confirm')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_confirm', SDK_Localizator.RequiredField));
-            }
-            ;
-            arr = arr.filter(item => item.PropertyName !== 'changePass_notConfirmed');
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_confirm');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (changePasswordState.newPassword.length > 0 && changePasswordState.confermPassword.length > 0 && changePasswordState.newPassword !== changePasswordState.confermPassword) {
-            if (!arr.find(item => item.PropertyName === 'changePass_notConfirmed')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_notConfirmed', SDKUI_Localizator.PasswordConfirmError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else if (changePasswordState.newPassword.length > 0 && changePasswordState.confermPassword.length > 0 && changePasswordState.newPassword === changePasswordState.confermPassword) {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_notConfirmed');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (changePasswordState.newPassword.length > 0 && changePasswordState.newPassword?.toLowerCase() === username.toLowerCase()) {
-            if (!arr.find(item => item.PropertyName === 'changePass_equalUsername')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_equalUsername', SDKUI_Localizator.PasswordEqualsUsernameError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_equalUsername');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (changePasswordState.newPassword.length > 0 && changePasswordState.newPassword?.toLowerCase().includes(username.toLowerCase())) {
-            if (!arr.find(item => item.PropertyName === 'changePass_containUsername')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_containUsername', SDKUI_Localizator.PasswordContainsUsernameError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_containUsername');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (!char_symbol.test(changePasswordState.newPassword)) {
-            if (!arr.find(item => item.PropertyName === 'changePass_hasNotSymbol')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotSymbol', SDKUI_Localizator.PasswordSymbolError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotSymbol');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (!char_number.test(changePasswordState.newPassword)) {
-            if (!arr.find(item => item.PropertyName === 'changePass_hasNotNumber')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotNumber', SDKUI_Localizator.PasswordNumberError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotNumber');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (!char_lowerCase.test(changePasswordState.newPassword)) {
-            if (!arr.find(item => item.PropertyName === 'changePass_hasNotLower')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotLower', SDKUI_Localizator.PasswordLowercaseError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotLower');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (!char_upperCase.test(changePasswordState.newPassword)) {
-            if (!arr.find(item => item.PropertyName === 'changePass_hasNotUpper')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotUpper', SDKUI_Localizator.PasswordUppercaseError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotUpper');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        if (changePasswordState.newPassword.length < 10 || changePasswordState.newPassword.length > 128) {
-            if (!arr.find(item => item.PropertyName === 'changePass_length')) {
-                arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_length', SDKUI_Localizator.PasswordLengthError));
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-        else {
-            {
-                arr = arr.filter(item => item.PropertyName !== 'changePass_length');
-            }
-            ;
-            setChangePasswordValidationItems(arr);
-        }
-    };
-    // const goBack = (button: ButtonNames) => { if (button !== ButtonNames.OK) return; onClose && onClose(); setChangePasswordState({ confermPassword: '', newPassword: '', oldPassword: '' }); }
-    const goBackToLogin = (button) => { if (button !== ButtonNames.OK)
-        return; back(); };
-    const changePasswordAsync = async () => {
-        let cpd = new ChangePswDescriptor();
-        cpd.archiveID = tmSession?.SessionDescr?.archiveID;
-        cpd.userName = username;
-        cpd.oldPassword = changePasswordState.oldPassword;
-        cpd.newPassword = changePasswordState.newPassword;
-        cpd.cultureID = CultureIDs.It_IT;
-        try {
-            TMSpinner.show();
-            await tmSession?.NewUserEngine().ChangePasswordAsync(cpd);
-            TMMessageBoxManager.show({ buttons: [ButtonNames.OK], onButtonClick: goBackToLogin, message: SDKUI_Localizator.PasswordChangedSuccessfully });
-        }
-        catch (e) {
-            TMExceptionBoxManager.show({ exception: e });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    };
-    const back = () => { onClose && onClose(); setChangePasswordState({ confermPassword: '', newPassword: '', oldPassword: '' }); };
-    return (_jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ChangePassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.OldPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, oldPassword: e.target.value }), value: changePasswordState.oldPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_old') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, newPassword: e.target.value }), value: changePasswordState.newPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_new' || item.PropertyName === 'changePass_equalUsername' || item.PropertyName === 'changePass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, confermPassword: e.target.value }), value: changePasswordState.confermPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_confirm' || item.PropertyName === 'changePass_notConfirmed') }) })] }) }) }) }), _jsx(TMPasswordManager, { operation: "change", validationItems: changePasswordValidationItems }), hasBack && _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: back, tabIndex: enable ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && back(), style: { userSelect: 'none', cursor: enable ? 'pointer' : 'default', color: enable ? TMColors.primary : 'rgb(180,180,180)', fontSize: '1rem' }, children: SDKUI_Localizator.Back }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", caption: SDKUI_Localizator.Save, disabled: changePasswordValidationItems.length > 0, onClick: () => { changePasswordAsync(); }, showTooltip: false }) }) })] }) }));
-};
-export default TMLoginForm;