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           <input
  11             type="text"
  12             class="form-control col-lg-8"
  13             id="username"
  14             name="username"
  15             required
  16             autocomplete="username"
  17             i18n-placeholder
  18             placeholder="Username"
  19             [(ngModel)]="args.username"/>
  20         </div>
  21
  22         <div class="row row-cols-auto">
  23           <label class="col-lg-4 text-right font-weight-bold" for="password" i18n>Password</label>
  24           <div class="input-group col-lg-8 p-0">
  25           <input
  26             [type]="passwordVisible ? 'text' : 'password'"
  27             class="form-control"
  28             id="password"
  29             #password
  30             name="password"
  31             required
  32             autocomplete="current-password"
  33             i18n-placeholder
  34             placeholder="Password"
  35             spellcheck="false"
  36             [attr.aria-description]="ariaDescription"
  37             [(ngModel)]="args.password"/>
  38           <button id="show_password" class="input-group-text pointer"
  39                   type="button" aria-label="password visibility" aria-checked="false"
  40                   (click)="togglePasswordVisibility()" >
  41             <span class="material-icons">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</span>
  42           </button>
  43           </div>
  44         </div>
  45
  46         <div class="row row-cols-auto mt-3" *ngIf="workstations && workstations.length">
  47           <label class="form-label col-form-label col-4 text-end fw-bold" for="workstation" i18n>Workstation</label>
  48           <select
  49             class="form-control col-lg-8"
  50             id="workstation"
  51             name="workstation"
  52             required
  53             [(ngModel)]="args.workstation">
  54             <option *ngFor="let ws of workstations" [value]="ws.name">
  55               {{ws.name}}
  56             </option>
  57           </select>
  58         </div>
  59
  60         <div class="row row-cols-auto mt-3">
  61           <div class="col-2 offset-4">
  62             <button type="submit" class="btn btn-outline-dark" i18n>Sign In</button>
  63           </div>
  64           <div class="col-4" *ngIf="loginFailed">
  65             <div class="badge rounded-pill bg-warning p-2" i18n>Login Failed</div>
  66           </div>
  67         </div>
  68
  69         <div class="row" *ngIf="pendingXactsDate">
  70           <div class="col-lg-8 offset-lg-4 alert alert-warning mt-2" i18n>
  71             Unprocessed offline transactions waiting for upload.
  72             Last transaction added at {{pendingXactsDate | date:'short'}}.
  73           </div>
  74         </div>
  75       </form>
  76     </fieldset>
  77   </div>
  78 </div>