From efad81dda5ae950f9feab89c63aa10f227e28cb8 Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Fri, 17 Sep 2021 21:48:35 +0300
Subject: [PATCH] 145. Login template - final (#18)

---
 support-portal-frontend/src/app/app.module.ts |  4 +++-
 .../app/component/login/login.component.html  | 24 +++++++++++--------
 .../src/app/service/authentication.service.ts |  6 ++---
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/support-portal-frontend/src/app/app.module.ts b/support-portal-frontend/src/app/app.module.ts
index 445746b..d092c67 100644
--- a/support-portal-frontend/src/app/app.module.ts
+++ b/support-portal-frontend/src/app/app.module.ts
@@ -12,6 +12,7 @@ import {LoginComponent} from './component/login/login.component';
 import {RegisterComponent} from './component/register/register.component';
 import {UserComponent} from './component/user/user.component';
 import {AppRoutingModule} from './app-routing.module';
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import {AppRoutingModule} from './app-routing.module';
     BrowserModule,
     HttpClientModule,
     NotificationModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [AuthenticationGuard, AuthenticationService, UserService,
     {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
diff --git a/support-portal-frontend/src/app/component/login/login.component.html b/support-portal-frontend/src/app/component/login/login.component.html
index c3b7f6f..c4dcac1 100644
--- a/support-portal-frontend/src/app/component/login/login.component.html
+++ b/support-portal-frontend/src/app/component/login/login.component.html
@@ -7,33 +7,37 @@
         </div>
       </div>
       <div class="d-flex justify-content-center form_container">
-        <form>
+        <form #loginForm="ngForm" (ngSubmit)="onLogin(loginForm.value)">
           <div class="input-group mb-3">
             <div class="input-group-append">
               <span class="input-group-text"><i class="fas fa-user"></i></span>
             </div>
-            <input type="text" class="form-control" name="username" placeholder="Username" required>
+            <input type="text" class="form-control" name="username" placeholder="Username"
+                   ngModel #usernameInput="ngModel" required>
           </div>
-          <span class="help-block" style="color:red;">Please enter a username</span>
+          <span class="help-block" style="color:red;" *ngIf="usernameInput.invalid && usernameInput.touched">
+            Please enter a username</span>
           <div class="input-group mb-2">
             <div class="input-group-append">
               <span class="input-group-text"><i class="fas fa-key"></i></span>
             </div>
-            <input type="password" class="form-control" name="password" placeholder="Password" required>
+            <input type="password" class="form-control" name="password" placeholder="Password"
+                   ngModel #passwordInput="ngModel" required>
           </div>
-          <span class="help-block" style="color:red;">Please enter a password.</span>
+          <span class="help-block" style="color:red;" *ngIf="passwordInput.invalid && passwordInput.touched"
+          >Please enter a password.</span>
           <div class="d-flex justify-content-center mt-3 login_container">
-            <button type="submit"  name="button" class="btn login_btn">
-              <i class="fas fa-spinner fa-spin"></i>&nbsp;&nbsp;
-              <span>Loading...</span>
-              <span>Login</span>
+            <button type="submit" name="button" class="btn login_btn">
+              <i class="fas fa-spinner fa-spin" *ngIf="showLoading"></i>&nbsp;&nbsp;
+              <span *ngIf="showLoading">Loading...</span>
+              <span *ngIf="!showLoading">Login</span>
             </button>
           </div>
         </form>
       </div>
       <div class="mt-4">
         <div class="d-flex justify-content-center links">
-          Don't have an account? <a  class="ml-2" style="color: #2C3E50;">Sign Up</a>
+          Don't have an account? <a class="ml-2" style="color: #2C3E50;">Sign Up</a>
         </div>
       </div>
     </div>
diff --git a/support-portal-frontend/src/app/service/authentication.service.ts b/support-portal-frontend/src/app/service/authentication.service.ts
index 44f3d9f..c5ec89f 100644
--- a/support-portal-frontend/src/app/service/authentication.service.ts
+++ b/support-portal-frontend/src/app/service/authentication.service.ts
@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {environment} from "../../environments/environment";
-import {HttpClient, HttpErrorResponse, HttpResponse} from "@angular/common/http";
+import {HttpClient, HttpResponse} from "@angular/common/http";
 import {UserLogin} from "../dto/user-login";
 import {Observable} from "rxjs";
 import {User} from "../model/user";
@@ -30,9 +30,9 @@ export class AuthenticationService {
     (`${this.host}/user/login`, userDto, {observe: 'response'});
   }
 
-  public register(user: User): Observable<User | HttpErrorResponse> {
+  public register(user: User): Observable<User> {
     return this.httpClient
-      .post<User | HttpErrorResponse>(`${this.host}/user/register`, user);
+      .post<User>(`${this.host}/user/register`, user);
   }
 
   public logout(): void {