BfmSingInFormComponent

The building block component that renders the user sign-in form.

Composition

Is composed by the following fields:

• Company logo
• Sign-in button that will trigger the oauth flow.

Usage

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

Angular

auth.component.ts

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

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

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

<bfm-signin-form></bfm-signin-form>

Web Component

refer to Web Components note

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

your-html-file.html

<bfm-signin-form></bfm-signin-form>

Inputs

The BfmSingInFormComponent has the following inputs:

logo

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

• Accepts a string in cdsSource pattern.

Type	Default
string	assets/shared/logo.svg

refer to Assets notes

logoVisible

Whether the logo should be displayed or not.

Type	Default
boolean	true

buttonText

The text to be displayed in the sign-in button.

Type	Default
string	Fazer login

interfaceType

The user interface that is being created.

Type	Default
string	client

Events

signin

This component automatically triggers a oauth flow when user click on sign-in button. And emits user data when sign-in is successful.

Type
EventEmitter

Examples

A custom background usage

HTML

auth-signin-form.component.html

<main>
  <bfm-signin-form (signin)="onSignin($event)"></bfm-signin-form>
  <my-custom-background-component></my-custom-background-component>
<main>

TS

auth-signin.component.ts

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

@Component({
  selector: 'auth-signin',
  templateUrl: './auth-signin.component.html',
  styleUrls: ['./auth-signin.component.scss'],
  imports: [ BfmSignInFormComponent ],
})
export class AuthSigninComponent {
  // Handle the sign-in event
  public onSignin(event: User): void {
    console.log('User data:', event);
  }
}

A custom logo usage:

HTML

auth-signin-form.component.html

<div class="form-wrapper">
  <img
    [class]="custom-img-class"
    [src]="path/following/your/pattern.svg"
  />
  <bfm-signin-form
    [displayLogo]="false"
    (signin)="onSignin($event)"
  ></bfm-signin-form>
</div>

TS

auth-signin.component.ts

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

@Component({
  selector: 'auth-signin',
  templateUrl: './auth-signin.component.html',
  styleUrls: ['./auth-signin.component.scss'],
  imports: [ BfmSignInFormComponent ],
})
export class AuthSigninComponent {
  // Handle the sign-in event
  public onSignin(event: User): void {
    console.log('User data:', event);
  }
}

Configuration

To customize the BfmSingInFormComponent, you can inject the SIGNIN_FORM_CONFIGS token in your module. This token is used to configure the custom values of the component. If is not provided, the default values will be used.

Properties

Key	Description	Object	Default
showRecaptchaText	If true, the recaptcha text will be displayed.	loginForm	true
showHorizontalRule	If true, the horizontal rule will be displayed.	loginForm, oauth	true
showForm	If true, the form will be displayed.	loginForm, oauth	true

The SIGNIN_FORM_CONFIGS default values are:

{
  loginForm: {
    showRecaptchaText: true,
    showHorizontalRule: true,
    showForm: true,
  },
  oauth: {
    showHorizontalRule: true,
    showForm: true,
  }
}

You can disable the values to get more space in the screen and be more flexible to use your component.

Example

To customize the BfmSingInFormComponent, you can inject the SIGNIN_FORM_CONFIGS token in your module.

app.config.ts

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

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: SIGNIN_FORM_CONFIGS,
      useValue: {
        loginForm: {
          showRecaptchaText: true,
          showHorizontalRule: true,
          showForm: true,
        },
        oauth: {
          showHorizontalRule: true,
          showForm: true,
        },
      },
    },
  ],
};

Component

You can also provide a custom component to the BfmSingInFormComponent using the CUSTOM_SIGNIN_FORM_COMPONENT token.

app.config.ts

import { ApplicationConfig } from "@angular/core";
import { CUSTOM_SIGNIN_FORM_COMPONENT } from "@celerofinancas/ui-auth";
import { CustomSignInFormComponent } from "./custom-signin-form.component";

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: CUSTOM_SIGNIN_FORM_COMPONENT,
      useValue: CustomSignInFormComponent,
    },
  ],
};

The component will be rendered in the BfmSingInFormComponent template, and you can use it to customize the sign-in form.