frontend: Restructured project

openvidu-call-front/src/app/app.config.ts

@@ -0,0 +1,21 @@
+
+import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
+import { environment } from '@environment/environment';
+import { routes } from '@app/app.routes';
+
+const ovComponentsconfig: OpenViduComponentsConfig = {
+	production: environment.production
+};
+
+export const appConfig: ApplicationConfig = {
+	providers: [
+		importProvidersFrom(OpenViduComponentsModule.forRoot(ovComponentsconfig)),
+		provideZoneChangeDetection({ eventCoalescing: true }),
+		provideRouter(routes),
+		provideAnimationsAsync()
+	]
+};

openvidu-call-front/src/app/app.routes.ts

@@ -0,0 +1,13 @@
+import { Routes } from '@angular/router';
+import { HomeComponent } from '@pages/home/home.component';
+import { AdminDashboardComponent } from '@pages/admin-dashboard/admin-dashboard.component';
+import { VideoRoomComponent } from '@pages/video-room/video-room.component';
+import { roomGuard } from '@guards/room.guard';
+
+
+export const routes: Routes = [
+	{ path: '', redirectTo: 'home', pathMatch: 'full' },
+	{ path: 'home', component: HomeComponent },
+	{ path: 'admin', component: AdminDashboardComponent },
+	{ path: ':roomName', component: VideoRoomComponent, canActivate: [roomGuard] }
+];

openvidu-call-front/src/app/core/guards/room.guard.ts

@@ -0,0 +1,34 @@
+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 { RestService } from '../services/rest.service';
+import { CanActivateFn } from '@angular/router';
+
+export const roomGuard: CanActivateFn = async (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
+	const configService = inject(ConfigService);
+	const storageService = inject(StorageService);
+	const restService = inject(RestService);
+	const router = inject(Router);
+
+	try {
+		await configService.initialize();
+
+		if (configService.isPrivateAccess()) {
+			const userCredentials = storageService.getUserCredentials();
+
+			if (!userCredentials) {
+				router.navigate(['/']);
+				return false;
+			}
+
+			await restService.userLogin(userCredentials);
+			return true;
+		}
+	} catch (error) {
+		router.navigate(['/'], { queryParams: { roomName: state.url } });
+		return false;
+	}
+
+	return true;
+};

openvidu-call-front/src/app/components/admin-dashboard/admin-dashboard.component.ts → openvidu-call-front/src/app/pages/admin-dashboard/admin-dashboard.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { RestService } from 'src/app/services/rest.service';
-import { StorageService } from 'src/app/services/storage.service';
+import { RestService } from '@services/rest.service';
+import { StorageService } from '@services/storage.service';
 import { OpenViduComponentsModule, ApiDirectiveModule } from 'openvidu-components-angular';
 
 @Component({

openvidu-call-front/src/app/components/home/home.component.ts → openvidu-call-front/src/app/pages/home/home.component.ts

@@ -7,18 +7,22 @@ import {
 	FormsModule,
 	ReactiveFormsModule
 } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
-import { ConfigService } from 'src/app/services/config.service';
-import { animals, colors, Config, countries, names, uniqueNamesGenerator } from 'unique-names-generator';
-import packageInfo from '../../../../package.json';
-import { RestService } from 'src/app/services/rest.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { MatIcon } from '@angular/material/icon';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatIconButton, MatButton } from '@angular/material/button';
 import { NgClass } from '@angular/common';
 import { MatToolbar } from '@angular/material/toolbar';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { Subscription } from 'rxjs';
+
+import { ConfigService } from '@services/config.service';
+import { RestService } from '@services/rest.service';
+import { StorageService } from '@services/storage.service';
+
+import packageInfo from '../../../../package.json';
+
+import { animals, colors, Config, countries, names, uniqueNamesGenerator } from 'unique-names-generator';
 
 @Component({
 	selector: 'app-home',

openvidu-call-front/src/app/components/video-room/video-room.component.ts → openvidu-call-front/src/app/pages/video-room/video-room.component.ts

@@ -9,9 +9,9 @@ import {
 	OpenViduComponentsModule,
 	ApiDirectiveModule
 } from 'openvidu-components-angular';
-import { RestService } from '../../services/rest.service';
 import { MatIcon } from '@angular/material/icon';
 
+import { RestService } from '@services/rest.service';
 
 @Component({
 	selector: 'app-video-room',

openvidu-call-front/src/main.ts

@@ -1,22 +1,11 @@
-import { enableProdMode, importProvidersFrom } from '@angular/core';
-import { environment } from './environments/environment';
+import { enableProdMode } from '@angular/core';
+import { environment } from '@environment/environment';
 import { AppComponent } from './app/app.component';
-import { AppRoutingModule } from './app/app-routing.module';
-import { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
-
-const componentsConfig: OpenViduComponentsConfig = {
-	production: environment.production
-};
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
 
 if (environment.production) {
 	enableProdMode();
 }
 
-bootstrapApplication(AppComponent, {
-	providers: [
-		importProvidersFrom(BrowserModule, OpenViduComponentsModule.forRoot(componentsConfig), AppRoutingModule),
-		provideAnimations()
-	]
-}).catch((err) => console.log(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

openvidu-call-front/tsconfig.json

@@ -4,18 +4,24 @@
 		"baseUrl": "./",
 		"module": "esnext",
 		"outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "esModuleInterop": true,
+		"sourceMap": true,
+		"esModuleInterop": true,
 		"declaration": false,
 		"moduleResolution": "node",
 		"emitDecoratorMetadata": true,
 		"experimentalDecorators": true,
-    "resolveJsonModule": true,
+		"resolveJsonModule": true,
 		"target": "ES2022",
 		"typeRoots": ["node_modules/@types"],
 		"lib": ["es2017", "dom"],
 		"paths": {
-			"core-js/es7/reflect": ["./node_modules/core-js/proposals/reflect-metadata"]
+			"core-js/es7/reflect": ["./node_modules/core-js/proposals/reflect-metadata"],
+			"@app/*": ["src/app/*"],
+			"@core/*": ["src/app/core/*"],
+			"@services/*": ["src/app/core/services/*"],
+			"@guards/*": ["src/app/core/guards/*"],
+			"@pages/*": ["src/app/pages/*"],
+			"@environment/*": ["src/environments/*"]
 		},
 		"useDefineForClassFields": false
 	}