✨ Config page, using Config service

src/app/components/config/config.component.html

@@ -0,0 +1,122 @@
+<div class="container mx-auto px-4 py-8">
+  <h1 class="text-3xl font-bold mb-8">Configuration du système</h1>
+
+  <form (ngSubmit)="saveConfig()" class="max-w-2xl">
+    <div class="bg-white rounded-lg shadow p-6 space-y-6">
+      <!-- Taille maximale des images -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Taille maximale des images (MB)
+        </label>
+        <input
+          type="number"
+          [(ngModel)]="config.max_image_size"
+          name="max_image_size"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+          [ngModel]="config.max_image_size / (1024 * 1024)"
+          (ngModelChange)="config.max_image_size = $event * 1024 * 1024"
+        />
+      </div>
+
+      <!-- Nombre maximum d'images par pin -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Nombre maximum d'images par pin
+        </label>
+        <input
+          type="number"
+          [(ngModel)]="config.max_images_per_pin"
+          name="max_images_per_pin"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+        />
+      </div>
+
+      <!-- Nombre maximum d'images par utilisateur -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Nombre maximum d'images par utilisateur
+        </label>
+        <input
+          type="number"
+          [(ngModel)]="config.max_images_per_user"
+          name="max_images_per_user"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+        />
+      </div>
+
+      <!-- Types d'images autorisés -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Types d'images autorisés
+        </label>
+        <div class="space-y-2">
+          <div *ngFor="let imgType of config.allowed_image_types" class="flex items-center">
+            <input
+              type="text"
+              [value]="imgType"
+              [name]="'type_' + imgType"
+              class="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+            />
+            <button
+              type="button"
+              (click)="removeImageType(imgType)"
+              class="ml-2 text-red-600 hover:text-red-800"
+            >
+              Supprimer
+            </button>
+          </div>
+          <button
+            type="button"
+            (click)="addImageType()"
+            class="text-blue-600 hover:text-blue-800"
+          >
+            + Ajouter un type
+          </button>
+        </div>
+      </div>
+
+      <!-- Nombre maximum de pins par utilisateur -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Nombre maximum de pins par utilisateur
+        </label>
+        <input
+          type="number"
+          [(ngModel)]="config.max_pins_per_user"
+          name="max_pins_per_user"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+        />
+      </div>
+
+      <!-- Nombre maximum d'amis par utilisateur -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2">
+          Nombre maximum d'amis par utilisateur
+        </label>
+        <input
+          type="number"
+          [(ngModel)]="config.max_friends_per_user"
+          name="max_friends_per_user"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+        />
+      </div>
+
+      <!-- Boutons -->
+      <div class="flex justify-end space-x-4">
+        <button
+          type="button"
+          (click)="resetConfig()"
+          class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
+        >
+          Réinitialiser
+        </button>
+        <button
+          type="submit"
+          class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700"
+        >
+          Enregistrer
+        </button>
+      </div>
+    </div>
+  </form>
+</div> 

src/app/components/config/config.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ConfigService } from '../../services/config.service';
+import { SystemConfig } from '../../model/SystemConfig';
+
+
+@Component({
+  selector: 'app-config',
+  templateUrl: './config.component.html',
+  styleUrls: ['./config.component.css'],
+  imports: [CommonModule, FormsModule]
+})
+export class ConfigComponent implements OnInit {
+  config: SystemConfig = {
+    max_image_size: 8 * 1024 * 1024,
+    max_images_per_pin: 10,
+    max_images_per_user: 100,
+    allowed_image_types: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+    max_pins_per_user: 50,
+    max_friends_per_user: 100
+  };
+
+  constructor(private configService: ConfigService) {}
+
+  ngOnInit(): void {
+    this.loadConfig();
+  }
+
+  loadConfig(): void {
+    this.configService.loadConfig().subscribe(config => {
+      this.config = config;
+    });
+  }
+
+  saveConfig(): void {
+    this.configService.saveConfig(this.config).subscribe(config => {
+      this.config = config;
+      alert('Configuration enregistrée avec succès');
+    });
+  }
+
+  resetConfig(): void {
+    this.loadConfig();
+  }
+
+  addImageType(): void {
+    this.config.allowed_image_types.push('');
+  }
+
+  removeImageType(type: string): void {
+    const index = this.config.allowed_image_types.indexOf(type);
+    if (index > -1) {
+      this.config.allowed_image_types.splice(index, 1);
+    }
+  }
+}