diff --git a/src/bundle/Resources/public/scss/_forms.scss b/src/bundle/Resources/public/scss/_forms.scss index 76d166cca..026f98a09 100644 --- a/src/bundle/Resources/public/scss/_forms.scss +++ b/src/bundle/Resources/public/scss/_forms.scss @@ -99,7 +99,7 @@ form:not(.form-inline) { display: flex; align-items: center; font-style: normal; - margin-top: calculateRem(8px); + margin-top: calculateRem(4px); } &__icon { diff --git a/src/bundle/Resources/public/scss/_login.scss b/src/bundle/Resources/public/scss/_login.scss index 8147536a8..5f7b2a637 100644 --- a/src/bundle/Resources/public/scss/_login.scss +++ b/src/bundle/Resources/public/scss/_login.scss @@ -128,6 +128,7 @@ &__actions-headline { font-size: $text-font-size-3xl; + line-height: 1.2; margin-bottom: calculateRem(4px); } diff --git a/src/bundle/Resources/public/scss/_password-requirements.scss b/src/bundle/Resources/public/scss/_password-requirements.scss new file mode 100644 index 000000000..baae782b2 --- /dev/null +++ b/src/bundle/Resources/public/scss/_password-requirements.scss @@ -0,0 +1,53 @@ +@use '@ibexa-admin-ui/src/bundle/Resources/public/scss/custom.scss' as *; +@use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/colors' as *; +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/typography' as *; + +.ibexa-password-requirements { + &__intro { + margin-bottom: 0; + font-size: $text-font-size-m; + color: $color-neutral-160; + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + } + + &__item { + position: relative; + padding-left: calculateRem(20px); + font-size: $text-font-size-m; + color: $color-neutral-160; + + &::before { + content: ''; + position: absolute; + top: 50%; + left: calculateRem(6px); + width: calculateRem(4px); + height: calculateRem(4px); + border-radius: 50%; + background-color: $color-neutral-160; + transform: translateY(-50%); + } + + &--met { + color: $ibexa-color-success-600; + + &::before { + display: none; + } + } + } + + &__item-icon { + position: absolute; + top: 50%; + left: calculateRem(2px); + fill: $ibexa-color-success-600; + transform: translateY(-50%); + } +} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index 73dbe3c9d..62d8b68cf 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -21,6 +21,7 @@ @use 'notifications'; @use 'instant-filter'; @use 'login'; +@use 'password-requirements'; @use 'forms'; @use 'preview-header'; @use 'preview'; diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff index 9db925d9e..bc9b55d35 100644 --- a/src/bundle/Resources/translations/messages.en.xliff +++ b/src/bundle/Resources/translations/messages.en.xliff @@ -311,6 +311,11 @@ generate a new link to reset your password.]]> key: ezplatform.reset_user_password.link_is_not_valid + + To keep your account secure, your password must meet the following requirements: + To keep your account secure, your password must meet the following requirements: + key: ezplatform.reset_user_password.requirements_intro + log in to Cohesivo.]]> log in to Cohesivo.]]> diff --git a/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig b/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig index 034f635ff..49acba07e 100644 --- a/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig @@ -4,12 +4,87 @@ {% form_theme form_reset_user_password '@ibexadesign/ui/form_fields.html.twig' %} {% endif %} +{% macro password_field_errors(errors) %} +
+ {% for error in errors %} + + + + + {{ error.message }} + + {% endfor %} +
+{% endmacro %} + {%- block content -%} + {% import _self as reset_password_macros %} +
{{ 'ezplatform.reset_user_password.change_password'|trans|desc('Set new password') }}
{% if form_reset_user_password is defined %} + {% set new_password_form = form_reset_user_password.new_password %} + {% set requirements = content_type is defined ? ibexa_password_requirements(content_type) : [] %} + {% set requirement_identifiers = requirements|map((requirement) => requirement.identifier) %} + + {% set password_errors = [] %} + {% for error in new_password_form.vars.errors %} + {% set password_errors = password_errors|merge([error]) %} + {% endfor %} + {% for error in new_password_form.first.vars.errors %} + {% set password_errors = password_errors|merge([error]) %} + {% endfor %} + + {% set policy_errors = password_errors|filter((error) => error.cause.code|default(null) in requirement_identifiers) %} + {% set other_errors = password_errors|filter((error) => error.cause.code|default(null) not in requirement_identifiers) %} + {% set failed_requirement_identifiers = policy_errors|map((error) => error.cause.code) %} + {% set can_mark_requirements = form_reset_user_password.vars.submitted and other_errors is empty %} + + {% if requirements is not empty %} +
+

+ {{ 'ezplatform.reset_user_password.requirements_intro'|trans|desc('To keep your account secure, your password must meet the following requirements:') }} +

+ +
+ {% endif %} + {{ form_start(form_reset_user_password, {'attr': {'class': 'ibexa-form-validate'} }) }}
- {{ form_widget(form_reset_user_password.new_password) }} +
+ {{ form_label(new_password_form.first) }} + {{ form_widget(new_password_form.first, policy_errors is not empty + ? { attr: { class: 'is-invalid', error: true } } + : {} + ) }} + {% if policy_errors is not empty %} + {{ reset_password_macros.password_field_errors(policy_errors) }} + {% endif %} +
+
+ {{ form_label(new_password_form.second) }} + {{ form_widget(new_password_form.second, other_errors is not empty + ? { attr: { class: 'is-invalid', error: true } } + : {} + ) }} + {% if other_errors is not empty %} + {{ reset_password_macros.password_field_errors(other_errors) }} + {% endif %} +
{{ form_widget(form_reset_user_password.update, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn ibexa-login__btn--change-password'}}) }} {{ form_end(form_reset_user_password) }} @@ -22,6 +97,6 @@ > {{ 'authentication.reset_your_password.back_to_sign_in'|trans|desc('Back to sign in page') }} - + {{ encore_entry_script_tags('ibexa-admin-ui-reset-password-js', null, 'ibexa') }} {%- endblock content -%}