Winsomnia/MireaFrontend
1
0
Fork 0
Code Pull Requests Actions Projects Releases Activity

feat: add setup/create-admin page

Browse Source
This commit is contained in:
Polianin Nikita 2024-06-11 00:27:09 +03:00
parent f5c7ceb850
commit d764e84726
2 changed files with 183 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/pages/setup/create-admin/create-admin.component.html Normal file
View 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>
Пароль должен содержать хотя бы один латинский символ верхнего регистра и специальный символ (!&#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>

74
src/pages/setup/create-admin/create-admin.component.ts Normal file
View 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();
}
}