@topconsultnpm/sdkui-react 6.17.0-test10

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import OTPReader from './OTPReader';
+import TextBox from './TextBox';
+import StepIndicator from './StepIndicator';
+import ChangePasswordInputs, { Divider } from './ChangePasswordInputs';
+import { RecoverPasswordValidator } from './LoginValidatorService';
+import { ChangePswDescriptor } from '@topconsultnpm/sdk-ts';
+import { WindowHeight } from './TMLoginForm';
+import { LOGINLocalizator } from './LOGINLocalizator';
+import { SDKUI_Localizator, IconArrowLeft } from '../../../helper';
+import TMButton from '../../base/TMButton';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMSpinner from '../../base/TMSpinner';
+const RecoverPasswordFlow = ({ onClose, tmSession, windowHeight = 800, isMobile = false }) => {
+    const [step, setStep] = useState(1);
+    const [email, setEmail] = useState('');
+    const [otpCode, setOtpCode] = useState(['', '', '', '', '', '']);
+    const emailRef = useRef(null);
+    const recoverPasswordData = useMemo(() => {
+        return {
+            email: email,
+            otp: otpCode.join('')
+        };
+    }, [email, otpCode]);
+    useEffect(() => {
+        if (step !== 1)
+            return;
+        if (emailRef?.current) {
+            emailRef.current.focus();
+        }
+    }, [step]);
+    const validators = RecoverPasswordValidator.validate(recoverPasswordData);
+    const handleDigitChange = (index, value) => {
+        const updated = [...otpCode];
+        updated[index] = value;
+        setOtpCode(updated);
+    };
+    const handleFullChange = (newDigits) => {
+        setOtpCode(newDigits.slice(0, 6));
+    };
+    const fieldValidations = useCallback((key) => {
+        return validators.fieldValidations.get(key) ?? [];
+    }, [validators]);
+    const steps = [
+        SDKUI_Localizator.InsertYourEmail,
+        SDKUI_Localizator.InsertOTP,
+        SDKUI_Localizator.ChangePassword,
+    ];
+    const cpd = useMemo(() => {
+        let descriptor = new ChangePswDescriptor();
+        descriptor.archiveID = tmSession.SessionDescr?.archiveID;
+        descriptor.userName = tmSession.SessionDescr?.userName;
+        descriptor.cultureID = tmSession.SessionDescr?.cultureID;
+        descriptor.eMail = email;
+        descriptor.otp = step === 2 ? Number(otpCode.join('')) : undefined;
+        descriptor.newPassword = step === 2 ? 'password_123' : undefined;
+        descriptor.onlyCheckOTP = step === 2 ? 1 : 0;
+        return descriptor;
+    }, [tmSession, email, otpCode, step]);
+    const getOTPAsync = async () => {
+        try {
+            TMSpinner.show();
+            await tmSession.NewUserEngine().RecoveryPasswordAsync(cpd);
+            setStep(2);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const verifyOTPAsync = async () => {
+        try {
+            TMSpinner.show();
+            await tmSession.NewUserEngine().ChangePasswordAsync(cpd);
+            setStep(3);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Enter') {
+                if (step === 1 && email) {
+                    getOTPAsync();
+                }
+                else if (step === 2 && otpCode.join('').length === 6) {
+                    verifyOTPAsync();
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [step, email, otpCode, getOTPAsync, verifyOTPAsync]);
+    return (_jsxs(Wrapper, { "$windowHeight": windowHeight, children: [_jsx(Title, { children: SDKUI_Localizator.ForgetPassword + ` (${tmSession.SessionDescr?.userName})` }), _jsx(Divider, {}), (!isMobile || windowHeight === WindowHeight.LARGE) && _jsxs(StepIndicatorContainer, { "$windowHeight": windowHeight, children: [" ", _jsx(StepIndicator, { steps: steps, currentStep: step }), " "] }), step === 1 && (_jsxs(Card, { children: [_jsx(Title, { children: SDKUI_Localizator.InsertYourEmail }), _jsx(TextBox, { ref: emailRef, type: "email", showSuccess: true, value: email, onValueChanged: (e) => setEmail(e), placeHolder: 'Email...', validationItems: fieldValidations('email') }), _jsx(TMButton, { fontSize: "1.1rem", caption: LOGINLocalizator.SendOtp, showTooltip: false, disabled: !email, onClick: async () => await getOTPAsync() })] })), step === 2 && (_jsxs(_Fragment, { children: [_jsx(OTPReader, { digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange }), _jsx(TMButton, { fontSize: "1.2rem", caption: LOGINLocalizator.Continue, disabled: otpCode.join('').length !== 6, showTooltip: false, onClick: async () => await verifyOTPAsync() })] })), step === 3 && (_jsx(ChangePasswordInputs, { tmSession: tmSession, cpd: cpd, otp: otpCode.join(''), onClose: onClose })), _jsx(BackButtonWrapper, { children: _jsx(TMButton, { onClick: onClose, btnStyle: "icon", icon: _jsx(IconArrowLeft, { fontSize: 20 }), caption: SDKUI_Localizator.Back }) })] }));
+};
+export default RecoverPasswordFlow;
+const Wrapper = styled.div ` width: 100%; background-color: white; position: absolute; top: 0; left: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: ${props => props.$windowHeight === WindowHeight.LARGE ? '20px' : '10px'}; padding: 20px 65px; `;
+const Card = styled.div ` width: 400px; background: white; padding: 32px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 20px; align-items: center; `;
+const Title = styled.h2 ` font-size: 16px; text-align: left; width: 100%; color: #333; `;
+const BackButtonWrapper = styled.div ` position: absolute; top: 20px; left: 20px; `;
+const StepIndicatorContainer = styled.div ` width: 100%; padding: ${props => props.$windowHeight === WindowHeight.LARGE ? '30px' : '0'} 0 0 0; `;

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { ValidationItem } from '@topconsultnpm/sdk-ts';
+import { AdditionalIconProps } from "./TextBox";
+type SelectOptionType = {
+    value: any;
+    display: string;
+};
+interface SelectBoxProps {
+    value?: string;
+    label?: string;
+    icon?: any;
+    additionalIcons?: AdditionalIconProps[];
+    options: SelectOptionType[];
+    placeHolder?: string;
+    validationItems?: ValidationItem[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    cursor?: 'default' | 'pointer' | 'text';
+    onClick?: () => void;
+    onValueChanged?: (value: string) => void;
+}
+declare const SelectBox: React.FC<SelectBoxProps>;
+export default SelectBox;

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import styled from "styled-components";
+import { ResultTypes } from '@topconsultnpm/sdk-ts';
+import { TMColors } from "../../../utils/theme";
+import { SDKUI_Globals } from "../../../helper";
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  position: relative;
+`;
+const Label = styled.label `
+  font-size: 12px;
+  font-weight: 500;
+  color: #313131;
+`;
+const SelectContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #99999A;
+  border-radius: 5px;
+  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
+  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
+  position: relative;
+  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
+`;
+const Select = styled.select `
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
+  padding: 6px 0;
+  background: transparent;
+  color: ${props => props.$color ?? '#313131'};
+  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
+  cursor: ${props => props.$cursor};
+`;
+const IconWrapper = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -30px;
+  cursor: default;
+`;
+const ValidationMessageContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
+`;
+const ValidationMessage = styled.span `
+  font-size: 12px;
+  color: ${(props) => props.$color};
+`;
+const SelectBox = ({ cursor = 'pointer', onClick, value, onValueChanged, label, icon, additionalIcons = [], options, placeHolder, validationItems = [], disabled, readOnly }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const mainValidation = useMemo(() => {
+        return validationItems.find((v) => v.ResultType === ResultTypes.ERROR) ||
+            validationItems.find((v) => v.ResultType === ResultTypes.WARNING);
+    }, [validationItems]);
+    const validationMessages = useMemo(() => validationItems.map((v) => ({
+        message: v.Message,
+        color: v.ResultType === ResultTypes.ERROR ? TMColors.error : TMColors.tertiary
+    })), [validationItems]);
+    const borderColor = useMemo(() => {
+        let color = '#99999A';
+        if (mainValidation) {
+            color = mainValidation.ResultType === ResultTypes.ERROR ? TMColors.error : TMColors.tertiary;
+        }
+        else if (isFocused) {
+            color = TMColors.primary;
+        }
+        return color;
+    }, [mainValidation, isFocused]);
+    const borderThickness = useMemo(() => {
+        let thickness = "1px";
+        if (mainValidation) {
+            thickness = "2px";
+        }
+        return thickness;
+    }, [mainValidation, isFocused]);
+    const fontColor = useMemo(() => {
+        let color = "#313131";
+        if (mainValidation) {
+            color = mainValidation.ResultType === ResultTypes.ERROR ? TMColors.error : TMColors.tertiary;
+        }
+        return color;
+    }, [mainValidation]);
+    return (_jsxs(Container, { children: [label && _jsx(Label, { "$color": borderColor, children: label }), _jsxs(SelectContainer, { "$borderColor": borderColor, "$borderThickness": borderThickness, "$focused": isFocused, "$disabled": disabled, children: [icon && _jsx(IconWrapper, { "$color": validationItems.length > 0 ? borderColor : TMColors.primary, children: icon }), _jsxs(Select, { onClick: onClick, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), value: value, onChange: (e) => onValueChanged?.(e.target.value), "$readOnly": readOnly, disabled: disabled, "$color": fontColor, "$cursor": !disabled ? cursor : 'default', children: [placeHolder && _jsx("option", { value: "", disabled: true, children: placeHolder }), options.map((option, index) => (_jsx("option", { value: option.value, children: option.display }, index * 2)))] })] }), _jsx(ValidationMessageContainer, { children: validationMessages.map((val, index) => (_jsx(ValidationMessage, { "$color": val.color, children: val.message }, index * 2))) })] }));
+};
+export default SelectBox;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface StepIndicatorProps {
+    steps: string[];
+    currentStep: number;
+}
+declare const StepIndicator: React.FC<StepIndicatorProps>;
+export default StepIndicator;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { TMColors } from '../../../utils/theme';
+const StepIndicator = ({ steps, currentStep }) => {
+    return (_jsx(StepIndicatorWrapper, { children: steps.map((label, index) => {
+            const stepIndex = index + 1;
+            const isLast = index === steps.length - 1;
+            return (_jsxs(StepItemWrapper, { children: [_jsxs(StepItem, { "$active": currentStep === stepIndex, "$completed": currentStep > stepIndex, children: [_jsx(Circle, { "$active": currentStep === stepIndex, "$completed": currentStep > stepIndex, children: currentStep > stepIndex ? '✓' : stepIndex }), _jsx(StepLabel, { children: label })] }), !isLast && (_jsxs(StepConnectorWrapper, { children: [_jsx(StepConnector, {}), _jsx(StepFiller, { "$filled": currentStep > stepIndex })] }))] }, label));
+        }) }));
+};
+export default StepIndicator;
+const StepIndicatorWrapper = styled.div ` display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 10px; width: 100%; max-width: 600px; `;
+const StepItemWrapper = styled.div ` display: flex; align-items: center; `;
+const StepConnectorWrapper = styled.div ` position: relative; width: 60px; height: 4px; margin: 0 8px; `;
+const StepConnector = styled.div ` position: absolute; top: 0; left: 0; right: 0; height: 4px; background-color: #e0e0e0; border-radius: 2px; z-index: 0; `;
+const StepFiller = styled.div ` position: absolute; top: 0; left: 0; height: 4px; background-color: ${TMColors.success}; width: ${({ $filled }) => ($filled ? '100%' : '0%')}; transition: width 0.4s ease; border-radius: 2px; z-index: 1; `;
+const StepItem = styled.div ` display: flex; flex-direction: column; align-items: center; color: ${({ $active, $completed }) => $active ? TMColors.primary : $completed ? TMColors.success : '#ccc'}; `; //NOSONAR
+const Circle = styled.div ` width: 28px; height: 28px; border-radius: 50%; background-color: ${({ $active, $completed }) => $active ? TMColors.primary : $completed ? TMColors.success : '#e0e0e0'}; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-bottom: 6px; transition: background-color 0.3s ease; z-index: 2; `; //NOSONAR
+const StepLabel = styled.div ` font-size: 12px; text-align: center; max-width: 80px; `;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { AppModules, ArchiveDescriptor, AuthenticationModes, CultureIDs, ITopMediaSession, SessionDescriptor } from "@topconsultnpm/sdk-ts";
+export declare enum WindowHeight {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+export declare const onChangeLanguage: (cultureID: CultureIDs) => void;
+export declare const useCultureID: ({ cultureID }: {
+    cultureID: CultureIDs;
+}) => CultureIDs;
+export interface ITMLoginHistory {
+    id: number;
+    name: string;
+    endpoint: TMEndpointsType | undefined;
+    archive: ArchiveDescriptor | undefined;
+    domain: string;
+    domainAlternative: string;
+    authenticationMode: AuthenticationModes;
+    username: string;
+    language: CultureIDs;
+    onBehalfUsername: string;
+    preferred: boolean;
+}
+export type TMEndpointsType = {
+    Description: string;
+    URL: string;
+    isDefault?: 0 | 1;
+};
+export declare const cultureIDsDataSource: {
+    value: CultureIDs;
+    display: string;
+}[];
+interface ITMLoginFormProps {
+    isConnector?: boolean;
+    sdInput?: SessionDescriptor;
+    endpoints: TMEndpointsType[];
+    appModule: AppModules;
+    onLogged: (tmSession: ITopMediaSession) => void;
+    onChangeLanguage?: (e: CultureIDs) => void;
+    cultureID?: CultureIDs;
+}
+declare const TMLoginForm: React.FunctionComponent<ITMLoginFormProps>;
+export default TMLoginForm;