frontend: Get and save preference using backend REST API

frontend/package.json

@@ -11,8 +11,10 @@
     "@angular/platform-browser-dynamic": "18.2.5",
     "@angular/router": "18.2.5",
     "core-js": "^3.38.1",
+    "jwt-decode": "^4.0.0",
     "openvidu-components-angular": "3.0.0-beta3",
     "rxjs": "7.8.1",
+    "shared-call-components": "file:shared-call-components-0.0.1.tgz",
     "tslib": "^2.3.0",
     "unique-names-generator": "^4.7.1",
     "zone.js": "0.14.10"
@@ -63,7 +65,7 @@
     "e2e:recordings": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/recording.test.js",
     "e2e:auth": "tsc --project ./e2e && npx mocha --recursive --timeout 30000 ./e2e/dist/auth.test.js",
     "lib:serve": "ng build shared-call-components --watch",
-    "lib:build": "ng build shared-call-components",
+    "lib:build": "ng build shared-call-components --configuration production",
     "lib:pack": "cd dist/shared-call-components && npm pack",
     "lib:sync-call-pro": "rm -rf ../../openvidu-call-pro/frontend/node_modules/shared-call-components && cp dist/shared-call-components/shared-call-components-**.tgz ../../openvidu-call-pro/frontend && cd ../../openvidu-call-pro/frontend && npm install shared-call-components-**.tgz",
     "test": "ng test openvidu-call --watch=false --code-coverage",

frontend/projects/shared-call-components/package.json

@@ -2,8 +2,13 @@
   "name": "shared-call-components",
   "version": "0.0.1",
   "peerDependencies": {
+    "@angular/animations": "^17.0.0 || ^18.0.0",
+		"@angular/cdk": "^17.0.0 || ^18.0.0",
     "@angular/common": "^18.2.0",
-    "@angular/core": "^18.2.0"
+    "@angular/core": "^18.2.0",
+		"@angular/forms": "^17.0.0 || ^18.0.0",
+		"@angular/material": "^17.0.0 || ^18.0.0",
+    "jwt-decode": "^4.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

frontend/projects/shared-call-components/src/lib/components/card/toggle-card/toggle-card.component.ts

@@ -47,13 +47,8 @@ export class ToggleCardComponent {
 	@Input() toggleValue: boolean = false;
 
 	@Output() onToggleValueChanged = new EventEmitter<boolean>();
-	@Output() onTextLinkClicked = new EventEmitter<void>();
 
 	onToggleChange(event: any) {
 		this.onToggleValueChanged.emit(event.checked);
 	}
-
-	onLinkClick() {
-		this.onTextLinkClicked.emit();
-	}
 }

frontend/projects/shared-call-components/src/lib/services/context.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { jwtDecode } from 'jwt-decode';
 
 @Injectable({
 	providedIn: 'root'
@@ -17,6 +18,8 @@ export class ContextService {
 	 */
 	private token: string | null;
 
+	private decodedToken: any;
+
 	/**
 	 * Initializes a new instance of the ContextService class.
 	 */
@@ -45,7 +48,7 @@ export class ContextService {
 	setToken(token: string): void {
 		this.token = token;
 		console.log(token);
-		//TODO Parse token
+		this.decodeJWTToken(token);
 	}
 
 	/**
@@ -55,4 +58,12 @@ export class ContextService {
 	getToken(): string | null {
 		return this.token;
 	}
+
+	getRoomName(): string {
+		return this.decodedToken.room.roomName;
+	}
+
+	private decodeJWTToken(token: string) {
+		this.decodedToken = jwtDecode(token);
+	}
 }

frontend/projects/shared-call-components/src/lib/services/http.service.ts

@@ -10,9 +10,7 @@ export class HttpService {
 	// private baseHref: string;
 	private pathPrefix = 'call/api';
 
-	constructor(
-		private http: HttpClient,
-	) {
+	constructor(private http: HttpClient) {
 		// this.baseHref = '/' + (!!window.location.pathname.split('/')[1] ? window.location.pathname.split('/')[1] + '/' : '');
 	}
 
@@ -54,6 +52,16 @@ export class HttpService {
 		return headers;
 	}
 
+	saveGlobalPreferences(preferences: any): Promise<any> {
+		const headers = this.generateUserHeaders();
+		return this.postRequest(`${this.pathPrefix}/preferences`, preferences, headers);
+	}
+
+	getGlobalPreferences(): Promise<any> {
+		const headers = this.generateUserHeaders();
+		return this.getRequest(`${this.pathPrefix}/preferences`, headers);
+	}
+
 	async getConfig() {
 		return this.getRequest(`${this.pathPrefix}/config`);
 	}
@@ -64,13 +72,13 @@ export class HttpService {
 		return this.postRequest(`${this.pathPrefix}/rooms`, { roomName, participantName }, headers);
 	}
 
-	adminLogin(body: { username: string; password: string }): Promise<{ message: string }> {
-		return this.postRequest(`${this.pathPrefix}/admin/login`, body);
-	}
+	// adminLogin(body: { username: string; password: string }): Promise<{ message: string }> {
+	// 	return this.postRequest(`${this.pathPrefix}/admin/login`, body);
+	// }
 
-	adminLogout(): Promise<{ message: string }> {
-		return this.postRequest(`${this.pathPrefix}/admin/logout`, {});
-	}
+	// adminLogout(): Promise<{ message: string }> {
+	// 	return this.postRequest(`${this.pathPrefix}/admin/logout`, {});
+	// }
 
 	userLogin(body: { username: string; password: string }): Promise<{ message: string }> {
 		return this.postRequest(`${this.pathPrefix}/login`, body);

frontend/src/app/app.routes.ts

@@ -7,18 +7,22 @@ import { UnauthorizedComponent } from '@app/pages/unauthorized/unauthorized.comp
 import { embeddedGuard } from '@app/guards/embedded.guard';
 import { AppearanceComponent } from '@app/pages/console/appearance/appearance.component';
 import { RoomConfigComponent } from '@app/pages/console/room-config/room-config.component';
+import { nonEmbeddedGuard } from './guards/non-embedded.guard';
 export const routes: Routes = [
 	{ path: '', redirectTo: 'console', pathMatch: 'full' },
-	{ path: 'home', component: HomeComponent },
+	{ path: 'home', component: HomeComponent, canActivate: [nonEmbeddedGuard] },
 	{
 		path: 'console',
 		component: ConsoleComponent,
+		canActivate: [nonEmbeddedGuard],
 		children: [
 			{ path: 'appearance', component: AppearanceComponent },
 			{ path: 'room-config', component: RoomConfigComponent }
 		]
 	},
+	{ path: 'unauthorized', component: UnauthorizedComponent },
+	{ path: ':roomName', component: VideoRoomComponent, canActivate: [roomGuard] },
+	// Embedded mode
 	{ path: 'embedded', component: VideoRoomComponent, canActivate: [embeddedGuard] },
-	{ path: 'embedded/unauthorized', component: UnauthorizedComponent },
-	{ path: ':roomName', component: VideoRoomComponent, canActivate: [roomGuard] }
+	{ path: 'embedded/unauthorized', component: UnauthorizedComponent }
 ];

frontend/src/app/guards/embedded.guard.ts

@@ -6,6 +6,15 @@ export const embeddedGuard: CanActivateFn = async (route: ActivatedRouteSnapshot
 	const contextService = inject(ContextService);
 	const router = inject(Router);
 
+	const isRequestFromIframe = window.self !== window.top;
+
+	if (!isRequestFromIframe) {
+		// Redirect to the unauthorized page if the request is not from an iframe
+		const queryParams = { reason: 'no-iframe' };
+		router.navigate(['embedded/unauthorized'], { queryParams });
+		return false;
+	}
+
 	const isEmbedded = state.url.includes('embedded');
 
 	contextService.setEmbeddedMode(isEmbedded);

frontend/src/app/guards/non-embedded.guard.ts

@@ -0,0 +1,18 @@
+import { inject } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
+
+export const nonEmbeddedGuard: CanActivateFn = async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+	const router = inject(Router);
+
+	const isRequestFromIframe = window.self !== window.top;
+
+	if (isRequestFromIframe) {
+		// Redirect to the unauthorized page if the request is from an iframe
+		const queryParams = { reason: 'no-iframe' };
+		router.navigate(['unauthorized'], { queryParams });
+		return false;
+	}
+
+	// Allow access to the requested page
+	return true;
+};

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

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { ConsoleNavComponent, ConsoleNavLink } from 'shared-call-components';
+import { Component, OnInit } from '@angular/core';
+import { ConsoleNavComponent, ConsoleNavLink, HttpService } from 'shared-call-components';
 
 @Component({
 	selector: 'app-console',
@@ -8,7 +8,7 @@ import { ConsoleNavComponent, ConsoleNavLink } from 'shared-call-components';
 	templateUrl: './console.component.html',
 	styleUrl: './console.component.scss'
 })
-export class ConsoleComponent {
+export class ConsoleComponent implements OnInit {
 	navLinks: ConsoleNavLink[] = [
 		{ label: 'Overview', route: '/', icon: 'dashboard' },
 		{ label: 'Appearance', route: 'appearance', icon: 'palette' },
@@ -17,9 +17,16 @@ export class ConsoleComponent {
 		{ label: 'Security', route: 'security', icon: 'security' },
 		{ label: 'Integrations', route: 'integrations', icon: 'integration_instructions' },
 		{ label: 'Support', route: 'support', icon: 'support' },
-		{ label: 'About', route: 'about', icon: 'info' },
+		{ label: 'About', route: 'about', icon: 'info' }
 	];
 
+	constructor(private httpService: HttpService) {}
+
+	async ngOnInit() {
+		const globalPreferences = await this.httpService.getGlobalPreferences();
+		console.log(globalPreferences);
+	}
+
 	logout() {
 		console.log('logout');
 	}

frontend/src/app/pages/console/room-config/room-config.component.html

@@ -25,7 +25,7 @@
 	<!-- Chat Toggle -->
 	<ov-toggle-card
 		[title]="'Chat'"
-		[description]="'Allow the participants to chat'"
+		[description]="'Allow participants to communicate via chat'"
 		[icon]="'message'"
 		[iconBackgroundColor]="'#598eff'"
 		[cardBackgroundColor]="'#ffffff'"

frontend/src/app/pages/console/room-config/room-config.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { DynamicGridComponent, ToggleCardComponent } from 'shared-call-components';
+import { DynamicGridComponent, HttpService, ToggleCardComponent } from 'shared-call-components';
 
 @Component({
 	selector: 'ov-room-config',
@@ -10,20 +10,50 @@ import { DynamicGridComponent, ToggleCardComponent } from 'shared-call-component
 })
 export class RoomConfigComponent {
 	recordingEnabled = false;
-  broadcastingEnabled = false;
-  chatEnabled = false;
-	onRecordingToggle(checked: boolean) {
+	broadcastingEnabled = false;
+	chatEnabled = false;
+
+	constructor(private httpService: HttpService) {}
+
+	async onRecordingToggle(checked: boolean) {
 		this.recordingEnabled = checked;
 		console.log('Recording toggled', this.recordingEnabled);
+
+		try {
+			await this.httpService.saveGlobalPreferences({ recordingEnabled: this.recordingEnabled });
+			// TODO: Show a toast message
+		} catch (error) {
+			console.error('Error saving recording preferences', error);
+			// TODO: Show a toast message
+			this.recordingEnabled = !this.recordingEnabled;
+		}
 	}
 
-  onBroadcastingToggle(checked: boolean) {
-    this.broadcastingEnabled = checked;
-    console.log('Broadcasting toggled', this.broadcastingEnabled);
-  }
+	async onBroadcastingToggle(checked: boolean) {
+		this.broadcastingEnabled = checked;
+		console.log('Broadcasting toggled', this.broadcastingEnabled);
 
-  onChatToggle(checked: boolean) {
-    this.chatEnabled = checked;
-    console.log('Chat toggled', this.chatEnabled);
-  }
+		try {
+			await this.httpService.saveGlobalPreferences({ broadcastingEnabled: this.broadcastingEnabled });
+			// TODO: Show a toast message
+		} catch (error) {
+			console.error('Error saving broadcasting preferences', error);
+			// TODO: Show a toast message
+			this.broadcastingEnabled = !this.broadcastingEnabled;
+		}
+	}
+
+	async onChatToggle(checked: boolean) {
+		this.chatEnabled = checked;
+		console.log('Chat toggled', this.chatEnabled);
+
+		try {
+			await this.httpService.saveGlobalPreferences({ chatEnabled: this.chatEnabled });
+			// TODO: Show a toast message
+		} catch (error) {
+			console.error('Error saving chat preferences', error);
+			// TODO: Show a toast message
+			this.chatEnabled = !this.chatEnabled;
+		}
+	}
 }

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
 	selector: 'app-unauthorized',
@@ -16,6 +16,8 @@ export class UnauthorizedComponent implements OnInit {
 		this.route.queryParams.subscribe((params) => {
 			if (params['reason'] === 'no-token') {
 				this.message = 'No token provided';
+			} else if (params['reason'] === 'no-iframe') {
+				this.message = 'The page is not accessible directly. Please use the OpenVidu embedded';
 			}
 		});
 	}