@topconsultnpm/sdkui-react-beta 6.7.24 → 6.7.25

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

@@ -17,6 +17,7 @@ export interface ITMLoginHistory {
     username: string;
     language: CultureIDs;
     onBehalfUsername: string;
+    preferred: boolean;
 }
 export type TMEndpointsType = {
     Description: string;
@@ -38,11 +39,11 @@ export declare const cultureIDsDataSource: {
 }[];
 declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
 export declare const TMChangePassword: ({ deviceType, tmSession, username, onClose, enable, hasBack }: {
-    deviceType?: DeviceType;
-    hasBack?: boolean;
-    tmSession?: ITopMediaSession;
+    deviceType?: DeviceType | undefined;
+    hasBack?: boolean | undefined;
+    tmSession?: ITopMediaSession | undefined;
     username: string;
-    onClose?: () => void;
-    enable?: boolean;
+    onClose?: (() => void) | undefined;
+    enable?: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TMLoginForm;

package/lib/components/forms/TMLoginForm.js

@@ -117,6 +117,28 @@ const TMLoginForm = (props) => {
     const [saveLoginInfo, setSaveLoginInfo] = useState(false);
     const [saveLoginInfoName, setSaveLoginInfoName] = useState("");
     const [loginHistory, setLoginHistory] = useState(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
+    const [preferredLoginItem, setPreferredLoginItem] = useState(undefined);
+    useEffect(() => {
+        if (props.saveLoginHistoryToLocalStorage && loginHistory.length > 0) {
+            setPreferredLoginItem(loginHistory.find(item => item.preferred));
+        }
+    }, []);
+    useEffect(() => {
+        if (props.saveLoginHistoryToLocalStorage && preferredLoginItem !== undefined) {
+            setEndpoint(preferredLoginItem.endpoint);
+            setArchive(preferredLoginItem.archive);
+            setUsername(preferredLoginItem.username);
+            setPassword("");
+            setAuthMode(preferredLoginItem.authenticationMode);
+            setDomain(preferredLoginItem.domain);
+            setDomainArternative(preferredLoginItem.domainAlternative);
+            setOnBeHalfUsername(preferredLoginItem.onBehalfUsername);
+            setOnBeHalfPassword("");
+            if (props.onChangeLanguage) {
+                props.onChangeLanguage(preferredLoginItem.language);
+            }
+        }
+    }, [preferredLoginItem]);
     useEffect(() => {
         let interval;
         if (recoveryPasswordState.step === 2 && wait > 0) {
@@ -141,7 +163,7 @@ const TMLoginForm = (props) => {
     useEffect(() => {
         setEndpoints(props.endpoints);
         if (props.sdInput) {
-            if (props.sdInput.userName)
+            if (props.sdInput.userName && preferredLoginItem === undefined)
                 setUsername(props.sdInput.userName);
         }
     }, []);
@@ -696,6 +718,7 @@ const TMLoginForm = (props) => {
                         username: username,
                         language: props.cultureID ?? CultureIDs.None,
                         onBehalfUsername: onBehalfUsername,
+                        preferred: false
                     };
                     updateLoginHistory(loginHistoryNewEntry);
                 }

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

@@ -25,5 +25,9 @@ interface TMLoginItemTemplateProps {
     deleteItemFromLocalStorage: (name: string) => void;
     setSelectedItems: React.Dispatch<React.SetStateAction<ITMLoginHistory[]>>;
     setSearchText: React.Dispatch<React.SetStateAction<string>>;
+    historyState: {
+        loginHistory: Array<ITMLoginHistory>;
+        searchedLoginHistory: Array<ITMLoginHistory>;
+    };
 }
 export declare const TMLoginItemTemplate: React.FC<TMLoginItemTemplateProps>;

package/lib/components/forms/TMLoginPopupSaveLoginInfo.js

@@ -9,6 +9,7 @@ import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base
 import TMTooltip from "../base/TMTooltip";
 import TMTextBox from "../editors/TMTextBox";
 import { TMSearchBar } from "../sidebar/TMHeader";
+import TMCheckBox from "../editors/TMCheckBox";
 const TMLoginPopupSaveLoginInfo = (props) => {
     const { setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, onChangeLanguage } = props;
     // State to manage loading status
@@ -105,7 +106,8 @@ const TMLoginPopupSaveLoginInfo = (props) => {
     const titleRender = () => (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsx("button", { style: { background: 'none', border: 'none', fontSize: '16px', cursor: 'pointer' }, onClick: hidePopup, children: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-remove" }) })] }));
     // Render a styled title with its ID and title content, using flex layout
     const itemTitleRender = (titleObj, id) => {
-        return _jsxs("div", { style: { display: "flex", gap: "20px", fontFamily: "Arial, sans-serif" }, children: [_jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: id }), _jsx("div", { style: { padding: "10px", fontWeight: "bold", border: "1px solid #ddd", borderRadius: "10px", }, children: titleObj.title })] });
+        const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
+        return _jsxs("div", { style: { display: "flex", gap: "20px", fontFamily: "Arial, sans-serif" }, children: [_jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: id }), _jsx("div", { style: { padding: "10px", fontWeight: "bold", border: "1px solid #ddd", borderRadius: "10px", }, children: titleObj.title }), historyItem?.preferred && _jsx(TMTooltip, { position: "right", content: SDKUI_Localizator.SetAsFavorite, children: _jsx("div", { style: { padding: "10px", border: "1px solid #ddd", borderRadius: "10px", }, children: _jsx("i", { className: "dx-icon-favorites" }) }) })] });
     };
     // Conditionally render popup content based on loading state, available login history, or display login items in an accordion
     const renderPopupContent = () => {
@@ -115,17 +117,19 @@ const TMLoginPopupSaveLoginInfo = (props) => {
         if (historyState.searchedLoginHistory.length === 0) {
             return (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center", padding: "20px" }, children: SDKUI_Localizator.NoCredentialsSaved }));
         }
-        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "10px" }, children: _jsx(Accordion, { selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => itemTitleRender(titleObj, index), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSelectedItems: setSelectedItems, setSearchText: setSearchText }) }, data.id))) }) }));
+        return (_jsx("div", { style: { overflowY: "auto", maxHeight: "calc(100% - 60px)", padding: "10px" }, children: _jsx(Accordion, { selectedItems: selectedItems, onSelectionChanged: onSelectionChanged, collapsible: true, multiple: false, animationDuration: 300, noDataText: SDKUI_Localizator.NoCredentialsSaved, style: { border: "1px solid #ddd", borderRadius: "6px", boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => itemTitleRender(titleObj, index), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage, setSelectedItems: setSelectedItems, setSearchText: setSearchText, historyState: historyState }) }, data.id))) }) }));
     };
     return (_jsxs(Popup, { maxWidth: 600, visible: visible, onHiding: closePopup, title: SDKUI_Localizator.SwitchUser, titleRender: titleRender, hideOnOutsideClick: false, showTitle: true, resizeEnabled: true, dragEnabled: true, showCloseButton: true, children: [_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1, padding: "10px 0" }, children: _jsx(TMSearchBar, { maxWidth: "200px", marginLeft: "0px", onSearchValueChanged: (e) => setSearchText(e), searchValue: searchText }) }), renderPopupContent()] }));
 };
 export default TMLoginPopupSaveLoginInfo;
 export const TMLoginItemTemplate = (props) => {
-    const { data, fillLoginForm, reloadHistoryState, deleteItemFromLocalStorage, setSelectedItems, setSearchText } = props;
+    const { data, fillLoginForm, reloadHistoryState, deleteItemFromLocalStorage, setSelectedItems, setSearchText, historyState } = props;
     const [name, setName] = useState(data.name);
+    const [preferred, setPreferred] = useState(data.preferred ?? false);
     const [error, setError] = useState(false);
     const [validationItems, setValidationItems] = useState([]);
-    const nameIsEqualToInitName = data.name.trim().toLowerCase() === name.trim().toLowerCase();
+    const isNameMatching = data.name.trim().toLowerCase() === name.trim().toLowerCase();
+    const isPreferredMatching = data.preferred === preferred;
     // Effect to handle validation side-effects (like setting error state)
     useEffect(() => {
         const validationsItems = getValidationItems();
@@ -133,19 +137,31 @@ export const TMLoginItemTemplate = (props) => {
         setError(validationsItems.length > 0); // Set error state based on validation result
     }, [name]); // Only re-run when 'name' changes
     // Update the login history item name in local storage if no errors and name is different from the initial name
-    const updateNameHandler = () => {
-        if (error || nameIsEqualToInitName)
+    const updateHandler = () => {
+        if (error || (isNameMatching && isPreferredMatching))
             return;
-        const dataToUpdate = { ...data, name };
-        LocalStorageService.updateItemByField(LOGIN_HISTORY_KEY, "name", data.name, dataToUpdate);
-        reloadHistoryState();
-        setSelectedItems([]);
-        setSearchText("");
+        if (!isNameMatching) {
+            const dataToUpdate = { ...data, name };
+            LocalStorageService.updateItemByField(LOGIN_HISTORY_KEY, "name", data.name, dataToUpdate);
+            reloadHistoryState();
+            setSelectedItems([]);
+            setSearchText("");
+        }
+        if (!isPreferredMatching) {
+            const historyStateUpdtated = historyState.loginHistory.map(history => {
+                if (history.name === data.name) {
+                    return { ...history, preferred };
+                }
+                return { ...history, preferred: false };
+            });
+            LocalStorageService.setItem(LOGIN_HISTORY_KEY, historyStateUpdtated);
+            reloadHistoryState();
+        }
     };
     // Validation logic function
     const getValidationItems = () => {
         const validationsArray = [];
-        if (nameIsEqualToInitName)
+        if (isNameMatching)
             return validationsArray;
         if (name.length === 0)
             validationsArray.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDK_Localizator.RequiredField));
@@ -192,5 +208,5 @@ export const TMLoginItemTemplate = (props) => {
     const randomBGColor = getRandomColorFromText(data.name);
     // Determine the text color (black or white) based on background color luminance
     const textColor = getTextColor(randomBGColor);
-    return _jsxs("div", { style: { display: 'flex', background: '#fff', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: data.name, children: _jsx("div", { style: { background: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '70px', maxHeight: '70px', borderRadius: '50%', fontWeight: 'bold', margin: '20px', textAlign: 'center' }, children: data.name.slice(0, 3).toUpperCase() }) }), _jsxs("div", { style: { padding: '2px', flex: 1 }, children: [_jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.NameForAccess, value: name, readOnly: false, buttons: [{ text: `${SDKUI_Localizator.Save}`, icon: _jsx("i", { style: { color: (error || nameIsEqualToInitName) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateNameHandler }], onValueChanged: (e) => setName(e.target.value), validationItems: validationItems }, "name"), (data.endpoint && data.endpoint?.Description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Endpoint, value: data.endpoint.Description + (' (' + data.endpoint.URL + ')'), readOnly: true, onValueChanged: (e) => setName(e.target.value) }), (data.archive && data.archive?.description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.ArchiveID, value: data.archive.description + (' (' + (data.archive.id ?? '-') + ')'), readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.AuthMode, value: data.authenticationMode, readOnly: true }), data.domain.length > 0 && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Domain, value: data.domain, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.UserName, value: data.username, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.CultureID, value: cultureIDsDataSource.find(item => item.value === data.language)?.display ?? '', readOnly: true }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', marginTop: 10 }, children: [_jsx(TMTooltip, { content: "Login", children: _jsx("div", { onClick: () => { fillLoginForm(data); }, style: { backgroundColor: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-login", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Save, children: _jsx("div", { onClick: () => { updateNameHandler(); }, style: { backgroundColor: (error || nameIsEqualToInitName) ? "rgb(80,80,80, 0.5)" : "#28a745", color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-save", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: () => { deleteItemFromLocalStorage(data.name); }, style: { backgroundColor: "#ff4d4f", display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-trash", style: { fontSize: '1.5em', color: getTextColor("#ff4d4f"), cursor: 'pointer' } }) }) })] })] })] });
+    return _jsxs("div", { style: { display: 'flex', background: '#fff', boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: data.name, children: _jsx("div", { style: { background: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '70px', maxHeight: '70px', borderRadius: '50%', fontWeight: 'bold', margin: '20px', textAlign: 'center' }, children: data.name.slice(0, 3).toUpperCase() }) }), _jsxs("div", { style: { padding: '2px', flex: 1 }, children: [_jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.NameForAccess, value: name, readOnly: false, buttons: [{ text: `${SDKUI_Localizator.Save}`, icon: _jsx("i", { style: { color: (error || (isNameMatching && isPreferredMatching)) ? "rgb(80,80,80)" : "#28a745", fontSize: 20 }, className: "dx-icon-save" }), onClick: updateHandler }], onValueChanged: (e) => setName(e.target.value), validationItems: validationItems }, "name"), (data.endpoint && data.endpoint?.Description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Endpoint, value: data.endpoint.Description + (' (' + data.endpoint.URL + ')'), readOnly: true, onValueChanged: (e) => setName(e.target.value) }), (data.archive && data.archive?.description) && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.ArchiveID, value: data.archive.description + (' (' + (data.archive.id ?? '-') + ')'), readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.AuthMode, value: data.authenticationMode, readOnly: true }), data.domain.length > 0 && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.Domain, value: data.domain, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.UserName, value: data.username, readOnly: true }), _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.CultureID, value: cultureIDsDataSource.find(item => item.value === data.language)?.display ?? '', readOnly: true }), _jsx(TMCheckBox, { elementStyle: { marginTop: 10, marginBottom: 10 }, labelPosition: "left", label: SDKUI_Localizator.SetAsFavorite, value: preferred, onValueChanged: (value) => { setPreferred(value); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', marginTop: 10 }, children: [_jsx(TMTooltip, { content: "Login", children: _jsx("div", { onClick: () => { fillLoginForm(data); }, style: { backgroundColor: randomBGColor, color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-login", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Save, children: _jsx("div", { onClick: () => { updateHandler(); }, style: { backgroundColor: (error || (isNameMatching && isPreferredMatching)) ? "rgb(80,80,80, 0.5)" : "#28a745", color: textColor, display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', marginRight: '10px', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-save", style: { fontSize: '1.5em', color: textColor, cursor: 'pointer' } }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { onClick: () => { deleteItemFromLocalStorage(data.name); }, style: { backgroundColor: "#ff4d4f", display: 'flex', justifyContent: 'center', alignItems: 'center', width: '15vw', height: '15vw', maxWidth: '50px', maxHeight: '50px', borderRadius: '50%', fontWeight: 'bold', textAlign: 'center' }, children: _jsx("i", { className: "dx-icon-trash", style: { fontSize: '1.5em', color: getTextColor("#ff4d4f"), cursor: 'pointer' } }) }) })] })] })] });
 };

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

@@ -3,15 +3,15 @@ import { FormModes, ITMSaveFormBaseProps } from '../../ts/types';
 declare const TMSaveForm: React.FC<ITMSaveFormBaseProps>;
 export default TMSaveForm;
 export declare const TMSaveFormStandardToolbar: ({ btnStyle, formMode, hasNavigation, isModified, errorsCount, onNext, onPrev, canNext, canPrev, onSaveAsync, onUndo }: {
-    btnStyle: "normal" | "toolbar" | "icon" | "text";
+    btnStyle: 'normal' | 'toolbar' | 'icon' | 'text';
     formMode: FormModes;
     hasNavigation: boolean;
     isModified: boolean;
     errorsCount: number;
-    onNext?: () => void;
-    onPrev?: () => void;
-    canNext?: boolean;
-    canPrev?: boolean;
-    onSaveAsync?: () => Promise<void>;
-    onUndo?: () => void;
+    onNext?: (() => void) | undefined;
+    onPrev?: (() => void) | undefined;
+    canNext?: boolean | undefined;
+    canPrev?: boolean | undefined;
+    onSaveAsync?: (() => Promise<void>) | undefined;
+    onUndo?: (() => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;