feat: add social options to login design
This commit is contained in:
parent
816bd39383
commit
611bb79c4f
2 changed files with 35 additions and 19 deletions
|
|
@ -20,9 +20,24 @@
|
|||
|
||||
.sign-up-message {
|
||||
margin-top: var(--margin-md);
|
||||
> * {
|
||||
color: var(--text-light);
|
||||
color: var(--text-light);
|
||||
font-size: var(--text-sm);
|
||||
|
||||
a {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.social-logins {
|
||||
margin: var(--margin-md) 0;
|
||||
.social-login-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: var(--padding-sm);
|
||||
}
|
||||
.btn-social {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,28 +63,29 @@
|
|||
{{ _("Login with LDAP") }}</button>
|
||||
{% endif %}
|
||||
|
||||
<div class="social-logins text-center">
|
||||
{%- if social_login -%}
|
||||
<p class="text-muted small">{{ _("or") }}</p>
|
||||
|
||||
<div class="social-login-buttons">
|
||||
{% for provider in provider_logins %}
|
||||
<a href="{{ provider.auth_url }}"
|
||||
class="btn btn-secondary btn-sm btn-social btn-{{ provider.name }}">
|
||||
{{ provider.icon }} {{ provider.provider_name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- if not disable_signup -%}
|
||||
<p class="text-center sign-up-message">
|
||||
<a href="#signup">{{ _("Don't have an account? Sign up") }}</a>
|
||||
</p>
|
||||
<div class="text-center sign-up-message">
|
||||
{{ _("Don't have an account?") }}
|
||||
<a href="#signup">{{ _("Sign up") }}</a>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class='form-footer'>
|
||||
<div class='social-logins'>
|
||||
{%- if social_login -%}
|
||||
<h6>{{ _("Or login with") }}</h6>
|
||||
|
||||
<p class="text-center">
|
||||
{% for provider in provider_logins %}
|
||||
<a href="{{ provider.auth_url }}" class="btn btn-default btn-sm btn-social btn-{{ provider.name }}">
|
||||
{{ provider.icon }} {{ provider.provider_name }}</a>
|
||||
{% endfor %}
|
||||
</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
|
||||
<div class="login-content page-card" style="margin-top: 20px;">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue