Skip to main content

​
LoginPage Component

The LoginPage component provides the user interface for authentication in the Karma Ecommerce application. It handles user login by calling the UsuarioRepository service and displaying authentication results.

​
Location

src/app/usuario/infrastructure/ui/pages/login-page/
├── login-page.ts
├── login-page.html
└── login-page.css

​
Component Code

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../../services/auth-service';
import { tap } from 'rxjs';
import { UsuarioRepository } from '../../../../domain/repositories/usuario.repository';

@Component({
  selector: 'app-login-page',
  imports: [],
  templateUrl: './login-page.html',
  styleUrl: './login-page.css',
})
export class LoginPage implements OnInit {
  

  constructor(private authService: UsuarioRepository) {}

  ngOnInit(): void {
  }

  login(usuario: string, contrasena: string) {
    this.authService.loginUsuario(usuario, contrasena).pipe(tap(usuario => {
      console.log(usuario);
      usuario ? alert('usuario y contraseña correctos!') : alert('usuario o contraseña incorrectos');       
    })).subscribe();
  }

}

​
@Component Decorator

The component is configured with the following metadata:
PropertyValueDescription
selector'app-login-page'HTML selector for the component
imports[]Standalone component with no additional imports
templateUrl'./login-page.html'Path to the HTML template
styleUrl'./login-page.css'Path to the component styles

​
Properties

​
authService

private authService: UsuarioRepository
Injected instance of UsuarioRepository used to perform authentication operations.

​
Methods

​
ngOnInit()

ngOnInit(): void
Angular lifecycle hook called after component initialization. Currently has no implementation. Lifecycle: Called once after the first ngOnChanges()

​
login()

login(usuario: string, contrasena: string)
Authenticates a user with the provided credentials. Parameters:
  • usuario (string) - Username for authentication
  • contrasena (string) - Password for authentication
RxJS Pipeline: The method uses RxJS operators to handle the authentication flow:
  1. loginUsuario() - Calls the repository method that returns an Observable
  2. pipe() - Chains RxJS operators
  3. tap() - Side effect operator that:
    • Logs the user object to console
    • Displays success alert if user is authenticated
    • Displays error alert if authentication fails
  4. subscribe() - Activates the observable stream
Behavior:
  • On success: Displays “usuario y contraseña correctos!”
  • On failure: Displays “usuario o contraseña incorrectos”
  • Logs the user object to the browser console
Example: 
this.login('jose', 'chivito3000ydash');

​
Dependency Injection

The component uses Angular’s dependency injection to inject the UsuarioRepository: 
constructor(private authService: UsuarioRepository) {}
This provides access to authentication methods defined in the domain layer, following clean architecture principles.

​
Routing Configuration

The LoginPage is configured as the root route in app.routes.ts: 
export const routes: Routes = [
    {
        path: '',
        component: LoginPage
    },
    {
        path: 'registro',
        component: RegisterPage
    }
];
Route Details:
  • Path: / (root route)
  • Component: LoginPage
  • Access: Direct navigation to the application root

​
Usage Notes

  • The component currently uses hardcoded credentials in the template for testing
  • Authentication results are displayed using browser alerts
  • The component implements the OnInit interface but has no initialization logic
  • No error handling is implemented in the login method
  • The component follows Angular standalone component architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us