From b8268a62f7eee147847f4d46d5a5200fe8a505ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radek=20Pu=C5=A1?= <pusradek@fit.cvut.cz>
Date: Sun, 27 Oct 2019 22:04:55 +0100
Subject: [PATCH] registration form validation

---
 .../registration/registration.component.css   |  4 +++
 .../registration/registration.component.html  | 23 +++++++++---
 .../registration/registration.component.ts    | 36 ++++++++++++++++---
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/Core/Core/ClientApp/src/app/registration/registration.component.css b/Core/Core/ClientApp/src/app/registration/registration.component.css
index 6cd66c0..403181e 100644
--- a/Core/Core/ClientApp/src/app/registration/registration.component.css
+++ b/Core/Core/ClientApp/src/app/registration/registration.component.css
@@ -1,4 +1,8 @@
 
+.errorInput {
+  color: red;
+}
+
 .wrapper {
   display: flex;
   min-height: 100vh;
diff --git a/Core/Core/ClientApp/src/app/registration/registration.component.html b/Core/Core/ClientApp/src/app/registration/registration.component.html
index 23b5ae9..c71168a 100644
--- a/Core/Core/ClientApp/src/app/registration/registration.component.html
+++ b/Core/Core/ClientApp/src/app/registration/registration.component.html
@@ -1,12 +1,25 @@
 <div class=" wrapper">
   <div class="container">
     <div class="inner">
+      <div *ngIf="IsRegistrationValid == false && ErrorMessage!=''" class="errorInput">{{ErrorMessage}}</div>
       <p>Registrovat se:</p>
-      <form (submit)="registerUser($event)">
-        <input type="text" placeholder="jméno" id="username" />
-        <input type="password" placeholder="heslo" id="password" />
-        <input type="password" placeholder="heslo znovu" id="passwordCheck" />
-        <input type="submit" value="odeslat" />
+      <form [formGroup]="InsertForm" (submit)="registerUser($event)">
+        <div>
+          <input formControlName="Username" type="text" placeholder="jméno" id="username" />
+          <div *ngIf="Username.touched && Username.errors" class="errorInput"><span *ngIf="Username.hasError('required')">Vyplňte uživatelské jméno</span></div>
+        </div>
+        <div>
+          <input formControlName="Password" type="password" placeholder="heslo" id="password" />
+          <div *ngIf="Password.touched && Password.errors" class="errorInput"><span *ngIf="Password.hasError('required')">Vyplňte heslo</span></div>
+        </div>
+        <div>
+          <input formControlName="PasswordCheck" type="password" placeholder="heslo znovu" id="passwordCheck" pattern="{{ Password.value }}"/>
+          <div *ngIf="PasswordCheck.touched && PasswordCheck.errors" class="errorInput">
+            <span *ngIf="PasswordCheck.hasError('required')">Vyplňte kontrolní heslo</span>
+            <span *ngIf="PasswordCheck.errors.pattern">Hesla nejsou stejná</span>
+          </div>
+        </div>
+        <input type="submit" value="odeslat" [disabled]="InsertForm.invalid" />
       </form>
       <br /> <a routerLink="/login">UĹľ jsem registrovanĂ˝</a>
     </div>
diff --git a/Core/Core/ClientApp/src/app/registration/registration.component.ts b/Core/Core/ClientApp/src/app/registration/registration.component.ts
index 5337924..1212ac5 100644
--- a/Core/Core/ClientApp/src/app/registration/registration.component.ts
+++ b/Core/Core/ClientApp/src/app/registration/registration.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { RegistrationService } from './registration.service';
 import { Router } from '@angular/router';
+import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 
 @Component({
   selector: 'app-registration',
@@ -10,12 +11,29 @@ import { Router } from '@angular/router';
 /** registration component*/
 export class RegistrationComponent {
 
-  constructor(private Router: Router, private registrationService: RegistrationService) { }
+  constructor(private Router: Router, private registrationService: RegistrationService, private FormBuilder: FormBuilder) { }
 
-  registerUser(event): void {
+  InsertForm: FormGroup;
+  Username: FormControl;
+  Password: FormControl;
+  PasswordCheck: FormControl;
+  ErrorMessage: string = '';
+  IsRegistrationValid: boolean = false;
+
+  ngOnInit() {
+    this.Username = new FormControl('', [Validators.required]);
+    this.Password = new FormControl('', [Validators.required]);
+    this.PasswordCheck = new FormControl('', [Validators.required, Validators.pattern(this.Password.value)]);
 
+    this.InsertForm = this.FormBuilder.group({
+      "Username": this.Username,
+      "Password": this.Password,
+      "PasswordCheck": this.PasswordCheck
+    });
+  }
+
+  registerUser(event): void {
     event.preventDefault();
-    console.log('registering user');
 
     const target = event.target;
     const username = target.querySelector('#username').value;
@@ -24,8 +42,16 @@ export class RegistrationComponent {
 
     this.registrationService.register(username, password, passwordCheck).subscribe((res) => {
       console.log('Registration successful: ', res.status.toString());
-      if (res.status = 1)
+      this.IsRegistrationValid = false;
+      if (res.status = 1) {
+        this.IsRegistrationValid = true;
         this.Router.navigate(['login']);
-    }, error => console.error(error));
+      }
+        
+    }, error => {
+        console.error(error);
+        this.IsRegistrationValid = false;
+        this.ErrorMessage = "Uživatelské jméno už existuje.";
+    });
   }
 }
-- 
GitLab