<div class="container vertical-spacing">
  <div class="row">
    <div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
      <!-- CODE FROM EMAIL FORM -->
      <form class="auth-form" autocomplete="off" (ngSubmit)="onSubmitTokenForm(newTokenForm)" #newTokenForm="ngForm" *ngIf="!token">
        <h1 class="heading heading--md heading--separator">Token (code from email)</h1>

        <!-- token -->
        <div class="form-group" [ngClass]="{ 'form-group-invalid': !code.valid && code.touched }">
          <label for="code">Token</label>
          <input
            type="text"
            class="form-control"
            name="code"
            id="code"
            required
            placeholder="{{ 'Action.Enter' | translate }} token..."
            ngModel
            #code="ngModel"
            [attr.aria-describedby]="'code_error'"
            [attr.aria-invalid]="!code.valid && code.touched"
          />

          <!-- token field validation error -->
          <small class="form-text text-danger" role="alert" id="code_error" *ngIf="!code.valid && code.touched" @toggleVertically>
            {{ 'Validation.Required' | translate }}
          </small>
        </div>

        <!-- submit form -->
        <div class="form-group clearfix">
          <button
            type="submit"
            class="btn"
            [ngClass]="!newTokenForm.valid ? 'btn-secondary disabled' : 'btn-primary'"
            [disabled]="!newTokenForm.valid"
          >
            {{ 'Action.Save' | translate | uppercase }}
          </button>
        </div>
      </form>

      <!-- RESET PASSWORD -->
      <form class="auth-form" (ngSubmit)="onSubmitNewPassword()" [formGroup]="resetPasswordForm" autocomplete="off" *ngIf="token">
        <h1 class="heading heading--md heading--separator">
          {{ 'User.NewPasswordCreation' | translate }}
        </h1>

        <!-- RESET PASSWORD FORM-->
        <ng-container *ngIf="!passwordChanged">
          <!-- api notifications  -->
          <app-notifications aria-live="polite"></app-notifications>

          <!-- PASSWORD -->
          <div
            class="form-group"
            [ngClass]="{
              'form-group-invalid': resetPasswordForm.controls.new_password1.invalid && resetPasswordForm.controls.new_password1.touched
            }"
          >
            <label for="new_password1">
              {{ 'User.NewPassword' | translate }}
            </label>

            <!-- New Password with hint (tooltip) -->
            <div style="position: relative">
              <input
                type="password"
                class="form-control"
                id="new_password1"
                placeholder="{{ 'Action.Enter' | translate }} {{ 'User.NewPassword' | translate | lowercase }}"
                [attr.aria-describedby]="'password_policy password1_error'"
                [attr.aria-invalid]="resetPasswordForm.controls.new_password1.invalid && resetPasswordForm.controls.new_password1.touched"
                formControlName="new_password1"
                (focus)="showPasswordHint = true"
                (blur)="showPasswordHint = false"
                (mouseenter)="showPasswordHint = true"
                (mouseleave)="showPasswordHint = false"
              />

              <!-- New Password policy description -->
              <span class="hint" role="tooltip" id="password_policy" aria-live="polite" *ngIf="showPasswordHint">
                <small>
                  {{ 'Validation.VarPasswordPolicy' | translate: { param: passwordMinLength } }}
                </small>
              </span>
            </div>

            <!-- New Password - required error -->
            <small
              class="form-text text-danger"
              id="password1_error"
              *ngIf="resetPasswordForm.controls.new_password1.invalid && resetPasswordForm.controls.new_password1.touched"
              @toggleVertically
            >
              {{ 'User.NewPassword' | translate }}
              {{ 'Validation.IsRequired' | translate }}
            </small>

            <!-- visual password validator -->
            <app-visual-password-validator [control]="resetPasswordForm.get('new_password1')"></app-visual-password-validator>
          </div>

          <!-- PASSWORD CONFIRMATION -->
          <div
            class="form-group"
            [ngClass]="{
              'form-group-invalid':
                (resetPasswordForm.controls.new_password2.invalid && resetPasswordForm.controls.new_password2.touched) ||
                resetPasswordForm.hasError('notEqualValues')
            }"
          >
            <label for="new_password2">
              {{ 'User.RetypePassword' | translate }}
            </label>

            <!-- Password confirmation -->
            <input
              type="password"
              class="form-control"
              id="new_password2"
              placeholder="{{ 'User.RetypePassword' | translate }}"
              formControlName="new_password2"
              autocomplete="off"
              [attr.aria-describedby]="'password2_error'"
              [attr.aria-invalid]="
                (resetPasswordForm.controls.new_password2.invalid && resetPasswordForm.controls.new_password2.touched) ||
                resetPasswordForm.hasError('notEqualValues')
              "
            />

            <!-- Password confirmation - required error -->
            <small
              class="form-text text-danger"
              id="password2_error"
              *ngIf="
                (resetPasswordForm.controls.new_password2.invalid && resetPasswordForm.controls.new_password2.touched) ||
                resetPasswordForm.hasError('notEqualValues')
              "
              @toggleVertically
            >
              {{ 'Validation.RequiredPasswordConfirmation' | translate }}
            </small>
          </div>

          <div class="form-check clearfix">
            <!-- fake button to indicate 'disabled' state -->
            <button
              type="button"
              class="btn btn-secondary disabled"
              aria-describedby="backend_notifications password1_error password2_error"
              [attr.aria-disabled]="true"
              *ngIf="!resetPasswordForm.valid"
            >
              {{ 'User.ChangePassword' | translate | uppercase }}
            </button>

            <!-- submit -->
            <button type="submit" class="btn btn-primary" *ngIf="resetPasswordForm.valid">
              {{ 'User.CreatePassword' | translate | uppercase }}
            </button>
          </div>
        </ng-container>

        <!-- PASSWORD SUCCESSFULLY CHANGED -->
        <ng-container *ngIf="passwordChanged">
          <!-- success message -->
          <div role="alert" role="alert" aria-live="polite">
            <p class="alert alert-success">
              <strong>
                {{ 'User.Congratulations' | translate }}
              </strong>
              {{ 'User.PasswordChanged' | translate }}
            </p>

            <!-- login page redirection -->
            <p class="text-center">
              <a [routerLink]="['/!user', '!login'] | localize">
                {{ 'Action.Login' | translate }}
              </a>
            </p>
          </div>
        </ng-container>
      </form>
    </div>
  </div>
</div>
