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

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

  @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"
               focusNext="portNextFocus">

        @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"
               id="portNextFocus"
               focusNext="databaseNextFocus">

        @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"
               id="databaseNextFocus"
               focusNext="userNextFocus">

        @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"
               id="userNextFocus"
               focusNext="passwordNextFocus">

        @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'"
               id="passwordNextFocus"
               focusNext="nextButtonFocus">

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