frontend: implement room form with code from old RoomCreatorComponent

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html

@@ -1 +1,37 @@
-<p>room-form works!</p>
+<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>

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.scss

@@ -0,0 +1,186 @@
+$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;
+
+.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;
+}
+
+.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;
+}

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts

@@ -1,12 +1,74 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { HttpService } from '@lib/services';
+import { MeetRoom, MeetRoomOptions } from '@lib/typings/ce';
+import { animals, colors, Config, uniqueNamesGenerator } from 'unique-names-generator';
 
 @Component({
 	selector: 'ov-room-form',
 	standalone: true,
-  imports: [],
+	imports: [MatIconButton, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, CommonModule, MatButton],
 	templateUrl: './room-form.component.html',
 	styleUrl: './room-form.component.scss'
 })
 export class RoomFormComponent {
+	roomForm = new FormGroup({
+		roomIdPrefix: new FormControl(this.getRandomName(), [])
+	});
 
+	constructor(
+		private router: Router,
+		private httpService: HttpService
+	) {}
+
+	generateRoomId(event: any) {
+		event.preventDefault();
+		this.roomForm.get('roomIdPrefix')?.setValue(this.getRandomName());
+	}
+
+	clearRoomId() {
+		this.roomForm.get('roomIdPrefix')?.setValue('');
+	}
+
+	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, '');
+	}
 }