feat: add setup/database page
This commit is contained in:
parent
1468a9766d
commit
02f7c33b91
156
src/pages/setup/database/database.component.html
Normal file
156
src/pages/setup/database/database.component.html
Normal file
@ -0,0 +1,156 @@
|
||||
<h1>Настройка базы данных</h1>
|
||||
<hr/>
|
||||
<p class="mat-body-2 secondary">
|
||||
На этой странице вы можете выбрать и настроить параметры подключения к базе данных.
|
||||
</p>
|
||||
<p class="mat-body-2 secondary">
|
||||
Укажите необходимую информацию, чтобы обеспечить правильное функционирование приложения.
|
||||
</p>
|
||||
|
||||
<p class="mat-headline-6" style="color: red;font-weight: lighter;">
|
||||
Данные настройки нельзя будет изменить в будущем!
|
||||
</p>
|
||||
|
||||
<form [formGroup]="databaseForm">
|
||||
<p>
|
||||
Выберите базу данных:
|
||||
</p>
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>База данных</mat-label>
|
||||
<mat-select (valueChange)="onDatabaseChange($event)">
|
||||
<mat-option value="SetMysql">MySQL</mat-option>
|
||||
<mat-option value="SetPsql">PostgreSQL</mat-option>
|
||||
<mat-option value="sqlite">Sqlite</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
@if (database) {
|
||||
<hr/>
|
||||
}
|
||||
|
||||
<div style="display:flex; flex-direction: column;">
|
||||
@if (database === "sqlite") {
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Папка</mat-label>
|
||||
<input matInput
|
||||
matTooltip="Укажите папку, в которой будет находиться база данных"
|
||||
formControlName="folder"
|
||||
value="database"
|
||||
required>
|
||||
|
||||
@if (databaseForm.get('folder')?.hasError('required')) {
|
||||
<mat-error>
|
||||
Название папки является <i>обязательным</i>
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@if (databaseForm.get('folder')?.hasError('pattern')) {
|
||||
<mat-error>
|
||||
Название не может быть меньше 2 символов
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
} @else if (database) {
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Сервер</mat-label>
|
||||
<input matInput
|
||||
matTooltip='Укажите сервер в формате: "winsomnia.net" или ip адреса формата IPv4 или IPv6'
|
||||
required
|
||||
formControlName="server">
|
||||
|
||||
@if (databaseForm.get('server')?.hasError('required')) {
|
||||
<mat-error>
|
||||
Сервер является <i>обязательным</i>
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@if (databaseForm.get('server')?.hasError('pattern')) {
|
||||
<mat-error>
|
||||
Сервер должен содержать доменное имя сервера или ip адрес IPv4 или IPv6
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Порт</mat-label>
|
||||
<input matInput
|
||||
matTooltip="Укажите порт сервера"
|
||||
required
|
||||
formControlName="port">
|
||||
|
||||
@if (databaseForm.get('port')?.hasError('required')) {
|
||||
<mat-error>
|
||||
Порт является <i>обязательным</i>
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@if (databaseForm.get('port')?.hasError('pattern')) {
|
||||
<mat-error>
|
||||
Порт должен содержать цифры начиная НЕ с 0 и далее не менее 2 и не более 5 цифр
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Название базы данных</mat-label>
|
||||
<input matInput
|
||||
matTooltip="Укажите название базы данных"
|
||||
required
|
||||
formControlName="database_name">
|
||||
|
||||
@if (databaseForm.get('database_name')?.hasError('required')) {
|
||||
<mat-error>
|
||||
Название базы данных является <i>обязательным</i>
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@if (databaseForm.get('database_name')?.hasError('pattern')) {
|
||||
<mat-error>
|
||||
Название не может быть меньше 2 символов
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Пользователь</mat-label>
|
||||
<input matInput
|
||||
matTooltip="Укажите пользователя, который имеет доступ к базе данных"
|
||||
required
|
||||
formControlName="user">
|
||||
|
||||
@if (databaseForm.get('user')?.hasError('required')) {
|
||||
<mat-error>
|
||||
Имя пользователя базы данных является <i>обязательным</i>
|
||||
</mat-error>
|
||||
}
|
||||
|
||||
@if (databaseForm.get('user')?.hasError('pattern')) {
|
||||
<mat-error>
|
||||
Имя не может быть меньше 2 символов
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Пароль</mat-label>
|
||||
<input matInput
|
||||
matTooltip="Укажите пароль"
|
||||
formControlName="password"
|
||||
[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>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox
|
||||
matTooltip="Использовать SSL/TLS для подключения к базе данных"
|
||||
formControlName="ssl">
|
||||
Использовать SSL/TLS
|
||||
</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
108
src/pages/setup/database/database.component.ts
Normal file
108
src/pages/setup/database/database.component.ts
Normal file
@ -0,0 +1,108 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {NavigationService} from "@service/navigation.service";
|
||||
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
|
||||
import SetupService from "@api/v1/setup.service";
|
||||
import {DatabaseRequest} from "@api/v1/databaseRequest";
|
||||
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"
|
||||
import {MatCheckbox} from "@angular/material/checkbox";
|
||||
|
||||
@Component({
|
||||
selector: 'app-database',
|
||||
standalone: true,
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatInput,
|
||||
MatTooltip,
|
||||
MatIconButton,
|
||||
MatIcon,
|
||||
MatCheckbox
|
||||
],
|
||||
templateUrl: './database.component.html'
|
||||
})
|
||||
|
||||
export class DatabaseComponent {
|
||||
protected databaseForm!: FormGroup;
|
||||
protected database = '';
|
||||
protected hidePass = true;
|
||||
|
||||
constructor(
|
||||
private navigationService: NavigationService, private formBuilder: FormBuilder, private api: SetupService) {
|
||||
this.databaseForm = this.formBuilder.group({
|
||||
folder: ['', Validators.pattern(/^.{2,}$/)],
|
||||
server: ['', Validators.pattern(/^localhost$|^([A-Za-z0-9]+\.)+[A-Za-z]{2,}$|^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$|^([A-Fa-f0-9]{1,4}:){7}[A-Fa-f0-9]{1,4}$|^::1$/)],
|
||||
port: ['', Validators.pattern(/^[1-9][0-9]{1,4}$/)],
|
||||
database_name: ['', Validators.pattern(/^.{2,}$/)],
|
||||
user: ['', Validators.pattern(/^.{2,}$/)],
|
||||
password: [''],
|
||||
ssl: ['']
|
||||
});
|
||||
|
||||
this.databaseForm.get('ssl')?.setValue(false);
|
||||
this.navigationService.setNextButtonState(false);
|
||||
this.databaseForm.valueChanges.subscribe(() => {
|
||||
this.navigationService.setNextButtonState(this.databaseForm.valid);
|
||||
});
|
||||
}
|
||||
|
||||
private createForm(database: string) {
|
||||
if (database === 'sqlite') {
|
||||
this.disableControls(['server', 'port', 'database_name', 'user', 'password']);
|
||||
this.enableControls(['folder']);
|
||||
} else {
|
||||
this.enableControls(['server', 'port', 'database_name', 'user', 'password']);
|
||||
this.disableControls(['folder']);
|
||||
}
|
||||
}
|
||||
|
||||
private disableControls(controls: string[]) {
|
||||
controls.forEach(control => {
|
||||
this.databaseForm.get(control)!.disable({emitEvent: false});
|
||||
this.databaseForm.get(control)!.updateValueAndValidity({emitEvent: false});
|
||||
});
|
||||
}
|
||||
|
||||
private enableControls(controls: string[]) {
|
||||
controls.forEach(control => {
|
||||
this.databaseForm.get(control)!.enable({emitEvent: false});
|
||||
this.databaseForm.get(control)!.updateValueAndValidity({emitEvent: false});
|
||||
});
|
||||
}
|
||||
|
||||
protected onDatabaseChange(selectedDatabase: string) {
|
||||
this.createForm(selectedDatabase);
|
||||
this.database = selectedDatabase;
|
||||
|
||||
if (this.database === "sqlite") {
|
||||
this.navigationService.nextButtonAction = () => {
|
||||
return this.api.setSqlite(this.databaseForm.get('folder')?.value ?? '');
|
||||
};
|
||||
} else {
|
||||
this.navigationService.nextButtonAction = () => {
|
||||
let databaseRequest: DatabaseRequest = {
|
||||
"server": this.databaseForm.get('server')?.value,
|
||||
"port": this.databaseForm.get('port')?.value,
|
||||
"database": this.databaseForm.get('database_name')?.value,
|
||||
"user": this.databaseForm.get('user')?.value,
|
||||
"ssl": this.databaseForm.get('ssl')?.value,
|
||||
"password": this.databaseForm.get('password')?.value,
|
||||
};
|
||||
if (this.database === "mysql")
|
||||
return this.api.setMysql(databaseRequest);
|
||||
else
|
||||
return this.api.setPsql(databaseRequest);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
protected togglePassword(event: MouseEvent) {
|
||||
this.hidePass = !this.hidePass;
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user