From 4f9a98d212c0929df2f92ae634d6c3185462f0ae Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Tue, 27 Dec 2022 10:55:42 -0500
Subject: [PATCH] LP2000482 Bootstrap 5: Login Page

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../src/eg2/src/app/staff/login.component.html     | 86 ++++++++++++----------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/login.component.html b/Open-ILS/src/eg2/src/app/staff/login.component.html
index 31edfcf90c..4a93a61172 100644
--- a/Open-ILS/src/eg2/src/app/staff/login.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/login.component.html
@@ -5,54 +5,60 @@
       <hr class="mt-1"/>
       <form (ngSubmit)="handleSubmit()" #loginForm="ngForm" class="form-validated">
 
-        <div class="form-group row">
-          <label class="col-lg-4 text-right font-weight-bold" for="username" i18n>Username</label>
-          <input 
-            type="text" 
-            class="form-control col-lg-8"
-            id="username" 
-            name="username"
-            required
-            autocomplete="username"
-            i18n-placeholder
-            placeholder="Username" 
-            [(ngModel)]="args.username"/>
+        <div class="row row-cols-auto">
+          <label class="col-form-label fw-bold col-4 text-end" for="username" i18n>Username</label>
+          <div class="col-8">
+            <input 
+              type="text" 
+              class="form-control"
+              id="username" 
+              name="username"
+              required
+              autocomplete="username"
+              i18n-placeholder
+              placeholder="Username" 
+              [(ngModel)]="args.username"/>
+          </div>
         </div>
 
-        <div class="form-group row">
-          <label class="col-lg-4 text-right font-weight-bold" for="password" i18n>Password</label>
-          <input 
-            type="password" 
-            class="form-control col-lg-8"
-            id="password" 
-            name="password"
-            required
-            autocomplete="current-password"
-            i18n-placeholder
-            placeholder="Password" 
-            [(ngModel)]="args.password"/>
+        <div class="row row-cols-auto mt-3">
+          <label class="col-form-label fw-bold col-4 text-end" for="password" i18n>Password</label>
+          <div class="col-8">
+            <input 
+              type="password" 
+              class="form-control"
+              id="password" 
+              name="password"
+              required
+              autocomplete="current-password"
+              i18n-placeholder
+              placeholder="Password" 
+              [(ngModel)]="args.password"/>
+          </div>
         </div>
 
-        <div class="form-group row" *ngIf="workstations && workstations.length">
-          <label class="col-lg-4 text-right font-weight-bold" for="workstation" i18n>Workstation</label>
-          <select 
-            class="form-control col-lg-8" 
-            id="workstation" 
-            name="workstation"
-            required
-            [(ngModel)]="args.workstation">
-            <option *ngFor="let ws of workstations" [value]="ws.name">
-              {{ws.name}}
-            </option>
-          </select>
+        <div class="row row-cols-auto mt-3" *ngIf="workstations && workstations.length">
+          <label class="col-form-label col-4 text-end fw-bold" for="workstation" i18n>Workstation</label>
+          <div class="col-8">
+            <select 
+              class="form-control" 
+              id="workstation" 
+              name="workstation"
+              required
+              [(ngModel)]="args.workstation">
+              <option *ngFor="let ws of workstations" [value]="ws.name">
+                {{ws.name}}
+              </option>
+            </select>
+          </div>
         </div>
 
-        <div class="row">
-          <div class="col-lg-2 offset-lg-4 pl-0">
+        <div class="row row-cols-auto mt-3">
+          <div class="col-2 offset-4">
             <button type="submit" class="btn btn-outline-dark" i18n>Sign In</button>
           </div>
-          <div class="col-lg-4" *ngIf="loginFailed">
-            <div class="badge badge-warning p-2" i18n>Login Failed</div>
+          <div class="col-4" *ngIf="loginFailed">
+            <div class="rounded-pill bg-warning p-2 ps-4" i18n>Login Failed</div>
           </div>
         </div>
 
-- 
2.11.0