@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.71

package/es/components/organism/LoginV2/hooks/useResize.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+export const useContainerDimensions = (myRef) => {
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const getDimensions = () => ({
+            width: myRef.current ? myRef.current.offsetWidth : 0,
+            height: myRef.current ? myRef.current.offsetHeight : 0,
+        });
+        const handleResize = () => {
+            setDimensions(getDimensions());
+        };
+        if (myRef.current) {
+            setDimensions(getDimensions());
+        }
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [myRef]);
+    return dimensions;
+};

package/es/components/organism/LoginV2/index.d.ts

@@ -0,0 +1,6 @@
+export { LoginV2 } from './LoginV2';
+export type { LoginV2Props } from './types';
+export { OryConsent, OryThemeProvider } from './components/OryConsent';
+export { isOryRecoveryRequest } from './utils/oryFlows';
+export { startOryLogout } from './utils/ory';
+export type { OryConsentPreview, OryConsentRequest, OryConsentGrant, OryScopeCatalog, OryPortal, OryAccount, } from './types/ory';

package/es/components/organism/LoginV2/index.js

@@ -0,0 +1,4 @@
+export { LoginV2 } from './LoginV2';
+export { OryConsent, OryThemeProvider } from './components/OryConsent';
+export { isOryRecoveryRequest } from './utils/oryFlows';
+export { startOryLogout } from './utils/ory';

package/es/components/organism/LoginV2/styled.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+export declare const LoginMain: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const LoginBannerZone: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperLogin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    isMobile?: boolean | undefined;
+}, never>;
+export declare const WrapperImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const WrapperContent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const AvatarImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledForm: import("styled-components").StyledComponent<(<Values = any>(props: import("antd").FormProps<Values> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").FormInstance<Values>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+} & {
+    useForm: typeof import("antd/es/form/Form").useForm;
+    useFormInstance: typeof import("antd/es/form/hooks/useFormInstance").default;
+    useWatch: typeof import("rc-field-form").useWatch;
+    Item: (<Values_1 = any>(props: import("antd").FormItemProps<Values_1>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        useStatus: () => {
+            status?: "" | "warning" | "error" | "success" | "validating" | undefined;
+            errors: import("react").ReactNode[];
+            warnings: import("react").ReactNode[];
+        };
+    };
+    List: import("react").FC<import("antd/es/form").FormListProps>;
+    ErrorList: import("react").FC<import("antd/es/form").ErrorListProps>;
+    Provider: import("react").FC<import("antd/es/form/context").FormProviderProps>;
+    create: () => void;
+}, any, {
+    isMobile: boolean;
+}, never>;
+export declare const StyleInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
+    Group: import("react").FC<import("antd/es/input").GroupProps>;
+    Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;
+    TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef>>;
+}, any, {
+    isMobile: boolean;
+}, never>;
+export declare const StyleButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {
+    isMobile: boolean;
+}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {
+    color?: string | undefined;
+    isBold?: boolean | undefined;
+    isMobile?: boolean | undefined;
+}, never>;

package/es/components/organism/LoginV2/styled.js

@@ -0,0 +1,129 @@
+import { Button, Flex, Form, Input } from 'antd';
+import styled from 'styled-components';
+export const LoginMain = styled(Flex) `
+  background: #eaf1fb;
+
+  height: 100vh;
+  max-height: 100vh;
+
+  width: 100%;
+
+  overflow: hidden;
+`;
+export const LoginBannerZone = styled.div `
+  display: flex;
+  flex: 2;
+  z-index: 1;
+
+  min-width: calc(100vw - 404px);
+  max-width: calc(100vw - 300px);
+`;
+export const WrapperLogin = styled(Flex) `
+  height: 100%;
+  overflow-y: auto;
+  background-color: white;
+  z-index: 5;
+
+  width: ${props => (props.isMobile ? '100%' : '')};
+  min-width: ${props => (props.isMobile ? '100%' : '300px')};
+  max-width: ${props => (props.isMobile ? '100%' : '404px')};
+
+  ${props => (!props.isMobile ? 'box-shadow: 3px 0px 9px 0px #002e5926' : '')}
+`;
+export const WrapperImage = styled.img `
+  width: 180px;
+  height: 40px;
+  object-fit: contain;
+`;
+export const Label = styled.span `
+  color: #005eb8;
+  text-align: center;
+  font-weight: 500;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  @media (max-width: 768px) {
+    color: #000000;
+  }
+`;
+export const Image = styled.img ``;
+export const WrapperContent = styled.span `
+  font-size: 14px;
+  color: #595959;
+
+  &.validate {
+    text-align: center;
+  }
+
+  &.forgot-password {
+  }
+
+  &.verify_account {
+    text-align: center;
+    color: #595959;
+    font-size: 14px;
+  }
+`;
+export const AvatarImage = styled.img `
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+`;
+export const StyledForm = styled(Form) `
+  input {
+    height: ${props => (props.isMobile ? ' 44px' : '36px')};
+    font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    -webkit-background-clip: text;
+    transition: background-color 200s ease-in-out 0s;
+  }
+
+  .antsomi-input-password-icon {
+    font-size: ${(props) => (props.isMobile ? ' 24px' : '14px')};
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .antsomi-input-affix-wrapper {
+    padding: 0 10px !important;
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+
+    &::placeholder {
+      font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+    }
+  }
+
+  .antsomi-form-item-explain-error {
+    font-size: 11px !important;
+  }
+`;
+export const StyleInput = styled(Input) `
+  height: ${props => (props.isMobile ? ' 44px !important' : '36px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
+
+  &::placeholder {
+    font-size: ${(props) => props.isMobile ? ' 16px !important' : '14px !important'};
+  }
+`;
+export const StyleButton = styled(Button) `
+  height: ${props => (props.isMobile ? ' 44px !important' : '40px !important')};
+  font-size: ${props => (props.isMobile ? ' 16px !important' : '14px !important')};
+`;
+export const Text = styled.div `
+  color: ${props => (props.color ? props.color : ' #000000')};
+  font-size: ${props => (props.isMobile ? ' 14px !important' : '12px')};
+  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+`;

package/es/components/organism/LoginV2/types/index.d.ts

@@ -0,0 +1,79 @@
+import type { OryConsentPreview, OryScopeCatalog } from './ory';
+export * from './ory';
+export interface NetworkInfo {
+    networkId: number;
+    networkName: string;
+    homePage: string;
+    logo: string;
+}
+export interface LoginData {
+    token: string;
+    personal: {
+        full_name: string;
+        email: string;
+        avatar: string;
+        user_id: string;
+        role: string;
+        language: string;
+        [key: string]: any;
+    };
+    G2FA_user: number;
+    G2FA: number;
+    status: boolean;
+    errorCode: string;
+    /** The networkId (portalId) of the network the user logged into */
+    networkId?: number | string;
+    [key: string]: any;
+}
+export interface Account {
+    user_id: number;
+    [key: string]: any;
+}
+export interface LoginV2Props {
+    loginDomain: string;
+    apiDomain?: string;
+    networkId?: string | boolean;
+    /** Enable the Ory browser-session bridge for OAuth login requests. */
+    useOry?: boolean | string;
+    /** Keep the package SignIn form visible until the user starts OAuth. */
+    oauthAutoStart?: boolean;
+    oauthLoginUrl?: string;
+    oauthAuthorizeUrl?: string;
+    oauthTokenUrl?: string;
+    oauthClientId?: string;
+    oauthRedirectUri?: string;
+    oauthScope?: string;
+    oauthAudience?: string;
+    oauthStorageKey?: string;
+    kratosLoginUrl?: string;
+    kratosLogoutUrl?: string;
+    /** Kratos recovery flow initializer used by "Forgot password?" in Ory mode. */
+    kratosRecoveryUrl?: string;
+    sessionUrl?: string;
+    /** Same-origin IAM consent endpoint (GET request, POST accept). */
+    oauthConsentUrl?: string;
+    oauthCsrfUrl?: string;
+    /** Titles and descriptions for the requested scopes; merged over the defaults. */
+    oauthScopeCatalog?: OryScopeCatalog;
+    /** Render the consent screens from fixture data instead of the network. */
+    oauthConsentPreview?: OryConsentPreview;
+    onOAuthSuccess?: (data: Record<string, any>) => void | Promise<void>;
+    /** Finish a Kratos browser-session login without starting an OAuth token flow. */
+    onOryAuthenticated?: (session: unknown) => void | Promise<void>;
+    onLoginSuccess?: (data: Partial<LoginData>) => void;
+    onLoginFail?: (data: any) => void;
+    reCaptchaKey?: string;
+    p_id?: string;
+    onResendPassFail?: () => void;
+    u_ogs?: string;
+    width?: number;
+    callbackUrl?: string;
+    theme?: string;
+    usePrivilege?: boolean;
+}
+export type TVerifyRequest = {
+    verificationParams: any;
+    domainLogin: string;
+    onLoading: (value: boolean) => void;
+    handleAuthenticationSuccess: (response: any) => void;
+};

package/es/components/organism/LoginV2/types/index.js

@@ -0,0 +1 @@
+export * from './ory';

package/es/components/organism/LoginV2/types/ory.d.ts

@@ -0,0 +1,52 @@
+export type OryConsentClient = {
+    client_id?: string;
+    client_name?: string;
+    logo_uri?: string;
+    metadata?: Record<string, unknown>;
+};
+export type OryConsentRequest = {
+    client?: OryConsentClient;
+    subject?: string;
+    requested_scope?: string[];
+    requested_access_token_audience?: string[];
+    skip?: boolean;
+};
+/** A portal (tenant) the signed-in user may authorize the application for. */
+export type OryPortal = {
+    id: string;
+    name: string;
+    slug?: string;
+    environment?: string;
+    tags?: string[];
+    logo?: string;
+    isDefault?: boolean;
+};
+export type OryAccount = {
+    name?: string;
+    email?: string;
+    avatar?: string;
+    subject?: string;
+};
+export type OryScopeInfo = {
+    title: string;
+    description: string;
+    /** Always granted; the user cannot switch it off. */
+    required?: boolean;
+    /** Marks scopes that can change application data. */
+    sensitive?: boolean;
+};
+export type OryScopeCatalog = Record<string, OryScopeInfo>;
+/** Body of the consent acceptance sent to the IAM backend. */
+export type OryConsentGrant = {
+    portalId: string;
+    grantScope: string[];
+    grantAccessTokenAudience: string[];
+    remember: boolean;
+};
+/** Fixture data that replaces the network calls, for previews and stories. */
+export type OryConsentPreview = {
+    request: OryConsentRequest;
+    portals: OryPortal[];
+    account: OryAccount;
+    onAuthorize?: (grant: OryConsentGrant) => void;
+};

package/es/components/organism/LoginV2/types/ory.js

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

package/es/components/organism/LoginV2/utils/index.d.ts

@@ -0,0 +1,14 @@
+export declare const checkURL: (url: any) => boolean;
+/**
+ * Executes the provided function and returns its result. If an error occurs,
+ * the default value is returned instead.
+ *
+ * @param {Function} fn - The function to execute.
+ * @param {any} [defaultValue=''] - The default value to return if an error occurs.
+ * @return {any} The result of the function or the default value.
+ */
+export declare const getObjectPropSafely: (fn?: () => void, defaultValue?: string) => string | void;
+export declare const addAtmSourceLogin: (url: any) => any;
+export declare const navigateTo: (url?: string) => any;
+export declare const isUrl: (url: any) => boolean;
+export declare const generateGuid: () => string;

package/es/components/organism/LoginV2/utils/index.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-return-assign */
+export const checkURL = url => {
+    let result = true;
+    try {
+        // eslint-disable-next-line no-new
+        new URL(url);
+    }
+    catch (e) {
+        result = false;
+    }
+    return result;
+};
+/**
+ * Executes the provided function and returns its result. If an error occurs,
+ * the default value is returned instead.
+ *
+ * @param {Function} fn - The function to execute.
+ * @param {any} [defaultValue=''] - The default value to return if an error occurs.
+ * @return {any} The result of the function or the default value.
+ */
+export const getObjectPropSafely = (fn = () => { }, defaultValue = '') => {
+    try {
+        return fn();
+    }
+    catch (e) {
+        return defaultValue;
+    }
+};
+export const addAtmSourceLogin = url => url ? `${url}${url.includes('?') ? '&' : '?'}atm_source=login` : url;
+export const navigateTo = (url) => (window.location.href = addAtmSourceLogin(url));
+export const isUrl = url => {
+    try {
+        if (!url || !url.trim()) {
+            return false;
+        }
+        return /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/.test(url);
+    }
+    catch (e) {
+        return false;
+    }
+};
+export const generateGuid = () => {
+    function s4() {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    }
+    return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};

package/es/components/organism/LoginV2/utils/ory.d.ts

@@ -0,0 +1,138 @@
+export declare const DEFAULT_OAUTH_LOGIN_URL = "/oauth2/login";
+export declare const DEFAULT_OAUTH_TOKEN_URL = "/oauth2/token";
+export declare const DEFAULT_KRATOS_LOGIN_URL = "/self-service/login/browser";
+export declare const DEFAULT_KRATOS_LOGOUT_URL = "/self-service/logout/browser";
+export declare const DEFAULT_SESSION_URL = "/api/session";
+export declare const DEFAULT_OAUTH_STORAGE_KEY = "antsomi.ory.oauth";
+export type LocationLike = Pick<Location, 'origin' | 'search'>;
+export type OryError = Error & {
+    code: string;
+    status?: number;
+    userMessage?: string;
+};
+type SessionResponse = {
+    ok: boolean;
+    status: number;
+    json: () => Promise<unknown>;
+};
+export type FetchLike = (input: RequestInfo | URL, init?: RequestInit) => Promise<SessionResponse>;
+export type OAuthTokenResponse = {
+    access_token: string;
+    token_type?: string;
+    expires_in?: number;
+    refresh_token?: string;
+    scope?: string;
+    id_token?: string;
+    [key: string]: unknown;
+};
+export declare const makeUserError: (code: string, message: string, userMessage: string, status?: number) => OryError;
+export declare const getOrigin: (location?: LocationLike) => string;
+export declare const toURL: (value: string, origin: string) => URL;
+export declare const isOryLoginRequest: ({ location }: {
+    location: LocationLike;
+}) => boolean;
+export declare const isOryCallbackRequest: ({ location }: {
+    location: LocationLike;
+}) => boolean;
+/**
+ * Build the only redirect accepted by the Ory login bridge. A return_to URL
+ * is trusted only when it has the configured bridge origin and path.
+ */
+export declare const getOAuthBridgeURL: ({ location, oauthLoginUrl, }: {
+    location: LocationLike;
+    oauthLoginUrl?: string;
+}) => string;
+export declare const getKratosLoginURL: ({ kratosLoginUrl, returnTo, location, }: {
+    kratosLoginUrl?: string;
+    returnTo: string;
+    location: LocationLike;
+}) => string;
+export declare const resolveOryLogin: ({ location, oauthLoginUrl, kratosLoginUrl, sessionUrl, fetchImpl, assign, }: {
+    location: LocationLike;
+    oauthLoginUrl?: string;
+    kratosLoginUrl?: string;
+    sessionUrl?: string;
+    fetchImpl?: FetchLike;
+    assign?: (url: string) => void;
+}) => Promise<{
+    status: 'redirect';
+    destination: string;
+}>;
+export declare const readJSON: (response: SessionResponse) => Promise<any>;
+export declare const checkOrySession: ({ sessionUrl, fetchImpl, }: {
+    sessionUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<unknown>;
+/** Continue with Kratos's existing MFA UI; retain the validated Hydra bridge. */
+export declare const redirectOryMFA: ({ location, kratosLoginUrl, oauthLoginUrl, assign }: {
+    location: LocationLike;
+    kratosLoginUrl?: string;
+    oauthLoginUrl?: string;
+    assign: (url: string) => void;
+}) => void;
+/**
+ * Submit the existing package SignIn form to a same-origin Kratos browser
+ * flow, then return the verified browser session to Hydra's login bridge.
+ * Passwords are sent only in the form request and are never persisted.
+ */
+export declare const submitOryPasswordLogin: ({ location, email, password, kratosLoginUrl, sessionUrl, oauthLoginUrl, returnToBridge, inlineMfa, fetchImpl, assign, }: {
+    location: LocationLike;
+    email: string;
+    password: string;
+    kratosLoginUrl?: string;
+    sessionUrl?: string;
+    oauthLoginUrl?: string;
+    returnToBridge?: boolean;
+    /** Report `mfa-required` instead of leaving the page for Kratos' own MFA screen. */
+    inlineMfa?: boolean;
+    fetchImpl?: FetchLike;
+    assign?: (url: string) => void;
+}) => Promise<{
+    status: 'redirect';
+    destination: string;
+} | {
+    status: 'authenticated';
+    session: unknown;
+} | {
+    status: 'mfa-required';
+}>;
+export declare const startOryAuthorization: ({ location, authorizeUrl, clientId, redirectUri, scope, audience, storage, storageKey, cryptoImpl, assign, }: {
+    location: LocationLike;
+    authorizeUrl: string;
+    clientId?: string;
+    redirectUri?: string;
+    scope?: string;
+    audience?: string;
+    storage?: Storage;
+    storageKey?: string;
+    cryptoImpl?: Crypto;
+    assign?: (url: string) => void;
+}) => Promise<{
+    status: 'redirect';
+    destination: string;
+}>;
+export declare const completeOryAuthorization: ({ location, tokenUrl, clientId, redirectUri, storage, storageKey, fetchImpl, }: {
+    location: LocationLike;
+    tokenUrl?: string;
+    clientId?: string;
+    redirectUri?: string;
+    storage?: Storage;
+    storageKey?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<OAuthTokenResponse>;
+/**
+ * End the Kratos browser session ("sign in with a different account"). Kratos
+ * hands back a one-time logout URL for the same-origin session cookie; the
+ * return URL must stay on this origin.
+ */
+export declare const startOryLogout: ({ location, returnTo, kratosLogoutUrl, fetchImpl, assign, }: {
+    location: LocationLike;
+    returnTo: string;
+    kratosLogoutUrl?: string;
+    fetchImpl?: FetchLike;
+    assign?: (url: string) => void;
+}) => Promise<{
+    status: 'redirect';
+    destination: string;
+}>;
+export {};