Merge pull request 'fix: registration broken since update to 25.0.6' (!3) from fix-registration into main

Reviewed-on: #3

common/resources/css/index.css

@@ -21,8 +21,10 @@ html {
   width: 100vw;
   height: 100vh;
   margin: 0;
-  font-size: 20px; }
+  font-size: 16px; }
-
+  @media screen and (min-width: 1200px) {
+    html {
+      font-size: 20px; } }
 *:focus-visible {
   outline: 0.2rem solid var(--accent); }
 
@@ -57,23 +59,26 @@ html {
     padding: 0rem 2rem; }
 
 .ps-button {
-  padding: 0.5rem 1rem;
   font-size: 1rem;
-  line-height: 1.2rem;
+  padding: 0.5em 1em;
-  border: 2px solid var(--foreground);
+  line-height: 1.2em;
-  border-radius: 1.5rem;
+  border: 0.125em solid var(--foreground);
+  border-radius: 1.5em;
   background-color: var(--background-darker-2);
   cursor: pointer; }
   .ps-button:hover, .ps-button:focus {
     border-color: var(--accent); }
   .ps-button_primary {
-    border: 4px solid var(--foreground);
+    border: 0.25em solid var(--foreground);
     background-color: var(--background);
     color: var(--foreground);
     font-weight: bold; }
     .ps-button_primary:focus, .ps-button_primary:hover {
       background-color: var(--foreground);
       color: var(--background); }
+  .ps-button_small {
+    font-size: 0.8rem;
+    padding: 0.25em 0.7em; }
 
 .ps-input {
   padding: 0.5rem 0.5rem;
@@ -116,18 +121,20 @@ html {
   display: flex;
   flex-direction: column; }
   .ps-form-group--label {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
-    display: flex;
+    display: inline-block;
-    font-weight: bold; }
+    font-weight: bold;
+    margin-top: 0.5rem; }
   .ps-form-group .ps-button {
     align-self: flex-start; }
   .ps-form-group--error {
     margin-top: 0.25rem;
     color: var(--accent);
     font-weight: bold; }
+  .ps-form-group--buttons {
+    margin: 0.5rem 0; }
 
 .ps-homelink {
-  z-index: 100;
   pointer-events: all;
   color: var(--foreground);
   background: white;
@@ -197,7 +204,9 @@ html {
   display: flex;
   justify-content: space-between;
   padding: 0;
-  margin: 0; }
+  margin: 0;
+  overflow-x: auto;
+  z-index: 100; }
   .ps-header--title {
     font-size: 1.5rem;
     padding: 0 1rem;
@@ -206,8 +215,9 @@ html {
     background-color: var(--background);
     border-right: 0.5rem solid var(--foreground);
     pointer-events: all; }
+  .ps-header--i18n {
+    margin-left: auto; }
   .ps-header--nav {
-    margin-left: auto;
     display: flex;
     border-bottom: 0.5rem solid var(--foreground);
     border-left: 0.5rem solid var(--foreground);
@@ -260,6 +270,9 @@ html {
     border-bottom: 0.5rem solid var(--foreground);
     padding-bottom: 0.5rem;
     margin: 2rem; }
+  .ps-page--subtitle {
+    padding-bottom: 0.25rem;
+    margin: 2rem; }
   .ps-page--section {
     border: 12px solid black;
     margin-top: 2rem;
@@ -357,7 +370,8 @@ html {
   left: 0;
   width: 100%;
   background-color: var(--background);
-  border-bottom: 2px solid var(--foreground); }
+  border-bottom: 2px solid var(--foreground);
+  overflow-x: auto; }
   .ps-section-nav--list {
     list-style: none;
     display: flex;

common/resources/scss/form-group.scss

@@ -3,9 +3,10 @@
   flex-direction: column;
 
   &--label {
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
-    display: flex;
+    display: inline-block;
     font-weight: bold;
+    margin-top: 0.5rem;
   }
 
   .ps-button {
@@ -18,4 +19,8 @@
     font-weight: bold;
     // font-family: monospace;
   }
+
+  &--buttons {
+    margin: 0.5rem 0;
+  };
 }

common/resources/scss/page.scss

@@ -36,6 +36,11 @@
     margin: 2rem; 
   }
 
+  &--subtitle {
+    padding-bottom: 0.25rem;
+    margin: 2rem; 
+  };
+
   &--section {
     border: 12px solid black;
     margin-top: 2rem;

login/login-update-profile.ftl

@@ -1,83 +1,12 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username','email','firstName','lastName'); section>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
     <#if section = "header">
         ${msg("loginProfileTitle")}
     <#elseif section = "form">
         <form id="kc-update-profile-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
-            <#if user.editUsernameAllowed>
-                <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" name="username" value="${(user.username!'')}"
-                               class="${properties.kcInputClass!}"
-                               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
-                        />
 
-                        <#if messagesPerField.existsError('username')>
+            <@userProfileCommons.userProfileFormFields/>
-                            <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-                                ${kcSanitize(messagesPerField.get('username'))?no_esc}
-                            </span>
-                        </#if>
-                    </div>
-                </div>
-            </#if>
-            <#if user.editEmailAllowed>
-                <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" name="email" value="${(user.email!'')}"
-                               class="${properties.kcInputClass!}"
-                               aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
-                        />
-
-                        <#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>
-
-            <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" name="firstName" value="${(user.firstName!'')}"
-                           class="${properties.kcInputClass!}"
-                           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>
-            </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" name="lastName" value="${(user.lastName!'')}"
-                           class="${properties.kcInputClass!}"
-                           aria-invalid="<#if messagesPerField.existsError('lastName')>true</#if>"
-                    />
-
-                    <#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 class="${properties.kcFormGroupClass!}">
                 <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
@@ -87,10 +16,10 @@
 
                 <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
                     <#if isAppInitiatedAction??>
-                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
-                    <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" />${msg("doCancel")}</button>
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true" formnovalidate/>${msg("doCancel")}</button>
                     <#else>
-                    <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
                     </#if>
                 </div>
             </div>

login/register.ftl

@@ -1,112 +1,99 @@
 <#import "template.ftl" as layout>
-<@layout.registrationLayout displayMessage=!messagesPerField.existsError('firstName','lastName','email','username','password','password-confirm'); section>
+<#import "user-profile-commons.ftl" as userProfileCommons>
-  <#if section = "header">
+<#import "register-commons.ftl" as registerCommons>
-    ${msg("registerTitle")}
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
-  <#elseif section = "form">
+    <#if section = "header">
-    <form id="kc-register-form" class="ps-container" action="${url.registrationAction}" method="post">
+        <#if messageHeader??>
-      <!--div class="${properties.kcFormGroupClass!}">
+            ${kcSanitize(msg("${messageHeader}"))?no_esc}
-        <label for="firstName" class="${properties.kcLabelClass!}">${msg("firstName")}</label>
+        <#else>
-        <input type="text" id="firstName" class="${properties.kcInputClass!}" name="firstName"
+            ${msg("registerTitle")}
-             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>
+    <#elseif section = "form">
+        <form id="kc-register-form" class="${properties.kcFormClass!}" action="${url.registrationAction}" method="post">
 
-      <div class="${properties.kcFormGroupClass!}">
+            <@userProfileCommons.userProfileFormFields; callback, attribute>
-        <label for="lastName" class="${properties.kcLabelClass!}">${msg("lastName")}</label>
+                <#if callback = "afterField">
-          <input type="text" id="lastName" class="${properties.kcInputClass!}" name="lastName"
+                <#-- render password fields just under the username or email (if used as username) -->
-             value="${(register.formData.lastName!'')}"
+                    <#if passwordRequired?? && (attribute.name == 'username' || (attribute.name == 'email' && realm.registrationEmailAsUsername))>
-             aria-invalid="<#if messagesPerField.existsError('lastName')>true</#if>"
+                        <div class="${properties.kcFormGroupClass!}">
-          />
+                            <div class="${properties.kcLabelWrapperClass!}">
+                                <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label> *
+                            </div>
+                            <div class="${properties.kcInputWrapperClass!}">
+                                <div class="${properties.kcInputGroup!}">
+                                    <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('lastName')>
+                                <#if messagesPerField.existsError('password')>
-            <span id="input-error-lastname" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                    <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-              ${kcSanitize(messagesPerField.get('lastName'))?no_esc}
+		                                ${kcSanitize(messagesPerField.get('password'))?no_esc}
-            </span>
+		                            </span>
-          </#if>
+                                </#if>
-      </div-->
+                            </div>
+                        </div>
 
-      <#if !realm.registrationEmailAsUsername>
+                        <div class="${properties.kcFormGroupClass!}">
-        <div class="${properties.kcFormGroupClass!}">
+                            <div class="${properties.kcLabelWrapperClass!}">
-          <label for="username" class="${properties.kcLabelClass!}">${msg("username")}</label>
+                                <label for="password-confirm"
-          <input type="text" id="username" class="${properties.kcInputClass!}" name="username"
+                                       class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label> *
-               value="${(register.formData.username!'')}" autocomplete="username"
+                            </div>
-               aria-invalid="<#if messagesPerField.existsError('username')>true</#if>"
+                            <div class="${properties.kcInputWrapperClass!}">
-          />
+                                <div class="${properties.kcInputGroup!}">
+                                    <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
+                                           name="password-confirm"
+                                           aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                                    />
+                                </div>
 
-          <#if messagesPerField.existsError('username')>
+                                <#if messagesPerField.existsError('password-confirm')>
-            <span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                                    <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
-              ${kcSanitize(messagesPerField.get('username'))?no_esc}
+		                                ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
-            </span>
+		                            </span>
-          </#if>
+                                </#if>
-        </div>
+                            </div>
-      </#if>
+                        </div>
+                    </#if>
+                </#if>
+            </@userProfileCommons.userProfileFormFields>
 
-      <div class="${properties.kcFormGroupClass!}">
+            <@registerCommons.termsAcceptance/>
-        <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
-          <input type="text" id="email" class="${properties.kcInputClass!}" name="email"
-             value="${(register.formData.email!'')}" autocomplete="email"
-             aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
-          />
 
-          <#if messagesPerField.existsError('email')>
+            <#if recaptchaRequired?? && (recaptchaVisible!false)>
-            <span id="input-error-email" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                <div class="form-group">
-              ${kcSanitize(messagesPerField.get('email'))?no_esc}
+                    <div class="${properties.kcInputWrapperClass!}">
-            </span>
+                        <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}" data-action="${recaptchaAction}"></div>
-          </#if>
+                    </div>
-      </div>
+                </div>
+            </#if>
 
-      <#if passwordRequired??>
+            <div class="${properties.kcFormGroupClass!}">
-        <div class="${properties.kcFormGroupClass!}">
-          <label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
-          <input type="password" id="password" class="${properties.kcInputClass!}" name="password"
-               autocomplete="new-password"
-               aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
-          />
 
-          <#if messagesPerField.existsError('password')>
+                <#if recaptchaRequired?? && !(recaptchaVisible!false)>
-            <span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                    <script>
-              ${kcSanitize(messagesPerField.get('password'))?no_esc}
+                        function onSubmitRecaptcha(token) {
-            </span>
+                            document.getElementById("kc-register-form").submit();
-          </#if>
+                        }
-        </div>
+                    </script>
-
+                    <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-        <div class="${properties.kcFormGroupClass!}">
+                        <button class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!} g-recaptcha" 
-          <label for="password-confirm"
+                            data-sitekey="${recaptchaSiteKey}" data-callback='onSubmitRecaptcha' data-action='${recaptchaAction}' type="submit">
-               class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
+                            ${msg("doRegister")}
-          <input type="password" id="password-confirm" class="${properties.kcInputClass!}"
+                        </button>
-               name="password-confirm"
+                    </div>
-               aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
+                <#else>
-          />
+                    <div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
-
+                        <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doRegister")}"/>
-          <#if messagesPerField.existsError('password-confirm')>
+                    </div>
-            <span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
+                    <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
-              ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
+                        <div class="${properties.kcFormOptionsWrapperClass!}">
-            </span>
+                            <span><a href="${url.loginUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
-          </#if>
+                        </div>
-        </div>
+                    </div>
-      </#if>
+                </#if>
-
+            </div>
-      <#if recaptchaRequired??>
+        </form>
-        <div class="ps-form-group">
+    </#if>
-          <div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
-        </div>
-      </#if>
-
-      <div class="${properties.kcFormGroupClass!}">
-          <button
-            class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}"
-          >${msg("doRegister")}</button>
-      </div>
-      <div class="${properties.kcFormGroupClass!}">
-        <span><a href="${url.loginUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
-      </div>
-    </form>
-  </#if>
 </@layout.registrationLayout>

login/resources/js/passwordVisibility.js

@@ -0,0 +1,15 @@
+const toggle = (button) =>  {
+    const passwordElement = document.getElementById(button.getAttribute('aria-controls'));
+    if (passwordElement.type === "password") {
+        passwordElement.type = "text";
+        button.children.item(0).className = button.dataset.iconHide;
+        button.setAttribute("aria-label", button.dataset.labelHide);
+    } else if(passwordElement.type === "text") {
+        passwordElement.type = "password";
+        button.children.item(0).className = button.dataset.iconShow;
+        button.setAttribute("aria-label", button.dataset.labelShow);
+    }
+}
+
+document.querySelectorAll('[data-password-toggle]')
+    .forEach(button => button.onclick = () => toggle(button));

login/template.ftl

@@ -85,11 +85,13 @@
 
     <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
       <h1 class="ps-page--title"><#nested "header"></h1>
+      <div class="ps-page--subtitle">
       <#if displayRequiredFields>
         <div class="${properties.kcLabelWrapperClass!} subtitle">
           <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
         </div>
       </#if>
+      </div>
     <#else>
       <#if displayRequiredFields>
         <div class="${properties.kcContentWrapperClass!}">

login/theme.properties

@@ -12,6 +12,9 @@ kcButtonLargeClass=ps-button_large
 kcFormGroupClass=ps-form-group
 kcLabelClass=ps-form-group--label
 kcInputErrorMessageClass=ps-form-group--error
+kcFormOptionsClass=ps-form-group--options
+kcFormOptionsWrapperClass=ps-form-group--options-wrapper
+kcFormButtonsClass=ps-form-group--buttons
 
 kcInputClass=ps-input
 

login/update-email.ftl

@@ -1,27 +1,12 @@
 <#import "template.ftl" as layout>
 <#import "password-commons.ftl" as passwordCommons>
-<@layout.registrationLayout displayMessage=!messagesPerField.existsError('email'); section>
+<#import "user-profile-commons.ftl" as userProfileCommons>
+<@layout.registrationLayout displayMessage=messagesPerField.exists('global') displayRequiredFields=true; section>
     <#if section = "header">
         ${msg("updateEmailTitle")}
     <#elseif section = "form">
         <form id="kc-update-email-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
-            <div class="${properties.kcFormGroupClass!}">
+            <@userProfileCommons.userProfileFormFields/>
-                <div class="${properties.kcLabelWrapperClass!}">
-                    <label for="email" class="${properties.kcLabelClass!}">${msg("email")}</label>
-                </div>
-                <div class="${properties.kcInputWrapperClass!}">
-                    <input type="text" id="email" name="email" value="${(email.value!'')}"
-                           class="${properties.kcInputClass!}"
-                           aria-invalid="<#if messagesPerField.existsError('email')>true</#if>"
-                    />
-
-                    <#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>
 
             <div class="${properties.kcFormGroupClass!}">
                 <div id="kc-form-options" class="${properties.kcFormOptionsClass!}">