@stokr/components-library 3.0.42 → 3.0.44

package/dist/components/IdentityInfo/IdentityInfo.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { FlagFor } from "../Country/CountrySelect.js";
+import { CountryRowRoot, FlagSlot, CountryCode, ResidencyItemRoot, FieldLabel, FieldValue, SectionHeaderRoot, SectionHeaderIconWrap } from "./IdentityInfo.styles.js";
+const IdentitySectionHeader = ({ icon, count, children, style, className }) => /* @__PURE__ */ jsxs(SectionHeaderRoot, { style, className, children: [
+  icon && /* @__PURE__ */ jsx(SectionHeaderIconWrap, { children: icon }),
+  /* @__PURE__ */ jsxs("span", { children: [
+    children,
+    count !== void 0 && count !== null && ` (${count})`
+  ] })
+] });
+IdentitySectionHeader.propTypes = {
+  icon: PropTypes.node,
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+const IdentityCountryRow = ({ code, name, showCode = false, style, className }) => /* @__PURE__ */ jsxs(CountryRowRoot, { style, className, children: [
+  /* @__PURE__ */ jsx(FlagSlot, { children: /* @__PURE__ */ jsx(FlagFor, { code }) }),
+  /* @__PURE__ */ jsx("span", { children: name }),
+  showCode && /* @__PURE__ */ jsx(CountryCode, { children: code })
+] });
+IdentityCountryRow.propTypes = {
+  code: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  showCode: PropTypes.bool,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+const IdentityResidencyItem = ({
+  country,
+  tin,
+  reason,
+  residencyLabel = "Residency",
+  tinLabel = "TIN",
+  reasonLabel = "Reason details",
+  style,
+  className
+}) => /* @__PURE__ */ jsxs(ResidencyItemRoot, { style, className, children: [
+  /* @__PURE__ */ jsx(FieldLabel, { children: residencyLabel }),
+  /* @__PURE__ */ jsx(IdentityCountryRow, { code: country.code, name: country.name }),
+  /* @__PURE__ */ jsx(FieldLabel, { style: { marginTop: 8 }, children: tinLabel }),
+  /* @__PURE__ */ jsx(FieldValue, { children: tin }),
+  reason && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FieldLabel, { style: { marginTop: 8 }, children: reasonLabel }),
+    /* @__PURE__ */ jsx(FieldValue, { children: reason })
+  ] })
+] });
+IdentityResidencyItem.propTypes = {
+  country: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  tin: PropTypes.node.isRequired,
+  reason: PropTypes.node,
+  residencyLabel: PropTypes.node,
+  tinLabel: PropTypes.node,
+  reasonLabel: PropTypes.node,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+export {
+  IdentityCountryRow,
+  FieldLabel as IdentityFieldLabel,
+  FieldValue as IdentityFieldValue,
+  IdentityResidencyItem,
+  IdentitySectionHeader
+};

package/dist/components/IdentityInfo/IdentityInfo.styles.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const SectionHeaderRoot = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${colors.blue};
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  margin-bottom: 12px;
+`;
+const SectionHeaderIconWrap = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const FieldLabel = styled.p`
+  margin: 0;
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: ${colors.black};
+  font-weight: 400;
+`;
+const FieldValue = styled.p`
+  margin: 0 0 4px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: ${colors.black};
+  letter-spacing: 0.5px;
+`;
+const CountryRowRoot = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: ${colors.black};
+  letter-spacing: 0.5px;
+`;
+const FlagSlot = styled.span`
+  display: inline-flex;
+  align-items: center;
+  width: 22px;
+  height: auto;
+  flex-shrink: 0;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const CountryCode = styled.span`
+  font-family: monospace;
+  font-size: 12px;
+  color: ${colors.grey2};
+  margin-left: auto;
+`;
+const ResidencyItemRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+export {
+  CountryCode,
+  CountryRowRoot,
+  FieldLabel,
+  FieldValue,
+  FlagSlot,
+  ResidencyItemRoot,
+  SectionHeaderIconWrap,
+  SectionHeaderRoot
+};

package/dist/context/Auth.js

@@ -134,6 +134,15 @@ class Auth {
       });
     });
   }
+  static reportFailedLoginAttempt(email) {
+    return new Promise((resolve, reject) => {
+      axiosInstance.post(`auth/failed-login-attempt`, { email }).then((response) => {
+        resolve(response.data);
+      }).catch((err) => {
+        reject(err);
+      });
+    });
+  }
   static resendActivationEmail(email) {
     return new Promise((resolve, reject) => {
       axiosInstance.post(`auth/resend-activation-email`, {

package/dist/context/AuthContext.js

@@ -124,11 +124,13 @@ class AuthProviderClass extends Component {
     if (!expiresAt) return;
     const delay = expiresAt - Date.now();
     if (delay <= 0) {
+      Auth.logout();
       this.setState({ sessionExpiryPendingReason: "cookie" });
       return;
     }
     this.cookieExpiryTimerRef = setTimeout(() => {
       this.cookieExpiryTimerRef = null;
+      Auth.logout();
       this.setState({ sessionExpiryPendingReason: "cookie" });
     }, delay);
   };
@@ -176,6 +178,7 @@ class AuthProviderClass extends Component {
       const delay = this.getInactivityTimeMs();
       this.inactivityTimerRef = setTimeout(() => {
         this.inactivityTimerRef = null;
+        Auth.logout();
         this.setState({ sessionExpiryPendingReason: "inactivity" });
       }, delay);
     }
@@ -222,8 +225,18 @@ class AuthProviderClass extends Component {
           break;
         case "auth/invalid-login-credentials":
         case "auth/invalid-credential":
+          if (email) {
+            Auth.reportFailedLoginAttempt(email).catch(() => {
+            });
+          }
           error.message = "The credentials are not correct. Try again?";
           throw error;
+        case "auth/user-disabled":
+          error.message = "Your account has been locked due to too many failed login attempts. Please contact support at support.stokr.io to reactivate.";
+          throw error;
+        case "auth/too-many-requests":
+          error.message = "Too many sign-in attempts. Please wait a few minutes before trying again.";
+          throw error;
         case "auth/invalid-custom-token":
         case "auth/argument-error":
           error.message = "This sign-in link is invalid, expired, or was already used. Please sign in again or request a new link.";

package/dist/index.js

@@ -119,6 +119,7 @@ import { StepIndicator } from "./components/StepsProgress/StepIndicator.js";
 import { Layout } from "./components/Layout/Layout.js";
 import { AnimatedSpan, LoadingDots, StokrLoader, StokrLoaderBox, loaderGif } from "./components/StokrLoader/StokrLoader.js";
 import { InfoBox } from "./components/InfoBox/InfoBox.js";
+import { IdentityCountryRow, IdentityResidencyItem, IdentitySectionHeader } from "./components/IdentityInfo/IdentityInfo.js";
 import { Inner, Outer, ThumbH, ThumbV, TrackH, TrackV } from "./components/ComponentScroll/ComponentScroll.styles.js";
 import { LoginModal } from "./components/LoginModal/LoginModal.js";
 import { CheckboxContext, CheckboxProvider, useCheckboxActions, useCheckboxes } from "./context/Checkbox/CheckboxContext.js";
@@ -185,6 +186,7 @@ import { FormContainer, FormError, FormField, FormInfo } from "./components/Form
 import { default as default24 } from "./components/SvgIcons/FourSvg.js";
 import { default as default25 } from "./components/SvgIcons/Glassess.js";
 import { HeaderHo } from "./components/headerHo/HeaderHo.js";
+import { FieldLabel, FieldValue } from "./components/IdentityInfo/IdentityInfo.styles.js";
 import { Info } from "./components/icons/Info.js";
 import { Container as Container2, Icon as Icon3 } from "./components/InfoIcon/InfoIcon.styles.js";
 import { Label, InputWrap, Wrapper as Wrapper2 } from "./components/Input/Input.styles.js";
@@ -367,6 +369,11 @@ export {
   HeroVideoBlock,
   Icon,
   Icon2,
+  IdentityCountryRow,
+  FieldLabel as IdentityFieldLabel,
+  FieldValue as IdentityFieldValue,
+  IdentityResidencyItem,
+  IdentitySectionHeader,
   ImageSlide,
   ImageSlideWrapper,
   Info,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.42",
+  "version": "3.0.44",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",