fix: registration broken since update to 25.0.6 #3

Merged
b12f merged 1 commit from fix-registration into main 2024-11-13 16:07:36 +00:00
9 changed files with 158 additions and 213 deletions
Showing only changes of commit 87edb5c89c - Show all commits

View file

@ -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;
border: 2px solid var(--foreground);
border-radius: 1.5rem;
padding: 0.5em 1em;
line-height: 1.2em;
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;
display: flex;
font-weight: bold; }
margin-bottom: 0.25rem;
display: inline-block;
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;

View file

@ -3,9 +3,10 @@
flex-direction: column;
&--label {
margin-bottom: 0.5rem;
display: flex;
margin-bottom: 0.25rem;
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;
};
}

View file

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

View file

@ -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')>
<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>
<@userProfileCommons.userProfileFormFields/>
<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
@ -88,7 +17,7 @@
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<#if isAppInitiatedAction??>
<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")}" />
</#if>

View file

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

View file

@ -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));

View file

@ -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!}">

View file

@ -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

View file

@ -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!}">
<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>
<@userProfileCommons.userProfileFormFields/>
<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">