frontend: Refactor user management components and update routes

meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/index.ts

@@ -3,5 +3,5 @@ export * from './config/config.component';
 export * from './console/console.component';
 export * from './embedded/embedded.component';
 export * from './overview/overview.component';
-export * from './users-permissions/users-permissions.component';
+export * from './users/users.component';
 

meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/users/users.component.html

@@ -1,12 +1,10 @@
 <div class="ov-page-container ov-mb-xxl">
 	<div class="page-header">
 		<div class="title">
-			<mat-icon class="material-symbols-outlined ov-users-permissions">passkey</mat-icon>
+			<mat-icon class="material-symbols-outlined ov-users">group</mat-icon>
-			<h1>Users & Permissions</h1>
+			<h1>Users</h1>
 		</div>
-		<p class="subtitle">
+		<p class="subtitle">Manage your users, control access, and register new accounts.</p>
-			Manage who can access your video meeting rooms and control their permissions.
-		</p>
 	</div>
 
 	@if (isLoading()) {
@@ -80,8 +78,8 @@
 							<div class="form-field-header">
 								<h3>Administrator Password</h3>
 								<p class="field-description">
-									Update your administrator password to keep your account secure.
+									Update your administrator password to keep your account secure. We recommend using a
-									We recommend using a strong, unique password.
+									strong, unique password.
 								</p>
 							</div>
 
@@ -139,7 +137,10 @@
 									>
 										<mat-icon>{{ showNewPassword() ? 'visibility_off' : 'visibility' }}</mat-icon>
 									</button>
-									<mat-hint>Minimum 5 characters. We recommend using letters, numbers, and symbols</mat-hint>
+									<mat-hint
+										>Minimum 5 characters. We recommend using letters, numbers, and
+										symbols</mat-hint
+									>
 									@if (getNewPasswordError()) {
 										<mat-error>{{ getNewPasswordError() }}</mat-error>
 									}
@@ -187,50 +188,6 @@
 					</button>
 				</mat-card-actions>
 			</mat-card>
-
-			<!-- Access & Permissions Section -->
-			<!-- <mat-card class="section-card access-section">
-				<mat-card-header>
-					<div mat-card-avatar>
-						<mat-icon class="section-icon">security</mat-icon>
-					</div>
-					<mat-card-title>Access & Permissions</mat-card-title>
-				</mat-card-header>
-
-				<mat-divider class="section-divider"></mat-divider>
-
-				<mat-card-content>
-					<form [formGroup]="accessSettingsForm" (ngSubmit)="onSaveAccessSettings()"> -->
-			<!-- Authentication for joining room -->
-			<!-- <div class="form-section">
-							<div class="form-field-header">
-								<h3>Authentication for joining room</h3>
-							</div>
-							<p class="field-description">Choose which users must authenticate for joining room.</p>
-
-							<mat-form-field subscriptSizing="dynamic" appearance="outline" class="auth-select-field">
-								<mat-label>Select...</mat-label>
-								<mat-select formControlName="authModeToAccessRoom">
-									@for (option of authModeOptions; track option.value) {
-										<mat-option [value]="option.value">{{ option.label }}</mat-option>
-									}
-								</mat-select>
-							</mat-form-field>
-						</div>
-					</form>
-				</mat-card-content>
-				<mat-card-actions>
-					<button
-						mat-button
-						type="submit"
-						(click)="onSaveAccessSettings()"
-						[disabled]="!hasAccessSettingsChanges()"
-						class="primary-button"
-					>
-						Save configuration
-					</button>
-				</mat-card-actions>
-			</mat-card> -->
 		</div>
 	}
 </div>

meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/users/users.component.ts

@@ -24,7 +24,7 @@ import { NotificationService } from '../../../../shared/services/notification.se
 import { AuthService } from '../../../auth/services/auth.service';
 
 @Component({
-	selector: 'ov-users-permissions',
+	selector: 'ov-users',
 	imports: [
 		MatCardModule,
 		MatButtonModule,
@@ -38,10 +38,10 @@ import { AuthService } from '../../../auth/services/auth.service';
 		ReactiveFormsModule
 		// ProFeatureBadgeComponent
 	],
-	templateUrl: './users-permissions.component.html',
+	templateUrl: './users.component.html',
-	styleUrl: './users-permissions.component.scss'
+	styleUrl: './users.component.scss'
 })
-export class UsersPermissionsComponent implements OnInit {
+export class UsersComponent implements OnInit {
 	isLoading = signal(true);
 
 	showCurrentPassword = signal(false);

meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/routes/console.routes.ts

@@ -23,6 +23,19 @@ export const consoleChildRoutes: DomainRouteConfig[] = [
 	},
 	...roomsConsoleRoutes,
 	...recordingsConsoleRoutes,
+	{
+		route: {
+			path: 'users',
+			loadComponent: () => import('../pages/users/users.component').then((m) => m.UsersComponent)
+		},
+		navMetadata: {
+			label: 'Users',
+			route: 'users',
+			icon: 'group',
+			iconClass: 'ov-users material-symbols-outlined',
+			order: 4
+		}
+	},
 	{
 		route: {
 			path: 'embedded',
@@ -33,20 +46,6 @@ export const consoleChildRoutes: DomainRouteConfig[] = [
 			route: 'embedded',
 			icon: 'code_blocks',
 			iconClass: 'material-symbols-outlined ov-developer-icon',
-			order: 4
-		}
-	},
-	{
-		route: {
-			path: 'users-permissions',
-			loadComponent: () =>
-				import('../pages/users-permissions/users-permissions.component').then((m) => m.UsersPermissionsComponent)
-		},
-		navMetadata: {
-			label: 'Users & Permissions',
-			route: 'users-permissions',
-			icon: 'passkey',
-			iconClass: 'ov-users-permissions material-symbols-outlined',
 			order: 5
 		}
 	},

meet-ce/frontend/src/assets/styles/_tokens-core.scss

@@ -24,7 +24,7 @@
 	--ov-meet-icon-rooms: var(--ov-meet-color-primary); // video_chat, meeting_room
 	--ov-meet-icon-recordings: var(--ov-meet-color-accent); // video_library, play_circle
 	--ov-meet-icon-developer: var(--ov-meet-color-warning); // code, api
-	--ov-meet-icon-users-permissions: #e05200; // group, manage_accounts
+	--ov-meet-icon-users: #37b953; // group, manage_accounts
 	--ov-meet-icon-settings: var(--ov-meet-color-secondary); // settings, tune
 
 	// --ov-meet-icon-about: var(--ov-meet-color-info); // info, security, help

meet-ce/frontend/src/assets/styles/_utilities.scss

@@ -107,8 +107,8 @@
 	@include layout.ov-theme-transition;
 }
 
-.ov-users-permissions {
+.ov-users {
-	color: var(--ov-meet-icon-users-permissions) !important;
+	color: var(--ov-meet-icon-users) !important;
 	overflow: none;
 	@include layout.ov-theme-transition;
 }