backups.component.html raw

   1  <div class="sam-text-header">
   2    <div class="header-buttons">
   3      <button class="header-btn" title="Lock" (click)="onClickLock()">
   4        <span class="emoji">🔒</span>
   5      </button>
   6      @if (devMode) {
   7        <button class="header-btn" title="Test Permission Prompt" (click)="onTestPrompt()">
   8          <span class="emoji">✨</span>
   9        </button>
  10      }
  11    </div>
  12    <button class="back-btn" title="Go Back" (click)="goBack()">
  13      <span class="emoji">←</span>
  14    </button>
  15    <span>Backups</span>
  16  </div>
  17  
  18  <div class="backup-settings">
  19    <div class="setting-row">
  20      <label for="maxBackups">Max Auto Backups:</label>
  21      <input
  22        id="maxBackups"
  23        type="number"
  24        [value]="maxBackups"
  25        min="1"
  26        max="20"
  27        (change)="onMaxBackupsChange($event)"
  28      />
  29    </div>
  30    <p class="setting-note">
  31      Automatic backups are created when significant changes are made.
  32      Manual and pre-restore backups are not counted toward this limit.
  33    </p>
  34  </div>
  35  
  36  <button class="btn btn-primary create-btn" (click)="createManualBackup()">
  37    Create Backup Now
  38  </button>
  39  
  40  <div class="backups-list">
  41    @if (backups.length === 0) {
  42      <div class="empty-state">
  43        <span>No backups yet</span>
  44      </div>
  45    }
  46    @for (backup of backups; track backup.id) {
  47      <div class="backup-item">
  48        <div class="backup-info">
  49          <span class="backup-date">{{ formatDate(backup.createdAt) }}</span>
  50          <div class="backup-meta">
  51            <span class="backup-reason" [class]="getReasonClass(backup.reason)">
  52              {{ getReasonLabel(backup.reason) }}
  53            </span>
  54            <span class="backup-identities">{{ backup.identityCount }} identity(ies)</span>
  55          </div>
  56        </div>
  57        <div class="backup-actions">
  58          <button
  59            class="btn btn-sm btn-secondary"
  60            (click)="
  61              confirm.show(
  62                'Restore this backup? A backup of your current state will be created first.',
  63                restoreBackup.bind(this, backup.id)
  64              )
  65            "
  66            [disabled]="restoringBackupId !== null"
  67          >
  68            {{ restoringBackupId === backup.id ? 'Restoring...' : 'Restore' }}
  69          </button>
  70          <button
  71            class="btn btn-sm btn-danger"
  72            (click)="
  73              confirm.show(
  74                'Delete this backup? This cannot be undone.',
  75                deleteBackup.bind(this, backup.id)
  76              )
  77            "
  78          >
  79            Delete
  80          </button>
  81        </div>
  82      </div>
  83    }
  84  </div>
  85  
  86  <lib-confirm #confirm></lib-confirm>
  87