From 025fdba69107595be9ca0a9cceb471e5cdc419a8 Mon Sep 17 00:00:00 2001
From: Felipe Luna <felipe.luna@totvs.com.br>
Date: Sun, 18 Feb 2024 12:47:45 -0300
Subject: [PATCH] feat(auth-form): integrates email and password

---
 .../auth-form-email.component.html            | 30 ++++++++++++-
 .../auth-form-email.component.scss            |  8 ++++
 .../auth-form-email.component.spec.ts         | 42 ++++++++++++++++++-
 .../auth-form-email.component.ts              | 16 ++++++-
 .../auth-form-password.component.html         | 14 ++++++-
 .../auth-form-password.component.scss         |  8 ++++
 .../auth-form-password.component.spec.ts      | 10 ++++-
 .../auth-form-password.component.ts           | 12 ++++--
 .../lib/auth-form/auth-form.component.html    |  1 +
 .../src/lib/auth-form/auth-form.component.ts  |  5 ++-
 10 files changed, 137 insertions(+), 9 deletions(-)

diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.html b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.html
index 1d6eb33..e456087 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.html
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.html
@@ -1 +1,29 @@
-<p>auth-form-email works!</p>
+<mat-form-field appearance="outline" class="form-field">
+  <mat-label>Informe seu email</mat-label>
+  <input
+    [formControl]="control"
+    matInput
+    placeholder="Ex: user@gmail.com"
+    type="email"
+  />
+  @if (control.hasError('email') && !control.hasError('required')) {
+  <mat-error data-testid="error-email"
+    >Por favor, insira um email válido</mat-error
+  >
+  } @if (control.hasError('required')) {
+  <mat-error data-testid="error-required"
+    >O email é <strong>obrigatório</strong></mat-error
+  >
+  }
+</mat-form-field>
+
+<div class="container">
+  <button
+    [disabled]="control.invalid"
+    [routerLink]="['../', 'password']"
+    mat-button
+    color="primary"
+  >
+    Próximo
+  </button>
+</div>
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.scss b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.scss
index e69de29..6aefe0b 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.scss
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.scss
@@ -0,0 +1,8 @@
+.form-field {
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  justify-content: end;
+}
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.spec.ts b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.spec.ts
index b760cec..5ebb4f9 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.spec.ts
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.spec.ts
@@ -1,3 +1,5 @@
+import { RouterTestingModule } from '@angular/router/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AuthFormEmailComponent } from './auth-form-email.component';
 import { AuthFormComponent } from '../auth-form.component';
@@ -8,7 +10,11 @@ describe('AuthFormEmailComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthFormEmailComponent],
+      imports: [
+        AuthFormEmailComponent,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
       providers: [AuthFormComponent],
     }).compileComponents();
 
@@ -20,4 +26,38 @@ describe('AuthFormEmailComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should enable button when control is valid', () => {
+    const button: HTMLButtonElement =
+      fixture.nativeElement.querySelector('button');
+    expect(button.disabled).toBe(true);
+
+    component.control.setValue('validemail@gmail.com');
+
+    fixture.detectChanges();
+
+    expect(button.disabled).toBe(false);
+  });
+
+  it('should display required error message', () => {
+    component.control.setValue('');
+    component.control.markAsTouched();
+    fixture.detectChanges();
+
+    const errorMessage = fixture.nativeElement.querySelector(
+      '[data-testid="error-required"]'
+    );
+    expect(errorMessage).toBeTruthy();
+  });
+
+  it('should display email error message', () => {
+    component.control.setValue('invalidemail');
+    component.control.markAsTouched();
+    fixture.detectChanges();
+
+    const errorMessage = fixture.nativeElement.querySelector(
+      '[data-testid="error-email"]'
+    );
+    expect(errorMessage).toBeTruthy();
+  });
 });
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.ts b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.ts
index c1f0274..818c134 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.ts
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-email/auth-form-email.component.ts
@@ -1,19 +1,33 @@
 import { AuthFormComponent } from './../auth-form.component';
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'lib-auth-form-email',
   standalone: true,
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    RouterModule,
+  ],
   templateUrl: './auth-form-email.component.html',
   styleUrl: './auth-form-email.component.scss',
 })
 export class AuthFormEmailComponent implements OnInit {
+  control!: FormControl<string>;
+
   constructor(private authformComponent: AuthFormComponent) {}
 
   ngOnInit(): void {
     // eslint-disable-next-line no-console
     console.log(this.authformComponent.form.value);
+
+    this.control = this.authformComponent.form.controls.email;
   }
 }
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.html b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.html
index 602e83a..3a06c49 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.html
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.html
@@ -1 +1,13 @@
-<p>auth-form-password works!</p>
+<mat-form-field appearance="outline" class="form-field">
+  <mat-label>Informe sua senha</mat-label>
+  <input
+    [formControl]="this.control"
+    matInput
+    placeholder="Mínimo de 6 caracteres"
+    type="password"
+  />
+</mat-form-field>
+
+<div class="container">
+  <button mat-button color="primary">Entrar</button>
+</div>
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.scss b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.scss
index e69de29..6aefe0b 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.scss
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.scss
@@ -0,0 +1,8 @@
+.form-field {
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  justify-content: end;
+}
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.spec.ts b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.spec.ts
index 03da36c..2c15324 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.spec.ts
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.spec.ts
@@ -1,5 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AuthFormPasswordComponent } from './auth-form-password.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AuthFormComponent } from '../auth-form.component';
 
 describe('AuthFormPasswordComponent', () => {
   let component: AuthFormPasswordComponent;
@@ -7,7 +10,12 @@ describe('AuthFormPasswordComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthFormPasswordComponent],
+      imports: [
+        AuthFormPasswordComponent,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
+      providers: [AuthFormComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AuthFormPasswordComponent);
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.ts b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.ts
index 6a11b24..11093dc 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.ts
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.ts
@@ -1,11 +1,17 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { AuthFormComponent } from '../auth-form.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'lib-auth-form-password',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, MatButtonModule, MatInputModule, ReactiveFormsModule],
   templateUrl: './auth-form-password.component.html',
   styleUrl: './auth-form-password.component.scss',
 })
-export class AuthFormPasswordComponent {}
+export class AuthFormPasswordComponent {
+  control = inject(AuthFormComponent).form.controls.password;
+}
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form.component.html b/modules/feature/auth/form/src/lib/auth-form/auth-form.component.html
index bc31ca8..0faf587 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form.component.html
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form.component.html
@@ -1,5 +1,6 @@
 <form class="form" [formGroup]="form">
   <mat-card class="form__card">
+    <h1>Login</h1>
     <router-outlet></router-outlet>
   </mat-card>
 </form>
diff --git a/modules/feature/auth/form/src/lib/auth-form/auth-form.component.ts b/modules/feature/auth/form/src/lib/auth-form/auth-form.component.ts
index 07cab6c..c80a3fc 100644
--- a/modules/feature/auth/form/src/lib/auth-form/auth-form.component.ts
+++ b/modules/feature/auth/form/src/lib/auth-form/auth-form.component.ts
@@ -18,7 +18,10 @@ import { MatCardModule } from '@angular/material/card';
 })
 export class AuthFormComponent {
   form = new FormGroup({
-    email: new FormControl('', [Validators.required, Validators.email]),
+    email: new FormControl('', {
+      nonNullable: true,
+      validators: [Validators.required, Validators.email],
+    }),
     password: new FormControl('', [
       Validators.required,
       Validators.minLength(6),