From 701d654d21d6100e882bfe1119a469ff304c068a Mon Sep 17 00:00:00 2001 From: e-five <146029455+e-five256@users.noreply.github.com> Date: Fri, 10 May 2024 19:52:58 -0400 Subject: [PATCH] Restyle login/register social and action button sections (#706) --- assets/styles/components/_login.scss | 29 +++++++--- assets/styles/layout/_forms.scss | 11 ++++ src/DTO/SettingsDto.php | 5 +- src/Form/SettingsType.php | 1 + src/Service/SettingsManager.php | 3 +- src/Twig/Extension/SettingsExtension.php | 1 + src/Twig/Runtime/SettingsExtensionRuntime.php | 5 ++ templates/admin/settings.html.twig | 4 ++ templates/components/login_socials.html.twig | 57 +++++++++++-------- .../components/user_form_actions.html.twig | 11 ++-- .../resend.html.twig | 10 +++- templates/reset_password/request.html.twig | 3 +- templates/reset_password/reset.html.twig | 3 +- templates/user/login.html.twig | 11 +++- templates/user/register.html.twig | 9 ++- translations/messages.en.yaml | 2 + 16 files changed, 115 insertions(+), 50 deletions(-) diff --git a/assets/styles/components/_login.scss b/assets/styles/components/_login.scss index 7fe9c5a7d..3b20f74ea 100644 --- a/assets/styles/components/_login.scss +++ b/assets/styles/components/_login.scss @@ -15,21 +15,36 @@ font-weight: bold; } + .separator { + display: none; + height: 0; + } + .separator:has(+ div p), .separator.separator-show { + display: block; + border: var(--kbin-section-border); + height: 0; + margin: 20px 30px; + } + .actions { - margin-top: 3rem; + margin-top: 1rem; display: block; } .social { - display: flex; - gap: 2rem; + grid-template-columns: repeat(1, 1fr); + @include media-breakpoint-up(lg) { + &:has(a + a) { + grid-template-columns: repeat(2, 1fr); + } + } + + display: grid; + gap: 0.5rem; justify-content: center; - margin-top: 3rem; a { - align-items: center; - display: inline-flex; - gap: .5rem; + text-align: center; } } } diff --git a/assets/styles/layout/_forms.scss b/assets/styles/layout/_forms.scss index 438442b71..2a45e5afb 100644 --- a/assets/styles/layout/_forms.scss +++ b/assets/styles/layout/_forms.scss @@ -434,6 +434,17 @@ select { } } +.button-flex-hf { + text-align: center; + button { + width: 50%; + + @include media-breakpoint-down(lg) { + width: 100%; + } + } +} + .actions { @include media-breakpoint-down(sm) { text-align: right; diff --git a/src/DTO/SettingsDto.php b/src/DTO/SettingsDto.php index 6c4ccd542..539f75005 100644 --- a/src/DTO/SettingsDto.php +++ b/src/DTO/SettingsDto.php @@ -34,7 +34,8 @@ public function __construct( public bool $KBIN_FEDERATED_SEARCH_ONLY_LOGGEDIN, public bool $MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY, public bool $MBIN_SSO_REGISTRATIONS_ENABLED, - public bool $MBIN_RESTRICT_MAGAZINE_CREATION + public bool $MBIN_RESTRICT_MAGAZINE_CREATION, + public bool $MBIN_SSO_SHOW_FIRST ) { } @@ -64,6 +65,7 @@ public function mergeIntoDto(SettingsDto $dto): SettingsDto $dto->MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY = $this->MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY ?? $dto->MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY; $dto->MBIN_SSO_REGISTRATIONS_ENABLED = $this->MBIN_SSO_REGISTRATIONS_ENABLED ?? $dto->MBIN_SSO_REGISTRATIONS_ENABLED; $dto->MBIN_RESTRICT_MAGAZINE_CREATION = $this->MBIN_RESTRICT_MAGAZINE_CREATION ?? $dto->MBIN_RESTRICT_MAGAZINE_CREATION; + $dto->MBIN_SSO_SHOW_FIRST = $this->MBIN_SSO_SHOW_FIRST ?? $dto->MBIN_SSO_SHOW_FIRST; return $dto; } @@ -95,6 +97,7 @@ public function jsonSerialize(): mixed 'MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY' => $this->MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY, 'MBIN_SSO_REGISTRATIONS_ENABLED' => $this->MBIN_SSO_REGISTRATIONS_ENABLED, 'MBIN_RESTRICT_MAGAZINE_CREATION' => $this->MBIN_RESTRICT_MAGAZINE_CREATION, + 'MBIN_SSO_SHOW_FIRST' => $this->MBIN_SSO_SHOW_FIRST, ]; } } diff --git a/src/Form/SettingsType.php b/src/Form/SettingsType.php index e0cbf609b..a7bef3954 100644 --- a/src/Form/SettingsType.php +++ b/src/Form/SettingsType.php @@ -41,6 +41,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void ->add('KBIN_FEDERATED_SEARCH_ONLY_LOGGEDIN', CheckboxType::class, ['required' => false]) ->add('MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY', CheckboxType::class, ['required' => false]) ->add('MBIN_RESTRICT_MAGAZINE_CREATION', CheckboxType::class, ['required' => false]) + ->add('MBIN_SSO_SHOW_FIRST', CheckboxType::class, ['required' => false]) ->add('submit', SubmitType::class); } diff --git a/src/Service/SettingsManager.php b/src/Service/SettingsManager.php index 60923060e..11ac26645 100644 --- a/src/Service/SettingsManager.php +++ b/src/Service/SettingsManager.php @@ -70,7 +70,8 @@ public function __construct( $this->find($results, 'KBIN_FEDERATED_SEARCH_ONLY_LOGGEDIN', FILTER_VALIDATE_BOOLEAN) ?? true, $this->find($results, 'MBIN_SIDEBAR_SECTIONS_LOCAL_ONLY', FILTER_VALIDATE_BOOLEAN) ?? false, $this->find($results, 'MBIN_SSO_REGISTRATIONS_ENABLED', FILTER_VALIDATE_BOOLEAN) ?? true, - $this->find($results, 'MBIN_RESTRICT_MAGAZINE_CREATION', FILTER_VALIDATE_BOOLEAN) ?? false + $this->find($results, 'MBIN_RESTRICT_MAGAZINE_CREATION', FILTER_VALIDATE_BOOLEAN) ?? false, + $this->find($results, 'MBIN_SSO_SHOW_FIRST', FILTER_VALIDATE_BOOLEAN) ?? false ); } } diff --git a/src/Twig/Extension/SettingsExtension.php b/src/Twig/Extension/SettingsExtension.php index 6573a3244..c3981962e 100644 --- a/src/Twig/Extension/SettingsExtension.php +++ b/src/Twig/Extension/SettingsExtension.php @@ -30,6 +30,7 @@ public function getFunctions(): array new TwigFunction('mbin_current_version', [SettingsExtensionRuntime::class, 'mbinCurrentVersion']), new TwigFunction('mbin_restrict_magazine_creation', [SettingsExtensionRuntime::class, 'mbinRestrictMagazineCreation']), new TwigFunction('mbin_private_instance', [SettingsExtensionRuntime::class, 'mbinPrivateInstance']), + new TwigFunction('mbin_sso_show_first', [SettingsExtensionRuntime::class, 'mbinSsoShowFirst']), ]; } } diff --git a/src/Twig/Runtime/SettingsExtensionRuntime.php b/src/Twig/Runtime/SettingsExtensionRuntime.php index 229f3502d..6f5ce0ea5 100644 --- a/src/Twig/Runtime/SettingsExtensionRuntime.php +++ b/src/Twig/Runtime/SettingsExtensionRuntime.php @@ -113,4 +113,9 @@ public function mbinPrivateInstance(): bool { return $this->settings->get('MBIN_PRIVATE_INSTANCE'); } + + public function mbinSsoShowFirst(): bool + { + return $this->settings->get('MBIN_SSO_SHOW_FIRST'); + } } diff --git a/templates/admin/settings.html.twig b/templates/admin/settings.html.twig index 4588840a4..e2ef8d96a 100644 --- a/templates/admin/settings.html.twig +++ b/templates/admin/settings.html.twig @@ -83,6 +83,10 @@ {{ form_label(form.MBIN_RESTRICT_MAGAZINE_CREATION, 'restrict_magazine_creation') }} {{ form_widget(form.MBIN_RESTRICT_MAGAZINE_CREATION) }} +
+ {{ form_label(form.MBIN_SSO_SHOW_FIRST, 'sso_show_first') }} + {{ form_widget(form.MBIN_SSO_SHOW_FIRST) }} +
{{ form_row(form.submit, {label: 'save', attr: {class: 'btn btn__primary'}}) }}
diff --git a/templates/components/login_socials.html.twig b/templates/components/login_socials.html.twig index 8e744c518..117a89758 100644 --- a/templates/components/login_socials.html.twig +++ b/templates/components/login_socials.html.twig @@ -1,27 +1,36 @@ {# @var this App\Twig\Components\LoginSocialsComponent #} -
- {% if this.googleEnabled %} - - Google +{%- set HAS_ANY_SOCIAL = this.googleEnabled or this.facebookEnabled or this.githubEnabled or this.keycloakEnabled or this.zitadelEnabled or this.azureEnabled -%} +{% if HAS_ANY_SOCIAL %} + {% if not mbin_sso_only_mode() and not mbin_sso_show_first() %} +
{% endif %} - {% if this.facebookEnabled %} - - Facebook +
+ {% if this.googleEnabled %} + + {{ 'continue_with'|trans }} Google + {% endif %} + {% if this.facebookEnabled %} + + {{ 'continue_with'|trans }} Facebook + {% endif %} + {% if this.githubEnabled %} + + {{ 'continue_with'|trans }} GitHub + {% endif %} + {% if this.keycloakEnabled %} + + {{ 'continue_with'|trans }} Keycloak + {% endif %} + {% if this.zitadelEnabled %} + + {{ 'continue_with'|trans }} Zitadel + {% endif %} + {% if this.azureEnabled %} + + {{ 'continue_with'|trans }} Microsoft + {% endif %} +
+ {% if not mbin_sso_only_mode() and mbin_sso_show_first() %} +
{% endif %} - {% if this.githubEnabled %} - - GitHub - {% endif %} - {% if this.keycloakEnabled %} - - Keycloak - {% endif %} - {% if this.zitadelEnabled %} - - Zitadel - {% endif %} - {% if this.azureEnabled %} - - Microsoft - {% endif %} -
+{% endif %} diff --git a/templates/components/user_form_actions.html.twig b/templates/components/user_form_actions.html.twig index e7a923d20..de8ab4cc1 100644 --- a/templates/components/user_form_actions.html.twig +++ b/templates/components/user_form_actions.html.twig @@ -1,18 +1,19 @@ +
{% if showLogin %} -

{{ 'already_have_account'|trans }} +

{{ 'already_have_account'|trans }} {{ 'login'|trans }}

{% endif %} {% if kbin_registrations_enabled() %} {% if showRegister %} -

{{ 'dont_have_account'|trans }} +

{{ 'dont_have_account'|trans }} {{ 'register'|trans }}

- {% endif %} + {% endif %} {% endif %} {% if showPasswordReset %} -

{{ 'you_cant_login'|trans }} +

{{ 'you_cant_login'|trans }} {{ 'reset_password'|trans }}

{% endif %} @@ -21,4 +22,4 @@ {# {{ 'resend_account_activation_email'|trans }}#} {#

#} {# {% endif %}#} -
\ No newline at end of file + diff --git a/templates/resend_verification_email/resend.html.twig b/templates/resend_verification_email/resend.html.twig index fb488f3a8..6f69aef31 100644 --- a/templates/resend_verification_email/resend.html.twig +++ b/templates/resend_verification_email/resend.html.twig @@ -16,9 +16,9 @@

{{ 'resend_account_activation_email'|trans }}

-

{{ 'resend_account_activation_email_description'|trans }}

+

{{ 'resend_account_activation_email_description'|trans }}

- {{ form_start(form) }} + {{ form_start(form) }} {% for flash_error in app.flashes('error') %}
{{ flash_error|trans }}
{% endfor %} @@ -27,7 +27,11 @@ {% endfor %} {{ form_row(form.email) }} - {{ form_row(form.submit) }} + {{ form_row(form.submit, { + row_attr: { + class: 'button-flex-hf' + } + }) }} {{ form_end(form) }} {{ component('user_form_actions', {showRegister: true, showPasswordReset: true, showResendEmail: true}) }} diff --git a/templates/reset_password/request.html.twig b/templates/reset_password/request.html.twig index e0796068f..d4b8c811a 100644 --- a/templates/reset_password/request.html.twig +++ b/templates/reset_password/request.html.twig @@ -24,12 +24,11 @@ label: 'email' }) }} -
+
{{ form_end(form) }} {{ component('user_form_actions', {showLogin: true, showRegister: true, showResendEmail: true}) }} - {{ component('login_socials') }}
{% endblock %} diff --git a/templates/reset_password/reset.html.twig b/templates/reset_password/reset.html.twig index 670b44be4..3582a7074 100644 --- a/templates/reset_password/reset.html.twig +++ b/templates/reset_password/reset.html.twig @@ -22,12 +22,11 @@ {% endfor %} {{ form_row(form.plainPassword) }} -
+
{{ form_end(form) }} {{ component('user_form_actions', {showLogin: true, showRegister: true , showResendEmail: true}) }} - {{ component('login_socials') }}
{% endblock %} diff --git a/templates/user/login.html.twig b/templates/user/login.html.twig index 09bc9a28d..b15fef738 100644 --- a/templates/user/login.html.twig +++ b/templates/user/login.html.twig @@ -17,6 +17,9 @@ {% include 'layout/_flash.html.twig' %}
+ {% if mbin_sso_show_first() %} + {{ component('login_socials') }} + {% endif %} {% if not mbin_sso_only_mode() %}
{% if error %} @@ -42,13 +45,17 @@
-
+
+ {% endif %} + {% if not mbin_sso_show_first() %} + {{ component('login_socials') }} + {% endif %} + {% if not mbin_sso_only_mode() %} {{ component('user_form_actions', {showRegister: true, showPasswordReset: true, showResendEmail: true}) }} {% endif %} - {{ component('login_socials') }}
{% endblock %} diff --git a/templates/user/register.html.twig b/templates/user/register.html.twig index 3b720d441..ae2561e98 100644 --- a/templates/user/register.html.twig +++ b/templates/user/register.html.twig @@ -16,6 +16,9 @@

{{ 'register'|trans }}

+ {% if mbin_sso_registrations_enabled() and mbin_sso_show_first() %} + {{ component('login_socials') }} + {% endif %} {% if kbin_registrations_enabled() %} {{ form_start(form) }} {% for flash_error in app.flashes('verify_email_error') %} @@ -54,17 +57,17 @@ class: 'btn btn__primary' }, row_attr: { - class: 'float-end' + class: 'button-flex-hf' } }) }} {{ form_end(form) }} {% else %}

{{ 'registration_disabled'|trans }}

{% endif %} - {{ component('user_form_actions', {showLogin: true, showPasswordReset: true, showResendEmail: true}) }} - {% if mbin_sso_registrations_enabled() %} + {% if mbin_sso_registrations_enabled() and not mbin_sso_show_first() %} {{ component('login_socials') }} {% endif %} + {{ component('user_form_actions', {showLogin: true, showPasswordReset: true, showResendEmail: true}) }}
{% endblock %} diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml index a66f8b9a5..8d6185de8 100644 --- a/translations/messages.en.yaml +++ b/translations/messages.en.yaml @@ -813,3 +813,5 @@ sso_registrations_enabled.error: New account registrations with third-party iden sso_only_mode: Restrict login and registration to SSO methods only related_entry: Related restrict_magazine_creation: Restrict local magazine creation to admins and global mods +sso_show_first: Show SSO first on login and registration pages +continue_with: Continue with