@arquimedes.co/eureka-forms 3.0.47-test → 3.0.48-test

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;