@arquimedes.co/eureka-forms 3.0.49-new-steps → 3.0.50-test

package/dist/FormSteps/Step.js

@@ -24,10 +24,6 @@ import CustomContext from '../Contexts/CustomContext';
 import { selectOriginalValue, useCondition } from './StepHooks';
 import TimePickerStep from './TimePickerStep/TimePickerStep';
 import PhoneInputStep from './PhoneInputStep/PhoneInputStep';
-import LocationStepComponent from './LocationStep/LocationStep';
-import NumberStepComponent from './NumberStep/NumberStep';
-import BookingStepComponent from './BookingStep/BookingStep';
-import CalendarStepComponent from './CalendarStep/CalendarStep';
 function StepComponent({ step, ...props }) {
     const { postview, partial } = useAppSelector((state) => state.global);
     const { customSteps, customClientInfoStep } = useContext(CustomContext);
@@ -78,18 +74,6 @@ function StepComponent({ step, ...props }) {
         case FormStepTypes.DATEPICKER: {
             return _jsx(DatePickerStep, { ...props, step: step, editable: editable });
         }
-        case FormStepTypes.LOCATION: {
-            return _jsx(LocationStepComponent, { ...props, step: step, editable: editable });
-        }
-        case FormStepTypes.NUMBER: {
-            return _jsx(NumberStepComponent, { ...props, step: step, editable: editable });
-        }
-        case FormStepTypes.BOOKING: {
-            return _jsx(BookingStepComponent, { ...props, step: step, editable: editable });
-        }
-        case FormStepTypes.CALENDAR: {
-            return _jsx(CalendarStepComponent, { ...props, step: step, editable: editable });
-        }
         case FormStepTypes.DATEPICKER_RANGE: {
             return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });
         }

package/dist/FormSteps/StepFunctions.js

@@ -1,4 +1,3 @@
-import { NumberStepType, } from '../@Types/FormStep';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
@@ -88,8 +87,6 @@ function recursivelyCheckOpenSize(idStep, steps, values) {
             return size;
         }
         case FormStepTypes.DATEPICKER:
-        case FormStepTypes.LOCATION:
-        case FormStepTypes.NUMBER:
         case FormStepTypes.TEXTINPUT: {
             return step.size;
         }
@@ -120,17 +117,6 @@ export const calcDefaultValue = (step) => {
                 return getRawText();
             else
                 return '';
-        case FormStepTypes.LOCATION:
-            return step.defaultValue ?? null;
-        case FormStepTypes.NUMBER: {
-            const numStep = step;
-            if (numStep.numberType === NumberStepType.MONEY ||
-                numStep.numberType === NumberStepType.MEASURE ||
-                numStep.numberType === NumberStepType.UNIT_PRICE) {
-                return numStep.defaultValue ?? null;
-            }
-            return numStep.defaultValue ?? '';
-        }
         case FormStepTypes.RATING:
         case FormStepTypes.DATEPICKER:
         case FormStepTypes.DATEPICKER_RANGE:
@@ -149,7 +135,7 @@ export const calcDefaultValue = (step) => {
             return undefined;
     }
 };
-export const iterateNestedSteps = (idStep, steps, iteration, path = [idStep]) => {
+export const iterateNestedSteps = (idStep, steps, iteration, path = []) => {
     const step = steps[idStep];
     if (!step) {
         console.error('Missing Step:', idStep);
@@ -158,15 +144,12 @@ export const iterateNestedSteps = (idStep, steps, iteration, path = [idStep]) =>
     iteration(step, path);
     if (step.type === FormStepTypes.MAPPER) {
         for (const idStep of step.rootSteps) {
-            iterateNestedSteps(idStep, step.steps, iteration, [
-                ...path,
-                step.id,
-            ]);
+            iterateNestedSteps(idStep, step.steps, iteration, [...path, step.id]);
         }
     }
     else {
         for (const idSubStep of calcSubSteps(step.id, steps)) {
-            iterateNestedSteps(idSubStep, steps, iteration, [...path, step.id]);
+            iterateNestedSteps(idSubStep, steps, iteration, path);
         }
     }
 };
@@ -537,13 +520,13 @@ const evaluateEntityPropertyCondition = (condition, entity, entityValue) => {
                 case OperatorTypes.PAST_RELATIVE_MORE:
                 case OperatorTypes.FUTURE_RELATIVE_LESS:
                 case OperatorTypes.FUTURE_RELATIVE_MORE: {
-                    const date = getRelativeDate(condition.days, condition.hours, condition.minutes, condition.propertyOperator === OperatorTypes.PAST_RELATIVE_LESS ||
+                    const date = getRelativeDate(condition.value?.days, condition.value?.hours, condition.value?.minutes, condition.propertyOperator === OperatorTypes.PAST_RELATIVE_LESS ||
                         condition.propertyOperator === OperatorTypes.PAST_RELATIVE_MORE);
                     if (condition.propertyOperator === OperatorTypes.PAST_RELATIVE_LESS ||
                         condition.propertyOperator === OperatorTypes.FUTURE_RELATIVE_LESS)
-                        return new Date().getTime() > date.getTime();
+                        return new Date(value).getTime() < date.getTime();
                     else
-                        return new Date().getTime() < date.getTime();
+                        return new Date(value).getTime() > date.getTime();
                 }
             }
             return false;

package/dist/FormSteps/StepFunctions.test.js

@@ -1,4 +1,3 @@
-import * as Steps from '../@Types/FormStep';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
@@ -497,13 +496,6 @@ describe('StepFunctions', function () {
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toBe(null);
         });
-        test('Location step type', async () => {
-            const step = {
-                type: FormStepTypes.LOCATION,
-            };
-            const defaultValue = calcDefaultValue(step);
-            expect(defaultValue).toBe(null);
-        });
         test('Mapper, FileUpload, CBRFormStep types', async () => {
             const step1 = {
                 type: FormStepTypes.MAPPER,
@@ -535,52 +527,6 @@ describe('StepFunctions', function () {
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toBeUndefined();
         });
-        test('Number step type without defaultValue', async () => {
-            const step1 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.INTEGER,
-            };
-            const step2 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.DECIMAL,
-            };
-            const step3 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.PERCENTAGE,
-            };
-            const step4 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.MONEY,
-            };
-            const step5 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.MEASURE,
-            };
-            const step6 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.UNIT_PRICE,
-            };
-            expect(calcDefaultValue(step1)).toBe('');
-            expect(calcDefaultValue(step2)).toBe('');
-            expect(calcDefaultValue(step3)).toBe('');
-            expect(calcDefaultValue(step4)).toBe(null);
-            expect(calcDefaultValue(step5)).toBe(null);
-            expect(calcDefaultValue(step6)).toBe(null);
-        });
-        test('Number step type with defaultValue', async () => {
-            const step1 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.INTEGER,
-                defaultValue: 42,
-            };
-            const step2 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.MONEY,
-                defaultValue: { value: 100, currency: 'USD' },
-            };
-            expect(calcDefaultValue(step1)).toBe(42);
-            expect(calcDefaultValue(step2)).toEqual({ value: 100, currency: 'USD' });
-        });
     });
     describe('iterateNestedSteps', function () {
         test('should iterate over nested steps', async () => {
@@ -619,9 +565,9 @@ describe('StepFunctions', function () {
             const iterationMock = vi.fn();
             iterateNestedSteps('idStep1', steps, iterationMock);
             expect(iterationMock).toHaveBeenCalledTimes(3);
-            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1, ['idStep1']);
-            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep2, ['idStep1', 'idStep1']);
-            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep3, ['idStep1', 'idStep1', 'idStep2']);
+            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1, []);
+            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep2, ['idStep1']);
+            expect(iterationMock).toHaveBeenCalledWith(steps.idStep1.steps.idStep3, ['idStep1']);
         });
     });
 });

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -31,12 +31,13 @@ function TitleStep({ step }) {
         return values;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stableDepsValues]);
+    const path = useMemo(() => [...step.stepPath, step.id].join('.'), [step.stepPath, step.id]);
     return (_jsxs("div", { className: styles.container, style: {
             color: formStyle.textColor,
             width: widthStats.currentBreakPoint <= size ? '100%' : calcStepWidth(size, form.size),
         }, children: [_jsx("div", { className: styles.titleLbl, style: {
                     textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= size ? 'center' : 'start',
-                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${step.stepPath.join('.')}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${step.stepPath.join('.')}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
+                }, children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: `${path}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${path}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
 }
 export default TitleStep;
 function calcBaseDraft(value) {

package/dist/Icons/@ErkIcon.d.ts

@@ -9,6 +9,6 @@ export interface IconProps {
     preserveAspectRatio?: 'none';
 }
 export declare function useIconProps(props: IconProps): IconProps & {
-    width?: number;
-    height?: number;
+    width?: number | string;
+    height?: number | string;
 };

package/dist/Icons/@ErkIcon.js

@@ -1,7 +1,7 @@
 export function useIconProps(props) {
     return {
-        width: props.size,
-        height: props.size,
+        width: props.size ?? '1em',
+        height: props.size ?? '1em',
         className: props.className ? props.className + ' ErkIcon' : 'ErkIcon',
         fill: 'currentColor',
         ...props,

package/dist/Icons/EmailIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function EmailIcon(props: IconProps): JSX.Element;
+export default EmailIcon;

package/dist/Icons/{EditIcon.js → EmailIcon.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useIconProps } from './@ErkIcon';
-function EditIcon(props) {
+function EmailIcon(props) {
     const iconProps = useIconProps(props);
-    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) }));
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-1 14H5c-.55 0-1-.45-1-1V8l6.94 4.34c.65.41 1.47.41 2.12 0L20 8v9c0 .55-.45 1-1 1zm-7-7L4 6h16l-8 5z" }) }));
 }
-export default EditIcon;
+export default EmailIcon;

package/dist/Icons/Entities/SchoolIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from '../@ErkIcon';
+declare function SchoolIcon(props: IconProps): JSX.Element;
+export default SchoolIcon;

package/dist/Icons/Entities/SchoolIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from '../@ErkIcon';
+function SchoolIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5 13.18v2.81c0 .73.4 1.41 1.04 1.76l5 2.73c.6.33 1.32.33 1.92 0l5-2.73c.64-.35 1.04-1.03 1.04-1.76v-2.81l-6.04 3.3c-.6.33-1.32.33-1.92 0zm6.04-9.66-8.43 4.6c-.69.38-.69 1.38 0 1.76l8.43 4.6c.6.33 1.32.33 1.92 0L21 10.09V16c0 .55.45 1 1 1s1-.45 1-1V9.59c0-.37-.2-.7-.52-.88l-9.52-5.19a2.04 2.04 0 0 0-1.92 0" }) }));
+}
+export default SchoolIcon;

package/dist/Icons/GroupIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function GroupIcon(props: IconProps): JSX.Element;
+export default GroupIcon;

package/dist/Icons/GroupIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function GroupIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V17c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91M4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V17c0 .55.45 1 1 1h3.5v-1.61c0-.83.23-1.61.63-2.29M20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H23c.55 0 1-.45 1-1zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3" }) }));
+}
+export default GroupIcon;

package/dist/Icons/LockedIcon.d.ts

@@ -0,0 +1,3 @@
+import { IconProps } from './@ErkIcon';
+declare function LockedIcon(props: IconProps): JSX.Element;
+export default LockedIcon;

package/dist/Icons/LockedIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIconProps } from './@ErkIcon';
+function LockedIcon(props) {
+    const iconProps = useIconProps(props);
+    return (_jsx("svg", { ...iconProps, version: "1.1", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M81.9,49.6c0-9-0.4-9.4-9.3-9.7c0,0,0,0,0,0c0-4,0-9-0.1-12.1C72,16,64.7,8.9,53,8.7c-2,0-4,0-6.1,0  c-13,0.1-20.6,8-20.4,20.9c0,0,0,0.1,0,0.1V40c-0.7,0-1.4,0-2.2,0c-5.8,0-7.1,1.4-7.1,7.2c0,12.3,0.1,24.6-0.1,36.9  c-0.1,4.7,1.8,6.9,6.5,6.9c17.4,0,34.7,0,52.1,0c4.4,0,6.4-2,6.3-6.5C81.8,72.9,81.9,61.3,81.9,49.6z M53.1,67.5v5.8  c0,2-1.6,3.5-3.5,3.5S46,75.2,46,73.3v-5.8c-2.9-1.3-5-4.3-5-7.8c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5  C58.1,63.2,56,66.2,53.1,67.5z M61.7,39.9C61.7,39.9,61.7,39.9,61.7,39.9c-8.1,0-16.1,0.1-24.2,0.1v-8.5c0.1-0.6,0.1-1.2,0.1-1.7  c-0.1-7.3,4-10.3,13-10.1c7.4,0.1,11.1,3.6,11.1,10.6C61.7,33.5,61.7,36.7,61.7,39.9z" }) }));
+}
+export default LockedIcon;

package/dist/Login/Login.module.css

@@ -0,0 +1,135 @@
+.rightPanel {
+    background-color: #3d5a7f;
+    display: flex;
+    border-radius: 0 20px 20px 0;
+    flex-grow: 0;
+    max-width: 41.666667%;
+    flex-basis: 41.666667%;
+}
+.rightPanelMessage {
+    margin: auto;
+    text-align: center;
+    padding: 0 30px 0 30px;
+}
+.rightPanelMessage h1 {
+    color: white;
+    font-size: 40px;
+    font-weight: 900;
+}
+.rightPanelMessage p {
+    color: white;
+}
+.leftPanel {
+    display: flex;
+    text-align: center;
+    flex-direction: column;
+    flex-grow: 1;
+    max-width: 100%;
+    min-height: fit-content;
+    flex-basis: 0;
+    position: relative;
+    justify-content: center;
+}
+.leftPanel h1 {
+    margin-left: auto;
+    margin-right: auto;
+    color: #3d5a7f;
+    font-size: 40px;
+    font-weight: 900;
+    margin-top: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 40px;
+}
+.leftPanel a {
+    font-size: 22px;
+    cursor: pointer;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin: 0px auto 25px auto;
+    text-decoration: underline;
+}
+.loginButton {
+    background-color: #3d5a7f;
+    border-radius: 40px;
+    padding: 22px 50px;
+    margin: 0 auto 0 auto;
+    color: white;
+    font-weight: 800;
+    font-size: 22px;
+    cursor: pointer;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    width: fit-content;
+    max-width: calc(100% - 40px);
+    height: fit-content;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.loginButton[disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+.loaderContainer {
+    position: absolute;
+    margin: auto;
+    height: 40px;
+    width: 40px;
+}
+.logo {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    left: 40px;
+    top: 33px;
+    height: 65px;
+    margin-right: auto;
+}
+.loginInputsContainer {
+    width: 60%;
+    margin: 0 auto 0 auto;
+}
+.loginInput {
+    min-height: 80px;
+}
+@media screen and (max-width: 825px) {
+    .rightPanel {
+        display: none;
+    }
+    .loginInputsContainer {
+        width: 70%;
+        margin: 0 auto 0 auto;
+    }
+    .leftPanel h1 {
+        margin-top: 5%;
+    }
+}
+
+@media screen and (max-width: 678px) {
+    .logo {
+        display: none;
+    }
+    .loginInputsContainer {
+        width: 80%;
+    }
+}
+
+@media screen and (max-height: 720px) {
+    .logo {
+        display: none;
+    }
+    .loginButton {
+        margin-bottom: 40px;
+    }
+}

package/dist/Login/LoginLayout.module.css

@@ -0,0 +1,68 @@
+.loginLayout {
+    height: 100vh;
+    display: flex;
+    width: 100vw;
+    overflow: hidden;
+    background-color: #f0f0f0;
+
+    position: relative;
+}
+.semiCircle {
+    margin-top: auto;
+    width: 30vmin;
+    height: 30vmin;
+    min-width: 100px;
+    min-height: 100px;
+    object-fit: contain;
+    background-color: #98c1d9;
+    border-top-left-radius: 0%;
+    border-top-right-radius: 100%;
+    border-bottom-left-radius: 0%;
+    border-bottom-right-radius: 0%;
+}
+.triangle {
+    width: 0;
+    height: 0;
+    border-bottom: 500px solid #ee6c4d;
+    border-left: 500px solid transparent;
+    margin-left: auto;
+    transform: translateY(-300px) translateX(150px) rotate(10deg);
+}
+.cardLayout {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    overflow-y: auto;
+}
+.loginCard {
+    margin: 7.5vh auto;
+    z-index: 2;
+    width: 85vw;
+    background-color: white;
+    border-radius: 20px;
+    min-height: 85vh;
+    height: fit-content;
+    display: flex;
+    flex-direction: column;
+}
+.cardContainer {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+    height: 100%;
+}
+
+@media screen and (max-width: 320px) {
+    .loginCard {
+        width: 100vw;
+        height: 100vh;
+        margin: 0px;
+        border-radius: 0px;
+    }
+}

package/dist/Login/LoginPage.d.ts

@@ -0,0 +1,10 @@
+import { Form } from '../@Types';
+interface LoginPageProps {
+    form: Form;
+}
+/**
+ * Displays the specific login component depending on the url
+ * @returns the respective component
+ */
+declare function LoginPage({ form }: LoginPageProps): JSX.Element;
+export default LoginPage;

package/dist/Login/LoginPage.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import layoutStyles from './LoginLayout.module.css';
+import styles from './Login.module.css';
+import Loader from '../Shared/Loader/Loader';
+import { Controller, useForm } from 'react-hook-form';
+import axiosInstance from '../Utils/AxiosAPI';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { login } from '../Services/UserService';
+import { setUser } from '../States/GlobalSlice';
+import { jwtDecode } from 'jwt-decode';
+import LoginTextField from './LoginTextField';
+import MaterialProviders from '../Utils/MaterialProviders';
+const EMAIL_REGEX = 
+// eslint-disable-next-line no-control-regex
+/^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i;
+/**
+ * Displays the specific login component depending on the url
+ * @returns the respective component
+ */
+function LoginPage({ form }) {
+    const dispatch = useAppDispatch();
+    const formStyle = useAppSelector((state) => state.global.formStyle);
+    /** If login has errors */
+    const [wrongLogin, setWrongLogin] = useState(false);
+    /** if waiting for response */
+    const [loading, setLoading] = useState(false);
+    const { getValues, clearErrors, formState: { errors }, setError, trigger, control, } = useForm({
+        mode: 'onTouched',
+    });
+    /**
+     * Handles login, redirects the user if the current subdomain is not valid
+     */
+    const handleLogin = async () => {
+        const isValid = await trigger();
+        const values = getValues();
+        const isInternal = ['andres'].includes(values.email);
+        if ((isValid || isInternal) && form.apiKey) {
+            try {
+                setLoading(true);
+                const payload = values;
+                if (isInternal) {
+                    payload.email = values.email + '@capta.co';
+                }
+                const token = await login(form.apiKey, payload);
+                localStorage.setItem('token', token);
+                const user = jwtDecode(token);
+                axiosInstance.defaults.headers.Authorization = 'Bearer ' + token;
+                dispatch(setUser(user));
+            }
+            catch (err) {
+                setLoading(false);
+                if (err?.response?.status !== 400) {
+                    console.error(err);
+                }
+                if (err?.response?.data === 'Invalid Organization') {
+                    setError('password', {
+                        type: 'pattern',
+                        message: 'Organización inválida',
+                    });
+                }
+                else {
+                    setError('password', {
+                        type: 'pattern',
+                        message: 'Correo o contraseña incorrecta',
+                    });
+                }
+                setError('email', {
+                    type: 'pattern',
+                    message: '',
+                });
+                setWrongLogin(true);
+            }
+        }
+    };
+    /**
+     * Function that clears errors if there are any.
+     */
+    const clearWrongLogin = () => {
+        if (wrongLogin) {
+            setWrongLogin(false);
+            clearErrors(['email', 'password']);
+        }
+    };
+    return (_jsx(MaterialProviders, { formStyle: formStyle, children: _jsxs("div", { className: layoutStyles.loginLayout, children: [_jsx("div", { className: layoutStyles.semiCircle }), _jsx("div", { className: layoutStyles.triangle }), _jsx("div", { className: layoutStyles.cardLayout, children: _jsx("div", { className: layoutStyles.loginCard, children: _jsxs("div", { className: layoutStyles.cardContainer, children: [_jsxs("div", { className: styles.leftPanel, children: [_jsx("div", { className: styles.logo, children: _jsx("img", { alt: 'Capta', className: 'capta-logo', src: '/Capta.svg' }) }), _jsx("h1", { children: "Inicia sesi\u00F3n en Capta" }), _jsxs("div", { className: styles.loginInputsContainer, children: [_jsx("div", { className: styles.loginInput, children: _jsx(Controller, { name: "email", control: control, defaultValue: "", rules: {
+                                                            required: 'El correo es obligatorio',
+                                                            pattern: {
+                                                                value: EMAIL_REGEX,
+                                                                message: 'El correo no es válido',
+                                                            },
+                                                        }, render: ({ field }) => (_jsx(LoginTextField, { ...field, "data-testid": "login_email", handleEnter: handleLogin, handleChange: clearWrongLogin, email: true, name: "email", disabled: loading, placeholder: "Correo", error: !!errors.email, helperText: errors.email?.message ?? '' })) }) }), _jsx("div", { className: styles.loginInput, children: _jsx(Controller, { name: "password", control: control, defaultValue: "", rules: {
+                                                            required: 'La contraseña es obligatoria',
+                                                        }, render: ({ field }) => (_jsx(LoginTextField, { ...field, disabled: loading, "data-testid": "login_password", handleEnter: handleLogin, handleChange: clearWrongLogin, name: "password", placeholder: "Contrase\u00F1a", error: !!errors.password, helperText: errors.password?.message ?? '' })) }) })] }), _jsxs("button", { "data-testid": "login_submit", className: styles.loginButton, onClick: () => {
+                                                if (!loading) {
+                                                    void handleLogin();
+                                                }
+                                            }, disabled: loading, children: [_jsx("label", { style: {
+                                                        visibility: loading ? 'hidden' : 'visible',
+                                                    }, children: "Inicia sesi\u00F3n" }), loading && (_jsx("div", { className: styles.loaderContainer, children: _jsx(Loader, { color: "white" }) }))] })] }), _jsx("div", { className: styles.rightPanel, children: _jsxs("div", { className: styles.rightPanelMessage, children: [_jsx("h1", { children: "\u00A1Bienvenid@!" }), _jsx("p", { children: "Ingresa tu correo y contrase\u00F1a para ingresar al formulario." })] }) })] }) }) })] }) }));
+}
+export default LoginPage;

package/dist/Login/LoginTextField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface LoginTextFieldProps {
+    /** Function called on Enter */
+    handleEnter?: () => void | Promise<void>;
+    /** If the field is of type email (otherwise password) */
+    email?: boolean;
+    /** Native change handler forwarded from react-hook-form */
+    onChange?: React.ChangeEventHandler;
+    /** Extra handler called on every change (clears the wrong-login state) */
+    handleChange?: () => void;
+    [key: string]: unknown;
+}
+declare function LoginTextField({ handleEnter, email, onChange, handleChange, ...others }: LoginTextFieldProps): JSX.Element;
+export default LoginTextField;

package/dist/Login/LoginTextField.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import EmailIcon from '../Icons/EmailIcon';
+import LockedIcon from '../Icons/LockedIcon';
+function LoginTextField({ handleEnter, email, onChange, handleChange, ...others }) {
+    return (_jsx(TextField, { ...others, variant: "outlined", size: "small", fullWidth: true, type: email ? 'email' : 'password', onChange: (event) => {
+            handleChange?.();
+            onChange?.(event);
+        }, slotProps: {
+            input: {
+                onKeyDown: (event) => {
+                    if (handleEnter && event.key === 'Enter') {
+                        void handleEnter();
+                    }
+                },
+                startAdornment: (_jsx(InputAdornment, { position: "start", children: email ? _jsx(EmailIcon, {}) : _jsx(LockedIcon, {}) })),
+                sx: {
+                    borderRadius: '10px',
+                    backgroundColor: '#ebebeb',
+                    paddingRight: '7px',
+                    '& input': { padding: '6px 0px', fontWeight: 300, height: 40 },
+                    '&.Mui-focused fieldset': { borderColor: '#3d5a7f' },
+                    '&:hover fieldset': { borderColor: '#3d5a7f' },
+                },
+            },
+        }, sx: { '& label.Mui-focused': { color: '#3d5a7f' } } }));
+}
+export default LoginTextField;