refactor: put the input password in a separate component

src/pages/setup/create-admin/create-admin.component.html

@@ -53,47 +53,7 @@
       }
     </mat-form-field>
 
-    <mat-form-field color="accent" style="margin-bottom: 20px">
-      <mat-label>Пароль</mat-label>
-      <input matInput
-             matTooltip="Укажите пароль"
-             formControlName="password"
-             required
-             [type]="hidePass ? 'password' : 'text'">
-
-      <button mat-icon-button matSuffix (click)="togglePassword($event)" [attr.aria-label]="'Hide password'"
-              [attr.aria-pressed]="hidePass">
-        <mat-icon>{{ hidePass ? 'visibility_off' : 'visibility' }}</mat-icon>
-      </button>
-
-      @if (createAdminForm.get('password')?.hasError('required')) {
-        <mat-error>
-          Пароль является <i>обязательным</i>
-        </mat-error>
-      }
-
-      @if (createAdminForm.get('password')?.hasError('minlength')) {
-        <mat-error>
-          Пароль должен быть не менее {{ policy.minimumLength }} символов
-        </mat-error>
-      }
-
-      @if (createAdminForm.get('password')?.hasError('pattern')) {
-        <mat-error>
-          Пароль должен содержать:
-          @if (policy.requireLettersDifferentCase) {
-            * Латинские символы разных регистров
-          } @else if (policy.requireLetter) {
-            * Один латинский символ
-          } @else if (policy.requireDigit) {
-            * Одну цифру
-          }
-          @if (policy.requireSpecialCharacter) {
-            * специальный символ
-          }
-        </mat-error>
-      }
-    </mat-form-field>
+    <password-input [formGroup]="createAdminForm" [isSetupMode]="true"/>
 
     <mat-form-field color="accent">
       <mat-label>Повторите пароль</mat-label>

src/pages/setup/create-admin/create-admin.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormBuilder, FormGroup, ReactiveFormsModule, ValidatorFn, Validators} from "@angular/forms";
+import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NavigationService} from "@service/navigation.service";
 import {passwordMatchValidator} from '@service/password-match.validator';
 import SetupService from "@api/v1/setup.service";
@@ -10,9 +10,9 @@ import {MatTooltip} from "@angular/material/tooltip";
 import {MatIconButton} from "@angular/material/button";
 import {MatIcon} from "@angular/material/icon";
 import AuthApiService from "@api/v1/authApiService";
-import {PasswordPolicy} from "@model/passwordPolicy";
 import {OAuthProviders} from "@component/OAuthProviders/OAuthProviders";
 import {OAuthProvider} from "@model/oAuthProvider";
+import {PasswordInputComponent} from "@component/common/password-input/password-input.component";
 
 @Component({
   selector: 'app-create-admin',
@@ -25,7 +25,8 @@ import {OAuthProvider} from "@model/oAuthProvider";
     MatTooltip,
     MatIconButton,
     MatIcon,
-    OAuthProviders
+    OAuthProviders,
+    PasswordInputComponent
   ],
   templateUrl: './create-admin.component.html',
   providers: [AuthApiService]
@@ -33,9 +34,7 @@ import {OAuthProvider} from "@model/oAuthProvider";
 
 export class CreateAdminComponent {
   protected createAdminForm!: FormGroup;
-  protected hidePass = true;
   protected hideRetypePass = true;
-  protected policy!: PasswordPolicy;
   protected activatedProviders: OAuthProvider[] = [];
 
   constructor(
@@ -63,13 +62,6 @@ export class CreateAdminComponent {
       );
     };
 
-    this.api.passwordPolicyConfiguration().subscribe(policy => {
-      this.policy = policy;
-      const passwordValidators = this.createPasswordValidators(policy);
-      this.createAdminForm.get('password')?.setValidators(passwordValidators);
-      this.createAdminForm.get('password')?.updateValueAndValidity();
-    });
-
     this.updateAdminData();
   }
 
@@ -87,33 +79,6 @@ export class CreateAdminComponent {
     });
   }
 
-  private createPasswordValidators(policy: PasswordPolicy): ValidatorFn[] {
-    const validators: ValidatorFn[] = [Validators.required];
-
-    if (policy.minimumLength) {
-      validators.push(Validators.minLength(policy.minimumLength));
-    }
-
-    if (policy.requireLettersDifferentCase) {
-      validators.push(Validators.pattern(/(?=.*[a-z])(?=.*[A-Z])/));
-    } else if (policy.requireLetter) {
-      validators.push(Validators.pattern(/[A-Za-z]/));
-    } else if (policy.requireDigit) {
-      validators.push(Validators.pattern(/\d/));
-    }
-
-    if (policy.requireSpecialCharacter) {
-      validators.push(Validators.pattern(/[!@#$%^&*(),.?":{}|<>]/));
-    }
-
-    return validators;
-  }
-
-  protected togglePassword(event: MouseEvent) {
-    this.hidePass = !this.hidePass;
-    event.stopPropagation();
-  }
-
   protected toggleRetypePassword(event: MouseEvent) {
     this.hideRetypePass = !this.hideRetypePass;
     event.stopPropagation();