Implement authentication feature with role-based access control and login dialog

src/app/login/login.dialog.ts

@@ -0,0 +1,40 @@
+import { Component, Inject, inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormControl, Validators } from '@angular/forms';
+import { AuthService, User } from '../auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: false,
+  templateUrl: './login.dialog.html',
+  styleUrls: ['./login.dialog.css'],
+})
+export class LoginDialog {
+  auth = inject(AuthService);
+  passwordControl = new FormControl('', Validators.required);
+
+  constructor(
+    private dialogRef: MatDialogRef<LoginDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: { user: User }
+  ) {}
+
+  submit(): void {
+    const role = this.data.user.role;
+
+    if (!this.passwordControl.value) {
+      this.passwordControl.setErrors({ required: true });
+      this.passwordControl.markAsTouched();
+      return;
+    }
+    if (!this.auth.login(role, this.passwordControl.value)) {
+      this.passwordControl.setErrors({ wrongPassword: true });
+      this.passwordControl.markAsTouched();
+      return;
+    }
+    this.dialogRef.close(true);
+  }
+
+  cancel(): void {
+    this.dialogRef.close(false);
+  }
+}