From 53779278fa1c8de52dffe9269127e47cbb3ed730 Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Sat, 31 May 2025 00:19:34 +0200
Subject: [PATCH] frontend: refactor login component to simplify structure,
 enhance styling, and improve error handling

---
 .../src/lib/pages/login/login.component.html  | 101 ++---
 .../src/lib/pages/login/login.component.scss  | 376 ++++++------------
 .../lib/pages/login/login.component.spec.ts   |   1 -
 .../src/lib/pages/login/login.component.ts    |  56 +--
 4 files changed, 183 insertions(+), 351 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html
index 23ef73e..709b0c0 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.html
@@ -1,77 +1,36 @@
-<div class="section1" [style]="{ '--background-image-url': 'url(' + backgroundImageUrl + ')' }">
-	<mat-toolbar id="header"> </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="login-container">
+	<div class="card-container">
+		<mat-card class="login-card">
+			<h1>Log in</h1>
+			<p>Continue to OpenVidu Meet</p>
+			<form [formGroup]="loginForm" (ngSubmit)="login()">
+				<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>
 
-	<div class="form-container">
-		<div class="grid">
-			<form [formGroup]="loginForm" novalidate (ngSubmit)="login()" id="form-login" class="form login">
-				<div class="form-field" id="login-username">
-					<label for="login-username" [ngClass]="{ error: loginErrorMessage }">
-						<mat-icon matTooltip="Username">person</mat-icon>
-						<span class="hidden">Username</span>
-					</label>
-					<input
-						formControlName="username"
-						autocomplete="off"
-						type="text"
-						name="username"
-						class="form-input"
-						placeholder="Username"
-					/>
-				</div>
-				<div class="form-field" id="login-password">
-					<label for="login-password" [ngClass]="{ error: loginErrorMessage }">
-						<mat-icon matTooltip="Password">lock</mat-icon>
-						<span class="hidden">Password</span>
-					</label>
-					<input
-						formControlName="password"
-						type="password"
-						name="password"
-						class="form-input"
-						placeholder="Password"
-					/>
-				</div>
-				@if (loginErrorMessage) {
-					<div class="loginError" id="login-error">
-						{{ loginErrorMessage }}
-						@if (invalidRole) {
-							<a [routerLink]="'/console/login'">go to the admin console page</a>
-						}
-					</div>
-				}
-				<div class="form-field">
-					<button mat-button id="join-btn" type="submit" [disabled]="loginForm.invalid">Login</button>
+				<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 }}</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>
-
-	<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>
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss
index d8650c7..eabfd93 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss
@@ -1,260 +1,146 @@
-$loginBorderRadius: 0.35rem;
-$loginColor: #e6e6e6;
-$loginError: #770000;
-$loginInputBackgroundColor: #434a52;
-$loginInputHoverBackgroundColor: #3c4249;
-$loginLabelBackgroundColor: #363b41;
-$loginSubmitBackgroundColor: #0087a9;
-$loginSubmitDisabledBackgroundColor: #264b55;
-
-$loginSubmitColor: #eee;
-$loginSubmitDisabledColor: #bdbdbd;
-
-$loginSubmitHoverBackgroundColor: #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: $loginColor;
+* {
+	box-sizing: border-box;
 }
 
-#header,
-.footer {
-	background-color: transparent;
-	color: $loginColor;
-}
-
-.loginError {
-	font-size: 14px;
-	color: $loginError;
-	text-shadow: 0.2px 0px #ffffff;
-	text-align: left;
-	font-weight: 600;
-}
-
-.loginError mat-icon {
-	vertical-align: bottom;
-	padding-right: 4px;
-}
-
-.loginError a {
-	color: $loginError;
-	text-decoration: underline;
-}
-
-.footer {
-	position: absolute;
-	bottom: 0;
-	font-size: 9px;
-	height: auto;
-}
-
-.footer a {
-	color: $loginColor;
-}
-
-#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;
+body {
 	margin: 0;
-	outline: 0;
-	padding: 0;
-	transition: background-color 0.3s;
+	font-family: Arial, sans-serif;
+	background-color: #f8fafa;
 }
 
-input[type='submit'] {
-	cursor: pointer;
+.login-container {
+	height: 100vh;
 }
 
-.form {
-	display: grid;
-	gap: $formGap;
-}
-
-.form input[type='password'],
-.form input[type='text'],
-.form button[type='submit'] {
-	inline-size: 100%;
-}
-
-.form-field {
+.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 {
-	flex: 1;
+	width: 100%;
 }
 
-.login {
-	color: $loginColor;
-}
-
-.login label.error {
-	background-color: $loginError;
-}
-.login label,
-.login input[type='text'],
-.login input[type='password'] {
-	border-radius: $loginBorderRadius;
-	padding: 0.85rem;
-}
-#room-id-input {
-	border-radius: 0;
-}
-
-.login button[type='submit'] {
-	border-radius: $loginBorderRadius;
-	padding: 0.4rem;
-	cursor: pointer;
-}
-
-.login button:disabled[type='submit'] {
-	cursor: auto;
-	color: $loginSubmitDisabledColor !important;
-	background-color: $loginSubmitDisabledBackgroundColor !important;
-}
-
-.login label {
-	background-color: $loginLabelBackgroundColor;
-	border-bottom-right-radius: 0;
-	border-top-right-radius: 0;
-	padding-inline: 1.25rem;
-}
-
-.login input[type='password'],
-.login input[type='text'] {
-	background-color: $loginInputBackgroundColor;
-	border-bottom-left-radius: 0;
-	border-top-left-radius: 0;
-	font-size: 16px;
-}
-
-.login input[type='password']:focus,
-.login input[type='password']:hover,
-.login input[type='text']:focus,
-.login input[type='text']:hover {
-	background-color: $loginInputHoverBackgroundColor;
-}
-
-.login button[type='submit'] {
-	background-color: $loginSubmitBackgroundColor;
-	color: $loginSubmitColor;
-	font-weight: 500;
-	text-transform: uppercase;
-}
-
-.login button[type='submit']:focus,
-.login button[type='submit']:hover {
-	background-color: $loginSubmitHoverBackgroundColor;
-}
-#clear-room-id-btn {
-	height: auto;
-	background-color: $loginInputBackgroundColor;
-	border-radius: 0;
-	color: $loginColor;
-	mat-icon {
-		vertical-align: middle;
-	}
-}
-#room-id-generator-btn {
-	height: auto;
-	background-color: $loginInputBackgroundColor;
-	border-radius: $loginBorderRadius;
-	border-bottom-left-radius: 0;
-	border-top-left-radius: 0;
-	color: $loginColor;
-	mat-icon {
-		vertical-align: middle;
-	}
-	&:hover {
-		background-color: $loginInputHoverBackgroundColor;
-	}
-}
-
-p {
-	margin-block: 1.5rem;
-}
-
-.text--center {
+.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/login/login.component.spec.ts b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.spec.ts
index e95c3a1..29a7dd0 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.spec.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.spec.ts
@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { LoginComponent } from './login.component';
 
 describe('LoginComponent', () => {
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts
index e7f3bbd..baeffbe 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.ts
@@ -1,47 +1,45 @@
-import { NgClass } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { MatToolbar } from '@angular/material/toolbar';
-import { MatTooltip } from '@angular/material/tooltip';
+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 { ActivatedRoute, Router, RouterModule } from '@angular/router';
-import { UserRole } from 'shared-meet-components';
-import { AuthService, ContextService } from '../../services/index';
+import { AuthService } from '../../services/index';
 
 @Component({
-	selector: 'app-login',
+	selector: 'ov-login',
 	standalone: true,
-	imports: [MatToolbar, MatTooltip, MatIcon, FormsModule, ReactiveFormsModule, NgClass, MatButton, RouterModule],
+	imports: [
+		MatFormFieldModule,
+		ReactiveFormsModule,
+		MatInputModule,
+		MatButtonModule,
+		FormsModule,
+		MatCardModule,
+		MatIconModule,
+		RouterModule
+	],
 	templateUrl: './login.component.html',
 	styleUrl: './login.component.scss'
 })
-export class LoginComponent {
-	version = '';
-	openviduLogoUrl = '';
-	backgroundImageUrl = '';
-
+export class LoginComponent implements OnInit {
 	loginForm = new FormGroup({
 		username: new FormControl('', [Validators.required, Validators.minLength(4)]),
 		password: new FormControl('', [Validators.required, Validators.minLength(4)])
 	});
 	loginErrorMessage: string | undefined;
-	invalidRole = false;
-	redirectTo = ''; // By default, redirect to RoomCreatorComponent
+	redirectTo = 'console'; // By default, redirect to the console page
 
 	constructor(
 		private router: Router,
 		private route: ActivatedRoute,
-		private authService: AuthService,
-		private contextService: ContextService
+		private authService: AuthService
 	) {}
 
-	async ngOnInit() {
-		this.version = this.contextService.getVersion();
-		this.openviduLogoUrl = this.contextService.getOpenViduLogoUrl();
-		this.backgroundImageUrl = this.contextService.getBackgroundImageUrl();
-
+	ngOnInit() {
 		this.route.queryParams.subscribe((params) => {
 			if (params['redirectTo']) {
 				this.redirectTo = params['redirectTo'];
@@ -56,16 +54,6 @@ export class LoginComponent {
 		try {
 			await this.authService.login(username!, password!);
 
-			// Check if the user has the expected role
-			const role = await this.authService.getUserRole();
-			if (role !== UserRole.USER) {
-				await this.authService.logout();
-				this.invalidRole = true;
-				this.loginErrorMessage =
-					'You have been authenticated as an admin, but admin users cannot join meetings. Please log in with a user account or';
-				return;
-			}
-
 			let urlTree = this.router.parseUrl(this.redirectTo);
 			this.router.navigateByUrl(urlTree);
 		} catch (error) {