aril 1.0.39 → 1.0.41

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

@@ -2,150 +2,122 @@
 	[(visible)]="visible"
 	position="right"
 	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
-	styleClass="layout-profile-sidebar w-full sm:w-25rem">
-	<div class="flex flex-column mx-auto md:mx-0">
-		<span class="mb-2 font-semibold">Hoşgeldiniz</span>
-		<span class="text-color-secondary font-medium mb-5">{{username}}</span>
+	styleClass="layout-profile-sidebar w-full sm:w-30rem">
+	<ng-template pTemplate="header">
+		<div class="flex align-items-center gap-2" *transloco="let t; read: 'profileSidebar'">
+			<span class="font-bold">{{ t('personalInfo') }}</span>
+		</div>
+	</ng-template>
 
-		<ul class="list-none m-0 p-0">
-			<!-- <li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-user text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Profile</span>
-						<p class="text-color-secondary m-0">Lorem ipsum date visale</p>
+	@if (userProfile()) {
+		<div class="profile-content" *transloco="let t; read: 'profileSidebar'">
+			<!-- Personal Information -->
+			<div class="info-section">
+				<div class="info-items">
+					<div class="info-item">
+						<i class="pi pi-user info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('fullName') }}</span>
+							<span class="info-value">{{ userProfile()?.firstName }} {{ userProfile()?.lastName }}</span>
+						</div>
 					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-user text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Billing</span>
-						<p class="text-color-secondary m-0">Amet mimin mıollit</p>
-					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-cog text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Settings</span>
-						<p class="text-color-secondary m-0">Exercitation veniam</p>
-					</div>
-				</a>
-			</li> -->
-			<li (click)="logout()">
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-power-off text-xl text-primary"></i>
-					</span>
-					<div class="ml-3" >
-						<span class="mb-2 font-semibold">Çıkış</span>
-					</div>
-				</a>
-			</li>
-		</ul>
-	</div>
 
-	<!-- <div class="flex flex-column mt-5 mx-auto md:mx-0">
-		<span class="mb-2 font-semibold">Notifications</span>
-		<span class="text-color-secondary font-medium mb-5">You have 3 notifications</span>
-
-		<ul class="list-none m-0 p-0">
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-comment text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Your post has new comments</span>
-						<p class="text-color-secondary m-0">5 min ago</p>
+					<div class="info-item">
+						<i class="pi pi-id-card info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('tcNumber') }}</span>
+							<span class="info-value">{{ userProfile()?.tckn || '' }}</span>
+						</div>
 					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-trash text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Your post has been deleted</span>
-						<p class="text-color-secondary m-0">15min ago</p>
+
+					<div class="info-item">
+						<i class="pi pi-envelope info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('email') }}</span>
+							<span class="info-value">{{ userProfile()?.email || '' }}</span>
+						</div>
 					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-folder text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Post has been updated</span>
-						<p class="text-color-secondary m-0">3h ago</p>
+
+					<div class="info-item">
+						<i class="pi pi-phone info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('phone') }}</span>
+							<span class="info-value">{{ userProfile()?.phone || '' }}</span>
+						</div>
 					</div>
-				</a>
-			</li>
-		</ul>
-	</div> -->
 
-	<!-- <div class="flex flex-column mt-5 mx-auto md:mx-0">
-		<span class="mb-2 font-semibold">Messages</span>
-		<span class="text-color-secondary font-medium mb-5">You have new messages</span>
+					<div class="info-item">
+						<i class="pi pi-at info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('username') }}</span>
+							<span class="info-value">{{ userProfile()?.userName }}</span>
+						</div>
+					</div>
 
-		<ul class="list-none m-0 p-0">
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<img src="assets/demo/images/avatar/circle/avatar-m-8.png" alt="Avatar" class="w-2rem h-2rem" />
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">James Robinson</span>
-						<p class="text-color-secondary m-0">10 min ago</p>
+					<div class="info-item">
+						<i class="pi pi-check-circle info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('accountStatus') }}</span>
+							<span class="info-value status" [class.active]="userProfile()?.enabled">
+								{{ userProfile()?.enabled ? t('active') : t('inactive') }}
+							</span>
+						</div>
 					</div>
-					<p-tag value="3" class="ml-auto"></p-tag>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<img src="assets/demo/images/avatar/circle/avatar-f-8.png" alt="Avatar" class="w-2rem h-2rem" />
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Mary Watson</span>
-						<p class="text-color-secondary m-0">15min ago</p>
+
+					<div class="info-item">
+						<i class="pi pi-user info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('systemUser') }}</span>
+							<span class="info-value status" [class.active]="userProfile()?.systemUser">
+								{{ userProfile()?.systemUser ? t('yes') : t('no') }}
+							</span>
+						</div>
 					</div>
-					<p-tag value="1" class="ml-auto"></p-tag>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<img src="assets/demo/images/avatar/circle/avatar-f-4.png" alt="Avatar" class="w-2rem h-2rem" />
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Aisha Webb</span>
-						<p class="text-color-secondary m-0">3h ago</p>
+
+					<div class="info-item">
+						<i class="pi pi-building info-icon"></i>
+						<div class="info-content">
+							<span class="info-label">{{ t('clientSystemUser') }}</span>
+							<span class="info-value">{{ userProfile()?.clientOfSystemUser }}</span>
+						</div>
 					</div>
-					<p-tag value="2" class="ml-auto"></p-tag>
-				</a>
-			</li>
-		</ul>
-	</div> -->
+				</div>
+			</div>
+		</div>
+	}
+
+	<!-- Fixed Action Buttons -->
+	@if (userProfile()) {
+		<div class="action-buttons-container grid p-fluid" *transloco="let t; read: 'profileSidebar'">
+			<div class="col-12 flex justify-content-between align-items-center">
+				<aril-button
+					[label]="t('editProfile')"
+					icon="USER_EDIT"
+					color="primary"
+					[outlined]="true"
+					size="sm"
+					class="col-6"
+					(clickEvent)="editProfile()">
+				</aril-button>
+				<aril-button
+					[label]="t('changePassword')"
+					icon="KEY"
+					color="secondary"
+					[outlined]="true"
+					size="sm"
+					class="col-6"
+					(clickEvent)="changePassword()">
+				</aril-button>
+			</div>
+			<aril-button
+				[label]="t('logout')"
+				icon="SIGN_OUT"
+				color="danger"
+				[outlined]="false"
+				size="sm"
+				class="col-12"
+				(clickEvent)="logout()">
+			</aril-button>
+		</div>
+	}
 </p-sidebar>

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

@@ -0,0 +1,152 @@
+// Modern Profile Sidebar - Matching App UI
+:host {
+  .layout-profile-sidebar {
+    .p-sidebar-content {
+      padding: 0;
+      background: var(--surface-0, #ffffff);
+      color: var(--text-color, #333);
+      height: 100vh;
+      overflow-y: auto;
+      position: relative;
+    }
+  }
+
+  // Content Section
+  .profile-content {
+    padding: 1rem 0.75rem;
+    padding-bottom: 12rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  // Fixed Action Buttons Container - Sadece sidebar içinde
+  .action-buttons-container {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--surface-0, #ffffff);
+    border-top: 1px solid var(--surface-border, #e2e8f0);
+    padding: 1rem 0.75rem;
+    z-index: 300;
+  }
+
+  // Info Sections - Modern Flat Design
+  .info-section {
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: var(--text-color-secondary, #64748b);
+      margin: 0 0 1rem 0;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid var(--surface-border, #e2e8f0);
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+
+      i {
+        color: var(--text-color-secondary, #64748b);
+        font-size: 1rem;
+      }
+    }
+
+    .info-items {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0.75rem 0;
+      border-bottom: 1px solid var(--surface-border, #f1f5f9);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .info-icon {
+        color: var(--text-color-secondary, #64748b);
+        font-size: 1rem;
+        flex-shrink: 0;
+        width: 1.25rem;
+        text-align: center;
+      }
+
+      .info-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+
+        .info-label {
+          font-size: 0.95rem;
+          color: var(--text-color-secondary, #64748b);
+          font-weight: 500;
+          line-height: 1;
+        }
+
+        .info-value {
+          font-size: 0.95rem;
+          color: var(--text-color, #1e293b);
+          font-weight: 400;
+          line-height: 1.3;
+
+          &.status {
+            display: inline-flex;
+            align-items: center;
+            padding: 0.25rem 0.75rem;
+            border-radius: 16px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.025em;
+            width: fit-content;
+            background: var(--red-100, #fee2e2);
+            color: var(--red-700, #b91c1c);
+            border: 1px solid var(--red-200, #fecaca);
+
+            &.active {
+              background: var(--green-100, #dcfce7);
+              color: var(--green-700, #15803d);
+              border: 1px solid var(--green-200, #bbf7d0);
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  // Responsive Design
+  @media (max-width: 768px) {
+    .profile-content {
+      padding: 0.875rem 0.65rem;
+      padding-bottom: 11rem;
+      gap: 1rem;
+    }
+
+    .action-buttons-container {
+      padding: 0.875rem 0.65rem;
+
+      .action-buttons-vertical {
+        gap: 0.65rem;
+      }
+
+      .action-buttons-horizontal {
+        gap: 0.4rem;
+      }
+    }
+
+    .info-item {
+      padding: 0.65rem 0;
+    }
+  }
+
+} 

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

@@ -1,23 +1,86 @@
-import { Component } from '@angular/core';
+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: [SidebarModule, TagModule],
-	templateUrl: './app.profilesidebar.component.html'
+	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 {
+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) {
+	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 {
@@ -26,9 +89,53 @@ export class AppProfileSidebarComponent {
 
 	set visible(_val: boolean) {
 		this.layoutService.state.profileSidebarVisible = _val;
+		if (_val && !this.userProfile()) {
+			this.loadUserProfile();
+		}
 	}
 
-	logout() {
+	logout(): void {
 		this.keycloak.logout();
 	}
+
+	editProfile(): void {
+		if (!this.userProfile()) return;
+
+		const ref = this.dialogService.open(EditProfileModalComponent, {
+			header: this.translocoService.translate('profileSidebar.editProfile'),
+			width: '600px',
+			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.d.ts

@@ -0,0 +1,30 @@
+import { AbstractControl, FormBuilder, FormGroup, ValidationErrors } from '@angular/forms';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { TranslocoService } from '@ngneat/transloco';
+import { ProfileService } from '../../profile.service';
+import * as i0 from "@angular/core";
+export declare class PasswordValidators {
+    static passwordMatchValidator: (passwordFormGroup: FormGroup) => (control: AbstractControl) => ValidationErrors | null;
+    static minLength(length: number): (control: AbstractControl) => ValidationErrors | null;
+    static required(control: AbstractControl): ValidationErrors | null;
+}
+export declare class ChangePasswordModalComponent {
+    private readonly formBuilder;
+    private readonly dialogRef;
+    private readonly dialogConfig;
+    private readonly profileService;
+    private readonly translocoService;
+    private readonly messageService;
+    passwordForm: FormGroup;
+    userId: string;
+    private subjects;
+    resetPasswordService: import("@angular/core").Signal<import("../../../../../../../../dist/http").ServiceResponse<any> | undefined>;
+    constructor(formBuilder: FormBuilder, dialogRef: DynamicDialogRef, dialogConfig: DynamicDialogConfig, profileService: ProfileService, translocoService: TranslocoService, messageService: MessageService);
+    initializeForm(): void;
+    getErrorMessage(controlName: string): string;
+    submit(): void;
+    cancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChangePasswordModalComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChangePasswordModalComponent, "ng-component", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,46 @@
+<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"
+				[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"
+				[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

@@ -0,0 +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;
+    }
+  }
+}