frontend: Refactor AuthService and components that use it

frontend/projects/shared-meet-components/src/lib/interceptors/http.interceptor.ts

@@ -70,7 +70,6 @@ export const httpInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, ne
 
 	return next(req).pipe(
 		catchError((error: HttpErrorResponse) => {
-			console.log('Error with status', error.status);
 			if (error.status === 401) {
 				// Error refreshing participant token
 				if (error.url?.includes('/token/refresh')) {

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

@@ -8,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { AuthService } from '../../../services';
 import { Router } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
+import { UserRole } from 'shared-meet-components';
 
 @Component({
 	selector: 'ov-login',
@@ -46,7 +47,8 @@ export class ConsoleLoginComponent {
 			await this.authService.login(username!, password!);
 
 			// Check if the user has the expected role
-			if (!this.authService.isAdmin()) {
+			const role = await this.authService.getUserRole();
+			if (role !== UserRole.ADMIN) {
 				this.authService.logout();
 				this.loginErrorMessage = 'Invalid username or password';
 				return;

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

@@ -8,6 +8,7 @@ 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 { UserRole } from 'shared-meet-components';
 
 @Component({
 	selector: 'app-login',
@@ -39,7 +40,6 @@ export class LoginComponent {
 		this.version = this.contextService.getVersion();
 		this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
 		this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
-		const redirectParam = this.route.snapshot.queryParams['redirectTo'];
 
 		this.route.queryParams.subscribe((params) => {
 			if (params['redirectTo']) {
@@ -56,7 +56,8 @@ export class LoginComponent {
 			await this.authService.login(username!, password!);
 
 			// Check if the user has the expected role
-			if (this.authService.isAdmin()) {
+			const role = await this.authService.getUserRole();
+			if (role !== UserRole.USER) {
 				this.authService.logout();
 				this.loginErrorMessage = 'Invalid username or password';
 				return;

frontend/projects/shared-meet-components/src/lib/pages/participant-name-form/participant-name-form.component.ts

@@ -35,7 +35,7 @@ export class ParticipantNameFormComponent implements OnInit {
 		protected authService: AuthService
 	) {}
 
-	ngOnInit() {
+	async ngOnInit() {
 		this.route.queryParams.subscribe((params) => {
 			if (params['originUrl']) {
 				this.originUrl = params['originUrl'];
@@ -45,7 +45,7 @@ export class ParticipantNameFormComponent implements OnInit {
 		});
 
 		// Set the username if authenticated as default value
-		const username = this.authService.getUsername();
+		const username = await this.authService.getUsername();
 		if (username) {
 			this.participantForm.get('name')?.setValue(username);
 		}

frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.ts

@@ -39,7 +39,10 @@ export class RoomCreatorComponent implements OnInit {
 		this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
 		this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
 
-		this.username = this.authService.getUsername();
+		const username = await this.authService.getUsername();
+		if (username) {
+			this.username = username;
+		}
 	}
 
 	generateRoomName(event: any) {

frontend/projects/shared-meet-components/src/lib/services/auth/auth.service.ts

@@ -10,7 +10,6 @@ import { UserRole, User } from '@lib/typings/ce';
 })
 export class AuthService {
 	protected hasCheckAuth = false;
-	protected isAuthenticated = false;
 	protected user: User | null = null;
 
 	constructor(
@@ -21,7 +20,7 @@ export class AuthService {
 	async login(username: string, password: string) {
 		try {
 			await this.httpService.login({ username, password });
-			await this.getAuthenticatedUser();
+			await this.getAuthenticatedUser(true);
 		} catch (err) {
 			const error = err as HttpErrorResponse;
 			console.error(error.error.message || error.error);
@@ -36,7 +35,6 @@ export class AuthService {
 	async logout(redirectTo?: string) {
 		try {
 			await this.httpService.logout();
-			this.isAuthenticated = false;
 			this.user = null;
 
 			if (redirectTo) {
@@ -48,29 +46,30 @@ export class AuthService {
 	}
 
 	async isUserAuthenticated(): Promise<boolean> {
-		if (!this.hasCheckAuth) {
+		await this.getAuthenticatedUser();
-			await this.getAuthenticatedUser();
+		return !!this.user;
+	}
+
+	async getUsername(): Promise<string | undefined> {
+		await this.getAuthenticatedUser();
+		return this.user?.username;
+	}
+
+	async getUserRole(): Promise<UserRole | undefined> {
+		await this.getAuthenticatedUser();
+		return this.user?.role;
+	}
+
+	private async getAuthenticatedUser(force = false) {
+		if (force || (!this.user && !this.hasCheckAuth)) {
+			try {
+				const user = await this.httpService.getProfile();
+				this.user = user;
+			} catch (error) {
+				this.user = null;
+			}
+			
 			this.hasCheckAuth = true;
 		}
-		return this.isAuthenticated;
-	}
-
-	getUsername(): string {
-		return this.user?.username || '';
-	}
-
-	isAdmin(): boolean {
-		return this.user?.role === UserRole.ADMIN;
-	}
-
-	private async getAuthenticatedUser() {
-		try {
-			const user = await this.httpService.getProfile();
-			this.user = user;
-			this.isAuthenticated = true;
-		} catch (error) {
-			this.user = null;
-			this.isAuthenticated = false;
-		}
 	}
 }