@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/RegisterConfirmModal/RegisterConfirmModal.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { RED_BASE_HEX } from "../../constants/style.js";
+import { Modal } from "../Modal/Modal.js";
+import { Text } from "../Text/Text.styles.js";
+import { TextLink } from "../TextLink/TextLink.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ContainerWithLine } from "./RegisterConfirmModal.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { FormError } from "../Form/Form.styles.js";
+import { ModalInner } from "../Modal/Modal.styles.js";
+const RedBar = styled.div`
+  background: ${RED_BASE_HEX};
+  bottom: 0;
+  height: 30%;
+  position: absolute;
+  right: 0;
+  width: 50%;
+`;
+const RegisterConfirmModal = ({
+  id,
+  userInfo,
+  isModalOpen,
+  onModalClose,
+  onResend,
+  popupError,
+  popupSuccess,
+  isActionLoading,
+  cooldown
+}) => {
+  const userEmail = userInfo && userInfo.email;
+  return /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: onModalClose, closeIsFullHeight: true, id, children: [
+    /* @__PURE__ */ jsx(Row, { isConfirmModal: true, children: /* @__PURE__ */ jsx(Column, { part: 10, isConfirmModal: true, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsxs(ContainerWithLine, { children: [
+      /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("h3", { children: "GREAT! CHECK YOUR INBOX" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          "We sent an email to ",
+          userEmail,
+          " — tap the link to verify your address and activate your account."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Text.Caption, { children: [
+        "Email didn't arrive?",
+        /* @__PURE__ */ jsx("br", {})
+      ] }),
+      /* @__PURE__ */ jsx(TextLink, { to: "", onClick: onResend, disabled: cooldown?.isDisabled, children: isActionLoading === "resend" ? "Resending email" : "Resend email" }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resend", children: popupError.message }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupSuccess.popup === "resend", children: popupSuccess.message }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: cooldown?.isDisabled && /* @__PURE__ */ jsx(FormError, { show: cooldown?.isDisabled, children: `You can resend email in ${cooldown?.secondsRemaining} seconds` }) })
+    ] }) }) }) }),
+    /* @__PURE__ */ jsx(RedBar, {})
+  ] });
+};
+RegisterConfirmModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+var stdin_default = RegisterConfirmModal;
+export {
+  ContainerWithLine,
+  RegisterConfirmModal,
+  stdin_default as default
+};

package/dist/components/RegisterConfirmModal/RegisterConfirmModal.styles.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { Text } from "../Text/Text.styles.js";
+import { colors } from "../../styles/colors.js";
+const ContainerWithLine = styled(Text)`
+  position: relative;
+  padding-left: 48px;
+
+  &::before {
+    content: '';
+    width: 6px;
+    height: 72px;
+    background: ${colors.blue};
+    position: absolute;
+    left: 0;
+    top: 6px;
+  }
+`;
+export {
+  ContainerWithLine
+};

package/dist/components/RegisterModal/RegisterModal.js

@@ -0,0 +1,248 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import parse from "html-react-parser";
+import { styled } from "styled-components";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "../Modal/Modal.js";
+import stdin_default$1 from "../Form/Form.js";
+import { Text } from "../Text/Text.styles.js";
+import { Input } from "../Input/Input.js";
+import stdin_default$2 from "../Input/InputPassword.js";
+import stdin_default$3 from "../Checkbox/Checkbox.js";
+import { Button } from "../Button/Button.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import fetchDataPublic from "../../api/fetchDataPublic.js";
+import { emailRegex } from "../../constants/globalVariables.js";
+import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+const TermsStyled = styled.span`
+  cursor: pointer;
+  font-size: 12px;
+  /* margin-left: 4px; */
+  text-decoration: underline;
+
+  &:hover {
+    opacity: 0.7;
+  }
+`;
+const RegisterModal = (props) => {
+  const [email, setemail] = useState(null);
+  const location = useLocation();
+  const [popupErrorWithValue, setpopupErrorWithValue] = useState({});
+  const [privacyTermsCheckbox, setprivacyTermsCheckbox] = useState({
+    agreementText: "By creating this account, I agree with STOKR's Privacy Terms.",
+    label: "privacyTerms",
+    text: "",
+    title: "privacy"
+  });
+  const [newsletterCheckbox, setNewsletterCheckbox] = useState({
+    agreementText: "Yes! Send me STOKR news and updates",
+    label: "newsletter",
+    text: "",
+    title: "newsletter"
+  });
+  const fetchCheckbox = async () => {
+    try {
+      const response = await fetchDataPublic("compliance/get-checkboxes", {
+        labels: ["privacyTerms", "newsletter"]
+      });
+      if (response?.privacyTerms) {
+        setprivacyTermsCheckbox(response.privacyTerms);
+      }
+      if (response?.newsletter) {
+        setNewsletterCheckbox(response.newsletter);
+      }
+    } catch (error) {
+      console.log("🚀 ~ file: RegisterModal.js:75 ~ error:", error);
+    }
+  };
+  React__default.useEffect(() => {
+    const { search } = location;
+    const query = new URLSearchParams(search);
+    let _email = query.get("email");
+    if (_email) {
+      setemail(_email);
+    }
+    fetchCheckbox();
+  }, []);
+  useEffect(() => {
+    const { popupError: popupError2 } = props;
+    if (popupError2.popup === "register") {
+      setpopupErrorWithValue({
+        ...popupError2
+      });
+    }
+  }, [props.popupError]);
+  const validationSchema = Yup.object().shape({
+    email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can‘t be blank"),
+    password: Yup.string().required("Oops, this can‘t be blank"),
+    terms: Yup.bool().oneOf([true], "Please agree to continue"),
+    newsletter: Yup.bool()
+    // .oneOf([true], 'Newsletter accept is required'),
+  });
+  const { isModalOpen, onModalClose, onFormSend, onModalSwitch, onTermsClicked, popupError, isActionLoading } = props;
+  return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("h3", { children: "CREATE YOUR STOKR ACCOUNT" }),
+        /* @__PURE__ */ jsx("p", { children: "Get ready to invest in innovative business ventures. No fees. Always free." })
+      ] }) }),
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
+        "Already have an account?",
+        " ",
+        /* @__PURE__ */ jsx(ModalLink, { to: "#", as: "button", type: "button", onClick: onModalSwitch, children: "Log in" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
+      Formik,
+      {
+        initialValues: {
+          email: "",
+          password: "",
+          newsletter: false,
+          terms: false
+        },
+        validationSchema,
+        onSubmit: (values) => {
+          onFormSend(values);
+        },
+        children: ({ values, errors, touched, handleChange, handleBlur, setFieldValue, setFieldTouched }) => {
+          if (popupError.popup === "register" && !popupErrorWithValue.value) {
+            let value = popupError.field === "email" ? values.email : values.password;
+            setpopupErrorWithValue({ ...popupErrorWithValue, value });
+          }
+          if (email && values.email !== email) {
+            setFieldValue("email", email);
+          }
+          const handleChangeCustom = (e, withTouch = false) => {
+            const { clearPopupError, setPopupError } = props;
+            const field = e.target;
+            if (field.value === popupErrorWithValue.value || field.value.length > 128) {
+              setPopupError("register", popupErrorWithValue.message, field.name);
+            } else {
+              clearPopupError();
+            }
+            if (withTouch) {
+              setFieldValue(field.name, field.value, false);
+              setFieldTouched(field.name);
+            } else {
+              handleChange(e);
+            }
+          };
+          const submitDisabled = !values.email || !!errors.email || !!errors.terms || values.password.length <= 5 || isActionLoading === "signUp" || popupError.popup === "register";
+          return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "sign-up-email",
+                  name: "email",
+                  type: "email",
+                  label: "Your email",
+                  value: values.email,
+                  onChange: handleChangeCustom,
+                  onBlur: handleBlur,
+                  error: !!errors.email,
+                  touched: !!touched.email,
+                  readOnly: email ? true : false,
+                  autoComplete: "email"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                stdin_default$2,
+                {
+                  id: "sign-up-password",
+                  name: "password",
+                  type: "password",
+                  label: "Password",
+                  value: values.password,
+                  onChange: (e) => handleChangeCustom(e, true),
+                  onBlur: handleBlur,
+                  error: !!errors.password,
+                  touched: !!touched.password,
+                  info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
+                  autoComplete: "new-password"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
+              /* @__PURE__ */ jsx(FormError, { show: !errors.password && touched.password && values.password.length <= 5, children: "The password must be at least 6 characters long" })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true }),
+            /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: [
+              /* @__PURE__ */ jsxs(FormField, { children: [
+                /* @__PURE__ */ jsx(
+                  stdin_default$3,
+                  {
+                    id: newsletterCheckbox.title,
+                    name: "newsletter",
+                    text: parse(newsletterCheckbox.agreementText),
+                    value: "yes",
+                    checked: !!values.newsletter,
+                    onChange: handleChange,
+                    onBlur: handleBlur,
+                    error: !!errors.newsletter,
+                    touched: !!touched.newsletter
+                  }
+                ),
+                /* @__PURE__ */ jsx(FormError, { show: errors.newsletter && touched.newsletter, children: errors.newsletter })
+              ] }),
+              /* @__PURE__ */ jsxs(FormField, { children: [
+                privacyTermsCheckbox && /* @__PURE__ */ jsx(
+                  stdin_default$3,
+                  {
+                    id: privacyTermsCheckbox.title,
+                    name: "terms",
+                    text: parse(privacyTermsCheckbox.agreementText, {
+                      replace: (domNode) => {
+                        if (domNode.type === "tag" && domNode.name === "u") {
+                          return /* @__PURE__ */ jsx(
+                            TermsStyled,
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                onTermsClicked(privacyTermsCheckbox);
+                              },
+                              children: domNode.children[0]?.data
+                            }
+                          );
+                        }
+                      }
+                    }),
+                    value: "yes",
+                    checked: !!values.terms,
+                    onChange: handleChange,
+                    onBlur: handleBlur,
+                    error: errors.terms && touched.terms,
+                    touched: !!touched.terms,
+                    marginTop: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(FormError, { show: errors.terms && touched.terms, withMarginLeft: true, children: errors.terms })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", fluid: true, disabled: submitDisabled, id: "signup-button", children: isActionLoading === "signUp" ? "Creating account" : "Create account" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "register", children: popupError.message }) })
+          ] });
+        }
+      }
+    ) }) })
+  ] }) });
+};
+RegisterModal.propTypes = {
+  // isModalOpen: PropTypes.bool.isRequired,
+  // onModalClose: PropTypes.func.isRequired,
+  // onFormSend: PropTypes.func.isRequired,
+  // onModalSwitch: PropTypes.func.isRequired,
+};
+var stdin_default = RegisterModal;
+export {
+  RegisterModal,
+  stdin_default as default
+};

package/dist/components/RequestDataBox/RequestDataBox.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Button } from "../Button/Button.styles.js";
+import { Box, Title, Subtitle } from "./RequestDataBox.styles.js";
+const RequestDataBox = ({ title, subtitle, onClick = () => {
+} }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Title, { children: title }),
+    /* @__PURE__ */ jsx(Subtitle, { children: subtitle })
+  ] }),
+  /* @__PURE__ */ jsx(Button, { minWidth: "240px", onClick, children: title })
+] });
+RequestDataBox.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};
+export {
+  RequestDataBox
+};

package/dist/components/RequestDataBox/RequestDataBox.styles.js

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Box = styled.div`
+  border: 1px solid ${() => theme.cLightGrey};
+  padding: 20px 24px;
+
+  & > div {
+    margin-bottom: 12px;
+
+    ${rwd.Medium`
+      margin-bottom: 0;
+    `}
+  }
+
+  ${rwd.Medium`
+    padding: 36px 48px;
+    display: flex;
+    justify-content: space-between;
+  `}
+
+  & + & {
+    border-top: none;
+  }
+`;
+const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  margin-bottom: 2px;
+  letter-spacing: 0.6px;
+`;
+const Subtitle = styled.div`
+  font-size: 9px;
+  font-style: italic;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+`;
+export {
+  Box,
+  Subtitle,
+  Title
+};

package/dist/components/ResetConfirmModal/ResetConfirmModal.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { RED_BASE_HEX } from "../../constants/style.js";
+import { Modal } from "../Modal/Modal.js";
+import { Button } from "../Button/Button.styles.js";
+import { Text } from "../Text/Text.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ContainerWithLine } from "./ResetConfirmModal.styles.js";
+import { ModalInner } from "../Modal/Modal.styles.js";
+const RedBar = styled.div`
+  background: ${RED_BASE_HEX};
+  bottom: 0;
+  height: 30%;
+  position: absolute;
+  right: 0;
+  width: 50%;
+`;
+const ResetConfirmModal = ({ isModalOpen, onModalClose, onModalSwitch }) => /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: onModalClose, closeIsFullHeight: true, children: [
+  /* @__PURE__ */ jsx(Row, { isConfirmModal: true, children: /* @__PURE__ */ jsx(Column, { relative: true, part: 10, isConfirmModal: true, children: /* @__PURE__ */ jsx(ModalInner, { isConfirmModal: true, children: /* @__PURE__ */ jsxs(ContainerWithLine, { children: [
+    /* @__PURE__ */ jsxs(Text, { withBorder: true, isConfirm: true, children: [
+      /* @__PURE__ */ jsxs("h3", { children: [
+        "Abracadabra!",
+        /* @__PURE__ */ jsx("br", {}),
+        "You're back in the game!"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "Your new password has been set." })
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Button, { onClick: onModalSwitch, children: "Login" })
+  ] }) }) }) }),
+  /* @__PURE__ */ jsx(RedBar, {})
+] });
+ResetConfirmModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+var stdin_default = ResetConfirmModal;
+export {
+  ResetConfirmModal,
+  stdin_default as default
+};

package/dist/components/ResetConfirmModal/ResetConfirmModal.styles.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { Text } from "../Text/Text.styles.js";
+import { colors } from "../../styles/colors.js";
+const ContainerWithLine = styled(Text)`
+  position: relative;
+  padding-left: 48px;
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 72px;
+    background: ${colors.blue};
+    position: absolute;
+    left: 0;
+    top: 6px;
+    @media screen and (max-width: 767px) {
+      top: 33px;
+    }
+  }
+
+  // &::after {
+  //   content: '';
+  //   width: 1px;
+  //   height: 800px;
+  //   background: #ededed;
+  //   position: absolute;
+  //   left: 0;
+  //   top: -200px;
+
+  //   @media screen and (max-width: 767px) {
+  //     height: 200vh;
+  //   }
+  // }
+
+  @media screen and (max-width: 767px) {
+    top: -20vh;
+  }
+`;
+export {
+  ContainerWithLine
+};

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "../Modal/Modal.js";
+import stdin_default$1 from "../Form/Form.js";
+import { Text } from "../Text/Text.styles.js";
+import stdin_default$2 from "../Input/InputPassword.js";
+import { Button } from "../Button/Button.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+const ResetPasswordModal = ({
+  isModalOpen,
+  onModalClose,
+  onFormSend,
+  onModalSwitch,
+  popupError,
+  isActionLoading,
+  onLoad
+}) => {
+  const initialValues = {
+    password: "",
+    confirmPassword: ""
+  };
+  const validationSchema = Yup.object().shape({
+    password: Yup.string().required("Oops, this can‘t be blank"),
+    confirmPassword: Yup.string().required("Oops, this can‘t be blank")
+  });
+  useEffect(() => {
+    onLoad?.();
+  }, []);
+  return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("h3", { children: "RESET YOUR PASSWORD" }),
+        /* @__PURE__ */ jsx("p", { children: "Please set your new password." })
+      ] }) }),
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
+        "Remember your password? ",
+        /* @__PURE__ */ jsx(ModalLink, { to: "#", onClick: onModalSwitch, children: "Log in" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
+      Formik,
+      {
+        initialValues,
+        validationSchema,
+        onSubmit: (values) => {
+          onFormSend(values);
+        },
+        children: ({ values, errors, touched, handleBlur, setFieldValue, setFieldTouched }) => {
+          const onChangeWithTouch = (e) => {
+            const field = e.target;
+            setFieldValue(field.name, field.value, false);
+            setFieldTouched(field.name);
+          };
+          const submitDisabled = values.password.length <= 5 || values.password !== values.confirmPassword || isActionLoading === "resetPassword";
+          return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                stdin_default$2,
+                {
+                  id: "reset-password",
+                  name: "password",
+                  type: "password",
+                  label: "Password",
+                  value: values.password,
+                  onChange: onChangeWithTouch,
+                  onBlur: handleBlur,
+                  error: !!errors.password,
+                  touched: !!touched.password,
+                  info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
+                  autoComplete: "new-password"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
+              /* @__PURE__ */ jsx(
+                FormError,
+                {
+                  show: !errors.password && touched.password && values.password.length <= 5,
+                  children: "The password must be at least 6 characters long"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                stdin_default$2,
+                {
+                  id: "confirm-reset-password",
+                  name: "confirmPassword",
+                  type: "password",
+                  label: "Confirm password",
+                  value: values.confirmPassword,
+                  onChange: onChangeWithTouch,
+                  onBlur: handleBlur,
+                  error: !!errors.confirmPassword,
+                  touched: !!touched.confirmPassword,
+                  autoComplete: "new-password"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.confirmPassword && touched.confirmPassword, children: errors.confirmPassword })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "reset-password-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "resetPassword" ? "Resetting" : "Reset" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              FormError,
+              {
+                show: touched.password && touched.confirmPassword && values.password !== values.confirmPassword,
+                children: "The passwords must match"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resetPassword", children: popupError.message }) })
+          ] });
+        }
+      }
+    ) }) })
+  ] }) });
+};
+ResetPasswordModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func.isRequired
+};
+var stdin_default = ResetPasswordModal;
+export {
+  ResetPasswordModal,
+  stdin_default as default
+};