@topconsultnpm/sdkui-react 6.22.0-dev1.15 → 6.22.0-dev1.17

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

@@ -338,6 +338,9 @@ const TMLoginForm = (props) => {
     const disablePasswordOperations = useMemo(() => {
         return (username.length === 0 || !dcmtArchive || !endpoint);
     }, [username, dcmtArchive, endpoint]);
+    const loginKey = useMemo(() => {
+        return `${dcmtArchive?.id ?? manualArchiveID ?? ''}:${username}`;
+    }, [dcmtArchive, manualArchiveID, username]);
     const showLoginBtn = useMemo(() => {
         if (loginStep === 1)
             return false;
@@ -716,7 +719,8 @@ const TMLoginForm = (props) => {
                                                         marginBottom: windowHeight === WindowHeight.SMALL ? '30px' : '25px',
                                                         width: '100%',
                                                         minHeight: '15px'
-                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                                                    }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: endpoint?.Description ?? '', children: _jsx("p", { children: endpoint?.Description && endpoint.Description.length > 20 ? endpoint.Description.substring(0, 20) + '...' : endpoint?.Description }) })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx(TMTooltip, { content: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID, children: _jsx(StyledArchiveText, { children: dcmtArchive ? (dcmtArchive.description ?? '') : manualArchiveID }) })] })] }), _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, "$deviceType": deviceType, children: [_jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain, autoComplete: "off" }), authMode !== AuthenticationModes.MSAzure &&
+                                                                    _jsxs("form", { onSubmit: (e) => e.preventDefault(), style: { width: '100%' }, children: [_jsx("input", { name: "login_key", autoComplete: "username", readOnly: true, tabIndex: -1, value: loginKey, style: { position: 'absolute', width: 1, height: 1, opacity: 0, overflow: 'hidden', border: 0, padding: 0 } }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps), usernameAutoComplete: "off", passwordAutoComplete: "current-password" })] }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                                                     _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
                                                             _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] })] }), loginStep === 3 &&
                                         _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
@@ -725,7 +729,7 @@ const TMLoginForm = (props) => {
                                                     ] }), _jsx(StyledRapidAccessWrapper, { "$isMobile": isMobile, children: _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) }) })] }), _jsxs(StyledButtonContainer, { "$windowHeight": windowHeight, children: [showContinueBtn && _jsx(TMButton, { fontSize: "1.2rem", onClick: nextStepHandler, showTooltip: false, caption: LOGINLocalizator.Continue, disabled: disableContinueBtn }), showLoginBtn && _jsx(TMButton, { fontSize: "1.2rem", showTooltip: false, onClick: loginHandler, caption: saveLoginEnable ? SDKUI_Localizator.SaveAndLogin : SDKUI_Localizator.Login, disabled: disableLoginBtn })] })] }), showPasswordOperations && _jsx(StyledForgetPassword, { "$isMobile": isMobile, children: _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "text", caption: SDKUI_Localizator.ForgetPassword, showTooltip: false, onClick: () => setShowForgetPassword(true) }) }), showBackBtn && _jsx(StyledBackButton, { children: _jsx(TMButton, { onClick: previousStepHandler, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) }), showCultureIDs && _jsx(Menu, { onClose: () => setShowCultureIDs(false), x: 'calc(100% - 250px)', y: 50, visible: showCultureIDs, children: _jsxs(StyledMenuItemContainer, { children: [_jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.It_IT), title: cultureIDsDataSource[0].display, src: it, alt: "it", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.En_US), title: cultureIDsDataSource[3].display, src: en, alt: "en", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Fr_FR), title: cultureIDsDataSource[1].display, src: fr, alt: "fr", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Es_ES), title: cultureIDsDataSource[4].display, src: es, alt: "es", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.Pt_PT), title: cultureIDsDataSource[2].display, src: pt, alt: "pt", width: BANNER_DIMENSION, height: BANNER_DIMENSION }), _jsx(StyledLangChooser, { onClick: () => cultureIDHandler(CultureIDs.De_DE), title: cultureIDsDataSource[5].display, src: de, alt: "de", width: BANNER_DIMENSION, height: BANNER_DIMENSION })] }) }), showChangePassword && _jsx(ChangePassword, { tmSession: changePswTmSession, onClose: () => setShowChangePassword(false) }), showForgetPassword && _jsx(RecoverPasswordFlow, { isMobile: isMobile, tmSession: changePswTmSession, onClose: () => setShowForgetPassword(false), windowHeight: windowHeight }), showRapidAccess && _jsx(RapidAccessLogin, { isMobile: isMobile, onClose: () => setShowRapidAccess(false), onSelect: handleRapidAccessSelection })] })] })] }));
 };
 export default TMLoginForm;
-const CeredentialContainer = forwardRef(({ isMobile = false, authMode = AuthenticationModes.TopMedia, password = '', username = '', onPasswordChanged, onUsernameChanged, passwordValidator = [], usernameValidator = [], secondaryRef }, ref) => {
+const CeredentialContainer = forwardRef(({ isMobile = false, authMode = AuthenticationModes.TopMedia, password = '', username = '', onPasswordChanged, onUsernameChanged, passwordValidator = [], usernameValidator = [], secondaryRef, usernameAutoComplete = 'off', passwordAutoComplete = 'off' }, ref) => {
     const passwordRef = useRef(null);
     useImperativeHandle(ref, () => {
         return usernameRef.current;
@@ -751,7 +755,7 @@ const CeredentialContainer = forwardRef(({ isMobile = false, authMode = Authenti
             secondaryRef.current = passwordRef.current;
         }
     }, [secondaryRef]);
-    return (_jsxs(StyledCredentialContainer, { "$isMobile": isMobile, "$authMode": authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password })] }));
+    return (_jsxs(StyledCredentialContainer, { "$isMobile": isMobile, "$authMode": authMode, children: [_jsx(TextBox, { ref: usernameRef, value: username, onValueChanged: (e) => onUsernameChanged(e), validationItems: usernameValidator, type: "text", icon: _jsx(IconUser, {}), label: SDKUI_Localizator.UserName, autoComplete: usernameAutoComplete }), _jsx(TextBox, { ref: passwordRef, value: password, onValueChanged: (e) => onPasswordChanged(e), validationItems: passwordValidator, type: "password", icon: authMode !== AuthenticationModes.TopMediaOnBehalfOf ? _jsx(IconPassword, {}) : undefined, label: SDKUI_Localizator.Password, autoComplete: passwordAutoComplete })] }));
 });
 const RapidAccessContainer = ({ isSaveEnable, name, nameValidationItems, onEnableSaveChange, onNameChange }) => {
     return (_jsxs(StyledRapidLoginSave, { children: [_jsx(TMCheckBox, { label: LOGINLocalizator.CreateNewQuickAccess, onValueChanged: () => onEnableSaveChange(), value: isSaveEnable, labelColor: "#313131" }), isSaveEnable && _jsx(TextBox, { validationItems: nameValidationItems, disabled: !isSaveEnable, type: "text", value: name, onValueChanged: (value) => onNameChange(value), placeHolder: "Es: Admin risorse umane" })] }));

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

@@ -19,6 +19,9 @@ interface TextBoxProps {
     readOnly?: boolean;
     cursor?: 'default' | 'pointer' | 'text';
     showSuccess?: boolean;
+    name?: string;
+    id?: string;
+    autoComplete?: string;
     onClick?: () => void;
     onValueChanged?: (value: string) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;

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

@@ -71,7 +71,7 @@ const IconButton = styled.div `
   align-items: center;
   cursor: ${props => !props.$disabled ? 'pointer' : 'default'};
 `;
-const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text', disabled, icon, onClick, onKeyDown, onValueChanged, placeHolder, readOnly, showSuccess, validationItems = [], value }, ref) => {
+const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text', disabled, icon, onClick, onKeyDown, onValueChanged, placeHolder, readOnly, showSuccess, validationItems = [], value, name, id, autoComplete }, ref) => {
     const [showPassword, setShowPassword] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const mainValidation = useMemo(() => {
@@ -106,6 +106,6 @@ const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text'
         }
         return color;
     }, [mainValidation]);
-    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(InputContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsx(Input, { ref: ref, onKeyDown: onKeyDown, onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), type: type === "password" && showPassword ? "text" : type, value: value, onChange: (e) => onValueChanged?.(e.target.value), placeholder: placeHolder, "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default' }), _jsxs(IconsRow, { children: [additionalIcons.map((iconItem, index) => (iconItem.visible !== false && _jsx(TMTooltip, { content: iconItem.tooltip, children: _jsxs(IconButton, { "$disabled": disabled, "$color": iconItem.color ?? '#313131', onClick: iconItem.onClick, children: [" ", iconItem.icon, " "] }) }, index * 2))), type === "password" && (_jsx(IconButton, { "$disabled": disabled, "$color": '#313131', onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(IconShow, {}) : _jsx(IconHide, {}) }))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
+    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(InputContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsx(Input, { ref: ref, name: name, id: id, autoComplete: autoComplete, onKeyDown: onKeyDown, onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), type: type === "password" && showPassword ? "text" : type, value: value, onChange: (e) => onValueChanged?.(e.target.value), placeholder: placeHolder, "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default' }), _jsxs(IconsRow, { children: [additionalIcons.map((iconItem, index) => (iconItem.visible !== false && _jsx(TMTooltip, { content: iconItem.tooltip, children: _jsxs(IconButton, { "$disabled": disabled, "$color": iconItem.color ?? '#313131', onClick: iconItem.onClick, children: [" ", iconItem.icon, " "] }) }, index * 2))), type === "password" && (_jsx(IconButton, { "$disabled": disabled, "$color": '#313131', onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(IconShow, {}) : _jsx(IconHide, {}) }))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
 });
 export default TextBox;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.22.0-dev1.15",
+    "version": "6.22.0-dev1.17",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -39,7 +39,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts": "6.22.0-dev1.5",
+        "@topconsultnpm/sdk-ts": "6.22.0-dev1.6",
         "@zip.js/zip.js": "2.8.26",
         "buffer": "^6.0.3",
         "devextreme": "^25.2.6",