From d9ec6d687fed2afa3ee12072e215b36ceb4d9fa7 Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Mon, 29 Sep 2025 12:12:49 +0200
Subject: [PATCH] frontend: update users & permissions page for improved
 clarity and consistency in UI elements

---
 .../users-permissions.component.html          | 35 +++++++++++--------
 .../users-permissions.component.scss          | 11 ------
 2 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.html
index f27b10c..96784f2 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.html
@@ -1,12 +1,11 @@
 <div class="ov-page-container ov-mb-xxl">
 	<div class="page-header">
 		<div class="title">
-			<mat-icon class="material-symbols-outlined ov-settings-icon">passkey</mat-icon>
-			<h1>Users & permissions</h1>
+			<mat-icon class="material-symbols-outlined ov-users-permissions">passkey</mat-icon>
+			<h1>Users & Permissions</h1>
 		</div>
 		<p class="subtitle">
-			Configure authentication settings and access controls to manage who can join your rooms and their
-			permissions.
+			Manage who can access your video meeting rooms and control their permissions.
 		</p>
 	</div>
 
@@ -16,9 +15,9 @@
 				<div class="loading-header">
 					<div class="loading-title">
 						<mat-icon class="ov-settings-icon loading-icon">settings</mat-icon>
-						<h1>Loading Settings</h1>
+						<h1>Loading Configuration</h1>
 					</div>
-					<p class="loading-subtitle">Please wait while we fetch your settings...</p>
+					<p class="loading-subtitle">Please wait while we load your security configurations...</p>
 				</div>
 
 				<div class="loading-spinner-container">
@@ -45,10 +44,10 @@
 			</mat-card> -->
 
 			<!-- Users Section -->
-			<mat-card class="section-card branding-section">
+			<mat-card class="section-card users-section">
 				<mat-card-header class="users-header">
 					<div mat-card-avatar class="users-avatar">
-						<mat-icon class="section-icon users-icon">group</mat-icon>
+						<mat-icon class="section-icon users-icon">admin_panel_settings</mat-icon>
 					</div>
 					<mat-card-title class="users-title">Users</mat-card-title>
 				</mat-card-header>
@@ -79,15 +78,19 @@
 					<form [formGroup]="adminCredentialsForm" (ngSubmit)="onSaveAdminCredentials()">
 						<div class="form-section">
 							<div class="form-field-header">
-								<h3>Admin Credentials</h3>
-								<p class="field-description">Change the password for the admin user.</p>
+								<h3>Administrator Password</h3>
+								<p class="field-description">
+									Update your administrator password to keep your account secure.
+									We recommend using a strong, unique password.
+								</p>
 							</div>
 
 							<div class="admin-auth-form">
 								<!-- Username Field -->
 								<mat-form-field subscriptSizing="dynamic" appearance="outline" class="username-field">
-									<mat-label>Username</mat-label>
+									<mat-label>Administrator Username</mat-label>
 									<input matInput type="text" formControlName="username" placeholder="admin" />
+									<mat-hint>This is your username to access the administration panel</mat-hint>
 								</mat-form-field>
 
 								<!-- Current Password Field -->
@@ -111,6 +114,7 @@
 											showCurrentPassword() ? 'visibility_off' : 'visibility'
 										}}</mat-icon>
 									</button>
+									<mat-hint>We need to verify your identity with your current password</mat-hint>
 									@if (getCurrentPasswordError()) {
 										<mat-error>{{ getCurrentPasswordError() }}</mat-error>
 									}
@@ -123,7 +127,7 @@
 										matInput
 										[type]="showNewPassword() ? 'text' : 'password'"
 										formControlName="newPassword"
-										placeholder="Enter your new password"
+										placeholder="Create a strong, secure password"
 									/>
 									<button
 										mat-icon-button
@@ -135,7 +139,7 @@
 									>
 										<mat-icon>{{ showNewPassword() ? 'visibility_off' : 'visibility' }}</mat-icon>
 									</button>
-									<mat-hint>Minimum of 5 characters</mat-hint>
+									<mat-hint>Minimum 5 characters. We recommend using letters, numbers, and symbols</mat-hint>
 									@if (getNewPasswordError()) {
 										<mat-error>{{ getNewPasswordError() }}</mat-error>
 									}
@@ -148,7 +152,7 @@
 										matInput
 										[type]="showConfirmPassword() ? 'text' : 'password'"
 										formControlName="confirmPassword"
-										placeholder="Confirm your new password"
+										placeholder="Type the new password again"
 									/>
 									<button
 										mat-icon-button
@@ -162,6 +166,7 @@
 											showConfirmPassword() ? 'visibility_off' : 'visibility'
 										}}</mat-icon>
 									</button>
+									<mat-hint>Must match exactly with your new password</mat-hint>
 									@if (getConfirmPasswordError()) {
 										<mat-error>{{ getConfirmPasswordError() }}</mat-error>
 									}
@@ -178,7 +183,7 @@
 						[disabled]="adminCredentialsForm.invalid"
 						(click)="onSaveAdminCredentials()"
 					>
-						Save admin password
+						Update Administrator Password
 					</button>
 				</mat-card-actions>
 			</mat-card>
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss
index 2ab1aeb..539e928 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss
@@ -1,13 +1,5 @@
 @import '../../../../../../../src/assets/styles/design-tokens';
 
-.branding-section {
-	@extend .ov-section-card-primary;
-}
-
-.access-section {
-	@extend .ov-section-card-accent;
-}
-
 .form-field-header {
 	position: relative;
 }
@@ -49,7 +41,6 @@
 	.password-field {
 		::ng-deep {
 			.mat-mdc-form-field {
-				// Agregar indicador visual para campo requerido
 				.mat-mdc-floating-label {
 					&.mdc-floating-label--required::after {
 						content: ' *';
@@ -61,7 +52,6 @@
 	}
 }
 
-// Estilos adicionales para mejorar la apariencia general
 .form-section {
 	margin-bottom: var(--ov-meet-spacing-lg, 24px);
 
@@ -83,7 +73,6 @@
 	}
 }
 
-// Specific form customizations
 .mat-mdc-form-field {
 	width: 100%;