diff --git a/frontend/projects/shared-meet-components/src/lib/guards/index.ts b/frontend/projects/shared-meet-components/src/lib/guards/index.ts index f1367df..c495167 100644 --- a/frontend/projects/shared-meet-components/src/lib/guards/index.ts +++ b/frontend/projects/shared-meet-components/src/lib/guards/index.ts @@ -3,7 +3,6 @@ export * from './auth.guard'; export * from './extract-query-params.guard'; export * from './moderator-secret.guard'; export * from './participant-name.guard'; -export * from './room-creator.guard'; export * from './run-serially.guard'; export * from './validate-room-access.guard'; export * from './validate-recording-access.guard'; diff --git a/frontend/projects/shared-meet-components/src/lib/guards/room-creator.guard.ts b/frontend/projects/shared-meet-components/src/lib/guards/room-creator.guard.ts deleted file mode 100644 index 20b7f86..0000000 --- a/frontend/projects/shared-meet-components/src/lib/guards/room-creator.guard.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { inject } from '@angular/core'; -import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router'; -import { ContextService } from '../services'; - -export const checkRoomCreatorEnabledGuard: CanActivateFn = async ( - _route: ActivatedRouteSnapshot, - _state: RouterStateSnapshot -) => { - const contextService = inject(ContextService); - const router = inject(Router); - - const isRoomCreatorEnabled = await contextService.canUsersCreateRooms(); - if (!isRoomCreatorEnabled) { - return router.createUrlTree(['room-creator-disabled']); - } - - return true; -}; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html deleted file mode 100644 index 8a04fdd..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.html +++ /dev/null @@ -1,40 +0,0 @@ -
-
- - -
-
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.scss deleted file mode 100644 index 03a73f0..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.scss +++ /dev/null @@ -1,146 +0,0 @@ -* { - box-sizing: border-box; -} - -body { - margin: 0; - font-family: Arial, sans-serif; - background-color: #F8FAFA; -} - -.login-container { - height: 100vh; -} - -.card-container { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 75%; - margin: auto; - max-width: 1200px; -} - -.login-card { - padding: 40px; - width: 400px; - height: 400px; - // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - box-shadow: none; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} - -.form-input { - width: 100%; -} - -.login-button { - text-align: center; - button { - width: 100%; - background-color: #0088aa; - color: #ffffff; - border-radius: 4px; - transition: background-color 0.3s; - } -} -.login-button button:hover { - background-color: #00777f; -} - -.login-button button:disabled { - background-color: #a19f9f; -} - -.login-error { - text-align: center; - margin-top: 10px; -} - -.signup-section { - display: flex; - text-align: center; - justify-content: center; - align-items: center; - align-content: center; - background-color: #4d4d4d; - padding: 20px; - flex: 1; - width: 400px; - height: 400px; - max-width: 400px; - max-height: 400px; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; - // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); - box-shadow: none; -} - -.signup-section img { - max-width: 80%; - height: auto; -} - -a { - color: #6a5acd; - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -@media (max-width: 991px) { - /* Hide .signup-section on medium screens */ - .signup-section { - display: none; - } - - .card-container { - width: 75%; - flex-direction: column; - } - - .login-card { - width: 100%; - max-width: 100%; - border-radius: 12px; - height: auto; - // box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15); - padding: 40px; - margin-bottom: 15px; - } - - .login-button button { - width: 100%; - padding: 12px; - font-size: 1em; - } - - .form-input { - margin-bottom: 10px; - } -} - -/* Small devices (landscape phones, 576px and up) */ -@media (max-width: 576px) { - .login-card { - padding: 40px; - font-size: 0.9em; - } - - .login-button button { - font-size: 0.85em; - padding: 10px; - } - - .card-container { - width: 95%; - } - - .signup-section { - display: none; - } -} diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.spec.ts deleted file mode 100644 index d3a21e2..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ConsoleLoginComponent } from './login.component'; - -describe('ConsoleLoginComponent', () => { - let component: ConsoleLoginComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ConsoleLoginComponent] - }).compileComponents(); - - fixture = TestBed.createComponent(ConsoleLoginComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts deleted file mode 100644 index 2b085b1..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/login/login.component.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { HttpErrorResponse } from '@angular/common/http'; -import { Component } from '@angular/core'; -import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatIconModule } from '@angular/material/icon'; -import { MatInputModule } from '@angular/material/input'; -import { Router, RouterModule } from '@angular/router'; -import { UserRole } from 'shared-meet-components'; -import { AuthService } from '../../../services'; - -@Component({ - selector: 'ov-login', - standalone: true, - imports: [ - MatFormFieldModule, - ReactiveFormsModule, - MatInputModule, - MatButtonModule, - FormsModule, - MatCardModule, - MatIconModule, - RouterModule - ], - templateUrl: './login.component.html', - styleUrl: './login.component.scss' -}) -export class ConsoleLoginComponent { - loginForm = new FormGroup({ - username: new FormControl('', [Validators.required, Validators.minLength(4)]), - password: new FormControl('', [Validators.required, Validators.minLength(4)]) - }); - loginErrorMessage: string | undefined; - invalidRole = false; - - constructor( - private authService: AuthService, - private router: Router - ) {} - - ngOnInit(): void {} - - async onSubmit() { - this.loginErrorMessage = undefined; - const { username, password } = this.loginForm.value; - - try { - await this.authService.login(username!, password!); - - // Check if the user has the expected role - const role = await this.authService.getUserRole(); - if (role !== UserRole.ADMIN) { - await this.authService.logout(); - this.invalidRole = true; - this.loginErrorMessage = - 'You have been authenticated as a user with insufficient permissions. Please log in with an admin account or'; - return; - } - - this.router.navigate(['console']); - } catch (error) { - if ((error as HttpErrorResponse).status === 429) { - this.loginErrorMessage = 'Too many login attempts. Please try again later'; - } else { - this.loginErrorMessage = 'Invalid username or password'; - } - } - } -} diff --git a/frontend/projects/shared-meet-components/src/lib/pages/index.ts b/frontend/projects/shared-meet-components/src/lib/pages/index.ts index 0ff6db7..c88b758 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/index.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/index.ts @@ -2,7 +2,6 @@ export * from './console/console.component'; export * from './console/about/about.component'; export * from './console/access-permissions/access-permissions.component'; export * from './console/appearance/appearance.component'; -export * from './console/login/login.component'; export * from './console/overview/overview.component'; export * from './console/recordings/recordings.component'; export * from './console/rooms/rooms.component'; @@ -12,7 +11,5 @@ export * from './disconnected/disconnected.component'; export * from './error/error.component'; export * from './login/login.component'; export * from './participant-name-form/participant-name-form.component'; -export * from './room-creator/room-creator.component'; -export * from './room-creator-disabled/room-creator-disabled.component'; export * from './room-recordings/room-recordings.component'; export * from './video-room/video-room.component'; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.html b/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.html deleted file mode 100644 index 71c0d4e..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
- - - Room Creation Disabled - - -

- Room creation is currently disabled for users. Please wait until you receive an access URL to join a - room. -

-
-
-
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.scss deleted file mode 100644 index 2eb04f0..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.scss +++ /dev/null @@ -1,33 +0,0 @@ -.container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background-color: var(--ov-background-color); -} - -.card { - width: 400px; - padding: 20px; - text-align: center; - background-color: var(--ov-surface-color); - border-radius: var(--ov-surface-radius); -} - -mat-card-header { - justify-content: center; - align-items: center; -} - -mat-card-title { - font-size: 1.5em; -} - -mat-card-content p { - font-size: 1em; - color: #555; -} - -mat-card-actions { - margin-top: 20px; -} diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.spec.ts deleted file mode 100644 index 9dd4a42..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { RoomCreatorDisabledComponent } from './room-creator-disabled.component'; - -describe('RoomCreatorDisabledComponent', () => { - let component: RoomCreatorDisabledComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [RoomCreatorDisabledComponent] - }).compileComponents(); - - fixture = TestBed.createComponent(RoomCreatorDisabledComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.ts deleted file mode 100644 index 6881352..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator-disabled/room-creator-disabled.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from '@angular/core'; -import { MatCardModule } from '@angular/material/card'; - -@Component({ - selector: 'ov-room-creator-disabled', - standalone: true, - imports: [MatCardModule], - templateUrl: './room-creator-disabled.component.html', - styleUrl: './room-creator-disabled.component.scss' -}) -export class RoomCreatorDisabledComponent {} diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.html b/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.html deleted file mode 100644 index 85995c7..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.html +++ /dev/null @@ -1,85 +0,0 @@ -
- - @if (username) { -
- Hi {{ username }}, do you want to logout? - -
- } -
-
- - - -

Videoconference rooms in one click

-
- -
-
-
-
- - - @if (roomForm.get('roomIdPrefix')?.value) { - - } - -
-
- -
-
-
-
- - - - Photo by - - Daniel Leone - - on - - Unsplash - - -
- {{ version }} -
-
-
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.scss deleted file mode 100644 index 3b55680..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.scss +++ /dev/null @@ -1,256 +0,0 @@ -$formBorderRadius: 0.35rem; -$formColor: #e6e6e6; -$formError: #770000; -$formInputBackgroundColor: #434a52; -$formInputHoverBackgroundColor: #3c4249; -$formLabelBackgroundColor: #363b41; -$formSubmitBackgroundColor: #0087a9; -$formSubmitDisabledBackgroundColor: #264b55; - -$formSubmitColor: #eee; -$formSubmitDisabledColor: #bdbdbd; - -$formSubmitHoverBackgroundColor: #006a85; -$iconFill: #606468; -$formGap: 0.375rem; - -.section1 { - background: - linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), - var(--background-image-url) top center no-repeat; - background-size: cover; - height: 100%; - text-align: center; - position: relative; - color: $formColor; -} - -#header, -.footer { - background-color: transparent; - color: $formColor; -} - -.roomError { - font-size: 14px; - color: $formError; - text-shadow: 0.2px 0px #ffffff; - text-align: left; - font-weight: 600; -} - -.roomError mat-icon { - vertical-align: bottom; - padding-right: 4px; -} - -.footer { - position: absolute; - bottom: 0; - font-size: 9px; - height: auto; -} - -.footer a { - color: $formColor; -} - -#meet-version, -#logout-content { - right: 15px; - position: absolute; - font-size: 13px; -} - -h4 { - font-size: 25px; - font-weight: 300; - color: #ffffff; - position: relative; - padding-bottom: 5px; -} - -/* Extra small devices (phones, 600px and down) */ -@media only screen and (max-width: 600px) { - #header_img, - .ovVersion, - .footer { - display: none; - } -} - -.openvidu-slogan-container { - margin-top: 80px; -} - -#form-img { - max-width: 290px; - margin-right: 10px; - margin-top: 10px; - padding: 15px; -} - -/* Extra large devices (large laptops and desktops, 1200px and up) */ -@media only screen and (min-width: 1200px) { - .section1 { - background-attachment: fixed; - } -} - -.grid { - inline-size: 90%; - margin-inline: auto; - max-inline-size: 26rem; -} - -.hidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.icons { - display: none; -} - -.icon { - block-size: 1em; - display: inline-block; - fill: $iconFill; - inline-size: 1em; - vertical-align: middle; -} - -input { - background-image: none; - border: 0; - color: inherit; - font: inherit; - margin: 0; - outline: 0; - padding: 0; - transition: background-color 0.3s; -} - -input[type='submit'] { - cursor: pointer; -} - -.form { - display: grid; - gap: $formGap; -} - -.form input[type='password'], -.form input[type='text'], -.form button[type='submit'] { - inline-size: 100%; -} - -.form-field { - display: flex; -} - -.form-input { - flex: 1; -} - -.room-prefix { - color: $formColor; -} - -.room-prefix label.error { - background-color: $formError; -} -.room-prefix label, -.room-prefix input[type='text'], -.room-prefix input[type='password'] { - border-radius: $formBorderRadius; - padding: 0.85rem; -} - -#room-id-input { - border-radius: 0; -} - -.room-prefix button[type='submit'] { - border-radius: $formBorderRadius; - padding: 0.4rem; - cursor: pointer; -} - -.room-prefix button:disabled[type='submit'] { - cursor: auto; - color: $formSubmitDisabledColor !important; - background-color: $formSubmitDisabledBackgroundColor !important; -} - -.room-prefix label { - background-color: $formLabelBackgroundColor; - border-bottom-right-radius: 0; - border-top-right-radius: 0; - padding-inline: 1.25rem; -} - -.room-prefix input[type='password'], -.room-prefix input[type='text'] { - background-color: $formInputBackgroundColor; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - font-size: 16px; -} - -.room-prefix input[type='password']:focus, -.room-prefix input[type='password']:hover, -.room-prefix input[type='text']:focus, -.room-prefix input[type='text']:hover { - background-color: $formInputHoverBackgroundColor; -} - -.room-prefix button[type='submit'] { - background-color: $formSubmitBackgroundColor; - color: $formSubmitColor; - font-weight: 500; - text-transform: uppercase; -} - -.room-prefix button[type='submit']:focus, -.room-prefix button[type='submit']:hover { - background-color: $formSubmitHoverBackgroundColor; -} -#clear-room-id-btn { - height: auto; - background-color: $formInputBackgroundColor; - border-radius: 0; - color: $formColor; - mat-icon { - vertical-align: middle; - } -} -#room-id-generator-btn { - height: auto; - background-color: $formInputBackgroundColor; - border-radius: $formBorderRadius; - border-bottom-left-radius: 0; - border-top-left-radius: 0; - color: $formColor; - mat-icon { - vertical-align: middle; - } - &:hover { - background-color: $formInputHoverBackgroundColor; - } -} - -p { - margin-block: 1.5rem; -} - -.text--center { - text-align: center; -} diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.spec.ts deleted file mode 100644 index 6761328..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { RoomCreatorComponent } from './room-creator.component'; - -describe('RoomCreatorComponent', () => { - let component: RoomCreatorComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [RoomCreatorComponent] - }).compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(RoomCreatorComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.ts deleted file mode 100644 index d2893ea..0000000 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-creator/room-creator.component.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms'; -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 { Router } from '@angular/router'; -import { AuthService, ContextService, HttpService } from '../../services/index'; -import { MeetRoom, MeetRoomOptions } from '../../typings/ce/room'; -import { animals, colors, Config, uniqueNamesGenerator } from 'unique-names-generator'; - -@Component({ - selector: 'app-room-creator', - templateUrl: './room-creator.component.html', - styleUrls: ['./room-creator.component.scss'], - standalone: true, - imports: [MatToolbar, MatIconButton, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton] -}) -export class RoomCreatorComponent implements OnInit { - version = ''; - openviduLogoUrl = ''; - backgroundImageUrl = ''; - - roomForm = new FormGroup({ - roomIdPrefix: new FormControl(this.getRandomName(), []) - }); - username = ''; - - constructor( - private router: Router, - private httpService: HttpService, - private authService: AuthService, - private contextService: ContextService - ) {} - - async ngOnInit() { - this.version = this.contextService.getVersion(); - this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl(); - this.backgroundImageUrl = this.contextService.getBackgroundImageUrl(); - - const username = await this.authService.getUsername(); - if (username) { - this.username = username; - } - } - - generateRoomId(event: any) { - event.preventDefault(); - this.roomForm.get('roomIdPrefix')?.setValue(this.getRandomName()); - } - - clearRoomId() { - this.roomForm.get('roomIdPrefix')?.setValue(''); - } - - async logout() { - try { - await this.authService.logout('login'); - } catch (error) { - console.error('Error doing logout ', error); - } - } - - async goToVideoRoom() { - if (!this.roomForm.valid) { - console.error('Room name is not valid'); - return; - } - - const roomIdPrefix = this.roomForm.get('roomIdPrefix')?.value!.replace(/ /g, '-'); - - try { - const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000; // 24h * 60m * 60s * 1000ms - - const options: MeetRoomOptions = { - roomIdPrefix, - autoDeletionDate: Date.now() + MILLISECONDS_PER_DAY // Expires 1 day from now - }; - - const room: MeetRoom = await this.httpService.createRoom(options); - - const accessRoomUrl = new URL(room.moderatorRoomUrl); - const secret = accessRoomUrl.searchParams.get('secret'); - const roomUrl = accessRoomUrl.pathname; - - this.router.navigate([roomUrl], { queryParams: { secret } }); - } catch (error) { - console.error('Error creating room ', error); - } - } - - private getRandomName(): string { - const configName: Config = { - dictionaries: [colors, animals], - separator: '-', - style: 'lowerCase' - }; - return uniqueNamesGenerator(configName).replace(/[^\w-]/g, ''); - } -}