From a2e78afda543f0ca1d835685d67bc66b9f3dceec Mon Sep 17 00:00:00 2001
From: juancarmore <juancar_more2@hotmail.com>
Date: Fri, 22 Aug 2025 22:47:17 +0200
Subject: [PATCH] frontend: enhance login form with password visibility toggle
 and improved input handling

---
 .../src/lib/pages/login/login.component.html  | 28 +++++++++++++++++--
 .../src/lib/pages/login/login.component.ts    |  9 ++++--
 2 files changed, 32 insertions(+), 5 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 2a06c8b..6a81bbd 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
@@ -6,18 +6,40 @@
 			<form [formGroup]="loginForm" (ngSubmit)="login()" id="login-form">
 				<mat-form-field class="form-input" appearance="fill">
 					<mat-label>Username</mat-label>
-					<input matInput formControlName="username" required id="username-input" />
+					<input matInput formControlName="username" placeholder="Enter your username" id="username-input" />
 					<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 id="password-input" />
+					<input
+						matInput
+						[type]="showPassword ? 'text' : 'password'"
+						formControlName="password"
+						placeholder="Enter your password"
+						id="password-input"
+					/>
 					<mat-icon matPrefix>lock</mat-icon>
+					<button
+						mat-icon-button
+						matSuffix
+						type="button"
+						class="input-btn"
+						(click)="showPassword = !showPassword"
+						matTooltip="{{ showPassword ? 'Hide password' : 'Show password' }}"
+					>
+						<mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>
+					</button>
 				</mat-form-field>
 
 				<div class="login-button">
-					<button mat-raised-button color="primary" type="submit" [disabled]="loginForm.invalid" id="login-button">
+					<button
+						mat-raised-button
+						color="primary"
+						type="submit"
+						[disabled]="loginForm.invalid"
+						id="login-button"
+					>
 						Login
 					</button>
 				</div>
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 a5fdcd3..3271cf6 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
@@ -6,6 +6,7 @@ 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 { MatTooltipModule } from '@angular/material/tooltip';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { AuthService, NavigationService } from '@lib/services';
 
@@ -20,6 +21,7 @@ import { AuthService, NavigationService } from '@lib/services';
 		FormsModule,
 		MatCardModule,
 		MatIconModule,
+		MatTooltipModule,
 		RouterModule
 	],
 	templateUrl: './login.component.html',
@@ -27,10 +29,13 @@ import { AuthService, NavigationService } from '@lib/services';
 })
 export class LoginComponent implements OnInit {
 	loginForm = new FormGroup({
-		username: new FormControl('', [Validators.required, Validators.minLength(4)]),
-		password: new FormControl('', [Validators.required, Validators.minLength(4)])
+		username: new FormControl('', [Validators.required]),
+		password: new FormControl('', [Validators.required])
 	});
+
+	showPassword = false;
 	loginErrorMessage: string | undefined;
+
 	redirectTo = ''; // By default, redirect to home page
 
 	constructor(