remove kcwrapper elements, improve register form, handle narrow screens

lumbung.space/login/login-reset-password.ftl

@@ -5,10 +5,7 @@
     <#elseif section = "form">
         <form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
             <div class="${properties.kcFormGroupClass!}">
-                <div class="${properties.kcLabelWrapperClass!}">
+                <label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
-                    <label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
-                </div>
-                <div class="${properties.kcInputWrapperClass!}">
                     <#if auth?has_content && auth.showUsername()>
                         <input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus value="${auth.attemptedUsername}" aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"/>
                     <#else>
@@ -20,7 +17,6 @@
                                     ${kcSanitize(messagesPerField.get('username'))?no_esc}
                         </span>
                     </#if>
-                </div>
             </div>
             <div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
                 <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">

lumbung.space/login/register.ftl

@@ -5,15 +5,11 @@
     <#elseif section = "form">
         <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
             <div class="${properties.kcFormGroupClass!}">
-                <div class="${properties.kcLabelWrapperClass!}">
                     <label for="firstName" class="${properties.kcLabelClass!}">${msg("firstName")}</label>
-                </div>
-                <div class="${properties.kcInputWrapperClass!}">
                     <input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName"
                            value="${(register.formData.firstName!'')}"
                            aria-invalid="<#if messagesPerField.existsError('firstName')>true</#if>"
                     />
-                </div>
                 <#if messagesPerField.existsError('firstName')>
                     <span id="input-error-firstname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                         ${kcSanitize(messagesPerField.get('firstName'))?no_esc}
@@ -22,15 +18,11 @@
             </div>
 
             <div class="${properties.kcFormGroupClass!}">
-                <div class="${properties.kcLabelWrapperClass!}">
                     <label for="lastName" class="${properties.kcLabelClass!}">${msg("lastName")}</label>
-                </div>
-                <div class="${properties.kcInputWrapperClass!}">
                     <input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName"
                            value="${(register.formData.lastName!'')}"
                            aria-invalid="<#if messagesPerField.existsError('lastName')>true</#if>"
                     />
-                </div>
                     <#if messagesPerField.existsError('lastName')>
                         <span id="input-error-lastname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                             ${kcSanitize(messagesPerField.get('lastName'))?no_esc}
@@ -39,15 +31,11 @@
                             </div>
 
             <div class="${properties.kcFormGroupClass!}">
-                <div class="${properties.kcLabelWrapperClass!}">
                     <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
-                </div>
-                <div class="${properties.kcInputWrapperClass!}">
                     <input type="text" id="email" class="${properties.kcInputClass!}" name="email"
                            value="${(register.formData.email!'')}" autocomplete="email"
                            aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
                     />
-                    </div>
                     <#if messagesPerField.existsError('email')>
                         <span id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                             ${kcSanitize(messagesPerField.get('email'))?no_esc}
@@ -58,15 +46,11 @@
 
             <#if !realm.registrationEmailAsUsername>
                 <div class="${properties.kcFormGroupClass!}">
-                    <div class="${properties.kcLabelWrapperClass!}">
                         <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
-                    </div>
-                    <div class="${properties.kcInputWrapperClass!}">
                         <input type="text" id="username" class="${properties.kcInputClass!}" name="username"
                                value="${(register.formData.username!'')}" autocomplete="username"
                                aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
                         />
-                        </div>
                         <#if messagesPerField.existsError('username')>
                             <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                                 ${kcSanitize(messagesPerField.get('username'))?no_esc}
@@ -78,15 +62,11 @@
 
             <#if passwordRequired??>
                 <div class="${properties.kcFormGroupClass!}">
-                    <div class="${properties.kcLabelWrapperClass!}">
                         <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
-                    </div>
-                    <div class="${properties.kcInputWrapperClass!}">
                         <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
                                autocomplete="new-password"
                                aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
                         />
-                        </div>
                         <#if messagesPerField.existsError('password')>
                             <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
                                 ${kcSanitize(messagesPerField.get('password'))?no_esc}
@@ -96,11 +76,8 @@
                 </div>
 
                 <div class="${properties.kcFormGroupClass!}">
-                    <div class="${properties.kcLabelWrapperClass!}">
                         <label for="password-confirm"
                                class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
-                    </div>
-                    <div class="${properties.kcInputWrapperClass!}">
                         <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
                                name="password-confirm"
                                aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
@@ -111,15 +88,12 @@
                                 ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
                             </span>
                         </#if>
-                    </div>
                 </div>
             </#if>
 
             <#if recaptchaRequired??>
                 <div class="form-group">
-                    <div class="${properties.kcInputWrapperClass!}">
                         <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
-                    </div>
                 </div>
             </#if>
 

lumbung.space/login/resources/css/login.css

@@ -4,9 +4,13 @@ body {
   font-family: sans-serif;
   
 }
+a {
+    color: #1B4C8A;
+ }
+
 
 .card-pf {
-        border:2px solid #0e0e22;
+        border:2px solid black;
         max-width:500px;
         margin:auto;
         box-shadow:1em 1em 0 #d2d1c8;
@@ -84,35 +88,38 @@ body {
   }
 
 .pf-c-form-control {
-border: none;
+  border: none;
-padding: 5px 5px 5px 5px;
+  padding: 5px 5px 5px 5px;
-border-top: 2px solid black;
+  border-top: 2px solid black;
-flex-grow: 1;
+  flex-grow: 1;
+
 }
 
 /*Login form + options*/
 
 #kc-info {
-    border-top: 2px solid black;
     padding: 0.5em;
-    font-size: 1rem;
+    font-size: 14px;
 }
 
 .pf-c-form__helper-text {
     display: block;
-    width: 100%;
     border-top: 2px solid black;
     text-align: right;
     padding-right: 1em;
     padding: 0.2em;
 }
 
+.required{
+  background-color: salmon;
+}
+
 /*Register form*/
 
 #kc-register-form {
-    margin-left: 3em;
+    margin-left: 1em;
-    margin-right: 3em;
+    margin-right: 1em;
-    margin-top: 1.5em;
+    margin-top: 1em;
     margin-bottom: 1.5em;
 }
 
@@ -121,4 +128,52 @@ flex-grow: 1;
 #instruction1 {
     margin: 2em;
     font-size: 1rem;
+}
+
+#input-error {
+    border-top: 2px solid black;
+    width: 100%;
+    padding: 0;
+        padding-top: 0px;
+        padding-bottom: 0px;
+    display: inline-block;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    text-align: center;
+}
+
+/* Reset */
+
+.pf-c-alert__title .kc-feedback-text{
+  font-size: 14px;
+}
+
+/* Register */
+
+
+.pf-c-form__helper-text .pf-m-error .required .kc-feedback-text{
+  border-top: 2px solid black;
+}
+
+
+/* media queries */
+
+@media screen and (max-width: 530px) {
+
+
+.card-pf {
+    transform: initial;
+    box-shadow: unset;
+    width: 100%;
+}
+
+#kc-page-title {
+  border: unset;
+}
+
+#kc-register-form {
+    margin: unset;
+    margin-bottom: 1.5em;
+}
+    .......
 }

lumbung.space/login/theme.properties.bak

@@ -0,0 +1,130 @@
+parent=base
+import=common/keycloak
+
+styles=css/login.css css/tile.css
+stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
+
+meta=viewport==width=device-width,initial-scale=1
+
+kcHtmlClass=login-pf
+kcLoginClass=login-pf-page
+
+kcLogoLink=http://www.keycloak.org
+
+kcLogoClass=login-pf-brand
+
+kcContainerClass=container-fluid
+kcContentClass=col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3
+
+kcHeaderClass=login-pf-page-header
+kcFeedbackAreaClass=col-md-12
+kcLocaleClass=col-xs-12 col-sm-1
+
+## Locale
+kcLocaleMainClass=pf-c-dropdown
+kcLocaleListClass=pf-c-dropdown__menu pf-m-align-right
+kcLocaleItemClass=pf-c-dropdown__menu-item
+
+## Alert
+kcAlertClass=pf-c-alert pf-m-inline
+kcAlertTitleClass=pf-c-alert__title kc-feedback-text
+
+kcFormAreaClass=col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2
+kcFormCardClass=card-pf
+
+### Social providers
+kcFormSocialAccountListClass=pf-c-login__main-footer-links kc-social-links
+kcFormSocialAccountListGridClass=pf-l-grid kc-social-grid
+kcFormSocialAccountListButtonClass=pf-c-button pf-m-control pf-m-block kc-social-item kc-social-gray
+kcFormSocialAccountGridItem=pf-l-grid__item
+
+kcFormSocialAccountNameClass=kc-social-provider-name
+kcFormSocialAccountLinkClass=pf-c-login__main-footer-links-item-link
+kcFormSocialAccountSectionClass=kc-social-section kc-social-gray
+kcFormHeaderClass=login-pf-header
+
+kcFeedbackErrorIcon=fa fa-fw fa-exclamation-circle
+kcFeedbackWarningIcon=fa fa-fw fa-exclamation-triangle
+kcFeedbackSuccessIcon=fa fa-fw fa-check-circle
+kcFeedbackInfoIcon=fa fa-fw fa-info-circle
+
+kcResetFlowIcon=pficon pficon-arrow fa
+kcWebAuthnKeyIcon=pficon pficon-key
+
+kcFormClass=form-horizontal
+kcFormGroupClass=form-group
+kcFormGroupErrorClass=has-error
+kcLabelClass=pf-c-form__label pf-c-form__label-text
+kcLabelWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
+kcInputClass=pf-c-form-control
+kcInputErrorMessageClass=pf-c-form__helper-text pf-m-error required kc-feedback-text
+kcInputWrapperClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
+kcFormOptionsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
+kcFormButtonsClass=col-xs-12 col-sm-12 col-md-12 col-lg-12
+kcFormSettingClass=login-pf-settings
+kcTextareaClass=form-control
+kcSignUpClass=login-pf-signup
+
+
+kcInfoAreaClass=col-xs-12 col-sm-4 col-md-4 col-lg-5 details
+
+##### css classes for form buttons
+# main class used for all buttons
+kcButtonClass=pf-c-button
+# classes defining priority of the button - primary or default (there is typically only one priority button for the form)
+kcButtonPrimaryClass=pf-m-primary
+kcButtonDefaultClass=btn-default
+# classes defining size of the button
+kcButtonLargeClass=btn-lg
+kcButtonBlockClass=pf-m-block
+
+##### css classes for input
+kcInputLargeClass=input-lg
+
+##### css classes for form accessability
+kcSrOnlyClass=sr-only
+
+##### css classes for select-authenticator form
+kcSelectAuthListClass=pf-l-stack select-auth-container
+kcSelectAuthListItemClass=pf-l-stack__item select-auth-box-parent pf-l-split
+kcSelectAuthListItemIconClass=pf-l-split__item select-auth-box-icon
+kcSelectAuthListItemBodyClass=pf-l-split__item pf-l-stack
+kcSelectAuthListItemHeadingClass=pf-l-stack__item select-auth-box-headline pf-c-title
+kcSelectAuthListItemDescriptionClass=pf-l-stack__item select-auth-box-desc
+kcSelectAuthListItemFillClass=pf-l-split__item pf-m-fill
+kcSelectAuthListItemArrowClass=pf-l-split__item select-auth-box-arrow
+kcSelectAuthListItemArrowIconClass=fa fa-angle-right fa-lg
+
+##### css classes for the authenticators
+kcAuthenticatorDefaultClass=fa list-view-pf-icon-lg
+kcAuthenticatorPasswordClass=fa fa-unlock list-view-pf-icon-lg
+kcAuthenticatorOTPClass=fa fa-mobile list-view-pf-icon-lg
+kcAuthenticatorWebAuthnClass=fa fa-key list-view-pf-icon-lg
+kcAuthenticatorWebAuthnPasswordlessClass=fa fa-key list-view-pf-icon-lg
+
+##### css classes for the OTP Login Form
+kcLoginOTPListClass=pf-c-tile
+kcLoginOTPListInputClass=pf-c-tile__input
+kcLoginOTPListItemHeaderClass=pf-c-tile__header
+kcLoginOTPListItemIconBodyClass=pf-c-tile__icon
+kcLoginOTPListItemIconClass=fa fa-mobile
+kcLoginOTPListItemTitleClass=pf-c-tile__title
+
+##### css classes for identity providers logos
+kcCommonLogoIdP=kc-social-provider-logo kc-social-gray
+
+## Social
+kcLogoIdP-facebook=fa fa-facebook
+kcLogoIdP-google=fa fa-google
+kcLogoIdP-github=fa fa-github
+kcLogoIdP-linkedin=fa fa-linkedin
+kcLogoIdP-instagram=fa fa-instagram
+## windows instead of microsoft - not included in PF4
+kcLogoIdP-microsoft=fa fa-windows
+kcLogoIdP-bitbucket=fa fa-bitbucket
+kcLogoIdP-gitlab=fa fa-gitlab
+kcLogoIdP-paypal=fa fa-paypal
+kcLogoIdP-stackoverflow=fa fa-stack-overflow
+kcLogoIdP-twitter=fa fa-twitter
+kcLogoIdP-openshift-v4=pf-icon pf-icon-openshift
+kcLogoIdP-openshift-v3=pf-icon pf-icon-openshift