work on other views as well

lumbung.space/login/register.ftl

@@ -13,13 +13,12 @@
                            value="${(register.formData.firstName!'')}"
                            aria-invalid="<#if messagesPerField.existsError('firstName')>true</#if>"
                     />
-
-                    <#if messagesPerField.existsError('firstName')>
-                        <span id="input-error-firstname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-                            ${kcSanitize(messagesPerField.get('firstName'))?no_esc}
-                        </span>
-                    </#if>
                 </div>
+                <#if messagesPerField.existsError('firstName')>
+                    <span id="input-error-firstname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                        ${kcSanitize(messagesPerField.get('firstName'))?no_esc}
+                    </span>
+                </#if>
             </div>
 
             <div class="${properties.kcFormGroupClass!}">
@@ -31,14 +30,13 @@
                            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}
                         </span>
                     </#if>
-                </div>
+                            </div>
-            </div>
 
             <div class="${properties.kcFormGroupClass!}">
                 <div class="${properties.kcLabelWrapperClass!}">
@@ -49,13 +47,13 @@
                            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}
                         </span>
                     </#if>
-                </div>
+                
             </div>
 
             <#if !realm.registrationEmailAsUsername>
@@ -68,13 +66,13 @@
                                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}
                             </span>
                         </#if>
-                    </div>
+                    
                 </div>
             </#if>
 
@@ -88,13 +86,13 @@
                                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}
                             </span>
                         </#if>
-                    </div>
+                    
                 </div>
 
                 <div class="${properties.kcFormGroupClass!}">

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

@@ -16,10 +16,10 @@ body {
 
 .card-pf #kc-content #kc-content-wrapper {
 
-  padding: 1em;
-
 }
 
+/*Login form */
+
 .login-pf-header {
   border-bottom: 2px solid black;
 }
@@ -37,7 +37,10 @@ body {
 }
 
 #kc-form-wrapper {
-  margin-top: 1em;
+    margin-top: 1em;
+    margin-left: 3em;
+    margin-right: 3em;
+    margin-bottom: 0.5em;
 }
 
 #kc-form-login {
@@ -50,12 +53,13 @@ body {
 
 .form-group {
   font-size: 14px;
-  margin: 5px auto;
+  margin: 10px auto;
   border:2px solid #0e0e22;
   width: 100%;
   display: flex;
-  justify-content: start;
+  justify-content: space-between;
   align-items: baseline;
+  flex-wrap: wrap;
 
 }
 
@@ -81,3 +85,36 @@ padding: 5px 5px 5px 5px;
 border-left: 2px solid black;
 flex-grow: 1;
 }
+
+/*Login form + options*/
+
+#kc-info {
+    border-top: 2px solid black;
+    padding: 0.5em;
+    font-size: 1rem;
+}
+
+.pf-c-form__helper-text {
+    display: block;
+    width: 100%;
+    border-top: 2px solid black;
+    text-align: right;
+    padding-right: 1em;
+    padding: 0.2em;
+}
+
+/*Register form*/
+
+#kc-register-form {
+    margin-left: 3em;
+    margin-right: 3em;
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+}
+
+/*Page has expired message*/
+
+#instruction1 {
+    margin: 2em;
+    font-size: 1rem;
+}