frontend: Refactored storage service

frontend/src/app/core/guards/room.guard.ts

@@ -1,21 +1,21 @@
 import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { ConfigService } from '../services/config.service';
-import { StorageService } from '../services/storage.service';
+import { StorageAppService } from '../services/storage.service';
 import { HttpService } from '../services/http.service';
 import { CanActivateFn } from '@angular/router';
 
 export const roomGuard: CanActivateFn = async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
 	const configService = inject(ConfigService);
-	const storageService = inject(StorageService);
+	const storageService = inject(StorageAppService);
 	const restService = inject(HttpService);
 	const router = inject(Router);
 
 	try {
 		await configService.initialize();
 
 		if (configService.isPrivateAccess()) {
-			const userCredentials = storageService.getUserCredentials();
+			const userCredentials = storageService.getParticipantCredentials();
 
 			if (!userCredentials) {
 				router.navigate(['/']);

frontend/src/app/core/models/storage.model.ts

@@ -0,0 +1,7 @@
+export enum StorageAppKeys {
+	PARTICIPANT_NAME = 'participantName',
+	PARTICIPANT_CREDENTIALS = 'participantCredentials',
+	ADMIN_CREDENTIALS = 'adminCredentials',
+}
+
+export const STORAGE_PREFIX = 'OvCall-';

frontend/src/app/core/services/http.service.ts

@@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { RecordingInfo } from 'openvidu-components-angular';
 import { lastValueFrom } from 'rxjs';
-import { StorageService } from './storage.service';
+import { StorageAppService } from './storage.service';
 
 @Injectable({
 	providedIn: 'root'
@@ -13,7 +13,7 @@ export class HttpService {
 
 	constructor(
 		private http: HttpClient,
-		private storageService: StorageService
+		private storageService: StorageAppService
 	) {
 		// this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
 	}
@@ -22,7 +22,7 @@ export class HttpService {
 		const headers = new HttpHeaders({
 			'Content-Type': 'application/json'
 		});
-		const userCredentials = this.storageService.getUserCredentials();
+		const userCredentials = this.storageService.getParticipantCredentials();
 
 		if (userCredentials?.username && userCredentials?.password) {
 			return headers.append(

frontend/src/app/core/services/storage.service.ts

@@ -1,27 +1,25 @@
 import { Injectable } from '@angular/core';
-
-const enum Storage {
-	ADMIN_CREDENTIALS = 'ovCallAdminAuth',
-	USER_CREDENTIALS = 'ovCallUserAuth',
-	USER_NAME = 'ovCallUserName'
-}
+import { LoggerService, StorageService } from 'openvidu-components-angular';
+import { STORAGE_PREFIX, StorageAppKeys } from '../models/storage.model';
 
 /**
  * @internal
  */
 @Injectable({
 	providedIn: 'root'
 })
-export class StorageService {
-	private storage = window.localStorage;
+export class StorageAppService extends StorageService {
+	constructor(loggerSrv: LoggerService) {
+		super(loggerSrv);
+	}
 
 	setAdminCredentials(credentials: { username: string; password: string }) {
 		const encodedCredentials = btoa(`${credentials.username}:${credentials.password}`);
-		this.set(Storage.ADMIN_CREDENTIALS, encodedCredentials);
+		this.set(StorageAppKeys.ADMIN_CREDENTIALS, encodedCredentials);
 	}
 
 	getAdminCredentials(): { username: string; password: string } | undefined {
-		const encodedCredentials = this.get(Storage.ADMIN_CREDENTIALS);
+		const encodedCredentials = this.get(StorageAppKeys.ADMIN_CREDENTIALS);
 
 		if (encodedCredentials) {
 			const [username, password] = atob(encodedCredentials).split(':');
@@ -32,25 +30,17 @@ export class StorageService {
 	}
 
 	clearAdminCredentials() {
-		this.remove(Storage.ADMIN_CREDENTIALS);
-	}
-
-	setUserName(username: string) {
-		this.set(Storage.USER_NAME, username);
+		this.remove(StorageAppKeys.ADMIN_CREDENTIALS);
 	}
 
-	getUserName(): string {
-		return this.get(Storage.USER_NAME);
-	}
-
-	setUserCredentials(credentials: { username: string; password: string }) {
+	setParticipantCredentials(credentials: { username: string; password: string }) {
 		const encodedCredentials = btoa(`${credentials.username}:${credentials.password}`);
-		this.setUserName(credentials.username);
-		this.set(Storage.USER_CREDENTIALS, encodedCredentials);
+		this.setParticipantName(credentials.username);
+		this.set(StorageAppKeys.PARTICIPANT_CREDENTIALS, encodedCredentials);
 	}
 
-	getUserCredentials(): { username: string; password: string } | null {
-		const encodedCredentials = this.get(Storage.USER_CREDENTIALS);
+	getParticipantCredentials(): { username: string; password: string } | null {
+		const encodedCredentials = this.get(StorageAppKeys.PARTICIPANT_CREDENTIALS);
 
 		if (encodedCredentials) {
 			const [username, password] = atob(encodedCredentials).split(':');
@@ -60,30 +50,26 @@ export class StorageService {
 		return null;
 	}
 
-	clearUserCredentials() {
-		this.remove(Storage.USER_CREDENTIALS);
+	clearParticipantCredentials() {
+		this.remove(StorageAppKeys.PARTICIPANT_CREDENTIALS);
 	}
 
-	private set(key: string, item: any) {
+	protected override set(key: string, item: any) {
 		const value = JSON.stringify({ item: item });
-		this.storage.setItem(key, value);
+		this.storage.setItem(STORAGE_PREFIX + key, value);
 	}
 
-	private get(key: string): any {
-		const str = this.storage.getItem(key);
+	protected override get(key: string): any {
+		const value = this.storage.getItem(STORAGE_PREFIX + key);
 
-		if (str) {
-			return JSON.parse(str).item;
+		if (value) {
+			return JSON.parse(value).item;
 		}
 
 		return null;
 	}
 
-	private remove(key: string) {
-		this.storage.removeItem(key);
-	}
-
-	public clear() {
-		this.storage.clear();
+	protected override remove(key: string) {
+		this.storage.removeItem(STORAGE_PREFIX + key);
 	}
 }

frontend/src/app/pages/admin-dashboard/admin-dashboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { HttpService } from '@services/http.service';
-import { StorageService } from '@services/storage.service';
+import { StorageAppService } from '@services/storage.service';
 import { OpenViduComponentsModule, ApiDirectiveModule } from 'openvidu-components-angular';
 
 @Component({
@@ -18,7 +18,7 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 	private continuationToken: string;
 	constructor(
 		private httpService: HttpService,
-		private storageService: StorageService
+		private storageService: StorageAppService
 	) {}
 
 	async ngOnInit() {

frontend/src/app/pages/home/home.component.ts

@@ -18,7 +18,7 @@ import { Subscription } from 'rxjs';
 
 import { ConfigService } from '@services/config.service';
 import { HttpService } from '@services/http.service';
-import { StorageService } from '@services/storage.service';
+import { StorageAppService } from '@services/storage.service';
 
 import packageInfo from '../../../../package.json';
 
@@ -29,16 +29,7 @@ import { animals, colors, Config, countries, names, uniqueNamesGenerator } from
 	templateUrl: './home.component.html',
 	styleUrls: ['./home.component.scss'],
 	standalone: true,
-	imports: [
-    MatToolbar,
-    MatIconButton,
-    MatTooltip,
-    MatIcon,
-    FormsModule,
-    ReactiveFormsModule,
-    NgClass,
-    MatButton
-]
+	imports: [MatToolbar, MatIconButton, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton]
 })
 export class HomeComponent implements OnInit, OnDestroy {
 	roomForm: FormGroup;
@@ -56,13 +47,13 @@ export class HomeComponent implements OnInit, OnDestroy {
 		private router: Router,
 		public formBuilder: UntypedFormBuilder,
 		private httpService: HttpService,
-		private storageService: StorageService,
+		private storageService: StorageAppService,
 		private callService: ConfigService,
 		private fb: FormBuilder,
 		private route: ActivatedRoute
 	) {
 		this.loginForm = this.fb.group({
-			username: [this.storageService.getUserName() ?? '', [Validators.required, Validators.minLength(4)]],
+			username: [this.storageService.getParticipantName() ?? '', [Validators.required, Validators.minLength(4)]],
 			password: ['', [Validators.required, Validators.minLength(4)]]
 		});
 
@@ -80,13 +71,13 @@ export class HomeComponent implements OnInit, OnDestroy {
 			this.isPrivateAccess = this.callService.isPrivateAccess();
 
 			if (this.isPrivateAccess) {
-				const userCredentials = this.storageService.getUserCredentials();
+				const userCredentials = this.storageService.getParticipantCredentials();
 
 				if (!userCredentials) return;
 
 				await this.httpService.userLogin(userCredentials);
-				this.storageService.setUserCredentials(userCredentials);
-				this.username = this.storageService.getUserName();
+				this.storageService.setParticipantCredentials(userCredentials);
+				this.username = this.storageService.getParticipantName();
 				this.isUserLogged = true;
 				this.loginError = false;
 			}
@@ -127,7 +118,7 @@ export class HomeComponent implements OnInit, OnDestroy {
 
 		try {
 			await this.httpService.userLogin({ username: this.username, password });
-			this.storageService.setUserCredentials({ username: this.username, password });
+			this.storageService.setParticipantCredentials({ username: this.username, password });
 			this.isUserLogged = true;
 		} catch (error) {
 			this.isUserLogged = false;
@@ -139,7 +130,7 @@ export class HomeComponent implements OnInit, OnDestroy {
 	async logout() {
 		try {
 			await this.httpService.userLogout();
-			this.storageService.clearUserCredentials();
+			this.storageService.clearParticipantCredentials();
 			this.loginError = false;
 			this.isUserLogged = false;
 		} catch (error) {