Add keycloak login validation text

patterns/vsf-register-step-1.html

@@ -23,14 +23,19 @@
 
               <div class="sg-form-sections-card__field-group">
                 <label class="sg-labeled-input-row">
-                  <span class="sg-label">Email</span>
+                  <span class="sg-label">Username or email</span>
+                  <span class="sg-input-validation-stack">
                     <input
                       class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-                    type="email"
+                      type="text"
-                    placeholder="Enter email"
+                      value="lkn"
-                    aria-label="Email"
+                      aria-label="Username or email"
-                    autocomplete="email"
+                      aria-invalid="true"
+                      aria-describedby="login-identifier-error"
+                      autocomplete="username"
                     >
+                    <span class="sg-form-validation-text" id="login-identifier-error">Invalid username or password.</span>
+                  </span>
                 </label>
 
                 <label class="sg-labeled-input-row">
@@ -40,7 +45,8 @@
                     type="password"
                     placeholder="Enter password"
                     aria-label="Password"
-                    autocomplete="new-password"
+                    aria-invalid="true"
+                    autocomplete="current-password"
                   >
                 </label>
               </div>

styles/10-components-interactive-elements.css

@@ -401,6 +401,11 @@
       line-height: var(--line-height-base);
     }
 
+    .sg-input-single-line[aria-invalid="true"],
+    .sg-input-multi-line[aria-invalid="true"] {
+      box-shadow: 0 0 0 1px var(--color-signal-red) inset;
+    }
+
     .sg-labeled-input-row:has(.sg-input-multi-line) {
       align-items: flex-start;
     }