Login: implement as dialog

src/app/app-routing.module.ts

@@ -1,12 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { configResolver } from './_services/config.service'
-import { LoginComponent } from './login/login.component'
+import { LoginDialogComponent } from './login/login.component'
 import { PageNotFoundComponent } from './pageNotFound.component'
 
 const routes: Routes = [
     { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
-    { path: 'login', component: LoginComponent },
     { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
     { path: 'map', loadChildren: () => import('./map/map.module').then(m => m.MapModule), resolve: {conf: configResolver}, },
     { path: 'measures', loadChildren: () => import('./measures/measures.module').then(m => m.MeasuresModule) },

src/app/app.component.html

@@ -43,7 +43,7 @@
 
 <ng-template #login>
     <nav>
-        <a mat-icon-button routerLink="/login" routerLinkActive="active" aria-label="Log in" matTooltip="Log in">
+        <a mat-icon-button (click)="openLoginDialog()" matTooltip="Log in">
             <mat-icon>account_circle</mat-icon>
         </a>
     </nav>

src/app/app.component.ts

@@ -4,8 +4,10 @@ import { Title } from '@angular/platform-browser'
 import { BootstrapService } from './_services/bootstrap.service'
 import { ConfigService } from './_services/config.service'
 import { MatSnackBar } from '@angular/material/snack-bar'
+import { MatDialog, MatDialogRef } from '@angular/material/dialog'
 
 import { AuthenticationService } from './_services/authentication.service'
+import { LoginDialogComponent } from './login/login.component'
 
 @Component({
     selector: 'app-root',
@@ -42,6 +44,8 @@ export class AppComponent implements OnInit {
         public authenticationService: AuthenticationService,
         private snackBar: MatSnackBar,
         private cdr: ChangeDetectorRef,
+        public dialogRef: MatDialogRef<LoginDialogComponent>,
+        public dialog: MatDialog
     ) {}
 
     ngOnInit() {
@@ -69,4 +73,15 @@ export class AppComponent implements OnInit {
             }
         })
     }
+
+    openLoginDialog() {
+        const dialogRef = this.dialog.open(LoginDialogComponent, {
+            height: '24em',
+            width: '21em'
+        })
+
+        dialogRef.afterClosed().subscribe(result => {
+            console.log('The dialog was closed')
+        })
+    }
 }

src/app/login/login.component.css

@@ -1,3 +1,7 @@
 .error {
-  color: red
+  color: red;
+  text-align: center;
+  margin-top: 1em;
+  font-size: 125%;
+  font-weight: bolder;
 }

src/app/login/login.component.html

@@ -11,13 +11,13 @@
                 <input matInput type="password" formControlName="password" #password required/>
             </mat-form-field>
         </div>
-        <div *ngIf="error" class="alert alert-danger error">{{error}}</div>
         <button
             type="submit"
             mat-raised-button
             color="primary"
-            [disabled]="loading || !formGroup.valid"
+            [disabled]="!formGroup.valid"
             (click)="submit()"
         >Login</button>
+        <div *ngIf="error" class="alert alert-danger error">{{error}}</div>
     </form>
 </div>

src/app/login/login.component.spec.ts

@@ -3,21 +3,21 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 
-import { LoginComponent } from './login.component';
+import { LoginDialogComponent } from './login.component';
 
 describe('LoginComponent', () => {
-  let component: LoginComponent;
+  let component: LoginDialogComponent;
-  let fixture: ComponentFixture<LoginComponent>;
+  let fixture: ComponentFixture<LoginDialogComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
+      declarations: [ LoginDialogComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
+    fixture = TestBed.createComponent(LoginDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/login/login.component.ts

@@ -1,30 +1,34 @@
 import {
     Component, OnInit, ViewChild, ElementRef,
-    ChangeDetectorRef, ChangeDetectionStrategy
+    ChangeDetectorRef, ChangeDetectionStrategy, Inject
 } from '@angular/core'
 import { Router } from '@angular/router'
-
 import { UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms'
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog'
 
 import { ConfigService } from '../_services/config.service'
 import { AuthenticationService } from '../_services/authentication.service'
 
-@Component({
+export interface LoginDialogData {
-    templateUrl: './login.component.html',
+    username: string;
-    styleUrls: ['./login.component.css'],
+    password: string;
-    changeDetection: ChangeDetectionStrategy.OnPush,
+}
-})
 
-export class LoginComponent implements OnInit {
+@Component({
-    loading = false
+    selector: 'gisaf-login-dialog',
+    templateUrl: 'login.component.html',
+    styleUrls: ['./login.component.css'],
+    standalone: false,
+})
+export class LoginDialogComponent implements OnInit {
     error = ''
 
     formGroup: UntypedFormGroup
     @ViewChild('userName', { static: true }) userName: ElementRef
 
     constructor(
-        public configService: ConfigService,
+        public dialogRef: MatDialogRef<LoginDialogComponent>,
-        private router: Router,
+        @Inject(MAT_DIALOG_DATA) public data: LoginDialogData,
         private authenticationService: AuthenticationService,
         private cdr: ChangeDetectorRef,
     ) { }
@@ -37,19 +41,23 @@ export class LoginComponent implements OnInit {
         })
     }
 
+    onNoClick(): void {
+        this.dialogRef.close();
+    }
+
     submit() {
-        this.loading = true
         this.authenticationService.login(this.formGroup.value.userName, this.formGroup.value.password).subscribe({
             next: result => {
-                // login successful
+                console.log('Login successful')
-                this.router.navigate(['/'])
+                // this.router.navigate(['/'])
+                this.dialogRef.close()
+                this.cdr.markForCheck()
             },
             error: error => {
                 console.error(error)
                 this.error = error.statusText
-                this.loading = false
                 this.cdr.markForCheck()
             }
         })
     }
-}
+}

src/app/login/login.module.ts

@@ -8,7 +8,8 @@ import { FormsModule, ReactiveFormsModule }   from '@angular/forms'
 
 import { FlexLayoutModule } from 'ngx-flexible-layout'
 
-import { LoginComponent } from './login.component'
+import { LoginDialogComponent } from './login.component'
+import { MatDialogRef } from '@angular/material/dialog'
 
 @NgModule({
     imports: [
@@ -24,8 +25,14 @@ import { LoginComponent } from './login.component'
         FlexLayoutModule,
     ],
     declarations: [
-        LoginComponent,
+        LoginDialogComponent,
     ],
+    providers: [
+        {
+            provide: MatDialogRef,
+            useValue: {}
+        },
+    ]
 })
 
 export class LoginModule {}