@arquimedes.co/eureka-forms 2.0.118 → 2.0.120

package/dist/@Types/Form.d.ts

@@ -11,6 +11,7 @@ export interface Form {
     size: FormSize;
     firstSection: string;
     type?: FormTypes;
+    hasLogin?: boolean;
     hasCaptcha?: boolean;
     isStandAlone?: boolean;
     style?: FormStyle;

package/dist/@Types/User.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The currently active user
+ */
+export interface User {
+    /** The User's id (if capta agent)*/
+    _id?: string;
+    /** The User's name */
+    name?: string;
+    /** The user's Email*/
+    email: string;
+    /** The expiration of the token */
+    exp: number;
+}

package/dist/@Types/User.js

@@ -0,0 +1 @@
+export {};

package/dist/App/AppHooks.js

@@ -63,6 +63,7 @@ import { fetchForm } from '../Services/FormService';
 import { calcCbrForm } from '../Utils/CBRFunctions';
 import { calcInitialSections, calcValuesStore } from './AppFunctions';
 import { useAppDispatch } from '../hooks';
+import { jwtDecode } from 'jwt-decode';
 import InternalFormStyle from '../constants/InternalFormStyle';
 import { calcDependencies } from '../Form/FormFunctions';
 import { iterateNestedSteps } from '../FormSteps/StepFunctions';
@@ -108,19 +109,20 @@ export var useSetupApp = function (isEmbedded, _a) {
         });
     }); };
     var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var idOrganization, organization, form, countryCode, match, dependencies, values;
+        var idOrganization, organization, user, form, countryCode, match, dependencies, values, token;
         var _a;
-        var _b, _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
+        var _b, _c, _d, _e, _f, _g;
+        return __generator(this, function (_h) {
+            switch (_h.label) {
                 case 0:
                     idOrganization = others.idOrganization;
                     organization = null;
+                    user = null;
                     form = formData !== null && formData !== void 0 ? formData : null;
                     if (!(form && preview && form.isStandAlone)) return [3 /*break*/, 2];
                     return [4 /*yield*/, loadOrg()];
                 case 1:
-                    organization = _g.sent();
+                    organization = _h.sent();
                     return [3 /*break*/, 4];
                 case 2:
                     if (!(!form && apiKey)) return [3 /*break*/, 4];
@@ -130,8 +132,8 @@ export var useSetupApp = function (isEmbedded, _a) {
                         ])];
                 case 3:
                     //Is iframe or widget
-                    _a = _g.sent(), organization = _a[0], form = _a[1];
-                    _g.label = 4;
+                    _a = _h.sent(), organization = _a[0], form = _a[1];
+                    _h.label = 4;
                 case 4:
                     if (organization && !idOrganization)
                         idOrganization = organization.idOrganization;
@@ -185,13 +187,30 @@ export var useSetupApp = function (isEmbedded, _a) {
                     dependencies = {};
                     return [4 /*yield*/, calcValuesStore({ idOrganization: idOrganization, countryCode: countryCode }, form, valuesData, postview, customSteps)];
                 case 5:
-                    values = _g.sent();
-                    dispatch(reset(__assign(__assign({ apiKey: apiKey, formStyle: internal
+                    values = _h.sent();
+                    if (form.hasLogin && !internal && !preview) {
+                        token = localStorage.getItem('token');
+                        if (token) {
+                            try {
+                                user = jwtDecode(token);
+                                if (user && Date.now() / 1000 >= user.exp) {
+                                    //TODO: Posible check specific login key to make sure this user is valid? or have token per key?
+                                    user = null;
+                                    localStorage.removeItem('token');
+                                }
+                            }
+                            catch (error) {
+                                user = null;
+                                localStorage.removeItem('token');
+                            }
+                        }
+                    }
+                    dispatch(reset(__assign(__assign({ user: user, apiKey: apiKey, formStyle: internal
                             ? InternalFormStyle
                             : __assign(__assign({}, InternalFormStyle), ((_d = form === null || form === void 0 ? void 0 : form.style) !== null && _d !== void 0 ? _d : {})), confirmation: {
                             confirmationMessage: (_e = form.confirmationMessage) !== null && _e !== void 0 ? _e : BaseConfirmationMessage,
                             showLink: (_f = form.showLink) !== null && _f !== void 0 ? _f : false,
-                        }, internal: !!internal, idOrganization: idOrganization, idCurrentAgent: idCurrentAgent, preview: !!preview, partial: !!partial, postview: !!postview, editable: !!(editable !== null && editable !== void 0 ? editable : true), values: values }, calcInitialSections(form)), { dependencies: calcDependencies(form.steps, customSteps, form.steps, dependencies, values), countryCode: countryCode })));
+                        }, internal: !!internal, idOrganization: idOrganization, idCurrentAgent: (_g = user === null || user === void 0 ? void 0 : user._id) !== null && _g !== void 0 ? _g : idCurrentAgent, preview: !!preview, partial: !!partial, postview: !!postview, editable: !!(editable !== null && editable !== void 0 ? editable : true), values: values }, calcInitialSections(form)), { dependencies: calcDependencies(form.steps, customSteps, form.steps, dependencies, values), countryCode: countryCode })));
                     return [2 /*return*/];
             }
         });

package/dist/Form/Form.js

@@ -68,6 +68,7 @@ import { useAppDispatch, useAppSelector } from '../hooks';
 import FormContext from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
 import { focusStep } from '../States/SiteSlice';
+import LoginPage from '../Login/LoginPage';
 var localeMap = {
     en: enLocale,
     'en-US': enLocale,
@@ -85,7 +86,7 @@ function FormComponent(_a) {
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, setSubmit = _a.setSubmit, scrollToTop = _a.scrollToTop, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns, customConfirmation = _a.customConfirmation;
-    var _l = useAppSelector(function (state) { return state.global; }), idOrganization = _l.idOrganization, internal = _l.internal, postview = _l.postview;
+    var _l = useAppSelector(function (state) { return state.global; }), idOrganization = _l.idOrganization, internal = _l.internal, postview = _l.postview, user = _l.user;
     var formMethods = useForm({
         mode: 'onTouched',
         shouldFocusError: true,
@@ -184,8 +185,11 @@ function FormComponent(_a) {
             } }, { children: _jsx("div", __assign({ className: styles.widgetFormContainer, ref: containerRef }, { children: renderForm() })) })));
     }
     else {
+        if (user === null && form.hasLogin) {
+            return (_jsx("div", __assign({ className: styles.loginContainer }, { children: _jsx(LoginPage, { form: form }) })));
+        }
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_e = (_d = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _d === void 0 ? void 0 : _d.navbarColor) !== null && _e !== void 0 ? _e : (_f = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _f === void 0 ? void 0 : _f.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { apiKey: form.apiKey, logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_e = (_d = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _d === void 0 ? void 0 : _d.navbarColor) !== null && _e !== void 0 ? _e : (_f = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _f === void 0 ? void 0 : _f.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
                         background: (_h = (_g = form.style) === null || _g === void 0 ? void 0 : _g.standAloneBackgroundColor) !== null && _h !== void 0 ? _h : '#ffffff',
                     } }, { children: _jsx("div", __assign({ className: isResponsive
                             ? styles.fullScreenStandAloneForm

package/dist/Form/Form.module.css

@@ -14,6 +14,15 @@
     overflow: hidden;
 }
 
+.loginContainer {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    min-height: 100vh;
+    display: flex;
+    overflow-x: hidden;
+}
+
 .standAloneFormCard {
     -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -62,8 +62,8 @@ function ClassifierSelectorStep(_a) {
     if (!classifier)
         return _jsx("div", {});
     var options = useMemo(function () {
-        var _a;
-        return (_a = classifier.children) === null || _a === void 0 ? void 0 : _a.filter(function (idClassifier) {
+        var _a, _b;
+        return ((_b = (_a = classifier.children) === null || _a === void 0 ? void 0 : _a.filter(function (idClassifier) {
             var _a;
             var option = step.options[idClassifier];
             if ((option === null || option === void 0 ? void 0 : option.type) === ClassifierOptionTypes.HIDE ||
@@ -82,7 +82,7 @@ function ClassifierSelectorStep(_a) {
                     ? classifier === null || classifier === void 0 ? void 0 : classifier.clientName
                     : classifier === null || classifier === void 0 ? void 0 : classifier.name,
             };
-        });
+        })) !== null && _b !== void 0 ? _b : []);
     }, idDependencies.map(function (id) { return dependencies[id].value; }));
     var mapNestedOption = function () {
         if (value) {

package/dist/FormSteps/StepFunctions.js

@@ -151,7 +151,7 @@ export var calcDefaultValue = function (step) {
     }
 };
 export var iterateNestedSteps = function (idStep, steps, iteration, path) {
-    if (path === void 0) { path = [idStep]; }
+    if (path === void 0) { path = []; }
     var step = steps[idStep];
     if (!step) {
         console.error('Missing Step:', idStep);

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

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { calcStepWidth } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
@@ -44,6 +53,7 @@ function TitleStep(_a) {
         }
         return values;
     }, [dependencies]);
+    var path = useMemo(function () { return __spreadArray(__spreadArray([], step.stepPath, true), [step.id], false).join('.'); }, [step.stepPath, step.id]);
     return (_jsxs("div", __assign({ className: styles.container, style: {
             color: formStyle.textColor,
             width: widthStats.currentBreakPoint <= size
@@ -54,7 +64,7 @@ function TitleStep(_a) {
                         widthStats.currentBreakPoint <= size
                         ? 'center'
                         : 'start',
-                } }, { children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: "".concat(step.stepPath.join('.'), ".title"), onChange: function (title) { return onChange(__assign(__assign({}, value), { title: title })); } }) })), _jsx("div", __assign({ className: styles.descriptionPar }, { children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: "".concat(step.stepPath.join('.'), ".description"), onChange: function (description) {
+                } }, { children: _jsx(SmartDraftRenderer, { draft: title, dependencies: values, property: "".concat(path, ".title"), onChange: function (title) { return onChange(__assign(__assign({}, value), { title: title })); } }) })), _jsx("div", __assign({ className: styles.descriptionPar }, { children: _jsx(SmartDraftRenderer, { draft: description, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: "".concat(path, ".description"), onChange: function (description) {
                         return onChange(__assign(__assign({}, value), { description: description }));
                     } }) }))] })));
 }

package/dist/Icons/EmailIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from './@IconTypes';
+declare function EmailIcon({ className, style, fill }: IconProps): JSX.Element;
+export default EmailIcon;

package/dist/Icons/EmailIcon.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+function EmailIcon(_a) {
+    var className = _a.className, style = _a.style, fill = _a.fill;
+    return (_jsx("svg", __assign({ fill: fill, style: style, className: className, 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 EmailIcon;

package/dist/Icons/LockedIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from './@IconTypes';
+declare function LockedIcon({ className, style, fill }: IconProps): JSX.Element;
+export default LockedIcon;

package/dist/Icons/LockedIcon.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+function LockedIcon(_a) {
+    var className = _a.className, style = _a.style, fill = _a.fill;
+    return (_jsx("svg", __assign({ fill: fill, style: style, className: className, 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,11 @@
+/// <reference types="react" />
+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,177 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 } 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';
+var EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+/**
+ * Displays the specific login component depending on the url
+ * @returns the respective component
+ */
+function LoginPage(_a) {
+    var _this = this;
+    var form = _a.form;
+    var dispatch = useAppDispatch();
+    /** If login has errors */
+    var _b = useState(false), wrongLogin = _b[0], setWrongLogin = _b[1];
+    /** if waiting for response */
+    var _c = useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = useForm({
+        mode: 'onTouched',
+    }), getValues = _d.getValues, clearErrors = _d.clearErrors, errors = _d.formState.errors, setError = _d.setError, trigger = _d.trigger, control = _d.control;
+    /**
+     * Handles login, redirects the user if the current subdomain is not valid
+     */
+    var handleLogin = function () { return __awaiter(_this, void 0, void 0, function () {
+        var isValid, values, isInternal, payload, token, user, err_1;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, trigger()];
+                case 1:
+                    isValid = _c.sent();
+                    values = getValues();
+                    isInternal = ['andres'].includes(values.email);
+                    if (!((isValid || isInternal) && form.apiKey)) return [3 /*break*/, 6];
+                    _c.label = 2;
+                case 2:
+                    _c.trys.push([2, 5, , 6]);
+                    setLoading(true);
+                    payload = values;
+                    if (isInternal) {
+                        payload.email = values.email + '@capta.co';
+                    }
+                    return [4 /*yield*/, login(form.apiKey, payload)];
+                case 3:
+                    token = _c.sent();
+                    localStorage.setItem('token', token);
+                    user = jwtDecode(token);
+                    axiosInstance.defaults.headers.Authorization =
+                        'Bearer ' + token;
+                    return [4 /*yield*/, dispatch(setUser(user))];
+                case 4:
+                    _c.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    err_1 = _c.sent();
+                    setLoading(false);
+                    if (((_a = err_1 === null || err_1 === void 0 ? void 0 : err_1.response) === null || _a === void 0 ? void 0 : _a.status) !== 400) {
+                        console.error(err_1);
+                    }
+                    if (((_b = err_1 === null || err_1 === void 0 ? void 0 : err_1.response) === null || _b === void 0 ? void 0 : _b.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);
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Function that clears errors if there are any.
+     */
+    var clearWrongLogin = function () {
+        if (wrongLogin) {
+            setWrongLogin(false);
+            clearErrors(['email', 'password']);
+        }
+    };
+    return (_jsx(MaterialProviders, { children: _jsxs("div", __assign({ className: layoutStyles.loginLayout }, { children: [_jsx("div", { className: layoutStyles.semiCircle }), _jsx("div", { className: layoutStyles.triangle }), _jsx("div", __assign({ className: layoutStyles.cardLayout }, { children: _jsx("div", __assign({ className: layoutStyles.loginCard }, { children: _jsxs("div", __assign({ className: layoutStyles.cardContainer }, { children: [_jsxs("div", __assign({ className: styles.leftPanel }, { children: [_jsx("div", __assign({ className: styles.logo }, { children: _jsx("img", { alt: 'Capta', className: 'capta-logo', src: '/Capta.svg' }) })), _jsx("h1", { children: "Inicia sesi\u00F3n en Capta" }), _jsxs("div", __assign({ className: styles.loginInputsContainer }, { children: [_jsx("div", __assign({ 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: function (_a) {
+                                                            var _b;
+                                                            var field = _a.field;
+                                                            return (_jsx(LoginTextField, __assign({}, field, { "data-testid": "login_email", handleEnter: handleLogin, handleChange: clearWrongLogin, email: true, name: "email", disabled: loading, placeholder: "Correo", error: !!errors.email, helperText: errors.email
+                                                                    ? (_b = errors.email.message) === null || _b === void 0 ? void 0 : _b.toString()
+                                                                    : '' })));
+                                                        } }) })), _jsx("div", __assign({ className: styles.loginInput }, { children: _jsx(Controller, { name: "password", control: control, defaultValue: "", rules: {
+                                                            required: 'La contraseña es obligatoria',
+                                                        }, render: function (_a) {
+                                                            var _b;
+                                                            var field = _a.field;
+                                                            return (_jsx(LoginTextField, __assign({}, field, { disabled: loading, "data-testid": "login_password", handleEnter: handleLogin, handleChange: clearWrongLogin, name: "password", placeholder: "Contrase\u00F1a", error: !!errors.password, helperText: errors.password
+                                                                    ? (_b = errors.password.message) === null || _b === void 0 ? void 0 : _b.toString()
+                                                                    : '' })));
+                                                        } }) }))] })), _jsxs("button", __assign({ "data-testid": "login_submit", className: styles.loginButton, onClick: function () {
+                                                if (!loading) {
+                                                    void handleLogin();
+                                                }
+                                            }, disabled: loading }, { children: [_jsx("label", __assign({ style: {
+                                                        visibility: loading
+                                                            ? 'hidden'
+                                                            : 'visible',
+                                                    } }, { children: "Inicia sesi\u00F3n" })), loading && (_jsx("div", __assign({ className: styles.loaderContainer }, { children: _jsx(Loader, { color: "white" }) })))] }))] })), _jsx("div", __assign({ className: styles.rightPanel }, { children: _jsxs("div", __assign({ 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,15 @@
+import React from 'react';
+interface ComponentProps {
+    /** Function called on Enter */
+    handleEnter: any;
+    /** IF is of type email */
+    email: boolean;
+    /** Function called on change */
+    onChange: React.ChangeEventHandler;
+    /** Function called on change */
+    handleChange: any;
+}
+declare class LoginTextField extends React.Component<ComponentProps | any> {
+    render(): JSX.Element;
+}
+export default LoginTextField;

package/dist/Login/LoginTextField.js

@@ -0,0 +1,134 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+import { withStyles } from '@material-ui/core/styles';
+import MailOutlineIcon from '@material-ui/icons/MailOutline';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import LockIcon from '@material-ui/icons/Lock';
+var CustomTextField = withStyles({
+    root: {
+        '& input': {
+            padding: '6px 0px',
+            backgroundColor: '#ebebeb',
+            fontWeight: 300,
+            height: 40,
+            borderRadius: 10,
+        },
+        '& label.EF-MuiInputLabel-shrink': {
+            marginTop: '0px',
+            margin: -2,
+        },
+        '& input + fieldset': {
+            borderRadius: 10,
+        },
+        '& .EF-MuiInput-underline:after': {
+            borderBottomColor: '#3d5a7f',
+        },
+        '& .EF-MuiInputBase-root': {
+            backgroundColor: '#ebebeb',
+        },
+        '& .EF-MuiOutlinedInput-root': {
+            borderRadius: 10,
+            backgroundColor: '#ebebeb',
+            '&.Mui-focused fieldset': {
+                borderColor: '#3d5a7f',
+            },
+        },
+        '& label.Mui-focused': {
+            color: '#3d5a7f',
+        },
+        //ESsto es lo nuevo
+        '& input, textarea': {
+            padding: '6px 0px',
+            fontWeight: 300,
+            height: 40,
+            backgroundColor: '#ebebeb',
+            borderRadius: 10,
+        },
+        '& label': {
+            marginTop: '-4px',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            maxWidth: 'calc(100% - 22px)',
+        },
+        '& .EF-MuiOutlinedInput-root:hover .EF-MuiOutlinedInput-notchedOutline': {
+            borderColor: '#3d5a7f',
+        },
+        '& .Mui-error': {},
+        '& .EF-MuiOutlinedInput-adornedEnd': {
+            paddingRight: '7px',
+        },
+        '& .EF-MuiFormHelperText-root': {
+            color: '#0a0101ff',
+            position: 'relative',
+            marginRight: 14,
+        },
+        '& .EF-MuiFormHelperText-root.Mui-error': {
+            color: '#cc2936',
+        },
+        '& .EF-MuiOutlinedInput-multiline': {
+            padding: 0,
+            backgroundColor: '#ebebeb',
+        },
+    },
+})(TextField);
+var LoginTextField = /** @class */ (function (_super) {
+    __extends(LoginTextField, _super);
+    function LoginTextField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    LoginTextField.prototype.render = function () {
+        var _a = this.props, handleEnter = _a.handleEnter, email = _a.email, onChange = _a.onChange, handleChange = _a.handleChange, others = __rest(_a, ["handleEnter", "email", "onChange", "handleChange"]);
+        return (_jsx(CustomTextField, __assign({}, others, { variant: "outlined", size: "small", fullWidth: true, type: email ? 'email' : 'password', onChange: function (event) {
+                handleChange === null || handleChange === void 0 ? void 0 : handleChange();
+                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            }, InputProps: {
+                onKeyPress: function (event) {
+                    if (handleEnter && event.key === 'Enter') {
+                        handleEnter();
+                    }
+                },
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: email ? _jsx(MailOutlineIcon, {}) : _jsx(LockIcon, {}) }))),
+            } })));
+    };
+    return LoginTextField;
+}(React.Component));
+export default LoginTextField;

package/dist/Services/UserService.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Function that handles the app's login
+ * @param credentials {email, password} of the user
+ * @returns an array with the users Token and RefreshToken
+ */
+export declare const login: (apiKey: string, credentials: Record<string, string>) => Promise<string>;
+/**
+ * Function that indicates to the server to delete the refresh token
+ */
+export declare const logout: (apiKey: string) => Promise<void>;

package/dist/Services/UserService.js

@@ -0,0 +1,71 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import axiosInstance from '../Utils/AxiosAPI';
+/**
+ * Function that handles the app's login
+ * @param credentials {email, password} of the user
+ * @returns an array with the users Token and RefreshToken
+ */
+export var login = function (apiKey, credentials) { return __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, axiosInstance.post("forms/".concat(apiKey, "/auth"), credentials)];
+            case 1:
+                response = _a.sent();
+                return [2 /*return*/, response === null || response === void 0 ? void 0 : response.data];
+        }
+    });
+}); };
+/**
+ * Function that indicates to the server to delete the refresh token
+ */
+export var logout = function (apiKey) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, axiosInstance.delete("forms/".concat(apiKey, "/auth"), {
+                    headers: {
+                        Authorization: 'Bearer ' + localStorage.getItem('refreshToken'),
+                    },
+                    timeout: 5000,
+                })];
+            case 1:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}); };

package/dist/Shared/Navbar/Navbar.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 interface NavBarProps {
+    apiKey?: string;
     /** Url of the current logo of the current organization */
     logo?: string;
     /** The color of the navbar */
     color?: string;
 }
-declare function Navbar({ logo, color }: NavBarProps): JSX.Element;
+declare function Navbar({ logo, color, apiKey }: NavBarProps): JSX.Element;
 export default Navbar;

package/dist/Shared/Navbar/Navbar.js

@@ -9,10 +9,91 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import styles from './Navbar.module.css';
+import { IconButton, Avatar, Menu, MenuItem } from '@material-ui/core';
+import { logout } from '../../Services/UserService';
+import { useAppSelector } from '../../hooks';
 function Navbar(_a) {
-    var logo = _a.logo, color = _a.color;
-    return (_jsx("div", __assign({ className: styles.navContainer, style: { backgroundColor: color } }, { children: _jsx("img", { src: logo, alt: "Organization Logo", className: styles.navImage }) })));
+    var _this = this;
+    var _b;
+    var logo = _a.logo, color = _a.color, apiKey = _a.apiKey;
+    var ref = useRef(null);
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var user = useAppSelector(function (state) { return state.global.user; });
+    return (_jsxs("div", __assign({ className: styles.navContainer, style: { backgroundColor: color } }, { children: [_jsx("img", { src: logo, alt: "Organization Logo", className: styles.navImage }), user && apiKey && (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: styles.navBarAvatar, ref: ref }, { children: _jsx(IconButton, __assign({ style: {
+                                width: 42,
+                                height: 42,
+                                padding: 0,
+                                margin: 'auto',
+                            }, "aria-label": "Mi Perfil", "aria-haspopup": "true", onClick: function () {
+                                setOpen(true);
+                            } }, { children: _jsx(Avatar, { style: { fontSize: '40px' }, alt: (_b = user === null || user === void 0 ? void 0 : user.name) !== null && _b !== void 0 ? _b : user === null || user === void 0 ? void 0 : user.email }) })) })), _jsx(Menu, __assign({ id: "simple-menu", anchorEl: ref.current, getContentAnchorEl: null, anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right',
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'right',
+                        }, open: open, onClose: function () { return setOpen(false); } }, { children: _jsx(MenuItem, __assign({ onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                var err_1;
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            setOpen(false);
+                                            _a.label = 1;
+                                        case 1:
+                                            _a.trys.push([1, 3, , 4]);
+                                            return [4 /*yield*/, logout(apiKey)];
+                                        case 2:
+                                            _a.sent();
+                                            return [3 /*break*/, 4];
+                                        case 3:
+                                            err_1 = _a.sent();
+                                            console.error(err_1);
+                                            return [3 /*break*/, 4];
+                                        case 4:
+                                            localStorage.removeItem('token');
+                                            window.location.reload();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); } }, { children: "Cerrar sesi\u00F3n" })) }))] }))] })));
 }
 export default Navbar;

package/dist/Shared/Navbar/Navbar.module.css

@@ -6,3 +6,18 @@
     height: 40px;
     margin: auto 0 auto 15px;
 }
+
+.navBarAvatar {
+    height: 60px;
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+    margin-right: 15px;
+}
+
+.navBarAvatarIcon {
+    width: 100px;
+    height: 100px;
+}

package/dist/States/GlobalSlice.d.ts

@@ -3,6 +3,7 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { SiteState } from './SiteSlice';
 import { EurekaDraft } from '../@Types/Draft/Draft';
 import { CountryCode } from 'libphonenumber-js';
+import { User } from '../@Types/User';
 export interface GlobalState {
     apiKey?: string;
     idOrganization: string;
@@ -20,6 +21,8 @@ export interface GlobalState {
     partial: boolean;
     internal: boolean;
     loaded: boolean;
+    /** Current User */
+    user: User | null | undefined;
 }
 export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState, {
     reset: (state: import("immer/dist/internal").WritableDraft<GlobalState>, action: PayloadAction<Omit<GlobalState, 'loaded'> & SiteState>) => {
@@ -38,6 +41,7 @@ export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState,
             showLink: boolean;
         };
         internal: boolean;
+        user: User | null | undefined;
         dependencies: import("../Form/Form").DependencyStore;
         values: import("./SiteSlice").ValuesStore;
         idCurrentSection: string | null;
@@ -45,6 +49,7 @@ export declare const GlobalSlice: import("@reduxjs/toolkit").Slice<GlobalState,
         nextSections: string[];
         focusStep?: string | undefined;
     };
+    setUser: (state: import("immer/dist/internal").WritableDraft<GlobalState>, action: PayloadAction<User | null>) => void;
 }, "global">;
-export declare const reset: import("@reduxjs/toolkit").ActionCreatorWithPayload<Omit<GlobalState, "loaded"> & SiteState, "global/reset">;
+export declare const reset: import("@reduxjs/toolkit").ActionCreatorWithPayload<Omit<GlobalState, "loaded"> & SiteState, "global/reset">, setUser: import("@reduxjs/toolkit").ActionCreatorWithPayload<User | null, "global/setUser">;
 export default GlobalSlice;

package/dist/States/GlobalSlice.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var _a;
 import InternalFormStyle from '../constants/InternalFormStyle';
 import { createSlice } from '@reduxjs/toolkit';
 import { BaseConfirmationMessage } from '../Contexts/FormContext';
@@ -26,6 +27,7 @@ var initialState = {
     partial: false,
     internal: false,
     loaded: false,
+    user: undefined,
 };
 export var GlobalSlice = createSlice({
     name: 'global',
@@ -34,7 +36,10 @@ export var GlobalSlice = createSlice({
         reset: function (state, action) {
             return __assign(__assign(__assign({}, state), action.payload), { loaded: true });
         },
+        setUser: function (state, action) {
+            state.user = action.payload;
+        },
     },
 });
-export var reset = GlobalSlice.actions.reset;
+export var reset = (_a = GlobalSlice.actions, _a.reset), setUser = _a.setUser;
 export default GlobalSlice;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version": "2.0.118",
+    "version": "2.0.120",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",
@@ -25,6 +25,7 @@
         "date-fns": "^2.23.0",
         "draft-js": "^0.11.7",
         "i18n-iso-countries": "^7.11.3",
+        "jwt-decode": "^4.0.0",
         "libphonenumber-js": "^1.11.7",
         "logrocket": "^2.2.1",
         "nanoid": "^3.3.7",