@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,111 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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;