Merge pull request #4 from HackTzi/Login-screen

Login, Home and routes screens

Author: hectorromerodev

src/app/app-routing.module.ts

@@ -1,24 +1,33 @@
 import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
 import { PageNotFoundComponent } from './shared/components';
 
+// Routes
 import { HomeRoutingModule } from './home/home-routing.module';
 
+// Guards
+import { AuthGuard } from './guards/auth.guard';
+
+// Components
+import { AuthComponent } from './auth/auth.component';
+import { MenuComponent } from './menu/menu.component';
+
 const routes: Routes = [
+  { path: 'auth', component: AuthComponent },
   {
-    path: '',
-    redirectTo: 'home',
-    pathMatch: 'full'
+    path: 'app', canActivate: [AuthGuard], component: MenuComponent,
+    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
   },
-  {
-    path: '**',
-    component: PageNotFoundComponent
-  }
+  { path: '', redirectTo: '/app/home', pathMatch: 'full' },
+  { path: '**', component: PageNotFoundComponent, } // Wildcard route for a 404 page
 ];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }),
+    RouterModule.forRoot(routes, {
+      relativeLinkResolution: 'legacy',
+      preloadingStrategy: PreloadAllModules
+    }),
     HomeRoutingModule,
   ],
   exports: [RouterModule]

src/app/app.module.ts

@@ -23,9 +23,11 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 }
 
 import { AngularMaterialModule } from './angular-material.module';
+import { AuthComponent } from './auth/auth.component';
+import { MenuComponent } from './menu/menu.component';
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, AuthComponent, MenuComponent],
   imports: [
     BrowserModule,
     FormsModule,

src/app/auth/auth.component.html

@@ -0,0 +1,18 @@
+<form [formGroup]="authForm">
+  <mat-card>
+    <mat-card-header>
+      <img mat-card-image src="" alt="Photo of platzi logo">
+      <mat-card-title>{{'PAGES.AUTH.TITLE' | translate}}</mat-card-title>
+    </mat-card-header>
+    <mat-card-content style="margin:auto;">
+      <mat-form-field>
+        <input formControlName="username" matInput placeholder="{{'PAGES.AUTH.EMAIL'|translate}}" type="email">
+      </mat-form-field>
+      <mat-form-field>
+        <input formControlName="password" matInput placeholder="{{'PAGES.AUTH.PASSWORD'|translate}}" type="password">
+      </mat-form-field>
+      <button [disabled]="!authForm.valid" color="accent" mat-raised-button (click)="login()">{{'PAGES.AUTH.START'|translate}}</button>
+    </mat-card-content>
+  </mat-card>
+</form>
+

src/app/auth/auth.component.scss

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthComponent } from './auth.component';
+
+describe('AuthComponent', () => {
+  let component: AuthComponent;
+  let fixture: ComponentFixture<AuthComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AuthComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/auth.component.spec.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+	selector: 'app-auth',
+	templateUrl: './auth.component.html',
+	styleUrls: ['./auth.component.scss']
+})
+export class AuthComponent implements OnInit {
+  constructor(
+    @Inject(FormBuilder) fb: FormBuilder,
+    private router: Router
+  ) {
+    this.authForm = fb.group({
+      username: new FormControl({ value: '', disabled: false }, [Validators.required, Validators.email]),
+      password: new FormControl({ value: '', disabled: false }, [Validators.required, Validators.pattern(this.passPattern)])
+    });
+  }
+  authForm: FormGroup;
+  passPattern: RegExp;
+  loading = false;
+
+  ngOnInit(): void { }
+
+  // TODO: Add login call to auth.service
+  login() {
+    this.loading = true;
+    localStorage.setItem('token', 'TOKEN FOR TEST SET IN AUTH COMPONENT');
+
+    this.router.navigate(['/app/home']);
+    setTimeout(() => this.loading = false, 2000); // Quit loading timeout for test
+	}
+
+}

src/app/auth/auth.component.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  let guard: AuthGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(AuthGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/guards/auth.guard.spec.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private router: Router) { }
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    if (localStorage.getItem('token')) {
+      return true;
+    } else {
+      this.router.navigate(['/auth']);
+      return false;
+    }
+  }
+
+}

src/app/guards/auth.guard.ts

@@ -0,0 +1 @@
+<p>agenda works!</p>