feat: add setup/cache page

src/pages/setup/cache/cache.component.ts

@@ -0,0 +1,69 @@
+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 {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";
+
+@Component({
+  selector: 'app-cache',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInput,
+    MatTooltip,
+    MatIconButton,
+    MatIcon
+  ],
+  templateUrl: './cache.component.html'
+})
+
+export class CacheComponent {
+  protected databaseForm!: FormGroup;
+  protected database = '';
+  protected hidePass = true;
+
+  constructor(private navigationService: NavigationService, private formBuilder: FormBuilder, private api: SetupService) {
+    this.databaseForm = this.formBuilder.group({
+      server: ['', Validators.pattern(/^([A-Za-z0-9]+\.)+[A-Za-z]{2,}$|^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$|^([A-Fa-f0-9]{1,4}:){7}[A-Fa-f0-9]{1,4}$|^::1$/)],
+      port: ['', Validators.pattern(/^[1-9][0-9]{2,}$/)],
+      password: ['']
+    });
+
+    this.navigationService.setNextButtonState(false);
+    this.databaseForm.valueChanges.subscribe(() => {
+      this.navigationService.setNextButtonState(this.databaseForm.valid);
+    });
+  }
+
+  onDatabaseChange(selectedDatabase: string) {
+    this.database = selectedDatabase;
+
+    if (selectedDatabase === 'memcached') {
+      this.navigationService.nextButtonAction = () => {
+        return this.api.setMemcached();
+      };
+      this.navigationService.setNextButtonState(true);
+    } else {
+      this.navigationService.nextButtonAction = () => {
+        return this.api.setRedis({
+          "server": this.databaseForm.get('server')?.value,
+          "port": this.databaseForm.get('port')?.value,
+          "password": this.databaseForm.get('password')?.value
+        });
+      };
+      this.navigationService.setNextButtonState(this.databaseForm.valid);
+    }
+  }
+
+  protected togglePassword(event: MouseEvent) {
+    this.hidePass = !this.hidePass;
+    event.stopPropagation();
+  }
+}