feat(auth-form): integrates email and password

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>

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;
+}

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();
+  });
 });

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;
   }
 }

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>

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;
+}

modules/feature/auth/form/src/lib/auth-form/auth-form-password/auth-form-password.component.spec.ts

@@ -1,13 +1,21 @@
 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;
   let fixture: ComponentFixture<AuthFormPasswordComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthFormPasswordComponent],
+      imports: [
+        AuthFormPasswordComponent,
+        NoopAnimationsModule,
+        RouterTestingModule,
+      ],
+      providers: [AuthFormComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(AuthFormPasswordComponent);

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;
+}

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>

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),