mirror of
https://github.com/haiwen/seahub.git
synced 2025-05-09 16:38:20 +00:00
['log in' page] redesigned it (#5850)
This commit is contained in:
llj
GitHub
parent
25e9540d90
commit
0bda48d1de
@ -1449,6 +1449,7 @@ a.sf-popover-item {
|
||||
display:block;
|
||||
padding:1px 5px;
|
||||
font-weight:normal;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#lang-context-selector a:hover {
|
||||
background:#eee;
|
||||
@ -1491,6 +1492,10 @@ a.sf-popover-item {
|
||||
margin:0 auto;
|
||||
box-shadow:0 0 8px #a7a6a9;
|
||||
}
|
||||
#log-in-panel {
|
||||
padding: 30px 25px 15px;
|
||||
width: 336px;
|
||||
}
|
||||
@media (max-width:389px) {
|
||||
.login-panel {
|
||||
width:100%;
|
||||
@ -1500,7 +1505,7 @@ a.sf-popover-item {
|
||||
}
|
||||
.login-panel-logo {
|
||||
display:block;
|
||||
margin:0 auto 20px;
|
||||
margin:0 auto 32px;
|
||||
}
|
||||
.login-panel-hd {
|
||||
font-size:18px;
|
||||
@ -1516,6 +1521,25 @@ a.sf-popover-item {
|
||||
width:248px;
|
||||
font-size:14px;
|
||||
}
|
||||
#log-in-panel .input {
|
||||
width: 264px;
|
||||
height: 34px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
}
|
||||
#toggle-show-password {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
#toggle-show-password:hover {
|
||||
color: #666;
|
||||
}
|
||||
#log-in-panel .remember-me {
|
||||
font-size: 12px;
|
||||
}
|
||||
.login-panel .name-input {
|
||||
border-radius: 3px 3px 0 0;
|
||||
border-bottom-width:0;
|
||||
@ -1539,6 +1563,14 @@ a.sf-popover-item {
|
||||
margin-top:10px;
|
||||
text-align:right;
|
||||
}
|
||||
#login-bottom {
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#login-bottom .bottom-item {
|
||||
border-right: 1px solid #eb8205;
|
||||
}
|
||||
#signup-form .input {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
{% block header_css_class %}hide{% endblock %}
|
||||
|
||||
{% block extra_base_style %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}fontawesome/css/fontawesome-all.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seafile-ui.css" />
|
||||
{% endblock %}
|
||||
|
||||
@ -31,14 +32,17 @@ html, body, #wrapper { height:100%; }
|
||||
|
||||
{% block main_content %}
|
||||
<div class="login-panel-outer-container vh">
|
||||
<div class="login-panel">
|
||||
<div class="login-panel" id="log-in-panel">
|
||||
<h1 class="login-panel-hd">{% trans "Log In" %}</h1>
|
||||
<form action="" method="post" id="login-form">{% csrf_token %}
|
||||
<input type="text" name="login" placeholder="{% trans "Email or Username" %}" aria-label="{% trans "Email or Username" %}" title="{% trans "Email or Username" %}" value="" class="input name-input" /><br />
|
||||
<input type="password" name="password" placeholder="{% trans "Password" %}" aria-label="{% trans "Password" %}" title="{% trans "Password" %}" value="" class="input passwd-input" autocomplete="off" />
|
||||
<input type="text" name="login" placeholder="{% trans "Email or Username" %}" aria-label="{% trans "Email or Username" %}" title="{% trans "Email or Username" %}" value="" class="input mb-3" />
|
||||
<div class="position-relative">
|
||||
<input id="password-input" type="password" name="password" placeholder="{% trans "Password" %}" aria-label="{% trans "Password" %}" title="{% trans "Password" %}" value="" class="input" autocomplete="off" />
|
||||
<i id="toggle-show-password" class="fas fa-eye-slash"></i>
|
||||
</div>
|
||||
|
||||
{% if form.captcha %}
|
||||
<div class="ovhd">
|
||||
<div class="ovhd mt-3">
|
||||
<span id="refresh-captcha" title="{% trans "Refresh" %}" class="icon-refresh op-icon fright"></span>
|
||||
{{ form.captcha }}
|
||||
</div>
|
||||
@ -49,27 +53,24 @@ html, body, #wrapper { height:100%; }
|
||||
{% if form.captcha.errors %}
|
||||
{{ form.captcha.errors}}
|
||||
{% elif form.errors.freeze_account %}
|
||||
<p class="error">{{ form.errors.freeze_account }}</p>
|
||||
<p class="error mt-2">{{ form.errors.freeze_account }}</p>
|
||||
{% elif form.errors.inactive %}
|
||||
<p class="error">{{ form.errors.inactive }}</p>
|
||||
<p class="error mt-2">{{ form.errors.inactive }}</p>
|
||||
{% elif form.errors.not_found %}
|
||||
<p class="error">{{ form.errors.not_found }}</p>
|
||||
<p class="error mt-2">{{ form.errors.not_found }}</p>
|
||||
{% else %}
|
||||
<p class="error">{% trans "Incorrect email or password" %}</p>
|
||||
<p class="error mt-2">{% trans "Incorrect email or password" %}</p>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="error hide"></p>
|
||||
<p class="error mt-2 hide"></p>
|
||||
{% endif %}
|
||||
|
||||
<label class="checkbox-label remember">
|
||||
<label class="checkbox-label mt-3 mb-0 remember-me">
|
||||
<input type="checkbox" name="remember_me" class="vam remember-input" />
|
||||
<span class="vam">{% blocktrans %}Remember me for {{remember_days}} days {% endblocktrans %}</span>
|
||||
</label>
|
||||
{% if enable_change_password %}
|
||||
<a href="{{ SITE_ROOT }}accounts/password/reset/" class="normal forgot-passwd">{% trans "Forgot password?" %}</a>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="submit btn btn-primary btn-block h-auto">{% trans "Log In" %}</button>
|
||||
<button type="submit" class="submit btn btn-primary btn-block h-auto mb-3">{% trans "Log In" %}</button>
|
||||
</form>
|
||||
|
||||
{% if enable_sso %}
|
||||
@ -89,9 +90,12 @@ html, body, #wrapper { height:100%; }
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="login-panel-bottom-container">
|
||||
<div class="login-panel-bottom-container d-flex justify-content-center" id="login-bottom">
|
||||
{% if enable_change_password %}
|
||||
<a href="{{ SITE_ROOT }}accounts/password/reset/" class="normal px-2 bottom-item">{% trans "Forgot password?" %}</a>
|
||||
{% endif %}
|
||||
{% if enable_signup %}
|
||||
<a href="{{ signup_url }}" class="normal fleft" id="sign-up">{% trans "Signup" %}</a>
|
||||
<a href="{{ signup_url }}" class="normal px-2 bottom-item" id="sign-up">{% trans "Signup" %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -102,7 +106,16 @@ html, body, #wrapper { height:100%; }
|
||||
{% block extra_script %}
|
||||
<script type="text/javascript">
|
||||
$('.login-panel-outer-container').prepend($($('#logo').html()).attr({'height': 40}).addClass('login-panel-logo'));
|
||||
$('.login-panel-bottom-container').append($('#lang').removeClass('fright'));
|
||||
$('.login-panel-bottom-container').append($('#lang').removeClass('fright').addClass('px-2'));
|
||||
|
||||
$('#toggle-show-password').click(function() {
|
||||
$(this).toggleClass('fa-eye-slash fa-eye');
|
||||
if ($(this).hasClass('fa-eye-slash')) {
|
||||
$('#password-input').attr('type', 'password');
|
||||
} else {
|
||||
$('#password-input').attr('type', 'text');
|
||||
}
|
||||
});
|
||||
|
||||
var $el = $('.login-panel-outer-container');
|
||||
var elHeight = $el.outerHeight();
|
||||
@ -110,7 +123,6 @@ var wdHeight = $(window).height();
|
||||
if (wdHeight > elHeight) {
|
||||
$el.css({'margin-top': (wdHeight - elHeight)/2});
|
||||
}
|
||||
$('#lang').css({'margin-left': $('#sign-up').outerWidth() + 10});
|
||||
$el.removeClass('vh');
|
||||
|
||||
$('#lang-context').on('click', function() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user