Invert logic of tutorial mode configuration property

Author: bkimminich

.gitignore

@@ -52,4 +52,4 @@ config/*.yml
 !config/7ms.yml
 !config/mozilla.yml
 !config/unsafe.yml
-!config/beginner.yml
+!config/tutorial.yml

config.schema.yml

@@ -99,7 +99,7 @@ challenges:
     type: boolean
   showHints:
     type: boolean
-  isFullModeUnlocked:
+  restrictToTutorialsFirst:
     type: boolean
   overwriteUrlForProductTamperingChallenge:
     type: string

config/beginner.yml

@@ -67,7 +67,7 @@ application:
 challenges:
   showSolvedNotifications: true
   showHints: true
-  isFullModeUnlocked: true
+  restrictToTutorialsFirst: false
   overwriteUrlForProductTamperingChallenge: 'https://owasp.slack.com'
   xssBonusPayload: '<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/771984076&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>'
   safetyOverride: false

config/default.yml

@@ -0,0 +1,2 @@
+challenges:
+  restrictToTutorialsFirst: true

config/tutorial.yml

@@ -75,7 +75,7 @@ interface Config {
   challenges: {
     showSolvedNotifications: boolean
     showHints: boolean
-    isFullModeUnlocked: boolean
+    restrictToTutorialsFirst: boolean
     safetyOverride: boolean
     overwriteUrlForProductTamperingChallenge: string
   }

frontend/src/app/Services/configuration.service.ts

@@ -14,7 +14,7 @@
   <mat-card>
     <div class="star-container" fxLayout="row wrap">
       <mat-button-toggle *ngFor="let difficulty of availableDifficulties" (change)="toggleDifficulty(difficulty)"
-                         [checked]="displayedDifficulties.includes(difficulty)" [disabled]="!fullModeUnlocked && !allTutorialsCompleted">
+                         [checked]="displayedDifficulties.includes(difficulty)" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted">
         <label>
         <span class="fa-4x fa-layers fa-fw" style="display: block; margin: 5px;">
           <svg [style.fill]="'url(#' + difficulty + ')'" class="svg-inline--fa fa-star fa-w-18 star-border" aria-hidden="true"
@@ -38,22 +38,22 @@
         </label>
       </mat-button-toggle>
 
-      <button id="btnToggleAllDifficulties" class="mat-button" (click)="toggleAllDifficulty()" [disabled]="!fullModeUnlocked && !allTutorialsCompleted">{{(this.toggledMajorityOfDifficulties ? "BTN_HIDE_ALL" : "BTN_SHOW_ALL") | translate}}</button>
+      <button id="btnToggleAllDifficulties" class="mat-button" (click)="toggleAllDifficulty()" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted">{{(this.toggledMajorityOfDifficulties ? "BTN_HIDE_ALL" : "BTN_SHOW_ALL") | translate}}</button>
 
-      <mat-button-toggle (change)="toggleShowSolvedChallenges()" [checked]="showSolvedChallenges" [disabled]="!fullModeUnlocked && !allTutorialsCompleted">
+      <mat-button-toggle (change)="toggleShowSolvedChallenges()" [checked]="showSolvedChallenges" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted">
         <i class="fa-2x fas fa-trophy" aria-hidden="true"></i> {{"BTN_SHOW_SOLVED" | translate}}
       </mat-button-toggle>
 
       <mat-button-toggle id="btnToggleShowOnlyTutorialChallenges" (change)="toggleShowOnlyTutorialChallenges()"
-                         [checked]="showOnlyTutorialChallenges" [disabled]="!fullModeUnlocked && !allTutorialsCompleted"
-                         [matTooltip]="fullModeUnlocked || allTutorialsCompleted ? '' : ('INFO_FULL_CHALLENGE_MODE' | translate: {num: challenges.length})" matTooltipPosition="above">
+                         [checked]="showOnlyTutorialChallenges" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted"
+                         [matTooltip]="restrictToTutorialsFirst && !allTutorialsCompleted ? ('INFO_FULL_CHALLENGE_MODE' | translate: {num: challenges.length}) : ''" matTooltipPosition="above">
         <mat-icon>
           school
         </mat-icon>
         {{"BTN_SHOW_ONLY_TUTORIALS" | translate}}
       </mat-button-toggle>
 
-      <mat-button-toggle *ngIf="numDisabledChallenges > 0" (change)="toggleShowDisabledChallenges()" [checked]="showDisabledChallenges" [disabled]="!fullModeUnlocked && !allTutorialsCompleted">
+      <mat-button-toggle *ngIf="numDisabledChallenges > 0" (change)="toggleShowDisabledChallenges()" [checked]="showDisabledChallenges" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted">
         <i class="fa-2x fas fa-exclamation-circle" aria-hidden="true"></i> {{"BTN_SHOW_UNAVAILABLE" | translate}}
       </mat-button-toggle>
 
@@ -64,11 +64,11 @@
     <div class="category-container" fxLayout="row wrap">
       <mat-button-toggle class="category-toggle" appearance="legacy" *ngFor="let category of availableChallengeCategories"
                          (change)="toggleShowChallengeCategory(category)"
-                         [checked]="displayedChallengeCategories.includes(category)" [disabled]="!fullModeUnlocked && !allTutorialsCompleted">
+                         [checked]="displayedChallengeCategories.includes(category)" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted">
         {{category}}
       </mat-button-toggle>
 
-      <button class="mat-button" (click)="toggleAllChallengeCategory()" [disabled]="!fullModeUnlocked && !allTutorialsCompleted">{{(this.toggledMajorityOfCategories ? "BTN_HIDE_ALL" : "BTN_SHOW_ALL") | translate}}</button>
+      <button class="mat-button" (click)="toggleAllChallengeCategory()" [disabled]="restrictToTutorialsFirst && !allTutorialsCompleted">{{(this.toggledMajorityOfCategories ? "BTN_HIDE_ALL" : "BTN_SHOW_ALL") | translate}}</button>
     </div>
 
   </mat-card>

frontend/src/app/score-board/score-board.component.html

@@ -38,7 +38,7 @@ export class ScoreBoardComponent implements OnInit {
   public numDisabledChallenges: number = 0
   public showDisabledChallenges: boolean = false
   public showOnlyTutorialChallenges: boolean = true
-  public fullModeUnlocked: boolean = true
+  public restrictToTutorialsFirst: boolean = false
   public allTutorialsCompleted: boolean = false
   public disabledEnv?: string
   public displayedColumns = ['name', 'difficulty', 'description', 'category', 'status']
@@ -72,7 +72,7 @@ export class ScoreBoardComponent implements OnInit {
       this.showContributionInfoBox = config.application.showGitHubLinks
       this.questionnaireUrl = config.application.social && config.application.social.questionnaireUrl
       this.appName = config.application.name
-      this.fullModeUnlocked = config.challenges.isFullModeUnlocked
+      this.restrictToTutorialsFirst = config.challenges.restrictToTutorialsFirst
     }, (err) => console.log(err))
 
     this.challengeService.find({ sort: 'name' }).subscribe((challenges) => {
@@ -172,7 +172,7 @@ export class ScoreBoardComponent implements OnInit {
   calculateTutorialCompletion (challenges: Challenge[]) {
     this.allTutorialsCompleted = true
     for (let i = 0; i < challenges.length; i++) {
-      if (!this.fullModeUnlocked && challenges[i].tutorialOrder && !challenges[i].disabledEnv) {
+      if (this.restrictToTutorialsFirst && challenges[i].tutorialOrder && !challenges[i].disabledEnv) {
         this.allTutorialsCompleted = this.allTutorialsCompleted && challenges[i].solved
       }
     }