diff --git a/common/resources/css/index.css b/common/resources/css/index.css index fbbdc51..f4ff89b 100644 --- a/common/resources/css/index.css +++ b/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; - 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; diff --git a/common/resources/scss/form-group.scss b/common/resources/scss/form-group.scss index 9aa6485..147e9ef 100644 --- a/common/resources/scss/form-group.scss +++ b/common/resources/scss/form-group.scss @@ -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; + }; } diff --git a/common/resources/scss/page.scss b/common/resources/scss/page.scss index 31c9d3f..5818481 100644 --- a/common/resources/scss/page.scss +++ b/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; diff --git a/login/login-update-profile.ftl b/login/login-update-profile.ftl index be579b0..e09f5c3 100644 --- a/login/login-update-profile.ftl +++ b/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">
- <#if user.editUsernameAllowed> -
-
- -
-
- - <#if messagesPerField.existsError('username')> - - ${kcSanitize(messagesPerField.get('username'))?no_esc} - - -
-
- - <#if user.editEmailAllowed> -
-
- -
-
- - - <#if messagesPerField.existsError('email')> - - ${kcSanitize(messagesPerField.get('email'))?no_esc} - - -
-
- - -
-
- -
-
- - - <#if messagesPerField.existsError('firstName')> - - ${kcSanitize(messagesPerField.get('firstName'))?no_esc} - - -
-
- -
-
- -
-
- - - <#if messagesPerField.existsError('lastName')> - - ${kcSanitize(messagesPerField.get('lastName'))?no_esc} - - -
-
+ <@userProfileCommons.userProfileFormFields/>
@@ -87,13 +16,13 @@
<#if isAppInitiatedAction??> - - + + <#else> - +
- + \ No newline at end of file diff --git a/login/register.ftl b/login/register.ftl index 62e1eb1..7bbf5ed 100644 --- a/login/register.ftl +++ b/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> - <#if section = "header"> - ${msg("registerTitle")} - <#elseif section = "form"> -
- + <#if passwordRequired?? && (attribute.name == 'username' || (attribute.name == 'email' && realm.registrationEmailAsUsername))> +
+
+ * +
+
+
+ +
- <#if messagesPerField.existsError('lastName')> - - ${kcSanitize(messagesPerField.get('lastName'))?no_esc} - - - + <#if messagesPerField.existsError('password')> + + ${kcSanitize(messagesPerField.get('password'))?no_esc} + + +
+
- <#if !realm.registrationEmailAsUsername> -
- - +
+
+ * +
+
+
+ +
- <#if messagesPerField.existsError('username')> - - ${kcSanitize(messagesPerField.get('username'))?no_esc} - - -
- + <#if messagesPerField.existsError('password-confirm')> + + ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc} + + +
+
+ + + -
- - + <@registerCommons.termsAcceptance/> - <#if messagesPerField.existsError('email')> - - ${kcSanitize(messagesPerField.get('email'))?no_esc} - - -
+ <#if recaptchaRequired?? && (recaptchaVisible!false)> +
+
+
+
+
+ - <#if passwordRequired??> -
- - +
- <#if messagesPerField.existsError('password')> - - ${kcSanitize(messagesPerField.get('password'))?no_esc} - - -
- -
- - - - <#if messagesPerField.existsError('password-confirm')> - - ${kcSanitize(messagesPerField.get('password-confirm'))?no_esc} - - -
- - - <#if recaptchaRequired??> -
-
-
- - -
- -
-
- ${kcSanitize(msg("backToLogin"))?no_esc} -
- - + <#if recaptchaRequired?? && !(recaptchaVisible!false)> + +
+ +
+ <#else> +
+ +
+ + +
+ + diff --git a/login/resources/js/passwordVisibility.js b/login/resources/js/passwordVisibility.js new file mode 100644 index 0000000..b9b7dbd --- /dev/null +++ b/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)); \ No newline at end of file diff --git a/login/template.ftl b/login/template.ftl index f8dd10b..81afc18 100644 --- a/login/template.ftl +++ b/login/template.ftl @@ -85,11 +85,13 @@ <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>

<#nested "header">

+
<#if displayRequiredFields>
* ${msg("requiredFields")}
+
<#else> <#if displayRequiredFields>
diff --git a/login/theme.properties b/login/theme.properties index 04e01f7..ed75e9e 100644 --- a/login/theme.properties +++ b/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 diff --git a/login/update-email.ftl b/login/update-email.ftl index e63b012..1650e25 100644 --- a/login/update-email.ftl +++ b/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">
-
-
- -
-
- - - <#if messagesPerField.existsError('email')> - - ${kcSanitize(messagesPerField.get('email'))?no_esc} - - -
-
+ <@userProfileCommons.userProfileFormFields/>