BfmSingInBackgroundComponent

The building block component that renders the background image of the sign-in screen.

Composition

Is composed by the following fields:

• Background image
• Social media links
• Welcome message

Usage

You need to import the selected building block in your component:

Angular

refer to Angular version note

auth.component.ts

import { BfmSingInBackgroundComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: "auth-signin",
  imports: [BfmSingInBackgroundComponent],
  templateUrl: "./auth.component.html",
})
export class SignInComponent {}

Then, you can use the bfm-signin-background component in your template:

<bfm-signin-background></bfm-signin-background>

Web Component

refer to Web Components note

If you want to use the BfmSingInBackgroundComponent as a web component, you can import in your HTML file as follows:

your-html-file.html

<bfm-signin-background></bfm-signin-background>

Inputs

The BfmSingInBackgroundComponent has the following inputs:

background

The URL of the background image to be displayed in the sign-in screen.

• Accepts a string in cdsSource pattern.

Type	Default
string	assets/auth/login-background.svg

refer to Assets notes

Events

The BfmSingInBackgroundComponent component has no events.

Examples

A custom background usage:

HTML

auth-signin.component.html

<bfm-signin-background [background]="'assets/shared/my-custom-background.svg'" />

TS

auth-signin.component.ts

import { Component } from '@angular/core';
import { BfmSingInBackgroundComponent } from '@celerofinancas/ui-auth';

@Component({
  selector: 'auth-signin',
  templateUrl: './auth-signin.component.html',
  styleUrls: ['./auth-signin.component.scss'],
  imports: [ BfmSingInBackgroundComponent ],
})
export class AuthSigninComponent {}

Configuration

To customize the BfmSingInBackgroundComponent, you can inject the SIGNIN_BACKGROUND_CONFIGS token in your module.

This token is used to provide custom values to the component. If is not provided, the default values will be used.

Properties

Key	Description	Default
title	The title to be displayed in the sign-in screen.	Mais tempo livre!
subtitle	The subtitle to be displayed in the sign-in screen.	Foque mais em <b>você</b> e na <b>saúde<br>financeira</b> da sua empresa
socialLinks	The social media links to be displayed in the sign-in screen	[{ url: 'https://www.facebook.com/goCelero/', icon: 'cds-icon-facebook' }, { url: 'https://www.linkedin.com/company/celero-automacao-financeira/', icon: 'cds-icon-linkedin' }, { url: 'https://www.instagram.com/gocelero/', icon: 'cds-icon-instagram' }]

note

If you want to ignore socialLinks in sign-in screen, you can set it to [] (empty array).

The SIGNIN_BACKGROUND_CONFIGS default values are:

{
  "title": "Mais tempo livre!",
  "subtitle": "Foque mais em <b>você</b> e na <b>saúde<br>financeira</b> da sua empresa",
  "socialLinks": [
    {
      "url": "https://www.facebook.com/goCelero/",
      "icon": "cds-icon-facebook"
    },
    {
      "url": "https://www.linkedin.com/company/celero-automacao-financeira/",
      "icon": "cds-icon-linkedin"
    },
    {
      "url": "https://www.instagram.com/gocelero/",
      "icon": "cds-icon-instagram"
    }
  ]
}

Example

To customize the BfmSingInBackgroundComponent, you can inject the SIGNIN_BACKGROUND_CONFIGS token in your module.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { BfmSignInComponent } from "@celerofinancas/ui-auth";
import { SIGNIN_BACKGROUND_CONFIGS } from "@celerofinancas/ui-auth";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: SIGNIN_BACKGROUND_CONFIGS,
      useValue: {
        title: "Custom title",
        subtitle: "Custom subtitle",
        socialLinks: [
          {
            url: "https://www.facebook.com/companyUrl/",
            icon: "cds-icon-facebook",
          },
          {
            url: "https://www.linkedin.com/company/companyUrl/",
            icon: "cds-icon-linkedin",
          },
          {
            url: "https://www.instagram.com/companyUrl/",
            icon: "cds-icon-instagram",
          },
        ],
      },
    },
  ],
};