Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restyle login/register social and action button sections #706

Merged
merged 13 commits into from
May 10, 2024
Merged
29 changes: 22 additions & 7 deletions assets/styles/components/_login.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down
11 changes: 11 additions & 0 deletions assets/styles/layout/_forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 4 additions & 1 deletion src/DTO/SettingsDto.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
) {
}

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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,
];
}
}
1 change: 1 addition & 0 deletions src/Form/SettingsType.php
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
3 changes: 2 additions & 1 deletion src/Service/SettingsManager.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}
}
Expand Down
1 change: 1 addition & 0 deletions src/Twig/Extension/SettingsExtension.php
Original file line number Diff line number Diff line change
Expand Up @@ -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']),
];
}
}
5 changes: 5 additions & 0 deletions src/Twig/Runtime/SettingsExtensionRuntime.php
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
}
4 changes: 4 additions & 0 deletions templates/admin/settings.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
57 changes: 33 additions & 24 deletions templates/components/login_socials.html.twig
Original file line number Diff line number Diff line change
@@ -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 %}
11 changes: 6 additions & 5 deletions templates/components/user_form_actions.html.twig
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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>
10 changes: 7 additions & 3 deletions templates/resend_verification_email/resend.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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}) }}
Expand Down
3 changes: 1 addition & 2 deletions templates/reset_password/request.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
3 changes: 1 addition & 2 deletions templates/reset_password/reset.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
11 changes: 9 additions & 2 deletions templates/user/login.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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 %}
9 changes: 6 additions & 3 deletions templates/user/register.html.twig
Original file line number Diff line number Diff line change
Expand Up @@ -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') %}
Expand Down Expand Up @@ -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 %}
2 changes: 2 additions & 0 deletions translations/messages.en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading