frontend: remove unused login and room creator components and associated guards
This commit is contained in:
juancarmore
parent
a118b5cf92
commit
5ee89437b5
@ -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';
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
<div class="login-container">
|
||||
<div class="card-container">
|
||||
<mat-card class="login-card">
|
||||
<h1>Log in</h1>
|
||||
<p>Continue to OpenVidu Console</p>
|
||||
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
|
||||
<mat-form-field class="form-input" appearance="fill">
|
||||
<mat-label>Username</mat-label>
|
||||
<input matInput formControlName="username" required />
|
||||
<mat-icon matPrefix>person</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="form-input" appearance="fill">
|
||||
<mat-label>Password</mat-label>
|
||||
<input matInput type="password" formControlName="password" required />
|
||||
<mat-icon matPrefix>lock</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="login-button">
|
||||
<button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if (loginErrorMessage) {
|
||||
<mat-error class="login-error">{{ loginErrorMessage }}
|
||||
@if (invalidRole) {
|
||||
<a [routerLink]="'/login'">go to the home page</a>
|
||||
}
|
||||
</mat-error>
|
||||
}
|
||||
</mat-card>
|
||||
<div class="signup-section">
|
||||
<div>
|
||||
<img src="https://openvidu.io/assets/images/openvidu_white_bg_transp.png" alt="Sign Up" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ConsoleLoginComponent } from './login.component';
|
||||
|
||||
describe('ConsoleLoginComponent', () => {
|
||||
let component: ConsoleLoginComponent;
|
||||
let fixture: ComponentFixture<ConsoleLoginComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ConsoleLoginComponent]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ConsoleLoginComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
<div class="container">
|
||||
<mat-card class="card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Room Creation Disabled</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<p>
|
||||
Room creation is currently disabled for users. Please wait until you receive an access URL to join a
|
||||
room.
|
||||
</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
@ -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<RoomCreatorDisabledComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [RoomCreatorDisabledComponent]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(RoomCreatorDisabledComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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 {}
|
||||
@ -1,85 +0,0 @@
|
||||
<div class="section1" [style]="{ '--background-image-url': 'url(' + backgroundImageUrl + ')' }">
|
||||
<mat-toolbar id="header">
|
||||
@if (username) {
|
||||
<div id="logout-content">
|
||||
<span>Hi {{ username }}, do you want to logout?</span>
|
||||
<button matTooltip="Logout" mat-icon-button id="logout-btn" (click)="logout()">
|
||||
<mat-icon>logout</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</mat-toolbar>
|
||||
<div class="openvidu-slogan-container">
|
||||
<a href="https://openvidu.io/" target="_blank">
|
||||
<img id="form-img" [src]="openviduLogoUrl" />
|
||||
</a>
|
||||
<h4 id="slogan-text">Videoconference rooms in one click</h4>
|
||||
</div>
|
||||
|
||||
<div class="form-container">
|
||||
<div class="grid">
|
||||
<form [formGroup]="roomForm" novalidate (ngSubmit)="goToVideoRoom()" id="form-room" class="form room-prefix">
|
||||
<div class="form-field">
|
||||
<label for="room-id-input" [ngClass]="{ error: roomForm.get('roomIdPrefix')?.invalid }">
|
||||
<mat-icon matTooltip="Room name prefix">video_camera_front</mat-icon>
|
||||
<span class="hidden">Room ID prefix</span></label
|
||||
>
|
||||
<input
|
||||
formControlName="roomIdPrefix"
|
||||
autocomplete="off"
|
||||
id="room-id-input"
|
||||
type="text"
|
||||
name="roomIdPrefix"
|
||||
class="form-input"
|
||||
placeholder="Room name prefix"
|
||||
/>
|
||||
@if (roomForm.get('roomIdPrefix')?.value) {
|
||||
<button
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
id="clear-room-id-btn"
|
||||
(click)="clearRoomId()"
|
||||
>
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
matTooltip="Generate room ID prefix"
|
||||
mat-icon-button
|
||||
id="room-id-generator-btn"
|
||||
(click)="generateRoomId($event)"
|
||||
>
|
||||
<mat-icon>cached</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<button mat-button id="join-btn" type="submit" [disabled]="roomForm.invalid">JOIN</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-toolbar class="footer">
|
||||
<span>
|
||||
Photo by
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
href="https://unsplash.com/@danielleone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
>
|
||||
Daniel Leone
|
||||
</a>
|
||||
on
|
||||
<a
|
||||
href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"
|
||||
target="_blank"
|
||||
>
|
||||
Unsplash
|
||||
</a>
|
||||
</span>
|
||||
<div id="meet-version">
|
||||
<span>{{ version }}</span>
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
</div>
|
||||
@ -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;
|
||||
}
|
||||
@ -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<RoomCreatorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [RoomCreatorComponent]
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RoomCreatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -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, '');
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user