@topconsultnpm/sdkui-react-beta 6.11.59 → 6.11.61
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.
package/package.json
CHANGED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { AppModules, ArchiveDescriptor, AuthenticationModes, CultureIDs, ITopMediaSession, SessionDescriptor } from "@topconsultnpm/sdk-ts-beta";
|
|
3
|
-
import { DeviceType } from "../base/TMDeviceProvider";
|
|
4
|
-
export declare const onChangeLanguage: (cultureID: CultureIDs) => void;
|
|
5
|
-
export declare const useCultureID: ({ cultureID }: {
|
|
6
|
-
cultureID: CultureIDs;
|
|
7
|
-
}) => CultureIDs;
|
|
8
|
-
export declare const LOGIN_HISTORY_KEY = "LOGIN_HISTORY";
|
|
9
|
-
export interface ITMLoginHistory {
|
|
10
|
-
id: number;
|
|
11
|
-
name: string;
|
|
12
|
-
endpoint: TMEndpointsType | undefined;
|
|
13
|
-
archive: ArchiveDescriptor | undefined;
|
|
14
|
-
domain: string;
|
|
15
|
-
domainAlternative: string;
|
|
16
|
-
authenticationMode: AuthenticationModes;
|
|
17
|
-
username: string;
|
|
18
|
-
language: CultureIDs;
|
|
19
|
-
onBehalfUsername: string;
|
|
20
|
-
preferred: boolean;
|
|
21
|
-
}
|
|
22
|
-
export type TMEndpointsType = {
|
|
23
|
-
Description: string;
|
|
24
|
-
URL: string;
|
|
25
|
-
isDefault?: 0 | 1;
|
|
26
|
-
};
|
|
27
|
-
interface ITMLoginFormProps {
|
|
28
|
-
sdInput?: SessionDescriptor;
|
|
29
|
-
endpoints: TMEndpointsType[];
|
|
30
|
-
appModule: AppModules;
|
|
31
|
-
onLogged: (tmSession: ITopMediaSession) => void;
|
|
32
|
-
onChangeLanguage?: (e: CultureIDs) => void;
|
|
33
|
-
cultureID?: CultureIDs;
|
|
34
|
-
saveLoginHistoryToLocalStorage?: boolean;
|
|
35
|
-
}
|
|
36
|
-
export declare const cultureIDsDataSource: {
|
|
37
|
-
value: CultureIDs;
|
|
38
|
-
display: string;
|
|
39
|
-
}[];
|
|
40
|
-
declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
|
|
41
|
-
export declare const TMChangePassword: ({ deviceType, tmSession, username, onClose, enable, hasBack }: {
|
|
42
|
-
deviceType?: DeviceType;
|
|
43
|
-
hasBack?: boolean;
|
|
44
|
-
tmSession?: ITopMediaSession;
|
|
45
|
-
username: string;
|
|
46
|
-
onClose?: () => void;
|
|
47
|
-
enable?: boolean;
|
|
48
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
49
|
-
export default TMLoginForm;
|
|
@@ -1,1163 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef, useState } from "react";
|
|
3
|
-
import { AppModules, ArchiveDescriptor, AuthenticationModes, CultureIDs, ChangePswDescriptor, SDK_Localizator, SessionDescriptor, TopMediaServer, ValidationItem, ResultTypes, SDK_Globals, LocalStorageService, DBBrands } from "@topconsultnpm/sdk-ts-beta";
|
|
4
|
-
import deMessages from "devextreme/localization/messages/de.json";
|
|
5
|
-
import enMessages from "devextreme/localization/messages/en.json";
|
|
6
|
-
import esMessages from "devextreme/localization/messages/es.json";
|
|
7
|
-
import frMessages from "devextreme/localization/messages/fr.json";
|
|
8
|
-
import itMessages from "devextreme/localization/messages/it.json";
|
|
9
|
-
import ptMessages from "devextreme/localization/messages/pt.json";
|
|
10
|
-
import { locale as dxlocale, loadMessages } from "devextreme/localization";
|
|
11
|
-
import backgroundLogin from '../../assets/login-bg.png';
|
|
12
|
-
import six from '../../assets/loading.png';
|
|
13
|
-
import { IconAccessPoint, IconArchive, IconLanguage, IconLogin, IconMail, IconPassword, IconSearch, IconUser, IconWeb, IconWifi, SDKUI_Localizator, calcResponsiveDirection, calcResponsiveSizes, IconArrowLeft, SDKUI_Globals, IconChangeUser, IconInfo } from "../../helper";
|
|
14
|
-
import styled from "styled-components";
|
|
15
|
-
import DataGrid, { Column, Selection } from "devextreme-react/cjs/data-grid";
|
|
16
|
-
import { ScrollBar } from "devextreme-react/cjs/chart";
|
|
17
|
-
import TMLayoutContainer, { TMCard, TMLayoutItem } from "../base/TMLayout";
|
|
18
|
-
import { TMColors } from "../../utils/theme";
|
|
19
|
-
import TMSpinner from "../base/TMSpinner";
|
|
20
|
-
import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../base/TMPopUp";
|
|
21
|
-
import TMTextBox from "../editors/TMTextBox";
|
|
22
|
-
import TMButton from "../base/TMButton";
|
|
23
|
-
import TMSummary from "../editors/TMSummary";
|
|
24
|
-
import TMDropDown from "../editors/TMDropDown";
|
|
25
|
-
import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
|
|
26
|
-
import TMCheckBox from "../editors/TMCheckBox";
|
|
27
|
-
import { TMAboutApp } from "../sidebar/TMAboutApp";
|
|
28
|
-
import TMTooltip from "../base/TMTooltip";
|
|
29
|
-
export const onChangeLanguage = (cultureID) => {
|
|
30
|
-
//localizzazione devexpress
|
|
31
|
-
switch (cultureID) {
|
|
32
|
-
case CultureIDs.De_DE:
|
|
33
|
-
dxlocale("de");
|
|
34
|
-
break;
|
|
35
|
-
case CultureIDs.Es_ES:
|
|
36
|
-
dxlocale("es");
|
|
37
|
-
break;
|
|
38
|
-
case CultureIDs.Fr_FR:
|
|
39
|
-
dxlocale("fr");
|
|
40
|
-
break;
|
|
41
|
-
case CultureIDs.It_IT:
|
|
42
|
-
dxlocale("it");
|
|
43
|
-
break;
|
|
44
|
-
case CultureIDs.Pt_PT:
|
|
45
|
-
dxlocale("pt");
|
|
46
|
-
break;
|
|
47
|
-
default:
|
|
48
|
-
dxlocale("en");
|
|
49
|
-
break;
|
|
50
|
-
}
|
|
51
|
-
SDKUI_Localizator.setLanguage(cultureID);
|
|
52
|
-
SDK_Localizator.setLanguage(cultureID);
|
|
53
|
-
};
|
|
54
|
-
export const useCultureID = ({ cultureID = CultureIDs.It_IT }) => {
|
|
55
|
-
const [currentCultureID, setCurrentCultureID] = useState(cultureID);
|
|
56
|
-
useEffect(() => {
|
|
57
|
-
onChangeLanguage(cultureID);
|
|
58
|
-
setCurrentCultureID(cultureID);
|
|
59
|
-
}, [cultureID]);
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
loadMessages(deMessages);
|
|
62
|
-
loadMessages(enMessages);
|
|
63
|
-
loadMessages(esMessages);
|
|
64
|
-
loadMessages(frMessages);
|
|
65
|
-
loadMessages(itMessages);
|
|
66
|
-
loadMessages(ptMessages);
|
|
67
|
-
}, []);
|
|
68
|
-
return (currentCultureID);
|
|
69
|
-
};
|
|
70
|
-
export const LOGIN_HISTORY_KEY = 'LOGIN_HISTORY';
|
|
71
|
-
const StyledLoginContainer = styled.div ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 3px 3px 10px #00000024; width: ${props => props.$responsiveWidth ? props.$responsiveWidth : '51%'}; height: ${props => props.$responsiveHeight ? props.$responsiveHeight : '71%'}; border-radius: 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: #FFFFFF 0% 0% no-repeat padding-box; overflow: hidden; `;
|
|
72
|
-
const StyledContainer = styled.div ` width: 100%; overflow: auto; height: 100%; position: absolute; `;
|
|
73
|
-
const StyledHeaderText = styled.p ` padding-top: 15px; padding-bottom: 15px; font-size: 1.4rem; font-weight: bolder; color: ${TMColors.primary}; `;
|
|
74
|
-
const StyledOTPContainer = styled.div ` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; color: ${TMColors.primary}; `;
|
|
75
|
-
const StyledOTPInputContainer = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px; `;
|
|
76
|
-
const StyledOTPInput = styled.input `font-weight:bold; width: 40px; height: 40px; border-radius: 7px; border: 1px solid; border-color: ${TMColors.primary}; padding-left: 5px; &::-webkit-inner-spin-button, ::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; } `;
|
|
77
|
-
const StyledOTPWaitPanel = styled.div ` width: 265px; margin-top: 30px; color: ${TMColors.primary}; font-size: 0.9rem; display: flex; flex-direction: column; `;
|
|
78
|
-
const StyledOTPLabel = styled.p ` width: 265px; text-align: left; display :flex; justify-content: space-between; align-items: center; `;
|
|
79
|
-
const StyledLogoContainer = styled.div ` position: relative; width: ${props => props.$width}; height: ${props => props.$height}; top: ${props => props.$top}; background: transparent linear-gradient(90deg, #FFFFFF00 0%, #FFFFFFCF 25%, #FFFFFFE8 51%, #FFFFFFCF 75%, #FFFFFF00 100%) 0% 0% no-repeat padding-box; box-shadow: 0px 3px 10px #00000029; opacity: 1; `;
|
|
80
|
-
export const cultureIDsDataSource = [{ value: CultureIDs.It_IT, display: "Italiano" }, { value: CultureIDs.Fr_FR, display: "Française" }, { value: CultureIDs.Pt_PT, display: "Português" }, { value: CultureIDs.En_US, display: "English" }, { value: CultureIDs.Es_ES, display: "Español" }, { value: CultureIDs.De_DE, display: "Deutsch" },];
|
|
81
|
-
const TMLoginForm = (props) => {
|
|
82
|
-
// const [currentCultureID, setCurrentCultureID] = useState<CultureIDs>(CultureIDs.It_IT);
|
|
83
|
-
const deviceType = useDeviceType();
|
|
84
|
-
const [endpoints, setEndpoints] = useState();
|
|
85
|
-
const [selectedEndpoint, setSelectedEndPoint] = useState();
|
|
86
|
-
const [selectedArchive, setSelectedArchive] = useState();
|
|
87
|
-
const [endpoint, setEndpoint] = useState();
|
|
88
|
-
const [tmServer, setTmServer] = useState();
|
|
89
|
-
const [tmSession, setTmSession] = useState();
|
|
90
|
-
const [archives, setArchives] = useState();
|
|
91
|
-
const [archive, setArchive] = useState();
|
|
92
|
-
const [archiveID, setArchiveID] = useState('');
|
|
93
|
-
const [authMode, setAuthMode] = useState(AuthenticationModes.TopMedia);
|
|
94
|
-
const [username, setUsername] = useState('');
|
|
95
|
-
const [password, setPassword] = useState('');
|
|
96
|
-
const [onBehalfUsername, setOnBeHalfUsername] = useState('');
|
|
97
|
-
const [onBeHalfPassword, setOnBeHalfPassword] = useState('');
|
|
98
|
-
const [domain, setDomain] = useState('');
|
|
99
|
-
const [domainAlternative, setDomainArternative] = useState('');
|
|
100
|
-
const [loginValidationItems, setLoginValidationItems] = useState([]);
|
|
101
|
-
const [recoveryPasswordValidationItems, setrecoveryPasswordValidationItems] = useState([]);
|
|
102
|
-
const [togglePages, setTogglePages] = useState({ change: false, recovery: false, endpoint: false, archive: false });
|
|
103
|
-
const [recoveryPasswordState, setRecoveryPasswordState] = useState({ confermPassword: '', email: '', newPassword: '', otp: '', step: 0 });
|
|
104
|
-
const [wait, setWait] = useState(60);
|
|
105
|
-
const otp1Ref = useRef(null);
|
|
106
|
-
const otp2Ref = useRef(null);
|
|
107
|
-
const otp3Ref = useRef(null);
|
|
108
|
-
const otp4Ref = useRef(null);
|
|
109
|
-
const otp5Ref = useRef(null);
|
|
110
|
-
const otp6Ref = useRef(null);
|
|
111
|
-
const [otpValues, setOtpValues] = useState(['', '', '', '', '', '']);
|
|
112
|
-
const [otpHasFilled, setOtpHasFilled] = useState([false, false, false, false, false, false]);
|
|
113
|
-
// popup save login State
|
|
114
|
-
const [popupSaveLoginInfoVisible, setPopupSaveLoginInfoVisible] = useState(false);
|
|
115
|
-
const [saveLoginInfo, setSaveLoginInfo] = useState(false);
|
|
116
|
-
const [saveLoginInfoName, setSaveLoginInfoName] = useState("");
|
|
117
|
-
const [loginHistory, setLoginHistory] = useState(LocalStorageService.getItem(LOGIN_HISTORY_KEY) ?? []);
|
|
118
|
-
const [preferredLoginItem, setPreferredLoginItem] = useState(undefined);
|
|
119
|
-
const [loadLoginInfoFromExternal, setLoadLoginInfoFromExternal] = useState(false);
|
|
120
|
-
const [forceArchiveDefault, setForceArchiveDefault] = useState(false);
|
|
121
|
-
/* #1. useEffect hook to handle initialization and state setup when the component mounts
|
|
122
|
-
Set the local state of endpoints using the value from props
|
|
123
|
-
*/
|
|
124
|
-
useEffect(() => {
|
|
125
|
-
setEndpoints(props.endpoints);
|
|
126
|
-
if (props.sdInput) {
|
|
127
|
-
if (props.sdInput.userName)
|
|
128
|
-
setUsername(props.sdInput.userName);
|
|
129
|
-
}
|
|
130
|
-
}, []);
|
|
131
|
-
/* #2. useEffect hook to handle the preferred login item logic.
|
|
132
|
-
If the `saveLoginHistoryToLocalStorage` prop is true, find and set the preferred login item from the `loginHistory` array where the item is marked as preferred.
|
|
133
|
-
If `saveLoginHistoryToLocalStorage` is false, clear the preferred login item (set to undefined).
|
|
134
|
-
This effect runs whenever the `endpoints` dependency changes.
|
|
135
|
-
*/
|
|
136
|
-
useEffect(() => {
|
|
137
|
-
props.saveLoginHistoryToLocalStorage ? setPreferredLoginItem(loginHistory.find(item => item.preferred)) : setPreferredLoginItem(undefined);
|
|
138
|
-
}, [endpoints]);
|
|
139
|
-
/* #3. useEffect hook to handle the endpoint and set the state.
|
|
140
|
-
If `preferredLoginItem` is undefined, set the endpoint to the default one (where `isDefault` is true)
|
|
141
|
-
If `preferredLoginItem` is defined, set the endpoint to the one specified by it.
|
|
142
|
-
the dependency array ensures this effect only runs when `preferredLoginItem` changes.
|
|
143
|
-
*/
|
|
144
|
-
useEffect(() => {
|
|
145
|
-
if (preferredLoginItem === undefined)
|
|
146
|
-
setEndpoint(props.endpoints.find(ep => ep.isDefault));
|
|
147
|
-
else {
|
|
148
|
-
setEndpoint(preferredLoginItem.endpoint);
|
|
149
|
-
}
|
|
150
|
-
}, [preferredLoginItem]);
|
|
151
|
-
/* #4. useEffect hook to handle the tm server and set the state.
|
|
152
|
-
It sets up a new instance of the `TopMediaServer` class, passing in
|
|
153
|
-
the `URL` property of the `endpoint` object, and updates the `tmServer` state.
|
|
154
|
-
useEffect hook runs whenever the `endpoint` dependency changes.
|
|
155
|
-
*/
|
|
156
|
-
useEffect(() => {
|
|
157
|
-
setTmServer(new TopMediaServer(endpoint?.URL));
|
|
158
|
-
}, [endpoint]);
|
|
159
|
-
/* #5. useEffect hook to handle the tm session and set the state.
|
|
160
|
-
If `tmServer` exists, create a new session using its `NewSession` method and update the `tmSession` state with the newly created session.
|
|
161
|
-
useEffect hook runs whenever the `tmServer` dependency changes.
|
|
162
|
-
*/
|
|
163
|
-
useEffect(() => {
|
|
164
|
-
setTmSession(tmServer?.NewSession());
|
|
165
|
-
}, [tmServer]);
|
|
166
|
-
/* #6. useEffect hook to handle the archives and set the state.
|
|
167
|
-
It calls the asynchronous function 'getArchivesAsync', which fetches data related to archives from some source
|
|
168
|
-
Once 'getArchivesAsync' resolves (using a Promise), the returned result updating the 'archives' state with the new data
|
|
169
|
-
useEffect hook is triggered whenever the 'tmSession' dependency changes.
|
|
170
|
-
*/
|
|
171
|
-
useEffect(() => {
|
|
172
|
-
getArchivesAsync().then((result) => {
|
|
173
|
-
setArchives(result);
|
|
174
|
-
});
|
|
175
|
-
}, [tmSession]);
|
|
176
|
-
/* 7. useEffect hook to handle the archive and set the state.
|
|
177
|
-
Check if login info is being loaded from an external source. If true, exit the effect early to avoid executing further logic.
|
|
178
|
-
If no preferred login item is set, set the archive to the default archive from the archives list (where `isDefault` is true)
|
|
179
|
-
If a preferred login item exists, set the archive to its associated archive.
|
|
180
|
-
useEffect hook is triggered whenever the 'archives' dependency changes.
|
|
181
|
-
*/
|
|
182
|
-
useEffect(() => {
|
|
183
|
-
if (loadLoginInfoFromExternal)
|
|
184
|
-
return;
|
|
185
|
-
if (preferredLoginItem === undefined || forceArchiveDefault)
|
|
186
|
-
setArchive(archives && archives.find(a => a.isDefault == 1));
|
|
187
|
-
else {
|
|
188
|
-
setArchive(preferredLoginItem.archive);
|
|
189
|
-
}
|
|
190
|
-
}, [archives, forceArchiveDefault]);
|
|
191
|
-
/* 8. useEffect hook to handle the archive ID and set the state.
|
|
192
|
-
useEffect hook is triggered whenever the 'archive' dependency changes.
|
|
193
|
-
*/
|
|
194
|
-
useEffect(() => {
|
|
195
|
-
if (archive && archive.id) {
|
|
196
|
-
setArchiveID(archive.id);
|
|
197
|
-
}
|
|
198
|
-
else
|
|
199
|
-
setArchiveID('');
|
|
200
|
-
}, [archive]);
|
|
201
|
-
/* 9. Load and set login info when an external source and a preferred login item are provided
|
|
202
|
-
useEffect hook is triggered whenever the 'loadLoginInfoFromExternal' dependency changes.
|
|
203
|
-
*/
|
|
204
|
-
useEffect(() => {
|
|
205
|
-
if (props.saveLoginHistoryToLocalStorage && preferredLoginItem) {
|
|
206
|
-
setAuthMode(preferredLoginItem.authenticationMode);
|
|
207
|
-
setDomain(preferredLoginItem.domain);
|
|
208
|
-
setDomainArternative(preferredLoginItem.domainAlternative);
|
|
209
|
-
setUsername(preferredLoginItem.username);
|
|
210
|
-
setPassword("");
|
|
211
|
-
setOnBeHalfUsername(preferredLoginItem.onBehalfUsername);
|
|
212
|
-
setOnBeHalfPassword("");
|
|
213
|
-
if (props.onChangeLanguage) {
|
|
214
|
-
props.onChangeLanguage(preferredLoginItem.language);
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
}, [preferredLoginItem]);
|
|
218
|
-
useEffect(() => {
|
|
219
|
-
let interval;
|
|
220
|
-
if (recoveryPasswordState.step === 2 && wait > 0) {
|
|
221
|
-
interval = setInterval(() => { setWait(prev => prev - 1); }, 1000);
|
|
222
|
-
}
|
|
223
|
-
return () => clearInterval(interval);
|
|
224
|
-
}, [recoveryPasswordState.step, wait]);
|
|
225
|
-
useEffect(() => {
|
|
226
|
-
let arr = [...otpValues];
|
|
227
|
-
for (let i = 0; i < otpValues.length; i++) {
|
|
228
|
-
if (otpValues[i].length > 1) {
|
|
229
|
-
arr[i] = otpValues[i][0];
|
|
230
|
-
let a = '';
|
|
231
|
-
for (let j = 1; j < otpValues[i].length; j++) {
|
|
232
|
-
a += otpValues[i][j];
|
|
233
|
-
}
|
|
234
|
-
arr[i + 1] = a;
|
|
235
|
-
setOtpValues(arr);
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
}, [otpValues]);
|
|
239
|
-
useEffect(() => {
|
|
240
|
-
setEndpoints(props.endpoints);
|
|
241
|
-
if (props.sdInput) {
|
|
242
|
-
if (props.sdInput.userName && preferredLoginItem === undefined)
|
|
243
|
-
setUsername(props.sdInput.userName);
|
|
244
|
-
}
|
|
245
|
-
}, []);
|
|
246
|
-
useEffect(() => {
|
|
247
|
-
const loginWidthEnterKey = (e) => { if (loginValidationItems.length === 0 && !popupSaveLoginInfoVisible) {
|
|
248
|
-
if (e.key === 'Enter')
|
|
249
|
-
login();
|
|
250
|
-
} };
|
|
251
|
-
window.addEventListener('keyup', loginWidthEnterKey);
|
|
252
|
-
return () => window.removeEventListener('keyup', loginWidthEnterKey);
|
|
253
|
-
}, [loginValidationItems, popupSaveLoginInfoVisible]);
|
|
254
|
-
useEffect(() => { loginValidator(); }, [username, password, domain, endpoint, archive, archives, domainAlternative, archiveID, props.cultureID, authMode, onBehalfUsername, onBeHalfPassword, saveLoginInfo, saveLoginInfoName]);
|
|
255
|
-
useEffect(() => { recoveryPasswordValidator(); }, [recoveryPasswordState.confermPassword, recoveryPasswordState.email, recoveryPasswordState.newPassword, recoveryPasswordState.otp, recoveryPasswordState.step]);
|
|
256
|
-
useEffect(() => {
|
|
257
|
-
let arr = [...otpHasFilled];
|
|
258
|
-
if (otpValues[0].length > 0) {
|
|
259
|
-
arr[0] = true;
|
|
260
|
-
setOtpHasFilled(arr);
|
|
261
|
-
}
|
|
262
|
-
else {
|
|
263
|
-
arr[0] = false;
|
|
264
|
-
setOtpHasFilled(arr);
|
|
265
|
-
}
|
|
266
|
-
if (otpValues[1].length > 0) {
|
|
267
|
-
arr[1] = true;
|
|
268
|
-
setOtpHasFilled(arr);
|
|
269
|
-
}
|
|
270
|
-
else {
|
|
271
|
-
arr[1] = false;
|
|
272
|
-
setOtpHasFilled(arr);
|
|
273
|
-
}
|
|
274
|
-
if (otpValues[2].length > 0) {
|
|
275
|
-
arr[2] = true;
|
|
276
|
-
setOtpHasFilled(arr);
|
|
277
|
-
}
|
|
278
|
-
else {
|
|
279
|
-
arr[2] = false;
|
|
280
|
-
setOtpHasFilled(arr);
|
|
281
|
-
}
|
|
282
|
-
if (otpValues[3].length > 0) {
|
|
283
|
-
arr[3] = true;
|
|
284
|
-
setOtpHasFilled(arr);
|
|
285
|
-
}
|
|
286
|
-
else {
|
|
287
|
-
arr[3] = false;
|
|
288
|
-
setOtpHasFilled(arr);
|
|
289
|
-
}
|
|
290
|
-
if (otpValues[4].length > 0) {
|
|
291
|
-
arr[4] = true;
|
|
292
|
-
setOtpHasFilled(arr);
|
|
293
|
-
}
|
|
294
|
-
else {
|
|
295
|
-
arr[4] = false;
|
|
296
|
-
setOtpHasFilled(arr);
|
|
297
|
-
}
|
|
298
|
-
if (otpValues[5].length > 0) {
|
|
299
|
-
arr[5] = true;
|
|
300
|
-
setOtpHasFilled(arr);
|
|
301
|
-
}
|
|
302
|
-
else {
|
|
303
|
-
arr[5] = false;
|
|
304
|
-
setOtpHasFilled(arr);
|
|
305
|
-
}
|
|
306
|
-
}, [otpValues]);
|
|
307
|
-
useEffect(() => {
|
|
308
|
-
if (otpHasFilled[0]) {
|
|
309
|
-
otp1Ref.current?.blur();
|
|
310
|
-
otp2Ref.current?.focus();
|
|
311
|
-
}
|
|
312
|
-
if (otpHasFilled[1]) {
|
|
313
|
-
otp2Ref.current?.blur();
|
|
314
|
-
otp3Ref.current?.focus();
|
|
315
|
-
}
|
|
316
|
-
if (otpHasFilled[2]) {
|
|
317
|
-
otp3Ref.current?.blur();
|
|
318
|
-
otp4Ref.current?.focus();
|
|
319
|
-
}
|
|
320
|
-
if (otpHasFilled[3]) {
|
|
321
|
-
otp4Ref.current?.blur();
|
|
322
|
-
otp5Ref.current?.focus();
|
|
323
|
-
}
|
|
324
|
-
if (otpHasFilled[4]) {
|
|
325
|
-
otp5Ref.current?.blur();
|
|
326
|
-
otp6Ref.current?.focus();
|
|
327
|
-
}
|
|
328
|
-
if (otpHasFilled[5]) {
|
|
329
|
-
otp6Ref.current?.blur();
|
|
330
|
-
}
|
|
331
|
-
if (otpHasFilled[0] && otpHasFilled[1] && otpHasFilled[2] && otpHasFilled[3] && otpHasFilled[4] && otpHasFilled[5]) {
|
|
332
|
-
setRecoveryPasswordState({ ...recoveryPasswordState, otp: otpValues[0] + otpValues[1] + otpValues[2] + otpValues[3] + otpValues[4] + otpValues[5] });
|
|
333
|
-
}
|
|
334
|
-
else {
|
|
335
|
-
setRecoveryPasswordState({ ...recoveryPasswordState, otp: '' });
|
|
336
|
-
}
|
|
337
|
-
}, [otpHasFilled]);
|
|
338
|
-
const loginValidator = () => {
|
|
339
|
-
let arr = [...loginValidationItems];
|
|
340
|
-
arr = [];
|
|
341
|
-
if (!endpoint || endpoint?.URL.length === 0) {
|
|
342
|
-
if (!arr.find(item => item.PropertyName === 'endpoint')) {
|
|
343
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'endpoint', SDK_Localizator.RequiredField));
|
|
344
|
-
}
|
|
345
|
-
;
|
|
346
|
-
setLoginValidationItems(arr);
|
|
347
|
-
}
|
|
348
|
-
else {
|
|
349
|
-
{
|
|
350
|
-
arr = arr.filter(item => item.PropertyName !== 'endpoint');
|
|
351
|
-
}
|
|
352
|
-
;
|
|
353
|
-
setLoginValidationItems(arr);
|
|
354
|
-
}
|
|
355
|
-
if (!archive && archiveID.length === 0) {
|
|
356
|
-
if (!arr.find(item => item.PropertyName === 'archive')) {
|
|
357
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'archive', SDK_Localizator.RequiredField));
|
|
358
|
-
}
|
|
359
|
-
;
|
|
360
|
-
setLoginValidationItems(arr);
|
|
361
|
-
}
|
|
362
|
-
else {
|
|
363
|
-
{
|
|
364
|
-
arr = arr.filter(item => item.PropertyName !== 'archive');
|
|
365
|
-
}
|
|
366
|
-
;
|
|
367
|
-
setLoginValidationItems(arr);
|
|
368
|
-
}
|
|
369
|
-
if (!authMode) {
|
|
370
|
-
if (!arr.find(item => item.PropertyName === 'authMode')) {
|
|
371
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'authMode', SDK_Localizator.RequiredField));
|
|
372
|
-
}
|
|
373
|
-
;
|
|
374
|
-
setLoginValidationItems(arr);
|
|
375
|
-
}
|
|
376
|
-
else {
|
|
377
|
-
{
|
|
378
|
-
arr = arr.filter(item => item.PropertyName !== 'authMode');
|
|
379
|
-
}
|
|
380
|
-
;
|
|
381
|
-
setLoginValidationItems(arr);
|
|
382
|
-
}
|
|
383
|
-
if (!props.cultureID) {
|
|
384
|
-
if (!arr.find(item => item.PropertyName === 'cultureId')) {
|
|
385
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'cultureId', SDK_Localizator.RequiredField));
|
|
386
|
-
}
|
|
387
|
-
;
|
|
388
|
-
setLoginValidationItems(arr);
|
|
389
|
-
}
|
|
390
|
-
else {
|
|
391
|
-
{
|
|
392
|
-
arr = arr.filter(item => item.PropertyName !== 'cultureId');
|
|
393
|
-
}
|
|
394
|
-
;
|
|
395
|
-
setLoginValidationItems(arr);
|
|
396
|
-
}
|
|
397
|
-
if (username.length === 0) {
|
|
398
|
-
if (!arr.find(item => item.PropertyName === 'username')) {
|
|
399
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'username', SDK_Localizator.RequiredField));
|
|
400
|
-
}
|
|
401
|
-
;
|
|
402
|
-
setLoginValidationItems(arr);
|
|
403
|
-
}
|
|
404
|
-
else {
|
|
405
|
-
{
|
|
406
|
-
arr = arr.filter(item => item.PropertyName !== 'username');
|
|
407
|
-
}
|
|
408
|
-
;
|
|
409
|
-
setLoginValidationItems(arr);
|
|
410
|
-
}
|
|
411
|
-
if (password.length === 0) {
|
|
412
|
-
if (!arr.find(item => item.PropertyName === 'password')) {
|
|
413
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'password', SDK_Localizator.RequiredField));
|
|
414
|
-
}
|
|
415
|
-
;
|
|
416
|
-
setLoginValidationItems(arr);
|
|
417
|
-
}
|
|
418
|
-
else {
|
|
419
|
-
{
|
|
420
|
-
arr = arr.filter(item => item.PropertyName !== 'password');
|
|
421
|
-
}
|
|
422
|
-
;
|
|
423
|
-
setLoginValidationItems(arr);
|
|
424
|
-
}
|
|
425
|
-
if (saveLoginInfo && saveLoginInfoName.length === 0) {
|
|
426
|
-
if (!arr.find(item => item.PropertyName === 'saveLoginName')) {
|
|
427
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDK_Localizator.RequiredField));
|
|
428
|
-
}
|
|
429
|
-
;
|
|
430
|
-
setLoginValidationItems(arr);
|
|
431
|
-
}
|
|
432
|
-
else {
|
|
433
|
-
const findItemByField = LocalStorageService.findItemByField(LOGIN_HISTORY_KEY, "name", saveLoginInfoName);
|
|
434
|
-
if (findItemByField) {
|
|
435
|
-
if (!arr.find(item => item.PropertyName === 'saveLoginName')) {
|
|
436
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'saveLoginName', SDKUI_Localizator.DuplicateNameError));
|
|
437
|
-
}
|
|
438
|
-
}
|
|
439
|
-
else {
|
|
440
|
-
arr = arr.filter(item => item.PropertyName !== 'saveLoginName');
|
|
441
|
-
}
|
|
442
|
-
setLoginValidationItems(arr);
|
|
443
|
-
}
|
|
444
|
-
switch (authMode) {
|
|
445
|
-
case AuthenticationModes.TopMedia:
|
|
446
|
-
arr.filter(item => item.PropertyName !== 'domain' && item.PropertyName !== 'domain_alt' && item.PropertyName !== 'onBeHalfUsername' && item.PropertyName !== 'onBeHalfPassword');
|
|
447
|
-
break;
|
|
448
|
-
case AuthenticationModes.WindowsThroughTopMedia:
|
|
449
|
-
arr.filter(item => item.PropertyName !== 'onBeHalfUsername' && item.PropertyName !== 'onBeHalfPassword' && item.PropertyName !== 'domain');
|
|
450
|
-
if (domainAlternative.length === 0) {
|
|
451
|
-
if (!arr.find(item => item.PropertyName === 'domain_alt')) {
|
|
452
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'domain_alt', SDK_Localizator.RequiredField));
|
|
453
|
-
}
|
|
454
|
-
;
|
|
455
|
-
setLoginValidationItems(arr);
|
|
456
|
-
}
|
|
457
|
-
else {
|
|
458
|
-
{
|
|
459
|
-
arr = arr.filter(item => item.PropertyName !== 'domain_alt');
|
|
460
|
-
}
|
|
461
|
-
;
|
|
462
|
-
setLoginValidationItems(arr);
|
|
463
|
-
}
|
|
464
|
-
break;
|
|
465
|
-
case AuthenticationModes.TopMediaOnBehalfOf:
|
|
466
|
-
arr.filter(item => item.PropertyName !== 'domain_alt');
|
|
467
|
-
if (domain.length === 0) {
|
|
468
|
-
if (!arr.find(item => item.PropertyName === 'domain')) {
|
|
469
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'domain', SDK_Localizator.RequiredField));
|
|
470
|
-
}
|
|
471
|
-
;
|
|
472
|
-
setLoginValidationItems(arr);
|
|
473
|
-
}
|
|
474
|
-
else {
|
|
475
|
-
{
|
|
476
|
-
arr = arr.filter(item => item.PropertyName !== 'domain');
|
|
477
|
-
}
|
|
478
|
-
;
|
|
479
|
-
setLoginValidationItems(arr);
|
|
480
|
-
}
|
|
481
|
-
if (onBehalfUsername.length === 0) {
|
|
482
|
-
if (!arr.find(item => item.PropertyName === 'onBeHalfUsername')) {
|
|
483
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'onBeHalfUsername', SDK_Localizator.RequiredField));
|
|
484
|
-
}
|
|
485
|
-
;
|
|
486
|
-
setLoginValidationItems(arr);
|
|
487
|
-
}
|
|
488
|
-
else {
|
|
489
|
-
{
|
|
490
|
-
arr = arr.filter(item => item.PropertyName !== 'onBeHalfUsername');
|
|
491
|
-
}
|
|
492
|
-
;
|
|
493
|
-
setLoginValidationItems(arr);
|
|
494
|
-
}
|
|
495
|
-
if (onBeHalfPassword.length === 0) {
|
|
496
|
-
if (!arr.find(item => item.PropertyName === 'onBeHalfPassword')) {
|
|
497
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'onBeHalfPassword', SDK_Localizator.RequiredField));
|
|
498
|
-
}
|
|
499
|
-
;
|
|
500
|
-
setLoginValidationItems(arr);
|
|
501
|
-
}
|
|
502
|
-
else {
|
|
503
|
-
{
|
|
504
|
-
arr = arr.filter(item => item.PropertyName !== 'onBeHalfPassword');
|
|
505
|
-
}
|
|
506
|
-
;
|
|
507
|
-
setLoginValidationItems(arr);
|
|
508
|
-
}
|
|
509
|
-
//
|
|
510
|
-
break;
|
|
511
|
-
case AuthenticationModes.MSAzure:
|
|
512
|
-
arr = arr.filter(item => item.PropertyName !== 'username' && item.PropertyName !== 'password' && item.PropertyName !== 'domain' && item.PropertyName !== 'domain_alt' && item.PropertyName !== 'onBeHalfUsername' && item.PropertyName !== 'onBeHalfPassword');
|
|
513
|
-
setLoginValidationItems(arr);
|
|
514
|
-
break;
|
|
515
|
-
}
|
|
516
|
-
};
|
|
517
|
-
const updateLoginHistory = (newEntry) => {
|
|
518
|
-
// Get the existing history from localStorage or initialize an empty array if none exists
|
|
519
|
-
const currentHistory = JSON.parse(localStorage.getItem(LOGIN_HISTORY_KEY) ?? "[]");
|
|
520
|
-
// Generate a new ID (incremental)
|
|
521
|
-
const newId = currentHistory.length > 0 ? Math.max(...currentHistory.map((item) => item.id)) + 1 : 1;
|
|
522
|
-
// Create a new object with the generated ID
|
|
523
|
-
const newLoginHistory = { ...newEntry, id: newId };
|
|
524
|
-
// Add the new entry to the current history
|
|
525
|
-
currentHistory.push(newLoginHistory);
|
|
526
|
-
// Update Login History State
|
|
527
|
-
setLoginHistory(currentHistory);
|
|
528
|
-
// Save the updated array back to localStorage
|
|
529
|
-
LocalStorageService.setItem(LOGIN_HISTORY_KEY, currentHistory);
|
|
530
|
-
};
|
|
531
|
-
// onSelectEndpoint is a function that handles actions when a new endpoint is selected
|
|
532
|
-
const onSelectEndpoint = () => {
|
|
533
|
-
setLoadLoginInfoFromExternal(false);
|
|
534
|
-
setForceArchiveDefault(true);
|
|
535
|
-
setEndpoint(selectedEndpoint);
|
|
536
|
-
backToLogin();
|
|
537
|
-
setSelectedEndPoint(undefined);
|
|
538
|
-
};
|
|
539
|
-
const showPopupSaveLoginInfo = () => { setPopupSaveLoginInfoVisible(true); };
|
|
540
|
-
const hidePopupSaveLoginInfo = () => { setPopupSaveLoginInfoVisible(false); };
|
|
541
|
-
const recoveryPasswordValidator = () => {
|
|
542
|
-
let arr = [...recoveryPasswordValidationItems];
|
|
543
|
-
let char_upperCase = new RegExp(/([A-Z])/g);
|
|
544
|
-
let char_lowerCase = new RegExp(/([a-z])/g);
|
|
545
|
-
let char_number = new RegExp(/([0-9])/g);
|
|
546
|
-
let char_symbol = new RegExp(/[!@?#\$%\^\&*\)\(+=._-]/g);
|
|
547
|
-
// let email_validation = new RegExp(/^[-\.]+@([\w-]+\.)+[\w-]{2,4}$/g)
|
|
548
|
-
let email_validation = new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g);
|
|
549
|
-
switch (recoveryPasswordState.step) {
|
|
550
|
-
case 1:
|
|
551
|
-
// if (recoveryPasswordState.email?.length === 0) { if (!arr.find(item => item.PropertyName === 'recoveryPass_email')) { arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_email', SDK_Localizator.RequiredField)) }; setrecoveryPasswordValidationItems(arr); } else { { arr = arr.filter(item => item.PropertyName !== 'recoveryPass_email') }; setrecoveryPasswordValidationItems(arr); }
|
|
552
|
-
if (recoveryPasswordState.email?.length === 0) {
|
|
553
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_email')) {
|
|
554
|
-
arr.unshift(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_email', SDK_Localizator.RequiredField));
|
|
555
|
-
}
|
|
556
|
-
;
|
|
557
|
-
setrecoveryPasswordValidationItems(arr);
|
|
558
|
-
}
|
|
559
|
-
else {
|
|
560
|
-
{
|
|
561
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_email');
|
|
562
|
-
}
|
|
563
|
-
;
|
|
564
|
-
setrecoveryPasswordValidationItems(arr);
|
|
565
|
-
}
|
|
566
|
-
if (!recoveryPasswordState.email?.match(email_validation)) {
|
|
567
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_notEmail')) {
|
|
568
|
-
arr.push(new ValidationItem(ResultTypes.INFO, 'recoveryPass_notEmail', SDKUI_Localizator.EmailIsNotValid));
|
|
569
|
-
}
|
|
570
|
-
;
|
|
571
|
-
setrecoveryPasswordValidationItems(arr);
|
|
572
|
-
}
|
|
573
|
-
else {
|
|
574
|
-
{
|
|
575
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_notEmail');
|
|
576
|
-
}
|
|
577
|
-
;
|
|
578
|
-
setrecoveryPasswordValidationItems(arr);
|
|
579
|
-
}
|
|
580
|
-
break;
|
|
581
|
-
case 2:
|
|
582
|
-
if (recoveryPasswordState.otp?.length === 0) {
|
|
583
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_otp')) {
|
|
584
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_otp', SDK_Localizator.RequiredField));
|
|
585
|
-
}
|
|
586
|
-
;
|
|
587
|
-
setrecoveryPasswordValidationItems(arr);
|
|
588
|
-
}
|
|
589
|
-
else {
|
|
590
|
-
{
|
|
591
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_otp');
|
|
592
|
-
}
|
|
593
|
-
;
|
|
594
|
-
setrecoveryPasswordValidationItems(arr);
|
|
595
|
-
}
|
|
596
|
-
break;
|
|
597
|
-
case 3:
|
|
598
|
-
if (recoveryPasswordState.newPassword?.length === 0) {
|
|
599
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_new')) {
|
|
600
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_new', SDK_Localizator.RequiredField));
|
|
601
|
-
}
|
|
602
|
-
;
|
|
603
|
-
setrecoveryPasswordValidationItems(arr);
|
|
604
|
-
}
|
|
605
|
-
else {
|
|
606
|
-
{
|
|
607
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_new');
|
|
608
|
-
}
|
|
609
|
-
;
|
|
610
|
-
setrecoveryPasswordValidationItems(arr);
|
|
611
|
-
}
|
|
612
|
-
if (recoveryPasswordState.confermPassword?.length === 0) {
|
|
613
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_confirm')) {
|
|
614
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_confirm', SDK_Localizator.RequiredField));
|
|
615
|
-
}
|
|
616
|
-
;
|
|
617
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_notConfirmed');
|
|
618
|
-
setrecoveryPasswordValidationItems(arr);
|
|
619
|
-
}
|
|
620
|
-
else {
|
|
621
|
-
{
|
|
622
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_confirm');
|
|
623
|
-
}
|
|
624
|
-
;
|
|
625
|
-
setrecoveryPasswordValidationItems(arr);
|
|
626
|
-
}
|
|
627
|
-
if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.confermPassword.length > 0 && recoveryPasswordState.newPassword !== recoveryPasswordState.confermPassword) {
|
|
628
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_notConfirmed')) {
|
|
629
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_notConfirmed', SDKUI_Localizator.PasswordConfirmError));
|
|
630
|
-
}
|
|
631
|
-
;
|
|
632
|
-
setrecoveryPasswordValidationItems(arr);
|
|
633
|
-
}
|
|
634
|
-
else if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.confermPassword.length > 0 && recoveryPasswordState.newPassword === recoveryPasswordState.confermPassword) {
|
|
635
|
-
{
|
|
636
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_notConfirmed');
|
|
637
|
-
}
|
|
638
|
-
;
|
|
639
|
-
setrecoveryPasswordValidationItems(arr);
|
|
640
|
-
}
|
|
641
|
-
if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.newPassword?.toLowerCase() === username.toLowerCase()) {
|
|
642
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_equalUsername')) {
|
|
643
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_equalUsername', SDKUI_Localizator.PasswordEqualsUsernameError));
|
|
644
|
-
}
|
|
645
|
-
;
|
|
646
|
-
setrecoveryPasswordValidationItems(arr);
|
|
647
|
-
}
|
|
648
|
-
else {
|
|
649
|
-
{
|
|
650
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_equalUsername');
|
|
651
|
-
}
|
|
652
|
-
;
|
|
653
|
-
setrecoveryPasswordValidationItems(arr);
|
|
654
|
-
}
|
|
655
|
-
if (recoveryPasswordState.newPassword.length > 0 && recoveryPasswordState.newPassword?.toLowerCase().includes(username.toLowerCase())) {
|
|
656
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_containUsername')) {
|
|
657
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_containUsername', SDKUI_Localizator.PasswordEqualsUsernameError));
|
|
658
|
-
}
|
|
659
|
-
;
|
|
660
|
-
setrecoveryPasswordValidationItems(arr);
|
|
661
|
-
}
|
|
662
|
-
else {
|
|
663
|
-
{
|
|
664
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_containUsername');
|
|
665
|
-
}
|
|
666
|
-
;
|
|
667
|
-
setrecoveryPasswordValidationItems(arr);
|
|
668
|
-
}
|
|
669
|
-
if (!char_symbol.test(recoveryPasswordState.newPassword)) {
|
|
670
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotSymbol')) {
|
|
671
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotSymbol', SDKUI_Localizator.PasswordSymbolError));
|
|
672
|
-
}
|
|
673
|
-
;
|
|
674
|
-
setrecoveryPasswordValidationItems(arr);
|
|
675
|
-
}
|
|
676
|
-
else {
|
|
677
|
-
{
|
|
678
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotSymbol');
|
|
679
|
-
}
|
|
680
|
-
;
|
|
681
|
-
setrecoveryPasswordValidationItems(arr);
|
|
682
|
-
}
|
|
683
|
-
if (!char_number.test(recoveryPasswordState.newPassword)) {
|
|
684
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotNumber')) {
|
|
685
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotNumber', SDKUI_Localizator.PasswordNumberError));
|
|
686
|
-
}
|
|
687
|
-
;
|
|
688
|
-
setrecoveryPasswordValidationItems(arr);
|
|
689
|
-
}
|
|
690
|
-
else {
|
|
691
|
-
{
|
|
692
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotNumber');
|
|
693
|
-
}
|
|
694
|
-
;
|
|
695
|
-
setrecoveryPasswordValidationItems(arr);
|
|
696
|
-
}
|
|
697
|
-
if (!char_lowerCase.test(recoveryPasswordState.newPassword)) {
|
|
698
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotLower')) {
|
|
699
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotLower', SDKUI_Localizator.PasswordLowercaseError));
|
|
700
|
-
}
|
|
701
|
-
;
|
|
702
|
-
setrecoveryPasswordValidationItems(arr);
|
|
703
|
-
}
|
|
704
|
-
else {
|
|
705
|
-
{
|
|
706
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotLower');
|
|
707
|
-
}
|
|
708
|
-
;
|
|
709
|
-
setrecoveryPasswordValidationItems(arr);
|
|
710
|
-
}
|
|
711
|
-
if (!char_upperCase.test(recoveryPasswordState.newPassword)) {
|
|
712
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_hasNotUpper')) {
|
|
713
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_hasNotUpper', SDKUI_Localizator.PasswordUppercaseError));
|
|
714
|
-
}
|
|
715
|
-
;
|
|
716
|
-
setrecoveryPasswordValidationItems(arr);
|
|
717
|
-
}
|
|
718
|
-
else {
|
|
719
|
-
{
|
|
720
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_hasNotUpper');
|
|
721
|
-
}
|
|
722
|
-
;
|
|
723
|
-
setrecoveryPasswordValidationItems(arr);
|
|
724
|
-
}
|
|
725
|
-
if (recoveryPasswordState.newPassword.length < 10 || recoveryPasswordState.newPassword.length > 128) {
|
|
726
|
-
if (!arr.find(item => item.PropertyName === 'recoveryPass_length')) {
|
|
727
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'recoveryPass_length', SDKUI_Localizator.PasswordLengthError));
|
|
728
|
-
}
|
|
729
|
-
;
|
|
730
|
-
setrecoveryPasswordValidationItems(arr);
|
|
731
|
-
}
|
|
732
|
-
else {
|
|
733
|
-
{
|
|
734
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_length');
|
|
735
|
-
}
|
|
736
|
-
;
|
|
737
|
-
setrecoveryPasswordValidationItems(arr);
|
|
738
|
-
}
|
|
739
|
-
break;
|
|
740
|
-
}
|
|
741
|
-
};
|
|
742
|
-
async function login() {
|
|
743
|
-
TMSpinner.show({ description: '' });
|
|
744
|
-
try {
|
|
745
|
-
const sdInput = {
|
|
746
|
-
authenticationMode: authMode,
|
|
747
|
-
appModuleID: props.appModule,
|
|
748
|
-
archiveID: archiveID,
|
|
749
|
-
userName: username,
|
|
750
|
-
password: password,
|
|
751
|
-
cultureID: props.cultureID,
|
|
752
|
-
domain: domainAlternative,
|
|
753
|
-
onBehalfOf: {
|
|
754
|
-
domain: domain,
|
|
755
|
-
userName: onBehalfUsername,
|
|
756
|
-
password: onBeHalfPassword
|
|
757
|
-
}
|
|
758
|
-
};
|
|
759
|
-
let tmServer = new TopMediaServer(endpoint?.URL);
|
|
760
|
-
let tmSession = tmServer.NewSession();
|
|
761
|
-
await tmSession.LoginAsync(sdInput);
|
|
762
|
-
switch (props.appModule) {
|
|
763
|
-
case AppModules.DESIGNER:
|
|
764
|
-
case AppModules.ORCHESTRATOR:
|
|
765
|
-
case AppModules.SURFER:
|
|
766
|
-
try {
|
|
767
|
-
SDK_Globals.license = await tmSession.NewLicenseEngine().RetrieveAsync();
|
|
768
|
-
}
|
|
769
|
-
catch (e) {
|
|
770
|
-
TMExceptionBoxManager.show({ title: 'Errore caricamento licenza', exception: e });
|
|
771
|
-
}
|
|
772
|
-
break;
|
|
773
|
-
}
|
|
774
|
-
props.onLogged(tmSession);
|
|
775
|
-
}
|
|
776
|
-
catch (e) {
|
|
777
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
778
|
-
}
|
|
779
|
-
finally {
|
|
780
|
-
try {
|
|
781
|
-
if (SDK_Globals.tmSession && saveLoginInfo && saveLoginInfoName.length > 0) {
|
|
782
|
-
const maxId = loginHistory.reduce((max, item) => (item.id > max ? item.id : max), 0);
|
|
783
|
-
const archiveModified = ArchiveDescriptor.fromJS({ ...archive, dbBrand: DBBrands.None, imageID: 0, msAzureTenantID: "", msAzureClientID: "", isDefault: 0, });
|
|
784
|
-
const loginHistoryNewEntry = {
|
|
785
|
-
id: maxId + 1,
|
|
786
|
-
name: saveLoginInfoName,
|
|
787
|
-
endpoint: endpoint ?? undefined,
|
|
788
|
-
archive: archiveModified ?? undefined,
|
|
789
|
-
domain: domain ?? '',
|
|
790
|
-
domainAlternative: domainAlternative ?? '',
|
|
791
|
-
authenticationMode: authMode,
|
|
792
|
-
username: username,
|
|
793
|
-
language: props.cultureID ?? CultureIDs.None,
|
|
794
|
-
onBehalfUsername: onBehalfUsername,
|
|
795
|
-
preferred: false
|
|
796
|
-
};
|
|
797
|
-
updateLoginHistory(loginHistoryNewEntry);
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
|
-
catch (e) {
|
|
801
|
-
// Login failed
|
|
802
|
-
console.log("Login failed. Please check your username and password.");
|
|
803
|
-
// return TMExceptionBoxManager.show({ exception: e })
|
|
804
|
-
}
|
|
805
|
-
finally {
|
|
806
|
-
TMSpinner.hide();
|
|
807
|
-
}
|
|
808
|
-
}
|
|
809
|
-
}
|
|
810
|
-
async function getArchivesAsync() {
|
|
811
|
-
try {
|
|
812
|
-
TMSpinner.show({ description: '' });
|
|
813
|
-
return tmSession?.TopMediaServer.BaseAddress && await tmSession?.NewArchiveEngine().RetrieveAllAsync();
|
|
814
|
-
}
|
|
815
|
-
catch (e) {
|
|
816
|
-
return TMExceptionBoxManager.show({ exception: e });
|
|
817
|
-
}
|
|
818
|
-
finally {
|
|
819
|
-
TMSpinner.hide();
|
|
820
|
-
}
|
|
821
|
-
}
|
|
822
|
-
async function pingAsync(endpoint) {
|
|
823
|
-
const server = new TopMediaServer(endpoint.URL);
|
|
824
|
-
// server.NewSession()
|
|
825
|
-
try {
|
|
826
|
-
TMSpinner.show();
|
|
827
|
-
TMMessageBoxManager.show({ title: 'Ping', message: (await server?.PingAsync())?.toString(), buttons: [ButtonNames.OK] });
|
|
828
|
-
}
|
|
829
|
-
catch (e) {
|
|
830
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
831
|
-
}
|
|
832
|
-
finally {
|
|
833
|
-
TMSpinner.hide();
|
|
834
|
-
}
|
|
835
|
-
}
|
|
836
|
-
const isPasswordChangeEnable = () => {
|
|
837
|
-
if (endpoint && (archive || archiveID.length > 0) && authMode === AuthenticationModes.TopMedia && username.length > 0) {
|
|
838
|
-
return true;
|
|
839
|
-
}
|
|
840
|
-
else
|
|
841
|
-
return false;
|
|
842
|
-
};
|
|
843
|
-
const showRecoveryPassword = () => { setRecoveryPasswordState({ ...recoveryPasswordState, step: 1 }); setTogglePages({ change: false, recovery: true, archive: false, endpoint: false }); };
|
|
844
|
-
const showEndpoints = () => { setTogglePages({ change: false, recovery: false, archive: false, endpoint: true }); };
|
|
845
|
-
const showArchives = () => { setTogglePages({ change: false, recovery: false, archive: true, endpoint: false }); };
|
|
846
|
-
const backToLogin = () => { setTogglePages({ change: false, recovery: false, archive: false, endpoint: false }); setOtpValues(['', '', '', '', '', '']); };
|
|
847
|
-
const isLoginPage = () => { if ((!togglePages.change && !togglePages.recovery && !togglePages.endpoint && !togglePages.archive))
|
|
848
|
-
return true;
|
|
849
|
-
else
|
|
850
|
-
return false; };
|
|
851
|
-
const getChangePswTmSession = () => {
|
|
852
|
-
let tmServer = new TopMediaServer(endpoint?.URL);
|
|
853
|
-
let tmSession = tmServer.NewSession();
|
|
854
|
-
let sd = new SessionDescriptor();
|
|
855
|
-
sd.userName = username;
|
|
856
|
-
sd.accessToken = "CHANGEPSWTOKEN";
|
|
857
|
-
sd.archiveID = archiveID;
|
|
858
|
-
tmSession.SessionDescr = sd;
|
|
859
|
-
return tmSession;
|
|
860
|
-
};
|
|
861
|
-
const recoveryPasswordOnClickManager = async () => {
|
|
862
|
-
let cpd = new ChangePswDescriptor();
|
|
863
|
-
switch (recoveryPasswordState.step) {
|
|
864
|
-
case 1:
|
|
865
|
-
cpd.archiveID = archiveID;
|
|
866
|
-
cpd.userName = username;
|
|
867
|
-
cpd.eMail = recoveryPasswordState.email;
|
|
868
|
-
cpd.cultureID = props.cultureID;
|
|
869
|
-
try {
|
|
870
|
-
TMSpinner.show();
|
|
871
|
-
await getChangePswTmSession().NewUserEngine().RecoveryPasswordAsync(cpd);
|
|
872
|
-
setRecoveryPasswordState({ ...recoveryPasswordState, step: 2 });
|
|
873
|
-
}
|
|
874
|
-
catch (e) {
|
|
875
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
876
|
-
}
|
|
877
|
-
finally {
|
|
878
|
-
TMSpinner.hide();
|
|
879
|
-
}
|
|
880
|
-
break;
|
|
881
|
-
case 2:
|
|
882
|
-
cpd.archiveID = archiveID;
|
|
883
|
-
cpd.userName = username;
|
|
884
|
-
cpd.eMail = recoveryPasswordState.email;
|
|
885
|
-
cpd.cultureID = props.cultureID;
|
|
886
|
-
cpd.otp = Number(recoveryPasswordState.otp); // OTP ricevuto per mail
|
|
887
|
-
cpd.newPassword = 'password_123!';
|
|
888
|
-
cpd.onlyCheckOTP = 1;
|
|
889
|
-
try {
|
|
890
|
-
TMSpinner.show();
|
|
891
|
-
await getChangePswTmSession().NewUserEngine().ChangePasswordAsync(cpd);
|
|
892
|
-
setRecoveryPasswordState({ ...recoveryPasswordState, step: 3 });
|
|
893
|
-
}
|
|
894
|
-
catch (e) {
|
|
895
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
896
|
-
}
|
|
897
|
-
finally {
|
|
898
|
-
TMSpinner.hide();
|
|
899
|
-
}
|
|
900
|
-
break;
|
|
901
|
-
case 3:
|
|
902
|
-
cpd.archiveID = archiveID;
|
|
903
|
-
cpd.userName = username;
|
|
904
|
-
cpd.eMail = recoveryPasswordState.email;
|
|
905
|
-
cpd.cultureID = props.cultureID;
|
|
906
|
-
cpd.otp = Number(recoveryPasswordState.otp);
|
|
907
|
-
cpd.onlyCheckOTP = 0;
|
|
908
|
-
cpd.newPassword = recoveryPasswordState.newPassword;
|
|
909
|
-
try {
|
|
910
|
-
TMSpinner.show();
|
|
911
|
-
await getChangePswTmSession().NewUserEngine().ChangePasswordAsync(cpd);
|
|
912
|
-
TMMessageBoxManager.show({ buttons: [ButtonNames.OK], onButtonClick: (e) => e === ButtonNames.OK && backToLogin(), message: SDKUI_Localizator.PasswordChangedSuccessfully });
|
|
913
|
-
}
|
|
914
|
-
catch (e) {
|
|
915
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
916
|
-
}
|
|
917
|
-
finally {
|
|
918
|
-
TMSpinner.hide();
|
|
919
|
-
}
|
|
920
|
-
break;
|
|
921
|
-
}
|
|
922
|
-
};
|
|
923
|
-
const recoveryPasswordBackClick = () => {
|
|
924
|
-
switch (recoveryPasswordState.step) {
|
|
925
|
-
case 1:
|
|
926
|
-
case 2:
|
|
927
|
-
backToLogin();
|
|
928
|
-
setRecoveryPasswordState({ confermPassword: '', email: '', newPassword: '', otp: '', step: 0 });
|
|
929
|
-
setrecoveryPasswordValidationItems([]);
|
|
930
|
-
break;
|
|
931
|
-
case 3:
|
|
932
|
-
let arr = [...recoveryPasswordValidationItems];
|
|
933
|
-
arr = arr.filter(item => item.PropertyName === 'recoveryPass_email' || item.PropertyName === 'recoveryPass_notEmail' || item.PropertyName === 'recoveryPass_otp');
|
|
934
|
-
setrecoveryPasswordValidationItems(arr);
|
|
935
|
-
setRecoveryPasswordState({ ...recoveryPasswordState, step: 2, otp: '' });
|
|
936
|
-
setOtpValues(['', '', '', '', '', '']);
|
|
937
|
-
}
|
|
938
|
-
};
|
|
939
|
-
return (_jsx(StyledLoginContainer, { "$responsiveHeight": calcResponsiveSizes(deviceType, '75%', '96%', '98%'), "$responsiveWidth": calcResponsiveSizes(deviceType, '55%', '95%', '95%'), children: _jsxs(TMLayoutContainer, { direction: calcResponsiveDirection(deviceType, "horizontal", "vertical", "vertical"), children: [_jsx(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "40%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '20%', '20%'), children: _jsx("div", { style: { width: '100%', height: '100%', backgroundImage: `url(${backgroundLogin})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover', backgroundPosition: 'center', borderRadius: '10px' }, children: _jsx(StyledLogoContainer, { "$width": "100%", "$height": calcResponsiveSizes(deviceType, '21%', '50%', '50%'), "$top": '20%', children: _jsx("div", { style: { display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center', fontWeight: 'bolder', color: TMColors.secondary, fontStyle: 'italic' }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-end', gap: 10 }, children: [_jsx("img", { src: six, height: 40, alt: "" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { style: { fontSize: '0.8rem', color: '#343434', fontWeight: 'lighter' }, children: "TopMedia" }), _jsxs("div", { children: [_jsx("span", { style: { fontSize: '2.5rem', lineHeight: 1 }, children: SDK_Globals.appModule }), "\u00A0", _jsx(IconInfo, { fontSize: "22px", cursor: "pointer", onClick: () => { TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: false }) }); } })] })] })] }) }) }) }) }), _jsxs(TMLayoutItem, { width: calcResponsiveSizes(deviceType, "60%", "100%", "100%"), height: calcResponsiveSizes(deviceType, '100%', '80%', '80%'), children: [togglePages.recovery &&
|
|
940
|
-
_jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ForgetPassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: "max-content", children: _jsxs("div", { style: { width: '100%', height: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: '20px' }, children: [_jsx("div", { style: { transform: 'translateX(-1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: TMColors.primary, zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "1" }), _jsx("div", { style: { width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 1 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "2" }), _jsx("div", { style: { transform: 'translateX(1px)', width: '15px', height: '15px', borderRadius: '20px', transition: '500ms ease', backgroundColor: recoveryPasswordState.step > 2 ? TMColors.primary : 'rgb(180,180,180)', zIndex: 300, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "3" }), _jsx("div", { style: { width: '100%', height: '5px', backgroundColor: 'rgb(180,180,180)', position: 'absolute' } }), _jsx("div", { style: { width: recoveryPasswordState.step === 1 ? '0%' : recoveryPasswordState.step === 2 ? '50%' : '100%', transition: '500ms ease', height: '5px', backgroundColor: TMColors.primary, position: 'absolute' } })] }) }), recoveryPasswordState.step === 1 && _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "email", elementStyle: { marginTop: '30px' }, label: SDKUI_Localizator.InsertYourEmail, icon: _jsx(IconMail, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, email: e.target.value }), value: recoveryPasswordState.email, validationItems: recoveryPasswordState.email?.length === 0 ? recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_email') : recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_notEmail') }) }), recoveryPasswordState.step === 2 && _jsx(TMLayoutItem, { children: _jsxs(StyledOTPContainer, { children: [_jsxs(StyledOTPLabel, { children: [" ", SDKUI_Localizator.InsertOTP, " ", otpHasFilled.find(input => input === true) && _jsx("strong", { style: { cursor: 'pointer' }, onClick: () => setOtpValues(['', '', '', '', '', '']), children: SDKUI_Localizator.ClearOTP }), " "] }), _jsxs(StyledOTPInputContainer, { children: [_jsx(StyledOTPInput, { ref: otp1Ref, type: "number", max: 9, min: 0, value: otpValues[0], onChange: (e) => { let arr = [...otpValues]; arr[0] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp2Ref, type: "number", max: 9, min: 0, value: otpValues[1], onChange: (e) => { let arr = [...otpValues]; arr[1] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp3Ref, type: "number", max: 9, min: 0, value: otpValues[2], onChange: (e) => { let arr = [...otpValues]; arr[2] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp4Ref, type: "number", max: 9, min: 0, value: otpValues[3], onChange: (e) => { let arr = [...otpValues]; arr[3] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp5Ref, type: "number", max: 9, min: 0, value: otpValues[4], onChange: (e) => { let arr = [...otpValues]; arr[4] = e.target.value; setOtpValues(arr); } }), _jsx(StyledOTPInput, { ref: otp6Ref, type: "number", max: 9, min: 0, value: otpValues[5], onChange: (e) => { let arr = [...otpValues]; arr[5] = e.target.value; setOtpValues(arr); } })] }), _jsxs(StyledOTPWaitPanel, { children: [_jsxs("em", { children: [" ", SDKUI_Localizator.OTPSent, " ", _jsx("strong", { children: recoveryPasswordState.email }), ". ", SDKUI_Localizator.OTPNewRequest, " ", _jsx("strong", { children: wait }), " ", SDKUI_Localizator.Seconds] }), ".", wait === 0 && _jsx(TMButton, { caption: SDKUI_Localizator.NewOTP, showTooltip: false, onClick: () => setWait(60) })] })] }) }), recoveryPasswordState.step === 3 && _jsxs(_Fragment, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, newPassword: e.target.value }), value: recoveryPasswordState.newPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_new' || item.PropertyName === 'recoveryPass_equalUsername' || item.PropertyName === 'recoveryPass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setRecoveryPasswordState({ ...recoveryPasswordState, confermPassword: e.target.value }), value: recoveryPasswordState.confermPassword, validationItems: recoveryPasswordValidationItems.filter(item => item.PropertyName === 'recoveryPass_confirm' || item.PropertyName === 'recoveryPass_notConfirmed') }) })] })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: () => { recoveryPasswordBackClick(); }, tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && recoveryPasswordBackClick(), style: { userSelect: 'none', cursor: 'pointer', color: TMColors.primary, fontSize: '1rem' }, children: (recoveryPasswordState.step === 1 || recoveryPasswordState.step === 3) ? SDKUI_Localizator.Back : SDKUI_Localizator.Cancel }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: recoveryPasswordValidationItems.filter(vil => vil.ResultType === ResultTypes.ERROR).length > 0, caption: recoveryPasswordState.step < 3 ? SDKUI_Localizator.Next : SDKUI_Localizator.Save, onClick: () => recoveryPasswordOnClickManager(), showTooltip: false }) }) })] }) }), togglePages.change && _jsx(TMChangePassword, { deviceType: deviceType, tmSession: getChangePswTmSession(), username: username, enable: isPasswordChangeEnable(), onClose: () => backToLogin() }), togglePages.endpoint && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.Endpoint }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', elementAttr: { class: 'dx-custom-row' }, dataSource: endpoints, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "URL", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedEndPoint(e.selectedRowsData[0]), onRowDblClick: onSelectEndpoint, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(ScrollBar, { width: 3 }), _jsx(Column, { dataField: "Description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "URL", caption: 'URL', allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '10px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedEndpoint, caption: SDKUI_Localizator.Select, onClick: onSelectEndpoint, showTooltip: false }), _jsx(TMButton, { caption: 'Ping', btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", disabled: !selectedEndpoint, onClick: () => pingAsync(selectedEndpoint), icon: _jsx(IconWifi, {}) })] }) })] }) }), togglePages.archive && _jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ArchiveID }) }), _jsx(TMLayoutItem, { height: "fit-content", maxHeight: "70%", children: _jsx("div", { style: { height: '100%', padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(DataGrid, { height: '100%', dataSource: archives, allowColumnResizing: true, columnResizingMode: "widget", columnAutoWidth: true, allowColumnReordering: true, keyExpr: "id", showBorders: true, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, showRowLines: SDKUI_Globals.dataGridShowRowLines, onSelectionChanged: (e) => setSelectedArchive(e.selectedRowsData[0]), onRowDblClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, children: [_jsx(Selection, { mode: "single", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(Column, { dataField: "id", caption: 'ID', allowSorting: false }), _jsx(Column, { dataField: "description", caption: SDKUI_Localizator.Description, allowSorting: false }), _jsx(Column, { dataField: "isDefault", caption: 'Default', dataType: "boolean", allowSorting: false })] }) }) }) }), recoveryPasswordState.step === 3 && _jsx(TMPasswordManager, { operation: "recovery", validationItems: recoveryPasswordValidationItems }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0', gap: 10 }, children: [_jsx(TMButton, { caption: SDKUI_Localizator.Back, btnStyle: "icon", height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "0.8rem", onClick: backToLogin, icon: _jsx(IconArrowLeft, {}) }), _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", disabled: !selectedArchive, caption: SDKUI_Localizator.Select, onClick: () => { setArchive(selectedArchive); backToLogin(); setSelectedArchive(undefined); }, showTooltip: false })] }) })] }) }), (isLoginPage()) &&
|
|
941
|
-
_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 ?
|
|
942
|
-
_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 }) :
|
|
943
|
-
_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 ?
|
|
944
|
-
_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) })] })
|
|
945
|
-
:
|
|
946
|
-
_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') }) }) :
|
|
947
|
-
_jsxs(TMLayoutContainer, { direction: "horizontal", children: [_jsx(TMLayoutItem, { children: _jsx(TMDropDown, { dataSource: cultureIDsDataSource, icon: _jsx(IconLanguage, {}), label: SDKUI_Localizator.CultureID, onValueChanged: (e) => props.onChangeLanguage && props.onChangeLanguage(e.target.value), value: props.cultureID, validationItems: loginValidationItems.filter(item => item.PropertyName === 'cultureId') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.Password, icon: _jsx(IconPassword, {}), value: onBeHalfPassword, onValueChanged: (e) => setOnBeHalfPassword(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'onBeHalfPassword') }) })] }), props.saveLoginHistoryToLocalStorage && _jsxs(TMLayoutItem, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', marginTop: 12 }, children: [_jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), _jsx(TMCheckBox, { elementStyle: { marginLeft: 5 }, labelPosition: "left", label: SDKUI_Localizator.RememberCredentials, value: saveLoginInfo, onValueChanged: () => { setSaveLoginInfo(prevSaveLoginInfo => !prevSaveLoginInfo); }, isModifiedWhen: saveLoginInfo }), _jsx("div", { style: { marginLeft: 'auto', position: 'relative' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.SwitchUser, children: _jsx(TMButton, { label: SDKUI_Localizator.SwitchUser, color: 'primary', btnStyle: 'toolbar', icon: _jsx(IconChangeUser, {}), onClick: showPopupSaveLoginInfo }) }) })] }), saveLoginInfo && _jsx(TMTextBox, { type: "text", label: SDKUI_Localizator.EnterNameForAccess, icon: _jsx("i", { style: { fontSize: 20 }, className: "dx-icon-save" }), value: saveLoginInfoName, onValueChanged: (e) => setSaveLoginInfoName(e.target.value), validationItems: loginValidationItems.filter(item => item.PropertyName === 'saveLoginName') })] })] }) }) }) }), _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: authMode === AuthenticationModes.TopMedia && _jsxs("div", { style: { display: "flex", flexWrap: "nowrap", gap: "10px" }, children: [_jsx("p", { onClick: () => isPasswordChangeEnable() && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && setTogglePages({ recovery: false, change: true, archive: false, endpoint: false }), style: { userSelect: 'none', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', textAlign: 'center', fontSize: '0.9rem' }, children: SDKUI_Localizator.ChangePassword }), _jsx("p", { tabIndex: isPasswordChangeEnable() ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && showRecoveryPassword(), onClick: () => isPasswordChangeEnable() && showRecoveryPassword(), style: { userSelect: 'none', cursor: isPasswordChangeEnable() ? 'pointer' : 'default', color: isPasswordChangeEnable() ? TMColors.primary : 'rgb(180,180,180)', fontSize: '0.9rem' }, children: SDKUI_Localizator.ForgetPassword })] }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '250px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1.1rem", caption: "Login", disabled: loginValidationItems.length > 0, onClick: login, showTooltip: false }) }) })] }) })] })] }) }));
|
|
948
|
-
};
|
|
949
|
-
const TMPasswordManager = ({ validationItems = [], operation = 'change' }) => {
|
|
950
|
-
const passwordStrength = () => {
|
|
951
|
-
let arr = [...validationItems];
|
|
952
|
-
if (operation === 'change') {
|
|
953
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_old' && item.PropertyName !== 'changePass_new' && item.PropertyName !== 'changePass_confirm' && item.PropertyName !== 'changePass_notConfirmed' && item.PropertyName !== 'changePass_equalUsername' && item.PropertyName !== 'changePass_containUsername');
|
|
954
|
-
}
|
|
955
|
-
if (operation === 'recovery') {
|
|
956
|
-
arr = arr.filter(item => item.PropertyName !== 'recoveryPass_email' && item.PropertyName !== 'recoveryPass_otp' && item.PropertyName !== 'recoveryPass_new' && item.PropertyName !== 'recoveryPass_confirm' && item.PropertyName !== 'recoveryPass_notConfirmed' && item.PropertyName !== 'recoveryPass_equalUsername' && item.PropertyName !== 'recoveryPass_containUsername');
|
|
957
|
-
}
|
|
958
|
-
if (arr.length > 4)
|
|
959
|
-
return { width: '20%', color: TMColors.error };
|
|
960
|
-
if (arr.length <= 4 && arr.length > 2)
|
|
961
|
-
return { width: '40%', color: TMColors.tertiary };
|
|
962
|
-
if (arr.length === 2)
|
|
963
|
-
return { width: '60%', color: TMColors.warning };
|
|
964
|
-
if (arr.length === 1)
|
|
965
|
-
return { width: '80%', color: TMColors.warning };
|
|
966
|
-
if (arr.length === 0)
|
|
967
|
-
return { width: '100%', color: TMColors.success };
|
|
968
|
-
return { width: '', color: '' };
|
|
969
|
-
};
|
|
970
|
-
return (_jsxs(TMLayoutItem, { height: "60%", children: [_jsx("div", { style: { width: 'calc(100% - 70px)', height: '5px', backgroundColor: 'white', margin: '0px 0px 10px 45px', borderRadius: '2px', overflow: 'hidden' }, children: _jsx("div", { style: { width: passwordStrength().width, height: '100%', backgroundColor: passwordStrength().color, transition: 'ease 300ms' } }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 2, padding: '0 45px 10px 45px' }, children: [_jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_length`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_length`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordLengthError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotLower`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotLower`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordLowercaseError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotUpper`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotUpper`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordUppercaseError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotNumber`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsx("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotNumber`) ? 'red' : 'green' }, children: SDKUI_Localizator.PasswordNumberError }) })] }), _jsxs(TMLayoutContainer, { alignItems: "center", direction: "horizontal", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "fit-content", children: _jsx("div", { style: { width: '7px', height: '7px', borderRadius: '10px', backgroundColor: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotSymbol`) ? 'red' : 'green' }, children: " " }) }), _jsx(TMLayoutItem, { width: "max-content", height: "fit-content", children: _jsxs("p", { style: { fontSize: '0.9rem', color: validationItems.find(item => item.PropertyName === `${operation}Pass_hasNotSymbol`) ? 'red' : 'green' }, children: [SDKUI_Localizator.PasswordSymbolError, " "] }) })] })] })] }));
|
|
971
|
-
};
|
|
972
|
-
export const TMChangePassword = ({ deviceType = DeviceType.DESKTOP, tmSession, username, onClose, enable, hasBack = true }) => {
|
|
973
|
-
const [changePasswordState, setChangePasswordState] = useState({ confermPassword: '', newPassword: '', oldPassword: '' });
|
|
974
|
-
const [changePasswordValidationItems, setChangePasswordValidationItems] = useState([]);
|
|
975
|
-
useEffect(() => { changePasswordValidator(); }, [changePasswordState.oldPassword, changePasswordState.newPassword, changePasswordState.confermPassword, username]);
|
|
976
|
-
const changePasswordValidator = () => {
|
|
977
|
-
let arr = [...changePasswordValidationItems];
|
|
978
|
-
let char_upperCase = new RegExp(/([A-Z])/g);
|
|
979
|
-
let char_lowerCase = new RegExp(/([a-z])/g);
|
|
980
|
-
let char_number = new RegExp(/([0-9])/g);
|
|
981
|
-
let char_symbol = new RegExp(/[!@?#\$%\^\&*\)\(+=._-]/g);
|
|
982
|
-
if (changePasswordState.oldPassword?.length === 0) {
|
|
983
|
-
if (!arr.find(item => item.PropertyName === 'changePass_old')) {
|
|
984
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_old', SDK_Localizator.RequiredField));
|
|
985
|
-
}
|
|
986
|
-
;
|
|
987
|
-
setChangePasswordValidationItems(arr);
|
|
988
|
-
}
|
|
989
|
-
else {
|
|
990
|
-
{
|
|
991
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_old');
|
|
992
|
-
}
|
|
993
|
-
;
|
|
994
|
-
setChangePasswordValidationItems(arr);
|
|
995
|
-
}
|
|
996
|
-
if (changePasswordState.newPassword?.length === 0) {
|
|
997
|
-
if (!arr.find(item => item.PropertyName === 'changePass_new')) {
|
|
998
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_new', SDK_Localizator.RequiredField));
|
|
999
|
-
}
|
|
1000
|
-
;
|
|
1001
|
-
setChangePasswordValidationItems(arr);
|
|
1002
|
-
}
|
|
1003
|
-
else {
|
|
1004
|
-
{
|
|
1005
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_new');
|
|
1006
|
-
}
|
|
1007
|
-
;
|
|
1008
|
-
setChangePasswordValidationItems(arr);
|
|
1009
|
-
}
|
|
1010
|
-
if (changePasswordState.confermPassword?.length === 0) {
|
|
1011
|
-
if (!arr.find(item => item.PropertyName === 'changePass_confirm')) {
|
|
1012
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_confirm', SDK_Localizator.RequiredField));
|
|
1013
|
-
}
|
|
1014
|
-
;
|
|
1015
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_notConfirmed');
|
|
1016
|
-
setChangePasswordValidationItems(arr);
|
|
1017
|
-
}
|
|
1018
|
-
else {
|
|
1019
|
-
{
|
|
1020
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_confirm');
|
|
1021
|
-
}
|
|
1022
|
-
;
|
|
1023
|
-
setChangePasswordValidationItems(arr);
|
|
1024
|
-
}
|
|
1025
|
-
if (changePasswordState.newPassword.length > 0 && changePasswordState.confermPassword.length > 0 && changePasswordState.newPassword !== changePasswordState.confermPassword) {
|
|
1026
|
-
if (!arr.find(item => item.PropertyName === 'changePass_notConfirmed')) {
|
|
1027
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_notConfirmed', SDKUI_Localizator.PasswordConfirmError));
|
|
1028
|
-
}
|
|
1029
|
-
;
|
|
1030
|
-
setChangePasswordValidationItems(arr);
|
|
1031
|
-
}
|
|
1032
|
-
else if (changePasswordState.newPassword.length > 0 && changePasswordState.confermPassword.length > 0 && changePasswordState.newPassword === changePasswordState.confermPassword) {
|
|
1033
|
-
{
|
|
1034
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_notConfirmed');
|
|
1035
|
-
}
|
|
1036
|
-
;
|
|
1037
|
-
setChangePasswordValidationItems(arr);
|
|
1038
|
-
}
|
|
1039
|
-
if (changePasswordState.newPassword.length > 0 && changePasswordState.newPassword?.toLowerCase() === username.toLowerCase()) {
|
|
1040
|
-
if (!arr.find(item => item.PropertyName === 'changePass_equalUsername')) {
|
|
1041
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_equalUsername', SDKUI_Localizator.PasswordEqualsUsernameError));
|
|
1042
|
-
}
|
|
1043
|
-
;
|
|
1044
|
-
setChangePasswordValidationItems(arr);
|
|
1045
|
-
}
|
|
1046
|
-
else {
|
|
1047
|
-
{
|
|
1048
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_equalUsername');
|
|
1049
|
-
}
|
|
1050
|
-
;
|
|
1051
|
-
setChangePasswordValidationItems(arr);
|
|
1052
|
-
}
|
|
1053
|
-
if (changePasswordState.newPassword.length > 0 && changePasswordState.newPassword?.toLowerCase().includes(username.toLowerCase())) {
|
|
1054
|
-
if (!arr.find(item => item.PropertyName === 'changePass_containUsername')) {
|
|
1055
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_containUsername', SDKUI_Localizator.PasswordContainsUsernameError));
|
|
1056
|
-
}
|
|
1057
|
-
;
|
|
1058
|
-
setChangePasswordValidationItems(arr);
|
|
1059
|
-
}
|
|
1060
|
-
else {
|
|
1061
|
-
{
|
|
1062
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_containUsername');
|
|
1063
|
-
}
|
|
1064
|
-
;
|
|
1065
|
-
setChangePasswordValidationItems(arr);
|
|
1066
|
-
}
|
|
1067
|
-
if (!char_symbol.test(changePasswordState.newPassword)) {
|
|
1068
|
-
if (!arr.find(item => item.PropertyName === 'changePass_hasNotSymbol')) {
|
|
1069
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotSymbol', SDKUI_Localizator.PasswordSymbolError));
|
|
1070
|
-
}
|
|
1071
|
-
;
|
|
1072
|
-
setChangePasswordValidationItems(arr);
|
|
1073
|
-
}
|
|
1074
|
-
else {
|
|
1075
|
-
{
|
|
1076
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotSymbol');
|
|
1077
|
-
}
|
|
1078
|
-
;
|
|
1079
|
-
setChangePasswordValidationItems(arr);
|
|
1080
|
-
}
|
|
1081
|
-
if (!char_number.test(changePasswordState.newPassword)) {
|
|
1082
|
-
if (!arr.find(item => item.PropertyName === 'changePass_hasNotNumber')) {
|
|
1083
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotNumber', SDKUI_Localizator.PasswordNumberError));
|
|
1084
|
-
}
|
|
1085
|
-
;
|
|
1086
|
-
setChangePasswordValidationItems(arr);
|
|
1087
|
-
}
|
|
1088
|
-
else {
|
|
1089
|
-
{
|
|
1090
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotNumber');
|
|
1091
|
-
}
|
|
1092
|
-
;
|
|
1093
|
-
setChangePasswordValidationItems(arr);
|
|
1094
|
-
}
|
|
1095
|
-
if (!char_lowerCase.test(changePasswordState.newPassword)) {
|
|
1096
|
-
if (!arr.find(item => item.PropertyName === 'changePass_hasNotLower')) {
|
|
1097
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotLower', SDKUI_Localizator.PasswordLowercaseError));
|
|
1098
|
-
}
|
|
1099
|
-
;
|
|
1100
|
-
setChangePasswordValidationItems(arr);
|
|
1101
|
-
}
|
|
1102
|
-
else {
|
|
1103
|
-
{
|
|
1104
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotLower');
|
|
1105
|
-
}
|
|
1106
|
-
;
|
|
1107
|
-
setChangePasswordValidationItems(arr);
|
|
1108
|
-
}
|
|
1109
|
-
if (!char_upperCase.test(changePasswordState.newPassword)) {
|
|
1110
|
-
if (!arr.find(item => item.PropertyName === 'changePass_hasNotUpper')) {
|
|
1111
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_hasNotUpper', SDKUI_Localizator.PasswordUppercaseError));
|
|
1112
|
-
}
|
|
1113
|
-
;
|
|
1114
|
-
setChangePasswordValidationItems(arr);
|
|
1115
|
-
}
|
|
1116
|
-
else {
|
|
1117
|
-
{
|
|
1118
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_hasNotUpper');
|
|
1119
|
-
}
|
|
1120
|
-
;
|
|
1121
|
-
setChangePasswordValidationItems(arr);
|
|
1122
|
-
}
|
|
1123
|
-
if (changePasswordState.newPassword.length < 10 || changePasswordState.newPassword.length > 128) {
|
|
1124
|
-
if (!arr.find(item => item.PropertyName === 'changePass_length')) {
|
|
1125
|
-
arr.push(new ValidationItem(ResultTypes.ERROR, 'changePass_length', SDKUI_Localizator.PasswordLengthError));
|
|
1126
|
-
}
|
|
1127
|
-
;
|
|
1128
|
-
setChangePasswordValidationItems(arr);
|
|
1129
|
-
}
|
|
1130
|
-
else {
|
|
1131
|
-
{
|
|
1132
|
-
arr = arr.filter(item => item.PropertyName !== 'changePass_length');
|
|
1133
|
-
}
|
|
1134
|
-
;
|
|
1135
|
-
setChangePasswordValidationItems(arr);
|
|
1136
|
-
}
|
|
1137
|
-
};
|
|
1138
|
-
// const goBack = (button: ButtonNames) => { if (button !== ButtonNames.OK) return; onClose && onClose(); setChangePasswordState({ confermPassword: '', newPassword: '', oldPassword: '' }); }
|
|
1139
|
-
const goBackToLogin = (button) => { if (button !== ButtonNames.OK)
|
|
1140
|
-
return; back(); };
|
|
1141
|
-
const changePasswordAsync = async () => {
|
|
1142
|
-
let cpd = new ChangePswDescriptor();
|
|
1143
|
-
cpd.archiveID = tmSession?.SessionDescr?.archiveID;
|
|
1144
|
-
cpd.userName = username;
|
|
1145
|
-
cpd.oldPassword = changePasswordState.oldPassword;
|
|
1146
|
-
cpd.newPassword = changePasswordState.newPassword;
|
|
1147
|
-
cpd.cultureID = CultureIDs.It_IT;
|
|
1148
|
-
try {
|
|
1149
|
-
TMSpinner.show();
|
|
1150
|
-
await tmSession?.NewUserEngine().ChangePasswordAsync(cpd);
|
|
1151
|
-
TMMessageBoxManager.show({ buttons: [ButtonNames.OK], onButtonClick: goBackToLogin, message: SDKUI_Localizator.PasswordChangedSuccessfully });
|
|
1152
|
-
}
|
|
1153
|
-
catch (e) {
|
|
1154
|
-
TMExceptionBoxManager.show({ exception: e });
|
|
1155
|
-
}
|
|
1156
|
-
finally {
|
|
1157
|
-
TMSpinner.hide();
|
|
1158
|
-
}
|
|
1159
|
-
};
|
|
1160
|
-
const back = () => { onClose && onClose(); setChangePasswordState({ confermPassword: '', newPassword: '', oldPassword: '' }); };
|
|
1161
|
-
return (_jsx(StyledContainer, { children: _jsxs(TMLayoutContainer, { alignItems: "center", children: [_jsx(TMLayoutItem, { width: "fit-content", height: "max-content", children: _jsx(StyledHeaderText, { children: SDKUI_Localizator.ChangePassword }) }), _jsx(TMLayoutItem, { children: _jsx("div", { style: { padding: `0px ${calcResponsiveSizes(deviceType, '40px', '40px', '10px')}` }, children: _jsx(TMCard, { showBorder: false, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.OldPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, oldPassword: e.target.value }), value: changePasswordState.oldPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_old') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.NewPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, newPassword: e.target.value }), value: changePasswordState.newPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_new' || item.PropertyName === 'changePass_equalUsername' || item.PropertyName === 'changePass_containUsername') }) }), _jsx(TMLayoutItem, { children: _jsx(TMTextBox, { type: "password", label: SDKUI_Localizator.ConfirmPassword, icon: _jsx(IconPassword, {}), onValueChanged: (e) => setChangePasswordState({ ...changePasswordState, confermPassword: e.target.value }), value: changePasswordState.confermPassword, validationItems: changePasswordValidationItems.filter(item => item.PropertyName === 'changePass_confirm' || item.PropertyName === 'changePass_notConfirmed') }) })] }) }) }) }), _jsx(TMPasswordManager, { operation: "change", validationItems: changePasswordValidationItems }), hasBack && _jsx(TMLayoutItem, { height: "fit-content", width: "fit-content", children: _jsx("p", { onClick: back, tabIndex: enable ? 0 : undefined, onKeyDown: (e) => e.code === 'Space' && back(), style: { userSelect: 'none', cursor: enable ? 'pointer' : 'default', color: enable ? TMColors.primary : 'rgb(180,180,180)', fontSize: '1rem' }, children: SDKUI_Localizator.Back }) }), _jsx(TMLayoutItem, { height: "fit-content", children: _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 0' }, children: _jsx(TMButton, { width: calcResponsiveSizes(deviceType, '150px', '150px', '300px'), height: calcResponsiveSizes(deviceType, '30px', '40px', '40px'), fontSize: "1rem", caption: SDKUI_Localizator.Save, disabled: changePasswordValidationItems.length > 0, onClick: () => { changePasswordAsync(); }, showTooltip: false }) }) })] }) }));
|
|
1162
|
-
};
|
|
1163
|
-
export default TMLoginForm;
|