From 150b7663b9fb8359436fa261a93c2b6ef88b5ec7 Mon Sep 17 00:00:00 2001
From: Bruno Santos <38787235+bsp982@users.noreply.github.com>
Date: Sun, 31 Mar 2024 20:02:09 -0300
Subject: [PATCH] feat: Implement validations in the login form

---
 .../default-login-layout.component.html       |  15 ++-
 .../default-login-layout.component.ts         |   1 -
 .../primary-input.component.html              |  10 +-
 .../primary-input/primary-input.component.ts  |   1 -
 src/app/pages/login/login.component.html      |  39 +++---
 src/app/pages/login/login.component.scss      |  31 +++--
 src/app/pages/login/login.component.ts        |  98 ++++++++-------
 src/app/pages/signup/signup.component.html    |  63 +++++-----
 src/app/pages/signup/signup.component.scss    |   9 +-
 src/app/pages/signup/signup.component.ts      | 116 ++++++++++--------
 10 files changed, 217 insertions(+), 166 deletions(-)

diff --git a/src/app/components/default-login-layout/default-login-layout.component.html b/src/app/components/default-login-layout/default-login-layout.component.html
index 664a3e4..066989e 100644
--- a/src/app/components/default-login-layout/default-login-layout.component.html
+++ b/src/app/components/default-login-layout/default-login-layout.component.html
@@ -1,13 +1,12 @@
 <main>
     <section class="form-section">
         <img src="/assets/svg/logo.svg"/>
-       <h2>{{ title }}</h2>
-       <ng-content></ng-content>
-       <div class="btn-wrapper">
-            <button 
-                class="btn-primary" 
-                (click)="submit()"
-                [disabled]="disablePrimaryBtn"
+        <h2>{{ title }}</h2>
+        <ng-content></ng-content>
+        <div class="btn-wrapper">
+            <button
+                    class="btn-primary"
+                    (click)="submit()"
             >
                 {{ primaryBtnText }}
             </button>
@@ -17,7 +16,7 @@ <h2>{{ title }}</h2>
                 <div></div>
             </div>
             <button class="btn-secondary" (click)="navigate()">{{ secondaryBtnText }}</button>
-       </div>
+        </div>
     </section>
     <section class="main-section">
         <h1>You Should, MoveIt!</h1>
diff --git a/src/app/components/default-login-layout/default-login-layout.component.ts b/src/app/components/default-login-layout/default-login-layout.component.ts
index 632d547..f4d944c 100644
--- a/src/app/components/default-login-layout/default-login-layout.component.ts
+++ b/src/app/components/default-login-layout/default-login-layout.component.ts
@@ -11,7 +11,6 @@ export class DefaultLoginLayoutComponent {
   @Input() title: string = "";
   @Input() primaryBtnText: string = "";
   @Input() secondaryBtnText: string = "";
-  @Input() disablePrimaryBtn: boolean = true;
   @Output("submit") onSubmit = new EventEmitter();
 
   @Output("navigate") onNavigate = new EventEmitter();
diff --git a/src/app/components/primary-input/primary-input.component.html b/src/app/components/primary-input/primary-input.component.html
index 66e77d9..42da3ad 100644
--- a/src/app/components/primary-input/primary-input.component.html
+++ b/src/app/components/primary-input/primary-input.component.html
@@ -1,11 +1,11 @@
 <div class="input-wrapper">
     <label [for]="inputName">{{ label }}</label>
     <div class="input-content">
-        <input 
-            [type]="type" 
-            [placeholder]="placeholder"
-            [value]="value"
-            (input)="onInput($event)"
+        <input
+                [type]="type"
+                [placeholder]="placeholder"
+                [value]="value"
+                (input)="onInput($event)"
         />
         <div class="icon">
             <ng-content></ng-content>
diff --git a/src/app/components/primary-input/primary-input.component.ts b/src/app/components/primary-input/primary-input.component.ts
index 6fe274a..8d788a0 100644
--- a/src/app/components/primary-input/primary-input.component.ts
+++ b/src/app/components/primary-input/primary-input.component.ts
@@ -46,5 +46,4 @@ export class PrimaryInputComponent implements ControlValueAccessor {
     this.onTouched = fn
   }
 
-  setDisabledState(isDisabled: boolean): void {}
 }
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index 03452c5..83f2cd5 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -1,29 +1,30 @@
 <app-default-login-layout
-    title="Login into your account"
-    primaryBtnText="Login Now"
-    secondaryBtnText="Signup Now"
-    (submit)="submit()"
-    (navigate)="navigate()"
-    [disablePrimaryBtn]="!loginForm.valid"
+        title="Login into your account"
+        primaryBtnText="Login Now"
+        secondaryBtnText="Signup Now"
+        (submit)="submit()"
+        (navigate)="navigate()"
 >
     <form [formGroup]="loginForm">
         <app-primary-input
-            formControlName="email"
-            inputName="email"
-            type="email"
-            label="Email"
-            placeholder="johndoe@gmail.com"
+                formControlName="email"
+                inputName="email"
+                type="email"
+                label="Email"
+                placeholder="johndoe@gmail.com"
         >
             <img src="/assets/svg/email-icon.svg"/>
         </app-primary-input>
+
         <app-primary-input
-            formControlName="password"
-            inputName="password"
-            type="password"
-            label="Your Password"
-        >
-        <img src="/assets/svg/password-icon.svg"/>
-    </app-primary-input>
-    <span>Forgot password?</span>
+                formControlName="password"
+                inputName="password"
+                type="password"
+                label="Your Password">
+            <img src="/assets/svg/password-icon.svg"/>
+        </app-primary-input>
+        <div class="mensage-error-class" *ngIf="showErroMenssage">* Fill in the email and password correctly</div>
+
+        <span>Forgot password?</span>
     </form>
 </app-default-login-layout>
\ No newline at end of file
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index 3120102..2a14385 100644
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -1,16 +1,23 @@
 @import "../../../styles/variables.scss";
 
 form {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    margin-bottom: 34px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  margin-bottom: 34px;
 
-    span {
-        font-size: 14px;
-        text-decoration: underline;
-        color: $secondary-color;
-        text-align: end;
-    }
-}
\ No newline at end of file
+  span {
+    font-size: 14px;
+    text-decoration: underline;
+    color: $secondary-color;
+    text-align: end;
+  }
+
+  .mensage-error-class {
+    margin-top: -15px;
+    padding-left: 5px;
+    font-size: smaller;
+    color: red;
+  }
+}
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index 16da324..ff27eda 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -1,52 +1,68 @@
-import { Component } from '@angular/core';
-import { DefaultLoginLayoutComponent } from '../../components/default-login-layout/default-login-layout.component';
-import { FormControl, FormGroup, FormRecord, ReactiveFormsModule, Validators } from '@angular/forms';
-import { PrimaryInputComponent } from '../../components/primary-input/primary-input.component';
-import { Router } from '@angular/router';
-import { LoginService } from '../../services/login.service';
-import { ToastrService } from 'ngx-toastr';
+import {Component} from '@angular/core';
+import {DefaultLoginLayoutComponent} from '../../components/default-login-layout/default-login-layout.component';
+import {FormControl, FormControlStatus, FormGroup, FormRecord, ReactiveFormsModule, Validators} from '@angular/forms';
+import {PrimaryInputComponent} from '../../components/primary-input/primary-input.component';
+import {Router} from '@angular/router';
+import {LoginService} from '../../services/login.service';
+import {ToastrService} from 'ngx-toastr';
+import {NgIf} from "@angular/common";
 
 interface LoginForm {
-  email: FormControl,
-  password: FormControl
+    email: FormControl,
+    password: FormControl
 }
 
 @Component({
-  selector: 'app-login',
-  standalone: true,
-  imports: [
-    DefaultLoginLayoutComponent,
-    ReactiveFormsModule,
-    PrimaryInputComponent
-  ],
-  providers: [
-    LoginService
-  ],
-  templateUrl: './login.component.html',
-  styleUrl: './login.component.scss'
+    selector: 'app-login',
+    standalone: true,
+    imports: [
+        DefaultLoginLayoutComponent,
+        ReactiveFormsModule,
+        PrimaryInputComponent,
+        NgIf
+    ],
+    providers: [
+        LoginService
+    ],
+    templateUrl: './login.component.html',
+    styleUrl: './login.component.scss'
 })
 export class LoginComponent {
-  loginForm!: FormGroup<LoginForm>;
+    loginForm!: FormGroup<LoginForm>;
+    showErroMenssage: boolean = false;
 
-  constructor(
-    private router: Router,
-    private loginService: LoginService,
-    private toastService: ToastrService
-  ){
-    this.loginForm = new FormGroup({
-      email: new FormControl('', [Validators.required, Validators.email]),
-      password: new FormControl('', [Validators.required, Validators.minLength(6)])
-    })
-  }
+    constructor(
+        private router: Router,
+        private loginService: LoginService,
+        private toastService: ToastrService
+    ) {
+        this.loginForm = new FormGroup({
+            email: new FormControl('', [Validators.required, Validators.email]),
+            password: new FormControl('', [Validators.required, Validators.minLength(6)])
+        })
+    }
 
-  submit(){
-    this.loginService.login(this.loginForm.value.email, this.loginForm.value.password).subscribe({
-      next: () => this.toastService.success("Login feito com sucesso!"),
-      error: () => this.toastService.error("Erro inesperado! Tente novamente mais tarde")
-    })
-  }
+    submit() {
+        if (this.validate()) {
+            this.loginService.login(this.loginForm.value.email, this.loginForm.value.password).subscribe({
+                next: () => this.toastService.success("Login feito com sucesso!"),
+                error: () => this.toastService.error("Erro inesperado! Tente novamente mais tarde")
+            })
+        }
+    }
 
-  navigate(){
-    this.router.navigate(["signup"])
-  }
+    validate() {
+        if (this.loginForm.status == 'VALID') {
+            this.showErroMenssage = false;
+            return true;
+        } else {
+            this.showErroMenssage = true;
+            return false;
+        }
+    }
+
+
+    navigate() {
+        this.router.navigate(["signup"])
+    }
 }
diff --git a/src/app/pages/signup/signup.component.html b/src/app/pages/signup/signup.component.html
index 1af871c..4ee6e5e 100644
--- a/src/app/pages/signup/signup.component.html
+++ b/src/app/pages/signup/signup.component.html
@@ -1,45 +1,48 @@
 <app-default-login-layout
-    title="Sign in and start today!t"
-    primaryBtnText="Signup Now"
-    secondaryBtnText="Login Now"
-    (submit)="submit()"
-    (navigate)="navigate()"
-    [disablePrimaryBtn]="!signupForm.valid"
+        title="Sign in and start today!t"
+        primaryBtnText="Signup Now"
+        secondaryBtnText="Login Now"
+        (submit)="submit()"
+        (navigate)="navigate()"
 >
     <form [formGroup]="signupForm">
         <app-primary-input
-            formControlName="name"
-            inputName="name"
-            type="text"
-            label="Your name"
-            placeholder="John Doe"
+                formControlName="name"
+                inputName="name"
+                type="text"
+                label="Your name"
+                placeholder="John Doe"
         >
             <img src="/assets/svg/email-icon.svg"/>
         </app-primary-input>
         <app-primary-input
-            formControlName="email"
-            inputName="email"
-            type="email"
-            label="Email"
-            placeholder="johndoe@gmail.com"
+                formControlName="email"
+                inputName="email"
+                type="email"
+                label="Email"
+                placeholder="johndoe@gmail.com"
         >
             <img src="/assets/svg/email-icon.svg"/>
         </app-primary-input>
+        <div class="mensage-error-class" *ngIf="showMenssageErrorEmail">* Fill in the email correctly</div>
+
         <app-primary-input
-            formControlName="password"
-            inputName="password"
-            type="password"
-            label="Your Password"
+                formControlName="password"
+                inputName="password"
+                type="password"
+                label="Your Password"
         >
-        <img src="/assets/svg/password-icon.svg"/>
-    </app-primary-input>
-    <app-primary-input
-        formControlName="passwordConfirm"
-        inputName="passwordConfirm"
-        type="password"
-        label="Confirm your Password"
-    >
-        <img src="/assets/svg/password-icon.svg"/>
-    </app-primary-input>
+            <img src="/assets/svg/password-icon.svg"/>
+        </app-primary-input>
+        <app-primary-input
+                formControlName="passwordConfirm"
+                inputName="passwordConfirm"
+                type="password"
+                label="Confirm your Password"
+        >
+            <img src="/assets/svg/password-icon.svg"/>
+        </app-primary-input>
+        <div class="mensage-error-class" *ngIf="showMenssageErrorPassword">* password correctly</div>
+
     </form>
 </app-default-login-layout>
\ No newline at end of file
diff --git a/src/app/pages/signup/signup.component.scss b/src/app/pages/signup/signup.component.scss
index 3120102..eb0bbc3 100644
--- a/src/app/pages/signup/signup.component.scss
+++ b/src/app/pages/signup/signup.component.scss
@@ -13,4 +13,11 @@ form {
         color: $secondary-color;
         text-align: end;
     }
-}
\ No newline at end of file
+
+    .mensage-error-class {
+        margin-top: -15px;
+        padding-left: 5px;
+        font-size: smaller;
+        color: red;
+    }
+}
diff --git a/src/app/pages/signup/signup.component.ts b/src/app/pages/signup/signup.component.ts
index 9fe0a1e..9bfa3c6 100644
--- a/src/app/pages/signup/signup.component.ts
+++ b/src/app/pages/signup/signup.component.ts
@@ -1,56 +1,76 @@
-import { Component } from '@angular/core';
-import { DefaultLoginLayoutComponent } from '../../components/default-login-layout/default-login-layout.component';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { PrimaryInputComponent } from '../../components/primary-input/primary-input.component';
-import { Router } from '@angular/router';
-import { LoginService } from '../../services/login.service';
-import { ToastrService } from 'ngx-toastr';
+import {Component} from '@angular/core';
+import {DefaultLoginLayoutComponent} from '../../components/default-login-layout/default-login-layout.component';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
+import {PrimaryInputComponent} from '../../components/primary-input/primary-input.component';
+import {Router} from '@angular/router';
+import {LoginService} from '../../services/login.service';
+import {ToastrService} from 'ngx-toastr';
+import {NgIf} from "@angular/common";
 
 interface SignupForm {
-  name: FormControl,
-  email: FormControl,
-  password: FormControl,
-  passwordConfirm: FormControl
+    name: FormControl,
+    email: FormControl,
+    password: FormControl,
+    passwordConfirm: FormControl
 }
 
 @Component({
-  selector: 'app-signup',
-  standalone: true,
-  imports: [
-    DefaultLoginLayoutComponent,
-    ReactiveFormsModule,
-    PrimaryInputComponent
-  ],
-  providers: [
-    LoginService
-  ],
-  templateUrl: './signup.component.html',
-  styleUrl: './signup.component.scss'
+    selector: 'app-signup',
+    standalone: true,
+    imports: [
+        DefaultLoginLayoutComponent,
+        ReactiveFormsModule,
+        PrimaryInputComponent,
+        NgIf
+    ],
+    providers: [
+        LoginService
+    ],
+    templateUrl: './signup.component.html',
+    styleUrl: './signup.component.scss'
 })
 export class SignUpComponent {
-  signupForm!: FormGroup<SignupForm>;
-
-  constructor(
-    private router: Router,
-    private loginService: LoginService,
-    private toastService: ToastrService
-  ){
-    this.signupForm = new FormGroup({
-      name: new FormControl('', [Validators.required, Validators.minLength(3)]),
-      email: new FormControl('', [Validators.required, Validators.email]),
-      password: new FormControl('', [Validators.required, Validators.minLength(6)]),
-      passwordConfirm: new FormControl('', [Validators.required, Validators.minLength(6)]),
-    })
-  }
-
-  submit(){
-    this.loginService.signup(this.signupForm.value.name, this.signupForm.value.email, this.signupForm.value.password).subscribe({
-      next: () => this.toastService.success("Login feito com sucesso!"),
-      error: () => this.toastService.error("Erro inesperado! Tente novamente mais tarde")
-    })
-  }
-
-  navigate(){
-    this.router.navigate(["login"])
-  }
+    signupForm!: FormGroup<SignupForm>;
+    showMenssageErrorPassword: boolean = false;
+    showMenssageErrorEmail: boolean = false;
+
+
+    constructor(
+        private router: Router,
+        private loginService: LoginService,
+        private toastService: ToastrService
+    ) {
+        this.signupForm = new FormGroup({
+            name: new FormControl('', [Validators.required, Validators.minLength(3)]),
+            email: new FormControl('', [Validators.required, Validators.email]),
+            password: new FormControl('', [Validators.required, Validators.minLength(6)]),
+            passwordConfirm: new FormControl('', [Validators.required, Validators.minLength(6)]),
+        })
+    }
+
+    submit() {
+        if (this.validate()) {
+            this.loginService.signup(this.signupForm.value.name, this.signupForm.value.email, this.signupForm.value.password).subscribe({
+                next: () => this.toastService.success("Login feito com sucesso!"),
+                error: () => this.toastService.error("Erro inesperado! Tente novamente mais tarde")
+            })
+        }
+    }
+
+    validate() {
+        if (this.signupForm.valid) {
+            this.showMenssageErrorPassword = false;
+            this.showMenssageErrorEmail = false;
+            return true;
+        } else {
+            this.showMenssageErrorPassword = this.signupForm.value.password != this.signupForm.value.passwordConfirm;
+            this.showMenssageErrorEmail = (this.signupForm.value.email != "" && !this.signupForm.value.email.includes("@"));
+            return false;
+        }
+    }
+
+
+    navigate() {
+        this.router.navigate(["login"])
+    }
 }