neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
juancarmore 2025-05-26 13:27:39 +02:00
parent 48c0133504
commit 270fbc0e5e
5 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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">

18
frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts
View File

@ -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;
}

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

@ -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>

5
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss
View File

@ -44,6 +44,11 @@ $formGap: 0.375rem;
padding-right: 4px;
}
.loginError a {
color: $loginError;
text-decoration: underline;
}
.footer {
position: absolute;
bottom: 0;

15
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts
View File

@ -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;
}