juice-shop/juice-shop

<!--
  ~ Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->

<mat-dialog-content>

  <div class="container mat-typography" fxLayout="column">
    <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="20px">
      <div fxFlex="noshrink">
        <img class="img-thumbnail" [src]="'assets/public/images/products/'+data.productData.image" alt={{data.productData.name}}>
      </div>

      <div>
        <h1>{{data.productData.name}}</h1>
        <div [innerHTML]="data.productData.description"></div>
        <br/>
        <div>
          <p class="item-price">{{data.productData.price}}&curren;</p>
          <div *ngIf="data.productData.points > 0" matTooltip="{{'LABEL_BONUS' | translate}}"
               aria-label="Bonus points when buying the product">
            <span class="fa-2x fa-layers fa-fw">
            <i class="fas fa-crown"></i>
            <span class="fa-layers-counter fa-layers-bottom-left fa-2x warn-notification" style="font-size: 47px;">{{ data.productData.points }}</span>
          </span>
          </div>
        </div>
      </div>
    </div>

    <mat-divider class="detail-divider"></mat-divider>
    <button mat-button style="height: 0; position: absolute;">
      <!-- 'absorbs' the auto-focus behavior -->
    </button>
    <mat-expansion-panel class="mat-elevation-z0" aria-label="Expand for Reviews">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <span style="margin-right: 5px;" translate>LABEL_REVIEWS</span> <span>({{(reviews$| async)?.length}})</span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <button mat-button style="height: 0; position: absolute;">
        <!-- 'absorbs' the auto-focus behavior -->
      </button>
      <div *ngIf="(reviews$| async)?.length >= 1; else emptyResult">
        <div *ngFor="let review of reviews$|async" class="comment">
          <div fxLayout="row">
            <div class="review-text"
                 (click)="review.author !== 'Anonymous' && review.author === author && editReview(review)"
                 matTooltipDisabled="{{review.author !== author}}" matTooltip="{{'LABEL_EDIT_REVIEW' | translate}}"
                 matTooltipPosition="right">
              <cite>{{review.author}}</cite>
              <p>{{ review.message }}</p>
            </div>
            <div>
              <button mat-icon-button (click)="likeReview(review)" [disabled]="review.liked || !isLoggedIn()"
                      class="rw-button" aria-label="Rate a helpful review">
                  <span class="fa-2x fa-layers fa-fw">
                    <mat-icon>thumb_up</mat-icon>
                    <span
                      class="fa-layers-counter fa-layers-bottom-right accent-notification" style="font-size: 32px;">{{ review.likesCount }}</span>
                  </span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <ng-template #emptyResult>
        <div>
            <span class="noResultText" translate>
              EMPTY_REVIEW_LIST
            </span>
        </div>
      </ng-template>
    </mat-expansion-panel>
    <div>

      <mat-divider class="detail-divider"></mat-divider>

      <h4 [style.display]="isLoggedIn() ? 'block' : 'none' " translate>WRITE_REVIEW</h4>
      <mat-form-field appearance="outline" color="accent"
                      [style.display]="isLoggedIn() ? 'block' : 'none' "  floatLabel="always">
        <mat-label translate>LABEL_REVIEW</mat-label>
        <mat-hint translate>
          <i class="fas fa-exclamation-circle"></i>
          <em style="margin-left:5px;" translate>{{ 'MAX_TEXTAREA_LENGTH' | translate: {length: '160'} }}</em>
        </mat-hint>
        <textarea [formControl]="reviewControl" #textPut cols="50" matInput
                  placeholder="{{'WRITE_REVIEW_PLACEHOLDER' | translate}}"
                  matTextareaAutosize matAutosizeMinRows="2" maxlength="160"
                  matAutosizeMaxRows="4" aria-label="Text field to review a product"
                  ></textarea>
        <mat-hint align="end">{{textPut.value?.length || 0}}/160</mat-hint>
      </mat-form-field>

      <mat-dialog-actions align="end" class="dialogAction">
        <button mat-stroked-button mat-dialog-close class="close-dialog buttons" aria-label="Close Dialog">
          <i class="material-icons">
            close
          </i>
          <span>  {{'BTN_CLOSE' | translate}}</span>
        </button>

        <button type="submit" id="submitButton" [disabled]="!textPut.value.trim()" mat-raised-button color="primary"
                (click)="addReview(textPut)" style="margin-bottom: 5px; margin-top: 5px; margin-left: 5px;"
                aria-label="Send the review" class="buttons"
                [style.display]="isLoggedIn() ? 'block' : 'none' ">
          <i class="material-icons">
            send
          </i>
          <span>
            {{'BTN_SUBMIT' | translate}}
          </span>
        </button>
      </mat-dialog-actions>
    </div>
  </div>
</mat-dialog-content>