Merge pull request #19 from CerealKiller97/dev

Validation errors FIXED

src/app/modules/contact/components/contact/contact.component.html

@@ -57,66 +57,62 @@ <h1 class="light-text text-center">Contact</h1>
     <mat-toolbar>
       <h1 class="light-text text-center">Contact</h1>
     </mat-toolbar>
-    <!--Grid column-->
     <div class="col-lg-12">
       <form [formGroup]="contactForm">
-
-        <!--Grid row-->
         <div class="row">
-
-          <!--Grid column-->
           <div class="col">
             <div class="mx-5 my-5">
               <mat-form-field>
                 <input matInput formControlName="name" placeholder="Enter your name..." />
-                <span *ngIf="!contactForm.get('name').valid && contactForm.get('name').touched">Name field is
-                  required.</span>
+                <mat-error *ngIf="!contactForm.get('name').valid && contactForm.get('name').touched">
+                  Name is required.
+                </mat-error>
               </mat-form-field>
             </div>
           </div>
-          <!--Grid column-->
-
-          <!--Grid column-->
           <div class="col-md-6">
             <div class="col">
               <div class="mx-5 my-5">
                 <mat-form-field>
                   <input matInput formControlName="email" placeholder="Enter your email..." />
-                  <span *ngIf="!contactForm.get('email').valid && contactForm.get('email').touched">Email field is
-                    required.</span>
+
+                  <mat-error *ngIf="!contactForm.get('email').valid && contactForm.get('email').touched">
+                    Email is
+                    required.
+                  </mat-error>
+
+                  <mat-error *ngIf="contactForm.get('email').valid && !contactForm.hasError('required')">
+                    Please enter a valid email address
+                  </mat-error>
                 </mat-form-field>
               </div>
             </div>
           </div>
-          <!--Grid column-->
-
         </div>
-        <!--Grid row-->
-
-        <!--Grid row-->
         <div class="row">
-
           <div class="col">
             <div class="mx-5 my-5">
               <mat-form-field>
                 <input matInput formControlName="subject" placeholder="Enter your subject..." />
-                <span *ngIf="!contactForm.get('subject').valid && contactForm.get('subject').touched">Subject field is
-                  required.</span>
+                <span *ngIf="!contactForm.get('subject').valid && contactForm.get('subject').touched"></span>
+                <mat-error *ngIf="!contactForm.get('subject').valid && contactForm.get('subject').touched">
+                  Subject is
+                  required.
+                </mat-error>
               </mat-form-field>
             </div>
           </div>
-
           <div class="col-md-6">
-
             <div class="col">
               <div class="mx-5 my-5">
                 <mat-form-field>
                   <textarea matInput formControlName="body" placeholder="Message body..."></textarea>
-                  <span *ngIf="!contactForm.get('body').valid && contactForm.get('body').touched">Body field is
-                    required.</span>
+                  <mat-error *ngIf="!contactForm.get('body').valid && contactForm.get('body').touched">
+                    Message is
+                    required.
+                  </mat-error>
                 </mat-form-field>
               </div>
-
             </div>
           </div>
         </div>

src/app/modules/contact/components/contact/contact.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { LoadingService } from '../../../shared/services/loading/loading.service';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
-import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-contact',
@@ -53,8 +53,8 @@ export class ContactComponent implements OnInit {
 
   public onSubmitContactForm(): void {
     if (this.contactForm.invalid) {
-      console.log(this.contactForm.errors);
       console.log('errors');
+      console.log(this.contactForm.errors);
       this.openErrorSnackBar();
       // show errors
       // snack bar error

src/app/modules/errors/components/errors/errors.component.html

@@ -1,13 +1,17 @@
-<mat-grid-list cols="1" rowHeight="500">
+<mat-grid-list cols="1" rowHeight="550">
   <mat-grid-tile>
     <div class="container my-5 mx-5">
       <div class="row">
         <div class="col-md-6 offset-md-3">
-          <h1 class="light-text">Ooops looks you got lost :( 404 page</h1>
-          <button mat-raised-button (click)="goBack();">Go back</button>
+          <h1 class="light-text">Ooops looks you got lost :( </h1>
+          <button mat-raised-button (click)="goBack();">
+            <span>
+              Go back to
+            </span>
+            <mat-icon>home</mat-icon>
+          </button>
         </div>
       </div>
     </div>
-
   </mat-grid-tile>
 </mat-grid-list>

src/app/modules/errors/components/errors/errors.component.ts

@@ -1,18 +1,17 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-errors',
   templateUrl: './errors.component.html',
   styleUrls: ['./errors.component.css']
 })
 export class ErrorsComponent implements OnInit {
-  constructor() {}
+  constructor(private readonly router: Router) {}
 
   ngOnInit() {}
 
-  // gaming/contact
-
   public goBack(): void {
-    history.back();
+    this.router.navigate(['']);
   }
 }

src/app/modules/errors/errors.module.ts

@@ -2,8 +2,10 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
 import { RouterModule, Routes } from '@angular/router';
 import { ErrorsComponent } from './components/errors/errors.component';
+
 const routes: Routes = [
   {
     path: '',
@@ -14,7 +16,7 @@ const routes: Routes = [
 
 @NgModule({
   declarations: [ErrorsComponent],
-  imports: [CommonModule, RouterModule.forChild(routes), MatGridListModule, MatButtonModule],
+  imports: [CommonModule, RouterModule.forChild(routes), MatGridListModule, MatButtonModule, MatIconModule],
   exports: [ErrorsComponent, RouterModule, MatGridListModule, MatButtonModule]
 })
 export class ErrorsModule {}

src/app/modules/shared-components/components/bug-report-dialog/bug-report-dialog.component.html

@@ -1,15 +1,20 @@
 <h1 mat-dialog-title class="text-center">Bug Report</h1>
-<div mat-dialog-content class="text-center">
+<div mat-dialog-content class="text-center my-3">
   <form class="example-form" [formGroup]="bugReportForm">
-    <mat-form-field class="example-full-width">
-      <input matInput placeholder="Enter your full name..." formControlName="fullName" />
-      <span *ngIf="!bugReportForm.get('fullName').valid && bugReportForm.get('fullName').touched">Full name is
-        required.</span>
+    <mat-form-field class="example-full-width my-3">
+      <input matInput placeholder="Enter your name..." formControlName="fullName" />
+      <mat-error *ngIf="!bugReportForm.get('fullName').valid && bugReportForm.get('fullName').touched">
+        Name is
+        required.
+      </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="example-full-width">
+    <mat-form-field class="example-full-width my-3">
       <textarea matInput placeholder="Report a bug..." formControlName="bug"></textarea>
-      <span *ngIf="!bugReportForm.get('bug').valid && bugReportForm.get('bug').touched">Bug field is required.</span>
+      <mat-error *ngIf="!bugReportForm.get('bug').valid && bugReportForm.get('bug').touched">
+        Bug is
+        required.
+      </mat-error>
     </mat-form-field>
   </form>
 

src/app/modules/shared-components/components/footer/footer.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
@@ -9,14 +9,19 @@ import { ActivatedRoute, Router } from '@angular/router';
 export class FooterComponent implements OnInit {
   public shouldBeFixed: boolean;
 
-  constructor(private readonly route: ActivatedRoute, private readonly router: Router) {}
+  constructor(private readonly router: Router) {}
 
-  ngOnInit() {
-    let url: string;
+  ngOnInit(): void {
+    this.handleFixedFooter();
+  }
+
+  private handleFixedFooter(): void {
     if (this.router.routerState.snapshot.url === '/gaming/contact') {
       this.shouldBeFixed = true;
     } else if (this.router.routerState.snapshot.url === '/contact') {
       this.shouldBeFixed = true;
+    } else if (this.router.routerState.snapshot.url.startsWith('/contact/contact')) {
+      this.shouldBeFixed = true;
     }
   }
 }