juice-shop/juice-shop

<!--
  ~ Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->
<h2 mat-dialog-title>{{'TITLE_CODING_CHALLENGE' | translate}}: {{dialogData.name}}</h2>
<mat-dialog-content class="mat-typography" id="code-snippet">
  <mat-tab-group
  mat-stretch-tabs
  [selectedIndex] = "tab.value"
  (selectedIndexChange) = "toggleTab($event)"
  >
      <mat-tab [label]="('TAB_FIND_IT' | translate)">
      <div class="container" fxLayout="column">
        <div fxLayout="row" fxLayoutGap="10px">
          <app-code-area
            *ngIf="snippet !== null"
            [code]="snippet?.snippet"
            [vulnLines]="snippet?.vulnLines"
            (addLine) = "addLine($event)">
          </app-code-area>
          <pre *ngIf="snippet === null">
            <code translate>LOADING_CODE_SNIPPET</code>
          </pre>
        </div>
      </div>
    </mat-tab>
    <mat-tab [disabled]="lockIcon() === 'lock'">
      <ng-template mat-tab-label>
        {{'TAB_FIX_IT' | translate}}
        <mat-icon class="materaial-icons-outlined" [color]="lockColor()">{{lockIcon()}}</mat-icon>
      </ng-template>
      <div fxLayout="column">
        <div fxLayout="row" fxLayoutGap="10px">
          <app-code-fixes *ngIf="snippet !== null && fixes !== null" [snippet]="snippet?.snippet" [fixes] = "fixes" [randomFixes] = "randomFixes" [selectedFix] = "selectedFix"></app-code-fixes>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>
</mat-dialog-content>
<mat-dialog-actions class="dialog-action">
  <div>
    <mat-card *ngIf="hint && tab.value === 0" class="primary-notification">
      {{hint}}
    </mat-card>
    <mat-card *ngIf="explanation && tab.value === 1" [class]="resultColor() === 'warn' ? 'warn-notification' : 'accent-notification'">
      {{explanation}}
    </mat-card>
    <div class="btns" [ngClass]="{'btns-findit': tab.value === 0}">
      <mat-form-field *ngIf="tab.value === 1" class="fix" appearance="fill">
        <mat-label translate>LABEL_CORRECT_FIX</mat-label>
        <select matNativeControl (change)="changeFix($event)">
          <option *ngFor="let fix of randomFixes; index as i" [value]="i"
          [selected]="selectedFix === i">Fix {{ i+1 }}</option>
        </select>
      </mat-form-field>

      <a *ngIf="this.showFeedbackButtons && this.solved.fixIt" [href]="'https://docs.google.com/forms/d/e/1FAIpQLSdaNEuz0dzFA2sexCa0AJ4QOb2OYdEL04eQOLFD2Y4T-BW6ag/viewform?usp=pp_url&entry.384948954=' + dialogData.name + '&entry.435235279=Coding+Challenge&entry.1734944650=Yes'" target="_blank">
        <button mat-icon-button><mat-icon color="accent">thumb_up</mat-icon></button>
      </a>
      <a *ngIf="this.showFeedbackButtons && this.solved.fixIt" [href]="'https://docs.google.com/forms/d/e/1FAIpQLSdaNEuz0dzFA2sexCa0AJ4QOb2OYdEL04eQOLFD2Y4T-BW6ag/viewform?usp=pp_url&entry.384948954=' + dialogData.name + '&entry.435235279=Coding+Challenge&entry.1734944650=No'" target="_blank">
        <button mat-icon-button><mat-icon color="warn">thumb_down</mat-icon></button>
      </a>

      <button mat-stroked-button mat-dialog-close class="close-dialog buttons" aria-label="Close Dialog" [mat-dialog-close]="solved" id="findItCloseButton">
        <i class="material-icons">
          close
        </i>
        <span>  {{'BTN_CLOSE' | translate}}</span>
      </button>

      <button *ngIf="tab.value === 0" mat-stroked-button (click) = "checkLines()" [disabled]="this.solved.findIt" id="findItSubmitButton">
        <span>  {{'BTN_SUBMIT' | translate}}</span>
        <mat-icon [color]="resultColor()">
          {{ resultIcon() }}
        </mat-icon>
      </button>

      <button *ngIf="tab.value === 1" mat-stroked-button (click) = "checkFix()" [disabled]="this.solved.fixIt" id="fixItSubmitButton">
        <span>  {{'BTN_SUBMIT' | translate}}</span>
        <mat-icon [color]="resultColor()">
          {{ resultIcon() }}
        </mat-icon>
      </button>
    </div>
  </div>
</mat-dialog-actions>