@mailstep/design-system 0.8.27 → 0.8.28

package/ui/Blocks/LoginPage/LoginPage.js

@@ -1,80 +1,63 @@
+import { Admin } from "../../Elements/Icon/icons/Admin.js";
+import { H6 } from "../../Elements/Typography/Typography.js";
+import LanguageSwitch_default from "../LanguageSwitch/index.js";
+import { LoginForm } from "./components/LoginForm.js";
+import "./utils/links.js";
+import { SocialLinks } from "./components/SocialLinks.js";
+import { CardBodyWithLanguage, LanguageBox, LogoWrapper, MailTo, MainLogo, Version, Wrapper } from "./styles.js";
+import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Admin } from "../../Elements/Icon/icons/Admin";
-import { H6 } from "../../Elements/Typography/Typography";
-import LanguageSwitch from "../LanguageSwitch";
-import { LoginForm } from "./components/LoginForm";
-import { SocialLinks } from "./components/SocialLinks";
-import { EMAIL_ADDRESS } from "./utils/links";
 import { Trans } from "@lingui/react";
-import { x } from "@xstyled/styled-components";
-import { Wrapper, MailTo, LanguageBox, LogoWrapper, MainLogo, Version, CardBodyWithLanguage } from "./styles";
-var Login = function Login(param) {
-    var onSubmit = param.onSubmit, activeLanguage = param.activeLanguage, onLanguageChange = param.onLanguageChange, children = param.children, brand = param.brand, brandVariant = param.brandVariant, isSubmitting = param.isSubmitting, isSubmitDisabled = param.isSubmitDisabled, withDistributionCenterSelect = param.withDistributionCenterSelect, distributionCenterOptions = param.distributionCenterOptions, selectedDistributionCenter = param.selectedDistributionCenter, onChangeDistributionCenter = param.onChangeDistributionCenter, languageItems = param.languageItems, version = param.version, backgroundImage = param.backgroundImage, admin = param.admin, _param_hasSupport = param.hasSupport, hasSupport = _param_hasSupport === void 0 ? true : _param_hasSupport, _param_hasSocialLinks = param.hasSocialLinks, hasSocialLinks = _param_hasSocialLinks === void 0 ? true : _param_hasSocialLinks, _param_withPassword = param.withPassword, withPassword = _param_withPassword === void 0 ? true : _param_withPassword, _param_withLogin = param.withLogin, withLogin = _param_withLogin === void 0 ? true : _param_withLogin, loginLabel = param.loginLabel, passwordLabel = param.passwordLabel;
-    return /* @__PURE__ */ jsxs(Wrapper, {
-        backgroundImage: backgroundImage,
-        children: [
-            /* @__PURE__ */ jsxs(CardBodyWithLanguage, {
-                children: [
-                    /* @__PURE__ */ jsxs(LogoWrapper, {
-                        children: [
-                            /* @__PURE__ */ jsx(MainLogo, {
-                                brand: brand,
-                                variant: brandVariant
-                            }),
-                            admin && /* @__PURE__ */ jsx(Admin, {})
-                        ]
-                    }),
-                    /* @__PURE__ */ jsxs(LanguageBox, {
-                        children: [
-                            hasSupport && /* @__PURE__ */ jsxs(x.div, {
-                                mr: 4,
-                                children: [
-                                    /* @__PURE__ */ jsx(H6, {
-                                        color: "gray1",
-                                        variant: "bold",
-                                        mt: "8px",
-                                        mb: "8px",
-                                        as: "h6",
-                                        children: /* @__PURE__ */ jsx(Trans, {
-                                            id: "form.heading.support",
-                                            message: "Support:"
-                                        })
-                                    }),
-                                    /* @__PURE__ */ jsx(MailTo, {
-                                        href: "mailto:mailstep@mailstep.cz",
-                                        children: EMAIL_ADDRESS
-                                    })
-                                ]
-                            }),
-                            /* @__PURE__ */ jsx(LanguageSwitch, {
-                                activeLanguage: activeLanguage,
-                                onLanguageChange: onLanguageChange,
-                                languageItems: languageItems
-                            })
-                        ]
-                    }),
-                    /* @__PURE__ */ jsx(LoginForm, {
-                        onSubmit: onSubmit,
-                        isSubmitDisabled: isSubmitDisabled,
-                        isSubmitting: isSubmitting,
-                        onChangeDistributionCenter: onChangeDistributionCenter,
-                        withDistributionCenterSelect: withDistributionCenterSelect,
-                        distributionCenterOptions: distributionCenterOptions,
-                        selectedDistributionCenter: selectedDistributionCenter,
-                        withPassword: withPassword,
-                        withLogin: withLogin,
-                        loginLabel: loginLabel,
-                        passwordLabel: passwordLabel
-                    })
-                ]
-            }),
-            children,
-            version && /* @__PURE__ */ jsx(Version, {
-                children: version
-            }),
-            hasSocialLinks && /* @__PURE__ */ jsx(SocialLinks, {})
-        ]
-    });
+//#region packages/ui/Blocks/LoginPage/LoginPage.tsx
+const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel }) => {
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		backgroundImage,
+		children: [
+			/* @__PURE__ */ jsxs(CardBodyWithLanguage, { children: [
+				/* @__PURE__ */ jsxs(LogoWrapper, { children: [/* @__PURE__ */ jsx(MainLogo, {
+					brand,
+					variant: brandVariant
+				}), admin && /* @__PURE__ */ jsx(Admin, {})] }),
+				/* @__PURE__ */ jsxs(LanguageBox, { children: [hasSupport && /* @__PURE__ */ jsxs(x.div, {
+					mr: 4,
+					children: [/* @__PURE__ */ jsx(H6, {
+						color: "gray1",
+						variant: "bold",
+						mt: "8px",
+						mb: "8px",
+						as: "h6",
+						children: /* @__PURE__ */ jsx(Trans, {
+							id: "form.heading.support",
+							message: "Support:"
+						})
+					}), /* @__PURE__ */ jsx(MailTo, {
+						href: "mailto:mailstep@mailstep.cz",
+						children: "mailstep@mailstep.cz"
+					})]
+				}), /* @__PURE__ */ jsx(LanguageSwitch_default, {
+					activeLanguage,
+					onLanguageChange,
+					languageItems
+				})] }),
+				/* @__PURE__ */ jsx(LoginForm, {
+					onSubmit,
+					isSubmitDisabled,
+					isSubmitting,
+					onChangeDistributionCenter,
+					withDistributionCenterSelect,
+					distributionCenterOptions,
+					selectedDistributionCenter,
+					withPassword,
+					withLogin,
+					loginLabel,
+					passwordLabel
+				})
+			] }),
+			children,
+			version && /* @__PURE__ */ jsx(Version, { children: version }),
+			hasSocialLinks && /* @__PURE__ */ jsx(SocialLinks, {})
+		]
+	});
 };
-var LoginPage_default = Login;
-export { LoginPage_default as default };
+//#endregion
+export { Login as default };

package/ui/Blocks/LoginPage/assets/mailship.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Blocks/LoginPage/assets/mailship.jpg
+var mailship_default = "./mailship.jpg";
+//#endregion
+export { mailship_default as default };

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -1,225 +1,170 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 10px;\n  & > div > H4 {\n    display: none;\n  }\n  @media (min-width: 1024px) {\n    height: 300px;\n    min-width: 300px;\n    margin-bottom: 50px;\n    & > div > H4 {\n      display: block;\n    }\n  }\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n  display: flex;\n  margin-top: 15px;\n  width: 100%;\n  @media (min-width: 1024px) {\n    display: inline-block;\n    margin-top: 40px;\n  }\n"
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-import { jsx, jsxs } from "react/jsx-runtime";
+import Button from "../../../Elements/Button/Button.js";
+import SingleSelect from "../../../Elements/SingleSelect/SingleSelect.js";
+import { Input } from "../../../Forms/Input/Input.js";
 import { useCallback, useState } from "react";
-import Button from "../../../Elements/Button/Button";
-import SingleSelect from "../../../Elements/SingleSelect/SingleSelect";
-import { Input } from "../../../Forms/Input/Input";
+import styled$1, { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
-import styled, { x } from "@xstyled/styled-components";
-var Container = styled.div(_templateObject());
-var ButtonsContainer = styled.div(_templateObject1());
-var LoginForm = function LoginForm(param) {
-    var onSubmit = param.onSubmit, isSubmitting = param.isSubmitting, isSubmitDisabled = param.isSubmitDisabled, distributionCenterOptions = param.distributionCenterOptions, withDistributionCenterSelect = param.withDistributionCenterSelect, onChangeDistributionCenter = param.onChangeDistributionCenter, selectedDistributionCenter = param.selectedDistributionCenter, withPassword = param.withPassword, withLogin = param.withLogin, loginLabel = param.loginLabel, passwordLabel = param.passwordLabel;
-    var _useState = _sliced_to_array(useState(""), 2), login = _useState[0], setLogin = _useState[1];
-    var _useState1 = _sliced_to_array(useState(""), 2), password = _useState1[0], setPassword = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(""), 2), submitError = _useState2[0], setSubmitError = _useState2[1];
-    var _useState3 = _sliced_to_array(useState(""), 2), loginError = _useState3[0], setLoginError = _useState3[1];
-    var _useState4 = _sliced_to_array(useState(""), 2), passwordError = _useState4[0], setPasswordError = _useState4[1];
-    var _useState5 = _sliced_to_array(useState(""), 2), dcCenterError = _useState5[0], setDCCenterError = _useState5[1];
-    var handleChangeLogin = useCallback(function(e) {
-        setLogin(e.target.value);
-    }, []);
-    var handleChangePassword = useCallback(function(e) {
-        setPassword(e.target.value);
-    }, []);
-    var handleSubmit = useCallback(function() {
-        setLoginError("");
-        setPasswordError("");
-        setDCCenterError("");
-        setSubmitError("");
-        if (withLogin && !login) {
-            setLoginError(i18n._({
-                id: "requiredField",
-                message: "Required field"
-            }));
-            return;
-        }
-        if (withPassword && !password) {
-            setPasswordError(i18n._({
-                id: "requiredField",
-                message: "Required field"
-            }));
-            return;
-        }
-        if (withDistributionCenterSelect && !selectedDistributionCenter) {
-            setDCCenterError(i18n._({
-                id: "requiredField",
-                message: "Required field"
-            }));
-            return;
-        }
-        onSubmit({
-            login: login,
-            password: password
-        }).catch(function(error) {
-            error && setSubmitError(String(error));
-        }).finally(function() {
-            setPassword("");
-        });
-    }, [
-        login,
-        password,
-        selectedDistributionCenter,
-        withDistributionCenterSelect,
-        withPassword,
-        onSubmit
-    ]);
-    var handleChangeDistributionCenter = useCallback(function(e) {
-        onChangeDistributionCenter === null || onChangeDistributionCenter === void 0 ? void 0 : onChangeDistributionCenter(e.target.value);
-    }, [
-        onChangeDistributionCenter
-    ]);
-    return /* @__PURE__ */ jsxs(Container, {
-        children: [
-            withLogin && /* @__PURE__ */ jsx(x.div, {
-                mt: "24px",
-                children: /* @__PURE__ */ jsx(Input, {
-                    label: loginLabel || i18n._({
-                        id: "form.login.label",
-                        message: "Login"
-                    }),
-                    placeholder: i18n._({
-                        id: "form.login.label",
-                        message: "Login"
-                    }),
-                    type: "text",
-                    name: "login",
-                    autoFocus: true,
-                    error: loginError,
-                    value: login,
-                    onChange: handleChangeLogin,
-                    onEnter: handleSubmit
-                })
-            }),
-            withPassword && /* @__PURE__ */ jsx(x.div, {
-                mt: "12px",
-                children: /* @__PURE__ */ jsx(Input, {
-                    label: passwordLabel || i18n._({
-                        id: "form.password.label",
-                        message: "Password"
-                    }),
-                    placeholder: i18n._({
-                        id: "form.password.label",
-                        message: "Password"
-                    }),
-                    name: "password",
-                    type: "password",
-                    value: password,
-                    onChange: handleChangePassword,
-                    error: passwordError,
-                    onEnter: handleSubmit
-                })
-            }),
-            withDistributionCenterSelect && /* @__PURE__ */ jsx(x.div, {
-                mt: "12px",
-                children: /* @__PURE__ */ jsx(SingleSelect, {
-                    onChange: handleChangeDistributionCenter,
-                    options: distributionCenterOptions,
-                    value: selectedDistributionCenter,
-                    placeholder: i18n._({
-                        id: "form.distributionCenter.label",
-                        message: "Distribution center"
-                    }),
-                    label: i18n._({
-                        id: "form.distributionCenter.label",
-                        message: "Distribution center"
-                    }),
-                    error: dcCenterError
-                })
-            }),
-            submitError && /* @__PURE__ */ jsx(x.div, {
-                mt: "12px",
-                color: "red1",
-                children: submitError
-            }),
-            /* @__PURE__ */ jsx(ButtonsContainer, {
-                children: /* @__PURE__ */ jsx(Button, {
-                    onClick: handleSubmit,
-                    iconLeft: "login",
-                    isLoading: isSubmitting,
-                    disabled: isSubmitDisabled,
-                    fullWidth: true,
-                    children: /* @__PURE__ */ jsx(Trans, {
-                        id: "form.buttonSignIn",
-                        message: "Sign in"
-                    })
-                })
-            })
-        ]
-    });
+//#region packages/ui/Blocks/LoginPage/components/LoginForm.tsx
+const Container = styled$1.div`
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 10px;
+  & > div > H4 {
+    display: none;
+  }
+  @media (min-width: 1024px) {
+    height: 300px;
+    min-width: 300px;
+    margin-bottom: 50px;
+    & > div > H4 {
+      display: block;
+    }
+  }
+`;
+const ButtonsContainer = styled$1.div`
+  display: flex;
+  margin-top: 15px;
+  width: 100%;
+  @media (min-width: 1024px) {
+    display: inline-block;
+    margin-top: 40px;
+  }
+`;
+const LoginForm = ({ onSubmit, isSubmitting, isSubmitDisabled, distributionCenterOptions, withDistributionCenterSelect, onChangeDistributionCenter, selectedDistributionCenter, withPassword, withLogin, loginLabel, passwordLabel }) => {
+	const [login, setLogin] = useState("");
+	const [password, setPassword] = useState("");
+	const [submitError, setSubmitError] = useState("");
+	const [loginError, setLoginError] = useState("");
+	const [passwordError, setPasswordError] = useState("");
+	const [dcCenterError, setDCCenterError] = useState("");
+	const handleChangeLogin = useCallback((e) => {
+		setLogin(e.target.value);
+	}, []);
+	const handleChangePassword = useCallback((e) => {
+		setPassword(e.target.value);
+	}, []);
+	const handleSubmit = useCallback(() => {
+		setLoginError("");
+		setPasswordError("");
+		setDCCenterError("");
+		setSubmitError("");
+		if (withLogin && !login) {
+			setLoginError(i18n._({
+				id: "requiredField",
+				message: "Required field"
+			}));
+			return;
+		}
+		if (withPassword && !password) {
+			setPasswordError(i18n._({
+				id: "requiredField",
+				message: "Required field"
+			}));
+			return;
+		}
+		if (withDistributionCenterSelect && !selectedDistributionCenter) {
+			setDCCenterError(i18n._({
+				id: "requiredField",
+				message: "Required field"
+			}));
+			return;
+		}
+		onSubmit({
+			login,
+			password
+		}).catch((error) => {
+			error && setSubmitError(String(error));
+		}).finally(() => {
+			setPassword("");
+		});
+	}, [
+		login,
+		password,
+		selectedDistributionCenter,
+		withDistributionCenterSelect,
+		withPassword,
+		onSubmit
+	]);
+	const handleChangeDistributionCenter = useCallback((e) => {
+		onChangeDistributionCenter?.(e.target.value);
+	}, [onChangeDistributionCenter]);
+	return /* @__PURE__ */ jsxs(Container, { children: [
+		withLogin && /* @__PURE__ */ jsx(x.div, {
+			mt: "24px",
+			children: /* @__PURE__ */ jsx(Input, {
+				label: loginLabel || i18n._({
+					id: "form.login.label",
+					message: "Login"
+				}),
+				placeholder: i18n._({
+					id: "form.login.label",
+					message: "Login"
+				}),
+				type: "text",
+				name: "login",
+				autoFocus: true,
+				error: loginError,
+				value: login,
+				onChange: handleChangeLogin,
+				onEnter: handleSubmit
+			})
+		}),
+		withPassword && /* @__PURE__ */ jsx(x.div, {
+			mt: "12px",
+			children: /* @__PURE__ */ jsx(Input, {
+				label: passwordLabel || i18n._({
+					id: "form.password.label",
+					message: "Password"
+				}),
+				placeholder: i18n._({
+					id: "form.password.label",
+					message: "Password"
+				}),
+				name: "password",
+				type: "password",
+				value: password,
+				onChange: handleChangePassword,
+				error: passwordError,
+				onEnter: handleSubmit
+			})
+		}),
+		withDistributionCenterSelect && /* @__PURE__ */ jsx(x.div, {
+			mt: "12px",
+			children: /* @__PURE__ */ jsx(SingleSelect, {
+				onChange: handleChangeDistributionCenter,
+				options: distributionCenterOptions,
+				value: selectedDistributionCenter,
+				placeholder: i18n._({
+					id: "form.distributionCenter.label",
+					message: "Distribution center"
+				}),
+				label: i18n._({
+					id: "form.distributionCenter.label",
+					message: "Distribution center"
+				}),
+				error: dcCenterError
+			})
+		}),
+		submitError && /* @__PURE__ */ jsx(x.div, {
+			mt: "12px",
+			color: "red1",
+			children: submitError
+		}),
+		/* @__PURE__ */ jsx(ButtonsContainer, { children: /* @__PURE__ */ jsx(Button, {
+			onClick: handleSubmit,
+			iconLeft: "login",
+			isLoading: isSubmitting,
+			disabled: isSubmitDisabled,
+			fullWidth: true,
+			children: /* @__PURE__ */ jsx(Trans, {
+				id: "form.buttonSignIn",
+				message: "Sign in"
+			})
+		}) })
+	] });
 };
+//#endregion
 export { LoginForm };