frontend: enhance invalid role error messages in login components for clarity

frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html

@@ -24,7 +24,11 @@
 			</form>
 
 			@if (loginErrorMessage) {
-				<mat-error class="login-error">{{ loginErrorMessage }}</mat-error>
+				<mat-error class="login-error">{{ loginErrorMessage }}
+					@if (invalidRole) {
+						<a [routerLink]="'/login'">go to the home page</a>
+					}
+				</mat-error>
 			}
 		</mat-card>
 		<div class="signup-section">

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, RouterModule } from '@angular/router';
-import { Router } from '@angular/router';
-import { HttpErrorResponse } from '@angular/common/http';
 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();
+				await this.authService.logout();
-				this.loginErrorMessage = 'Invalid username or password';
+				this.invalidRole = true;
+				this.loginErrorMessage =
+					'You have been authenticated as a user with insufficient permissions. Please log in with an admin account or';
 				return;
 			}
 

frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html

@@ -38,7 +38,12 @@
 					/>
 				</div>
 				@if (loginErrorMessage) {
-					<div class="loginError" id="login-error">{{ loginErrorMessage }}</div>
+					<div class="loginError" id="login-error">
+						{{ loginErrorMessage }}
+						@if (invalidRole) {
+							<a [routerLink]="'/console/login'">go to the admin console page</a>
+						}
+					</div>
 				}
 				<div class="form-field">
 					<button mat-button id="join-btn" type="submit" [disabled]="loginForm.invalid">Login</button>

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;

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 { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { ContextService, AuthService } from '../../services/index';
-import { HttpErrorResponse } from '@angular/common/http';
 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();
+				await this.authService.logout();
-				this.loginErrorMessage = 'Invalid username or password';
+				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;
 			}