feat: add setup/create-admin page

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

@@ -0,0 +1,109 @@
+<h1>Создание администратора</h1>
+<hr/>
+<p class="mat-body-2 secondary">
+  На этой странице вы можете создать учетную запись администратора.
+</p>
+<p class="mat-body-2 secondary">
+  Заполните необходимые поля, такие как имя пользователя, адрес электронной почты и пароль, чтобы создать учетную запись
+  с правами администратора для управления приложением.
+</p>
+
+<form [formGroup]="createAdminForm">
+  <p>
+    Ведите данные для создания аккаунта администратора:
+  </p>
+  <div style="display:flex; flex-direction: column;">
+    <mat-form-field color="accent">
+      <mat-label>Имя пользователя</mat-label>
+      <input matInput
+             matTooltip='Укажите имя пользователя используя латинские буквы и цифры без пробелов'
+             required
+             formControlName="user">
+
+      @if (createAdminForm.get('user')?.hasError('required')) {
+        <mat-error>
+          Имя пользователя является <i>обязательным</i>
+        </mat-error>
+      }
+
+      @if (createAdminForm.get('user')?.hasError('pattern')) {
+        <mat-error>
+          Имя пользователя должен содержать латинские сиволы и цифры и быть не менее 4 символов
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field color="accent">
+      <mat-label>Email</mat-label>
+      <input matInput
+             matTooltip="Укажите email администратора"
+             required
+             formControlName="email">
+
+      @if (createAdminForm.get('email')?.hasError('required')) {
+        <mat-error>
+          Email является <i>обязательным</i>
+        </mat-error>
+      }
+
+      @if (createAdminForm.get('email')?.hasError('email')) {
+        <mat-error>
+          Введите корректный Email адрес
+        </mat-error>
+      }
+    </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>
+          Пароль должен быть не менее 8 символов
+        </mat-error>
+      }
+
+      @if (createAdminForm.get('password')?.hasError('pattern')) {
+        <mat-error>
+          Пароль должен содержать хотя бы один латинский символ верхнего регистра и специальный символ (!&#x40;#$%^&*)
+        </mat-error>
+      }
+    </mat-form-field>
+
+    <mat-form-field color="accent">
+      <mat-label>Повторите пароль</mat-label>
+      <input matInput
+             matTooltip="Укажите пароль, который был указан ранее"
+             formControlName="retype"
+             required
+             [type]="hideRetypePass ? 'password' : 'text'"
+             onpaste="return false;">
+
+      <button mat-icon-button matSuffix (click)="toggleRetypePassword($event)" [attr.aria-label]="'Hide password'"
+              [attr.aria-pressed]="hideRetypePass">
+        <mat-icon>{{ hideRetypePass ? 'visibility_off' : 'visibility' }}</mat-icon>
+      </button>
+
+      @if (createAdminForm.get('retype')?.hasError('passwordsMismatch')) {
+        <mat-error>
+          Пароли не совпадают
+        </mat-error>
+      }
+    </mat-form-field>
+  </div>
+</form>

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

@@ -0,0 +1,74 @@
+import {Component} from '@angular/core';
+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";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatSelectModule} from "@angular/material/select";
+import {MatInput} from "@angular/material/input";
+import {MatTooltip} from "@angular/material/tooltip";
+import {MatIconButton} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
+
+@Component({
+  selector: 'app-create-admin',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInput,
+    MatTooltip,
+    MatIconButton,
+    MatIcon
+  ],
+  templateUrl: './create-admin.component.html'
+})
+
+export class CreateAdminComponent {
+  protected createAdminForm!: FormGroup;
+  protected hidePass = true;
+  protected hideRetypePass = true;
+
+  constructor(
+    private navigationService: NavigationService, private formBuilder: FormBuilder, private api: SetupService) {
+    this.createAdminForm = this.formBuilder.group({
+        user: ['', Validators.pattern(/^([A-Za-z0-9]){4,}$/)],
+        email: ['', Validators.email],
+        password: ['', Validators.required],
+        retype: ['', Validators.required]
+      },
+      {validators: passwordMatchValidator('password', 'retype')}
+    );
+
+    this.createAdminForm.get('password')?.setValidators([Validators.required,
+      Validators.pattern(/[A-Z]/),
+      Validators.pattern(/[!@#$%^&*]/),
+      Validators.minLength(8)
+    ]);
+
+    this.navigationService.setNextButtonState(false);
+    this.createAdminForm.valueChanges.subscribe(() => {
+      this.navigationService.setNextButtonState(this.createAdminForm.valid);
+    });
+
+    this.navigationService.nextButtonAction = () => {
+      return this.api.createAdmin({
+          "email": this.createAdminForm.get('email')?.value,
+          "username": this.createAdminForm.get('user')?.value,
+          "password": this.createAdminForm.get('password')?.value
+        }
+      );
+    };
+  }
+
+  protected togglePassword(event: MouseEvent) {
+    this.hidePass = !this.hidePass;
+    event.stopPropagation();
+  }
+
+  protected toggleRetypePassword(event: MouseEvent) {
+    this.hideRetypePass = !this.hideRetypePass;
+    event.stopPropagation();
+  }
+}