KNOX-3371: Fix broken error message on login page (#1290)

(cherry picked from commit 39a168a)

Author: hanicz

gateway-applications/src/main/resources/applications/knoxauth/app/js/knoxauth.js

@@ -121,14 +121,15 @@ var login = function() {
 					}
 					redirect(redirectUrl);
 				} else {
-					$('#errorBox').show();
-					$('#signInLoading').css('visibility', 'hidden');
-					$('#signIn').removeAttr('disabled');
 					if (request.status == 401) {
 						$('#errorBox .errorMsg').text("The username or password you entered is incorrect.");
 					} else {
 						$('#errorBox .errorMsg').text("Response from " + request.responseURL + " - " + request.status + ": " + request.statusText);
 					}
+					$('#errorBox').show();
+					$('#signInLoading').css('visibility', 'hidden');
+					$('#signIn').removeAttr('disabled');
+					$(window).trigger('resize');
 				}
 			}
 		};

gateway-applications/src/main/resources/applications/knoxauth/app/login.html

@@ -102,9 +102,10 @@
                         <label><i class="bi bi-lock"></i> Password:</label>
                         <input type="password" name="password" id="password" tabindex="2" autocomplete="off" onkeypress=keypressed(event)>
                     </div>
-                    <span id="errorBox" class="help-inline" style="color:white;display:none;"><span class="errorMsg"></span>
-                        <i class="bi bi-exclamation-triangle" style="color:#ae2817;"></i>
-                    </span>
+                    <div id="errorBox" style="display:none;" role="alert">
+                        <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
+                        <span class="errorMsg"></span>
+                    </div>
                     <button type="button" class="btn btn-primary w-100" id="signIn" tabindex="4" onkeypress="keypressed(event)" onclick="login();" style="position: relative; text-align: center;">
                         <span>Sign In</span>
                         <i id="signInLoading" class="bi bi-arrow-repeat icon-sign-in"></i>

gateway-applications/src/main/resources/applications/knoxauth/app/styles/knox.css

@@ -1732,6 +1732,28 @@ body.login {
   box-shadow: none !important;
   outline: none !important;
 }
+.login #errorBox {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background-color: rgba(174, 40, 23, 0.15);
+  border: 1px solid #ae2817;
+  border-radius: 3px;
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.4;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  width: 100%;
+}
+.login #errorBox i {
+  color: #ae2817;
+  margin-right: 8px;
+  vertical-align: text-top;
+}
+.login #errorBox .errorMsg {
+  display: inline;
+}
 .label-yellow{
     background-color: #f3a139;
 }