feat: add setup/create-admin page
This commit is contained in:
109
src/pages/setup/create-admin/create-admin.component.html
Normal file
109
src/pages/setup/create-admin/create-admin.component.html
Normal file
@@ -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>
|
||||
Пароль должен содержать хотя бы один латинский символ верхнего регистра и специальный символ (!@#$%^&*)
|
||||
</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>
|
||||
74
src/pages/setup/create-admin/create-admin.component.ts
Normal file
74
src/pages/setup/create-admin/create-admin.component.ts
Normal file
@@ -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();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user