feat: add setup/database page

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

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