Restyle login/register social and action button sections (#706)

MbinOrg · May 10, 2024 · 701d654 · 701d654
1 parent 66bcb96
commit 701d654
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -83,6 +83,10 @@
                 {{ form_label(form.MBIN_RESTRICT_MAGAZINE_CREATION, 'restrict_magazine_creation') }}
                 {{ form_widget(form.MBIN_RESTRICT_MAGAZINE_CREATION) }}
             </div>
+            <div class="checkbox">
+                {{ form_label(form.MBIN_SSO_SHOW_FIRST, 'sso_show_first') }}
+                {{ form_widget(form.MBIN_SSO_SHOW_FIRST) }}
+            </div>
             <div class="row actions">
                 {{ form_row(form.submit, {label: 'save', attr: {class: 'btn btn__primary'}}) }}
             </div>

diff --git a/templates/components/login_socials.html.twig b/templates/components/login_socials.html.twig
@@ -1,27 +1,36 @@
 {# @var this App\Twig\Components\LoginSocialsComponent #}
-<div class="social">
-    {% if this.googleEnabled %}
-        <a href="{{ path('oauth_google_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-google" aria-hidden="true"></i>
-            Google</a>
+{%- 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() %}
+    <div class="separator separator-show"></div>
     {% endif %}
-    {% if this.facebookEnabled %}
-        <a href="{{ path('oauth_facebook_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-facebook" aria-hidden="true"></i>
-            Facebook</a>
+    <div class="social">
+        {% if this.googleEnabled %}
+            <a href="{{ path('oauth_google_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-google" aria-hidden="true"></i>
+                <span>{{ 'continue_with'|trans }} Google</span></a>
+        {% endif %}
+        {% if this.facebookEnabled %}
+            <a href="{{ path('oauth_facebook_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-facebook" aria-hidden="true"></i>
+                <span>{{ 'continue_with'|trans }} Facebook</span></a>
+        {% endif %}
+        {% if this.githubEnabled %}
+            <a href="{{ path('oauth_github_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-github" aria-hidden="true"></i>
+                <span>{{ 'continue_with'|trans }} GitHub</span></a>
+        {% endif %}
+        {% if this.keycloakEnabled %}
+            <a href="{{ path('oauth_keycloak_connect') }}" class="btn btn__secondary"><i class="fa-solid fa-lock" aria-hidden="true"></i>
+                <span>{{ 'continue_with'|trans }} Keycloak</span></a>
+        {% endif %}
+        {% if this.zitadelEnabled %}
+            <a href="{{ path('oauth_zitadel_connect') }}" class="btn btn__secondary"><i class="fa-solid fa-lock" aria-hidden="true"></i>
+                <span>{{ 'continue_with'|trans }} Zitadel</span></a>
+        {% endif %}
+        {% if this.azureEnabled %}
+            <a href="{{ path('oauth_azure_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-microsoft" aria-hidden="true"></i>
+                <span>{{ 'continue_with'|trans }} Microsoft</span></a>
+        {% endif %}
+    </div>
+    {% if not mbin_sso_only_mode() and mbin_sso_show_first() %}
+    <div class="separator separator-show"></div>
     {% endif %}
-    {% if this.githubEnabled %}
-        <a href="{{ path('oauth_github_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-github" aria-hidden="true"></i>
-            GitHub</a>
-    {% endif %}
-    {% if this.keycloakEnabled %}
-        <a href="{{ path('oauth_keycloak_connect') }}" class="btn btn__secondary"><i class="fa-solid fa-lock" aria-hidden="true"></i>
-            Keycloak</a>
-    {% endif %}
-    {% if this.zitadelEnabled %}
-        <a href="{{ path('oauth_zitadel_connect') }}" class="btn btn__secondary"><i class="fa-solid fa-lock" aria-hidden="true"></i>
-            Zitadel</a>
-    {% endif %}
-    {% if this.azureEnabled %}
-        <a href="{{ path('oauth_azure_connect') }}" class="btn btn__secondary"><i class="fa-brands fa-microsoft" aria-hidden="true"></i>
-            Microsoft</a>
-    {% endif %}
-</div>
+{% endif %}
diff --git a/templates/components/user_form_actions.html.twig b/templates/components/user_form_actions.html.twig
@@ -1,18 +1,19 @@
+<div class="separator"></div>
 <div class="actions">
     {% if showLogin %}
-        <p>{{ 'already_have_account'|trans }} 
+        <p>{{ 'already_have_account'|trans }}
             <a class="font-weight-bold" href="{{ path('app_login') }}">{{ 'login'|trans }}</a>
         </p>
     {% endif %}
     {% if kbin_registrations_enabled() %}
         {% if showRegister %}
-            <p>{{ 'dont_have_account'|trans }} 
+            <p>{{ 'dont_have_account'|trans }}
                 <a class="font-weight-bold" href="{{ path('app_register') }}">{{ 'register'|trans }}</a>
             </p>
-        {% endif %}  
+        {% endif %}
     {% endif %}
     {% if showPasswordReset %}
-        <p>{{ 'you_cant_login'|trans }} 
+        <p>{{ 'you_cant_login'|trans }}
             <a class="font-weight-bold" href="{{ path('app_forgot_password_request') }}">{{ 'reset_password'|trans }}</a>
         </p>
     {% endif %}
@@ -21,4 +22,4 @@
 {#            <a class="font-weight-bold" href="{{ path('app_resend_email_activation') }}">{{ 'resend_account_activation_email'|trans }}</a>#}
 {#        </p>#}
 {#    {% endif %}#}
-</div>
+</div>
diff --git a/templates/resend_verification_email/resend.html.twig b/templates/resend_verification_email/resend.html.twig
@@ -16,9 +16,9 @@
     <h1>{{ 'resend_account_activation_email'|trans }}</h1>
     <div id="content" class="section">
         <div class="container">
-            <p>{{ 'resend_account_activation_email_description'|trans }}</p>      
+            <p>{{ 'resend_account_activation_email_description'|trans }}</p>
 
-            {{ form_start(form) }}         
+            {{ form_start(form) }}
             {% for flash_error in app.flashes('error') %}
                 <div class="alert alert__danger">{{ flash_error|trans }}</div>
             {% 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
@@ -24,12 +24,11 @@
                 label: 'email'
             }) }}
 
-            <div class="float-end">
+            <div class="button-flex-hf">
                 <button class="btn btn__primary" type="submit">{{ 'reset_password'|trans }}</button>
             </div>
             {{ form_end(form) }}
             {{ component('user_form_actions', {showLogin: true, showRegister: true, showResendEmail: true}) }}
-            {{ component('login_socials') }}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/reset_password/reset.html.twig b/templates/reset_password/reset.html.twig
@@ -22,12 +22,11 @@
             {% endfor %}
             {{ form_row(form.plainPassword) }}
 
-            <div class="float-end">
+            <div class="button-flex-hf">
                 <button class="btn btn__primary" type="submit">{{ 'reset_password'|trans }}</button>
             </div>
             {{ form_end(form) }}
             {{ component('user_form_actions', {showLogin: true, showRegister: true , showResendEmail: true}) }}
-            {{ component('login_socials') }}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/user/login.html.twig b/templates/user/login.html.twig
@@ -17,6 +17,9 @@
     {% include 'layout/_flash.html.twig' %}
     <div id="content" class="section">
         <div class="container">
+            {% if mbin_sso_show_first() %}
+                {{ component('login_socials') }}
+            {% endif %}
             {% if not mbin_sso_only_mode() %}
             <form method="post">
                 {% if error %}
@@ -42,13 +45,17 @@
                     <input type="checkbox" name="_remember_me" id="remember" checked>
                 </div>
                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
-                <div class="float-end">
+                <div class="button-flex-hf">
                     <button class="btn btn__primary" type="submit">{{ 'login'|trans }}</button>
                 </div>
             </form>
+            {% 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') }}
         </div>
     </div>
 {% endblock %}
diff --git a/templates/user/register.html.twig b/templates/user/register.html.twig
@@ -16,6 +16,9 @@
     <h1>{{ 'register'|trans }}</h1>
     <div id="content" class="section">
         <div class="container">
+            {% 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 %}
                 <h3 class="text-muted">{{ 'registration_disabled'|trans }}</h3>
             {% 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}) }}
         </div>
     </div>
 {% endblock %}
diff --git 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