[#5, #6, #7] centralize auth screens into auth.service & use named ou…

…tlet navigation

CLIENT/CLIENT.FileSharing/src/app/identity/login/login.component.html

@@ -76,7 +76,7 @@
 </div>
 <div id="register-section">
   <span>No account yet?</span>
-  <button mat-button color="primary" (click)="onGotoRegister()">
+  <button mat-button color="primary" (click)="authService.showRegister()">
     Register here
   </button>
 </div>

CLIENT/CLIENT.FileSharing/src/app/identity/login/login.component.ts

@@ -43,16 +43,12 @@ export class LoginComponent implements OnInit {
   public keepSignedIn: boolean = false;
 
   constructor(
-    private authService: AuthService,
+    protected authService: AuthService,
     private router: Router,
   ) {}
 
   ngOnInit() {}
 
-  onGotoRegister() {
-    this.router.navigateByUrl('/register');
-  }
-
   onSubmit(form: NgForm, event: Event) {
     event.preventDefault();
     let loginCommand = new LoginModel(this.username!, this.password!);

CLIENT/CLIENT.FileSharing/src/app/identity/register/register.component.html

@@ -42,7 +42,7 @@
         maxlength="50"
       />
       @if (usernameInput.invalid && usernameInput.touched) {
-          <mat-error>Username is <strong>required</strong></mat-error>
+        <mat-error>Username is <strong>required</strong></mat-error>
       }
     </mat-form-field>
     <mat-form-field id="password-field">
@@ -114,5 +114,7 @@
 </div>
 <div id="register-section">
   <span>Already have an account?</span>
-  <button mat-button color="primary" (click)="onGotoLogin()">Login here</button>
+  <button mat-button color="primary" (click)="authService.showLogin()">
+    Login here
+  </button>
 </div>

CLIENT/CLIENT.FileSharing/src/app/identity/register/register.component.ts

@@ -75,15 +75,11 @@ export class RegisterComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private authService: AuthService,
+    protected authService: AuthService,
   ) {}
 
   ngOnInit() {}
 
-  onGotoLogin() {
-    this.router.navigateByUrl('/auth');
-  }
-
   onSubmit(form: NgForm, event: Event) {
     event.preventDefault();
 

CLIENT/CLIENT.FileSharing/src/app/identity/shared/auth.service.ts

@@ -5,10 +5,14 @@ import { Observable } from 'rxjs';
 import { LoginModel } from './login.model';
 import { RegisterModel } from './register.model';
 import { JwtHelperService } from '@auth0/angular-jwt';
+import { Router } from '@angular/router';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private router: Router,
+  ) {}
 
   login(command: LoginModel): Observable<any> {
     return this.http.post<any>(`${httpAppConfig.apiEndpoint}/signIn`, command);
@@ -18,6 +22,19 @@ export class AuthService {
     return this.http.post<any>(`${httpAppConfig.apiEndpoint}/signUp`, command);
   }
 
+  public showLogin() {
+    this.router.navigate(['', { outlets: { login: ['auth'] } }]);
+  }
+
+  public showRegister() {
+    this.router.navigate(['', { outlets: { login: ['register'] } }]);
+  }
+
+  public logout() {
+    localStorage.removeItem('fileshare-token');
+    this.router.navigateByUrl('/(login:auth)');
+  }
+
   public isAuthenticated(): boolean {
     const token = localStorage.getItem('fileshare-token');
     const helper = new JwtHelperService();

CLIENT/CLIENT.FileSharing/src/app/navigation/navbar/navbar.component.html

@@ -21,6 +21,10 @@
           <span matListIconTitle>{{ menuItem.label }}</span>
         </a>
       }
+      <a mat-list-item (click)="authService.logout()">
+        <mat-icon matListItemIcon>logout</mat-icon>
+        <span matListIconTitle>Logout</span>
+      </a>
     </mat-nav-list>
   </mat-sidenav>
 

CLIENT/CLIENT.FileSharing/src/app/navigation/navbar/navbar.component.ts

@@ -9,6 +9,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule, RouterOutlet } from '@angular/router';
+import { AuthService } from '../../identity/shared/auth.service';
 
 export type MenuItem = {
   icon: string;
@@ -58,12 +59,8 @@ export class NavbarComponent implements OnInit {
       label: 'Shared with me',
       route: 'sharedWithMe',
     },
-    {
-      icon: 'logout',
-      label: 'Logout',
-    },
   ]);
-  constructor() {}
+  constructor(protected authService: AuthService) {}
 
   ngOnInit() {}
 }

CLIENT/CLIENT.FileSharing/src/app/navigation/toolbar/toolbar.component.html

@@ -58,7 +58,12 @@ <h1 id="app-name">File Sharing</h1>
     >
       <mat-icon>settings</mat-icon>
     </button>
-    <button mat-icon-button class="logout-btn" aria-label="Logout icon-button">
+    <button
+      mat-icon-button
+      class="logout-btn"
+      aria-label="Logout icon-button"
+      (click)="authService.logout()"
+    >
       <mat-icon>logout</mat-icon>
     </button>
   </div>

CLIENT/CLIENT.FileSharing/src/app/navigation/toolbar/toolbar.component.ts

@@ -5,7 +5,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
-import { RouterModule } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
+import { AuthService } from './../../identity/shared/auth.service';
 
 @Component({
   selector: 'fs-toolbar',
@@ -23,7 +24,10 @@ import { RouterModule } from '@angular/router';
   styleUrls: ['./toolbar.component.scss'],
 })
 export class ToolbarComponent implements OnInit {
-  constructor() {}
+  constructor(
+    protected authService: AuthService,
+    private router: Router,
+  ) {}
 
   ngOnInit() {}