mirror of https://github.com/jumpserver/jumpserver
perf: Modify the layout to flex
parent
c4a348aac6
commit
6095e9c9bd
|
@ -69,23 +69,27 @@
|
|||
}
|
||||
|
||||
.login-content {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 500px;
|
||||
width: 1000px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #f3f3f3;
|
||||
{#height: calc(100vh - (100vh - 470px) / 3);#}
|
||||
{#height: calc(100vh - (100vh - 470px) / 3);#}
|
||||
}
|
||||
|
||||
|
||||
.captcha {
|
||||
float: right;
|
||||
}
|
||||
|
@ -138,7 +142,7 @@
|
|||
}
|
||||
|
||||
.jms-title {
|
||||
{#padding: 22px 10px 10px;#}
|
||||
{#padding: 22px 10px 10px;#}
|
||||
}
|
||||
|
||||
.more-login-items {
|
||||
|
@ -318,7 +322,7 @@
|
|||
</div>
|
||||
<div class="left-form-box {% if not form.challenge and not form.captcha %} no-captcha-challenge {% endif %}">
|
||||
<div class="mobile-logo" style="padding-bottom: 45px; box-sizing: border-box">
|
||||
<div class="jms-title">
|
||||
<div class="jms-title">
|
||||
<img style="width: 60px; height: 60px" src="{{ INTERFACE.logo_logout }}" alt="Logo"/>
|
||||
<span style="padding-left: 10px">{{ INTERFACE.login_title }}</span>
|
||||
</div>
|
||||
|
@ -330,17 +334,18 @@
|
|||
</h2>
|
||||
<ul class=" nav navbar-top-links navbar-right">
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle login-page-language" data-bs-toggle="dropdown" href="#" target="_blank">
|
||||
<a class="dropdown-toggle login-page-language" data-bs-toggle="dropdown" href="#"
|
||||
target="_blank">
|
||||
<i class="fa fa-globe fa-lg" style="margin-right: 2px"></i>
|
||||
<span>{{ current_lang.title }}<b class="caret"></b></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu profile-dropdown dropdown-menu-right">
|
||||
{% for lang in langs %}
|
||||
<li>
|
||||
<a href="{% url 'i18n-switch' lang=lang.code %}">
|
||||
<span>{{ lang.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<a href="{% url 'i18n-switch' lang=lang.code %}">
|
||||
<span>{{ lang.title }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
|
@ -350,11 +355,11 @@
|
|||
<form id="login-form" action="" method="post" role="form" novalidate="novalidate">
|
||||
{% csrf_token %}
|
||||
<div style="line-height: 17px;margin-bottom: 20px;color: #999999;">
|
||||
{% if form.non_field_errors %}
|
||||
<p class="help-block red-fonts">
|
||||
{{ form.non_field_errors.as_text }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% if form.non_field_errors %}
|
||||
<p class="help-block red-fonts">
|
||||
{{ form.non_field_errors.as_text }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% bootstrap_field form.username show_label=False %}
|
||||
|
@ -365,15 +370,15 @@
|
|||
name="{{ form.password.html_name }}">
|
||||
{% if form.password.errors %}
|
||||
<p class="help-block" style="text-align: left">
|
||||
{{ form.password.errors.as_text }}
|
||||
</p>
|
||||
{{ form.password.errors.as_text }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if form.challenge %}
|
||||
{% bootstrap_field form.challenge show_label=False %}
|
||||
{% elif form.mfa_type %}
|
||||
<div class="form-group" style="display: flex">
|
||||
{% include '_mfa_login_field.html' %}
|
||||
{% include '_mfa_login_field.html' %}
|
||||
</div>
|
||||
{% elif form.captcha %}
|
||||
<div class="captcha-field">
|
||||
|
@ -403,25 +408,25 @@
|
|||
</div>
|
||||
|
||||
{% if demo_mode %}
|
||||
<div>
|
||||
<p class="red-fonts" style='text-align: center;'>
|
||||
{% trans 'Username' %}: demo {% trans 'Password' %}: jumpserver
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="red-fonts" style='text-align: center;'>
|
||||
{% trans 'Username' %}: demo {% trans 'Password' %}: jumpserver
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="more-login">
|
||||
{% if auth_methods %}
|
||||
<div class="more-methods-title {{ current_lang.code }}">
|
||||
{% trans "More login options" %}
|
||||
{% trans "More login options" %}
|
||||
</div>
|
||||
<div class="more-login-items">
|
||||
{% for method in auth_methods %}
|
||||
<a href="{{ method.url }}" class="more-login-item">
|
||||
<i class="fa"><img src="{{ method.logo }}" height="15" width="15"/> </i>
|
||||
{{ method.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% for method in auth_methods %}
|
||||
<a href="{{ method.url }}" class="more-login-item">
|
||||
<i class="fa"><img src="{{ method.logo }}" height="15" width="15"/> </i>
|
||||
{{ method.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center" style="display: inline-block;">
|
||||
|
@ -447,14 +452,16 @@
|
|||
$('#password-hidden').val(passwordEncrypted); //返回给密码输入input
|
||||
$('#login-form').submit(); //post提交
|
||||
}
|
||||
|
||||
function checkHealth() {
|
||||
let url = "{% url 'health' %}";
|
||||
let url = "{% url 'health' %}";
|
||||
requestApi({
|
||||
url: url,
|
||||
method: "GET",
|
||||
flash_message: false,
|
||||
})
|
||||
}
|
||||
|
||||
setInterval(checkHealth, 30 * 1000);
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
@ -15,41 +15,55 @@
|
|||
<style>
|
||||
.passwordBox {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: auto;
|
||||
padding: 100px 20px 20px 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ibox-content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.ibox-context-margin {
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
{% block custom_head_css_js %} {% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="gray-bg">
|
||||
<div class="passwordBox animated fadeInDown">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="ibox-content">
|
||||
<h2 class="font-bold">
|
||||
{% block title %}{% endblock %}
|
||||
</h2>
|
||||
<div class="ibox-context-margin">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
<div class="passwordBox animated fadeInDown">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="ibox-content">
|
||||
<h2 class="font-bold">
|
||||
{% block title %}{% endblock %}
|
||||
</h2>
|
||||
<div class="ibox-context-margin">
|
||||
{% block content %} {% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{% include '_copyright.html' %}
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{% include '_copyright.html' %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
{% include '_foot_js.html' %}
|
||||
{% block custom_foot_js %} {% endblock %}
|
||||
|
|
|
@ -18,14 +18,9 @@
|
|||
}
|
||||
|
||||
.markdown-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 285px;
|
||||
transform: translate(-50%, -50%);
|
||||
@media (min-width: 768px) {
|
||||
top: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-footer p {
|
||||
|
@ -55,7 +50,7 @@
|
|||
});
|
||||
const markdownContent = `{{ INTERFACE.footer_content|escapejs }}`;
|
||||
const markdownRef = document.getElementById('markdown-output');
|
||||
|
||||
|
||||
if (markdownRef && markdownContent) {
|
||||
const renderedContent = md.render(markdownContent.trim());
|
||||
markdownRef.innerHTML = renderedContent;
|
||||
|
|
|
@ -3,39 +3,59 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> {{ INTERFACE.login_title }} </title>
|
||||
<link rel="shortcut icon" href="{{ INTERFACE.favicon }}" type="image/x-icon">
|
||||
{% include '_head_css_js.html' %}
|
||||
<link href="{% static 'css/jumpserver.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{% static 'css/otp.css' %}" />
|
||||
<script src="{% static "js/plugins/qrcode/qrcode.js" %}"></script>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> {{ INTERFACE.login_title }} </title>
|
||||
<link rel="shortcut icon" href="{{ INTERFACE.favicon }}" type="image/x-icon">
|
||||
{% include '_head_css_js.html' %}
|
||||
<link href="{% static 'css/jumpserver.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'css/style.css' %}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{% static 'css/otp.css' %}"/>
|
||||
<script src="{% static "js/plugins/qrcode/qrcode.js" %}"></script>
|
||||
<style>
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
<body style="background-color: #f3f3f4">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href="{% url 'index' %}">
|
||||
<img src="{{ INTERFACE.logo_logout }}" alt="" width="50px" height="50px"/>
|
||||
</a>
|
||||
<span style="font-size: 21px; line-height: 50px">{{ INTERFACE.login_title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{% url 'index' %}">{% trans 'Home page' %}</a>
|
||||
</div>
|
||||
</header>
|
||||
<body>
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
<footer>
|
||||
<div style="margin-top: 100px;">
|
||||
{% include '_copyright.html' %}
|
||||
</div>
|
||||
</footer>
|
||||
{% include '_foot_js.html' %}
|
||||
</body>
|
||||
header {
|
||||
width: 100%;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body style="background-color: #f3f3f4">
|
||||
<header>
|
||||
<div class="logo">
|
||||
<a href="{% url 'index' %}">
|
||||
<img src="{{ INTERFACE.logo_logout }}" alt="" width="50px" height="50px"/>
|
||||
</a>
|
||||
<span style="font-size: 21px; line-height: 50px">{{ INTERFACE.login_title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{% url 'index' %}">{% trans 'Home page' %}</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="wrapper">
|
||||
{% block body %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<footer>
|
||||
<div style="margin-top: 100px;">
|
||||
{% include '_copyright.html' %}
|
||||
</div>
|
||||
</footer>
|
||||
{% include '_foot_js.html' %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
@ -20,11 +20,11 @@
|
|||
<div id="wrapper">
|
||||
<div id="page-wrapper" class="gray-bg">
|
||||
{% include '_header_bar.html' %}
|
||||
<div class="alert alert-info help-message alert-dismissable page-message" style="display: none">
|
||||
<button aria-hidden="true" data-dismiss="alert" class="close hide-btn" type="button">×</button>
|
||||
{% block help_message %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<div class="alert alert-info help-message alert-dismissable page-message" style="display: none">
|
||||
<button aria-hidden="true" data-dismiss="alert" class="close hide-btn" type="button">×</button>
|
||||
{% block help_message %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% include '_message.html' %}
|
||||
{% block content %}{% endblock %}
|
||||
{% include '_footer.html' %}
|
||||
|
@ -35,23 +35,23 @@
|
|||
{% include '_foot_js.html' %}
|
||||
{% block custom_foot_js %} {% endblock %}
|
||||
<script>
|
||||
function getMessagePathKey() {
|
||||
var path = window.location.pathname;
|
||||
var key = 'message_' + btoa(path);
|
||||
return key
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
var pathKey = getMessagePathKey();
|
||||
var hidden = window.localStorage.getItem(pathKey);
|
||||
var hasMessage = $('.page-message').text().trim().length > 5;
|
||||
if (!hidden && hasMessage) {
|
||||
$(".help-message").show();
|
||||
function getMessagePathKey() {
|
||||
var path = window.location.pathname;
|
||||
var key = 'message_' + btoa(path);
|
||||
return key
|
||||
}
|
||||
}).on('click', '.hide-btn', function () {
|
||||
var pathKey = getMessagePathKey();
|
||||
window.localStorage.setItem(pathKey, '1')
|
||||
})
|
||||
|
||||
$(document).ready(function () {
|
||||
var pathKey = getMessagePathKey();
|
||||
var hidden = window.localStorage.getItem(pathKey);
|
||||
var hasMessage = $('.page-message').text().trim().length > 5;
|
||||
if (!hidden && hasMessage) {
|
||||
$(".help-message").show();
|
||||
}
|
||||
}).on('click', '.hide-btn', function () {
|
||||
var pathKey = getMessagePathKey();
|
||||
window.localStorage.setItem(pathKey, '1')
|
||||
})
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue