vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: login style

Browse source
This commit is contained in:
prssanna 2020-12-04 15:32:25 +05:30
parent e727e0a85f
commit d36ff179ff
3 changed files with 115 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
frappe/public/scss/login.scss
View file

@ -11,20 +11,22 @@
.for-login,
.for-forgot,
.for-signup {
.for-signup,
.for-email-login {
display: none;
margin: 70px 0;
@include media-breakpoint-up(sm) {
.page-card {
padding: 30px;
padding: 45px;
background-color: #fff;
box-shadow: var(--shadow-base);
}
}
.page-card {
max-width: 420px;
margin: 70px auto;
max-width: 470px;
margin: 0 auto;
border-radius: var(--border-radius-md);
form {
@ -38,58 +40,6 @@
.page-card-actions {
margin-top: var(--margin-lg);
.sign-up-message {
margin-top: var(--margin-md);
color: var(--text-light);
font-size: var(--text-md);
a {
font-size: var(--text-md);
color: var(--primary);
}
}
.social-logins {
margin: var(--margin-md) 0;
font-size: var(--text-md);
.social-login-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: -4px;
margin-right: -4px;
margin-top: var(--margin-md);
.login-button-wrapper {
@include media-breakpoint-up(md) {
min-width: 33.33%;
}
min-width: 50%;
padding: 0 4px;
margin-bottom: var(--margin-sm);
}
.btn-social {
font-size: var(--text-sm);
color: var(--text-gray-700);
box-shadow: none;
display: flex;
place-content: center;
&.btn-salesforce {
i {
color: var(--blue-400);
}
}
img {
margin-right: var(--padding-xs);
}
}
}
}
}
.page-card-body {
@ -156,6 +106,54 @@
font-size: 12px;
}
}
.btn-login-option {
font-size: var(--text-md);
font-weight: 500;
color: var(--text-gray-700);
background: var(--gray-100);
box-shadow: none;
border: none;
display: flex;
place-content: center;
&.btn-salesforce {
i {
color: var(--blue-400);
}
}
img {
margin-right: var(--padding-xs);
}
&:hover {
border: none;
background: var(--gray-300);
}
}
.social-logins {
margin: var(--margin-md) 0;
font-size: var(--text-md);
.social-login-buttons {
margin-top: var(--margin-md);
.login-button-wrapper {
@include media-breakpoint-up(md) {
min-width: 33.33%;
}
min-width: 50%;
padding: 0 4px;
margin-bottom: var(--margin-sm);
}
}
}
.login-divider {
margin: var(--margin-md) 0;
}
}
.page-card-head {
@ -163,7 +161,7 @@
text-align: center;
font-size: var(--text-xl);
font-weight: 600;
margin-bottom: var(--margin-xl);
margin-bottom: var(--margin-lg);
img {
max-height: 42px;
@ -177,6 +175,18 @@
}
}
.sign-up-message {
margin-top: var(--margin-md);
color: var(--text-light);
font-size: var(--text-md);
a {
font-size: var(--text-md);
color: var(--primary);
}
}
.invalid-login {
-webkit-animation: wiggle 0.5s linear;
}

6
frappe/templates/includes/login/login.js
View file

@ -94,6 +94,7 @@ login.route = function () {
login.reset_sections = function (hide) {
if (hide || hide === undefined) {
$("section.for-login").toggle(false);
$("section.for-email-login").toggle(false);
$("section.for-forgot").toggle(false);
$("section.for-signup").toggle(false);
}
@ -106,6 +107,11 @@ login.reset_sections = function (hide) {
login.login = function () {
login.reset_sections();
$(".for-login").toggle(true);
}
login.email = function () {
login.reset_sections();
$(".for-email-login").toggle(true);
$("#login_email").focus();
}

64
frappe/www/login.html
View file

@ -21,7 +21,43 @@
<img class="app-logo" src="{{ logo }}">
<h4>{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
</div>
<div class="page-card-body">
<div class="social-logins text-center">
{%- if social_login -%}
<div class="social-login-buttons">
{% for provider in provider_logins %}
<div class="login-button-wrapper">
<a href="{{ provider.auth_url }}"
class="btn btn-block btn-default btn-sm btn-login-option btn-{{ provider.name }}">
{{ provider.icon }} {{ _("Login With") }} {{ provider.provider_name }}</a>
</div>
{% endfor %}
<p class="text-muted login-divider">{{ _("or") }}</p>
</div>
{%- endif -%}
</div>
<a href="#email"
class="btn btn-block btn-default btn-sm btn-login-option">
{{ _("Login With Email") }}</a>
</div>
</form>
</div>
{%- if not disable_signup -%}
<div class="text-center sign-up-message">
{{ _("Don't have an account?") }}
<a href="#signup">{{ _("Sign up") }}</a>
</div>
{%- endif -%}
</section>
<section class='for-email-login'>
<div class="login-content page-card">
<form class="form-signin form-login" role="form">
<div class="page-card-head">
<img class="app-logo" src="{{ logo }}">
<h4>{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
</div>
<div class="page-card-body">
<div class="form-group">
<label class="form-label sr-only" for="login_email">{{ login_label or _("Email")}}</label>
@ -71,31 +107,15 @@
{{ _("Login with LDAP") }}</button>
{% endif %}
<div class="social-logins text-center">
{%- if social_login -%}
<p class="text-muted">{{ _("or") }}</p>
<div class="social-login-buttons">
{% for provider in provider_logins %}
<div class="login-button-wrapper">
<a href="{{ provider.auth_url }}"
class="btn btn-block btn-default btn-sm btn-social btn-{{ provider.name }}">
{{ provider.icon }}{{ provider.provider_name }}</a>
</div>
{% endfor %}
</div>
{%- endif -%}
</div>
{%- if not disable_signup -%}
<div class="text-center sign-up-message">
{{ _("Don't have an account?") }}
<a href="#signup">{{ _("Sign up") }}</a>
</div>
{%- endif -%}
</div>
</form>
</div>
{%- if not disable_signup -%}
<div class="text-center sign-up-message">
{{ _("Don't have an account?") }}
<a href="#signup">{{ _("Sign up") }}</a>
</div>
{%- endif -%}
</section>
<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
<div class="login-content page-card">