Update theme to handle new version of Keycloak (#49)

The eye in the password field that displays the password in plaintext when clicked
vshn · Apr 2, 2024 · 6bac470 · 6bac470
1 parent 69088e2
commit 6bac470
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/theme/login/resources/css/styles.css b/theme/login/resources/css/styles.css
@@ -15,6 +15,30 @@
     visibility: hidden;
 }
 
+.display-flex {
+    display: flex;
+}
+
+.pf-c-button {
+    background-color: white;
+    border-radius: 0 3px 3px 0;
+}
+
+.pf-c-button:focus {
+    outline: none;
+}
+
+.pf-m-control {
+    width: 5rem;
+    border: #bdc0c7 1px solid;
+    border-left: none;
+    background-color: white;
+}
+
+#password {
+    border-radius: 3px 0 0 3px;
+}
+
 .vshn-logo {
     position: relative;
     width: 200px;

diff --git a/theme/login/theme.properties b/theme/login/theme.properties
@@ -26,6 +26,7 @@ kcFormGroupClass=form-group
 kcFormGroupErrorClass=is-invalid
 kcLabelClass=control-label
 kcLabelWrapperClass=col-12
+kcInputGroup=display-flex
 kcInputClass=form-control
 kcInputErrorMessageClass=parsley-errors-list filled
 kcInputWrapperClass=col-12
@@ -86,3 +87,8 @@ kcLoginOTPListItemHeaderClass=kcLoginOTPListItemHeaderClass
 kcLoginOTPListItemIconBodyClass=kcLoginOTPListItemIconBodyClass
 kcLoginOTPListItemIconClass=mdi mdi-code-smartphone
 kcLoginOTPListItemTitleClass=kcLoginOTPListItemTitleClass
+
+## Password visibility
+kcFormPasswordVisibilityButtonClass=pf-c-button pf-m-control
+kcFormPasswordVisibilityIconShow=mdi mdi-eye
+kcFormPasswordVisibilityIconHide=mdi mdi-eye-off