Add keycloak login validation text

This commit is contained in:
2026-06-11 11:19:00 +02:00
parent 542ed5bb36
commit 436eb5558a
2 changed files with 20 additions and 9 deletions
+15 -9
View File
@@ -23,14 +23,19 @@
<div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row">
<span class="sg-label">Email</span>
<input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="email"
placeholder="Enter email"
aria-label="Email"
autocomplete="email"
>
<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="text"
value="lkn"
aria-label="Username or 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>
@@ -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;
}