diff --git a/src/pages/setup/create-admin/create-admin.component.html b/src/pages/setup/create-admin/create-admin.component.html new file mode 100644 index 0000000..84810b5 --- /dev/null +++ b/src/pages/setup/create-admin/create-admin.component.html @@ -0,0 +1,109 @@ +

Создание администратора

+
+

+ На этой странице вы можете создать учетную запись администратора. +

+

+ Заполните необходимые поля, такие как имя пользователя, адрес электронной почты и пароль, чтобы создать учетную запись + с правами администратора для управления приложением. +

+ +
+

+ Ведите данные для создания аккаунта администратора: +

+
+ + Имя пользователя + + + @if (createAdminForm.get('user')?.hasError('required')) { + + Имя пользователя является обязательным + + } + + @if (createAdminForm.get('user')?.hasError('pattern')) { + + Имя пользователя должен содержать латинские сиволы и цифры и быть не менее 4 символов + + } + + + + Email + + + @if (createAdminForm.get('email')?.hasError('required')) { + + Email является обязательным + + } + + @if (createAdminForm.get('email')?.hasError('email')) { + + Введите корректный Email адрес + + } + + + + Пароль + + + + + @if (createAdminForm.get('password')?.hasError('required')) { + + Пароль является обязательным + + } + + @if (createAdminForm.get('password')?.hasError('minlength')) { + + Пароль должен быть не менее 8 символов + + } + + @if (createAdminForm.get('password')?.hasError('pattern')) { + + Пароль должен содержать хотя бы один латинский символ верхнего регистра и специальный символ (!@#$%^&*) + + } + + + + Повторите пароль + + + + + @if (createAdminForm.get('retype')?.hasError('passwordsMismatch')) { + + Пароли не совпадают + + } + +
+
diff --git a/src/pages/setup/create-admin/create-admin.component.ts b/src/pages/setup/create-admin/create-admin.component.ts new file mode 100644 index 0000000..040d019 --- /dev/null +++ b/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(); + } +}