frontend/src/app/navbar/navbar.component.html
<!--
~ Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
~ SPDX-License-Identifier: MIT
-->
<mat-toolbar class="mat-elevation-z6" color="primary" fxLayout="column" xmlns="http://www.w3.org/1999/html">
<mat-toolbar-row fxLayout="row">
<button (click)="onToggleSidenav()" mat-button style="height:48px; width: 48px;" aria-label="Open Sidenav"
matTooltip="{{ 'SIDENAV_HINT' | translate }}" matTooltipPosition="below">
<mat-icon>menu</mat-icon>
</button>
<button mat-button routerLink="/search" style="height:60px;" class="buttons" aria-label="Back to homepage">
<img [src]="logoSrc" class="logo" alt={{applicationName}}>
<span fxHide.lt-sm fxShow style="font-size: x-large"> {{applicationName}} </span>
</button>
<span class="fill-remaining-space"></span>
<mat-search-bar #searchControl id="searchQuery" (onEnter)="search(searchControl.value)"
aria-label="Click to search"></mat-search-bar>
<button [matMenuTriggerFor]="userMenu" mat-button style="vertical-align: middle; height:48px;" class="buttons"
fxHide.lt-md fxShow aria-label="Show/hide account menu" id="navbarAccount">
<i class="material-icons">
account_circle
</i>
<span> {{"ACCOUNT" | translate}} </span>
</button>
<mat-menu #userMenu="matMenu">
<button *ngIf="!isLoggedIn()" mat-menu-item routerLink="/login" aria-label="Go to login page"
id="navbarLoginButton">
<mat-icon>
exit_to_app
</mat-icon>
<span>
{{"TITLE_LOGIN" | translate }}
</span>
</button>
<button (click)="goToProfilePage()" *ngIf="isLoggedIn()" mat-menu-item aria-label="Go to user profile">
<mat-icon>
account_circle
</mat-icon>
<span>
{{userEmail}}
</span>
</button>
<button *ngIf="isLoggedIn() && isAccounting()" mat-menu-item routerLink="/accounting"
aria-label="Go to accounting page">
<mat-icon>
account_balance
</mat-icon>
<span>
{{"ACCOUNTING" | translate}}
</span>
</button>
<button mat-menu-item *ngIf="isLoggedIn()" [matMenuTriggerFor]="ordersSubMenu"
aria-label="Show Orders and Payment Menu">
<mat-icon>
check_circle_outline
</mat-icon>
<span>
{{ "ORDERS_AND_PAYMENT" | translate }}
</span>
</button>
<button mat-menu-item *ngIf="isLoggedIn()" [matMenuTriggerFor]="privacySubMenu"
aria-label="Show Privacy and Security Menu">
<mat-icon>
security
</mat-icon>
<span>
{{ "PRIVACY_AND_SECURITY" | translate }}
</span>
</button>
<button (click)="logout()" *ngIf="isLoggedIn()" mat-menu-item aria-label="Logout" id="navbarLogoutButton">
<mat-icon>
power_settings_new
</mat-icon>
<span>
{{"TITLE_LOGOUT" | translate }}
</span>
</button>
</mat-menu>
<button *ngIf="isLoggedIn()" mat-button routerLink="/basket" style="height:48px;" class="buttons"
aria-label="Show the shopping cart">
<mat-icon>
shopping_cart
</mat-icon>
<span fxHide.lt-md fxShow> {{"TITLE_BASKET" | translate}}</span>
<span class="fa-layers-counter fa-layers-top-right fa-3x warn-notification"
style="font-size: 47px;">{{itemTotal}}</span>
</button>
<button [matMenuTriggerFor]="menu" mat-button style="height:48px; width: 48px;" class="buttons"
aria-label="Language selection menu"
matTooltip="{{ 'LANGUAGE_SEL_HINT' | translate }}" matTooltipPosition="below">
<mat-icon>
language
</mat-icon>
<span fxHide.lt-md fxShow> {{shortKeyLang}} </span>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="true">
<mat-radio-button (click)="changeLanguage(language.key)" *ngFor="let language of languages" [value]="language"
class="mat-menu-item" style="width: 240px;" checked="{{selectedLanguage === language}}"
aria-label="{{language.lang}}">
<div style="display: inline-block; width: 200px; margin-left: 5px;">
<span *ngFor="let icon of language.icons" [class]="'fi fi-' + icon"></span>
{{language?.lang}}
</div>
<i
[class]="'fas fa-thermometer-' + language.gauge + (language.percentage > 70 ? ' confirmation' : ' error')">
</i>
</mat-radio-button>
</mat-menu>
<mat-menu #privacySubMenu="matMenu">
<button mat-menu-item [routerLink]="['privacy-security/privacy-policy']" aria-label="Go to privacy policy page">
<mat-icon>
assignment
</mat-icon>
<span translate>TITLE_PRIVACY_POLICY</span>
</button>
<button mat-menu-item [routerLink]="['privacy-security/data-export']" aria-label="Go to data export page">
<mat-icon>
get_app
</mat-icon>
<span translate>TITLE_REQUEST_DATA_EXPORT</span>
</button>
<button mat-menu-item (click) = "goToDataErasurePage()" aria-label="Go to data subject page">
<mat-icon>
delete_forever
</mat-icon>
<span translate>DATA_SUBJECT_TITLE</span>
</button>
<mat-divider></mat-divider>
<button mat-menu-item [routerLink]="['privacy-security/change-password']" aria-label="Go to change password page">
<mat-icon>
edit
</mat-icon>
<span translate>TITLE_CHANGE_PASSWORD</span>
</button>
<button mat-menu-item [routerLink]="['privacy-security/two-factor-authentication']"
aria-label="Go to two factor authentication page">
<mat-icon>
exposure_plus_2
</mat-icon>
<span translate>TITLE_TWO_FACTOR_AUTH_CONFIG</span>
</button>
<button mat-menu-item [routerLink]="['privacy-security/last-login-ip']" aria-label="Go to last login ip page">
<mat-icon>
place
</mat-icon>
<span translate>LAST_LOGIN_IP</span>
</button>
</mat-menu>
<mat-menu #ordersSubMenu="matMenu">
<button mat-menu-item routerLink="/order-history" aria-label="Go to order history page">
<mat-icon>
archive
</mat-icon>
<span>
{{"LABEL_ORDER_HISTORY" | translate}}
</span>
</button>
<button mat-menu-item routerLink="/recycle" aria-label="Go to recycling page">
<mat-icon>
autorenew
</mat-icon>
<span>
{{"NAV_RECYCLE" | translate}}
</span>
</button>
<mat-divider></mat-divider>
<button *ngIf="isLoggedIn()" mat-menu-item routerLink="/address/saved" aria-label="Go to saved address page">
<mat-icon>
my_location
</mat-icon>
<span>
{{"MY_SAVED_ADRESSES" | translate}}
</span>
</button>
<button *ngIf="isLoggedIn()" mat-menu-item routerLink="/saved-payment-methods"
aria-label="Go to saved payment methods page">
<mat-icon>
credit_card
</mat-icon>
<span>
{{"MY_PAYMENT_OPTIONS" | translate}}
</span>
</button>
<button *ngIf="isLoggedIn()" mat-menu-item routerLink="/wallet" aria-label="Go to wallet page">
<mat-icon>
account_balance_wallet
</mat-icon>
<span>
{{"DIGITAL_WALLET" | translate}}
</span>
</button>
</mat-menu>
</mat-toolbar-row>
</mat-toolbar>