juice-shop/juice-shop

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

<div fxLayoutAlign="center">
  <mat-card class="mat-elevation-z6">

    <h1>Login</h1>

    <div class="error" *ngIf="error">{{error}}</div>

    <div class="form-container" id="login-form">

      <mat-form-field color="accent" appearance="outline">
        <mat-label translate>LABEL_EMAIL</mat-label>
        <input id="email" #email name="email"
               [formControl]="emailControl"
               (focus)="this.error=null"
               matInput placeholder=""
               aria-label="Text field for the login email">
        <mat-error *ngIf="emailControl.invalid" translate>MANDATORY_EMAIL</mat-error>
      </mat-form-field>

      <mat-form-field color="accent" appearance="outline">
        <mat-label translate>LABEL_PASSWORD</mat-label>
        <input id="password" #password name="password"
               [formControl]="passwordControl"
               (focus)="this.error=null"
               matInput placeholder="" [type]="hide ? 'password' : 'text'"
               aria-label="Text field for the login password">
        <button *ngIf="hide" mat-icon-button matSuffix (click)="hide = !hide"
                aria-label="Button to display the password" matTooltip="{{ 'SHOW_PWD_TOOLTIP' | translate  }}"
                matTooltipPosition=right>
          <i class="fas fa-eye" aria-label="Eye"></i>
        </button>
        <button *ngIf="!hide" mat-icon-button matSuffix (click)="hide = !hide" aria-label="Button to hide the password" matTooltip="{{ 'HIDE_PWD_TOOLTIP' | translate  }}"
                matTooltipPosition=right>
          <i class="fas fa-eye-slash" aria-label="Eye Slash"></i>
        </button>
        <mat-error *ngIf="passwordControl.invalid" translate>MANDATORY_PASSWORD</mat-error>
      </mat-form-field>

      <a class="primary-link forgot-pw" routerLink="/forgot-password" translate>FORGOT_PASSWORD</a>

      <button type="submit" id="loginButton" [disabled]="!emailControl.value||!passwordControl.value" mat-raised-button
              color="primary" (click)="login()" aria-label="Login">
        <mat-icon>
          exit_to_app
        </mat-icon>
        {{'BTN_LOGIN' | translate}}
      </button>

      <mat-checkbox [formControl]="rememberMe" id="rememberMe" aria-label="Checkbox to stay logged in or not logged in">
        {{'REMEMBER_ME' | translate}}
      </mat-checkbox>

      <div class="breakLine" *ngIf="!oauthUnavailable">
        <div class="line">
          <div></div>
        </div>
        <div class="textOnLine" translate>LABEL_OR</div>
        <div class="line">
          <div></div>
        </div>
      </div>

      <button id="loginButtonGoogle" *ngIf="!oauthUnavailable" mat-raised-button color="accent" (click)="googleLogin()"
              aria-label="Login with Google" class="google-button"><i
        class="fab fa-google fa-lg"></i> {{'BTN_GOOGLE_LOGIN' | translate}}
      </button>

      <div id="newCustomerLink">
        <a class="primary-link" routerLink="/register" translate>NO_CUSTOMER</a>
      </div>
    </div>
  </mat-card>
</div>