client/src/app/login/login.component.html

   1 <div class="margin-content">
   2   <div class="title-page title-page-single">
   3     Login
   4   </div>
   5
   6   <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
   7
   8   <form role="form" (ngSubmit)="login()" [formGroup]="form">
   9     <div class="form-group">
  10       <label for="username">User</label>
  11       <input
  12         type="text" id="username" placeholder="Username or email address" required
  13         formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
  14       >
  15       <div *ngIf="formErrors.username" class="form-error">
  16         {{ formErrors.username }}
  17       </div>
  18     </div>
  19
  20     <div class="form-group">
  21       <label for="password">Password</label>
  22       <div>
  23         <input
  24           type="password" name="password" id="password" placeholder="Password" required
  25           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
  26         >
  27         <div class="forgot-password-button" (click)="openForgotPasswordModal()">I forgot my password</div>
  28       </div>
  29       <div *ngIf="formErrors.password" class="form-error">
  30         {{ formErrors.password }}
  31       </div>
  32     </div>
  33
  34     <input type="submit" value="Login" [disabled]="!form.valid">
  35   </form>
  36 </div>
  37
  38 <div bsModal #forgotPasswordModal="bs-modal" (onShown)="onForgotPasswordModalShown()" class="modal" tabindex="-1">
  39   <div class="modal-dialog">
  40     <div class="modal-content">
  41
  42       <div class="modal-header">
  43         <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
  44         <h4 class="modal-title">Forgot your password</h4>
  45       </div>
  46
  47       <div class="modal-body">
  48         <div class="form-group">
  49           <label for="forgot-password-email">Email</label>
  50           <input
  51             type="email" id="forgot-password-email" placeholder="Email address" required
  52             [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
  53           >
  54         </div>
  55
  56         <div class="form-group inputs">
  57           <span class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
  58             Cancel
  59           </span>
  60
  61           <input
  62             type="submit" value="Send me an email to reset my password" class="action-button-submit"
  63             (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
  64           >
  65         </div>
  66       </div>
  67     </div>
  68   </div>
  69 </div>