fix: change cache service to component

src/pages/setup/cache/cache.component.html

@@ -0,0 +1,81 @@
+<h1>Настройка кэша</h1>
+<hr/>
+<p class="mat-body-2 secondary">
+  На этой странице вы можете выбрать и настроить параметры кэширования для приложения.
+</p>
+<p class="mat-body-2 secondary">
+  Укажите тип кэша, например, Redis, и настройте параметры подключения, чтобы улучшить производительность и снизить
+  нагрузку на базу данных.
+</p>
+
+<form [formGroup]="databaseForm">
+  <p>
+    Выберите базу данных для хранения кэша:
+  </p>
+
+  <mat-form-field color="accent">
+    <mat-label>База данных</mat-label>
+    <mat-select (valueChange)="onDatabaseChange($event)">
+      <mat-option value="redis">Redis</mat-option>
+      <mat-option value="memcached">Memcached</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div style="display:flex; flex-direction: column;">
+    @if (database && database !== "memcached") {
+      <hr/>
+      <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 цифр
+          </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>
+    }
+  </div>
+</form>