Login form with validation

src/app/app.module.ts

@@ -13,12 +13,17 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import { RegisterComponent } from './register/register.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
-    NavComponent
+    NavComponent,
+    RegisterComponent
   ],
   imports: [
     BrowserModule,
@@ -30,7 +35,11 @@ import { MatListModule } from '@angular/material/list';
     MatButtonModule,
     MatSidenavModule,
     MatIconModule,
-    MatListModule
+    MatListModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/login/login.component.css

@@ -0,0 +1,8 @@
+form {
+  min-width: 150px;
+  max-width: 300px;
+}
+
+mat-form-field {
+  width: 100%;
+}

src/app/login/login.component.html

@@ -1 +1,32 @@
-<p>login works!</p>
+<h1>Bejelentkezés</h1>
+<form>
+  <mat-form-field>
+    <mat-label>Email</mat-label>
+    <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
+           class="mat-input-element" type="email" name="email" required="required"
+           placeholder="h123456@stud.u-szeged.hu"/>
+    <mat-hint>Egyetemi email cim</mat-hint>
+    <mat-error *ngIf="emailHasError('email')">
+      Az email formátuma nem megfelelő
+    </mat-error>
+    <mat-error *ngIf="emailHasError('required')">
+      Az email megadása kötelező
+    </mat-error>
+    <mat-error *ngIf="emailHasError('unimail')">
+      Egyetemi email megadása szükséges
+    </mat-error>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Jelszó</mat-label>
+    <input matInput [formControl]="passFormControl" [errorStateMatcher]="matcher"
+           class="mat-input-element" type="password" name="password" required="required"
+           minlength="8"/>
+    <mat-error *ngIf="passFormControl.hasError('minlength') && !passFormControl.hasError('required')">
+      A jelszónak legalább 8 karakterből kell állnia. <!-- TODO: Regisztrációnál... -->
+    </mat-error>
+    <mat-error *ngIf="passFormControl.hasError('required')">
+      A jelszó megadása kötelező.
+    </mat-error>
+  </mat-form-field>
+  <button mat-raised-button color="primary" (click)="doLogin()">Bejelentkezés</button>
+</form>

src/app/login/login.component.ts

@@ -1,4 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ErrorStateMatcher} from '@angular/material/core';
+import {AbstractControl, FormControl, FormGroupDirective, NgForm, ValidationErrors, Validators} from '@angular/forms';
+
+export class FormErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
 
 @Component({
   selector: 'app-login',
@@ -7,9 +16,65 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
+
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.email,
+    LoginComponent.validateUniEmail
+  ]);
+
+  passFormControl = new FormControl('', [
+    Validators.required
+  ]);
+
+  matcher = new FormErrorStateMatcher();
+
+  private emailErrorCodes: string[] = [
+    'required',
+    'email',
+    'unimail'
+  ];
+
+  private static validateUniEmail(control: AbstractControl): ValidationErrors {
+    if (control.value.endsWith('u-szeged.hu')) {
+      return null;
+    }
+    return {unimail: true};
+  }
+
+  /**
+   * Egy adott tipusú hiba ellenőrzése úgy, hogy egyszerre csak egy hibatipust jelezzen.
+   * @param code Az ellenőrizendő hibatipus
+   */
+  emailHasError(code: string): boolean {
+    console.log('Checking ' + code);
+    const error = this.emailFormControl.hasError(code);
+    console.log('Error: ' + error);
+    if (!error) {
+      return false;
+    }
+    console.log('Checking codes...');
+    for (const ec of this.emailErrorCodes) {
+      console.log('ec: ' + ec);
+      if (ec === code) {
+        break;
+      }
+      console.log('It\'s different');
+      if (this.emailFormControl.hasError(ec)) {
+        return false;
+      }
+      console.log('No error for ec');
+    }
+    return error;
+  }
 
   ngOnInit(): void {
   }
 
+  doLogin(): void {
+    alert('Login');
+  }
+
 }

src/app/nav/nav.component.css

@@ -15,3 +15,7 @@
   top: 0;
   z-index: 1;
 }
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}

src/app/nav/nav.component.html

@@ -1,9 +1,9 @@
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav #drawer class="sidenav" fixedInViewport
-      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
-      [mode]="(isHandset$ | async) ? 'over' : 'side'"
-      [opened]="(isHandset$ | async) === false">
-    <mat-toolbar>Menu</mat-toolbar>
+               [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
+               [mode]="(isHandset$ | async) ? 'over' : 'side'"
+               [opened]="(isHandset$ | async) === false">
+    <mat-toolbar>Menü</mat-toolbar>
     <mat-nav-list>
       <a mat-list-item routerLink="/">Főoldal</a>
       <a mat-list-item href="#">Link 2</a>
@@ -18,12 +18,19 @@
         mat-icon-button
         (click)="drawer.toggle()"
         *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        <mat-icon aria-label="Oldalsáv">menu</mat-icon>
       </button>
       <span>Szakdolgozat</span>
-      <a class="mat-button" routerLink="/login">Bejelentkezés</a>
+      <span class="toolbar-spacer"></span>
+      <a mat-button routerLink="/login">Regisztráció</a>
+      <a mat-button routerLink="/login">
+        Bejelentkezés
+        <mat-icon aria-hidden="false" aria-label="Bejelentkezés">login</mat-icon>
+      </a>
     </mat-toolbar>
-    <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
-    <router-outlet></router-outlet>
+    <div style="margin: 20px">
+      <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
+      <router-outlet></router-outlet>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/register/register.component.html

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

src/app/register/register.component.spec.ts

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

src/app/register/register.component.ts

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