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">