✨ add login feature

Author: marcode24

src/app/auth/components/components.module.ts

@@ -2,19 +2,22 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
+import { LoginFormComponent } from './login-form/login-form.component';
 import { RegisterFormComponent } from './register-form/register-form.component';
 
 @NgModule({
   declarations: [
-    RegisterFormComponent
+    RegisterFormComponent,
+    LoginFormComponent
   ],
   imports: [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
   ],
   exports: [
-    RegisterFormComponent
+    RegisterFormComponent,
+    LoginFormComponent
   ]
 })
 export class ComponentsModule { }

src/app/auth/components/login-form/login-form.component.html

@@ -0,0 +1,28 @@
+<form [formGroup]="loginForm" (submit)="login()">
+  <div class="input-group">
+    <label for="email">Correo electrónico</label>
+    <input formControlName="email" type="email" id="email" placeholder="Correo electrónico">
+  </div>
+  <div class="input-group">
+    <label for="password">Contraseña</label>
+    <div class="input-icon">
+      <input formControlName="password" type="password" id="password" placeholder="Contraseña">
+      <i class="bx bx-hide" id="password-icon" (click)="showPassword('password')"></i>
+    </div>
+  </div>
+  <div class="options">
+    <div class="input-group row">
+      <input formControlName="remember" (change)="changeRemember($event)" type="checkbox" id="remember">
+      <label for="remember">Recordar</label>
+    </div>
+    <a href="#">¿Olvidaste tu contraseña?</a>
+  </div>
+  <div class="input-container">
+    <button class="btn btn-primary" [disabled]="loginForm.invalid" type="submit">Iniciar sesión</button>
+  </div>
+  <ng-container *ngIf="showErrors && errors.length > 0">
+    <ul>
+      <li *ngFor="let error of errors">{{ error }}</li>
+    </ul>
+  </ng-container>
+</form>

src/app/auth/components/login-form/login-form.component.scss

@@ -0,0 +1,24 @@
+@import 'settings/_colors.scss';
+@import 'settings/_typography.scss';
+
+.btn {
+  width: 100%;
+  border-radius: 0.5rem;
+}
+
+.input-container {
+  margin-top: 1rem;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    @include fs-6;
+    @include fw-500;
+    color: var(--fc-purple);
+    margin-bottom: 0.5rem;
+  }
+}

src/app/auth/components/login-form/login-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginFormComponent } from './login-form.component';
+
+describe('LoginFormComponent', () => {
+  let component: LoginFormComponent;
+  let fixture: ComponentFixture<LoginFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/components/login-form/login-form.component.ts

@@ -0,0 +1,69 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+
+import { ILogin } from '@interfaces/user.interface';
+
+import { RegexClass } from '@utils/regex.util';
+import Storage from '@utils/storage.util';
+
+@Component({
+  selector: 'app-login-form',
+  templateUrl: './login-form.component.html',
+  styleUrls: ['./login-form.component.scss']
+})
+export class LoginFormComponent {
+  private regexExpressions = RegexClass;
+  @Input() showErrors = false;
+  @Input() errors: string[] = [];
+  @Output() loginData: EventEmitter<ILogin> = new EventEmitter<ILogin>();
+  loginForm = this.fb.group({
+    email: [Storage.getLocalStorage('email') || '', [
+      Validators.required,
+      Validators.pattern(this.regexExpressions.EMAIL),
+    ]],
+    password: ['', [
+      Validators.required,
+    ]],
+    remember: [Storage.getLocalStorage('email') ? true : false],
+  });
+
+  constructor(
+    private fb: FormBuilder,
+  ) { }
+
+  validateForm(field: string): boolean | undefined | null {
+    const myForm = this.loginForm.get(field);
+    return myForm?.errors && (myForm?.dirty || myForm?.touched);
+  }
+
+  validateField(field: string, error: string): boolean | undefined | null {
+    return (this.loginForm.get(field)?.hasError(error));
+  }
+
+  showPassword(id: string): void {
+    const password = document.getElementById(id);
+    const icon = document.getElementById(`${id}-icon`);
+    if (password?.getAttribute('type') === 'password') {
+      password.setAttribute('type', 'text');
+      icon?.classList.remove('bx-hide');
+      icon?.classList.add('bx-show');
+    } else {
+      password?.setAttribute('type', 'password');
+      icon?.classList.remove('bx-show');
+      icon?.classList.add('bx-hide');
+    }
+  }
+
+  login(): void {
+    if (this.loginForm.valid) {
+      this.loginData.emit(this.loginForm.value);
+    }
+  }
+
+  changeRemember(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    this.loginForm.patchValue({
+      remember: checked
+    });
+  }
+}

src/app/auth/login/login.component.html

@@ -13,26 +13,11 @@
           <a routerLink="/register">Regístrate</a>
         </span>
       </div>
-      <form>
-        <div class="input-group">
-          <label for="email">Correo electrónico</label>
-          <input type="email" id="email" placeholder="Correo electrónico">
-        </div>
-        <div class="input-group">
-          <label for="password">Contraseña</label>
-          <input type="password" id="password" placeholder="Contraseña">
-        </div>
-        <div class="options">
-          <div class="input-group row">
-            <input type="checkbox" id="remember">
-            <label for="remember">Recordar</label>
-          </div>
-          <a href="#">¿Olvidaste tu contraseña?</a>
-        </div>
-        <div class="input-container">
-          <button class="btn btn-primary">Iniciar sesión</button>
-        </div>
-      </form>
+      <app-login-form
+        (loginData)="login($event)"
+        [showErrors]="showErrors"
+        [errors]="errors"
+      ></app-login-form>
     </section>
   </div>
 </div>

src/app/auth/login/login.component.ts

@@ -1,8 +1,41 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { AuthService } from '@services/auth.service';
+
+import { ILogin } from '@interfaces/user.interface';
+
+import Storage from '@utils/storage.util';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent {}
+export class LoginComponent {
+  showErrors = false;
+  errors: string[] = [];
+
+  constructor(
+    private authService: AuthService,
+    private router: Router
+  ) { }
+
+  login(data: ILogin): void {
+    this.authService.login(data).subscribe({
+      next: () => {
+        if (data.remember) Storage.savelocalStorage('email', data.email);
+        else Storage.removeLocalStorage('email');
+
+        this.router.navigateByUrl('/');
+      },
+      error: (err) => {
+        this.errors = [];
+        if (err.status === 400 && err.error.msg === 'email or password are incorrect') {
+          this.showErrors = true;
+          this.errors.push('correo o contraseña incorrectos');
+        }
+      }
+    });
+  }
+}

src/app/core/interfaces/response.interface.ts

@@ -5,7 +5,7 @@ export interface IUserCreated {
   ok: boolean;
   user: User;
   token: string;
-  root: Folder;
+  root?: Folder;
   status?: number;
   msg?: string;
 }

src/app/core/interfaces/user.interface.ts

@@ -4,3 +4,9 @@ export interface ICreateAccount {
   email: string;
   password: string;
 }
+
+export interface ILogin {
+  email: string;
+  password: string;
+  remember: boolean;
+}

src/app/core/services/auth.service.ts

@@ -6,7 +6,7 @@ import { environment } from 'environments/environment';
 import { Observable, map } from 'rxjs';
 
 import { IUserCreated } from '@interfaces/response.interface';
-import { ICreateAccount } from '@interfaces/user.interface';
+import { ICreateAccount, ILogin } from '@interfaces/user.interface';
 
 const base_url = environment.base_url;
 
@@ -24,4 +24,9 @@ export class AuthService {
     const url = `${base_url}/user`;
     return this.http.post<IUserCreated>(url, data);
   }
+
+  login(data: ILogin): Observable<IUserCreated> {
+    const url = `${base_url}/auth/login`;
+    return this.http.post<IUserCreated>(url, data);
+  }
 }