@topconsultnpm/sdkui-react-beta 6.7.39 → 6.7.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -118,7 +118,6 @@ const TMLoginForm = (props) => {
|
|
|
118
118
|
const [saveLoginInfoName, setSaveLoginInfoName] = useState("");
|
|
119
119
|
const [loginHistory, setLoginHistory] = useState(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
|
|
120
120
|
const [preferredLoginItem, setPreferredLoginItem] = useState(undefined);
|
|
121
|
-
const [loadLoginFromLocalStorage, setLoadLoginFromLocalStorage] = useState(false);
|
|
122
121
|
useEffect(() => {
|
|
123
122
|
if (props.saveLoginHistoryToLocalStorage && loginHistory.length > 0) {
|
|
124
123
|
setPreferredLoginItem(loginHistory.find(item => item.preferred));
|
|
@@ -177,12 +176,13 @@ const TMLoginForm = (props) => {
|
|
|
177
176
|
return () => window.removeEventListener('keyup', loginWidthEnterKey);
|
|
178
177
|
}, [loginValidationItems, popupSaveLoginInfoVisible]);
|
|
179
178
|
// useEffect(() => { setEndpoint(props.endpoints[0]) }, [endpoints])
|
|
180
|
-
useEffect(() => {
|
|
179
|
+
useEffect(() => { if (!preferredLoginItem)
|
|
180
|
+
setEndpoint(props.endpoints.find(ep => ep.isDefault)); }, [endpoints]);
|
|
181
181
|
useEffect(() => { setTmServer(new TopMediaServer(endpoint?.URL)); }, [endpoint]);
|
|
182
182
|
useEffect(() => { setTmSession(tmServer?.NewSession()); }, [tmServer]);
|
|
183
183
|
useEffect(() => { getArchivesAsync().then((result) => { setArchives(result); }); }, [tmSession]);
|
|
184
|
-
useEffect(() => { if (!
|
|
185
|
-
setArchive(archives && archives.find(a => a.isDefault == 1)); }, [archives
|
|
184
|
+
useEffect(() => { if (!preferredLoginItem)
|
|
185
|
+
setArchive(archives && archives.find(a => a.isDefault == 1)); }, [archives]);
|
|
186
186
|
useEffect(() => { if (archive && archive.id) {
|
|
187
187
|
setArchiveID(archive.id);
|
|
188
188
|
}
|
|
@@ -864,14 +864,14 @@ const TMLoginForm = (props) => {
|
|
|
864
864
|
}
|
|
865
865
|
};
|
|
866
866
|
return (_jsxs(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" }), _jsx("div", { style: { fontSize: '2.5rem', lineHeight: 1 }, children: SDK_Globals.appModule })] })] }) }) }) }) }), _jsxs(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "60%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '80%', '80%'), children: [togglePages.recovery &&
|
|
867
|
-
_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: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, 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: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, 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: () => { setLoadLoginFromLocalStorage(false); 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()) &&
|
|
867
|
+
_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: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, 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: () => { setEndpoint(selectedEndpoint); backToLogin(); setSelectedEndPoint(undefined); }, 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()) &&
|
|
868
868
|
_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 ?
|
|
869
869
|
_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 }) :
|
|
870
870
|
_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 ?
|
|
871
871
|
_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) })] })
|
|
872
872
|
:
|
|
873
873
|
_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') }) }) :
|
|
874
|
-
_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 })] }), 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') })] })] }) }) }) }), _jsxs(TMLayoutItem, { height: "fit-content", width: "fit-content", children: [props.saveLoginHistoryToLocalStorage && _jsx("p", { onClick: showPopupSaveLoginInfo, onKeyDown: (e) => { }, style: { marginTop: '10px', userSelect: 'none', cursor: 'pointer', color: TMColors.primary, textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.SwitchUser }), authMode === AuthenticationModes.TopMedia && _jsxs("div", { 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: { marginTop: '10px', 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', marginTop: '10px', 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 }) }) })] }) })] })] }), _jsx(TMLoginPopupSaveLoginInfo, { visible: popupSaveLoginInfoVisible,
|
|
874
|
+
_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 })] }), 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') })] })] }) }) }) }), _jsxs(TMLayoutItem, { height: "fit-content", width: "fit-content", children: [props.saveLoginHistoryToLocalStorage && _jsx("p", { onClick: showPopupSaveLoginInfo, onKeyDown: (e) => { }, style: { marginTop: '10px', userSelect: 'none', cursor: 'pointer', color: TMColors.primary, textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.SwitchUser }), authMode === AuthenticationModes.TopMedia && _jsxs("div", { 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: { marginTop: '10px', 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', marginTop: '10px', 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 }) }) })] }) })] })] }), _jsx(TMLoginPopupSaveLoginInfo, { visible: popupSaveLoginInfoVisible, hidePopup: hidePopupSaveLoginInfo, setLoginHistory: setLoginHistory, setEndpoint: setEndpoint, setArchive: setArchive, setAuthMode: setAuthMode, setUsername: setUsername, setPassword: setPassword, setDomain: setDomain, setDomainArternative: setDomainArternative, setOnBeHalfUsername: setOnBeHalfUsername, setOnBeHalfPassword: setOnBeHalfPassword, onChangeLanguage: onChangeLanguage })] }));
|
|
875
875
|
};
|
|
876
876
|
const TMPasswordManager = ({ validationItems = [], operation = 'change' }) => {
|
|
877
877
|
const passwordStrength = () => {
|
|
@@ -3,7 +3,6 @@ import { ITMLoginHistory, TMEndpointsType } from "./TMLoginForm";
|
|
|
3
3
|
import { ArchiveDescriptor, AuthenticationModes, CultureIDs } from "@topconsultnpm/sdk-ts-beta";
|
|
4
4
|
interface TMLoginPopupSaveLoginInfoProps {
|
|
5
5
|
setLoginHistory: React.Dispatch<React.SetStateAction<Array<ITMLoginHistory>>>;
|
|
6
|
-
setLoadLoginFromLocalStorage: React.Dispatch<React.SetStateAction<boolean>>;
|
|
7
6
|
visible: boolean;
|
|
8
7
|
hidePopup: () => void;
|
|
9
8
|
setEndpoint: React.Dispatch<React.SetStateAction<TMEndpointsType | undefined>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
|
-
import { Accordion, Button, LoadIndicator, Popup
|
|
3
|
+
import { Accordion, Button, LoadIndicator, Popup } from "devextreme-react";
|
|
4
4
|
import { cultureIDsDataSource, LOGIN_HISTORY_KEY, } from "./TMLoginForm";
|
|
5
5
|
import { LocalStorageService, ResultTypes, SDK_Localizator, ValidationItem } from "@topconsultnpm/sdk-ts-beta";
|
|
6
6
|
import { Item } from "devextreme-react/cjs/accordion";
|
|
@@ -9,16 +9,15 @@ import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base
|
|
|
9
9
|
import TMTooltip from "../base/TMTooltip";
|
|
10
10
|
import TMTextBox from "../editors/TMTextBox";
|
|
11
11
|
import { TMSearchBar } from "../sidebar/TMHeader";
|
|
12
|
+
import { IconCloseOutline, IconExport, IconImport } from "../../helper";
|
|
12
13
|
const TMLoginPopupSaveLoginInfo = (props) => {
|
|
13
|
-
const { setLoginHistory,
|
|
14
|
+
const { setLoginHistory, visible, hidePopup, setEndpoint, setArchive, setAuthMode, setUsername, setPassword, setDomain, setDomainArternative, setOnBeHalfUsername, setOnBeHalfPassword, onChangeLanguage } = props;
|
|
14
15
|
// State to manage loading status
|
|
15
16
|
const [loading, setLoading] = useState(false);
|
|
16
17
|
// State to store the search input text
|
|
17
18
|
const [searchText, setSearchText] = useState('');
|
|
18
19
|
// State to store selected items of type ITMLoginHistory
|
|
19
20
|
const [selectedItems, setSelectedItems] = useState([]);
|
|
20
|
-
// State to store the selected import/export option as a string
|
|
21
|
-
const [selectedImportExportOption, setSelectedImportExportOption] = useState('');
|
|
22
21
|
// Retrieve the login history from local storage, sort by 'name', and return the sorted array (or an empty array if not found)
|
|
23
22
|
const getSortedLoginHistory = () => {
|
|
24
23
|
const loginHistory = LocalStorageService.getItem(LOGIN_HISTORY_KEY);
|
|
@@ -76,7 +75,6 @@ const TMLoginPopupSaveLoginInfo = (props) => {
|
|
|
76
75
|
setOnBeHalfPassword("");
|
|
77
76
|
if (onChangeLanguage)
|
|
78
77
|
onChangeLanguage(data.language);
|
|
79
|
-
setLoadLoginFromLocalStorage(true);
|
|
80
78
|
hidePopup();
|
|
81
79
|
};
|
|
82
80
|
// Display a confirmation dialog for deleting an item from local storage and handle the deletion on confirmation
|
|
@@ -104,13 +102,29 @@ const TMLoginPopupSaveLoginInfo = (props) => {
|
|
|
104
102
|
setSearchText('');
|
|
105
103
|
hidePopup();
|
|
106
104
|
};
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
// Handles the click event for export functionality: exports the current login history to a timestamped file.
|
|
106
|
+
const onExportCallback = () => {
|
|
107
|
+
// Inner function to export data as a file with a generated filename: exports the provided data to a file, generating a filename with a timestamp
|
|
108
|
+
const exportToFile = (data, filenamePrefix) => {
|
|
109
|
+
const file = new Blob([JSON.stringify(data, null, 2)], { type: 'text/plain' });
|
|
110
|
+
const element = document.createElement("a");
|
|
111
|
+
const currentDate = new Date();
|
|
112
|
+
const dateString = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
|
|
113
|
+
const timeString = currentDate.toISOString().split('T')[1].split('.')[0].substring(0, 5); // HH:MM
|
|
114
|
+
element.href = URL.createObjectURL(file);
|
|
115
|
+
element.download = `${filenamePrefix}_${dateString}_${timeString}.txt`;
|
|
116
|
+
document.body.appendChild(element);
|
|
117
|
+
element.click();
|
|
118
|
+
document.body.removeChild(element);
|
|
119
|
+
};
|
|
120
|
+
if (historyState.searchedLoginHistory.length > 0) {
|
|
121
|
+
exportToFile(historyState.searchedLoginHistory, "TopMedia_SURFER_LOGIN_HISTORY");
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
alert(SDKUI_Localizator.NoCredentialsSaved);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
const onImportCallback = () => {
|
|
114
128
|
// Inner function to create a file input element: creates a file input element, configures it to accept a specific file type, and triggers a callback when a file is selected.
|
|
115
129
|
const createFileInput = (accept, onChange) => {
|
|
116
130
|
const input = document.createElement("input");
|
|
@@ -165,37 +179,17 @@ const TMLoginPopupSaveLoginInfo = (props) => {
|
|
|
165
179
|
return { ...prevState, ...updatedHistory };
|
|
166
180
|
});
|
|
167
181
|
};
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
const timeString = currentDate.toISOString().split('T')[1].split('.')[0].substring(0, 5); // HH:MM
|
|
175
|
-
element.href = URL.createObjectURL(file);
|
|
176
|
-
element.download = `${filenamePrefix}_${dateString}_${timeString}.txt`;
|
|
177
|
-
document.body.appendChild(element);
|
|
178
|
-
element.click();
|
|
179
|
-
document.body.removeChild(element);
|
|
180
|
-
};
|
|
181
|
-
// Main event handling logic for import/export
|
|
182
|
-
if (!e?.itemData)
|
|
183
|
-
return;
|
|
184
|
-
if (e.itemData.value === 'import') {
|
|
185
|
-
createFileInput(".txt", (file) => {
|
|
186
|
-
handleFileRead(file, (parsedData) => {
|
|
187
|
-
const modifiedData = generateModifiedData(parsedData, historyState.loginHistory);
|
|
188
|
-
updateHistoryState(modifiedData);
|
|
189
|
-
}, () => alert(SDKUI_Localizator.ErrorParsingFileContent));
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
else if (e.itemData.value === 'export') {
|
|
193
|
-
exportToFile(historyState.searchedLoginHistory, "TopMedia_SURFER_LOGIN_HISTORY");
|
|
194
|
-
}
|
|
195
|
-
setSelectedImportExportOption(e.itemData.value);
|
|
182
|
+
createFileInput(".txt", (file) => {
|
|
183
|
+
handleFileRead(file, (parsedData) => {
|
|
184
|
+
const modifiedData = generateModifiedData(parsedData, historyState.loginHistory);
|
|
185
|
+
updateHistoryState(modifiedData);
|
|
186
|
+
}, () => alert(SDKUI_Localizator.ErrorParsingFileContent));
|
|
187
|
+
});
|
|
196
188
|
};
|
|
197
189
|
// titleRender function returns JSX to render a header with user interface components for import/export and closing the popup
|
|
198
|
-
const titleRender = () =>
|
|
190
|
+
const titleRender = () => {
|
|
191
|
+
return _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx("h3", { children: SDKUI_Localizator.SwitchUser }), _jsxs("div", { style: { marginLeft: 'auto', gap: 10, display: 'flex', alignItems: 'center' }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Export, children: _jsx(Button, { render: () => _jsx(IconExport, { color: "#ffffff", style: { cursor: "pointer" } }), width: 35, height: 35, style: { backgroundColor: '#004b00', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: onExportCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Import, children: _jsx(Button, { render: () => _jsx(IconImport, { color: "#ffffff", style: { cursor: "pointer" } }), width: 35, height: 35, style: { backgroundColor: '#b36200', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: onImportCallback }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Import, children: _jsx(Button, { render: () => _jsx(IconCloseOutline, { color: "#ffffff", style: { cursor: "pointer" } }), width: 35, height: 35, style: { backgroundColor: '#8b0000', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, onClick: hidePopup }) })] })] });
|
|
192
|
+
};
|
|
199
193
|
// Conditionally render popup content based on loading state, available login history, or display login items in an accordion
|
|
200
194
|
const renderPopupContent = () => {
|
|
201
195
|
if (loading) {
|
|
@@ -204,7 +198,7 @@ const TMLoginPopupSaveLoginInfo = (props) => {
|
|
|
204
198
|
if (historyState.searchedLoginHistory.length === 0) {
|
|
205
199
|
return (_jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", textAlign: "center", padding: "20px" }, children: SDKUI_Localizator.NoCredentialsSaved }));
|
|
206
200
|
}
|
|
207
|
-
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"
|
|
201
|
+
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" }, children: historyState.searchedLoginHistory.map((data, index) => (_jsx(Item, { titleRender: (titleObj) => _jsx(TMItemTitleRender, { titleObj: titleObj, id: index + 1, historyState: historyState, reloadHistoryState: reloadHistoryState, fillLoginForm: fillLoginForm, deleteItemFromLocalStorage: deleteItemFromLocalStorage }), title: data.name, children: _jsx(TMLoginItemTemplate, { data: data, reloadHistoryState: reloadHistoryState, setSelectedItems: setSelectedItems, setSearchText: setSearchText }) }, data.id))) }) }));
|
|
208
202
|
};
|
|
209
203
|
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()] }));
|
|
210
204
|
};
|
|
@@ -214,8 +208,20 @@ export const TMItemTitleRender = (props) => {
|
|
|
214
208
|
const { titleObj, id, historyState, reloadHistoryState, fillLoginForm, deleteItemFromLocalStorage } = props;
|
|
215
209
|
const historyItem = historyState.loginHistory.find(item => item.name === titleObj.title);
|
|
216
210
|
const [preferred, setPreferred] = useState(historyItem?.preferred ?? false);
|
|
211
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
217
212
|
if (historyItem === undefined)
|
|
218
213
|
return;
|
|
214
|
+
useEffect(() => {
|
|
215
|
+
const mediaQuery = window.matchMedia('(max-width: 768px)');
|
|
216
|
+
const handleResize = () => {
|
|
217
|
+
setIsMobile(mediaQuery.matches);
|
|
218
|
+
};
|
|
219
|
+
mediaQuery.addEventListener('change', handleResize);
|
|
220
|
+
handleResize();
|
|
221
|
+
return () => {
|
|
222
|
+
mediaQuery.removeEventListener('change', handleResize);
|
|
223
|
+
};
|
|
224
|
+
}, []);
|
|
219
225
|
useEffect(() => {
|
|
220
226
|
setPreferred(historyItem.preferred ?? false);
|
|
221
227
|
}, [historyItem.preferred]);
|
|
@@ -265,7 +271,16 @@ export const TMItemTitleRender = (props) => {
|
|
|
265
271
|
e.event.stopPropagation();
|
|
266
272
|
deleteItemFromLocalStorage(historyItem.name);
|
|
267
273
|
};
|
|
268
|
-
|
|
274
|
+
// Function to truncate title for mobile devices
|
|
275
|
+
const truncateForMobile = (title) => {
|
|
276
|
+
return title.length > 10 ? `${title.substring(0, 10)}...` : title;
|
|
277
|
+
};
|
|
278
|
+
// Function to truncate title for non-mobile devices
|
|
279
|
+
const truncateForDesktop = (title) => {
|
|
280
|
+
return title.length > 60 ? `${title.substring(0, 60)}...` : title;
|
|
281
|
+
};
|
|
282
|
+
const truncatedTitle = isMobile ? truncateForMobile(titleObj.title) : truncateForDesktop(titleObj.title);
|
|
283
|
+
return _jsxs("div", { style: { display: "flex", fontFamily: "Arial, sans-serif", width: "100%" }, children: [_jsx("div", { style: { flex: isMobile ? "0 0 40%" : "0 0 75%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: _jsx(TMTooltip, { content: titleObj.title, children: _jsxs("div", { style: { paddingTop: 15 }, children: ["(", id, ")\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: truncatedTitle })] }) }) }), _jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center', flex: isMobile ? "0 0 60%" : "0 0 25%", marginLeft: 10 }, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SetAsFavorite, children: _jsxs("div", { style: { paddingTop: "5px", paddingBottom: "5px" }, children: [preferred && _jsx(Button, { width: 35, height: 35, style: { backgroundColor: '#cece00', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback }), !preferred && _jsx(Button, { width: 35, height: 35, style: { backgroundColor: 'transparent', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, icon: "favorites", onClick: onPreferredCallback })] }) }), _jsx(TMTooltip, { content: "Login", children: _jsx("div", { style: { paddingTop: "5px", paddingBottom: "5px" }, children: _jsx(Button, { width: 35, height: 35, style: { backgroundColor: '#2559A5', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, render: () => _jsx("i", { style: { color: "#ffffff" }, className: "dx-icon-login" }), onClick: onLoginCallback }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Delete, children: _jsx("div", { style: { paddingTop: "5px", paddingBottom: "5px" }, children: _jsx(Button, { width: 35, height: 35, style: { backgroundColor: '#ff4d4f', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center' }, render: () => _jsx("i", { style: { color: "#ffffff" }, className: "dx-icon-trash" }), onClick: onDeleteCallback }) }) })] })] });
|
|
269
284
|
};
|
|
270
285
|
export const TMLoginItemTemplate = (props) => {
|
|
271
286
|
const { data, reloadHistoryState, setSelectedItems, setSearchText } = props;
|
|
@@ -304,5 +319,5 @@ export const TMLoginItemTemplate = (props) => {
|
|
|
304
319
|
}
|
|
305
320
|
return validationsArray;
|
|
306
321
|
};
|
|
307
|
-
return _jsx("div", { style: { display: 'flex', background: '#fff',
|
|
322
|
+
return _jsx("div", { style: { display: 'flex', background: '#fff', overflow: 'hidden', width: '100%', justifyContent: 'center', alignItems: 'center' }, children: _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) ? "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 })] }) });
|
|
308
323
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@topconsultnpm/sdkui-react-beta",
|
|
3
|
-
"version": "6.7.
|
|
3
|
+
"version": "6.7.40",
|
|
4
4
|
"description": "",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"lib"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@topconsultnpm/sdk-ts-beta": "^6.7.
|
|
31
|
+
"@topconsultnpm/sdk-ts-beta": "^6.7.19",
|
|
32
32
|
"@topconsultnpm/sdkui-react-beta": "^6.7.37",
|
|
33
33
|
"buffer": "^6.0.3",
|
|
34
34
|
"devextreme": "24.1.6",
|