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 *ngIf="loginFailed" id="form-error-summary" class="row">
   9           <div class="col">
  10             <p class="alert alert-danger label-with-material-icon w-100">
  11               <span class="material-icons" aria-hidden="true"
  12                 title="Error" i18n-title>report</span>
  13               <span class="ms-1" i18n>Login Failed</span>
  14             </p>
  15           </div>
  16         </div>
  17
  18         <div class="row row-cols-auto">
  19           <label class="form-label col-form-label fw-bold col-4 text-end" for="username" i18n>Username</label>
  20           <div class="col-8">
  21             <input
  22               type="text"
  23               class="form-control"
  24               id="username"
  25               name="username"
  26               required
  27               aria-describedby="form-error-summary"
  28               autocomplete="username"
  29               i18n-placeholder
  30               placeholder="Username"
  31               [(ngModel)]="args.username"/>
  32           </div>
  33         </div>
  34
  35         <div class="row row-cols-auto mt-3">
  36           <label class="form-label col-form-label col-4 text-end fw-bold" for="password" i18n>Password</label>
  37           <div class="col-8">
  38             <div class="input-group p-0">
  39               <input
  40                 [type]="passwordVisible ? 'text' : 'password'"
  41                 class="form-control"
  42                 id="password"
  43                 #password
  44                 name="password"
  45                 required
  46                 autocomplete="current-password"
  47                 i18n-placeholder
  48                 placeholder="Password"
  49                 spellcheck="false"
  50                 aria-describedby="form-error-summary password-visibility"
  51                 [(ngModel)]="args.password"/>
  52               <button id="show_password" class="input-group-text pointer"
  53                 type="button"
  54                 [attr.title]="passwordVisible ? 'Hide Password' : 'Show Password'"
  55                 [attr.aria-label]="passwordVisible ? 'Hide Password' : 'Show Password'"
  56                 i18n-aria-label i18n-title (click)="togglePasswordVisibility()" >
  57                 <span class="material-icons" aria-hidden="true">{{ passwordVisible ? 'visibility' : 'visibility_off' }}</span>
  58               </button>
  59               <p id="password-visibility" class="visually-hidden" *ngIf="!passwordVisible" i18n>Your password is not visible.</p>
  60               <p id="password-visibility" class="visually-hidden" *ngIf="passwordVisible" i18n>Your password is visible.</p>
  61             </div>
  62           </div>
  63         </div>
  64
  65         <div class="row row-cols-auto mt-3" *ngIf="workstations && workstations.length">
  66           <label class="form-label col-form-label col-4 text-end fw-bold" for="workstation" i18n>Workstation</label>
  67           <div class="col-8">
  68             <select
  69               class="form-control"
  70               id="workstation"
  71               name="workstation"
  72               aria-describedby="form-error-summary"
  73               required
  74               [(ngModel)]="args.workstation">
  75               <option *ngFor="let ws of workstations" [value]="ws.name">
  76                 {{ws.name}}
  77               </option>
  78             </select>
  79           </div>
  80         </div>
  81
  82         <div class="row row-cols-auto mt-3">
  83           <div class="col-2 offset-4">
  84             <button type="submit" class="btn btn-outline-dark" i18n>Sign In</button>
  85           </div>
  86         </div>
  87
  88         <div class="row" *ngIf="pendingXactsDate">
  89           <div class="col-lg-8 offset-lg-4 alert alert-warning mt-2" i18n>
  90             Unprocessed offline transactions waiting for upload.
  91             Last transaction added at {{pendingXactsDate | date:'short'}}.
  92           </div>
  93         </div>
  94       </form>
  95     </fieldset>
  96   </div>
  97 </div>