diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html index 10caa2e..8a04fdd 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html @@ -24,7 +24,11 @@ @if (loginErrorMessage) { - {{ loginErrorMessage }} + {{ loginErrorMessage }} + @if (invalidRole) { + go to the home page + } + }
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts index 7e8b60d..2b085b1 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts @@ -1,14 +1,14 @@ +import { HttpErrorResponse } from '@angular/common/http'; import { Component } from '@angular/core'; -import { FormGroup, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms'; +import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; -import { AuthService } from '../../../services'; -import { Router } from '@angular/router'; -import { HttpErrorResponse } from '@angular/common/http'; +import { Router, RouterModule } from '@angular/router'; import { UserRole } from 'shared-meet-components'; +import { AuthService } from '../../../services'; @Component({ selector: 'ov-login', @@ -20,7 +20,8 @@ import { UserRole } from 'shared-meet-components'; MatButtonModule, FormsModule, MatCardModule, - MatIconModule + MatIconModule, + RouterModule ], templateUrl: './login.component.html', styleUrl: './login.component.scss' @@ -31,6 +32,7 @@ export class ConsoleLoginComponent { password: new FormControl('', [Validators.required, Validators.minLength(4)]) }); loginErrorMessage: string | undefined; + invalidRole = false; constructor( private authService: AuthService, @@ -49,8 +51,10 @@ export class ConsoleLoginComponent { // Check if the user has the expected role const role = await this.authService.getUserRole(); if (role !== UserRole.ADMIN) { - this.authService.logout(); - this.loginErrorMessage = 'Invalid username or password'; + await this.authService.logout(); + this.invalidRole = true; + this.loginErrorMessage = + 'You have been authenticated as a user with insufficient permissions. Please log in with an admin account or'; return; } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html index 834abcf..23ef73e 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html +++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html @@ -38,7 +38,12 @@ />
@if (loginErrorMessage) { -
{{ loginErrorMessage }}
+
+ {{ loginErrorMessage }} + @if (invalidRole) { + go to the admin console page + } +
}
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss index fe6d357..d8650c7 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss @@ -44,6 +44,11 @@ $formGap: 0.375rem; padding-right: 4px; } +.loginError a { + color: $loginError; + text-decoration: underline; +} + .footer { position: absolute; bottom: 0; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts index ddf28c6..e7f3bbd 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts @@ -1,19 +1,19 @@ import { NgClass } from '@angular/common'; +import { HttpErrorResponse } from '@angular/common/http'; import { Component } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatButton } from '@angular/material/button'; import { MatIcon } from '@angular/material/icon'; import { MatToolbar } from '@angular/material/toolbar'; import { MatTooltip } from '@angular/material/tooltip'; -import { ActivatedRoute, Router } from '@angular/router'; -import { ContextService, AuthService } from '../../services/index'; -import { HttpErrorResponse } from '@angular/common/http'; +import { ActivatedRoute, Router, RouterModule } from '@angular/router'; import { UserRole } from 'shared-meet-components'; +import { AuthService, ContextService } from '../../services/index'; @Component({ selector: 'app-login', standalone: true, - imports: [MatToolbar, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton], + imports: [MatToolbar, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton, RouterModule], templateUrl: './login.component.html', styleUrl: './login.component.scss' }) @@ -27,6 +27,7 @@ export class LoginComponent { password: new FormControl('', [Validators.required, Validators.minLength(4)]) }); loginErrorMessage: string | undefined; + invalidRole = false; redirectTo = ''; // By default, redirect to RoomCreatorComponent constructor( @@ -58,8 +59,10 @@ export class LoginComponent { // Check if the user has the expected role const role = await this.authService.getUserRole(); if (role !== UserRole.USER) { - this.authService.logout(); - this.loginErrorMessage = 'Invalid username or password'; + await this.authService.logout(); + this.invalidRole = true; + this.loginErrorMessage = + 'You have been authenticated as an admin, but admin users cannot join meetings. Please log in with a user account or'; return; }