feat: add current password field to change password form and update service payload structure

src/app/domains/pos/components/change-password.component.html

@@ -1 +1,5 @@
-<shared-change-password-form-dialog [(visible)]="visible" [loading]="submitLoading()" (onSubmit)="submit($event)" />
+<shared-change-password-form-dialog
+  [(visible)]="visible"
+  [showCurrentPasswordField]="true"
+  [loading]="submitLoading()"
+  (onSubmit)="submit($event)" />

src/app/domains/pos/components/change-password.component.ts

@@ -23,7 +23,7 @@ export class PosChangePasswordComponent extends AbstractDialog {
     this.submitLoading.set(true);
 
     this.service
-      .changePassword(payload.password)
+      .changePassword(payload)
       .pipe(finalize(() => this.submitLoading.set(false)))
       .subscribe(() => {
         this.toastService.success({

src/app/domains/pos/services/password.ts

@@ -2,13 +2,18 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
+interface IChangePasswordSubmitPayload {
+  currentPassword: string;
+  password: string;
+}
+
 @Injectable({
   providedIn: 'root',
 })
 export class PosChangePasswordService {
   constructor(private readonly http: HttpClient) {}
 
-  changePassword(password: string): Observable<unknown> {
-    return this.http.put('/api/v1/pos/update-password', { password });
+  changePassword(payload: IChangePasswordSubmitPayload): Observable<unknown> {
+    return this.http.put('/api/v1/pos/update-password', payload);
   }
 }

src/app/shared/components/changePasswordFormDialog/change-password-form-dialog.component.html

@@ -4,13 +4,26 @@
   [modal]="true"
   [style]="{ width: '500px' }"
   [closable]="true"
-  (onHide)="close()"
->
+  (onHide)="close()">
   <form [formGroup]="form" (submit)="submit()" class="flex flex-col gap-4">
+    @if (showCurrentPasswordField && form.controls.currentPassword) {
+      <uikit-field label="رمز عبور فعلی" pSize="large" [control]="form.controls.currentPassword">
+        <p-password
+          id="password1"
+          name="password"
+          [formControl]="form.controls.currentPassword"
+          autocomplete="password"
+          [toggleMask]="true"
+          [fluid]="true"
+          [feedback]="false"
+          size="large"
+          [invalid]="form.controls.currentPassword.touched && form.controls.currentPassword.invalid" />
+      </uikit-field>
+    }
     <shared-password-input
       [passwordControl]="form.controls.password"
       [confirmPasswordControl]="form.controls.confirmPassword"
-    />
+      [isRenewal]="true" />
 
     <app-form-footer-actions [submitLabel]="'ذخیره'" [loading]="loading()" (onCancel)="close()" />
   </form>

src/app/shared/components/changePasswordFormDialog/change-password-form-dialog.component.ts

@@ -2,11 +2,14 @@ import { MustMatch, password } from '@/core/validators';
 import { AbstractDialog } from '@/shared/abstractClasses/abstract-dialog';
 import { SharedDialogComponent } from '@/shared/components/dialog/dialog.component';
 import { FormFooterActionsComponent } from '@/shared/components/formFooterActions/form-footer-actions.component';
-import { Component, EventEmitter, Output, input } from '@angular/core';
+import { UikitFieldComponent } from '@/uikit';
+import { Component, EventEmitter, Input, Output, input } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Password } from 'primeng/password';
 import { SharedPasswordInputComponent } from '../passwordInput/password-input.component';
 
 export interface IChangePasswordSubmitPayload {
+  currentPassword: string;
   password: string;
   confirmPassword: string;
 }
@@ -19,9 +22,13 @@ export interface IChangePasswordSubmitPayload {
     SharedDialogComponent,
     FormFooterActionsComponent,
     SharedPasswordInputComponent,
+    UikitFieldComponent,
+    Password,
   ],
 })
 export class ChangePasswordFormDialogComponent extends AbstractDialog {
+  @Input() showCurrentPasswordField = false;
+
   title = input<string>('');
   loading = input<boolean>(false);
 
@@ -29,15 +36,27 @@ export class ChangePasswordFormDialogComponent extends AbstractDialog {
 
   private readonly fb = new FormBuilder();
 
-  form = this.fb.group(
-    {
-      password: ['', [Validators.required, password()]],
-      confirmPassword: ['', [Validators.required]],
-    },
-    {
-      validators: [MustMatch('password', 'confirmPassword')],
+  initForm() {
+    const form = this.fb.group(
+      {
+        currentPassword: ['', [Validators.required]],
+        password: ['', [Validators.required, password()]],
+        confirmPassword: ['', [Validators.required]],
+      },
+      {
+        validators: [MustMatch('password', 'confirmPassword')],
+      }
+    );
+
+    if (!this.showCurrentPasswordField) {
+      // @ts-ignore
+      form.removeControl('currentPassword');
     }
-  );
+
+    return form;
+  }
+
+  form = this.initForm();
 
   get dialogHeader() {
     return this.title() ? `تغییر رمز عبور ${this.title()}` : 'تغییر رمز عبور';
@@ -56,4 +75,8 @@ export class ChangePasswordFormDialogComponent extends AbstractDialog {
     this.form.reset();
     super.close();
   }
+
+  ngOnChanges() {
+    this.form = this.initForm();
+  }
 }

src/app/shared/components/passwordInput/password-input.component.html

@@ -1,4 +1,4 @@
-<uikit-field label="رمز عبور" [pSize]="size" [control]="passwordControl">
+<uikit-field [label]="passwordFieldLabel()" [pSize]="size" [control]="passwordControl">
   <p-password
     id="password1"
     name="password"
@@ -8,14 +8,13 @@
     [fluid]="fluid"
     [feedback]="false"
     [size]="size"
-    [invalid]="passwordControl.touched && passwordControl.invalid"
-  />
-  <span class="text-xs mt-1 text-muted-color">
+    [invalid]="passwordControl.touched && passwordControl.invalid" />
+  <span class="text-muted-color mt-1 text-xs">
     {{ hint }}
   </span>
 </uikit-field>
 
-<uikit-field label="تکرار رمز عبور" [pSize]="size" [control]="confirmPasswordControl">
+<uikit-field [label]="confirmPasswordFieldLabel()" [pSize]="size" [control]="confirmPasswordControl">
   <p-password
     id="confirmPassword"
     name="confirmPassword"
@@ -25,6 +24,5 @@
     [fluid]="fluid"
     [feedback]="false"
     [size]="size"
-    [invalid]="confirmPasswordControl.touched && confirmPasswordControl.invalid"
-  />
+    [invalid]="confirmPasswordControl.touched && confirmPasswordControl.invalid" />
 </uikit-field>

src/app/shared/components/passwordInput/password-input.component.ts

@@ -1,5 +1,5 @@
 import { UikitFieldComponent } from '@/uikit';
-import { Component, Input } from '@angular/core';
+import { Component, computed, Input } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { Password } from 'primeng/password';
 
@@ -14,4 +14,10 @@ export class SharedPasswordInputComponent {
   @Input() hint: string = 'رمز باید حداقل ۶ کاراکتر باشد.';
   @Input() fluid: boolean = true;
   @Input() size: 'small' | 'large' = 'large';
+  @Input() isRenewal = false;
+
+  passwordFieldLabel = computed(() => (this.isRenewal ? 'رمز عبور جدید' : 'رمز عبور'));
+  confirmPasswordFieldLabel = computed(() =>
+    this.isRenewal ? 'تکرار رمز عبور جدید' : 'تکرار رمز عبور'
+  );
 }

src/app/shared/components/seasonPicker/season-picker.component.html

@@ -1,4 +1,4 @@
-<div class="border-surface-border bg-surface-card flex items-center gap-2 overflow-hidden rounded-lg border p-2">
+<div class="border-surface-border bg-surface-card flex h-11 items-center gap-2 overflow-hidden rounded-lg border p-2">
   <p-button
     icon="pi pi-chevron-right"
     size="small"