From c9010fc8ee11844b0a913cc23aec81f912c40cd0 Mon Sep 17 00:00:00 2001 From: Carlos Santos <4a.santos@gmail.com> Date: Tue, 24 Sep 2024 12:44:10 +0200 Subject: [PATCH] frontend: Refactored storage service --- frontend/src/app/core/guards/room.guard.ts | 6 +- frontend/src/app/core/models/storage.model.ts | 7 ++ .../src/app/core/services/http.service.ts | 6 +- .../src/app/core/services/storage.service.ts | 66 +++++-------------- .../admin-dashboard.component.ts | 4 +- frontend/src/app/pages/home/home.component.ts | 27 +++----- 6 files changed, 41 insertions(+), 75 deletions(-) create mode 100644 frontend/src/app/core/models/storage.model.ts diff --git a/frontend/src/app/core/guards/room.guard.ts b/frontend/src/app/core/guards/room.guard.ts index c74b0cfa..960aa38a 100644 --- a/frontend/src/app/core/guards/room.guard.ts +++ b/frontend/src/app/core/guards/room.guard.ts @@ -1,13 +1,13 @@ 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); @@ -15,7 +15,7 @@ export const roomGuard: CanActivateFn = async (route: ActivatedRouteSnapshot, st await configService.initialize(); if (configService.isPrivateAccess()) { - const userCredentials = storageService.getUserCredentials(); + const userCredentials = storageService.getParticipantCredentials(); if (!userCredentials) { router.navigate(['/']); diff --git a/frontend/src/app/core/models/storage.model.ts b/frontend/src/app/core/models/storage.model.ts new file mode 100644 index 00000000..85faa03b --- /dev/null +++ b/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-'; diff --git a/frontend/src/app/core/services/http.service.ts b/frontend/src/app/core/services/http.service.ts index 3de25b82..41953c9d 100644 --- a/frontend/src/app/core/services/http.service.ts +++ b/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( diff --git a/frontend/src/app/core/services/storage.service.ts b/frontend/src/app/core/services/storage.service.ts index f53d8101..af6f6869 100644 --- a/frontend/src/app/core/services/storage.service.ts +++ b/frontend/src/app/core/services/storage.service.ts @@ -1,10 +1,6 @@ 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 @@ -12,16 +8,19 @@ const enum Storage { @Injectable({ providedIn: 'root' }) -export class StorageService { - private storage = window.localStorage; +export class StorageAppService extends StorageService { + constructor(loggerSrv: LoggerService) { + super(loggerSrv); + this.PREFIX_KEY = STORAGE_PREFIX; + } 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 +31,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 +51,7 @@ export class StorageService { return null; } - clearUserCredentials() { - this.remove(Storage.USER_CREDENTIALS); - } - - private set(key: string, item: any) { - const value = JSON.stringify({ item: item }); - this.storage.setItem(key, value); - } - - private get(key: string): any { - const str = this.storage.getItem(key); - - if (str) { - return JSON.parse(str).item; - } - - return null; - } - - private remove(key: string) { - this.storage.removeItem(key); - } - - public clear() { - this.storage.clear(); + clearParticipantCredentials() { + this.remove(StorageAppKeys.PARTICIPANT_CREDENTIALS); } } diff --git a/frontend/src/app/pages/admin-dashboard/admin-dashboard.component.ts b/frontend/src/app/pages/admin-dashboard/admin-dashboard.component.ts index c3d425e6..b4d2cca0 100644 --- a/frontend/src/app/pages/admin-dashboard/admin-dashboard.component.ts +++ b/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() { diff --git a/frontend/src/app/pages/home/home.component.ts b/frontend/src/app/pages/home/home.component.ts index 1df49084..c08e6719 100644 --- a/frontend/src/app/pages/home/home.component.ts +++ b/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) {