feat: rewrite setup wizard

src/pages/setup/database/database.component.html

@@ -17,9 +17,9 @@
   </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-select (valueChange)="onDatabaseChange($event)" [value]="database">
+      <mat-option value="mysql">MySQL</mat-option>
+      <mat-option value="psql">PostgreSQL</mat-option>
       <mat-option value="sqlite">Sqlite</mat-option>
     </mat-select>
   </mat-form-field>
@@ -57,7 +57,8 @@
         <input matInput
                matTooltip='Укажите сервер в формате: "winsomnia.net" или ip адреса формата IPv4 или IPv6'
                required
-               formControlName="server">
+               formControlName="server"
+               focusNext="portNextFocus">
 
         @if (databaseForm.get('server')?.hasError('required')) {
           <mat-error>
@@ -77,7 +78,9 @@
         <input matInput
                matTooltip="Укажите порт сервера"
                required
-               formControlName="port">
+               formControlName="port"
+               id="portNextFocus"
+               focusNext="databaseNextFocus">
 
         @if (databaseForm.get('port')?.hasError('required')) {
           <mat-error>
@@ -97,7 +100,9 @@
         <input matInput
                matTooltip="Укажите название базы данных"
                required
-               formControlName="database_name">
+               formControlName="database_name"
+               id="databaseNextFocus"
+               focusNext="userNextFocus">
 
         @if (databaseForm.get('database_name')?.hasError('required')) {
           <mat-error>
@@ -117,7 +122,9 @@
         <input matInput
                matTooltip="Укажите пользователя, который имеет доступ к базе данных"
                required
-               formControlName="user">
+               formControlName="user"
+               id="userNextFocus"
+               focusNext="passwordNextFocus">
 
         @if (databaseForm.get('user')?.hasError('required')) {
           <mat-error>
@@ -137,7 +144,9 @@
         <input matInput
                matTooltip="Укажите пароль"
                formControlName="password"
-               [type]="hidePass ? 'password' : 'text'">
+               [type]="hidePass ? 'password' : 'text'"
+               id="passwordNextFocus"
+               focusNext="nextButtonFocus">
 
         <button mat-icon-button matSuffix (click)="togglePassword($event)" [attr.aria-label]="'Hide password'"
                 [attr.aria-pressed]="hidePass">

src/pages/setup/database/database.component.ts

@@ -2,14 +2,17 @@ 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 {MatIcon} from "@angular/material/icon";
 import {MatCheckbox} from "@angular/material/checkbox";
+import {DatabaseRequest} from "@api/v1/configuration/databaseRequest";
+import {of} from "rxjs";
+import {DatabaseType} from "@model/databaseType";
+import {FocusNextDirective} from "@/directives/focus-next.directive";
 
 @Component({
   selector: 'app-database',
@@ -22,7 +25,8 @@ import {MatCheckbox} from "@angular/material/checkbox";
     MatTooltip,
     MatIconButton,
     MatIcon,
-    MatCheckbox
+    MatCheckbox,
+    FocusNextDirective
   ],
   templateUrl: './database.component.html'
 })
@@ -49,6 +53,42 @@ export class DatabaseComponent {
     this.databaseForm.valueChanges.subscribe(() => {
       this.navigationService.setNextButtonState(this.databaseForm.valid);
     });
+
+    this.api.databaseConfiguration().subscribe(response => {
+      if (!response)
+        return;
+
+      this.navigationService.setSkipButtonState(true);
+      this.navigationService.skipButtonAction = () => of(true);
+      this.navigationService.triggerAutoSkip(this.navigationService.skipButtonAction);
+
+
+      this.databaseForm.patchValue({
+        server: response.server,
+        port: response.port,
+        database_name: response.database,
+        user: response.user,
+        ssl: response.ssl,
+        password: response.password,
+        folder: response.pathToDatabase
+      });
+
+      let type: string;
+
+      switch (response.type) {
+        case DatabaseType.Mysql:
+          type = "mysql";
+          break;
+        case DatabaseType.PostgresSql:
+          type = "psql";
+          break;
+        case DatabaseType.Sqlite:
+          type = "sqlite";
+          break;
+      }
+      this.database = type;
+      this.onDatabaseChange(type);
+    });
   }
 
   private createForm(database: string) {