<h1 id="title" class="title">Forgot Password</h1>
<p class="sub-title" *ngIf="resetLink == 0">Enter your email address and we’ll send a OTP to reset your password</p>

<!-- <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
  <p class="alert-title"><b>Oh snap!</b></p>
  <ul class="alert-message-list">
    <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
  </ul>
</nb-alert>

<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
  <p class="alert-title"><b>Hooray!</b></p>
  <ul class="alert-message-list">
    <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
  </ul>
</nb-alert> -->
<div *ngIf="resetLink == 0">
  <form [formGroup]="form" (ngSubmit)="submit()" aria-labelledby="title">
    <div class="form-control-group">
      <label class="label" for="input-email">Enter your email address:</label>
      <input nbInput formControlName="email"
             placeholder="Email address"
             autofocus
             fullWidth
             fieldSize="large"
              [status]="form.get('email').dirty ? (form.get('email').invalid  ? 'danger' : 'success') : 'basic'"
             [attr.aria-invalid]="form.get('email').invalid && form.get('email').touched ? true : null">
      <ng-container *ngIf="form.get('email').invalid && form.get('email').touched">
        <p class="caption status-danger" *ngIf="form.get('email').errors?.required">
          Email is required!
        </p>
        <p class="caption status-danger" *ngIf="form.get('email').errors?.pattern">
          Email should be the real one!
        </p>
      </ng-container>
    </div>
  
    <button nbButton
            fullWidth status="success" 
         
            size="large"
            [disabled]="submitted || !form.get('email').valid"
            [class.btn-pulse]="submitted" type="submit">
      Request password
    </button>
  </form>
</div>
<div *ngIf="resetLink == 1">
  <p class="sub-title">{{forgotTokenEmail.message}}</p>
  <!-- <p>You can reset your password here.</p> -->
</div>


<section class="sign-in-or-up" aria-label="Sign in or sign up">
  <p><a class="text-link" routerLink="../login">Back to Log In</a></p>
  <!-- <p><a routerLink="../register" class="text-link">Register</a></p> -->
</section>
