init

ui/src/app/fsa-knock/fsa-knock-page.component.ts

@@ -0,0 +1,132 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { CardModule } from 'primeng/card';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { KnockPageComponent } from '../knock/knock-page.component';
+
+@Component({
+  selector: 'app-fsa-knock-page',
+  standalone: true,
+  imports: [
+    CommonModule, RouterModule, CardModule, ButtonModule, DialogModule, KnockPageComponent
+  ],
+  template: `
+    <div class="container">
+      <div *ngIf="!isFSASupported" class="text-center">
+        <h3>File System Access API не поддерживается</h3>
+        <p>Эта функциональность требует браузер с поддержкой File System Access API:</p>
+        <ul class="text-left mt-3">
+          <li>Google Chrome 86+</li>
+          <li>Microsoft Edge 86+</li>
+          <li>Opera 72+</li>
+        </ul>
+        <p class="mt-3">Ваш браузер: <strong>{{ browserInfo }}</strong></p>
+        <button pButton 
+                type="button" 
+                label="Перейти к основной версии" 
+                class="p-button-outlined mt-3"
+                routerLink="/">
+        </button>
+      </div>
+      
+      <div *ngIf="isFSASupported">
+        <!-- Встраиваем основной компонент с поддержкой FSA -->
+        <app-knock-page [enableFSA]="true" [canUseFSA]="true"></app-knock-page>
+      </div>
+    </div>
+
+    <!-- Информационное модальное окно -->
+    <p-dialog header="🚀 Расширенная версия с File System Access" 
+              [(visible)]="showInfoDialog" 
+              [modal]="true" 
+              [closable]="true"
+              [draggable]="false"
+              [resizable]="false"
+              styleClass="info-dialog">
+      <div class="dialog-content">
+        <p class="mb-3">
+          Эта версия поддерживает прямое редактирование файлов на диске.
+          Файлы будут автоматически перезаписываться после шифрования/дешифрования.
+        </p>
+        <div class="p-3 bg-green-50 border-round">
+          <p class="text-sm mb-2">
+            ✅ <strong>Доступные возможности:</strong>
+          </p>
+          <ul class="text-sm mb-0">
+            <li>Прямое открытие файлов с диска</li>
+            <li>Автоматическое сохранение изменений</li>
+            <li>Перезапись зашифрованных файлов "на месте"</li>
+            <li>Быстрая работа без диалогов загрузки/скачивания</li>
+          </ul>
+        </div>
+      </div>
+    </p-dialog>
+  `,
+  styles: [`
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 1rem;
+    }
+    
+    ul {
+      display: inline-block;
+      text-align: left;
+    }
+    
+    .info-link {
+      color: #3b82f6;
+      cursor: pointer;
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 0.2s ease;
+    }
+    
+    .info-link:hover {
+      color: #1d4ed8;
+      text-decoration: underline;
+    }
+    
+    .bg-green-50 {
+      background-color: #f0fdf4;
+    }
+    
+    .dialog-content {
+      min-width: 450px;
+    }
+  `]
+})
+export class FsaKnockPageComponent {
+  isFSASupported = false;
+  browserInfo = '';
+  showInfoDialog = false;
+
+  constructor() {
+    this.checkFSASupport();
+    this.getBrowserInfo();
+  }
+
+  private checkFSASupport() {
+    const w = window as any;
+    this.isFSASupported = typeof w.showOpenFilePicker === 'function';
+  }
+
+  private getBrowserInfo() {
+    const ua = navigator.userAgent;
+    if (ua.includes('Chrome') && !ua.includes('Edg/')) {
+      this.browserInfo = 'Google Chrome';
+    } else if (ua.includes('Edg/')) {
+      this.browserInfo = 'Microsoft Edge';
+    } else if (ua.includes('Opera') || ua.includes('OPR/')) {
+      this.browserInfo = 'Opera';
+    } else if (ua.includes('Firefox')) {
+      this.browserInfo = 'Mozilla Firefox';
+    } else if (ua.includes('Safari') && !ua.includes('Chrome')) {
+      this.browserInfo = 'Safari';
+    } else {
+      this.browserInfo = 'Неизвестный браузер';
+    }
+  }
+}