@frontegg/types 4.43.0 → 5.1.0

package/ThemeOptions/LoginBoxTheme/LoginBoxCommon.d.ts

@@ -0,0 +1,171 @@
+import { ExtendedCSSProperties } from '../../Common';
+import { BaseTheme, BaseThemeOptions } from '../index';
+import { ButtonThemeOptions, CustomComponent, InputThemeOptions } from '../ComponentsOptions';
+/**
+ *   @RootElement
+ *   - @WrapperElement
+ *   | - Header
+ *   | - Box
+ *   |  | - Header
+ *   |  | - Content
+ *   |  | - SocialLogin
+ *   |  |  | - Divider
+ *   |  |  | - Google
+ *   |  |  | - Microsoft
+ *   |  |  | - Footer
+ *   |  | - Footer
+ *   | - Footer
+ */
+interface LogoComponent {
+    /**
+     * Company logo Url or native html element as string
+     */
+    image?: string | any | CustomComponent;
+    /**
+     * Company logo placement in Login Pages
+     * box = inside the login box element
+     * page = displayed at the top of the page
+     */
+    placement?: 'box' | 'page';
+    alignment?: 'left' | 'right' | 'center';
+    /**
+     *  Direct css styling for Company Logo container component
+     */
+    style?: ExtendedCSSProperties;
+}
+interface LayoutOptions {
+    /**
+     * Layout type for login box page, Default is Center login box elements
+     * By choosing Side type you can provide HTML element for the other
+     * side, floating right will display login box at the right element
+     * with default width equal to 50% of the window width
+     */
+    type: 'float-right' | 'center' | 'float-left';
+    /**
+     * Will be displayed if type is 'float-right' or 'float-left',
+     * Accepts:
+     *  - html element as string
+     *  - function that return html element as string
+     *  - ReactElement will be rendered inside LoginBox VirtualTree
+     */
+    sideElement?: CustomComponent;
+    sideElementStyle?: ExtendedCSSProperties;
+}
+interface LoginBoxOptionalCommon {
+    /**
+     * Options to specify the login box page structure
+     * Ex. split screen and display login in the left/right side
+     */
+    layout?: LayoutOptions;
+    /**
+     * Header component placed in before section content.
+     * Mostly used for Company Logo or Page title
+     * Accepts:
+     *  - string as url for rendering image element with src='url'
+     *  - string as base64 for rendering image as base64 content
+     *  - ReactElement will be rendered inside LoginBox VirtualTree
+     */
+    pageHeader?: CustomComponent;
+    /**
+     * Footer component placed in before section content
+     * Mostly used for Disclaimers or Back buttons
+     * Accepts:
+     *  - string as url for rendering image element with src='url'
+     *  - string as base64 for rendering image as base64 content
+     *  - ReactElement will be rendered inside LoginBox VirtualTree
+     */
+    pageFooter?: CustomComponent;
+    /**
+     * Company logo Url or native html element as string
+     */
+    logo?: LogoComponent;
+    /**
+     * Powered by frontegg placement
+     * box = inside the login box element
+     * page = displayed at the bottom of the page
+     */
+    poweredByPlacement?: 'box' | 'page';
+    /**
+     * BoxElement
+     * It is a Card component placed inside the [WrapperElement]{@link pageStyle}
+     * The purpose of this element is to contain page field
+     * By default it's have flex display and justify content center
+     */
+    boxStyle?: ExtendedCSSProperties;
+    /**
+     * Header component placed in inside the login box and before login inputs.
+     * Accepts:
+     *  - string as url for rendering image element with src='url'
+     *  - string as base64 for rendering image as base64 content
+     *  - ReactElement will be rendered inside LoginBox VirtualTree  (should be pure component without hooks and HOC)
+     */
+    boxHeader?: CustomComponent;
+    /**
+     * Direct css styling for applying css for all (Box title) in LoginBox pages
+     */
+    boxTitleStyle?: ExtendedCSSProperties;
+    /**
+     * Direct css styling for applying css for all (Box message or Box subtitle) in LoginBox pages
+     */
+    boxMessageStyle?: ExtendedCSSProperties;
+    /**
+     * Footer component placed in inside the login box and after login inputs.
+     * Mostly used for Disclaimers or Back buttons
+     * Accepts:
+     *  - string as url for rendering image element with src='url'
+     *  - string as base64 for rendering image as base64 content
+     *  - ReactElement will be rendered inside LoginBox VirtualTree
+     */
+    boxFooter?: CustomComponent;
+    /**
+     * Option to customize login box inputs by providing
+     * css style for every state (base, hover, focus, disabled, etc...)
+     */
+    inputTheme?: InputThemeOptions;
+    /**
+     * Option to customize login box standard buttons by providing
+     * css style for every state (base, hover, focus, disabled, etc...)
+     */
+    buttonTheme?: ButtonThemeOptions;
+    /**
+     * Option to customize login box link buttons by providing
+     * css style for every state (base, hover, focus, disabled, etc...)
+     */
+    linkButtonTheme?: ButtonThemeOptions;
+    /**
+     * Option to customize login box submit buttons by providing
+     * css style for every state (base, hover, focus, disabled, etc...)
+     */
+    submitButtonTheme?: ButtonThemeOptions;
+}
+export interface LoginBoxCommonTheme extends BaseTheme, LoginBoxOptionalCommon {
+    /**
+     * RootElement
+     * The root DIV element of specific login box page
+     * By default it's have fixed and full width/height size
+     */
+    rootStyle: ExtendedCSSProperties;
+    /**
+     * PageElement
+     * It is DIV element placed inside the [RootElement]{@link rootStyle}
+     * The purpose of this element is to wrapper the Box Component and other custom components
+     * By default it's have flex display and justify content center
+     */
+    pageStyle: ExtendedCSSProperties;
+}
+export interface LoginBoxCommonThemeOptions extends BaseThemeOptions, LoginBoxOptionalCommon {
+    /**
+     * RootElement
+     * The root DIV element of specific login box page
+     * By default it's have fixed and full width/height size
+     */
+    rootStyle?: ExtendedCSSProperties;
+    /**
+     * PageElement
+     * It is DIV element placed inside the [RootElement]{@link rootStyle}
+     * The purpose of this element is to wrapper the Box Component and other custom components
+     * By default it's have flex display and justify content center
+     */
+    pageStyle?: ExtendedCSSProperties;
+}
+export {};

package/ThemeOptions/LoginBoxTheme/LoginPageTheme.d.ts

@@ -0,0 +1,119 @@
+import { LoginBoxCommonTheme, LoginBoxCommonThemeOptions } from '../index';
+import { ExtendedCSSProperties } from '../../Common';
+import { CustomComponent } from '../ComponentsOptions';
+import { ReactNode } from 'react';
+interface TitleProps {
+    title: string;
+}
+interface MessageProps {
+    message: ReactNode;
+}
+export interface GoToSignupMessageProps {
+    goToSignup: () => void;
+    goToSignupMessage: string;
+    goToSignupButtonText: string;
+}
+export interface ResendOTCProps {
+    haventReceiveOTCMessage: string;
+    resendOTCMessage: string;
+    resendOTC: () => void;
+}
+export interface LoginPageComponentsTheme {
+    /**
+     * Login page container style
+     */
+    containerStyle?: ExtendedCSSProperties;
+    /**
+     * Login page form container style
+     */
+    formContainerStyle?: ExtendedCSSProperties;
+    /**
+     * Login page title default is 'Sign In'
+     * displayed in login screen (login with password, pre-login)
+     * passing 'null' will hide the title
+     */
+    title?: CustomComponent<TitleProps>;
+    /**
+     * Direct css style for Login Page title
+     */
+    titleStyle?: ExtendedCSSProperties;
+    /**
+     * Go to signup component displayed under box title default is 'Don't have an account? Sign up'
+     * displayed in login screen (login with password, pre-login)
+     * passing 'null' will hide the signup message
+     */
+    signupMessage?: CustomComponent<GoToSignupMessageProps>;
+    /**
+     * Direct css style for 'Go to signup component'
+     */
+    signupMessageStyle?: ExtendedCSSProperties;
+    /**
+     * Recover Multi-factor page title default is 'Recover MFA'
+     * displayed in recover mfa screen
+     * passing 'null' will hide the title
+     */
+    recoverMfaTitle?: CustomComponent<TitleProps>;
+    /**
+     * Direct css style for Recover Multi-factor title
+     */
+    recoverMfaTitleStyle?: ExtendedCSSProperties;
+    /**
+     * One time code login title default is 'Check your email'
+     * displayed after pre-login with OTC enabled
+     * passing 'null' will hide the title
+     */
+    otcTitle?: CustomComponent<TitleProps>;
+    /**
+     * Direct css style for One time code
+     */
+    otcTitleStyle?: ExtendedCSSProperties;
+    /**
+     * One time code login message component default is 'We have sent an six-digit code to smaple@email.com'
+     * displayed after pre-login with OTC enabled
+     * passing 'null' will hide the title
+     */
+    otcMessage?: CustomComponent<MessageProps>;
+    /**
+     * Direct css style for One time code login message
+     */
+    otcMessageStyle?: ExtendedCSSProperties;
+    /**
+     * Resend OTC container component, displaye after otc submit button,
+     * passing 'null' will hide the otc resend button
+     */
+    resendOTC?: ExtendedCSSProperties;
+    /**
+     * Direct css style for Resent OTC container
+     */
+    resendOTCStyle?: ExtendedCSSProperties;
+    /**
+     * Direct style for the text displayed before resend otc button,
+     * default is 'Haven’t received it?'
+     */
+    resendOTCMessageStyle?: ExtendedCSSProperties;
+    /**
+     * MagicLink success login title default is 'Check your email'
+     * displayed after pre-login if MagicLink enabled
+     * passing 'null' will hide the title
+     */
+    magicLinkTitle?: CustomComponent<TitleProps>;
+    /**
+     * Direct css style for MagicLink title
+     */
+    magicLinkTitleStyle?: ExtendedCSSProperties;
+    /**
+     * MagicLink login message component default is 'We have sent an email to smaple@email.com'
+     * displayed after pre-login with MagicLink enabled
+     * passing 'null' will hide the title
+     */
+    magicLinkMessage?: CustomComponent<MessageProps>;
+    /**
+     * Direct css style for MagicLink message
+     */
+    magicLinkMessageStyle?: ExtendedCSSProperties;
+}
+export interface LoginPageThemeOptions extends LoginBoxCommonThemeOptions, LoginPageComponentsTheme {
+}
+export interface LoginPageTheme extends LoginBoxCommonTheme, LoginPageComponentsTheme {
+}
+export {};

package/ThemeOptions/LoginBoxTheme/ResetPasswordTheme.d.ts

@@ -0,0 +1,48 @@
+import { CustomComponent, LoginBoxCommonTheme, LoginBoxCommonThemeOptions } from '../index';
+import { ExtendedCSSProperties } from '../../Common';
+import { ReactNode } from 'react';
+interface TitleProps {
+    title: string;
+}
+interface MessageProps {
+    message: ReactNode;
+}
+interface ResetPasswordComponentsTheme {
+    /**
+     * Forgot password page container style
+     */
+    containerStyle?: ExtendedCSSProperties;
+    /**
+     * Forgot password page form container style
+     */
+    formContainerStyle?: ExtendedCSSProperties;
+    /**
+     * Reset password page success container style
+     */
+    successContainerStyle?: ExtendedCSSProperties;
+    /**
+     * Reset password page title default is 'Reset Password'
+     * displayed in forgot password form screen
+     * passing 'null' will hide the title
+     */
+    title?: CustomComponent<TitleProps>;
+    /**
+     * Direct css style for Forgot password Page title
+     */
+    titleStyle?: ExtendedCSSProperties;
+    /**
+     * Reset password page message default is hidden
+     * displayed in forgot password form screen
+     * passing 'null' will hide the message
+     */
+    message?: CustomComponent<MessageProps>;
+    /**
+     * Direct css style for Forgot password Page message
+     */
+    messageStyle?: ExtendedCSSProperties;
+}
+export interface ResetPasswordPageThemeOptions extends LoginBoxCommonThemeOptions, ResetPasswordComponentsTheme {
+}
+export interface ResetPasswordPageTheme extends LoginBoxCommonTheme, ResetPasswordComponentsTheme {
+}
+export {};

package/ThemeOptions/LoginBoxTheme/SignupPageTheme.d.ts

@@ -0,0 +1,46 @@
+import { LoginBoxCommonTheme, LoginBoxCommonThemeOptions } from '../index';
+import { ExtendedCSSProperties } from '../../Common';
+import { CustomComponent } from '../ComponentsOptions';
+interface TitleProps {
+    title: string;
+}
+export interface GoToLoginMessageProps {
+    goToLogin: () => void;
+    goToLoginMessage: string;
+    goToLoginButtonText: string;
+}
+export interface SignupPageComponentsTheme {
+    /**
+     * Login page container style
+     */
+    containerStyle?: ExtendedCSSProperties;
+    /**
+     * Login page form container style
+     */
+    formContainerStyle?: ExtendedCSSProperties;
+    /**
+     * Login page title default is 'Sign In'
+     * displayed in login screen (login with password, pre-login)
+     * passing 'null' will hide the title
+     */
+    title?: CustomComponent<TitleProps>;
+    /**
+     * Direct css style for Login Page title
+     */
+    titleStyle?: ExtendedCSSProperties;
+    /**
+     * Go to login component displayed under box title default is 'Already have an account?'
+     * displayed in login screen (login with password, pre-login)
+     * passing 'null' will hide the signup message
+     */
+    loginMessage?: CustomComponent<GoToLoginMessageProps>;
+    /**
+     * Direct css style for 'Go to Login'
+     */
+    loginMessageStyle?: ExtendedCSSProperties;
+}
+export interface SignupPageThemeOptions extends LoginBoxCommonThemeOptions, SignupPageComponentsTheme {
+}
+export interface SignupPageTheme extends LoginBoxCommonTheme, SignupPageComponentsTheme {
+}
+export {};

package/ThemeOptions/LoginBoxTheme/SocialLoginsTheme.d.ts

@@ -0,0 +1,44 @@
+import { ExtendedCSSProperties } from '../../Common';
+import { BaseTheme, BaseThemeOptions, ButtonThemeOptions } from '../index';
+export interface SocialLoginComponentKeyRender {
+    divider: {
+        text: string;
+    };
+    googleIcon: {};
+    microsoftIcon: {};
+    facebookIcon: {};
+    githubIcon: {};
+}
+export declare type SocialLoginCustomComponent<T extends keyof SocialLoginComponentKeyRender> = string | ((props?: SocialLoginComponentKeyRender[T]) => string | any);
+export interface SocialLoginsThemeOptions extends BaseThemeOptions {
+    divider?: SocialLoginCustomComponent<'divider'>;
+    dividerStyle?: ExtendedCSSProperties;
+    dividerTextStyle?: ExtendedCSSProperties;
+    containerStyle?: ExtendedCSSProperties;
+    buttonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    iconsOnly?: boolean;
+    googleIcon?: SocialLoginCustomComponent<'googleIcon'>;
+    googleButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    microsoftIcon?: SocialLoginCustomComponent<'microsoftIcon'>;
+    microsoftButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    facebookIcon?: SocialLoginCustomComponent<'facebookIcon'>;
+    facebookButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    githubIcon?: SocialLoginCustomComponent<'githubIcon'>;
+    githubButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+}
+export interface SocialLoginsTheme extends BaseTheme {
+    dividerStyle?: ExtendedCSSProperties;
+    dividerTextStyle?: ExtendedCSSProperties;
+    divider?: SocialLoginCustomComponent<'divider'>;
+    containerStyle?: ExtendedCSSProperties;
+    buttonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    iconsOnly?: boolean;
+    googleIcon?: SocialLoginCustomComponent<'googleIcon'>;
+    googleButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    microsoftIcon?: SocialLoginCustomComponent<'microsoftIcon'>;
+    microsoftButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    facebookIcon?: SocialLoginCustomComponent<'facebookIcon'>;
+    facebookButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    githubIcon?: SocialLoginCustomComponent<'githubIcon'>;
+    githubButtonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+}

package/ThemeOptions/LoginBoxTheme/index.d.ts

@@ -0,0 +1,51 @@
+import { AcceptInvitationPageTheme, AcceptInvitationPageThemeOptions } from './AcceptInvitationTheme';
+import { ActivateAccountPageTheme, ActivateAccountPageThemeOptions } from './ActivateAccountPageTheme';
+import { BaseThemeOptions, LoginBoxCommonTheme, LoginBoxCommonThemeOptions, SignupPageThemeOptions } from '../index';
+import { CSSProperties, ExtendedCSSProperties } from '../../Common';
+import { AuthPageCustomComponents } from '../../CustomComponents';
+import { ForgotPasswordPageTheme, ForgotPasswordPageThemeOptions } from './ForgotPasswordTheme';
+import { ResetPasswordPageTheme, ResetPasswordPageThemeOptions } from './ResetPasswordTheme';
+import { LoginPageTheme, LoginPageThemeOptions } from './LoginPageTheme';
+import { SocialLoginsTheme, SocialLoginsThemeOptions } from './SocialLoginsTheme';
+import { LoaderTheme, LoaderThemeOptions } from './LoaderTheme';
+import { SignupPageTheme } from './SignupPageTheme';
+export * from './LoginBoxCommon';
+export * from './LoginPageTheme';
+export * from './SignupPageTheme';
+export * from './CustomLoginComponents';
+export * from './SocialLoginsTheme';
+export * from './ForgotPasswordTheme';
+export * from './ResetPasswordTheme';
+export * from './ActivateAccountPageTheme';
+export * from './AcceptInvitationTheme';
+export interface AuthPageThemeOptions extends BaseThemeOptions, AuthPageCustomComponents {
+    style?: ExtendedCSSProperties;
+    layout?: {
+        width?: CSSProperties['width'];
+        marginLeft?: CSSProperties['marginLeft'];
+        outerCustomBackground?: any;
+    };
+}
+export interface LoginBoxThemeOptions extends LoginBoxCommonThemeOptions {
+    themeName?: 'classic' | 'modern' | 'vivid' | 'dark';
+    poweredByPlacement?: 'box' | 'page';
+    acceptInvitation?: AcceptInvitationPageThemeOptions;
+    activateAccount?: ActivateAccountPageThemeOptions;
+    forgotPassword?: ForgotPasswordPageThemeOptions;
+    resetPassword?: ResetPasswordPageThemeOptions;
+    login?: LoginPageThemeOptions;
+    signup?: SignupPageThemeOptions;
+    socialLogins?: SocialLoginsThemeOptions;
+    loader?: LoaderThemeOptions;
+}
+export interface LoginBoxTheme extends LoginBoxCommonTheme {
+    themeName: 'classic' | 'modern' | 'vivid' | 'dark';
+    acceptInvitation: AcceptInvitationPageTheme;
+    activateAccount: ActivateAccountPageTheme;
+    forgotPassword: ForgotPasswordPageTheme;
+    resetPassword: ResetPasswordPageTheme;
+    login: LoginPageTheme;
+    signup: SignupPageTheme;
+    socialLogins: SocialLoginsTheme;
+    loader: LoaderTheme;
+}

package/ThemeOptions/LoginBoxThemeOptions.d.ts

@@ -22,6 +22,9 @@ export declare type SocialLogins = BaseThemeOptions & {
     iconWidth?: string;
 } & Record<SocialLoginTypes, SocialLoginButton>;
 export interface AuthPageThemeOptions extends BaseThemeOptions, AuthPageCustomComponents {
+    style?: CSSProperties & {
+        [k in string]: CSSProperties;
+    };
     layout?: {
         width?: CSSProperties['width'];
         marginLeft?: CSSProperties['marginLeft'];
@@ -41,11 +44,3 @@ export interface LoginFormThemeOptions extends AuthPageThemeOptions {
     loginWithSsoFailed?: AuthPageThemeOptions;
     forceEnrollMfa?: AuthPageThemeOptions;
 }
-export interface LoginBoxThemeOptions extends AuthPageThemeOptions {
-    login?: LoginFormThemeOptions;
-    signup?: AuthPageThemeOptions;
-    acceptInvitation?: AuthPageThemeOptions;
-    activateAccount?: AuthPageThemeOptions;
-    forgetPassword?: AuthPageThemeOptions;
-    resetPassword?: AuthPageThemeOptions;
-}