Merge pull request #5 from HackTzi/Login-screen

Login screen updated

Author: hectorromerodev

src/app/app.module.ts

@@ -17,6 +17,9 @@ import { HomeModule } from './home/home.module';
 
 import { AppComponent } from './app.component';
 
+// Services
+import { IconSanitizerService } from './services/icon-sanitizer.service';
+
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -48,7 +51,9 @@ import { MenuComponent } from './menu/menu.component';
       }
     })
   ],
-  providers: [],
+  providers: [
+    IconSanitizerService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/auth/auth.component.html

@@ -1,18 +1,32 @@
+<!-- TODO: Here we need to add style to this component -->
+<app-login-banner></app-login-banner>
 <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>
+      <img mat-card-image src="assets/paltzilogo.png" alt="Photo of platzi logo">
+      <mat-card-title>{{ pageName.concat('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">
+        <input formControlName="username" matInput placeholder="{{pageName.concat('EMAIL') | translate}}" type="email">
+        <mat-icon matSuffix svgIcon="metro-mail"></mat-icon>
       </mat-form-field>
       <mat-form-field>
-        <input formControlName="password" matInput placeholder="{{'PAGES.AUTH.PASSWORD'|translate}}" type="password">
+        <input formControlName="password" matInput placeholder="{{pageName.concat('PASSWORD') | translate}}" [type]="hidePassword ? 'password' : 'text'">
+         <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
+          <mat-icon svgIcon="{{ hidePassword ? 'visibility-filled' : 'visibility-filled' }}"></mat-icon>
+        </button>
       </mat-form-field>
-      <button [disabled]="!authForm.valid" color="accent" mat-raised-button (click)="login()">{{'PAGES.AUTH.START'|translate}}</button>
+      <button [disabled]="!authForm.valid" color="accent" mat-raised-button (click)="login()">{{pageName.concat('START') | translate}}</button>
+      <p>{{ pageName.concat('START_WITH') | translate}}</p>
+      <button mat-icon-button>
+        <mat-icon svgIcon="metro-facebook"></mat-icon>
+      </button>
+      <button mat-icon-button>
+        <mat-icon svgIcon="metro-twitter"></mat-icon>
+      </button>
+      <p> {{ pageName.concat('NO_ACCOUNT') | translate}} <strong><a>{{pageName.concat('REGISTER') | translate}}</a></strong></p>
+      <p><a>{{ pageName.concat('ENTERPRISE_ACCOUNT') | translate}}</a></p>
     </mat-card-content>
   </mat-card>
 </form>
-

src/app/auth/auth.component.ts

@@ -1,26 +1,42 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
+import { IconSanitizerService } from '../services/icon-sanitizer.service';
+import { Svg } from '../shared/interfaces/svg.interface';
 
 @Component({
-	selector: 'app-auth',
-	templateUrl: './auth.component.html',
-	styleUrls: ['./auth.component.scss']
+  selector: 'app-auth',
+  templateUrl: './auth.component.html',
+  styleUrls: ['./auth.component.scss']
 })
 export class AuthComponent implements OnInit {
   constructor(
-    @Inject(FormBuilder) fb: FormBuilder,
-    private router: Router
+  @Inject(FormBuilder) fb: FormBuilder,
+    private router: Router,
+    private iconServ: IconSanitizerService
   ) {
+
+    this.iconServ.setSvgIcons(this.icons);
+
     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)])
     });
   }
+  private icons: Svg[] = [
+    { iconName: 'metro-facebook', url: 'assets/icons/icon-metro-facebook.svg' },
+    { iconName: 'metro-twitter', url: 'assets/icons/icon-metro-twitter.svg' },
+    { iconName: 'visibility-filled', url: 'assets/icons/icon-visibility-filled.svg' },
+    { iconName: 'metro-mail', url: 'assets/icons/icon-metro-mail.svg' },
+  ];
   authForm: FormGroup;
   passPattern: RegExp;
   loading = false;
+  pageName = 'PAGES.AUTH.';
+  hidePassword = true;
 
   ngOnInit(): void { }
 
@@ -31,6 +47,6 @@ export class AuthComponent implements OnInit {
 
     this.router.navigate(['/app/home']);
     setTimeout(() => this.loading = false, 2000); // Quit loading timeout for test
-	}
+  }
 
 }

src/app/services/icon-sanitizer.service.spec.ts

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

src/app/services/icon-sanitizer.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Svg } from '../shared/interfaces/svg.interface';
+@Injectable({
+  providedIn: 'root'
+})
+/**
+  * Service to register and display icons used by `<mat-icon>` component or another components.
+  * - Registers icon set URLs by namespace.
+  * - Registers aliases for CSS classes, for use with icon fonts.
+  * - Loads icons from URLs and extracts individual icons from icon sets.
+*/
+export class IconSanitizerService {
+  constructor(
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer
+  ) { }
+
+  setSvgIcons(svg: Svg[]) {
+    svg.forEach(s => {
+      this.iconRegistry.addSvgIcon(s.iconName, this.sanitizer.bypassSecurityTrustResourceUrl(s.url));
+    });
+  }
+}

src/app/shared/components/login-banner/login-banner.component.html

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

src/app/shared/components/login-banner/login-banner.component.scss

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

src/app/shared/components/login-banner/login-banner.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-banner',
+  templateUrl: './login-banner.component.html',
+  styleUrls: ['./login-banner.component.scss']
+})
+export class LoginBannerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/shared/components/login-banner/login-banner.component.ts

@@ -0,0 +1,4 @@
+export interface Svg {
+  iconName: string;
+  url: string;
+}