Skip to main content

Sign up

This component is used to create a new user account and is only available for a triggered email link generated by staff or the user itself.

Developer notes​

Assets​

tip

You can provide a custom image path to components. But, if you want to globalize this image, you can follow the cdsSource pattern. For more information, please refer to the CDS Source documentation.

(e.g. for logo branding, background image, etc.)

Web Components​

warning

To use a web component, make sure that you have imported the javascript file in your HTML file. For more information, follow the Web components guide.

Also, have followed the Web Component Configuration guide.

Suggested route path​

REMINDER

The example bellow follows angular 17 standards. To a better understanding of how to use or import them, please refer to the Angular documentation.

We suggest the following route path structure:

auth.routing.ts
import { BfmSignUpComponent, BfmSignUpSuccessComponent } from "@celerofinancas/ui-auth";

export const AUTH_ROUTES: Route[] = [
  {
    path: "signup/:token",
    component: BfmSignUpComponent,
  },
  {
    path: "signup/success",
    component: BfmSignUpSuccessComponent,
  },
  // ...
];

Explanation​

The signup component will always be accessed through a token, which is generated by the system and sent to the user's email. The token is used to validate the user's email and create a new account. Also is a one-time token, so it can only be used once.

The feedback screen is displayed after the user creates a new account successfully.

BfmSignUpComponent

This section describes the BfmSignUpComponent component.

Sing up page

Composition​

The BfmSignUpComponent component is composed of the following components:

Usage​

To use the BfmSignUpComponent, you need to import it in your component:

signup.component.ts
import { BfmSignUpComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'auth-signup',
  imports: [BfmSignUpComponent],
  templateUrl: './signup.component.html',
})
export class SignUpComponent {}

Then, you can use the BfmSignUpComponent in your template:

signup.component.html
<auth-signup/>

Inputs​

The BfmSignUpComponent has the following inputs:

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

  • Accepts a string in cdsSource pattern.

refer to Assets notes

TypeDefault
stringassets/shared/logo-white.svg

asideImage​

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

  • Accepts a string in cdsSource pattern.

refer to Assets notes

TypeDefault
stringassets/auth/sign-up.svg

asideTitle​

The title to be displayed in the aside of the sign-up screen.

TypeDefault
stringVocê chegou ao mundo da gestão financeira!

asideDescription​

The description to be displayed in the aside of the sign-up screen.

TypeDefault
stringA nossa jornada começa agora. Conte conosco para alcançar seus objetivos e superar obstáculos durante essa nova fase juntos.

signUpTitle​

The title to be displayed in the sign-up form.

TypeDefault
stringCrie seu login

signUpDescription​

The description to be displayed in the sign-up form.

TypeDefault
stringVamos começar cadastrando suas informações para a criação das suas credenciais na plataforma.

signUpButton​

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

TypeDefault
stringCadastrar

footerText​

The text to be displayed in the footer.

TypeDefault
string{{ currentYear }} - {{ platformName }}

Events​

The BfmSignUpComponent emits the following events:

signUp​

Emitted when user finishes the sign-up process, before of the being redirected to the feedback screen.

Type
EventEmmiter

Example​

Customize texts in sign-up flow:

signup.component.html
<auth-signup
  asideTitle="Valorize o seu dinheiro!"
  asideDescription="Conte com a gente!"
  signUpTitle="Seja bem-vindo!"
  signUpDescription="Insira suas informações para começar a usar a plataforma."
  signUpButton="Inscrever-se"
  footerText="IB Name"
></auth-signup>

BfmSignUpFormComponent

This section describes the BfmSignUpFormComponent component.

Composition​

The BfmSignUpFormComponent is composed of the following fields:

info

The disabled fields are filled with user's information, which is already registered in the system.

This information is retrieved from URL token.

  • Title and description of the form.
  • Form fields:
    • Name (disabled)
    • Last name (disabled)
    • Birthdate
    • CPF
    • Phone number (disabled)
    • Email (disabled)
    • Password
    • Confirm password
  • Terms and conditions checkbox
  • Sign-up button

The component will automatically validate URL token and form fields, including password validation (following Password Validation rules) and terms and conditions checkbox.

Also, will handle form submission and redirect user to the feedback screen.

warning

If you need any kind of customization that is not covered by inputs, you can create a new component to handle this. But, you need to integrate with backend to save data. Please refer to the BFM Core documentation for more information.

Also, you will need to handle all validations, redirects and error messages.

Usage​

To use the BfmSignUpFormComponent, you need to import it in your component:

signup.component.ts
import { BfmSignUpFormComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'auth-signup',
  imports: [BfmSignUpFormComponent],
  templateUrl: './signup.component.html',
})
export class SignUpComponent {}

Then, you can use the BfmSignUpFormComponent in your template:

signup.component.html
<auth-signup-form></auth-signup-form>

Inputs​

The BfmSignUpFormComponent has the following inputs:

title​

The title to be displayed in sign-up form.

TypeDefault
stringCrie seu login

description​

The description to be displayed in sign-up form.

TypeDefault
stringVamos começar cadastrando suas informações para a criação das suas credenciais na plataforma.

textButton​

The text to be displayed in sign-up button.

TypeDefault
stringCadastrar

enableTokenValidation​

By default, the URL token will be validated. If token is invalid, the user will be redirected to login.

TypeDefault
booleantrue

enableTermsAndConditions​

Controls the visibility of the terms and conditions checkbox.

TypeDefault
booleantrue

When user clicks on the terms and conditions link, a modal will be displayed with the terms and conditions text.

formFields​

warning

You can customize the form fields to be displayed in the sign-up form. But, be careful with the order and the required fields.

The form fields to be displayed in the sign-up form.

Type
SignUpFormField[]

Default value:

import { SignUpFormField } from '@celerofinancas/ui-auth';
import { Validators, AbstractControl } from '@angular/forms';

public formFields: SingUpFormField[] = [
    {
      control: 'token',
      field: false,
    },
    {
      control: 'first_name',
      validator: Validators.required,
      label: 'Nome',
      field: true,
      disabled: true,
      required: true,
    },
    {
      control: 'last_name',
      validator: Validators.required,
      label: 'Sobrenome',
      field: true,
      disabled: true,
      required: true,
    },
    {
      control: 'birth_date',
      label: 'Data de nascimento',
      validator: [
        Validators.required,
        (control: AbstractControl) => {
          const age = differenceInYears(new Date(), new Date(control.value));
          return age < 18 ? { custom: 'Você deve ter mais de 18 anos para prosseguir' } : null;
        },
      ],
      field: true,
      specialInput: true,
      required: true,
    },
    {
      testId: 'identity-number',
      label: 'CPF',
      control: 'identity_number',
      mask: this.mask.strictCpf,
      field: true,
      disabled: this.isMaster,
      required: true,
      validator: [
        Validators.required,
        (control: AbstractControl) =>
          control.value && !isCPFValid(control.value) ? { custom: 'CPF inválido.' } : null,
      ],
    },
    {
      label: 'Número de celular',
      control: 'full_phone',
      mask: this.mask.phone,
      required: true,
      field: true,
      disabled: true,
      validator: [
        Validators.required,
        (control: AbstractControl) =>
          control.value && !isPhoneValid(control.value)
            ? { custom: 'Telefone inválido.' }
            : null,
      ],
    },
    {
      control: 'email',
      label: 'Email de login',
      field: true,
      disabled: !this.isMaster,
      required: true,
      validator: [Validators.required, Validators.email],
    },
    {
      control: 'password',
      validator: [
        Validators.required,
        (control: AbstractControl) =>
          Passwords.isStrongPassword(control.value) ? null : { hiddenError: true },
      ],
      label: 'Crie uma senha',
      field: true,
      required: true,
    },
    {
      control: 'confirmPassword',
      validator: Validators.required,
      label: 'Confirmar senha',
      field: true,
      required: true,
    },
    {
      control: 'privacy_policy_version',
      validator: Validators.required,
      label: null,
      field: false,
      required: true,
    },
  ];

Events​

The BfmSignUpFormComponent emits the following events:

signUp​

Emitted when user finishes the sign-up process, before of the being redirected to the feedback screen.

Type
EventEmmiter

Example​

Customize form fields in sign-up flow:

signup.component.html
<auth-signup-form
  title="Seja bem-vindo!"
  description="Insira suas informações para começar a usar a plataforma."
  textButton="Inscrever-se"
  [formFields]="customFormFields"
></auth-signup-form>

BfmSignUpAsideComponent

This section describes the BfmSignUpAsideComponent component.

Composition​

The BfmSignUpAsideComponent component is composed of the following fields:

  • Image
  • Title
  • Description

Usage​

To use the BfmSignUpAsideComponent, you need to import it in your component:

signup.component.ts
import { BfmSignUpAsideComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'auth-signup',
  imports: [BfmSignUpAsideComponent],
  templateUrl: './signup.component.html',
})
export class SignUpComponent {}

Then, you can use the BfmSignUpAsideComponent in your template:

signup.component.html
<bfm-signup-aside></bfm-signup-aside>

Inputs​

The BfmSignUpAsideComponent has the following inputs:

image​

The URL of the image to be displayed in the aside.

  • Accepts a string in cdsSource pattern.
TypeDefault
stringassets/auth/sign-up.svg

refer to Assets notes

title​

The title to be displayed in the aside.

TypeDefault
stringVocê chegou ao mundo da gestão financeira!

description​

The description to be displayed in the aside.

TypeDefault
stringA nossa jornada começa agora. Conte conosco para alcançar seus objetivos e superar obstáculos durante essa nova fase juntos.

Events​

The BfmSignUpAsideComponent component has no events.

Example​

Customize aside in sign-up flow:

signup.component.html
<bfm-signup-aside
  title="Valorize o seu dinheiro!"
  description="Conte com a gente!"
></bfm-signup-aside>
<bfm-signup-form></bfm-signup-form>

BfmSignUpFooterComponent

This section describes the BfmSignUpFooterComponent component.

Composition​

The BfmSignUpFooterComponent component is composed of the following fields:

  • Text
  • Router links

Usage​

To use the BfmSignUpFooterComponent, you need to import it in your component:

signup.component.ts
import { BfmSignUpFooterComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'auth-signup',
  imports: [BfmSignUpFooterComponent],
  templateUrl: './signup.component.html',
})
export class SignUpComponent {}

Then, you can use the BfmSignUpFooterComponent in your template:

signup.component.html
<bfm-signup-footer></bfm-signup-footer>

Inputs​

The BfmSignUpFooterComponent has the following inputs:

text​

The text to be displayed in the footer.

TypeDefault
string{{ currentYear }} - {{ platformName }}

The router links to be displayed in the footer.

TypeDefault
RouterLink[][{ label: 'Fazer login', link: '/auth/signin' }]

Events​

The BfmSignUpFooterComponent component has no events.

Example​

Customize footer in sign-up flow:

signup.component.html
<main>
  <bfm-signup-aside></bfm-signup-aside>
  <section>
    <bfm-signup-form></bfm-signup-form>
    <bfm-signup-footer
      text="IB Name"
      [routerLinks]="links"
    ></bfm-signup-footer>
  </section>
</main>

BfmSignUpSuccessComponent

The feedback screen is displayed after the user creates a new account successfully.

Composition​

The BfmSignUpSuccessComponent component is composed of the following components and fields:

tip

You can create a your own feedback screen, just make sure that it declareted in the auth.routing.ts file following the Suggested route path pattern.

Usage​

To use the BfmSignUpSuccessComponent, you need to import it in your component:

signup-success.component.ts
import { BfmSignUpSuccessComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'signup-success',
  imports: [BfmSignUpSuccessComponent],
  templateUrl: './signup.component.html',
})
export class SignUpSuccessComponent {}

Then, you can use the BfmSignUpSuccessComponent in your template:

signup.component.html
<bfm-feedback-screen></bfm-feedback-screen>

Inputs​

asideImage​

The URL of the image to be displayed in the aside of the feedback screen.

  • Accepts a string in cdsSource pattern.

refer to Assets notes

TypeDefault
stringassets/auth/sign-up.svg

asideTitle​

The title to be displayed in the aside of the feedback screen.

TypeDefault
stringVocê chegou ao mundo da gestão financeira!

asideDescription​

The description to be displayed in the aside of the feedback screen.

TypeDefault
stringA nossa jornada começa agora. Conte conosco para alcançar seus objetivos e superar obstáculos durante essa nova fase juntos.

successMessage​

The message to be displayed in the feedback screen.

TypeDefault
stringTudo pronto!

successDescription​

The description to be displayed in the feedback screen.

TypeDefault
stringAgora você já pode fazer o login na plataforma clicando no botão abaixo.

buttonText​

The text to be displayed in the button.

TypeDefault
stringFazer login na plataforma

footerText​

The text to be displayed in the footer.

TypeDefault
string{{ currentYear }} - {{ platformName }}

Events​

buttonClick​

Emitted when user clicks on the button.

Type
EventEmmiter

Example​

Customize feedback message:

signup.component.html
<bfm-feedback-screen
  asideTitle="Valorize o seu dinheiro!"
  asideDescription="Conte com a gente!"
  successMessage="Muito bem!"
  successDescription="Seu cadastro foi realizado com sucesso! Agora você já pode fazer o login na plataforma."
  buttonText="Fazer login na plataforma"
  footerText="IB Name"
></bfm-feedback-screen>