@topconsultnpm/sdkui-react 6.17.0-test10

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import styled, { keyframes } from "styled-components";
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const MenuContainer = styled.div `
+  position: absolute;
+  top: ${(props) => (typeof props.$y === "number" ? `${props.$y}px` : props.$y)};
+  left: ${(props) => (typeof props.$x === "number" ? `${props.$x}px` : props.$x)};
+  background: #2559A5 0% 0% no-repeat padding-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  opacity: ${(props) => (props.$visible ? 1 : 0)};
+  transform-origin: top left;
+  animation: ${(props) => (props.$visible ? fadeIn : "none")} 0.3s ease-out;
+  transition: opacity 0.2s ease-out;
+  z-index:1000;
+`;
+const Menu = ({ visible = false, children, x, y, onClose }) => {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        if (visible) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [visible, onClose]);
+    return visible ? (_jsx(MenuContainer, { ref: menuRef, "$x": x, "$y": y, "$visible": visible, children: children })) : null;
+};
+export default Menu;

package/lib/components/forms/Login/OTPReader.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface OTPReaderProps {
+    digits: string[];
+    resendCooldown?: number;
+    header?: any;
+    text?: any;
+    additionalButtons?: any[];
+    isMobile?: boolean;
+    onChange: (index: number, value: string) => void;
+    onFullChange?: (allDigits: string[]) => void;
+    onResendOTP?: () => Promise<void>;
+}
+declare const OTPReader: React.FC<OTPReaderProps>;
+export default OTPReader;

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { LOGINLocalizator } from './LOGINLocalizator';
+import { SDKUI_Localizator } from '../../../helper';
+import ShowAlert from '../../base/TMAlert';
+import TMButton from '../../base/TMButton';
+const OTPReader = ({ digits, onChange, onFullChange, onResendOTP, resendCooldown = 60, header, text, additionalButtons = [], isMobile = false }) => {
+    const inputRefs = useRef([]);
+    const [resendTimer, setResendTimer] = useState(0);
+    useEffect(() => {
+        if (inputRefs.current[0]) {
+            inputRefs.current[0].focus();
+        }
+    }, []);
+    const clearBtnDisabled = useMemo(() => {
+        return !digits.find(d => d.length > 0);
+    }, [digits]);
+    const handleChange = (value, index) => {
+        if (!/^\d?$/.test(value))
+            return;
+        onChange(index, value);
+        if (value && index < 5) {
+            inputRefs.current[index + 1]?.focus();
+        }
+    };
+    const handleKeyDown = (e, index) => {
+        if (e.key === 'Backspace' && !digits[index] && index > 0) {
+            onChange(index - 1, '');
+            inputRefs.current[index - 1]?.focus();
+            e.preventDefault();
+        }
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('Text').trim();
+        const cleaned = text.replace(/\D/g, '');
+        if (cleaned.length !== 6) {
+            ShowAlert({ message: LOGINLocalizator.InvalidPastedCode, mode: 'warning', duration: 5000, title: LOGINLocalizator.InvalidOtp });
+            return;
+        }
+        if (onFullChange) {
+            onFullChange(cleaned.split(''));
+        }
+        else {
+            cleaned.split('').forEach((digit, i) => {
+                onChange(i, digit);
+            });
+        }
+        inputRefs.current[5]?.focus();
+    };
+    const handleClearOTP = () => {
+        if (onFullChange) {
+            onFullChange(Array(6).fill(''));
+            inputRefs.current[0]?.focus();
+        }
+    };
+    const handleResendOTP = async () => {
+        if (!onResendOTP)
+            return;
+        try {
+            await onResendOTP();
+            startCooldown();
+        }
+        catch (err) {
+            ShowAlert({ message: LOGINLocalizator.FailedToResendOtp, mode: 'error', duration: 5000, title: LOGINLocalizator.ResendFailed });
+        }
+    };
+    const startCooldown = () => {
+        setResendTimer(resendCooldown);
+        const interval = setInterval(() => {
+            setResendTimer((prev) => {
+                if (prev <= 1) {
+                    clearInterval(interval);
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+    };
+    const safeDigits = digits.length === 6 ? digits : Array(6).fill('');
+    return (_jsxs(Container, { children: [_jsx(LargeTitle, { children: header ?? LOGINLocalizator.EnterOtpCode }), _jsx(Title, { children: text ?? LOGINLocalizator.EnterOtpEmailOnly }), _jsx(InputsWrapper, { children: safeDigits.map((digit, i) => (_jsx(DigitBox, { "$isMobile": isMobile, "$filled": !!digit, maxLength: 1, value: digit, onChange: (e) => handleChange(e.target.value, i), onKeyDown: (e) => handleKeyDown(e, i), onPaste: handlePaste, ref: (el) => (inputRefs.current[i] = el), inputMode: "numeric" }, i * 2))) }), _jsxs(ControlsRow, { "$isMobile": isMobile, children: [_jsx(TMButton, { btnStyle: 'text', disabled: clearBtnDisabled, caption: SDKUI_Localizator.ClearOTP, showTooltip: false, onClick: handleClearOTP, color: 'tertiary' }), onResendOTP && (_jsx(TMButton, { btnStyle: 'text', disabled: resendTimer > 0, caption: resendTimer > 0 ? `${LOGINLocalizator.ResendIn + ' ' + resendTimer}s` : LOGINLocalizator.ResendOtp, showTooltip: false, onClick: handleResendOTP, color: 'success' })), additionalButtons.map((btn, index) => (_jsx("div", { children: btn }, index * 2)))] })] }));
+};
+export default OTPReader;
+const Container = styled.div ` display: flex; flex-direction: column; align-items: center; gap: 2px; `;
+const InputsWrapper = styled.div ` display: flex; gap: 14px; `;
+const DigitBox = styled.input ` width: ${props => props.$isMobile ? '40px' : '50px'}; height: ${props => props.$isMobile ? '50px' : '60px'}; font-size: 30px; text-align: center; border: 2px solid ${({ $filled }) => ($filled ? '#007bff' : '#ccc')}; border-radius: 12px; transition: 0.2s ease; outline: none; background: white; box-shadow: ${({ $filled }) => ($filled ? '0 0 6px #007bffaa' : 'none')}; caret-color: transparent; &:focus { border-color: #007bff; box-shadow: 0 0 6px #007bff55; } `;
+const LargeTitle = styled.h2 ` font-size: 16px; text-align: center; width: 100%; color: #333; margin-bottom: 20px; `;
+const Title = styled.div ` width: 100%; margin-bottom: 20px; font-size: 14px; text-align: center; `;
+const ControlsRow = styled.div ` display: flex; gap: ${props => props.$isMobile ? '2px' : '16px'}; margin-top: ${props => props.$isMobile ? '2px' : '12px'};; align-items: center; flex-direction:${props => props.$isMobile ? 'column' : 'row'}; width: max-content; justify-content: center; `;

package/lib/components/forms/Login/PasswordStrengthChecker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    password: string;
+    onValidationChange?: (isValid: boolean, unmetRules: string[]) => void;
+}
+declare const PasswordStrengthChecker: React.FC<Props>;
+export default PasswordStrengthChecker;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { SDKUI_Localizator, IconInfo } from '../../../helper';
+import { TMColors } from '../../../utils/theme';
+const PasswordStrengthChecker = ({ password, onValidationChange }) => {
+    const rules = useMemo(() => {
+        return [
+            {
+                label: SDKUI_Localizator.PasswordRule_Length,
+                test: (pw) => pw.length >= 16 && pw.length <= 128,
+            },
+            {
+                label: SDKUI_Localizator.PasswordRule_Lowercase,
+                test: (pw) => /[a-z]/.test(pw),
+            },
+            {
+                label: SDKUI_Localizator.PasswordRule_Uppercase,
+                test: (pw) => /[A-Z]/.test(pw),
+            },
+            {
+                label: SDKUI_Localizator.PasswordRule_Number,
+                test: (pw) => /\d/.test(pw),
+            },
+            {
+                label: SDKUI_Localizator.PasswordRule_Special,
+                test: (pw) => /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(pw),
+            },
+        ];
+    }, []);
+    const [results, setResults] = useState([]);
+    useEffect(() => {
+        const res = rules.map(rule => rule.test(password));
+        setResults(res);
+        const isValid = res.every(Boolean);
+        const unmetRules = rules.filter((_, i) => !res[i]).map(r => r.label);
+        onValidationChange?.(isValid, unmetRules);
+    }, [password]);
+    return (_jsxs(Wrapper, { children: [_jsxs(Title, { children: [_jsxs(CircleContainer, { children: [" ", _jsx(IconInfo, { color: '#f9c1a8' }), " "] }), SDKUI_Localizator.PasswordRule_Requirement] }), rules.map((rule, i) => (_jsxs(Rule, { "$passed": results[i], children: [" ", rule.label, " "] }, i * 2)))] }));
+};
+export default PasswordStrengthChecker;
+const Wrapper = styled.div ` padding: 10px; border-radius: 12px; background: linear-gradient(135deg, #f9c1a8 0%, white 40%, white 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); max-width: 400px; `;
+const Title = styled.h5 ` font-size: 1rem; margin-bottom: 12px; color: #333; display: flex; align-items: center; gap: 10px; `;
+const CircleContainer = styled.div ` border-radius: 50px; display: flex; align-items: center; justify-content: center; background-color: white; width: 25px; height: 25px; `;
+const Rule = styled.div ` display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: ${({ $passed }) => ($passed ? TMColors.success : TMColors.error)}; font-weight: 500; font-size: 0.95rem; &::before { content: '${({ $passed }) => ($passed ? '✔' : '✖')}'; font-weight: bold; font-size: 1rem; } `;

package/lib/components/forms/Login/RapidAccessLogin.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ArchiveDescriptor, AuthenticationModes, CultureIDs } from '@topconsultnpm/sdk-ts';
+import { TMEndpointsType } from './TMLoginForm';
+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;
+    color?: string;
+    icon?: any;
+}
+interface RapidAccessLoginProps {
+    isMobile?: boolean;
+    onClose?: () => void;
+    onSelect?: (rapidAccess: ITMLoginHistory) => void;
+}
+declare const RapidAccessLogin: React.FC<RapidAccessLoginProps>;
+export default RapidAccessLogin;

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

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import TextBox from './TextBox';
+import { Divider } from './ChangePasswordInputs';
+import { AuthenticationModes, LocalStorageService } from '@topconsultnpm/sdk-ts';
+import { cultureIDsDataSource } from './TMLoginForm';
+import Menu from './Menu';
+import { IconArchive, IconArrowLeft, IconCloseOutline, IconExport, IconImport, IconSave, IconUser, SDKUI_Localizator, truncateText } from '../../../helper';
+import { TMColors, Colors } from '../../../utils/theme';
+import TMButton from '../../base/TMButton';
+import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMTooltip from '../../base/TMTooltip';
+import { LOGINLocalizator } from './LOGINLocalizator';
+const LOCAL_STORAGE_KEY = 'LOGIN_HISTORY';
+const RapidAccessLogin = ({ isMobile = false, onClose, onSelect }) => {
+    let localRA = LocalStorageService.getItem(LOCAL_STORAGE_KEY);
+    const [rapidAccesses, setRapidAccesses] = useState(localRA ?? []);
+    const [searchedRapidAccesses, setSearchedRapidAccesses] = useState([]);
+    const [selectedRapidAccess, setSelectedRapidAccess] = useState();
+    const [searchValue, setSearchValue] = useState('');
+    const additionalClearBtn = useMemo(() => {
+        if (searchValue.length === 0)
+            return [];
+        return [{
+                icon: _jsx(IconCloseOutline, {}),
+                onClick: () => setSearchValue(''),
+                tooltip: SDKUI_Localizator.Clear
+            }];
+    }, [searchValue]);
+    useEffect(() => {
+        if (!localRA)
+            return;
+        setRapidAccesses(localRA);
+    }, []);
+    useEffect(() => {
+        if (!searchValue || searchValue.length === 0)
+            setSearchedRapidAccesses(rapidAccesses);
+        const spa = rapidAccesses.filter((ra) => ra.name.toLowerCase().includes(searchValue.toLowerCase()));
+        setSearchedRapidAccesses(spa);
+    }, [searchValue, rapidAccesses]);
+    const remove = useCallback((id) => {
+        if (selectedRapidAccess) {
+            if (rapidAccesses.find(ra => ra.id === id) === selectedRapidAccess) {
+                setSelectedRapidAccess(undefined);
+            }
+        }
+        ;
+        let removed = rapidAccesses.filter(r => r.id !== id);
+        setRapidAccesses(removed);
+        LocalStorageService.setItem(LOCAL_STORAGE_KEY, removed);
+    }, [rapidAccesses, selectedRapidAccess]);
+    const select = useCallback((id) => {
+        let ra = rapidAccesses.find(ra => ra.id === id);
+        setSelectedRapidAccess(ra);
+        if (!ra || !onSelect)
+            return;
+        onSelect(ra);
+        onClose?.();
+    }, [rapidAccesses, onSelect]);
+    const changeName = useCallback((id, editedName) => {
+        let ra = LocalStorageService.getItem(LOCAL_STORAGE_KEY);
+        if (!ra)
+            return;
+        let deepCopy = structuredClone(ra);
+        let index = deepCopy.findIndex(rap => rap.id === id);
+        deepCopy[index].name = editedName;
+        LocalStorageService.setItem(LOCAL_STORAGE_KEY, deepCopy);
+        setRapidAccesses(deepCopy);
+    }, [rapidAccesses]);
+    const setDefault = useCallback((id) => {
+        let deepCopy = structuredClone(rapidAccesses);
+        let index = deepCopy.findIndex(dc => dc.id === id);
+        deepCopy[index].preferred = !deepCopy[index].preferred;
+        for (let i = 0; i < deepCopy.length; i++) {
+            if (i === index)
+                continue;
+            deepCopy[i].preferred = false;
+        }
+        setRapidAccesses(deepCopy);
+        LocalStorageService.setItem(LOCAL_STORAGE_KEY, deepCopy);
+    }, [rapidAccesses]);
+    const setColor = useCallback((id, selectedColor) => {
+        let deepCopy = structuredClone(rapidAccesses);
+        let index = deepCopy.findIndex(dc => dc.id === id);
+        deepCopy[index].color = selectedColor;
+        setRapidAccesses(deepCopy);
+        LocalStorageService.setItem(LOCAL_STORAGE_KEY, deepCopy);
+    }, [rapidAccesses]);
+    const setIcon = useCallback((id, selectedIconKey) => {
+        let deepCopy = structuredClone(rapidAccesses);
+        let index = deepCopy.findIndex(dc => dc.id === id);
+        deepCopy[index].icon = selectedIconKey; // just save the key
+        LocalStorageService.setItem(LOCAL_STORAGE_KEY, deepCopy);
+        setRapidAccesses(deepCopy);
+    }, [rapidAccesses]);
+    const sortedArray = useMemo(() => {
+        return searchedRapidAccesses.sort((a, b) => a.name.localeCompare(b.name));
+    }, [searchedRapidAccesses]);
+    const onExportCallback = () => {
+        const exportToFile = (data, filenamePrefix) => {
+            const file = new Blob([JSON.stringify(data, null, 2)], { type: 'text/plain' });
+            const element = document.createElement("a");
+            const currentDate = new Date();
+            const dateString = currentDate.toISOString().split('T')[0];
+            const timeString = currentDate.toISOString().split('T')[1].split('.')[0].substring(0, 5);
+            element.href = URL.createObjectURL(file);
+            element.download = `${filenamePrefix}_${dateString}_${timeString}.txt`;
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+        };
+        if (searchedRapidAccesses.length > 0) {
+            exportToFile(searchedRapidAccesses, "TopMedia_SURFER_LOGIN_HISTORY");
+        }
+        else {
+            alert(SDKUI_Localizator.NoCredentialsSaved);
+        }
+    };
+    const onImportCallback = () => {
+        const createFileInput = (accept, onChange) => {
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = accept;
+            input.addEventListener('change', (event) => {
+                const file = event.target.files?.[0];
+                if (file)
+                    onChange(file);
+            });
+            input.click();
+        };
+        const handleFileRead = (file, onSuccess, onError) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                try {
+                    const fileContent = reader.result;
+                    const parsedData = JSON.parse(fileContent);
+                    onSuccess(parsedData);
+                }
+                catch (error) {
+                    onError();
+                }
+            };
+            reader.readAsText(file);
+        };
+        const generateModifiedData = (parsedData, existingHistory) => {
+            const existingNames = new Set(existingHistory.map(item => item.name));
+            const maxId = Math.max(...existingHistory.map(item => Number(item.id) || 0), 0);
+            const makeUniqueName = (baseName) => {
+                if (!existingNames.has(baseName)) {
+                    existingNames.add(baseName);
+                    return baseName;
+                }
+                let suffix = 1;
+                let newName = `${baseName} (${suffix})`;
+                while (existingNames.has(newName)) {
+                    suffix++;
+                    newName = `${baseName} (${suffix})`;
+                }
+                existingNames.add(newName);
+                return newName;
+            };
+            return parsedData.map((item, index) => {
+                const id = maxId + index + 1;
+                return {
+                    ...item,
+                    name: makeUniqueName(item.name),
+                    id,
+                    preferred: false
+                };
+            });
+        };
+        const updateHistoryState = (newData) => {
+            setRapidAccesses((prevState) => {
+                const updatedAccesses = [...prevState, ...newData];
+                LocalStorageService.setItem(LOCAL_STORAGE_KEY, updatedAccesses);
+                return updatedAccesses;
+            });
+        };
+        createFileInput(".txt", (file) => {
+            handleFileRead(file, (parsedData) => {
+                const modifiedData = generateModifiedData(parsedData, rapidAccesses);
+                updateHistoryState(modifiedData);
+            }, () => alert(SDKUI_Localizator.ErrorParsingFileContent));
+        });
+    };
+    return (_jsxs(Wrapper, { children: [_jsx(BackButtonWrapper, { children: _jsx(TMButton, { onClick: onClose, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) }), _jsxs(ContentWrapper, { children: [_jsxs(ContentHeader, { children: [_jsx("h3", { style: { width: 'max-content' }, children: LOGINLocalizator.QuickAccess }), _jsx("div", { style: { width: '50%' }, children: _jsx(TextBox, { value: searchValue, onValueChanged: (value) => setSearchValue(value), type: 'text', placeHolder: 'Cerca...', additionalIcons: additionalClearBtn }) })] }), _jsx(Divider, {}), _jsx(List, { children: sortedArray.map((rapidAccess, index) => (_jsx(RapidAccessItem, { index: index, onRemove: remove, onSelect: select, onDefault: setDefault, onChangeName: changeName, rapidAccess: rapidAccess, isMobile: isMobile, onChangeColor: setColor, onChangeIcon: setIcon }, index * 2))) })] }), _jsxs(ToolbarWrapper, { children: [_jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconImport, {}), caption: SDKUI_Localizator.Import, color: 'tertiary', onClick: onImportCallback }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconExport, {}), caption: SDKUI_Localizator.Export, color: 'primary', onClick: onExportCallback })] })] }));
+};
+export default RapidAccessLogin;
+const RapidAccessItem = ({ rapidAccess, isMobile = false, onRemove, onSelect, onDefault, onChangeName, onChangeColor, onChangeIcon, index = 0 }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [name, setName] = useState(rapidAccess.name);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [showIconMenu, setShowIconMenu] = useState(false);
+    const hasAuthDomain = useMemo(() => {
+        return (rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf || rapidAccess.authenticationMode === AuthenticationModes.WindowsThroughTopMedia);
+    }, [rapidAccess]);
+    const iconMap = {
+        business: _jsx(IconBaselineBusiness, {}),
+        default: _jsx(IconUser, {}),
+        person: _jsx(IconBusinessperson, {}),
+        center: _jsx(IconBusinessCenterRounded, {}),
+        location: _jsx(IconLocationCompanyFilled, {}),
+        explore: _jsx(IconTwotoneDataExploration, {}),
+        data: _jsx(IconData, {}),
+        crown: _jsx(Crown24Filled, {}),
+        pen: _jsx(IconPen, {}),
+        archive: _jsx(IconArchive, {})
+    };
+    const colors = useMemo(() => {
+        return [
+            TMColors.primary, TMColors.tertiary,
+            TMColors.success, TMColors.error,
+            TMColors.secondary, TMColors.text_normal,
+            TMColors.warning, Colors.contenitore_su_colore_primary,
+            Colors.color_on_tertiary_container,
+            Colors.tertiary_container
+        ];
+    }, []);
+    const icons = useMemo(() => Object.entries(iconMap), []);
+    const domainValue = useMemo(() => {
+        switch (rapidAccess.authenticationMode) {
+            case AuthenticationModes.TopMediaOnBehalfOf: return rapidAccess.domainAlternative;
+            case AuthenticationModes.WindowsThroughTopMedia: return rapidAccess.domain;
+            default: return '';
+        }
+    }, [rapidAccess]);
+    const saveNemeBtnDisabled = useMemo(() => {
+        let localRA = LocalStorageService.getItem(LOCAL_STORAGE_KEY);
+        if (name.length === 0)
+            return true;
+        if (name === rapidAccess.name)
+            return true;
+        if (localRA?.find(ra => ra.name === name))
+            return true;
+        return false;
+    }, [name, rapidAccess.name]);
+    const additionalSaveBtn = useMemo(() => {
+        return [{
+                icon: _jsx(IconSave, {}),
+                onClick: () => !saveNemeBtnDisabled && onChangeName(rapidAccess.id, name),
+                tooltip: SDKUI_Localizator.Save,
+                color: saveNemeBtnDisabled ? 'gray' : TMColors.success
+            }];
+    }, [name, rapidAccess.name, rapidAccess.id]);
+    useEffect(() => { setName(rapidAccess.name); }, []);
+    const onRemovePopup = () => {
+        const msg = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(rapidAccess.name);
+        TMMessageBoxManager.show({
+            title: LOGINLocalizator.QuickAccess, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                try {
+                    onRemove(rapidAccess.id);
+                }
+                catch (e) {
+                    TMExceptionBoxManager.show({ exception: e });
+                }
+            }
+        });
+    };
+    const handleClose = () => {
+        setIsMenuOpen(false);
+        setShowIconMenu(false);
+    };
+    const onColorPick = (color) => {
+        onChangeColor(rapidAccess.id, color);
+        handleClose();
+    };
+    const onIconPick = (iconKey) => {
+        onChangeIcon(rapidAccess.id, iconKey);
+        handleClose();
+    };
+    const expandedAriaHandler = () => setIsExpanded(!isExpanded);
+    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(RapidAccessName, { onClick: expandedAriaHandler, children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: expandedAriaHandler, 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, { "$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; 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; `;
+const ItemOperationsWrapper = styled.div ` display: flex; align-items: center; gap: 5px; padding: 0 5px 0 0  ; `;
+const ProfileCircle = styled.div ` cursor: pointer; min-width:30px; width: 30px; height: 30px; background-color: ${props => props.$color}; border-radius: 50px; display: flex; align-items: center; justify-content: center; color: white; `;
+const Container = styled.div ` display: flex; flex-direction: column; gap: 10px; width: 100%; border-bottom: 1px solid lightgray; `;
+const Wrapper = styled.div ` width: 100%; height: 100%; background-color: white; position: absolute; top: 0; left: 0; `;
+const BackButtonWrapper = styled.div ` position: absolute; top: 20px; left: 20px; `;
+const ToolbarWrapper = styled.div ` display: flex; gap: 10px; align-items: center; position: absolute; top: 20px; right: 20px; `;
+const ContentWrapper = styled.div ` width: 100%; margin-top: 40px; padding: 40px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100% - 50px); overflow: auto; height:100%; `;
+const ContentHeader = styled.div ` width: 100%; display: flex; align-items: center; justify-content: space-between; `;
+const PreferredIconContainer = styled.div ` margin-right: 5px; cursor: pointer; `;
+const StyledMenuItemContainer = styled.div `display:flex;align-items:center;gap:10px;padding:0;`;
+const RapidAccessName = styled.p ``;
+function IconCollapse(props) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M8.12 14.71L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0" }), " "] })); } //NOSONAR
+function IconExpand(props) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z" }), " "] })); } //NOSONAR
+function IconStarOutline(props) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "m8.587 8.236l2.598-5.232a.911.911 0 0 1 1.63 0l2.598 5.232l5.808.844a.902.902 0 0 1 .503 1.542l-4.202 4.07l.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75l-4.202-4.07a.902.902 0 0 1 .503-1.54z" }), " "] })); } //NOSONAR
+function IconStarSolid(props) { return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d: "m8.587 8.236l2.598-5.232a.911.911 0 0 1 1.63 0l2.598 5.232l5.808.844a.902.902 0 0 1 .503 1.542l-4.202 4.07l.992 5.75c.127.738-.653 1.3-1.32.952L12 18.678l-5.195 2.716c-.666.349-1.446-.214-1.319-.953l.992-5.75l-4.202-4.07a.902.902 0 0 1 .503-1.54z" }), " "] })); } //NOSONAR //NOSONAR
+function IconBusinessperson(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M13.2 10L11 13l-1-1.4L9 13l-2.2-3C3 11 3 13 3 16.9c0 0 3 1.1 6.4 1.1h1.2c3.4-.1 6.4-1.1 6.4-1.1c0-3.9 0-5.9-3.8-6.9m-3.2.7L8.4 10l1.6 1.6l1.6-1.6zm0-8.6c-1.9 0-3 1.8-2.7 3.8S8.6 9.3 10 9.3s2.4-1.4 2.7-3.4c.3-2.1-.8-3.8-2.7-3.8" }), " "] })); } //NOSONAR
+function IconBusinessCenterRounded(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M11 15v-2h2v2zm-1-8h4V5.615q0-.23-.192-.423T13.385 5h-2.77q-.23 0-.423.192T10 5.615zM4.616 20q-.691 0-1.153-.462T3 18.384V14.5h7v.692q0 .348.23.578t.578.23h2.384q.348 0 .578-.23t.23-.578V14.5h7v3.885q0 .69-.462 1.152T19.385 20zM3 13.5V8.616q0-.691.463-1.153T4.615 7H9V5.615q0-.69.463-1.153T10.616 4h2.769q.69 0 1.153.462T15 5.615V7h4.385q.69 0 1.152.463T21 8.616V13.5h-7v-.692q0-.348-.23-.578t-.578-.23h-2.384q-.348 0-.578.23t-.23.578v.692z" }), " "] })); } //NOSONAR
+function IconBaselineBusiness(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M12 7V3H2v18h20V7zM6 19H4v-2h2zm0-4H4v-2h2zm0-4H4V9h2zm0-4H4V5h2zm4 12H8v-2h2zm0-4H8v-2h2zm0-4H8V9h2zm0-4H8V5h2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8zm-2-8h-2v2h2zm0 4h-2v2h2z" }), " "] })); } //NOSONAR
+function IconLocationCompanyFilled(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "none", d: "M21 18h-2v-8h-6v8h-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2Zm-4-2h-2v2h2Zm0-4h-2v2h2Z" }), " ", _jsx("path", { fill: "currentColor", d: "M16 2A11.013 11.013 0 0 0 5 13a10.9 10.9 0 0 0 2.216 6.6s.3.395.349.452L16 30l8.439-9.953c.044-.053.345-.447.345-.447l.001-.003A10.9 10.9 0 0 0 27 13A11.013 11.013 0 0 0 16 2m1 16h-2v-2h2Zm0-4h-2v-2h2Zm4 4h-2v-8h-6v8h-2v-8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2Z" }), " "] })); } //NOSONAR
+function IconTwotoneDataExploration(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M12 20c-2.89 0-5.43-1.54-6.83-3.84l2.95-2.95L11.41 16L16 11.42V13h2V8h-5v2h1.58l-3.28 3.28L8 10.5l-3.69 3.7C4.11 13.5 4 12.76 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m7.5.5c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1", opacity: ".3" }), " ", _jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10h8c1.1 0 2-.9 2-2v-8c0-5.52-4.48-10-10-10m0 18c-2.89 0-5.43-1.54-6.83-3.84l2.95-2.95L11.41 16L16 11.42V13h2V8h-5v2h1.58l-3.28 3.28L8 10.5l-3.69 3.7C4.11 13.5 4 12.76 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m7.5.5c-.55 0-1-.45-1-1s.45-1 1-1s1 .45 1 1s-.45 1-1 1" }), " "] })); } //NOSONAR
+function IconData(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16s-7.163 16-16 16m8.14-22.086l1.607-1.594c.38-.376.301-1.064-.174-1.535c-.475-.472-1.17-.549-1.549-.172l-3.016 2.99l-.103.103l-2.628 2.605a4.56 4.56 0 0 0-5.867.45a4.464 4.464 0 0 0-.454 5.817l-2.006 1.99a7.8 7.8 0 0 1-1.189-2.293c-.673-2.038-.492-4.27.6-6.11c1.703-2.87 4.75-4.118 7.638-3.752a1.07 1.07 0 0 0 1.216-.986a1.307 1.307 0 0 0-1.174-1.374c-2.901-.297-5.9.65-8.115 2.846c-3.67 3.638-3.885 9.409-.66 13.338l-1.84 1.825c-.363.36-.273 1.035.203 1.506c.475.471 1.155.562 1.518.202l1.981-1.964h.001l1.432-1.42l.003-.004l2.322-2.302a4.56 4.56 0 0 0 4.92-.976a4.46 4.46 0 0 0 .985-4.879l2.634-2.611c1.931 2.908 1.548 6.934-1.11 9.568a7.9 7.9 0 0 1-6.13 2.279a.98.98 0 0 0-1.03.888l-.028.32a1.04 1.04 0 0 0 .991 1.13a10.3 10.3 0 0 0 7.832-2.996c3.597-3.567 4.013-9.061 1.19-12.89zm-7.001 7.535a2.18 2.18 0 0 1-3.06 0a2.135 2.135 0 0 1 0-3.033a2.18 2.18 0 0 1 3.06 0a2.135 2.135 0 0 1 0 3.033" }), " "] })); } //NOSONAR
+function IconPen(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "m15.909 4.561l-4.47-4.47c-.146-.146-.338-.113-.427.073l-.599 1.248l4.175 4.175l1.248-.599c.186-.089.219-.282.073-.427M9.615 2.115L5.5 2.458c-.273.034-.501.092-.58.449v.001C3.804 8.268 0 13.499 0 13.499l.896.896l4.25-4.25a1.5 1.5 0 1 1 .707.707l-4.25 4.25l.896.896s5.231-3.804 10.591-4.92h.001c.357-.078.415-.306.449-.58l.343-4.115l-4.269-4.269z" }), " "] })); } //NOSONAR
+function Crown24Filled(props) { return (_jsxs("svg", { fontSize: 20, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "1em", height: "1em", ...props, children: [" ", _jsx("path", { fill: "currentColor", d: "M14 5c0 .53-.206 1.012-.543 1.37l2.624 3.28a.25.25 0 0 0 .307.068l2.65-1.326A2.004 2.004 0 0 1 21 6a2 2 0 0 1 .444 3.95l-1.804 9.623A1.75 1.75 0 0 1 17.92 21H6.08a1.75 1.75 0 0 1-1.72-1.427L2.556 9.95a2 2 0 1 1 2.406-1.559l2.65 1.326a.25.25 0 0 0 .307-.068l2.624-3.28A2 2 0 1 1 14 5m-2 12a2 2 0 1 0 0-4a2 2 0 0 0 0 4" }), " "] })); } //NOSONAR

package/lib/components/forms/Login/RecoverPasswordFlow.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ITopMediaSession } from '@topconsultnpm/sdk-ts';
+import { WindowHeight } from './TMLoginForm';
+interface RecoverPasswordFlowProps {
+    windowHeight?: WindowHeight;
+    tmSession: ITopMediaSession;
+    isMobile?: boolean;
+    onClose?: () => void;
+}
+declare const RecoverPasswordFlow: React.FC<RecoverPasswordFlowProps>;
+export default RecoverPasswordFlow;