Integrate file based backups into additional settings menu

frontend/src/app/score-board-preview/components/filter-settings/components/score-board-additional-settings-dialog/score-board-additional-settings-dialog.component.html

@@ -2,11 +2,26 @@
   <h1 mat-dialog-title translate>SCOREBOARD_ADDITIONAL_SETTINGS</h1>
 
   <div class="settings">
+    <div class="setting-group">
+      <h2 translate>BACKUP_HEADLINE</h2>
+      <div class="setting">
+        <span translate>SAVE_BACKUP_TOOLTIP</span>
+        <button mat-flat-button color="primary" (click)="localBackupService.save()"><mat-icon>save_alt</mat-icon><span translate>BTN_SAVE_BACKUP</span></button>
+      </div>
+      <div class="setting">
+        <input type="file"
+          #restoreBackupFile
+          (change)="localBackupService.restore($event.target.files.item(0))"
+          style="display:none;" />
+        <span translate>RESTORE_BACKUP_TOOLTIP</span>
+        <button mat-flat-button color="primary" (click)="restoreBackupFile.click()"><mat-icon>settings_backup_restore</mat-icon><span translate>BTN_RESTORE_BACKUP</span></button>
+      </div>
+    </div>
     <div class="setting-group">
       <h2 translate>FEATURE_FLAG_DEFAULT_SCORE_BOARD_NAME</h2>
       <div class="setting">
         <span translate>FEATURE_FLAG_DEFAULT_SCORE_BOARD_DESCRIPTION</span>
-        <mat-radio-group aria-label="Default ScoreBoard" (change)="updateDefaultScoreBoard($event.value)" [value]="scoreBoardVersion">
+        <mat-radio-group aria-label="Default ScoreBoard" (change)="featureFlagService.setDefaultScoreBoard($event.value)" [value]="scoreBoardVersion">
           <mat-radio-button value="v1">{{ "FEATURE_FLAG_DEFAULT_SCORE_BOARD_VALUE_OLD" | translate}}</mat-radio-button>
           <mat-radio-button value="v2">{{ "FEATURE_FLAG_DEFAULT_SCORE_BOARD_VALUE_NEW" | translate}}</mat-radio-button>
         </mat-radio-group>

frontend/src/app/score-board-preview/components/filter-settings/components/score-board-additional-settings-dialog/score-board-additional-settings-dialog.component.scss

@@ -45,3 +45,7 @@ h1 {
   grid-template-columns: auto max-content;
   margin-bottom: 16px;
 }
+
+button mat-icon {
+  margin-right: 8px;
+}

frontend/src/app/score-board-preview/components/filter-settings/components/score-board-additional-settings-dialog/score-board-additional-settings-dialog.component.spec.ts

@@ -5,6 +5,7 @@ import { TranslateModule } from '@ngx-translate/core'
 import { MatDialogModule, MatDialogRef } from '@angular/material/dialog'
 import { FeatureFlagService } from 'src/app/Services/feature-flag.service'
 import { of } from 'rxjs'
+import { LocalBackupService } from 'src/app/Services/local-backup.service'
 
 describe('ScoreBoardAdditionalSettingsDialogComponent', () => {
   let component: ScoreBoardAdditionalSettingsDialogComponent
@@ -25,6 +26,13 @@ describe('ScoreBoardAdditionalSettingsDialogComponent', () => {
             defaultScoreBoard$: of('v1'),
             setDefaultScoreBoard: () => null
           }
+        },
+        {
+          provide: LocalBackupService,
+          useValue: {
+            save: () => null,
+            restore: () => null
+          }
         }
       ]
     }).compileComponents()

frontend/src/app/score-board-preview/components/filter-settings/components/score-board-additional-settings-dialog/score-board-additional-settings-dialog.component.ts

@@ -3,6 +3,7 @@ import { MatDialogRef } from '@angular/material/dialog'
 import { Subscription } from 'rxjs'
 
 import { FeatureFlagService } from 'src/app/Services/feature-flag.service'
+import { LocalBackupService } from 'src/app/Services/local-backup.service'
 
 @Component({
   selector: "score-board-additional-settings-dialog",
@@ -17,7 +18,8 @@ export class ScoreBoardAdditionalSettingsDialogComponent
 
   constructor (
     public dialogRef: MatDialogRef<ScoreBoardAdditionalSettingsDialogComponent>,
-    public featureFlagService: FeatureFlagService
+    public featureFlagService: FeatureFlagService,
+    public localBackupService: LocalBackupService
   ) {}
 
   async ngOnInit () {
@@ -34,8 +36,4 @@ export class ScoreBoardAdditionalSettingsDialogComponent
       subscription.unsubscribe()
     }
   }
-
-  updateDefaultScoreBoard (value: 'v1' | 'v2') {
-    this.featureFlagService.setDefaultScoreBoard(value)
-  }
 }

frontend/src/app/score-board-preview/components/filter-settings/filter-settings.component.spec.ts

@@ -12,6 +12,7 @@ import { MatTooltipModule } from '@angular/material/tooltip'
 import { MatDialogModule } from '@angular/material/dialog'
 import { FeatureFlagService } from 'src/app/Services/feature-flag.service'
 import { DifficultySelectionSummaryPipe } from './pipes/difficulty-selection-summary.pipe'
+import { LocalBackupService } from 'src/app/Services/local-backup.service'
 
 describe('FilterSettingsComponent', () => {
   let component: FilterSettingsComponent
@@ -37,6 +38,13 @@ describe('FilterSettingsComponent', () => {
         {
           provide: FeatureFlagService,
           useValue: { getDefaultScoreBoard: () => 'v1' }
+        },
+        {
+          provide: LocalBackupService,
+          useValue: {
+            save: () => null,
+            restore: () => null
+          }
         }
       ]
     }).compileComponents()

frontend/src/assets/i18n/en.json

@@ -357,7 +357,10 @@
   "INFO_NEXT_TUTORIAL_TIER": "Complete the {{tier}} tutorial challenges to unveil the next difficulty tier!",
   "SHOW_COMMENT": "Show Comment",
   "INFO_VULNERABILITY_MITIGATION_LINK": "Click to learn how to avoid or mitigate similar vulnerabilities!",
+  "BACKUP_HEADLINE": "File Based Backups",
+  "BTN_SAVE_BACKUP": "Save Backup",
   "SAVE_BACKUP_TOOLTIP": "Save challenge progress and application settings to file.",
+  "BTN_RESTORE_BACKUP": "Restore Backup",
   "RESTORE_BACKUP_TOOLTIP": "Restore challenge progress and application settings from file.",
   "TAG_DANGER_ZONE": "Danger Zone",
   "TAG_DANGER_ZONE_DESCRIPTION": "Marks potentially dangerous challenges which are disabled on Docker/Heroku/Gitpod by default due to RCE or other risks.",