@frontegg/types 4.39.1 → 4.39.2-dashboard

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,36 @@
+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 {
+    dividerStyle?: ExtendedCSSProperties;
+    dividerTextStyle?: ExtendedCSSProperties;
+    divider?: SocialLoginCustomComponent<'divider'>;
+    containerStyle?: ExtendedCSSProperties;
+    buttonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    iconsOnly?: boolean;
+    googleIcon?: SocialLoginCustomComponent<'googleIcon'>;
+    microsoftIcon?: SocialLoginCustomComponent<'microsoftIcon'>;
+    facebookIcon?: SocialLoginCustomComponent<'facebookIcon'>;
+    githubIcon?: SocialLoginCustomComponent<'githubIcon'>;
+}
+export interface SocialLoginsTheme extends BaseTheme {
+    dividerStyle?: ExtendedCSSProperties;
+    dividerTextStyle?: ExtendedCSSProperties;
+    divider?: SocialLoginCustomComponent<'divider'>;
+    containerStyle?: ExtendedCSSProperties;
+    buttonStyle?: Omit<ButtonThemeOptions, 'disabled'>;
+    iconsOnly?: boolean;
+    googleIcon?: SocialLoginCustomComponent<'googleIcon'>;
+    microsoftIcon?: SocialLoginCustomComponent<'microsoftIcon'>;
+    facebookIcon?: SocialLoginCustomComponent<'facebookIcon'>;
+    githubIcon?: SocialLoginCustomComponent<'githubIcon'>;
+}

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;
-}

package/ThemeOptions/index.d.ts

@@ -6,8 +6,10 @@ import { Transitions, TransitionsOptions } from './TransitionsOptions';
 import { Breakpoints, BreakpointsOptions } from './BreakpointsOptions';
 import { ComponentsOptions } from './ComponentsOptions';
 import { TypographyOptions, Typography } from './TypographyOptions';
-import { AdminPortalThemeOptions } from './AdminPortalThemeOptions';
-import { LoginBoxThemeOptions } from './LoginBoxThemeOptions';
+import { AdminPortalTheme, AdminPortalThemeOptions } from './AdminPortalThemeOptions';
+import { LoginBoxTheme, LoginBoxThemeOptions } from './LoginBoxTheme';
+export * from './LoginBoxTheme';
+export * from './ComponentsOptions';
 export declare type Direction = 'ltr' | 'rtl';
 export interface FronteggThemeOptions {
     palette?: ThemePaletteOptions;
@@ -21,107 +23,7 @@ export interface FronteggThemeOptions {
     typography?: TypographyOptions;
     adminPortal?: AdminPortalThemeOptions;
     loginBox?: LoginBoxThemeOptions;
-    navigation?: {
-        groupTitleColor?: CSSProperties['color'];
-        groupTitleSize?: CSSProperties['fontSize'];
-        headerColor?: CSSProperties['color'];
-        subHeaderColor?: CSSProperties['color'];
-        background?: CSSProperties['background'];
-        default: {
-            color?: CSSProperties['color'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarBgColor?: CSSProperties['background'];
-            avatarColor?: CSSProperties['color'];
-        };
-        hover: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-        selected: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-    };
-    dialog?: {
-        headerBackground?: CSSProperties['background'];
-        headerTextColor?: CSSProperties['color'];
-        bodyBackground?: CSSProperties['background'];
-        footerBackground?: CSSProperties['background'];
-    };
-    socialLogins?: {
-        rowLayout?: boolean;
-        google?: socialLogin;
-        github?: socialLogin;
-        facebook?: socialLogin;
-        microsoft?: socialLogin;
-    };
-    rightPanel?: {
-        headerBackground?: CSSProperties['background'];
-        pageBackground?: CSSProperties['background'];
-        elementBackground?: CSSProperties['color'];
-        profileHeader?: CSSProperties['background'];
-        tableHeaderBackground?: CSSProperties['background'];
-        tableBodyBackground?: CSSProperties['background'];
-    };
-    authPage?: {
-        loginBox: {
-            width?: CSSProperties['width'];
-            padding?: CSSProperties['padding'];
-            border?: CSSProperties['border'];
-            borderRadius?: CSSProperties['borderRadius'];
-            boxShadow?: CSSProperties['boxShadow'];
-            backgroundCard?: CSSProperties['background'];
-        };
-        loginSignupSwitch?: {
-            color?: CSSProperties['color'];
-            fontSize?: CSSProperties['fontSize'];
-            fontFamily?: CSSProperties['fontFamily'];
-            textAlign?: CSSProperties['textAlign'];
-            padding?: CSSProperties['padding'];
-            margin?: CSSProperties['margin'];
-            link?: {
-                color?: CSSProperties['color'];
-                decoration?: CSSProperties['textDecoration'];
-                fontWeight?: CSSProperties['fontWeight'];
-            };
-        };
-        inputError: {
-            fontFamily?: CSSProperties['fontFamily'];
-            fontSize?: CSSProperties['fontSize'];
-            fontWeight?: CSSProperties['fontWeight'];
-            padding?: CSSProperties['padding'];
-        };
-    };
-    subHeaderMsg?: {
-        color?: CSSProperties['color'];
-        fontSize?: CSSProperties['fontSize'];
-        fontFamily?: CSSProperties['fontFamily'];
-        textAlign?: CSSProperties['textAlign'];
-        padding?: CSSProperties['padding'];
-        margin?: CSSProperties['margin'];
-        textDecoration?: CSSProperties['textDecoration'];
-    };
 }
-export declare type socialLogin = {
-    background?: CSSProperties['background'];
-    default: {
-        color?: CSSProperties['color'];
-    };
-    hover: {
-        color?: CSSProperties['color'];
-        background?: CSSProperties['background'];
-    };
-    selected: {
-        color?: CSSProperties['color'];
-        background?: CSSProperties['background'];
-    };
-};
 export interface FronteggTheme {
     palette: ThemePalette;
     typographyStyleOptions: CSSProperties;
@@ -132,94 +34,8 @@ export interface FronteggTheme {
     direction: Direction;
     components: ComponentsOptions;
     typography: Typography;
-    adminPortal?: AdminPortalThemeOptions;
-    loginBox?: LoginBoxThemeOptions;
-    navigation: {
-        groupTitleColor: CSSProperties['color'];
-        groupTitleSize: CSSProperties['fontSize'];
-        headerColor: CSSProperties['color'];
-        subHeaderColor: CSSProperties['color'];
-        background: CSSProperties['background'];
-        default: {
-            color?: CSSProperties['color'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarBgColor?: CSSProperties['background'];
-            avatarColor?: CSSProperties['color'];
-        };
-        hover: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-        selected: {
-            color?: CSSProperties['color'];
-            background?: CSSProperties['background'];
-            borderColor?: CSSProperties['borderColor'];
-            avatarColor?: CSSProperties['color'];
-            avatarBgColor?: CSSProperties['backgroundColor'];
-        };
-    };
-    dialog: {
-        headerBackground?: CSSProperties['background'];
-        headerTextColor?: CSSProperties['color'];
-        bodyBackground?: CSSProperties['background'];
-        footerBackground?: CSSProperties['background'];
-    };
-    socialLogins: {
-        rowLayout?: boolean;
-        google?: socialLogin;
-        github?: socialLogin;
-        facebook?: socialLogin;
-        microsoft?: socialLogin;
-    };
-    rightPanel: {
-        headerBackground?: CSSProperties['background'];
-        pageBackground?: CSSProperties['background'];
-        elementBackground?: CSSProperties['color'];
-        profileHeader?: CSSProperties['background'];
-        tableHeaderBackground?: CSSProperties['background'];
-        tableBodyBackground?: CSSProperties['background'];
-    };
-    authPage: {
-        loginBox: {
-            width?: CSSProperties['width'];
-            padding?: CSSProperties['padding'];
-            border?: CSSProperties['border'];
-            borderRadius?: CSSProperties['borderRadius'];
-            boxShadow?: CSSProperties['boxShadow'];
-            backgroundCard?: CSSProperties['background'];
-        };
-        loginSignupSwitch?: {
-            color?: CSSProperties['color'];
-            fontSize?: CSSProperties['fontSize'];
-            fontFamily?: CSSProperties['fontFamily'];
-            textAlign?: CSSProperties['textAlign'];
-            padding?: CSSProperties['padding'];
-            margin?: CSSProperties['margin'];
-            link?: {
-                color?: CSSProperties['color'];
-                decoration?: CSSProperties['textDecoration'];
-                fontWeight?: CSSProperties['fontWeight'];
-            };
-        };
-        inputError: {
-            fontFamily?: CSSProperties['fontFamily'];
-            fontSize?: CSSProperties['fontSize'];
-            fontWeight?: CSSProperties['fontWeight'];
-            padding?: CSSProperties['padding'];
-        };
-    };
-    subHeaderMsg: {
-        color?: CSSProperties['color'];
-        fontSize?: CSSProperties['fontSize'];
-        fontFamily?: CSSProperties['fontFamily'];
-        textAlign?: CSSProperties['textAlign'];
-        padding?: CSSProperties['padding'];
-        margin?: CSSProperties['margin'];
-        textDecoration?: CSSProperties['textDecoration'];
-    };
+    adminPortal: AdminPortalTheme;
+    loginBox: LoginBoxTheme;
 }
 export declare type BaseThemeOptions = Omit<FronteggThemeOptions, 'adminPortal' | 'loginBox'>;
 export declare type BaseTheme = Omit<FronteggTheme, 'adminPortal' | 'loginBox'>;