Open-ILS/src/eg2/src/app/staff/login.component.html

   1 <div class="container">
   2   <div class="col-lg-6 offset-lg-3">
   3     <fieldset>
   4       <legend class="mb-0" i18n><h1>Sign In</h1></legend>
   5       <hr class="mt-1"/>
   6       <form (ngSubmit)="handleSubmit()" #loginForm="ngForm" class="form-validated">
   7
   8         <div class="row row-cols-auto">
   9           <label class="form-label col-form-label fw-bold col-4 text-end" for="username" i18n>Username</label>
  10           <div class="col-8">
  11             <input
  12               type="text"
  13               class="form-control"
  14               id="username"
  15               name="username"
  16               required
  17               autocomplete="username"
  18               i18n-placeholder
  19               placeholder="Username"
  20               [(ngModel)]="args.username"/>
  21           </div>
  22         </div>
  23
  24         <!-- ESLint is right only because the ARIA spec hasn't been updated yet -->
  25         <!-- eslint-disable @angular-eslint/template/accessibility-valid-aria -->
  26         <div class="row row-cols-auto mt-3">
  27           <label class="form-label col-form-label col-4 text-end fw-bold" for="password" i18n>Password</label>
  28           <div class="col-8">
  29             <div class="input-group p-0">
  30               <input
  31                 [type]="passwordVisible ? 'text' : 'password'"
  32                 class="form-control"
  33                 id="password"
  34                 #password
  35                 name="password"
  36                 required
  37                 autocomplete="current-password"
  38                 i18n-placeholder
  39                 placeholder="Password"
  40                 spellcheck="false"
  41                 [attr.aria-description]="ariaDescription"
  42                 [(ngModel)]="args.password"/>
  43               <button id="show_password" class="input-group-text pointer"
  44                 type="button"
  45                 [attr.title]="passwordVisible ? 'Hide Password' : 'Show Password'"
  46                 [attr.aria-label]="passwordVisible ? 'Hide Password' : 'Show Password'"
  47                 i18n-aria-label i18n-title (click)="togglePasswordVisibility()" >
  48                 <span class="material-icons" aria-hidden="true">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</span>
  49               </button>
  50             </div>
  51           </div>
  52         </div>
  53         <!-- eslint-enable @angular-eslint/template/accessibility-valid-aria -->
  54
  55         <div class="row row-cols-auto mt-3" *ngIf="workstations && workstations.length">
  56           <label class="form-label col-form-label col-4 text-end fw-bold" for="workstation" i18n>Workstation</label>
  57           <div class="col-8">
  58             <select
  59               class="form-control"
  60               id="workstation"
  61               name="workstation"
  62               required
  63               [(ngModel)]="args.workstation">
  64               <option *ngFor="let ws of workstations" [value]="ws.name">
  65                 {{ws.name}}
  66               </option>
  67             </select>
  68           </div>
  69         </div>
  70
  71         <div class="row row-cols-auto mt-3">
  72           <div class="col-2 offset-4">
  73             <button type="submit" class="btn btn-outline-dark" i18n>Sign In</button>
  74           </div>
  75           <div class="col-4" *ngIf="loginFailed">
  76             <div class="badge rounded-pill bg-warning p-2" i18n>Login Failed</div>
  77           </div>
  78         </div>
  79
  80         <div class="row" *ngIf="pendingXactsDate">
  81           <div class="col-lg-8 offset-lg-4 alert alert-warning mt-2" i18n>
  82             Unprocessed offline transactions waiting for upload.
  83             Last transaction added at {{pendingXactsDate | date:'short'}}.
  84           </div>
  85         </div>
  86       </form>
  87     </fieldset>
  88   </div>
  89 </div>