feat: LoginComponent refactored to remove feedback message (#492)

* feat: LoginComponent refactored with profile icon * feat: LoginComponent refactored to remove feedback message * feat: LoginComponent refactored to remove feedback message
nramc · Oct 9, 2024 · 2111363 · 2111363
1 parent 17d26cc
commit 2111363
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 73 deletions.
diff --git a/src/app/page/auth/login/login.component.html b/src/app/page/auth/login/login.component.html
@@ -3,54 +3,32 @@
   <div class="row d-flex justify-content-center align-items-center h-100 m-auto">
     <div class="col-12 col-md-6 mt-sm-0">
 
-      <div>
-        @if (feedbackMessage().success || feedbackMessage().error) {
-          <app-feedback-message [message]="feedbackMessage()"></app-feedback-message>
-        } @else if (messageBanner === 'unauthenticated') {
-          <div class="alert alert-warning" role="alert">
-            <i class="bi bi-info-circle pe-none me-2"></i>
-            Identity Yourself to access secured resource..!
-          </div>
-        } @else if (messageBanner === 'logoutSuccessful') {
-          <div class="alert alert-success" role="alert">
-            <i class="bi bi-info-circle pe-none me-2"></i>
-            You have been successfully logged out!
-          </div>
-        } @else {
-          <div class="alert alert-primary" role="alert">
-            <i class="bi bi-info-circle pe-none me-2"></i>
-            Identity Yourself to access more exciting features..!
-          </div>
-        }
-
-      </div>
-
-
-      <div class="card login-card text-white border border-2 border-primary border-opacity-50"
+      <div class="card login-card border border-2 border-primary border-opacity-50"
            style="border-radius: 1rem;">
         <div class="card-body p-5 text-center">
+          <img ngSrc="assets/icon/security/user-profile.png" alt="Journey" width="120" height="120" priority />
           <form (ngSubmit)="login(loginForm)" #loginForm="ngForm">
-            <h2 class="fw-bold mb-2">Login</h2>
-            <p class="text-white-50 mb-5">Please Identify Yourself!</p>
+            <h2 class="fw-bold mb-2 text-primary">Login</h2>
+            <p class="text-primary mb-5">Please Identify Yourself.!</p>
 
-            <div class="form-outline form-white mb-2">
+            <div class="form-outline mb-2">
               <input type="email" id="username" name="username" class="form-control form-control-lg" required
                      placeholder="Username" autofocus
-                     [(ngModel)]="form.userName" autocomplete="username" #username="ngModel" maxlength="50"/>
+                     [(ngModel)]="form().username" autocomplete="username" #username="ngModel" maxlength="50"/>
               <label class="form-label small" for="username">Don't have an account?
-                <a class="text-light ms-2" [routerLink]="SIGNUP_PAGE_INFO.path" tabindex="-1">Sign Up</a></label>
+                <a class=" ms-2" [routerLink]="SIGNUP_PAGE_INFO.path" tabindex="-1">Sign Up</a></label>
               <div [hidden]="username.valid || username.pristine" class="form-text text-danger">
                 <div *ngIf="username.errors?.['required']">Username is required.</div>
                 <div *ngIf="username.errors?.['maxlength']">Username must be at most 50 characters long.</div>
               </div>
             </div>
 
-            <div class="form-outline form-white mb-4">
+            <div class="form-outline mb-4">
               <input type="password" id="password" name="password" class="form-control form-control-lg"
-                     [(ngModel)]="form.password" required #password="ngModel" maxlength="50" placeholder="Password"
+                     [(ngModel)]="form().password" required #password="ngModel" maxlength="50" placeholder="Password"
                      autocomplete="current-password"/>
               <label class="form-label small" for="password">Forgot Password?
-                <a class="text-light ms-2" [href]="forgotPasswordAssistanceUrl" target="_blank" tabindex="-1">Contact
+                <a class=" ms-2" [href]="forgotPasswordAssistanceUrl" target="_blank" tabindex="-1">Contact
                   Us</a></label>
               <div [hidden]="password.valid || password.pristine" class="form-text text-danger">
                 <div *ngIf="password.errors?.['required']">Password is required.</div>
@@ -59,11 +37,11 @@ <h2 class="fw-bold mb-2">Login</h2>
             </div>
 
             <div class="d-flex flex-column gap-1">
-              <button class="btn btn-outline-dark btn-lg" type="submit"
+              <button class="btn btn-primary btn-lg" type="submit"
                       [disabled]="!loginForm.form.valid || loginForm.submitted">Submit
               </button>
-              <small class="text-light">or</small>
-              <button class="btn btn-success btn-lg" type="button" (click)="loginAsGuest()">Login as Guest</button>
+              <small class="text-dark">or</small>
+              <button class="btn btn-success btn-lg" type="button" (click)="loginAsGuest()">Explore as Guest</button>
             </div>
 
           </form>

diff --git a/src/app/page/auth/login/login.component.scss b/src/app/page/auth/login/login.component.scss
diff --git a/src/app/page/auth/login/login.component.ts b/src/app/page/auth/login/login.component.ts
@@ -1,16 +1,16 @@
-import {Component, OnInit, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
 import {FormsModule, NgForm} from "@angular/forms";
 import {FeedbackMessageComponent} from "../../../component/feedback-message/feedback-message.component";
-import {NgIf} from "@angular/common";
+import {NgIf, NgOptimizedImage} from "@angular/common";
 import {AuthService} from "../../../service/auth/auth.service";
 import {HttpErrorResponse} from "@angular/common/http";
 import {ActivatedRoute, Router, RouterLink} from "@angular/router";
-import {FeedbackMessage} from "../../../component/feedback-message/feedback-message";
 import {Credential, LoginResponse, LoginService} from "../../../service/auth/login.service";
 import {UserContext} from "../../../service/auth/user-context";
 import {MfaOptions} from "../display-mfa-options/display-mfa-options.component";
 import {SIGNUP_PAGE_INFO} from "../../../model/page.info.model";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {NotificationService} from "../../../service/common/notification.service";
 
 @Component({
   selector: 'app-login',
@@ -20,36 +20,31 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
     FeedbackMessageComponent,
     NgIf,
     RouterLink,
-    MatProgressSpinner
+    MatProgressSpinner,
+    NgOptimizedImage
   ],
   templateUrl: './login.component.html',
-  styleUrl: './login.component.scss'
+  styles: [],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LoginComponent implements OnInit {
-  feedbackMessage = signal<FeedbackMessage>({});
-
-  form: LoginForm = new LoginForm();
-
-  constructor(
-    private authService: AuthService,
-    private loginService: LoginService,
-    private router: Router,
-    private activatedRoute: ActivatedRoute
-  ) {
-  }
+export class LoginComponent {
+  protected readonly SIGNUP_PAGE_INFO = SIGNUP_PAGE_INFO;
+  forgotPasswordAssistanceUrl: string = "https://github.com/nramc/journeys/issues/new?" +
+    "assignees=&labels=bug&projects=&template=bug-report-form.yml&title=%5BBug%5D%3A+";
 
-  ngOnInit(): void {
-    this.messageBanner = this.activatedRoute.snapshot.queryParams['q'];
-  }
+  private readonly authService = inject(AuthService);
+  private readonly loginService = inject(LoginService);
+  private readonly router = inject(Router);
+  private readonly activatedRoute = inject(ActivatedRoute);
+  private readonly notificationService = inject(NotificationService);
 
-  messageBanner: string = '';
+  form = signal<Credential>({username: '', password: ''});
 
   login(loginForm: NgForm) {
     if (loginForm.valid) {
-      let credential: Credential = {username: this.form.userName, password: this.form.password};
-      this.loginService.login(credential)
+      this.loginService.login(this.form())
         .subscribe({
-          next: loginResponse => this.onLoginSuccess(credential, loginResponse),
+          next: loginResponse => this.onLoginSuccess(this.form(), loginResponse),
           error: error => {
             loginForm.resetForm();
             this.onLoginFailed(error);
@@ -78,11 +73,11 @@ export class LoginComponent implements OnInit {
 
   onLoginFailed(error: HttpErrorResponse) {
     console.error(error);
-    this.feedbackMessage.set({error: 'Login failed. ' + error.message});
+    this.notificationService.showError('Login failed. ' + error.message);
   }
 
-  onLogOnSuccess(userContext: UserContext) {
-    this.feedbackMessage.set({success: 'Login successful for ' + userContext.name});
+  onLogOnSuccess(_: UserContext) {
+    this.notificationService.showSuccess('Login successful!');
     let targetUrl = this.activatedRoute.snapshot.queryParams['redirectUrl'] ?? '/home';
     this.router.navigateByUrl(targetUrl).then(console.log);
   }
@@ -97,12 +92,4 @@ export class LoginComponent implements OnInit {
     });
   }
 
-  protected readonly SIGNUP_PAGE_INFO = SIGNUP_PAGE_INFO;
-  forgotPasswordAssistanceUrl: string = "https://github.com/nramc/journeys/issues/new?assignees=&labels=bug&projects=&template=bug-report-form.yml&title=%5BBug%5D%3A+";
 }
-
-class LoginForm {
-  constructor(public userName: string = '', public password: string = '') {
-  }
-}
-
diff --git a/src/assets/icon/security/user-profile.png b/src/assets/icon/security/user-profile.png