Add a (optional) newly redesigned ScoreBoard

config.schema.yml

@@ -67,14 +67,6 @@ application:
     message:
       type: string
   cookieConsent:
-    backgroundColor:
-      type: string
-    textColor:
-      type: string
-    buttonColor:
-      type: string
-    buttonTextColor:
-      type: string
     message:
       type: string
     dismissText:

config/7ms.yml

@@ -28,10 +28,6 @@ application:
   welcomeBanner:
     showOnFirstStart: false
   cookieConsent:
-    backgroundColor: '#0395d5'
-    textColor: '#ffffff'
-    buttonColor: '#b3b3b3'
-    buttonTextColor: '#000000'
     message: 'If you stay on this website for more than 7 minutes our cookies will start tracking you.'
     dismissText: 'I`ll be long gone by then!'
     linkText: 'But I want to stay an arbitrary number of minutes!'

config/addo.yml

@@ -25,10 +25,6 @@ application:
   welcomeBanner:
     showOnFirstStart: false
   cookieConsent:
-    backgroundColor: '#c2185b'
-    textColor: '#ffffff'
-    buttonColor: '#b0bec5'
-    buttonTextColor: '#000000'
     message: 'Taste our 150 practitioner-baked cookies with 5 tracking flavors!'
     dismissText: 'Register for 24/7 cookies!'
     linkText: 'Yum, tell me more!'

config/bodgeit.yml

@@ -25,10 +25,6 @@ application:
   welcomeBanner:
     showOnFirstStart: false
   cookieConsent:
-    backgroundColor: '#000000'
-    textColor: '#ffffff'
-    buttonColor: '#ffffff'
-    buttonTextColor: '#000000'
     message: 'This website is so legacy, it might even run without cookies.'
     dismissText: 'Bodge it!'
     linkText: 'Lega-what?'

config/default.yml

@@ -36,10 +36,6 @@ application:
     title: 'Welcome to OWASP Juice Shop!'
     message: "<p>Being a web application with a vast number of intended security vulnerabilities, the <strong>OWASP Juice Shop</strong> is supposed to be the opposite of a best practice or template application for web developers: It is an awareness, training, demonstration and exercise tool for security risks in modern web applications. The <strong>OWASP Juice Shop</strong> is an open-source project hosted by the non-profit <a href='https://owasp.org' target='_blank'>Open Web Application Security Project (OWASP)</a> and is developed and maintained by volunteers. Check out the link below for more information and documentation on the project.</p><h1><a href='https://owasp-juice.shop' target='_blank'>https://owasp-juice.shop</a></h1>"
   cookieConsent:
-    backgroundColor: '#546e7a'
-    textColor: '#ffffff'
-    buttonColor: '#558b2f'
-    buttonTextColor: '#ffffff'
     message: 'This website uses fruit cookies to ensure you get the juiciest tracking experience.'
     dismissText: 'Me want it!'
     linkText: 'But me wait!'

config/mozilla.yml

@@ -26,10 +26,6 @@ application:
   welcomeBanner:
     showOnFirstStart: false
   cookieConsent:
-    backgroundColor: '#e95420'
-    textColor: '#ffffff'
-    buttonColor: '#2778c5'
-    buttonTextColor: '#ffffff'
     message: 'This website uses a myriad of 3rd-party cookies for your convenience and tracking pleasure.'
     dismissText: 'Never mind!'
     linkText: 'How can I turn this off?'

config/oss.yml

@@ -5,8 +5,6 @@ application:
     showOnFirstStart: false
   theme: blue-lightblue
   cookieConsent:
-    backgroundColor: '#23527c'
-    textColor: '#ffffff'
     message: 'We are not only using cookies but also recorded this session on YouTube!'
     dismissText: "I've been there live, so thanks!"
     linkText: 'I want to watch that!'

frontend/package.json

@@ -46,6 +46,7 @@
     "flag-icons": "^6.9.2",
     "font-mfizz": "^2.4.1",
     "jwt-decode": "^2.2.0",
+    "lodash-es": "^4.17.21",
     "material-icons": "^0.3.1",
     "ng-mat-search-bar": "^12.0.1",
     "ng-simple-slideshow": "^1.3.0-beta.11",

frontend/src/app/Models/challenge.model.ts

@@ -7,16 +7,18 @@ import { SafeHtml } from '@angular/platform-browser'
 
 export interface Challenge {
   name: string
+  key: string
   category: string
   tags?: string
   description?: string | SafeHtml
-  difficulty: number
+  difficulty: 1 | 2 | 3 | 4 | 5 | 6
   hint?: string
   hintUrl?: string
   disabledEnv?: string
   solved?: boolean
   tutorialOrder?: number
   hasTutorial?: boolean
   hasSnippet?: boolean
-  codingChallengeStatus?: number
+  codingChallengeStatus?: 0 | 1 | 2
+  mitigationUrl?: string
 }

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

@@ -6,7 +6,9 @@
 import { environment } from '../../environments/environment'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
 import { catchError, map } from 'rxjs/operators'
+import { Challenge } from '../Models/challenge.model'
 
 @Injectable({
   providedIn: 'root'
@@ -16,12 +18,12 @@ export class ChallengeService {
   private readonly host = this.hostServer + '/api/Challenges'
   constructor (private readonly http: HttpClient) { }
 
-  find (params?: any) {
+  find (params?: any): Observable<Challenge[]> {
     return this.http.get(this.host + '/', { params: params }).pipe(map((response: any) => response.data), catchError((err) => { throw err }))
   }
 
   repeatNotification (challengeName: string) {
-    return this.http.get(this.hostServer + '/rest/repeat-notification', { params: { challenge: challengeName } }).pipe(catchError((err) => { throw err }))
+    return this.http.get(this.hostServer + '/rest/repeat-notification', { params: { challenge: challengeName }, responseType: 'text' as const }).pipe(catchError((err) => { throw err }))
   }
 
   continueCode () {

frontend/src/app/Services/code-snippet.service.ts

@@ -31,7 +31,7 @@ export class CodeSnippetService {
     return this.http.get<CodeSnippet>(`${this.host}/${key}`).pipe(map((response: CodeSnippet) => response), catchError((err) => { throw err }))
   }
 
-  challenges () {
+  challenges (): Observable<string[]> {
     return this.http.get(`${this.host}`).pipe(map((response: any) => response.challenges), catchError((err) => { throw err }))
   }
 }

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

@@ -12,7 +12,7 @@ import { Observable } from 'rxjs'
 interface ConfigResponse {
   config: Config
 }
-interface Config {
+export interface Config {
   server: {
     port: number
   }
@@ -47,10 +47,6 @@ interface Config {
       message: string
     }
     cookieConsent: {
-      backgroundColor: string
-      textColor: string
-      buttonColor: string
-      buttonTextColor: string
       message: string
       dismissText: string
       linkText: string

frontend/src/app/Services/feature-flag.service.spec.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2014-2023 Bjoern Kimminich & the OWASP Juice Shop contributors.
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FeatureFlagService, SCORE_BOARD_FEATURE_FLAG_KEY } from './feature-flag.service'
+
+describe('FeatureFlagService', () => {
+  beforeEach(() => {
+    localStorage.removeItem(SCORE_BOARD_FEATURE_FLAG_KEY)
+  })
+
+  describe('defaultScoreBoard', () => {
+    it('should default to v1', (done) => {
+      const service = new FeatureFlagService()
+      service.defaultScoreBoard$.subscribe((value) => {
+        expect(value).toBe('v1')
+        done()
+      })
+    })
+    it('should read value from localStorage', (done) => {
+      localStorage.setItem(SCORE_BOARD_FEATURE_FLAG_KEY, 'v2')
+      const service = new FeatureFlagService()
+      service.defaultScoreBoard$.subscribe((value) => {
+        expect(value).toBe('v2')
+        done()
+      })
+    })
+    it('should update observable when values is updated', (done) => {
+      const service = new FeatureFlagService()
+      service.setDefaultScoreBoard('v2')
+      service.defaultScoreBoard$.subscribe((value) => {
+        expect(value).toBe('v2')
+        done()
+      })
+    })
+  })
+})

frontend/src/app/Services/feature-flag.service.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2014-2023 Bjoern Kimminich & the OWASP Juice Shop contributors.
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Injectable } from '@angular/core'
+import { BehaviorSubject, Subject } from 'rxjs'
+
+export type ScoreBoardVersion = 'v1' | 'v2'
+
+export const SCORE_BOARD_FEATURE_FLAG_KEY = 'score-board-version'
+
+@Injectable({
+  providedIn: "root",
+})
+export class FeatureFlagService {
+  constructor () {
+    const scoreBoardVersion = localStorage.getItem(SCORE_BOARD_FEATURE_FLAG_KEY)
+    if (scoreBoardVersion) {
+      this.defaultScoreBoard$.next(scoreBoardVersion as ScoreBoardVersion)
+    }
+  }
+
+  public defaultScoreBoard$: Subject<ScoreBoardVersion> = new BehaviorSubject<ScoreBoardVersion>('v1')
+  public setDefaultScoreBoard (scoreBoardVersion: ScoreBoardVersion) {
+    this.defaultScoreBoard$.next(scoreBoardVersion)
+    localStorage.setItem(SCORE_BOARD_FEATURE_FLAG_KEY, scoreBoardVersion)
+  }
+}

frontend/src/app/app.module.ts

@@ -72,6 +72,7 @@ import { ImageCaptchaService } from './Services/image-captcha.service'
 import { KeysService } from './Services/keys.service'
 import { AddressService } from './Services/address.service'
 import { QuantityService } from './Services/quantity.service'
+import { FeatureFlagService } from './Services/feature-flag.service'
 import { FlexLayoutModule } from '@angular/flex-layout'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { MatToolbarModule } from '@angular/material/toolbar'
@@ -102,6 +103,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'
 import { MatRadioModule } from '@angular/material/radio'
 import { MatBadgeModule } from '@angular/material/badge'
 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'
+import { ScoreBoardPreviewModule } from './score-board-preview/score-board-preview.module'
 import { TwoFactorAuthComponent } from './two-factor-auth/two-factor-auth.component'
 import { DataExportComponent } from './data-export/data-export.component'
 import { LastLoginIpComponent } from './last-login-ip/last-login-ip.component'
@@ -260,7 +262,8 @@ export function HttpLoaderFactory (http: HttpClient) {
     MatSlideToggleModule,
     MatChipsModule,
     NgxTextDiffModule,
-    HighlightModule
+    HighlightModule,
+    ScoreBoardPreviewModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
@@ -311,7 +314,8 @@ export function HttpLoaderFactory (http: HttpClient) {
     WalletService,
     OrderHistoryService,
     DeliveryService,
-    PhotoWallService
+    PhotoWallService,
+    FeatureFlagService
   ],
   bootstrap: [AppComponent]
 })

frontend/src/app/app.routing.ts

@@ -42,6 +42,7 @@ import { PhotoWallComponent } from './photo-wall/photo-wall.component'
 import { DeluxeUserComponent } from './deluxe-user/deluxe-user.component'
 import { AccountingGuard, AdminGuard, LoginGuard } from './app.guard'
 import { NFTUnlockComponent } from './nft-unlock/nft-unlock.component'
+import { ScoreBoardPreviewComponent } from './score-board-preview/score-board-preview.component'
 
 const loadFaucetModule = async () => {
   const module = await import('./faucet/faucet.module')
@@ -164,6 +165,10 @@ const routes: Routes = [
     path: 'score-board', // vuln-code-snippet vuln-line scoreBoardChallenge
     component: ScoreBoardComponent // vuln-code-snippet neutral-line scoreBoardChallenge
   }, // vuln-code-snippet neutral-line scoreBoardChallenge
+  { // vuln-code-snippet hide-line
+    path: 'score-board-preview', // vuln-code-snippet hide-line
+    component: ScoreBoardPreviewComponent // vuln-code-snippet hide-line
+  }, // vuln-code-snippet hide-line
   {
     path: 'track-result',
     component: TrackResultComponent

frontend/src/app/code-snippet/code-snippet.component.ts

@@ -21,13 +21,13 @@ enum ResultState {
   Wrong,
 }
 
-interface Solved {
+export interface Solved {
   findIt: boolean
   fixIt: boolean
 }
 
 @Component({
-  selector: 'app-user-details',
+  selector: 'code-snippet',
   templateUrl: './code-snippet.component.html',
   styleUrls: ['./code-snippet.component.scss']
   })

frontend/src/app/score-board-preview/components/challenge-card/challenge-card.component.html

@@ -0,0 +1,95 @@
+<span class="category-row">{{ challenge.category }}</span>
+
+<div class="name-row">
+  <div class="dot"></div>
+  <span class="name">{{ challenge.name }}</span>
+  <difficulty-stars
+    [difficulty]="challenge.difficulty"
+  ></difficulty-stars>
+</div>
+<div class="description-row" [innerHtml]="challenge.description"></div>
+<div class="bottom-row">
+  <div class="tags">
+    <span *ngFor="let tag of challenge.tagList" class="tag">{{ tag }}</span>
+  </div>
+  <div class="badge-group">
+    <!-- info text if the challenge is unavailable -->
+    <button 
+      class="badge"
+      *ngIf="challenge.disabledEnv !== null"
+      [matTooltip]="'CHALLENGE_UNAVAILABLE' | translate:{ env: challenge.disabledEnv }"
+    >
+      <mat-icon [style.color]="'var(--theme-warn)'">info_outline</mat-icon>
+    </button>
+    <!-- coding challenge badge -->
+    <button 
+      class="badge"
+      *ngIf="challenge.hasCodingChallenge"
+      (click)="openCodingChallengeDialog(challenge.key)"
+      [disabled]="challenge.solved === false"
+      [ngClass]="{
+        'partially-completed': challenge.codingChallengeStatus === 1,
+        'completed': challenge.codingChallengeStatus === 2
+      }"
+      [matTooltip]="(challenge.solved ? 'LAUNCH_CODING_CHALLENGE' : 'SOLVE_HACKING_CHALLENGE') | translate"
+    >
+      <span class="badge-status" *ngIf="challenge.codingChallengeStatus !== 0">{{ challenge.codingChallengeStatus }}/2</span>
+      <mat-icon>code</mat-icon>
+    </button>
+    <!-- cheat cheat link-->
+    <a
+      class="badge not-completable"
+      *ngIf="challenge.mitigationUrl"
+      [href]="challenge.mitigationUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      [matTooltip]="'INFO_VULNERABILITY_MITIGATION_LINK' | translate"
+    >
+      <mat-icon>policy_outline</mat-icon>
+    </a>
+    <!-- ctf mode flag repeat-->
+    <button 
+      class="badge"
+      [ngClass]="{ 'completed': challenge.solved }"
+      *ngIf="challenge.solved && applicationConfiguration.ctf.showFlagsInNotifications"
+      (click)="repeatChallengeNotification(challenge.key)"
+      [matTooltip]="'NOTIFICATION_RESEND_INSTRUCTIONS' | translate"
+    >
+      <mat-icon>flag_outline</mat-icon>
+    </button>
+    <!-- hacking instructor-->
+    <button 
+      class="badge not-completable"
+      *ngIf="hasInstructions(challenge.name)"
+      [matTooltip]="'INFO_HACKING_INSTRUCTOR' | translate"
+      (click)="startHackingInstructorFor(challenge.name)"
+    >
+      <mat-icon>school_outline</mat-icon>
+    </button>
+    <!-- challenge hint -->
+    <!-- with hintUrl -->
+    <a 
+      *ngIf="challenge.hint && challenge.hintUrl"
+      class="badge not-completable"
+      [style.padding]="'0 6px 0 4px'"
+      target="_blank"
+      rel="noopener noreferrer"
+      [href]="challenge.hintUrl"
+      [matTooltip]="challenge.hint | challengeHint:{hintUrl: challenge.hintUrl} | async"
+    >
+      <mat-icon>lightbulb</mat-icon>
+      Hint
+    </a>
+    <!-- challenge hint -->
+    <!-- without hintUrl -->
+    <span 
+      *ngIf="challenge.hint && !challenge.hintUrl"
+      class="badge not-completable"
+      [style.padding]="'0 6px 0 4px'"
+      [matTooltip]="challenge.hint"
+    >
+      <mat-icon>lightbulb</mat-icon>
+      Hint
+    </span>
+  </div>
+</div>