From e46a39befe0e41c88fce3ecdb6c24d6ae98d5736 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Mon, 28 Oct 2024 09:59:06 -0300
Subject: [PATCH 01/15] loginForm

---
 src/app/app.component.css          |  2 +-
 src/app/login/login.component.html | 17 ++++-------------
 src/app/login/login.component.ts   | 23 +++++++++--------------
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 3516e92..fecf65e 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,5 +1,5 @@
 
->>> body {
+body {
     margin: 0;
 }
 
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index e4ed4db..ee484b8 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,27 +1,18 @@
 <mat-card class="login-page">
   <mat-card-title>Login</mat-card-title>
   <mat-card-content>
-
-    <form class="login-form data-form">
-
+    <form class="login-form data-form" #loginForm="ngForm">
       <mat-form-field>
-
-        <input matInput type="email" name="email"
-               placeholder="Email">
-
+        <input matInput type="email" name="email" placeholder="Email" />
       </mat-form-field>
 
       <mat-form-field>
-
-        <input matInput type="password" placeholder="Password">
-
+        <input matInput type="password" placeholder="Password" />
       </mat-form-field>
 
-      <button mat-raised-button color="primary">
+      <button mat-raised-button color="primary" (click)="login(loginForm)">
         Login
       </button>
-
     </form>
-
   </mat-card-content>
 </mat-card>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 84905e8..391ad49 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,21 +1,16 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit } from "@angular/core";
+import { NgForm } from "@angular/forms";
 
 @Component({
-  selector: 'login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  selector: "login",
+  templateUrl: "./login.component.html",
+  styleUrls: ["./login.component.css"],
 })
 export class LoginComponent implements OnInit {
+  constructor() {}
 
-
-  constructor() {
-
-
+  ngOnInit() {}
+  login(loginForm: NgForm) {
+    console.log(loginForm.value, loginForm.valid);
   }
-
-  ngOnInit() {
-
-  }
-
 }

From d942fb7a10b14c98ddde93ffa66d0625a1811c00 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Mon, 28 Oct 2024 10:43:20 -0300
Subject: [PATCH 02/15] create ngModel

---
 src/app/login/login.component.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ee484b8..8ab0296 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -3,11 +3,15 @@
   <mat-card-content>
     <form class="login-form data-form" #loginForm="ngForm">
       <mat-form-field>
-        <input matInput type="email" name="email" placeholder="Email" />
+        <input matInput type="email" name="email"
+        ngModel #email="ngModel"
+        placeholder="Email" />
       </mat-form-field>
 
       <mat-form-field>
-        <input matInput type="password" placeholder="Password" />
+        <input matInput type="password" name="password"
+        ngModel #password="ngModel"
+        placeholder="Password" />
       </mat-form-field>
 
       <button mat-raised-button color="primary" (click)="login(loginForm)">

From 033bdb3a93266e72f8afc85da54305e50fe13fcc Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Mon, 28 Oct 2024 13:04:54 -0300
Subject: [PATCH 03/15] create error messages

---
 src/app/login/login.component.css  |  2 ++
 src/app/login/login.component.html | 28 ++++++++++++++++++++++------
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index a780a9f..2e3b0c6 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -16,3 +16,5 @@
 }
 
 
+
+
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 8ab0296..6b4fbad 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -3,15 +3,31 @@
   <mat-card-content>
     <form class="login-form data-form" #loginForm="ngForm">
       <mat-form-field>
-        <input matInput type="email" name="email"
-        ngModel #email="ngModel"
-        placeholder="Email" />
+        <input
+          matInput
+          type="email"
+          name="email"
+          ngModel
+          #email="ngModel"
+          required
+          placeholder="Email"
+        />
+
+        <mat-error *ngIf="email.errors?.required"
+          >The email is mandatory.</mat-error
+        >
       </mat-form-field>
 
       <mat-form-field>
-        <input matInput type="password" name="password"
-        ngModel #password="ngModel"
-        placeholder="Password" />
+        <input
+          matInput
+          type="password"
+          name="password"
+          ngModel
+          #password="ngModel"
+          required
+          placeholder="Password"
+        />
       </mat-form-field>
 
       <button mat-raised-button color="primary" (click)="login(loginForm)">

From 149ee747e50862316f592f924df837311e03c40f Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Mon, 28 Oct 2024 13:05:32 -0300
Subject: [PATCH 04/15] delete a word

---
 src/app/login/login.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 6b4fbad..0e23e76 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -14,7 +14,7 @@
         />
 
         <mat-error *ngIf="email.errors?.required"
-          >The email is mandatory.</mat-error
+          >The email is mandatory.s</mat-error
         >
       </mat-form-field>
 

From 64e0e036f1e8788303a526accbc8fe3ecebee559 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Tue, 29 Oct 2024 10:30:34 -0300
Subject: [PATCH 05/15] adding ngSubmit

---
 src/app/login/login.component.html | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 0e23e76..d5dff24 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,7 +1,11 @@
 <mat-card class="login-page">
   <mat-card-title>Login</mat-card-title>
   <mat-card-content>
-    <form class="login-form data-form" #loginForm="ngForm">
+    <form
+      class="login-form data-form"
+      #loginForm="ngForm"
+      (submit)="login(loginForm)"
+    >
       <mat-form-field>
         <input
           matInput
@@ -10,11 +14,24 @@
           ngModel
           #email="ngModel"
           required
+          email
+          minlength="3"
+          maxlength="20"
           placeholder="Email"
         />
 
         <mat-error *ngIf="email.errors?.required"
-          >The email is mandatory.s</mat-error
+          >The email is mandatory.</mat-error
+        >
+
+        <mat-error *ngIf="email.errors?.minlength">
+          Your email must have minimum
+          {{ email.errors?.minlength.requiredLength }} chars, but it only has
+          {{ email.errors?.minlength.actualLength }}.
+        </mat-error>
+
+        <mat-error *ngIf="email.errors?.email"
+          >The email is not a valid email.</mat-error
         >
       </mat-form-field>
 
@@ -30,7 +47,13 @@
         />
       </mat-form-field>
 
-      <button mat-raised-button color="primary" (click)="login(loginForm)">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="login(loginForm)"
+        type="submit"
+        [disabled]="!loginForm.valid"
+      >
         Login
       </button>
     </form>

From 0549585f6b5a199793e5d54a5a8a50da56251259 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Tue, 29 Oct 2024 11:50:56 -0300
Subject: [PATCH 06/15] one way and bidirectional data bingind

---
 src/app/login/login.component.html |  6 ++++--
 src/app/login/login.component.ts   | 10 ++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index d5dff24..5214e3b 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -11,7 +11,7 @@
           matInput
           type="email"
           name="email"
-          ngModel
+          [ngModel]="val.email"
           #email="ngModel"
           required
           email
@@ -40,9 +40,11 @@
           matInput
           type="password"
           name="password"
-          ngModel
+          [ngModel]="val.password"
           #password="ngModel"
           required
+          minlength="3"
+          maxlength="20"
           placeholder="Password"
         />
       </mat-form-field>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 391ad49..ad8c193 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { NgForm } from "@angular/forms";
+import { getMaxListeners } from "process";
 
 @Component({
   selector: "login",
@@ -7,10 +8,19 @@ import { NgForm } from "@angular/forms";
   styleUrls: ["./login.component.css"],
 })
 export class LoginComponent implements OnInit {
+
+  val = {
+    email: "hello@gmail.com",
+    password: "123456"
+  }
   constructor() {}
 
   ngOnInit() {}
   login(loginForm: NgForm) {
     console.log(loginForm.value, loginForm.valid);
+
+    console.log(this.val);
   }
+
+
 }

From 1241fda7b8ab5b64c082c627f93429302a3dbbcd Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Tue, 29 Oct 2024 12:17:45 -0300
Subject: [PATCH 07/15] create validators folder and function

---
 .../validators/password-strength.validator.ts | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/app/validators/password-strength.validator.ts

diff --git a/src/app/validators/password-strength.validator.ts b/src/app/validators/password-strength.validator.ts
new file mode 100644
index 0000000..5f9175e
--- /dev/null
+++ b/src/app/validators/password-strength.validator.ts
@@ -0,0 +1,28 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+export function createPasswordStrengthValidator(): ValidatorFn {
+  return (control: AbstractControl) : ValidationErrors | null => {
+
+    const value = control.value;
+
+    if (!value) {
+      return null;
+    }
+
+    const hasUpperCase = /[A-Z]+/.test(value);
+
+    const hasLowerCase = /[a-z]+/.test(value);
+
+    const hasNumeric = /[0-9]+/.test(value);
+
+    const passwordValid = hasUpperCase && hasLowerCase && hasNumeric;
+
+    return !passwordValid ? {passwordStrength: true} : null;
+
+
+  }
+
+  }
+
+
+

From c4815cea88424f25ef5f22b1f0104c6afce1c0e7 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Mon, 4 Nov 2024 11:27:43 -0300
Subject: [PATCH 08/15] implementing custom validators

---
 src/app/app.module.ts                         |  4 +++-
 .../directives/password-strength.directive.ts | 21 +++++++++++++++++++
 src/app/login/login.component.html            | 12 +++++++++--
 src/app/login/login.component.ts              |  2 +-
 4 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 src/app/directives/password-strength.directive.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8410579..d6d87c9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -41,6 +41,7 @@ import {CreateCourseStep1Component} from './create-course/create-course-step-1/c
 import {FileUploadComponent} from './file-upload/file-upload.component';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {LoginReactiveComponent} from './login-reactive/login-reactive.component';
+import { PasswordStrengthDirective } from './directives/password-strength.directive';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -56,7 +57,8 @@ import {LoginReactiveComponent} from './login-reactive/login-reactive.component'
         CreateCourseStep3Component,
         AddressFormComponent,
         FileUploadComponent,
-        LoginReactiveComponent
+        LoginReactiveComponent,
+        PasswordStrengthDirective
     ],
     bootstrap: [AppComponent], imports: [BrowserModule,
         BrowserAnimationsModule,
diff --git a/src/app/directives/password-strength.directive.ts b/src/app/directives/password-strength.directive.ts
new file mode 100644
index 0000000..12108ae
--- /dev/null
+++ b/src/app/directives/password-strength.directive.ts
@@ -0,0 +1,21 @@
+import { Directive } from "@angular/core";
+import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator, Validators } from "@angular/forms";
+import { createPasswordStrengthValidator } from "../validators/password-strength.validator";
+
+
+@Directive({
+  selector: '[passwordStrength]',
+  providers: [{
+    provide: NG_VALIDATORS,
+    useExisting: PasswordStrengthDirective,
+    multi: true
+  }]
+
+
+})
+export class PasswordStrengthDirective implements Validator {
+
+    validate(control: AbstractControl): ValidationErrors | null{
+      return createPasswordStrengthValidator()(control);
+    }
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 5214e3b..0a88994 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -43,10 +43,18 @@
           [ngModel]="val.password"
           #password="ngModel"
           required
-          minlength="3"
-          maxlength="20"
+          passwordStrength
           placeholder="Password"
         />
+
+        <mat-error *ngIf="password.errors?.passwordStrength"
+          >Your password must have lower case, upper case and numeric
+          characters.</mat-error
+        >
+
+        <mat-error *ngIf="password.errors?.required"
+          >The password is mandatory</mat-error
+        >
       </mat-form-field>
 
       <button
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index ad8c193..4fcade4 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from "@angular/core";
 import { NgForm } from "@angular/forms";
-import { getMaxListeners } from "process";
+
 
 @Component({
   selector: "login",

From cf676c7899bc8f1b1a956e464832ab3b4770fcf8 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Mon, 4 Nov 2024 12:28:05 -0300
Subject: [PATCH 09/15] create API error validator

---
 src/app/app.module.ts                |  4 +++-
 src/app/login/login.component.css    |  6 +++++-
 src/app/login/login.component.html   | 18 ++++++++++--------
 src/app/pipes/only-one-error.pipe.ts | 22 ++++++++++++++++++++++
 4 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/app/pipes/only-one-error.pipe.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d6d87c9..919d953 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -42,6 +42,7 @@ import {FileUploadComponent} from './file-upload/file-upload.component';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {LoginReactiveComponent} from './login-reactive/login-reactive.component';
 import { PasswordStrengthDirective } from './directives/password-strength.directive';
+import { OnlyOneErrorPipe } from './pipes/only-one-error.pipe';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -58,7 +59,8 @@ import { PasswordStrengthDirective } from './directives/password-strength.direct
         AddressFormComponent,
         FileUploadComponent,
         LoginReactiveComponent,
-        PasswordStrengthDirective
+        PasswordStrengthDirective,
+        OnlyOneErrorPipe
     ],
     bootstrap: [AppComponent], imports: [BrowserModule,
         BrowserAnimationsModule,
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
index 2e3b0c6..7756bdc 100644
--- a/src/app/login/login.component.css
+++ b/src/app/login/login.component.css
@@ -15,6 +15,10 @@
   margin-bottom: 10px;
 }
 
-
+.field-message {
+  color: red; /* Example styling */
+  font-size: 12px;
+  margin-top: 5px;
+}
 
 
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 0a88994..b47b99e 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -11,7 +11,7 @@
           matInput
           type="email"
           name="email"
-          [ngModel]="val.email"
+          ngModel
           #email="ngModel"
           required
           email
@@ -40,22 +40,24 @@
           matInput
           type="password"
           name="password"
-          [ngModel]="val.password"
+          ngModel
           #password="ngModel"
           required
           passwordStrength
           placeholder="Password"
         />
-
-        <mat-error *ngIf="password.errors?.passwordStrength"
-          >Your password must have lower case, upper case and numeric
-          characters.</mat-error
-        >
-
         <mat-error *ngIf="password.errors?.required"
           >The password is mandatory</mat-error
         >
       </mat-form-field>
+      <ng-container
+        *ngIf="password.errors | onlyOneError : ['passwordStrength'] as error"
+      >
+        <div class="field-message" *ngIf="error.passwordStrength"
+          >Your password must have lower case, upper case and numeric
+          characters.</div
+        >
+      </ng-container>
 
       <button
         mat-raised-button
diff --git a/src/app/pipes/only-one-error.pipe.ts b/src/app/pipes/only-one-error.pipe.ts
new file mode 100644
index 0000000..89d7e7c
--- /dev/null
+++ b/src/app/pipes/only-one-error.pipe.ts
@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: "onlyOneError",
+})
+export class OnlyOneErrorPipe implements PipeTransform {
+  transform(allErrors: any, errorsPriority: string[]): any {
+    if (!allErrors) {
+      return null;
+    }
+    const onlyOneError: any = {};
+
+    for (let error of errorsPriority) {
+      if (allErrors[error]) {
+        onlyOneError[error] = allErrors[error];
+        break;
+      }
+    }
+
+    return onlyOneError;
+  }
+}

From 654716d6b1b875e3b09bd1753ba700f14e403d66 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Tue, 5 Nov 2024 10:12:36 -0300
Subject: [PATCH 10/15] create fisrt step of reactive form group

---
 src/app/app-routing.module.ts                 |  3 +-
 src/app/app.module.ts                         |  2 +-
 .../login-reactive.component.html             | 36 +++++++++++--------
 .../login-reactive.component.ts               | 33 ++++++++---------
 src/app/login/login.component.html            |  2 +-
 5 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7da2a6b..68a3bb1 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ import {CourseComponent} from './course/course.component';
 import {courseResolver} from './services/course.resolver';
 import {LoginComponent} from './login/login.component';
 import {CreateCourseComponent} from './create-course/create-course.component';
+import { LoginReactiveComponent } from './login-reactive/login-reactive.component';
 
 const routes: Routes = [
   {
@@ -30,7 +31,7 @@ const routes: Routes = [
   },
   {
     path: 'login',
-    component: LoginComponent
+    component: LoginReactiveComponent
   },
   {
     path: '**',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 919d953..538ec82 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,7 +27,7 @@ import { MatToolbarModule } from "@angular/material/toolbar";
 import {CoursesService} from "./services/courses.service";
 import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
 import { CourseDialogComponent } from './course-dialog/course-dialog.component';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {LoginComponent} from './login/login.component';
 import { CreateCourseComponent } from './create-course/create-course.component';
 import {MatNativeDateModule} from '@angular/material/core';
diff --git a/src/app/login-reactive/login-reactive.component.html b/src/app/login-reactive/login-reactive.component.html
index 4e9b389..94975a3 100644
--- a/src/app/login-reactive/login-reactive.component.html
+++ b/src/app/login-reactive/login-reactive.component.html
@@ -1,27 +1,35 @@
 <mat-card class="login-page">
   <mat-card-title>Login (Reactive)</mat-card-title>
   <mat-card-content>
-
-    <form class="login-form data-form">
-
+    <form class="login-form data-form" [formGroup]="form">
       <mat-form-field>
-
-        <input matInput type="email" name="email"
-               placeholder="Email">
-
+        <input
+          matInput
+          type="email"
+          name="email"
+          placeholder="Email"
+          formControlName="email"
+        />
       </mat-form-field>
 
       <mat-form-field>
-
-        <input matInput type="password" placeholder="Password">
-
+        <input
+          matInput
+          type="password"
+          placeholder="Password"
+          formControlName="password"
+        />
       </mat-form-field>
 
-      <button mat-raised-button color="primary">
-        Login
-      </button>
-
+      <button mat-raised-button color="primary">Login</button>
     </form>
 
+    <div class="form-val">
+      {{ form.value | json }}
+    </div>
+
+    <div class="form-val">
+      {{ form.valid | json }}
+    </div>
   </mat-card-content>
 </mat-card>
diff --git a/src/app/login-reactive/login-reactive.component.ts b/src/app/login-reactive/login-reactive.component.ts
index c73b78a..fe286c6 100644
--- a/src/app/login-reactive/login-reactive.component.ts
+++ b/src/app/login-reactive/login-reactive.component.ts
@@ -1,21 +1,22 @@
-import { Component, OnInit } from '@angular/core';
-
+import { Component, OnInit } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 
 @Component({
-  selector: 'login',
-  templateUrl: './login-reactive.component.html',
-  styleUrls: ['./login-reactive.component.css']
+  selector: "login",
+  templateUrl: "./login-reactive.component.html",
+  styleUrls: ["./login-reactive.component.css"],
 })
 export class LoginReactiveComponent implements OnInit {
-
-
-  constructor() {
-
-
-  }
-
-  ngOnInit() {
-
-  }
-
+  form = new FormGroup({
+    email: new FormControl("", {
+      validators: [Validators.required, Validators.email],
+    }),
+    password: new FormControl("",{
+      validators: [Validators.required, Validators.minLength(8)],
+    }),
+  });
+
+  constructor() {}
+
+  ngOnInit() {}
 }
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index b47b99e..c4104ae 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -1,5 +1,5 @@
 <mat-card class="login-page">
-  <mat-card-title>Login</mat-card-title>
+  <mat-card-title>Login (Template-Driven-Form)</mat-card-title>
   <mat-card-content>
     <form
       class="login-form data-form"

From 4949d40c12e7ce72ce2f3910c69a571c464def56 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Tue, 5 Nov 2024 11:36:06 -0300
Subject: [PATCH 11/15] create reactive form build API

---
 .../login-reactive.component.ts               | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app/login-reactive/login-reactive.component.ts b/src/app/login-reactive/login-reactive.component.ts
index fe286c6..2f4f90a 100644
--- a/src/app/login-reactive/login-reactive.component.ts
+++ b/src/app/login-reactive/login-reactive.component.ts
@@ -1,5 +1,11 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from "@angular/forms";
+import { createPasswordStrengthValidator } from "../validators/password-strength.validator";
 
 @Component({
   selector: "login",
@@ -7,16 +13,22 @@ import { FormControl, FormGroup, Validators } from "@angular/forms";
   styleUrls: ["./login-reactive.component.css"],
 })
 export class LoginReactiveComponent implements OnInit {
-  form = new FormGroup({
-    email: new FormControl("", {
+  form = this.fb.group({
+    email: ["",{
       validators: [Validators.required, Validators.email],
-    }),
-    password: new FormControl("",{
-      validators: [Validators.required, Validators.minLength(8)],
-    }),
+      updateOn: "blur",
+    }],
+    password: [
+      "",
+      [
+        Validators.required,
+        Validators.minLength(8),
+        createPasswordStrengthValidator(),
+      ],
+    ],
   });
 
-  constructor() {}
+  constructor(private fb: FormBuilder) {}
 
   ngOnInit() {}
 }

From 6b244ada120f5a89220ebbeaff76f18db93e664e Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Wed, 6 Nov 2024 09:58:24 -0300
Subject: [PATCH 12/15] login reactive form

---
 .../login-reactive.component.css              |  5 ++++
 .../login-reactive.component.html             | 30 ++++++++++++++++++-
 .../login-reactive.component.ts               | 12 ++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/src/app/login-reactive/login-reactive.component.css b/src/app/login-reactive/login-reactive.component.css
index a780a9f..c3d8164 100644
--- a/src/app/login-reactive/login-reactive.component.css
+++ b/src/app/login-reactive/login-reactive.component.css
@@ -14,5 +14,10 @@
   border-bottom: 1px solid grey;
   margin-bottom: 10px;
 }
+.field-message {
+  color: red; /* Example styling */
+  font-size: 12px;
+  margin-top: 5px;
+}
 
 
diff --git a/src/app/login-reactive/login-reactive.component.html b/src/app/login-reactive/login-reactive.component.html
index 94975a3..0341b1f 100644
--- a/src/app/login-reactive/login-reactive.component.html
+++ b/src/app/login-reactive/login-reactive.component.html
@@ -10,6 +10,20 @@
           placeholder="Email"
           formControlName="email"
         />
+
+        <mat-error *ngIf="email.errors?.required"
+          >The email is mandatory.</mat-error
+        >
+
+        <mat-error *ngIf="email.errors?.minlength">
+          Your email must have minimum
+          {{ email.errors?.minlength.requiredLength }} chars, but it only has
+          {{ email.errors?.minlength.actualLength }}.
+        </mat-error>
+
+        <mat-error *ngIf="email.errors?.email"
+          >The email is not a valid email.</mat-error
+        >
       </mat-form-field>
 
       <mat-form-field>
@@ -19,9 +33,23 @@
           placeholder="Password"
           formControlName="password"
         />
+
+        <mat-error *ngIf="password.errors?.required"
+          >The password is mandatory</mat-error
+        >
       </mat-form-field>
 
-      <button mat-raised-button color="primary">Login</button>
+      <ng-container
+        *ngIf="password.errors | onlyOneError : ['passwordStrength'] as error"
+      >
+        <div class="field-message" *ngIf="error.passwordStrength">
+          Your password must have lower case, upper case and numeric characters.
+        </div>
+      </ng-container>
+
+      <button mat-raised-button color="primary" [disabled]="!form.valid">
+        Login
+      </button>
     </form>
 
     <div class="form-val">
diff --git a/src/app/login-reactive/login-reactive.component.ts b/src/app/login-reactive/login-reactive.component.ts
index 2f4f90a..28adbb8 100644
--- a/src/app/login-reactive/login-reactive.component.ts
+++ b/src/app/login-reactive/login-reactive.component.ts
@@ -31,4 +31,16 @@ export class LoginReactiveComponent implements OnInit {
   constructor(private fb: FormBuilder) {}
 
   ngOnInit() {}
+
+  get email(){
+    return this.form.controls['email'];
+  }
+
+  get password(){
+    return this.form.controls['password'];
+  }
+
+  onSubmit() {
+    console.log(this.form.value);
+  }
 }

From 24bc9007f1af0e94ec16894397771ad58759eaa4 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Wed, 6 Nov 2024 10:38:12 -0300
Subject: [PATCH 13/15] Non nullable form builder

---
 .../login-reactive.component.html             |  5 ++++
 .../login-reactive.component.ts               | 28 ++++++++++++-------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/app/login-reactive/login-reactive.component.html b/src/app/login-reactive/login-reactive.component.html
index 0341b1f..def85f8 100644
--- a/src/app/login-reactive/login-reactive.component.html
+++ b/src/app/login-reactive/login-reactive.component.html
@@ -50,6 +50,11 @@
       <button mat-raised-button color="primary" [disabled]="!form.valid">
         Login
       </button>
+
+      <button mat-raised-button color="primary" (click)="reset()">
+        Reset
+      </button>
+
     </form>
 
     <div class="form-val">
diff --git a/src/app/login-reactive/login-reactive.component.ts b/src/app/login-reactive/login-reactive.component.ts
index 28adbb8..651c3df 100644
--- a/src/app/login-reactive/login-reactive.component.ts
+++ b/src/app/login-reactive/login-reactive.component.ts
@@ -3,6 +3,7 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
+  NonNullableFormBuilder,
   Validators,
 } from "@angular/forms";
 import { createPasswordStrengthValidator } from "../validators/password-strength.validator";
@@ -14,10 +15,13 @@ import { createPasswordStrengthValidator } from "../validators/password-strength
 })
 export class LoginReactiveComponent implements OnInit {
   form = this.fb.group({
-    email: ["",{
-      validators: [Validators.required, Validators.email],
-      updateOn: "blur",
-    }],
+    email: [
+      "",
+      {
+        validators: [Validators.required, Validators.email],
+        updateOn: "blur",
+      },
+    ],
     password: [
       "",
       [
@@ -28,19 +32,23 @@ export class LoginReactiveComponent implements OnInit {
     ],
   });
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private fb: NonNullableFormBuilder) {}
 
   ngOnInit() {}
 
-  get email(){
-    return this.form.controls['email'];
+  get email() {
+    return this.form.controls["email"];
   }
 
-  get password(){
-    return this.form.controls['password'];
+  get password() {
+    return this.form.controls["password"];
   }
 
-  onSubmit() {
+  login() {}
+
+  reset() {
+    this.form.reset();
+
     console.log(this.form.value);
   }
 }

From 0bd0c405a9757f44a4e308f82c1cbff2759c6768 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Wed, 6 Nov 2024 11:08:36 -0300
Subject: [PATCH 14/15] create course components with reactive forms

---
 .../create-course/create-course.component.html    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/app/create-course/create-course.component.html b/src/app/create-course/create-course.component.html
index 6bfb728..da414ff 100644
--- a/src/app/create-course/create-course.component.html
+++ b/src/app/create-course/create-course.component.html
@@ -1,8 +1,17 @@
-
 <div class="create-course-panel data-form">
-
   <h2 class="title">Create New Course</h2>
 
-</div>
+  <mat-horizontal-stepper class="mat-elevation-z5" labelPosition="bottom">
+    <mat-step>
+      <ng-template matStepLabel>course landing page details</ng-template>
 
+      <create-course-step-1></create-course-step-1>
 
+      <div class="stepper-buttons">
+        <button mat-raised-button color="primary" matStepperNext>
+          Continue to Step 2
+        </button>
+      </div>
+    </mat-step>
+  </mat-horizontal-stepper>
+</div>

From 7a0136149dadeedaa85638dd854723cc54932087 Mon Sep 17 00:00:00 2001
From: Gisela Lanciani <giselalanciani@gmail.com>
Date: Wed, 6 Nov 2024 14:57:49 -0300
Subject: [PATCH 15/15] create multi steps reactive forms

---
 .../create-course-step-1.component.html       | 13 +++++++++
 .../create-course-step-1.component.ts         | 27 +++++++++++--------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/app/create-course/create-course-step-1/create-course-step-1.component.html b/src/app/create-course/create-course-step-1/create-course-step-1.component.html
index e69de29..fcfd83b 100644
--- a/src/app/create-course/create-course-step-1/create-course-step-1.component.html
+++ b/src/app/create-course/create-course-step-1/create-course-step-1.component.html
@@ -0,0 +1,13 @@
+<div [formGroup]="form">
+
+  <mat-form-field>
+
+    <input matInput placeholder="Course title" formControlName="title" #title >
+
+    <mat-hint align="end">
+      {{title.value.length}} / 60
+    </mat-hint>
+
+  </mat-form-field>
+
+</div>
diff --git a/src/app/create-course/create-course-step-1/create-course-step-1.component.ts b/src/app/create-course/create-course-step-1/create-course-step-1.component.ts
index 42ecaad..6bdf364 100644
--- a/src/app/create-course/create-course-step-1/create-course-step-1.component.ts
+++ b/src/app/create-course/create-course-step-1/create-course-step-1.component.ts
@@ -1,18 +1,23 @@
-import {Component, OnInit} from '@angular/core';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {CoursesService} from '../../services/courses.service';
-import {Observable} from 'rxjs';
-import {filter} from 'rxjs/operators';
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { CoursesService } from "../../services/courses.service";
+import { Observable } from "rxjs";
+import { filter } from "rxjs/operators";
 
 @Component({
-  selector: 'create-course-step-1',
-  templateUrl: './create-course-step-1.component.html',
-  styleUrls: ['./create-course-step-1.component.scss']
+  selector: "create-course-step-1",
+  templateUrl: "./create-course-step-1.component.html",
+  styleUrls: ["./create-course-step-1.component.scss"],
 })
 export class CreateCourseStep1Component implements OnInit {
+  form = this.fb.group({
+    title: [
+      "",
+      [Validators.required, Validators.minLength(5), Validators.maxLength(60)],
+    ],
+  });
 
-  ngOnInit() {
-
-  }
+  constructor(private fb: FormBuilder) {}
 
+  ngOnInit() {}
 }