aril 1.1.64 → 1.1.65

package/theme/layout/app/profileSidebar/app.profilesidebar.component.ts

@@ -1,141 +1,141 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnInit, effect, signal } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-
-import { AvatarModule } from 'primeng/avatar';
-import { ButtonModule } from 'primeng/button';
-import { ChipModule } from 'primeng/chip';
-import { DialogService } from 'primeng/dynamicdialog';
-import { SidebarModule } from 'primeng/sidebar';
-import { SkeletonModule } from 'primeng/skeleton';
-import { TagModule } from 'primeng/tag';
-
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { KeycloakService } from 'keycloak-angular';
-import { Subject, switchMap } from 'rxjs';
-
-import { ButtonComponent } from 'aril/ui/button';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { ChangePasswordModalComponent } from './modals/change-password-modal/change-password-modal.component';
-import { EditProfileModalComponent } from './modals/edit-profile-modal/edit-profile-modal.component';
-import { GetUserRequestDTO, ProfileService, UserResponseDTO } from './profile.service';
-
-@Component({
-	standalone: true,
-	selector: 'app-profilemenu',
-	imports: [
-		CommonModule,
-		SidebarModule,
-		TagModule,
-		ButtonModule,
-		SkeletonModule,
-		AvatarModule,
-		ChipModule,
-		TranslocoModule,
-		ButtonComponent
-	],
-	templateUrl: './app.profilesidebar.component.html',
-	styleUrls: ['./app.profilesidebar.component.scss'],
-	providers: [DialogService]
-})
-export class AppProfileSidebarComponent implements OnInit {
-	username: string;
-	userProfile = signal<UserResponseDTO | null>(null);
-
-	private subjects = {
-		getUser: new Subject<GetUserRequestDTO>()
-	};
-
-	getUserService = toSignal(this.subjects.getUser.pipe(switchMap((data) => this.profileService.getUser(data))));
-
-	constructor(
-		public layoutService: LayoutService,
-		private readonly keycloak: KeycloakService,
-		private readonly profileService: ProfileService,
-		private readonly dialogService: DialogService,
-		private readonly translocoService: TranslocoService
-	) {
-		this.username = this.keycloak.getUsername();
-		this.initializeEffects();
-	}
-
-	ngOnInit(): void {
-		this.loadUserProfile();
-	}
-
-	private initializeEffects(): void {
-		effect(
-			() => {
-				const service = this.getUserService();
-				if (service?.response) {
-					this.userProfile.set(service.response);
-				}
-			},
-			{ allowSignalWrites: true }
-		);
-	}
-
-	private loadUserProfile(): void {
-		const userId = this.keycloak.getKeycloakInstance().idTokenParsed?.sub;
-		if (userId) {
-			this.subjects.getUser.next({ id: userId });
-		}
-	}
-
-	get visible(): boolean {
-		return this.layoutService.state.profileSidebarVisible;
-	}
-
-	set visible(_val: boolean) {
-		this.layoutService.state.profileSidebarVisible = _val;
-		if (_val && !this.userProfile()) {
-			this.loadUserProfile();
-		}
-	}
-
-	logout(): void {
-		this.keycloak.logout();
-	}
-
-	editProfile(): void {
-		if (!this.userProfile()) return;
-
-		const ref = this.dialogService.open(EditProfileModalComponent, {
-			header: this.translocoService.translate('profileSidebar.editProfile'),
-			width: '40%',
-			height: 'auto',
-			modal: true,
-			maximizable: false,
-			closable: true,
-			data: {
-				userProfile: this.userProfile()
-			}
-		});
-
-		ref.onClose.subscribe((result) => {
-			if (result?.status === 'success') {
-				this.loadUserProfile();
-			}
-		});
-	}
-
-	changePassword(): void {
-		const userId = this.keycloak.getKeycloakInstance().idTokenParsed?.sub;
-		if (!userId) return;
-
-		const ref = this.dialogService.open(ChangePasswordModalComponent, {
-			header: this.translocoService.translate('profileSidebar.changePassword'),
-			width: '500px',
-			height: 'auto',
-			modal: true,
-			maximizable: false,
-			closable: true,
-			data: {
-				userId: userId
-			}
-		});
-
-		ref.onClose.subscribe();
-	}
-}
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, effect, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+import { AvatarModule } from 'primeng/avatar';
+import { ButtonModule } from 'primeng/button';
+import { ChipModule } from 'primeng/chip';
+import { DialogService } from 'primeng/dynamicdialog';
+import { SidebarModule } from 'primeng/sidebar';
+import { SkeletonModule } from 'primeng/skeleton';
+import { TagModule } from 'primeng/tag';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { KeycloakService } from 'keycloak-angular';
+import { Subject, switchMap } from 'rxjs';
+
+import { ButtonComponent } from 'aril/ui/button';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { ChangePasswordModalComponent } from './modals/change-password-modal/change-password-modal.component';
+import { EditProfileModalComponent } from './modals/edit-profile-modal/edit-profile-modal.component';
+import { GetUserRequestDTO, ProfileService, UserResponseDTO } from './profile.service';
+
+@Component({
+	standalone: true,
+	selector: 'app-profilemenu',
+	imports: [
+		CommonModule,
+		SidebarModule,
+		TagModule,
+		ButtonModule,
+		SkeletonModule,
+		AvatarModule,
+		ChipModule,
+		TranslocoModule,
+		ButtonComponent
+	],
+	templateUrl: './app.profilesidebar.component.html',
+	styleUrls: ['./app.profilesidebar.component.scss'],
+	providers: [DialogService]
+})
+export class AppProfileSidebarComponent implements OnInit {
+	username: string;
+	userProfile = signal<UserResponseDTO | null>(null);
+
+	private subjects = {
+		getUser: new Subject<GetUserRequestDTO>()
+	};
+
+	getUserService = toSignal(this.subjects.getUser.pipe(switchMap((data) => this.profileService.getUser(data))));
+
+	constructor(
+		public layoutService: LayoutService,
+		private readonly keycloak: KeycloakService,
+		private readonly profileService: ProfileService,
+		private readonly dialogService: DialogService,
+		private readonly translocoService: TranslocoService
+	) {
+		this.username = this.keycloak.getUsername();
+		this.initializeEffects();
+	}
+
+	ngOnInit(): void {
+		this.loadUserProfile();
+	}
+
+	private initializeEffects(): void {
+		effect(
+			() => {
+				const service = this.getUserService();
+				if (service?.response) {
+					this.userProfile.set(service.response);
+				}
+			},
+			{ allowSignalWrites: true }
+		);
+	}
+
+	private loadUserProfile(): void {
+		const userId = this.keycloak.getKeycloakInstance().idTokenParsed?.sub;
+		if (userId) {
+			this.subjects.getUser.next({ id: userId });
+		}
+	}
+
+	get visible(): boolean {
+		return this.layoutService.state.profileSidebarVisible;
+	}
+
+	set visible(_val: boolean) {
+		this.layoutService.state.profileSidebarVisible = _val;
+		if (_val && !this.userProfile()) {
+			this.loadUserProfile();
+		}
+	}
+
+	logout(): void {
+		this.keycloak.logout();
+	}
+
+	editProfile(): void {
+		if (!this.userProfile()) return;
+
+		const ref = this.dialogService.open(EditProfileModalComponent, {
+			header: this.translocoService.translate('profileSidebar.editProfile'),
+			width: '40%',
+			height: 'auto',
+			modal: true,
+			maximizable: false,
+			closable: true,
+			data: {
+				userProfile: this.userProfile()
+			}
+		});
+
+		ref.onClose.subscribe((result) => {
+			if (result?.status === 'success') {
+				this.loadUserProfile();
+			}
+		});
+	}
+
+	changePassword(): void {
+		const userId = this.keycloak.getKeycloakInstance().idTokenParsed?.sub;
+		if (!userId) return;
+
+		const ref = this.dialogService.open(ChangePasswordModalComponent, {
+			header: this.translocoService.translate('profileSidebar.changePassword'),
+			width: '500px',
+			height: 'auto',
+			modal: true,
+			maximizable: false,
+			closable: true,
+			data: {
+				userId: userId
+			}
+		});
+
+		ref.onClose.subscribe();
+	}
+}

package/theme/layout/app/profileSidebar/modals/change-password-modal/change-password-modal.component.html

@@ -1,48 +1,48 @@
-<div class="change-password-modal" *transloco="let t; read: 'profileSidebar'">
-	<aril-form [formGroup]="passwordForm">
-		<aril-field [label]="t('newPassword')" [cols]="{ xl: 12, lg: 12, md: 12, sm: 12 }" [markAsRequired]="true">
-			<p-password 
-				formControlName="newPassword"
-				[placeholder]="t('newPassword')"
-				[feedback]="false"
-				[toggleMask]="true"
-				styleClass="w-full"
-				autocomplete="new-password"
-				[pTooltip]="passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched ? getErrorMessage('newPassword') : ''"
-				tooltipPosition="top"
-				tooltipStyleClass="tooltipErrorMessage">
-			</p-password>
-		</aril-field>
-
-		<aril-field [label]="t('confirmPassword')" [cols]="{ xl: 12, lg: 12, md: 12, sm: 12 }" [markAsRequired]="true">
-			<p-password 
-				formControlName="confirmPassword"
-				[placeholder]="t('confirmPassword')"
-				[feedback]="false"
-				[toggleMask]="true"
-				styleClass="w-full"
-				autocomplete="new-password"
-				[pTooltip]="passwordForm.get('confirmPassword')?.invalid && passwordForm.get('confirmPassword')?.touched ? getErrorMessage('confirmPassword') : ''"
-				tooltipPosition="top"
-				tooltipStyleClass="tooltipErrorMessage">
-			</p-password>
-		</aril-field>
-
-		<div class="col-12 flex justify-content-end mt-4 gap-2">
-			<aril-button
-				color="danger"
-				[label]="t('cancel')"
-				[outlined]="true"
-				icon="TIMES"
-				(clickEvent)="cancel()">
-			</aril-button>
-			<aril-button
-				color="success"
-				[label]="t('save')"
-				[raised]="false"
-				icon="CHECK"
-				(clickEvent)="submit()">
-			</aril-button>
-		</div>
-	</aril-form>
-</div>
+<div class="change-password-modal" *transloco="let t; read: 'profileSidebar'">
+	<aril-form [formGroup]="passwordForm">
+		<aril-field [label]="t('newPassword')" [cols]="{ xl: 12, lg: 12, md: 12, sm: 12 }" [markAsRequired]="true">
+			<p-password 
+				formControlName="newPassword"
+				[placeholder]="t('newPassword')"
+				[feedback]="false"
+				[toggleMask]="true"
+				styleClass="w-full"
+				autocomplete="new-password"
+				[pTooltip]="passwordForm.get('newPassword')?.invalid && passwordForm.get('newPassword')?.touched ? getErrorMessage('newPassword') : ''"
+				tooltipPosition="top"
+				tooltipStyleClass="tooltipErrorMessage">
+			</p-password>
+		</aril-field>
+
+		<aril-field [label]="t('confirmPassword')" [cols]="{ xl: 12, lg: 12, md: 12, sm: 12 }" [markAsRequired]="true">
+			<p-password 
+				formControlName="confirmPassword"
+				[placeholder]="t('confirmPassword')"
+				[feedback]="false"
+				[toggleMask]="true"
+				styleClass="w-full"
+				autocomplete="new-password"
+				[pTooltip]="passwordForm.get('confirmPassword')?.invalid && passwordForm.get('confirmPassword')?.touched ? getErrorMessage('confirmPassword') : ''"
+				tooltipPosition="top"
+				tooltipStyleClass="tooltipErrorMessage">
+			</p-password>
+		</aril-field>
+
+		<div class="col-12 flex justify-content-end mt-4 gap-2">
+			<aril-button
+				color="danger"
+				[label]="t('cancel')"
+				[outlined]="true"
+				icon="TIMES"
+				(clickEvent)="cancel()">
+			</aril-button>
+			<aril-button
+				color="success"
+				[label]="t('save')"
+				[raised]="false"
+				icon="CHECK"
+				(clickEvent)="submit()">
+			</aril-button>
+		</div>
+	</aril-form>
+</div>

package/theme/layout/app/profileSidebar/modals/change-password-modal/change-password-modal.component.scss

@@ -1,28 +1,28 @@
-.change-password-modal {
-  
-  :host ::ng-deep {
-    .p-password.ng-invalid.ng-touched .p-inputtext {
-      border-color: var(--red-500, #ef4444);
-      box-shadow: 0 0 0 1px var(--red-500, #ef4444);
-    }
-    
-    .p-password.ng-valid.ng-touched .p-inputtext {
-      border-color: var(--green-500, #22c55e);
-      box-shadow: 0 0 0 1px var(--green-500, #22c55e);
-    }
-
-    .tooltipErrorMessage {
-      background-color: var(--red-500, #ef4444) !important;
-      color: white !important;
-      font-size: 0.75rem !important;
-      font-weight: 500 !important;
-      border-radius: 4px !important;
-      padding: 0.5rem 0.75rem !important;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
-    }
-
-    .tooltipErrorMessage .p-tooltip-arrow {
-      border-top-color: var(--red-500, #ef4444) !important;
-    }
-  }
+.change-password-modal {
+  
+  :host ::ng-deep {
+    .p-password.ng-invalid.ng-touched .p-inputtext {
+      border-color: var(--red-500, #ef4444);
+      box-shadow: 0 0 0 1px var(--red-500, #ef4444);
+    }
+    
+    .p-password.ng-valid.ng-touched .p-inputtext {
+      border-color: var(--green-500, #22c55e);
+      box-shadow: 0 0 0 1px var(--green-500, #22c55e);
+    }
+
+    .tooltipErrorMessage {
+      background-color: var(--red-500, #ef4444) !important;
+      color: white !important;
+      font-size: 0.75rem !important;
+      font-weight: 500 !important;
+      border-radius: 4px !important;
+      padding: 0.5rem 0.75rem !important;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .tooltipErrorMessage .p-tooltip-arrow {
+      border-top-color: var(--red-500, #ef4444) !important;
+    }
+  }
 }